fix: wip fix more components

backstop_data/packageDependentMap.json

@@ -80,6 +80,7 @@
   [
     "@spectrum-css/buttongroup",
     [
+      "@spectrum-css/dialog",
       "@spectrum-css/rule"
     ]
   ],

components/actiongroup/index.css

@@ -23,8 +23,17 @@ governing permissions and limitations under the License.
     flex-shrink: 0;
   }
 
-  .spectrum-ActionGroup-item + .spectrum-ActionGroup-item {
-    margin-inline-start: var(--spectrum-actionbuttongroup-text-button-gap-x);
+  &:not(.spectrum-ActionGroup--vertical)&:not(.spectrum-ActionGroup--compact) {
+    margin-block-start: calc(-1 * var(--spectrum-actionbuttongroup-text-button-gap-y));
+
+    .spectrum-ActionGroup-item {
+      flex-shrink: 0;
+      margin-block-start: var(--spectrum-actionbuttongroup-text-button-gap-y);
+
+      &:not(:last-child) {
+        margin-inline-end: var(--spectrum-actionbuttongroup-text-button-gap-x);
+      }
+    }
   }
 }
 

components/assetlist/index.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import '../commons/index.css';
+@import "../commons/index.css";
 
 :root {
   --spectrum-miller-column-chevron-height: 10px;
@@ -35,24 +35,26 @@ governing permissions and limitations under the License.
   block-size: var(--spectrum-miller-column-item-height);
 
   padding-block: 0;
-  padding-inline: var(--spectrum-miller-column-item-padding-left) var(--spectrum-miller-column-item-padding-right);
+  padding-inline: var(--spectrum-miller-column-item-padding-left)
+    var(--spectrum-miller-column-item-padding-right);
   margin-block: 0 var(--spectrum-miller-column-item-margin-bottom);
   margin-inline: 0;
 
   border-radius: var(--spectrum-miller-column-item-border-radius);
 
-  transition: background-color var(--spectrum-global-animation-duration-100) ease-in-out;
+  transition: background-color var(--spectrum-global-animation-duration-100)
+    ease-in-out;
 
-  font-size: var(--spectrum-selectlist-option-text-size);
-  font-weight: var(--spectrum-selectlist-option-text-font-weight);
+  font-size: var(--spectrum-listitem-option-text-size);
+  font-weight: var(--spectrum-listitem-option-text-font-weight);
   font-style: normal;
 
   cursor: pointer;
 
   outline: none;
 
   &::before {
-    content: '';
+    content: "";
 
     position: absolute;
     inset-inline-start: 0;

components/breadcrumb/index.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import '../commons/index.css';
+@import "../commons/index.css";
 
 .spectrum-Breadcrumbs {
   display: flex;
@@ -31,8 +31,8 @@ governing permissions and limitations under the License.
   /* Fix alignment, it's not quite centered */
   inset-block-start: var(--spectrum-global-dimension-size-10);
 
-  inline-size: var(--spectrum-breadcrumb-ui-icon-width);
-  block-size: var(--spectrum-breadcrumb-ui-icon-height);
+  inline-size: var(--spectrum-breadcrumb-separator-icon-width);
+  block-size: var(--spectrum-breadcrumb-separator-icon-height);
 
   transform: logical scale(1) rotate(0deg);
 
@@ -98,7 +98,6 @@ governing permissions and limitations under the License.
   }
 }
 
-
 .spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before,
 .spectrum-Breadcrumbs-itemLink:focus-ring:before {
   position: absolute;
@@ -114,7 +113,7 @@ governing permissions and limitations under the License.
   border-style: solid;
   border-radius: var(--spectrum-breadcrumb-item-border-radius);
 
-  content: '';
+  content: "";
   pointer-events: none;
 }
 

components/breadcrumb/skin.css

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-Breadcrumbs-item {
-  color: var(--spectrum-breadcrumb-text-color);
+  color: var(--spectrum-breadcrumb-item-text-color);
 
   &.is-dragged {
     .spectrum-Breadcrumbs-itemLink {
@@ -25,48 +25,48 @@ governing permissions and limitations under the License.
   }
 
   .spectrum-Breadcrumbs-itemSeparator {
-    color: var(--spectrum-breadcrumb-ui-icon-color);
+    color: var(--spectrum-breadcrumb-separator-icon-color);
   }
 
   .spectrum-Breadcrumbs-itemLink {
     color: inherit;
 
     &:hover {
-      color: var(--spectrum-breadcrumb-text-color-hover);
+      color: var(--spectrum-breadcrumb-item-text-color-hover);
     }
 
     &:focus-ring {
-      color: var(--spectrum-breadcrumb-text-color-key-focus);
+      color: var(--spectrum-breadcrumb-item-text-color-key-focus);
 
       &:before {
         border-color: var(--spectrum-breadcrumb-item-border-color-key-focus);
       }
     }
 
     &:active {
-      color: var(--spectrum-breadcrumb-text-color-down);
+      color: var(--spectrum-breadcrumb-item-text-color-down);
       border-block-end: 0;
     }
 
     &.is-disabled {
-      color: var(--spectrum-label-text-color-disabled);
+      color: var(--spectrum-breadcrumb-item-text-color-disabled);
     }
   }
 
   &.is-selected,
   &:last-of-type {
-    color: var(--spectrum-breadcrumb-text-color-down);
+    color: var(--spectrum-breadcrumb-item-text-color-down);
   }
 
   &.is-selected {
     ~ .spectrum-Breadcrumb {
       &:last-of-type {
-        color: var(--spectrum-breadcrumb-text-color);
+        color: var(--spectrum-breadcrumb-item-text-color);
       }
     }
     .spectrum-Breadcrumbs-itemLink {
       &:focus-ring {
-        color: var(--spectrum-breadcrumb-text-color-down);
+        color: var(--spectrum-breadcrumb-item-text-color-down);
         border-block-end: 0;
       }
     }

components/button/skin.css

@@ -347,6 +347,10 @@ governing permissions and limitations under the License.
     box-shadow: 0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus) var(--spectrum-actionbutton-border-color-key-focus);
     color: var(--spectrum-actionbutton-text-color-key-focus);
 
+    &:active {
+      border-color: var(--spectrum-actionbutton-border-color-key-focus);
+    }
+
     .spectrum-Icon {
       color: var(--spectrum-actionbutton-icon-color-key-focus);
     }
@@ -395,6 +399,10 @@ governing permissions and limitations under the License.
       border-color: var(--spectrum-actionbutton-border-color-selected-key-focus);
       color: var(--spectrum-actionbutton-text-color-selected-key-focus);
 
+      &:active {
+        border-color: var(--spectrum-actionbutton-border-color-key-focus);
+      }
+
       .spectrum-Icon {
         color: var(--spectrum-actionbutton-icon-color-selected-key-focus);
       }

components/calendar/index.css

@@ -10,16 +10,23 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import '../commons/index.css';
+@import "../commons/index.css";
 
 :root {
   --spectrum-calendar-border-radius-reset: 0;
   --spectrum-calendar-border-width-reset: 0;
   --spectrum-calendar-margin-y: 24px;
   --spectrum-calendar-margin-x: 32px;
-  --spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7);
+  --spectrum-calendar-width: calc(
+    (
+        var(--spectrum-calendar-day-width) +
+          var(--spectrum-calendar-day-padding) * 2
+      ) * 7
+  );
   --spectrum-calendar-button-gap: var(--spectrum-global-dimension-size-40);
-  --spectrum-calendar-title-text-letter-spacing: var(--spectrum-detail-text-letter-spacing);
+  --spectrum-calendar-title-text-letter-spacing: var(
+    --spectrum-detail-m-text-letter-spacing
+  );
 }
 
 .spectrum-Calendar {
@@ -46,7 +53,6 @@ governing permissions and limitations under the License.
   order: 1;
   flex-grow: 1;
 
-
   text-align: center;
   overflow: hidden;
   white-space: nowrap;
@@ -154,12 +160,17 @@ governing permissions and limitations under the License.
   border: var(--spectrum-calendar-day-border-size-key-focus) solid transparent;
 
   font-size: var(--spectrum-calendar-day-text-size);
-  line-height: calc(var(--spectrum-calendar-day-width) - var(--spectrum-calendar-day-border-size-key-focus) * 2);
+  line-height: calc(
+    var(--spectrum-calendar-day-width) -
+      var(--spectrum-calendar-day-border-size-key-focus) * 2
+  );
   white-space: nowrap;
 
   cursor: pointer;
 
-  &:lang(ja), &:lang(zh), &:lang(ko) {
+  &:lang(ja),
+  &:lang(zh),
+  &:lang(ko) {
     font-size: var(--spectrum-calendar-day-text-size-han);
   }
 
@@ -173,10 +184,12 @@ governing permissions and limitations under the License.
   }
 
   &:before {
-    content: '';
+    content: "";
     position: absolute;
     inset-block-start: calc(50% - calc(var(--spectrum-calendar-day-width) / 2));
-    inset-inline-start: calc(50% - calc(var(--spectrum-calendar-day-width) / 2));
+    inset-inline-start: calc(
+      50% - calc(var(--spectrum-calendar-day-width) / 2)
+    );
     box-sizing: border-box;
     inline-size: var(--spectrum-calendar-day-width);
     block-size: var(--spectrum-calendar-day-height);
@@ -205,13 +218,19 @@ governing permissions and limitations under the License.
     border-radius: var(--spectrum-calendar-border-radius-reset);
 
     /* Todo: Calculate this */
-    inline-size: calc(var(--spectrum-calendar-day-width) + calc(var(--spectrum-calendar-day-padding) * 2));
+    inline-size: calc(
+      var(--spectrum-calendar-day-width) +
+        calc(var(--spectrum-calendar-day-padding) * 2)
+    );
 
     &.is-range-start,
     &.is-range-end,
     &.is-selection-start,
     &.is-selection-end {
-      inline-size: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding));
+      inline-size: calc(
+        var(--spectrum-calendar-day-width) +
+          var(--spectrum-calendar-day-padding)
+      );
     }
 
     &.is-selection-start,
@@ -229,7 +248,7 @@ governing permissions and limitations under the License.
 
         border-radius: var(--spectrum-calendar-day-width);
 
-        content: '';
+        content: "";
       }
     }
 

components/checkbox/metadata/checkbox.yml

@@ -1,6 +1,6 @@
 name: Checkbox
 status: Verified
-description: 'Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.'
+description: "Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected."
 SpectrumSiteSlug: https://spectrum.adobe.com/page/checkbox/
 examples:
   - id: checkbox-default
@@ -55,10 +55,10 @@ examples:
         </span>
         <span class="spectrum-Checkbox-label">Checkbox with an extraordinarily long label please don't do this but if you did it should truncate text when it gets longer than the container which contains the checkbox which has an unacceptably long label</span>
       </label>
-  - id: checkbox-quiet
-    name: Quiet
+  - id: checkbox-emphasized
+    name: Emphasized
     markup: |
-      <label class="spectrum-Checkbox spectrum-Checkbox--quiet">
+      <label class="spectrum-Checkbox spectrum-Checkbox--emphasized">
         <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
         <span class="spectrum-Checkbox-box">
           <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -70,7 +70,7 @@ examples:
         </span>
         <span class="spectrum-Checkbox-label">Checkbox</span>
       </label>
-      <label class="spectrum-Checkbox spectrum-Checkbox--quiet">
+      <label class="spectrum-Checkbox spectrum-Checkbox--emphasized">
         <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
         <span class="spectrum-Checkbox-box">
           <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -82,7 +82,7 @@ examples:
         </span>
         <span class="spectrum-Checkbox-label">Checkbox</span>
       </label>
-      <label class="spectrum-Checkbox spectrum-Checkbox--quiet is-indeterminate">
+      <label class="spectrum-Checkbox spectrum-Checkbox--emphasized is-indeterminate">
         <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
         <span class="spectrum-Checkbox-box">
           <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -95,7 +95,7 @@ examples:
         <span class="spectrum-Checkbox-label">Checkbox</span>
       </label>
       <br>
-      <label class="spectrum-Checkbox spectrum-Checkbox--quiet">
+      <label class="spectrum-Checkbox spectrum-Checkbox--emphasized">
         <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
         <span class="spectrum-Checkbox-box">
           <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">