feat: change all instances of .is-selected to .is-open

BREAKING CHANGE: Use .is-open to indicate the popover is shown, not .is-selected

Author: lazd

components/inputgroup/metadata/combobox.yml

@@ -53,7 +53,7 @@ examples:
         <div class="spectrum-Textfield spectrum-InputGroup-textfield">
           <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
         </div>
-        <button class="spectrum-Picker spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
+        <button class="spectrum-Picker spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-Chevron100" />
           </svg>
@@ -125,7 +125,7 @@ examples:
         <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
           <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
         </div>
-        <button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
+        <button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-Chevron100" />
           </svg>

components/picker/index.css

@@ -173,7 +173,7 @@ governing permissions and limitations under the License.
   }
 
   &:active,
-  &.is-selected {
+  &.is-open {
     background-color: var(--spectrum-picker-m-background-color-down);
     border-color: var(--spectrum-picker-m-border-color-down);
 
@@ -208,7 +208,7 @@ governing permissions and limitations under the License.
     }
 
     &:active,
-    &.is-selected {
+    &.is-open {
       border-color: var(--spectrum-picker-m-border-color-error-down);
     }
 
@@ -280,7 +280,7 @@ governing permissions and limitations under the License.
   }
 
   &:active,
-  &.is-selected {
+  &.is-open {
     background-color: var(--spectrum-picker-quiet-m-background-color-down);
     border-color: var(--spectrum-picker-quiet-m-border-color-down);
 

components/searchwithin/metadata/searchwithin.yml

@@ -30,7 +30,7 @@ examples:
 
       <h4>Open</h4>
       <form class="spectrum-SearchWithin" style="margin-bottom: 180px;">
-        <button type="button" class="spectrum-Picker spectrum-SearchWithin-picker is-open is-selected" aria-haspopup="true">
+        <button type="button" class="spectrum-Picker spectrum-SearchWithin-picker is-open" aria-haspopup="true">
           <span class="spectrum-Picker-label">All</span>
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-Chevron100" />

components/tabs/metadata/tabs.yml

@@ -369,7 +369,7 @@ examples:
 
       <h4 style="margin-top: 62px;">Open</h4>
       <div class="spectrum-Tabs spectrum-Tabs--horizontal" style="width: 409px">
-        <button class="spectrum-Picker spectrum-Picker--quiet is-selected" aria-haspopup="true">
+        <button class="spectrum-Picker spectrum-Picker--quiet is-open" aria-haspopup="true">
           <span class="spectrum-Picker-label">Tab 1</span>
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-Chevron100" />
@@ -404,7 +404,7 @@ examples:
     markup: |
       <h4>Closed</h4>
       <div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--compact" style="width: 409px">
-          <button class="spectrum-Picker spectrum-Picker--quiet is-selected" aria-haspopup="true">
+          <button class="spectrum-Picker spectrum-Picker--quiet is-open" aria-haspopup="true">
             <span class="spectrum-Picker-label">Tab 1</span>
             <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-Chevron100" />
@@ -415,7 +415,7 @@ examples:
 
       <h4 style="margin-top: 62px;">Open</h4>
       <div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--compact" style="width: 409px">
-          <button class="spectrum-Picker spectrum-Picker--quiet is-open is-selected" aria-haspopup="true">
+          <button class="spectrum-Picker spectrum-Picker--quiet is-open" aria-haspopup="true">
             <span class="spectrum-Picker-label">Tab 1</span>
             <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-Chevron100" />