@getflip/swirl-components 0.508.0 → 0.510.0

package/dist/cjs/swirl-accordion-item.cjs.entry.js

@@ -2,7 +2,6 @@
 
 var index = require('./index-DfC2lanl.js');
 var index$1 = require('./index-DcAhLZUH.js');
-var v4 = require('./v4-Bq3ldsQe.js');
 
 const swirlAccordionItemCss = () => `:host{display:block}:host *{box-sizing:border-box}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-8);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-accordion-item-toggle-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--swirl-accordion-item-toggle-hovered)}.accordion-item__toggle:active{background-color:var(--swirl-accordion-item-toggle-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--swirl-accordion-item-toggle-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}`;
 
@@ -11,9 +10,9 @@ const SwirlAccordionItem = class {
         index.registerInstance(this, hostRef);
         this.expansionChange = index.createEvent(this, "expansionChange", 7);
         this.headingLevel = 2;
-        this.itemId = v4.v4();
+        this.itemId = crypto.randomUUID();
         this.expanded = false;
-        this.headingId = `${v4.v4()}-heading`;
+        this.headingId = `${crypto.randomUUID()}-heading`;
         this.onHeadingClick = () => {
             this.toggle();
         };
@@ -61,7 +60,7 @@ const SwirlAccordionItem = class {
         const className = index$1.classnames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (index.h(index.Host, { key: '9eb402da9e5382bc658a3bf2bcc6a4e6fc83eb15' }, index.h("div", { key: 'baf87dc91914002c5c26dd360a11520b0059638f', class: className }, index.h(HeadingTag, { key: 'a80584ad5c65a7f6a1ddbc504c456dedd4d8ae50', class: "accordion-item__heading" }, index.h("button", { key: '2a99df8d96f34a7b7e0f9c7838e052f79881f5da', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, index.h("slot", { key: 'f81381e388c95ba7ab3fddaf9622cf8036289dfd', name: "media" }), index.h("span", { key: 'bc855d5d5fc262c67478d00e5b4979f9f573c465', class: "accordion-item__toggle-text" }, this.heading, this.description && (index.h("swirl-text", { key: 'e84613303533dbc57b2e8fbf78ae0b8682631fd7', as: "span", color: "subdued", size: "sm" }, this.description))), index.h("slot", { key: 'c441d88ef4e97bb0a0be9b6b79f3c2a4976bc82f', name: "trailing" }), index.h("span", { key: '1fd5da1543bd83149408f79521aec30d8cfea3e8', class: "accordion-item__icon" }, !this.expanded && (index.h("swirl-icon", { key: '05616a2e22f5f9154654bac3e015bb9ad968bd79', glyph: "chevron-right", size: 20 })), this.expanded && (index.h("swirl-icon", { key: 'eb1e3be7c7ef2153c195d87d9170d76b56627f24', glyph: "expand-more", size: 20 }))))), index.h("div", { key: 'ea15a0c40f8b32194b1acd5f1c6be4db8fbf1f82', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, index.h("slot", { key: 'b85f37fcc199ba95c68f049bc15470dc224f5c2b' })))));
+        return (index.h(index.Host, { key: 'ed0d988e2fc48f140515cfecc40e543ed40d14cc' }, index.h("div", { key: 'a1a9bb9a36e5018b0741aa4980659dca503cf128', class: className }, index.h(HeadingTag, { key: '4919327d90ec3b829aecd9af57601dced379009d', class: "accordion-item__heading" }, index.h("button", { key: '7d31acbf313e30827703c88027121681f0a0d6b0', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, index.h("slot", { key: 'b79a174398448e9fea3407f8d7a4803d5d60d1f5', name: "media" }), index.h("span", { key: 'f092906ba953c07abdbb1d8159268b92960fdc39', class: "accordion-item__toggle-text" }, this.heading, this.description && (index.h("swirl-text", { key: '827970a298d728085b6ae63be7c8c9d44859bbda', as: "span", color: "subdued", size: "sm" }, this.description))), index.h("slot", { key: '6dc7a6efd5948d2954c4e5dce1ccb04475bee77d', name: "trailing" }), index.h("span", { key: '5626c5d1a6a8ccaa4c3f20deaeea6d169da05f89', class: "accordion-item__icon" }, !this.expanded && (index.h("swirl-icon", { key: '7656ce9908d12897902ccc81dbb3b9388f46b292', glyph: "chevron-right", size: 20 })), this.expanded && (index.h("swirl-icon", { key: '5f9ad2f5dcc97d32f30f1981356ac525286ff8d9', glyph: "expand-more", size: 20 }))))), index.h("div", { key: '5b32ae5da0caacd8891b74451a2f3aff91d640af', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, index.h("slot", { key: '50ff36caf14b70bcc79fbf91db1e58ceb0c10a60' })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -3,7 +3,7 @@
 var index = require('./index-DfC2lanl.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
-const swirlCardCss = () => `:host{display:contents}:host *{box-sizing:border-box}.card{position:relative;display:flex;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}.card:not(.card--has-image) .card__image{overflow:hidden;height:0}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{--swirl-avatar-background-color:var(--s-surface-raised-hovered);background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{--swirl-avatar-background-color:var(--s-surface-raised-pressed);background-color:var(--swirl-card-background-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--is--borderless{border:0}.card--elevated.card--elevation-level-1{box-shadow:var(--s-shadow-level-1)}.card--elevated.card--elevation-level-2{box-shadow:var(--s-shadow-level-2)}.card--elevated.card--elevation-level-3{box-shadow:var(--s-shadow-level-3)}.card--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);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;opacity:1}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__floating-controls{position:absolute;z-index:1;top:0;right:0;padding:var(--s-space-12);transition:opacity 0.2s;pointer-events:none;opacity:0}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}.card__content{min-height:100%}@media print{.card{overflow:visible;height:auto;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content}.card__body{min-height:auto;flex-grow:0}.card__content{min-height:auto}}`;
+const swirlCardCss = () => `:host{display:contents}:host *{box-sizing:border-box}.card{position:relative;display:flex;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}.card:not(.card--has-image) .card__image{overflow:hidden;height:0}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{--swirl-avatar-background-color:var(--s-surface-raised-hovered);background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{--swirl-avatar-background-color:var(--s-surface-raised-pressed);background-color:var(--swirl-card-background-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--is--borderless{border:0}.card--elevated.card--elevation-level-1{box-shadow:var(--s-shadow-level-1)}.card--elevated.card--elevation-level-2{box-shadow:var(--s-shadow-level-2)}.card--elevated.card--elevation-level-3{box-shadow:var(--s-shadow-level-3)}.card--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);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;opacity:1}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__floating-controls{position:absolute;z-index:1;top:0;right:0;padding:var(--s-space-12);transition:opacity 0.2s;pointer-events:none;opacity:0}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}.card__content{min-height:100%}@media print{.card{overflow:visible;height:auto;min-height:-moz-fit-content;min-height:fit-content}.card__body{min-height:auto;flex-grow:0}.card__content{min-height:auto}}`;
 
 const swirlCardBorderRadiusTokens = ["xs", "sm", "base", "l", "xl"];
 const SwirlCard = class {

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

@@ -5,7 +5,7 @@ var index$1 = require('./index-DcAhLZUH.js');
 var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
 require('./utils-UfZG-xPD.js');
 
-const swirlChipCss = () => `.sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.25rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:transparent;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:hover{background-color:var(--s-state-hovered)}.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:active{background-color:var(--s-state-pressed)}.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:active .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--intent-highlight.sc-swirl-chip{border-color:var(--s-border-highlight);color:var(--s-text-highlight)}.chip--intent-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--variant-outline.chip--pressed.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip{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.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-text-on-action-primary)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover,.chip--variant-translucent.chip--pressed.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active,.chip--variant-translucent.chip--pressed.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-translucent.sc-swirl-chip{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.sc-swirl-chip:hover{background:var(--s-translucent-medium-hovered)}.chip--variant-translucent.chip--interactive.sc-swirl-chip:active{background:var(--s-translucent-medium-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active{background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--variant-plain.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-plain.sc-swirl-chip .chip__avatar.sc-swirl-chip{margin-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip--has-progress.sc-swirl-chip:not(.chip--size-s)+.chip__remove-button.sc-swirl-chip{top:0.0625rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__trailing-icon.sc-swirl-chip,.chip__trailing-content.sc-swirl-chip{display:inline-flex;flex-shrink:0;margin-left:var(--s-space-8)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.1875rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-state-hovered)}.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-state-pressed)}`;
+const swirlChipCss = () => `.sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.25rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:transparent;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:disabled{cursor:default;color:var(--s-text-disabled)}.chip--interactive.sc-swirl-chip:disabled .chip__icon.sc-swirl-chip{color:var(--s-icon-disabled)}.chip--interactive.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-state-hovered)}.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:active:not(:disabled){background-color:var(--s-state-pressed)}.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip:not(:disabled){border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip:not(:disabled){border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--intent-highlight.sc-swirl-chip:not(:disabled){border-color:var(--s-border-highlight);color:var(--s-text-highlight)}.chip--intent-highlight.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled){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.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-text-on-action-primary)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled):hover:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled):hover:not(:disabled){background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled):active:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled):active:not(:disabled){background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:hover:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:active:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-action-primary-pressed)}.chip--variant-translucent.sc-swirl-chip{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.sc-swirl-chip:hover:not(:disabled){background:var(--s-translucent-medium-hovered)}.chip--variant-translucent.chip--interactive.sc-swirl-chip:active:not(:disabled){background:var(--s-translucent-medium-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled){background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled){background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--variant-plain.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-plain.sc-swirl-chip .chip__avatar.sc-swirl-chip{margin-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip--has-progress.sc-swirl-chip:not(.chip--size-s)+.chip__remove-button.sc-swirl-chip{top:0.0625rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__trailing-icon.sc-swirl-chip,.chip__trailing-content.sc-swirl-chip{display:inline-flex;flex-shrink:0;margin-left:var(--s-space-8)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.1875rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.chip__remove-button.sc-swirl-chip:disabled{cursor:default}.chip__remove-button.sc-swirl-chip:disabled>*.sc-swirl-chip::part(icon),.chip__remove-button.sc-swirl-chip:disabled>*.sc-swirl-chip [part~="icon"]{color:var(--s-icon-disabled)}.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-state-hovered)}.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-state-pressed)}`;
 
 const SwirlChip = class {
     constructor(hostRef) {
@@ -59,7 +59,7 @@ const SwirlChip = class {
             "chip--interactive": this.interactive || this.pressed !== undefined,
             "chip--removable": this.removable,
         });
-        return (index.h(index.Host, { key: '42fb03e9b8bc0bdb5158411533822029fc2f7172' }, index.h(Tag, { key: 'a9353bcf8da70ba240ff50ab36d7983a51ab5d89', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, index.h("span", { key: 'ded71dbe3387cabb8254e279aeb9ccc3f9d6b878', class: "chip__inner" }, showAvatar && (index.h("span", { key: 'b23cb213584d989ca408a3f918b2f62dfbefd31b', class: "chip__avatar" }, index.h("slot", { key: '4a0a97de89ce85b6a3043ba70011d389d4d8567b', name: "avatar" }))), showIcon && (index.h("span", { key: '908d96c06ccc0487da381b854103c9a3bc21da90', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: '388a801b5e203a2dcbe9428d6d241632eb8308fc', class: "chip__label" }, this.label), this.trailingIcon && (index.h("span", { key: '4b25f552a160cce2d9dba87dd5209b8db73ad003', class: "chip__trailing-icon", innerHTML: this.trailingIcon, ref: (el) => (this.trailingIconEl = el) })), showTrailingContent && (index.h("span", { key: 'ddc653637a58b3739c699040ba4e67439c8691e5', class: "chip__trailing-content" }, index.h("slot", { key: 'b98d5c932c275412566b46b4712a691e944b27ad', name: "trailing-content" })))), this.progress !== undefined && (index.h("span", { key: '4a9759a58972fc4b61458c8aeaf01aa57e4dc995', class: "chip__progress-indicator" }, index.h("swirl-progress-indicator", { key: 'd8f93347e50e9e815fc6c7c6df9a3bf54df10a98', label: this.progressBarLabel, value: this.progress })))), this.removable && (index.h("button", { key: '3823bdc2bf504ce3c292c3ff40e50125d05c92da', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, index.h("swirl-icon-close", { key: '64576204b99032780f4bbf35a77fb94959a80ab9', size: 20 })))));
+        return (index.h(index.Host, { key: 'a143d32603ecf2843a8b1291dfcad7c9a59fb6dc' }, index.h(Tag, { key: 'a6ec7b1554b4b53317da9e4f4174eeb37fa71292', "aria-disabled": this.interactive && this.disabled ? "true" : undefined, "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, disabled: this.interactive ? this.disabled : undefined, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, index.h("span", { key: '06290531c4484d1d40350190cca4e28fb9554701', class: "chip__inner" }, showAvatar && (index.h("span", { key: 'fb1586360058ce70836b0d9abb16fb2ffb4ffbf3', class: "chip__avatar" }, index.h("slot", { key: 'cbea43f4ad440ca2d59b56dbef167a0197930544', name: "avatar" }))), showIcon && (index.h("span", { key: '82b15edc910565d8b8d2d494f1e061771aeaa0a2', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: '6c5882703ac0a24145ccce4063d89f1ebaea5f41', class: "chip__label" }, this.label), this.trailingIcon && (index.h("span", { key: '1dd62bebc93bcf530cd049084c0c9f867d803c84', class: "chip__trailing-icon", innerHTML: this.trailingIcon, ref: (el) => (this.trailingIconEl = el) })), showTrailingContent && (index.h("span", { key: 'dea6309c1dd6d1648c5abbf353270da7d272d9a6', class: "chip__trailing-content" }, index.h("slot", { key: 'c8de705b65639aca3758e81fb6f0547b35a6b485', name: "trailing-content" })))), this.progress !== undefined && (index.h("span", { key: '1cb286d6d821e9dcb1f0cb33d0daf1601909a5ab', class: "chip__progress-indicator" }, index.h("swirl-progress-indicator", { key: '5fa7db1e4452a036fc3e2bb2190996bd6e4bdf50', label: this.progressBarLabel, value: this.progress })))), this.removable && (index.h("button", { key: 'f48ecfa4f1d207cd9202af9206478d59c176a096', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.removeButtonLabel, class: "chip__remove-button", disabled: this.disabled, onClick: this.removeChip.emit, type: "button" }, index.h("swirl-icon-close", { key: 'c143ebba597808238fd7bb07fd356d85333d8c5c', size: 20 })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -2,7 +2,6 @@
 
 var index = require('./index-DfC2lanl.js');
 var index$1 = require('./index-DcAhLZUH.js');
-var v4 = require('./v4-Bq3ldsQe.js');
 
 // Clamps a value between an upper and lower bound.
 // We use ternary operators because it makes the minified code
@@ -397,7 +396,7 @@ const SwirlColorInput = class {
         this.valueChange = index.createEvent(this, "valueChange", 7);
         this.pickerButtonLabel = "Open color picker";
         this.pickerLabel = "Color picker";
-        this.pickerId = `color-picker-${v4.v4()}`;
+        this.pickerId = `color-picker-${crypto.randomUUID()}`;
         this.onPickerChange = (event) => {
             this.value = event.detail.value;
         };
@@ -446,11 +445,11 @@ const SwirlColorInput = class {
         const className = index$1.classnames("color-input", {
             "color-input--inline": this.inline,
         });
-        return (index.h(index.Host, { key: '2ed3d40d8b69af36b2226c911cc5dae84742f0cb' }, index.h("div", { key: 'ef197f8e0a01ddf121df8f47a99691040663f286', class: className }, index.h("input", { key: '34f8ae5eb9aaa8e664a6b47fac63917a2f7e2039', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), index.h("swirl-popover-trigger", { key: '3e11abdfdf445802e84cf3e87de2499c3a402f9a', swirlPopover: this.pickerId }, index.h("button", { key: 'e99eb09576d3843aebd5c8803e0d9235bbb0139e', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (index.h(index.Host, { key: '2ee1b42158b3caeb6ab7b0c46192a327ae9a854e' }, index.h("div", { key: 'c14754cc9fe4d74fd40ec50cb796dd1b7688d823', class: className }, index.h("input", { key: '4d884de2795ed648a11cda4eaf08e03cf825e443', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), index.h("swirl-popover-trigger", { key: '9d543f84f7831b48af0036fa0062ea98afdbfecf', swirlPopover: this.pickerId }, index.h("button", { key: 'fe0ffd3db789188beb2c5ca62bfcdd241a932721', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
                 backgroundColor: this.disabled
                     ? "var(--s-border-subdued)"
                     : this.value,
-            }, type: "button" })), index.h("swirl-popover", { key: 'b60e4424b971f6f76b5e0adc9d7b155cd7a0fdac', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, index.h("swirl-box", { key: '756f20986aeb68b92bd03649623b64f210b1f846', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, index.h("hex-color-picker", { key: '5410df4ccf4537763171af4b15ab26898e007ff4', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), index.h("swirl-popover", { key: 'c9ac21281b927941dfe43851785c94ac48594c6b', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, index.h("swirl-box", { key: 'c888476cc56718853a644e2b722defa46babd920', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, index.h("hex-color-picker", { key: 'f5ee44a0661d3c8ae6d076a0817b76e8a646bd5a', color: this.value, ref: (el) => (this.picker = el) }))))));
     }
     static get watchers() { return {
         "value": [{