@getflip/swirl-components 0.461.0 → 0.462.0

package/dist/cjs/swirl-symbol-twitter.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlSymbolCss = () => `:host{display:inline-flex}`;

package/dist/cjs/swirl-symbol-video.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlSymbolCss = () => `:host{display:inline-flex}`;

package/dist/cjs/swirl-symbol-warehouse.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlSymbolCss = () => `:host{display:inline-flex}`;

package/dist/cjs/swirl-symbol-water-drop.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlSymbolCss = () => `:host{display:inline-flex}`;

package/dist/cjs/swirl-symbol-wb-sunny.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlSymbolCss = () => `:host{display:inline-flex}`;

package/dist/cjs/swirl-symbol-wechat.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlSymbolCss = () => `:host{display:inline-flex}`;

package/dist/cjs/swirl-symbol-weibo.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlSymbolCss = () => `:host{display:inline-flex}`;

package/dist/cjs/swirl-symbol-wifi.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlSymbolCss = () => `:host{display:inline-flex}`;

package/dist/cjs/swirl-symbol-work.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlSymbolCss = () => `:host{display:inline-flex}`;

package/dist/cjs/swirl-symbol-xing.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlSymbolCss = () => `:host{display:inline-flex}`;

package/dist/cjs/swirl-symbol-youtube.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlSymbolCss = () => `:host{display:inline-flex}`;

package/dist/cjs/swirl-symbol.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 
 const swirlSymbolCss = () => `:host{display:inline-flex}`;
 

package/dist/cjs/swirl-tab-bar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var utils = require('./utils-UfZG-xPD.js');
 

package/dist/cjs/swirl-tab.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlTabCss = () => `:host{display:none;width:100%}:host(.tab--active){display:block}:host *{box-sizing:border-box}`;

package/dist/cjs/swirl-table-cell.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 
 const swirlTableCellCss = () => `:host{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}:host(.table-cell--is-sticky){position:sticky;z-index:1}:host(.table-cell--is-sticky-right){position:sticky;z-index:1;right:0;overflow:hidden}:host(.table-cell--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-cell--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}`;
 

package/dist/cjs/swirl-table-column.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var utils = require('./utils-UfZG-xPD.js');
 
-const swirlTableColumnCss = () => `:host{display:flex;overflow:hidden;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;letter-spacing:var(--s-letter-spacing-tighter);text-overflow:ellipsis;transition:box-shadow 0.15s;gap:var(--s-space-8)}:host(.table-column--is-sticky){position:sticky;z-index:1}:host(.table-column--is-sticky-right){position:sticky;z-index:1;right:0}:host(.table-column--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-column--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host(.table-column--default){background-color:var(--s-surface-default)}:host(.table-column--sunken){background-color:var(--s-surface-sunken-default)}:host(.table-column--raised){background-color:var(--s-surface-raised-default)}:host *{box-sizing:border-box}.table-column__sort-indicator{display:inline-flex;width:1.25rem;height:1.25rem;flex-grow:0;flex-shrink:0}`;
+const swirlTableColumnCss = () => `:host{display:flex;overflow:hidden;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;letter-spacing:var(--s-letter-spacing-tighter);text-overflow:ellipsis;transition:box-shadow 0.15s;gap:var(--s-space-8)}:host(.table-column--is-sticky){position:sticky;z-index:1}:host(.table-column--is-sticky-right){position:sticky;z-index:1;right:0}:host(.table-column--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-column--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host(.table-column--default){background-color:var(--s-surface-default)}:host(.table-column--sunken){background-color:var(--s-surface-sunken-default)}:host(.table-column--raised){background-color:var(--s-surface-neutral-subdued)}:host *{box-sizing:border-box}.table-column__sort-indicator{display:inline-flex;width:1.25rem;height:1.25rem;flex-grow:0;flex-shrink:0}`;
 
 const SwirlTableColumn = class {
     constructor(hostRef) {

package/dist/cjs/swirl-table-row-group.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 
 const swirlTableRowGroupCss = () => `:host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}:host(:hover),:host(:focus-within){z-index:2}.table-row-group__header-row{position:relative;z-index:var(--s-z-10);padding:var(--s-space-12) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-surface-raised-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);display:flex;align-items:center}.table-row-group__label{position:sticky;left:var(--s-space-16)}.table-row-group__tooltip{display:inline-flex;margin-left:var(--s-space-4);vertical-align:middle}.table-row-group__tooltip-icon{color:var(--s-icon-default)}.table-row-group__collapse-icon{color:var(--s-icon-default);padding-right:var(--s-space-20)}.table-row-group__rows-container{overflow:visible clip;transition:height 0.3s ease-out}.table-row-group__rows-container.is-hidden{height:0}.sc-swirl-button-h{display:flex}`;
 

package/dist/cjs/swirl-table-row.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var utils = require('./utils-UfZG-xPD.js');
 
-const swirlTableRowCss = () => `:host{display:flex}:host(.table-row--highlighted){--swirl-ghost-button-background-default:transparent}:host(.table-row--highlighted) ::slotted(.table-cell){background-color:rgba(240, 242, 255, 1);}:host(.table-row--moving){border:var(--swirl-table-moving-row-border)}:host ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}`;
+const swirlTableRowCss = () => `:host{display:flex}:host(.table-row--highlighted) ::slotted(.table-cell){background-color:rgba(240, 242, 255, 1);}:host(.table-row--moving){border:var(--swirl-table-moving-row-border)}:host ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}`;
 
 const SwirlTableRow = class {
     constructor(hostRef) {

package/dist/cjs/swirl-table.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index$1 = require('./index-CnaJlT6Y.js');
+var index$1 = require('./index-yg63u-QL.js');
 var index = require('./index-DcAhLZUH.js');
 var sortable_esm = require('./sortable.esm-B1ZNencO.js');
 var utils = require('./utils-UfZG-xPD.js');

package/dist/cjs/swirl-tabs.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var utils = require('./utils-UfZG-xPD.js');
 
 const swirlTabsCss = () => `.sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}`;

package/dist/cjs/swirl-tag.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlTagCss = () => `:host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}`;

package/dist/cjs/swirl-text-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
 require('./utils-UfZG-xPD.js');

package/dist/cjs/swirl-text.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index$1 = require('./index-CnaJlT6Y.js');
+var index$1 = require('./index-yg63u-QL.js');
 var index = require('./index-DcAhLZUH.js');
 
 var balancetext$1 = {exports: {}};

package/dist/cjs/swirl-theme-provider.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 
 const swirlThemeProviderCss = () => `.sc-swirl-theme-provider-h{display:unset}`;
 

package/dist/cjs/swirl-thumbnail.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlThumbnailCss = () => `:host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;padding:0.0625rem;border-radius:var(--s-border-radius-s)}.thumbnail--size-s{--swirl-thumbnail-size:2.5rem}.thumbnail--size-m{--swirl-thumbnail-size:3rem}.thumbnail--size-l{--swirl-thumbnail-size:4rem}.thumbnail--size-xl{--swirl-thumbnail-size:5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--size-xl .thumbnail__buttons{transform:scale(0.75)}.thumbnail--size-2xl{--swirl-thumbnail-size:7.5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--format-landscape{width:var(--swirl-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-portrait{height:var(--swirl-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-square{width:var(--swirl-thumbnail-size);height:var(--swirl-thumbnail-size)}.thumbnail--has-progress .thumbnail__timestamp{bottom:var(--s-space-8)}.thumbnail--interactive .thumbnail__image-wrapper{position:relative;padding:0;border:none;background-color:transparent;cursor:pointer}.thumbnail--interactive .thumbnail__image-wrapper:hover:after{position:absolute;background-color:rgba(0, 0, 0, 0.15);content:"";inset:0}.thumbnail--interactive .thumbnail__image-wrapper:active:after{position:absolute;background-color:rgba(0, 0, 0, 0.3);content:"";inset:0}.thumbnail__image-wrapper{overflow:hidden;width:100%;height:100%;border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnail__progress-indicator{position:absolute;z-index:1;right:0;bottom:0;left:0}.thumbnail__buttons{position:absolute;z-index:1;top:var(--s-space-4);right:var(--s-space-4)}@media (hover: hover){.thumbnail__buttons{opacity:0}.thumbnail:hover .thumbnail__buttons{opacity:1}}.thumbnail__timestamp{position:absolute;z-index:1;bottom:var(--s-space-4);left:var(--s-space-4);display:block;overflow:hidden;max-width:calc(100% - 2 * var(--s-space-4));height:1.5rem;padding-right:var(--s-space-8);padding-left:var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-size:var(--s-font-size-sm);line-height:1.5rem;white-space:nowrap;text-overflow:ellipsis}`;

package/dist/cjs/swirl-time-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$2 = require('./index-DcAhLZUH.js');
 var index$1 = require('./index-BOqO2Grl.js');
 var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');

package/dist/cjs/swirl-toast-provider.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 
 const swirlToastProviderCss = () => `.toast-provider__stack{position:fixed;inset:unset;bottom:var(--s-space-16);left:0;right:0;pointer-events:none;margin:0 var(--s-space-24);border:none;padding:0;background:none;width:auto;overflow:unset}.toast-provider__stack::backdrop{display:none}.toast-provider__stack>*{width:auto;pointer-events:auto}`;
 

package/dist/cjs/swirl-toast.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
 require('./utils-UfZG-xPD.js');

package/dist/cjs/swirl-toggle-button.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
-const swirlToggleButtonCss = () => `:host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;gap:var(--s-space-8);width:100%;padding:0.375rem var(--s-space-8);justify-content:center;align-items:center;border:none;border-radius:0.375rem;color:var(--s-text-default);background-color:var(--s-surface-sunken-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--s-surface-sunken-hovered)}.button:active{background-color:var(--s-surface-sunken-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--s-surface-default);color:var(--s-text-highlight);box-shadow:var(--s-shadow-level-1)}.button.button--pressed .button__icon{color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.button__icon{width:1.5rem;height:1.5rem;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon{width:1.25rem;height:1.25rem}}`;
+const swirlToggleButtonCss = () => `:host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;gap:var(--s-space-8);width:100%;padding:0.375rem var(--s-space-8);justify-content:center;align-items:center;border:none;border-radius:0.375rem;color:var(--s-text-default);background-color:var(--s-surface-sunken-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--s-state-hovered)}.button:active{background-color:var(--s-state-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--s-surface-default);color:var(--s-text-highlight);box-shadow:var(--s-shadow-level-1)}.button.button--pressed .button__icon{color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.button__icon{width:1.5rem;height:1.5rem;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon{width:1.25rem;height:1.25rem}}`;
 
 const SwirlToggleButton = class {
     constructor(hostRef) {

package/dist/cjs/swirl-toggle-group.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlToggleGroupCss = () => `:host{display:inline-block}:host *{box-sizing:border-box}.toggle-group{padding:var(--s-space-2);background-color:var(--s-surface-sunken-default);border-radius:var(--s-space-8);transition:box-shadow 0.3s}.toggle-group--elevated{box-shadow:var(--s-shadow-level-2)}.toggle-group--variant-outline{outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}`;

package/dist/cjs/swirl-toolbar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var utils = require('./utils-UfZG-xPD.js');
 
 const swirlToolbarCss = () => `:host{display:block}:host *{box-sizing:border-box}`;

package/dist/cjs/swirl-tooltip.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var floatingUi_dom = require('./floating-ui.dom-C8bqk2dV.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var utils = require('./utils-UfZG-xPD.js');

package/dist/cjs/swirl-tree-navigation-item.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
-const swirlTreeNavigationItemCss = () => `:host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-background-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-background-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-background-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}.tree-navigation-item__is-new-tag{flex-shrink:0}`;
+const swirlTreeNavigationItemCss = () => `:host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-state-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-state-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-state-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}.tree-navigation-item__is-new-tag{flex-shrink:0}`;
 
 const SwirlTreeNavigationItem = class {
     constructor(hostRef) {

package/dist/cjs/swirl-tree-navigation.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 
 const swirlTreeNavigationCss = () => `:host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}`;
 

package/dist/cjs/swirl-tree-view-item.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var sortable_esm = require('./sortable.esm-B1ZNencO.js');
 var swirlTreeView_config = require('./swirl-tree-view.config-Cg6OacWF.js');
 
-const swirlTreeViewItemCss = () => `swirl-tree-view-item{display:block;flex-grow:1}swirl-tree-view-item *{box-sizing:border-box}.tree-view-item{list-style:none}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost){border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link{background-color:var(--s-background-default)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--ghost{border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm)}.tree-view-item--ghost .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--moving-via-keyboard{position:relative;z-index:1;border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--moving-via-keyboard .tree-view-item__link{background-color:var(--s-background-default)}.tree-view-item--moving-via-keyboard .tree-view-item__link:focus-visible{outline:none}.tree-view-item--cannot-keyboard-drop{opacity:0.5}.tree-view-item--active>.tree-view-item__link{background-color:var(--s-background-hovered)}.tree-view-item--has-tags .tree-view-item__tags{display:flex}.tree-view-item__children{display:flex;margin:0;padding:0 0 0 var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column;gap:var(--s-space-2)}.tree-view-item__children--drop-zone{min-height:0.5rem;margin-top:-0.5rem}.tree-view-item__link{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-background-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link:hover{background-color:var(--s-background-hovered)}.tree-view-item__link:hover .tree-view-item__drag-handle{opacity:1}.tree-view-item__link:active{background-color:var(--s-background-pressed)}.tree-view-item__link:focus:not(:focus-visible){outline:none}.tree-view-item__link:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link{font-size:var(--s-font-size-sm)}}.tree-view-item__drag-handle{display:inline-flex;flex-shrink:0;cursor:grab;opacity:0}.tree-view-item__drag-handle:active{cursor:grabbing}.tree-view-item__icon{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon{display:block;width:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon{width:1.25rem;height:1.25rem}}.tree-view-item__label{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}`;
+const swirlTreeViewItemCss = () => `swirl-tree-view-item{display:block;flex-grow:1}swirl-tree-view-item *{box-sizing:border-box}.tree-view-item{list-style:none}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost){border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link{background-color:var(--s-translucent-low-pressed)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--ghost{border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm)}.tree-view-item--ghost .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--moving-via-keyboard{position:relative;z-index:1;border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--moving-via-keyboard .tree-view-item__link{background-color:var(--s-translucent-low-pressed)}.tree-view-item--moving-via-keyboard .tree-view-item__link:focus-visible{outline:none}.tree-view-item--cannot-keyboard-drop{opacity:0.5}.tree-view-item--active>.tree-view-item__link{background-color:var(--s-state-hovered)}.tree-view-item--has-tags .tree-view-item__tags{display:flex}.tree-view-item__children{display:flex;margin:0;padding:0 0 0 var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column;gap:var(--s-space-2)}.tree-view-item__children--drop-zone{min-height:0.5rem;margin-top:-0.5rem}.tree-view-item__link{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link:hover{background-color:var(--s-state-hovered)}.tree-view-item__link:hover .tree-view-item__drag-handle{opacity:1}.tree-view-item__link:active{background-color:var(--s-state-pressed)}.tree-view-item__link:focus:not(:focus-visible){outline:none}.tree-view-item__link:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link{font-size:var(--s-font-size-sm)}}.tree-view-item__drag-handle{display:inline-flex;flex-shrink:0;cursor:grab;opacity:0}.tree-view-item__drag-handle:active{cursor:grabbing}.tree-view-item__icon{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon{display:block;width:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon{width:1.25rem;height:1.25rem}}.tree-view-item__label{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}`;
 
 const SwirlTreeViewItem = class {
     constructor(hostRef) {

package/dist/cjs/swirl-tree-view.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 var sortable_esm = require('./sortable.esm-B1ZNencO.js');
 var swirlTreeView_config = require('./swirl-tree-view.config-Cg6OacWF.js');
 

package/dist/cjs/swirl-video-thumbnail.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 
 const swirlVideoThumbnailCss = () => `:host{display:flex;width:100%}:host *{box-sizing:border-box}.video-thumbnail{position:relative;display:inline-flex;width:100%;margin:0;padding:0;border:none;background-color:transparent;cursor:pointer;container-type:inline-size;container-name:video-thumbnail}.video-thumbnail:after{position:absolute;background-color:rgba(0, 0, 0, 0.05);content:"";inset:0}.video-thumbnail:focus:not(:focus-visible){outline:none}.video-thumbnail:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.video-thumbnail__image{width:100%}.video-thumbnail__duration{position:absolute;bottom:var(--s-space-8);left:var(--s-space-8);padding:var(--s-space-2) var(--s-space-8);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),     rgba(255, 255, 255, 0.1);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}.video-thumbnail__play-icon{position:absolute;z-index:1;top:50%;left:50%;width:2.5rem;height:2.5rem;transform:translate3d(-50%, -50%, 0)}@container video-thumbnail (min-width: 448px){.video-thumbnail__play-icon{width:3.5rem;height:4.5rem}}`;
 

package/dist/cjs/swirl-visually-hidden.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 
 const swirlVisuallyHiddenCss = () => `.sc-swirl-visually-hidden-h{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}`;
 

package/dist/cjs/wc-datepicker.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CnaJlT6Y.js');
+var index = require('./index-yg63u-QL.js');
 
 function addDays(date, days) {
   const newDate = new Date(date);

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

@@ -27,9 +27,9 @@
 }
 
 .action-list-item:hover {
-    background-color: var(--s-translucent-low-hovered);
+    background-color: var(--s-state-hovered);
 
-    --swirl-tag-background-default: var(--s-surface-sunken-pressed);
+    --swirl-tag-background-default: var(--s-state-pressed);
   }
 
 .action-list-item:focus {
@@ -37,7 +37,7 @@
   }
 
 .action-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-autocomplete/swirl-autocomplete.css

@@ -19,7 +19,9 @@
   padding-top: var(--s-space-8);
   padding-bottom: var(--s-space-8);
   border-radius: var(--s-border-radius-sm);
-  background-color: var(--s-surface-overlay-default);
+  background: var(--s-translucent-low-default);
+  -webkit-backdrop-filter: blur(var(--s-blur-l));
+          backdrop-filter: blur(var(--s-blur-l));
   animation: autocomplete-enter 0.1s;
   box-shadow: var(--s-shadow-level-1);
 }

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

@@ -33,7 +33,7 @@
 .button:hover {
     background-color: var(--swirl-ghost-button-background-hovered);
 
-    --swirl-tag-background-default: var(--s-surface-sunken-pressed);
+    --swirl-tag-background-default: var(--s-state-pressed);
   }
 
 .button:active {
@@ -128,7 +128,7 @@
 .button--variant-flat {
   color: var(--s-text-default);
   background-color: var(--swirl-flat-button-background-default);
-  --swirl-tag-background-default: var(--s-surface-sunken-pressed);
+  --swirl-tag-background-default: var(--s-state-pressed);
 }
 
 .button--variant-flat:hover {
@@ -373,12 +373,12 @@
 
 .button--variant-floating:hover {
     color: var(--s-text-on-action-primary);
-    background-color: var(--s-surface-overlay-hovered);
+    background-color: var(--s-state-hovered);
   }
 
 .button--variant-floating:active {
     color: var(--s-text-on-action-primary);
-    background-color: var(--s-surface-overlay-pressed);
+    background-color: var(--s-state-pressed);
   }
 
 .button--variant-floating.button--icon-only {

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

@@ -7,13 +7,6 @@
   }
 
 .card {
-  --swirl-ghost-button-background-default: var(--s-surface-default);
-  --swirl-ghost-button-background-hovered: var(--s-surface-hovered);
-  --swirl-ghost-button-background-pressed: var(--s-surface-pressed);
-  --swirl-resource-list-item-background-default: var(--s-surface-default);
-  --swirl-resource-list-item-background-hovered: var(--s-surface-hovered);
-  --swirl-resource-list-item-background-pressed: var(--s-surface-pressed);
-
   position: relative;
   display: flex;
   overflow: hidden;
@@ -112,20 +105,6 @@ a.card:focus-visible, button.card:focus-visible, .card--interactive:focus-visibl
 }
 
 .card--intent-default-subdued {
-  --swirl-resource-list-item-background-default: var(
-    --s-surface-raised-default
-  );
-  --swirl-resource-list-item-background-hovered: var(
-    --s-surface-raised-hovered
-  );
-  --swirl-resource-list-item-background-pressed: var(
-    --s-surface-raised-pressed
-  );
-
-  --swirl-ghost-button-background-default: var(--s-surface-raised-default);
-  --swirl-ghost-button-background-hovered: var(--s-surface-raised-hovered);
-  --swirl-ghost-button-background-pressed: var(--s-surface-raised-pressed);
-
   background-color: var(--s-surface-raised-default);
 }
 
@@ -146,6 +125,21 @@ a.card:focus-visible, button.card:focus-visible, .card--interactive:focus-visibl
   background-color: var(--s-surface-highlight-default);
 }
 
+.card--translucent {
+  background-color: transparent;
+}
+
+.card--translucent: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;
+  }
+
 .card--has-floating-controls:focus-within .card__floating-controls,
   .card--has-floating-controls:hover .card__floating-controls {
     pointer-events: auto;

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

@@ -71,11 +71,12 @@ export class SwirlCard {
             "card--has-image": hasImage,
             "card--highlighted": this.highlighted,
             "card--interactive": this.interactive || this.href,
+            "card--translucent": this.translucent,
             "card--is--borderless": this.isBorderless,
         });
-        return (h(Host, { key: '13214b7f34c9c5af274e0451e98594ac7e5dc082', styles: { height: this.height } }, h(Tag, { key: '44320af2e4b170793000f40ff6de7f76aa78908d', "aria-current": this.swirlAriaCurrent, "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
+        return (h(Host, { key: '5d3e28cd329ea9312db055ec26603471b2769b5f', styles: { height: this.height } }, h(Tag, { key: '1a0a88412a4c09d94dc26216a0d1508d2c7e1e9c', "aria-current": this.swirlAriaCurrent, "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
                 ? "noreferrer"
-                : undefined, style: styles, target: this.linkTarget }, h("div", { key: '23ab3142fd8ae05008aca0d6c718cbe5f0423ca1', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: 'cff328834f5339bf8279006ba51b2b46e4a41e05', name: "image" })), h("div", { key: 'a9598b7fb6f049da6f87973340311301b8359492', class: "card__floating-controls" }, h("slot", { key: '823d704dbd767a64cf7fdac9d031657a3c262441', name: "floating-controls" })), h("div", { key: 'f19eab521bc5eefd95d1372cdf3f8b9e260f618a', class: "card__body", style: bodyStyles }, h("div", { key: '71f03f8860a3b9b1cd3722933fef6238d4fcd80d', class: "card__content" }, h("slot", { key: 'f5a4d7da15840009be89cf52135e7411f44ad8b5', name: "content" }))))));
+                : undefined, style: styles, target: this.linkTarget }, h("div", { key: '19531ee30d16e58045cf88cb2a2c131840361832', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: '1ceb9d2bdad0fcd627f6d9729d12cedac0439083', name: "image" })), h("div", { key: '5c4da7197a80d912a12358e324a1be859ee0db7d', class: "card__floating-controls" }, h("slot", { key: '8fbaada621865c95bfddbc9c54e18721afbbe969', name: "floating-controls" })), h("div", { key: 'dd5daf282b659d12c10de972420eb07cc5c58f81', class: "card__body", style: bodyStyles }, h("div", { key: '964a2d0f76da2ef99e73223c5682c196235b89c1', class: "card__content" }, h("slot", { key: 'eaf859000c7414ba1780d7c3dda62675570ab204', name: "content" }))))));
     }
     static get is() { return "swirl-card"; }
     static get encapsulation() { return "shadow"; }
@@ -574,6 +575,25 @@ export class SwirlCard {
                 "reflect": false,
                 "attribute": "padding-inline-start"
             },
+            "translucent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "translucent"
+            },
             "swirlAriaCurrent": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/swirl-card/swirl-card.stories.js

@@ -5,6 +5,9 @@ export default {
         borderRadius: {
             control: "text",
         },
+        customBackdropFilter: {
+            description: "**Deprecated!** Please use the `translucent` prop instead.",
+        },
     },
     component: "swirl-card",
     tags: ["autodocs"],