@getflip/swirl-components 0.461.0 → 0.462.0

package/dist/collection/components/swirl-checkbox/swirl-checkbox.css

@@ -36,11 +36,11 @@
     }
 
 .checkbox--variant-card:hover:not(.checkbox--disabled) {
-    background-color: var(--s-surface-hovered);
+    background-color: var(--s-state-hovered);
   }
 
 .checkbox--variant-card:active:not(.checkbox--disabled) {
-    background-color: var(--s-surface-pressed);
+    background-color: var(--s-state-pressed);
   }
 
 .checkbox--variant-card.checkbox--checked:not(.checkbox--disabled) {

package/dist/collection/components/swirl-chip/swirl-chip.css

@@ -17,7 +17,7 @@
   border: 0.0625rem solid var(--s-border-default);
   border-radius: 1.25rem;
   color: var(--s-text-subdued);
-  background-color: var(--s-surface-overlay-default);
+  background-color: transparent;
   font: inherit;
   font-size: var(--s-font-size-sm);
   font-weight: var(--s-font-weight-medium);
@@ -49,7 +49,7 @@
 }
 
 .chip--interactive:hover {
-    background-color: var(--s-surface-overlay-hovered);
+    background-color: var(--s-state-hovered);
   }
 
 .chip--interactive:hover ::part(avatar) {
@@ -65,11 +65,11 @@
       }
 
 .chip--interactive:hover + .chip__remove-button:active {
-        background-color: var(--s-surface-overlay-pressed);
+        background-color: var(--s-state-pressed);
       }
 
 .chip--interactive:active {
-    background-color: var(--s-surface-overlay-pressed);
+    background-color: var(--s-state-pressed);
   }
 
 .chip--interactive:active ::part(avatar) {
@@ -77,7 +77,7 @@
     }
 
 .chip--interactive:active + .chip__remove-button {
-      background-color: var(--s-surface-overlay-pressed);
+      background-color: var(--s-state-pressed);
     }
 
 .chip--icon-color-highlight .chip__icon {
@@ -119,41 +119,55 @@
     color: var(--s-icon-highlight);
   }
 
-.chip--variant-outline.chip--pressed {
+.chip--variant-outline.chip--pressed, .chip--variant-translucent.chip--pressed {
     color: var(--s-text-on-action-primary);
     background-color: var(--s-action-primary-default);
     border-color: var(--s-action-primary-default);
   }
 
-.chip--variant-outline.chip--pressed:hover {
+.chip--variant-outline.chip--pressed:hover, .chip--variant-translucent.chip--pressed:hover {
       background-color: var(--s-action-primary-hovered);
     }
 
-.chip--variant-outline.chip--pressed:hover + .chip__remove-button {
+.chip--variant-outline.chip--pressed:hover + .chip__remove-button, .chip--variant-translucent.chip--pressed:hover + .chip__remove-button {
         background-color: var(--s-action-primary-hovered);
       }
 
-.chip--variant-outline.chip--pressed:active {
+.chip--variant-outline.chip--pressed:active, .chip--variant-translucent.chip--pressed:active {
       background-color: var(--s-action-primary-pressed);
     }
 
-.chip--variant-outline.chip--pressed:active + .chip__remove-button {
+.chip--variant-outline.chip--pressed:active + .chip__remove-button, .chip--variant-translucent.chip--pressed:active + .chip__remove-button {
         background-color: var(--s-action-primary-pressed);
       }
 
-.chip--variant-outline.chip--pressed + .chip__remove-button {
+.chip--variant-outline.chip--pressed + .chip__remove-button, .chip--variant-translucent.chip--pressed + .chip__remove-button {
       color: var(--s-text-on-action-primary);
       background-color: var(--s-action-primary-default);
     }
 
-.chip--variant-outline.chip--pressed + .chip__remove-button:hover {
+.chip--variant-outline.chip--pressed + .chip__remove-button:hover, .chip--variant-translucent.chip--pressed + .chip__remove-button:hover {
         background-color: var(--s-action-primary-hovered);
       }
 
-.chip--variant-outline.chip--pressed + .chip__remove-button:active {
+.chip--variant-outline.chip--pressed + .chip__remove-button:active, .chip--variant-translucent.chip--pressed + .chip__remove-button:active {
         background-color: var(--s-action-primary-pressed);
       }
 
+.chip--variant-translucent {
+  background: var(--s-translucent-medium-default);
+  -webkit-backdrop-filter: blur(var(--s-blur-s));
+          backdrop-filter: blur(var(--s-blur-s));
+}
+
+.chip--variant-translucent.chip--interactive:hover {
+      background: var(--s-translucent-medium-hovered);
+    }
+
+.chip--variant-translucent.chip--interactive:active {
+      background: var(--s-translucent-medium-pressed);
+    }
+
 .chip--variant-plain {
   height: auto;
   border: none;
@@ -254,14 +268,14 @@
   border: none;
   border-radius: 50%;
   color: var(--s-icon-default);
-  background-color: var(--s-surface-overlay-default);
+  background-color: transparent;
   cursor: pointer;
 }
 
 .chip__remove-button:hover {
-    background-color: var(--s-surface-overlay-hovered);
+    background-color: var(--s-state-hovered);
   }
 
 .chip__remove-button:active {
-    background-color: var(--s-surface-overlay-pressed);
+    background-color: var(--s-state-pressed);
   }

package/dist/collection/components/swirl-chip/swirl-chip.js

@@ -42,7 +42,7 @@ export class SwirlChip {
             "chip--interactive": this.interactive || this.pressed !== undefined,
             "chip--removable": this.removable,
         });
-        return (h(Host, { key: 'de2fc68ee4a553c776c325182a1a0afdd099dbbd' }, h(Tag, { key: 'beb82aeb9a99b62d4e1ba6bac2bee583f6370e26', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '8548ce3f845926a061003e8ef141b1f7db73d1a2', class: "chip__inner" }, showAvatar && (h("span", { key: '88b1c4554cdd7fccc65fcb1f48a5f588b3a4e804', class: "chip__avatar" }, h("slot", { key: 'c51e372300320a2f83474f05b95edecf1f3accad', name: "avatar" }))), showIcon && (h("span", { key: '3573732fc7d40a443f6983ee8026c4ed4967470a', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'ddd447fa8db2c4778bfa2b9acde04570631fe95f', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '83e1fa061620f51939a56931fa11961a98445ae9', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '0df09ccdfb8279ec169a5fdca4747d781a6dc940', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: 'ea99fff62a4f48257f2c343ae6c0430bff6d4566', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: '65e99d99e97313b95160c70dc313625a76359501', size: 20 })))));
+        return (h(Host, { key: '8441fd4d5bacd8af0852bf4cf15e6cfa4ca1442e' }, h(Tag, { key: '191157afdfeaab3473c67ac6a83f86db2dfc6060', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: 'd63ba61bb1dc4f4c324350aa37a70b5a049e5ea7', class: "chip__inner" }, showAvatar && (h("span", { key: '4da4223573b8f735ef0bb303b91161ad92803964', class: "chip__avatar" }, h("slot", { key: '5359c6b8704daf7e9a04b71f270d76bd1c4974c3', name: "avatar" }))), showIcon && (h("span", { key: '8f76d873765be71081b9cfffba885f7adc2858bf', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '1adc269a72b3c71101050eb549736ab00754fb85', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '898d123f6aadb6a469d4fc46ea520e8c314643b2', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '9a5682df6cd28c497c4e1da7539f1e70916062e2', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: '1176bebffc3ab6b04a2ca83db6999285a6342633', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: '0dc3ed45a49f1f351316e9673ee4bb339cf555ad', size: 20 })))));
     }
     static get is() { return "swirl-chip"; }
     static get encapsulation() { return "scoped"; }
@@ -322,7 +322,7 @@ export class SwirlChip {
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlChipVariant",
-                    "resolved": "\"outline\" | \"plain\"",
+                    "resolved": "\"outline\" | \"plain\" | \"translucent\"",
                     "references": {
                         "SwirlChipVariant": {
                             "location": "local",

package/dist/collection/components/swirl-date-picker/swirl-date-picker.css

@@ -8,7 +8,7 @@
 
 .date-picker {
   padding: var(--s-space-8) var(--s-space-16);
-  background-color: var(--s-surface-overlay-default);
+  background-color: transparent;
   font-size: var(--s-font-size-sm);
   line-height: var(--s-line-height-sm);
   letter-spacing: var(--s-letter-spacing-tighter);
@@ -67,7 +67,11 @@
   }
 
 .date-picker__next-month-button:hover, .date-picker__previous-month-button:hover {
-    background-color: var(--s-surface-overlay-hovered);
+    background-color: var(--s-state-hovered);
+  }
+
+.date-picker__next-month-button:active, .date-picker__previous-month-button:active {
+    background-color: var(--s-state-pressed);
   }
 
 .date-picker__next-month-button:focus:not(:focus-visible), .date-picker__previous-month-button:focus:not(:focus-visible) {
@@ -106,7 +110,7 @@
   margin: 0;
   padding: 0;
   border: none;
-  background-color: var(--s-surface-overlay-default);
+  background-color: transparent;
   font: inherit;
   font-size: var(--s-font-size-base);
   font-weight: var(--s-font-weight-medium);
@@ -199,11 +203,11 @@
   }
 
 .date-picker__date:hover:before {
-      background-color: var(--s-surface-overlay-hovered);
+      background-color: var(--s-state-hovered);
     }
 
 .date-picker__date--current:before {
-    background-color: var(--s-surface-overlay-hovered);
+    background-color: var(--s-state-hovered);
   }
 
 .date-picker__date--current:focus:not(:focus-visible) {

package/dist/collection/components/swirl-dialog/swirl-dialog.css

@@ -7,10 +7,6 @@
   }
 
 .dialog {
-  --swirl-ghost-button-background-default: var(--s-surface-overlay-default);
-  --swirl-ghost-button-background-hovered: var(--s-surface-overlay-hovered);
-  --swirl-ghost-button-background-pressed: var(--s-surface-overlay-pressed);
-
   position: fixed;
   z-index: var(--s-z-40);
   display: flex;

package/dist/collection/components/swirl-file-chip/swirl-file-chip.css

@@ -10,7 +10,7 @@
   min-width: 15rem;
   font-size: var(--s-font-size-sm);
   line-height: var(--s-line-height-sm);
-  background: var(--s-surface-default);
+  background-color: transparent;
   border-radius: var(--s-border-radius-sm);
   outline: 1px solid var(--s-border-strong);
   outline-offset: -1px;
@@ -37,7 +37,7 @@
   display: flex;
   flex-shrink: 0;
   padding: var(--s-space-16);
-  background: var(--s-surface-sunken-hovered);
+  background: var(--s-state-hovered);
   border-radius: var(--s-border-radius-sm) 0 0 var(--s-border-radius-sm);
   color: var(--s-icon-default);
 }

package/dist/collection/components/swirl-menu/swirl-menu.css

@@ -8,10 +8,6 @@
 
 .menu {
   width: 100%;
-
-  --swirl-ghost-button-background-default: var(--s-surface-overlay-default);
-  --swirl-ghost-button-background-hovered: var(--s-surface-overlay-hovered);
-  --swirl-ghost-button-background-pressed: var(--s-surface-overlay-pressed);
 }
 
 .menu--mobile.menu--root {
@@ -51,8 +47,20 @@
       border-radius: var(--s-border-radius-base);
       box-shadow: var(--s-shadow-level-1);
       padding: var(--s-space-4);
+      outline: var(--s-border-width-default) solid var(--s-border-translucent-outline);
     }
 
+:not(.menu--mobile):not(.menu--root) .menu__menu:before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-radius: inherit;
+        background: var(--s-translucent-low-default);
+        -webkit-backdrop-filter: blur(var(--s-blur-l));
+                backdrop-filter: blur(var(--s-blur-l));
+      }
+
 :not(.menu--mobile).menu--active .menu__menu {
       display: block;
     }
@@ -91,12 +99,3 @@
 .menu__done-button {
   margin-right: calc(-1 * var(--s-space-8));
 }
-
-.menu__menu {
-  background-color: var(--s-surface-overlay-default);
-  /* z-index: 1;
-  max-width: 22.5rem;
-  border-radius: var(--s-border-radius-base);
-  box-shadow: var(--s-shadow-level-1);
-  padding: var(--s-space-4); */
-}

package/dist/collection/components/swirl-menu/swirl-menu.js

@@ -290,11 +290,11 @@ export class SwirlMenu {
             "menu--mobile": this.mobile,
             "menu--root": isTopLevelMenu,
         });
-        return (h(Host, { key: '6cd03a94a418d90b16d58cf53e70990fc48454c5' }, h("div", { key: 'e6a3a68b003b5e9097a4e9fe5ffe1e25e7978cbe', class: className }, this.mobile && isTopLevelMenu && (h("div", { key: '29eb47ab0bc98a84a3a6f42bcabe31e58418c170', class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { key: '9b7f80c2e2072dbcf73cb36fa3db04568478c9b7', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { key: '96a914381228ef8f12b04bf53d3f30f39a260e73', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { key: '7a69dd2fd66cda17ebb3efa2f995509ea9f05385', class: "menu__title", id: "menu-title" }, h("swirl-heading", { key: 'cf249cb19f1ebd43b5d853ab3698b379a9b39684', align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { key: '35ba0ebfa5e5b27c9fa0ac9508bc95de39bf9f9d', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { key: '904754d0e12a370a665e4edc6bcaa56e68a76d5d', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (el) => (this.menuContainer = el), role: role, style: !this.mobile && this.level > 0
+        return (h(Host, { key: '6cd03a94a418d90b16d58cf53e70990fc48454c5' }, h("div", { key: 'e6a3a68b003b5e9097a4e9fe5ffe1e25e7978cbe', class: className }, this.mobile && isTopLevelMenu && (h("div", { key: '29eb47ab0bc98a84a3a6f42bcabe31e58418c170', class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { key: '9b7f80c2e2072dbcf73cb36fa3db04568478c9b7', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { key: '96a914381228ef8f12b04bf53d3f30f39a260e73', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { key: '7a69dd2fd66cda17ebb3efa2f995509ea9f05385', class: "menu__title", id: "menu-title" }, h("swirl-heading", { key: 'cf249cb19f1ebd43b5d853ab3698b379a9b39684', align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { key: '35ba0ebfa5e5b27c9fa0ac9508bc95de39bf9f9d', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { key: 'a1e4f7b04b4d13f159458be152163f2d3849bc2f', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (el) => (this.menuContainer = el), role: role, style: !this.mobile && this.level > 0
                 ? {
                     top: Boolean(this.position) ? `${this.position?.y}px` : "",
                     left: Boolean(this.position) ? `${this.position?.x}px` : "",
-                    visibility: Boolean(this.position) ? "visible" : "hidden",
+                    opacity: Boolean(this.position) ? undefined : "0",
                 }
                 : this.mobile
                     ? {
@@ -302,7 +302,7 @@ export class SwirlMenu {
                             ? `calc(-100% * ${this.activeLevel})`
                             : "100%",
                     }
-                    : undefined }, h("slot", { key: 'c393f4e7a027ebfcb1bc57dc0b8db9421ed59e4f' })))));
+                    : undefined }, h("slot", { key: 'dc3514ab8298685fc0b5ed574937e9b1ca467c84' })))));
     }
     static get is() { return "swirl-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-menu-item/swirl-menu-item.css

@@ -7,5 +7,5 @@
   }
 
 .menu-item--expanded ::part(action-list-item) {
-    background-color: var(--s-surface-overlay-hovered);
+    background-color: var(--s-state-hovered);
   }

package/dist/collection/components/swirl-modal/swirl-modal.css

@@ -7,18 +7,6 @@
   }
 
 .modal {
-  --swirl-ghost-button-background-default: var(--s-surface-overlay-default);
-  --swirl-ghost-button-background-hovered: var(--s-surface-overlay-hovered);
-  --swirl-ghost-button-background-pressed: var(--s-surface-overlay-pressed);
-  --swirl-resource-list-item-background-default: var(
-    --s-surface-overlay-default
-  );
-  --swirl-resource-list-item-background-hovered: var(
-    --s-surface-overlay-hovered
-  );
-  --swirl-resource-list-item-background-pressed: var(
-    --s-surface-overlay-pressed
-  );
   --swirl-modal-height: auto;
   --swirl-modal-max-height: 90vh;
   --swirl-modal-view-height: 100vh;
@@ -406,11 +394,6 @@
   --swirl-card-background-default: var(--s-surface-overlay-default);
   --swirl-card-background-hovered: var(--s-surface-overlay-hovered);
   --swirl-card-background-pressed: var(--s-surface-overlay-pressed);
-
-  --swirl-accordion-item-toggle-default: var(--s-surface-overlay-default);
-  --swirl-accordion-item-toggle-hovered: var(--s-surface-overlay-hovered);
-  --swirl-accordion-item-toggle-pressed: var(--s-surface-overlay-pressed);
-
   position: relative;
   z-index: var(--s-z-40);
   display: flex;

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.css

@@ -28,7 +28,7 @@
 }
 
 .option-list-item:hover:not(.option-list-item--disabled) {
-    background-color: var(--s-translucent-low-hovered);
+    background-color: var(--s-state-hovered);
   }
 
 .option-list-item:active:not(.option-list-item--disabled) {
@@ -40,7 +40,7 @@
   }
 
 .option-list-item:focus-visible {
-    background-color: var(--s-translucent-low-hovered);
+    background-color: var(--s-state-hovered);
     outline-color: var(--s-focus-default);
     outline-style: solid;
     outline-width: 0.125rem;

package/dist/collection/components/swirl-popover/swirl-popover.css

@@ -194,13 +194,22 @@
     }
 
 .popover--translucent .popover__content {
-    background: var(--s-translucent-low-default);
-    -webkit-backdrop-filter: blur(var(--s-blur-l));
-            backdrop-filter: blur(var(--s-blur-l));
+    background-color: transparent;
     outline: var(--s-border-width-default) solid
       var(--s-border-translucent-outline);
   }
 
+.popover--translucent .popover__content:before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      background: var(--s-translucent-low-default);
+      -webkit-backdrop-filter: blur(var(--s-blur-l));
+              backdrop-filter: blur(var(--s-blur-l));
+      border-radius: inherit;
+    }
+
 .popover--translucent .popover__handle {
     background-color: var(--s-border-on-translucent);
   }

package/dist/collection/components/swirl-popover/swirl-popover.js

@@ -17,6 +17,7 @@ export class SwirlPopover {
         this.padded = true;
         this.placement = "bottom-start";
         this.returnFocusToTrigger = true;
+        this.translucent = true;
         this.borderRadius = "base";
         this.active = false;
         this.closing = false;
@@ -306,20 +307,20 @@ export class SwirlPopover {
             "popover--closing": this.closing,
             "popover--fullscreen-bottom-sheet": this.fullscreenBottomSheet,
             "popover--inactive": !this.active,
-            "popover--translucent": this.translucent,
+            "popover--translucent": this.translucent && !this.transparent,
             "popover--transparent": this.transparent,
             "popover--padded": this.padded,
         });
-        return (h(Host, { key: 'a66de7fe923589a7437f4a230279dd160d0e7c09' }, h("div", { key: '0b329aba288a963452e8b0ddf36db431ddd47630', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, h("div", { key: '7b5561e39367586c8718b29120c2d4250fded5ae', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+        return (h(Host, { key: 'a80c6ab14e2e70ba4d29ea82bc1bca3291251089' }, h("div", { key: '689569619b91fb51fb9166a91cb9ee55619c0822', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, h("div", { key: 'fbe6667ca314478a062de5b8a82850a4dc50df86', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
                 top: Boolean(this.position) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
-                visibility: this.active && !this.position && !mobile ? "hidden" : undefined,
+                opacity: this.active && !this.position && !mobile ? "0" : undefined,
                 "--swirl-popover-border-radius": borderRadius,
-            }, tabindex: "-1" }, h("span", { key: '863790e32b28bd549a196a6abeaf7908417d5d1e', class: "popover__handle" }), h("div", { key: '578ddcdeba1d696b71141c0cfe9b0bb582615ca8', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+            }, tabindex: "-1" }, h("span", { key: '5cd291a04435a1cdd4917b32b4576b0e22bcc640', class: "popover__handle" }), h("div", { key: '7c9b2cfbe1c4e2c3413b2f91cf64092f622ab4d5', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
                 maxHeight: !mobile && Boolean(this.maxHeight)
                     ? this.maxHeight
                     : undefined,
-            } }, h("slot", { key: '4f4e2dd79c4839bde788a50e488aae20210d6536' }))), this.active && (h("div", { key: '6afad234e3b1b7efaabb72613400cdd12a82a517', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, h("slot", { key: '6f1229f263f0599cfbdaed29b28971765cd55256' }))), this.active && (h("div", { key: '75970a4d4940eb63b7c5af033f920c4faad0f566', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
     }
     static get is() { return "swirl-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -581,7 +582,8 @@ export class SwirlPopover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "translucent"
+                "attribute": "translucent",
+                "defaultValue": "true"
             },
             "transparent": {
                 "type": "boolean",

package/dist/collection/components/swirl-radio/swirl-radio.css

@@ -36,11 +36,11 @@
     }
 
 .radio--variant-card:hover:not(.radio--disabled) {
-    background-color: var(--s-surface-hovered);
+    background-color: var(--s-state-hovered);
   }
 
 .radio--variant-card:active:not(.radio--disabled) {
-    background-color: var(--s-surface-pressed);
+    background-color: var(--s-state-pressed);
   }
 
 .radio--variant-card.radio--checked:not(.radio--disabled) {

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css

@@ -137,15 +137,6 @@
     font-weight: var(--s-font-weight-bold);
   }
 
-.resource-list-item--show-control-on-focus:hover,
-  .resource-list-item--show-control-on-focus:focus,
-  .resource-list-item--show-control-on-focus:focus-within {
-    --swirl-flat-button-background-default: var(--s-background-default);
-    --swirl-flat-button-background-disabled: var(--s-background-disabled);
-    --swirl-flat-button-background-hovered: var(--s-background-hovered);
-    --swirl-flat-button-background-pressed: var(--s-background-pressed);
-  }
-
 .resource-list-item--show-control-on-focus:hover .resource-list-item__control, .resource-list-item--show-control-on-focus:focus .resource-list-item__control, .resource-list-item--show-control-on-focus:focus-within .resource-list-item__control {
       pointer-events: auto;
       opacity: 1;
@@ -189,13 +180,13 @@
 .resource-list-item--dragging {
   z-index: 1;
   border-radius: var(--s-border-radius-s);
-  background-color: var(--s-surface-overlay-pressed);
+  background-color: var(--s-state-pressed);
   box-shadow: 0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),
     0 0.25rem 2rem rgba(25, 26, 28, 0.16);
 }
 
 .resource-list-item--dragging:hover:not(.resource-list-item--disabled) {
-    background-color: var(--s-surface-overlay-pressed);
+    background-color: var(--s-state-pressed);
   }
 
 .resource-list-item--disabled.resource-list-item--checked .resource-list-item__checkbox {

package/dist/collection/components/swirl-select/swirl-select.css

@@ -173,7 +173,6 @@
   width: 100%;
   padding: 0.0625rem var(--s-space-8);
   border-bottom: 0.0625rem solid var(--s-border-default);
-  background-color: var(--s-surface-overlay-default);
 }
 
 @media (min-width: 768px) {
@@ -214,7 +213,7 @@
   align-items: center;
   border: none;
   color: var(--s-text-default);
-  background-color: var(--s-surface-overlay-default);
+  background-color: transparent;
   font: inherit;
   line-height: var(--s-line-height-base);
   caret-color: var(--s-border-highlight);
@@ -252,6 +251,23 @@
 }
   }
 
+.select__popover::part(popover__scroll-container) {
+    padding: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+.select__popover .select__search {
+    flex-shrink: 0;
+  }
+
+.select__popover .select__option-list {
+    padding: var(--s-space-4);
+        overflow: auto;
+    min-height: 0;
+  }
+
 .select__search-spinner {
   position: absolute;
   top: 50%;

package/dist/collection/components/swirl-select/swirl-select.js

@@ -223,7 +223,7 @@ export class SwirlSelect {
             ?.map((value) => this.options.find((option) => option.value === value))
             ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
             // eslint-disable-next-line react/jsx-no-bind
-            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: 'b8056b490aa31d23534102fce3a87aeaaa2f0f06', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '9b81ffdfda79da511877ca3442b5c2b6a845d3e5', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: '7d6343e334447b20029c5d2f79d06c74dbf85fde', class: "select__search" }, h("swirl-icon-search", { key: 'd2c14bae4b51bf6e8e3e17ec79f02f5a76edd6e0', class: "select__search-icon", size: 20 }), h("input", { key: '82492d47f5308694fd9ceaead9f546e3f1429e1d', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '09b9cd07e53694c6df50059ee4b1610ba8f59bc1', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'e71eaad9a8524468579325287225a4e9b264783f', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '7d37ebaf2b218c95541e3ea58cd21fd2079597f4', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '1c3d20f5bdd5e80d85eb2b3fffff508f6213e3cc', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'da9dc78a9d2763d32be77552deb946e5ffa26339', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: 'b8056b490aa31d23534102fce3a87aeaaa2f0f06', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '9b81ffdfda79da511877ca3442b5c2b6a845d3e5', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: '7d6343e334447b20029c5d2f79d06c74dbf85fde', class: "select__search" }, h("swirl-icon-search", { key: 'd2c14bae4b51bf6e8e3e17ec79f02f5a76edd6e0', class: "select__search-icon", size: 20 }), h("input", { key: '82492d47f5308694fd9ceaead9f546e3f1429e1d', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '09b9cd07e53694c6df50059ee4b1610ba8f59bc1', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'b41b84db7844273593be0064b2c68c2bba31a1bd', class: "select__option-list", allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: 'e04d5283ec1cab0956f44c4d1b7c8e2c47bdd4b4', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '2fb94bd658b509819f9ec20a108096b1fe2c4176', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '3ebe9856f74f1127f703e1c02d86d40dffc7bb8a', onSlotchange: this.onSlotChange }))))));
     }
     static get is() { return "swirl-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css

@@ -185,10 +185,6 @@
 }
 
 .shell-layout__header-right {
-  --swirl-ghost-button-background-default: var(--s-surface-sunken-default);
-  --swirl-ghost-button-background-hovered: var(--s-surface-sunken-hovered);
-  --swirl-ghost-button-background-pressed: var(--s-surface-sunken-pressed);
-
   display: flex;
   flex-basis: 8rem;
   flex-shrink: 0;
@@ -228,11 +224,11 @@
 }
 
 .shell-layout__header-tool:hover {
-    background-color: var(--s-surface-sunken-hovered);
+    background-color: var(--s-state-hovered);
   }
 
 .shell-layout__header-tool:active {
-    background-color: var(--s-surface-sunken-pressed);
+    background-color: var(--s-state-pressed);
   }
 
 .shell-layout__header-tool:focus {
@@ -315,11 +311,11 @@
   }
 
 .shell-layout__mobile-header .shell-layout__header-tool:hover {
-      background-color: var(--s-surface-overlay-hovered);
+      background-color: var(--s-state-hovered);
     }
 
 .shell-layout__mobile-header .shell-layout__header-tool:active {
-      background-color: var(--s-surface-overlay-pressed);
+      background-color: var(--s-state-pressed);
     }
 
 @media (min-width: 992px) {