@getflip/swirl-components 0.486.0-beta-20260505125549 → 0.486.0

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-05-05T12:55:05",
+  "timestamp": "2026-05-06T11:14:18",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.1",

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:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-raised-default)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-state-pressed)}.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--interactive.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-state-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:hover+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{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:active+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{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{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: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{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 SwirlChip = class {
     constructor(hostRef) {

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

@@ -7,7 +7,7 @@ var index$1 = require('./index-DcAhLZUH.js');
 var index_esm = require('./index.esm-D5HbQDBa.js');
 var utils = require('./utils-UfZG-xPD.js');
 
-const swirlPopoverCss = () => `:host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover--translucent .popover__content{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)}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;border-radius:var(       --swirl-popover-border-radius,       var(--s-border-radius-base)     );max-width:22.5rem;animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}`;
+const swirlPopoverCss = () => `:host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{padding-top:env(safe-area-inset-top);top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover--translucent .popover__content{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)}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;border-radius:var(       --swirl-popover-border-radius,       var(--s-border-radius-base)     );max-width:22.5rem;animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}`;
 
 const swirlPopoverBorderRadiusTokens = ["xs", "sm", "base", "l", "xl"];
 const SwirlPopover = class {

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

@@ -118,6 +118,7 @@ const SwirlTextInput = class {
     adjustInputSize() {
         if (this.rows > 1 || this.autoGrow) {
             this.inputEl.style.width = "";
+            this.inputEl.style.height = "auto";
             this.inputEl.style.height = Boolean(this.inputEl.scrollHeight)
                 ? this.inputEl.scrollHeight / 16 + "rem"
                 : "";
@@ -165,7 +166,7 @@ const SwirlTextInput = class {
             "text-input--inline": this.inline,
             "text-input--show-password": this.type === "password" && this.showPassword,
         });
-        return (index.h(index.Host, { key: '86d0b6ba96e3248f369461527d22191031c54364' }, index.h("div", { key: '706c269127bc1b1d278b0276ff2d508c46b1badb', class: className }, this.prefixLabel && (index.h("span", { key: '0e2e54a2f1e1642016e7ccbdaf93836216f984e9', class: "text-input__prefix" }, this.prefixLabel)), index.h(Tag, { key: 'e7e041cafa10c35b57a757f18ea53236cdfa3a55', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (index.h("span", { key: '28604a47e75f169d507e57346df10715b2842563', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { key: '84b3bd1b998b2a1417d7ef18cfcdb0a1a8b8ef87', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { key: '0eff2281d586dcb903e6634f7d33141aa171821f', size: this.iconSize }))), showPasswordToggle && (index.h("button", { key: '16fdb2aa2148b46d6833f5f81c18e55c07ab943c', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { key: 'f68f6fc9460ff2d8eb7c8466221a6b54d124419b', class: "text-input__stepper" }, index.h("button", { key: 'e582af56a177eb5315fb900e56778061753a23cf', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { key: '017c4bda6bc8bac3fba00eca41f56e730831ed83', size: this.iconSize })), index.h("button", { key: 'd48dfb497daae54c3106eaae0804fe927275206a', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { key: 'b136fdd62fff0bbdc9193ee53660ea8d9b0416e7', size: this.iconSize })))), showCharacterCounter && (index.h("span", { key: '529e111de421d936316d670208808ebb9abb1d26', class: "text-input__character-counter", "aria-live": "polite" }, index.h("swirl-visually-hidden", { key: '5c34b5c2c780fe088aa712fdaac46426510c88cb' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+        return (index.h(index.Host, { key: 'a30834f0740bfffea7f5ce4eb767e3d778ca5e8e' }, index.h("div", { key: 'e8a7a6a2d3760349330e6877aeafdd5e653198c5', class: className }, this.prefixLabel && (index.h("span", { key: '1a2de509fa993bdcb753889bda3bc4c8a09bce47', class: "text-input__prefix" }, this.prefixLabel)), index.h(Tag, { key: '714b42e0489a82e11874b7c09bcdfe6bf116e21a', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (index.h("span", { key: '7dd58d866f09a455d727faf419609bd0d498e201', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { key: 'd6c57fe98e0786e7e4ee8d393a8e64861a833de9', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { key: 'cc3f5d3e04c37844aaf7a7506e2a1cd605d28cd2', size: this.iconSize }))), showPasswordToggle && (index.h("button", { key: '04bfb17fa4bd317e24a8f2c3120d087883a68303', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { key: '30296317acd84c589e56186eea0c9c7bf65784ee', class: "text-input__stepper" }, index.h("button", { key: 'fe4830f4b0ade997c837e7311ea634cec3c4c3e0', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { key: '981fcc970fa7e855e0c287658e7a7553d8790895', size: this.iconSize })), index.h("button", { key: '907edb43a4c9d043f77bf8c2877a9613919a370b', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { key: 'd057082c9e503ad43d4b12cc3de982182c55862d', size: this.iconSize })))), showCharacterCounter && (index.h("span", { key: '994e5065ea7faa5e12a127ca3428788619c87f0d', class: "text-input__character-counter", "aria-live": "polite" }, index.h("swirl-visually-hidden", { key: 'a2e5552d173a9855f05bf610d94d3aef748c4a01' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -56,18 +56,6 @@
       background-color: var(--s-surface-raised-hovered);
     }
 
-.chip--interactive:hover + .chip__remove-button {
-      background-color: var(--s-surface-raised-default);
-    }
-
-.chip--interactive:hover + .chip__remove-button:hover {
-        background-color: var(--s-surface-raised-hovered);
-      }
-
-.chip--interactive:hover + .chip__remove-button:active {
-        background-color: var(--s-state-pressed);
-      }
-
 .chip--interactive:active {
     background-color: var(--s-state-pressed);
   }
@@ -76,10 +64,6 @@
       background-color: var(--s-surface-raised-pressed);
     }
 
-.chip--interactive:active + .chip__remove-button {
-      background-color: var(--s-state-pressed);
-    }
-
 .chip--icon-color-highlight .chip__icon {
     color: var(--s-icon-highlight);
   }
@@ -133,18 +117,10 @@
       background-color: var(--s-action-primary-hovered);
     }
 
-.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-translucent.chip--pressed:active {
       background-color: var(--s-action-primary-pressed);
     }
 
-.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-translucent.chip--pressed + .chip__remove-button {
       color: var(--s-text-on-action-primary);
       background-color: var(--s-action-primary-default);

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

@@ -105,6 +105,7 @@
     }
 
     .popover--fullscreen-bottom-sheet .popover__content {
+      padding-top: env(safe-area-inset-top);
       top: 0;
       border-top-left-radius: 0;
       border-top-right-radius: 0;

package/dist/collection/components/swirl-text-input/swirl-text-input.js

@@ -107,6 +107,7 @@ export class SwirlTextInput {
     adjustInputSize() {
         if (this.rows > 1 || this.autoGrow) {
             this.inputEl.style.width = "";
+            this.inputEl.style.height = "auto";
             this.inputEl.style.height = Boolean(this.inputEl.scrollHeight)
                 ? this.inputEl.scrollHeight / 16 + "rem"
                 : "";
@@ -154,7 +155,7 @@ export class SwirlTextInput {
             "text-input--inline": this.inline,
             "text-input--show-password": this.type === "password" && this.showPassword,
         });
-        return (h(Host, { key: '86d0b6ba96e3248f369461527d22191031c54364' }, h("div", { key: '706c269127bc1b1d278b0276ff2d508c46b1badb', class: className }, this.prefixLabel && (h("span", { key: '0e2e54a2f1e1642016e7ccbdaf93836216f984e9', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: 'e7e041cafa10c35b57a757f18ea53236cdfa3a55', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '28604a47e75f169d507e57346df10715b2842563', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '84b3bd1b998b2a1417d7ef18cfcdb0a1a8b8ef87', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '0eff2281d586dcb903e6634f7d33141aa171821f', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '16fdb2aa2148b46d6833f5f81c18e55c07ab943c', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'f68f6fc9460ff2d8eb7c8466221a6b54d124419b', class: "text-input__stepper" }, h("button", { key: 'e582af56a177eb5315fb900e56778061753a23cf', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '017c4bda6bc8bac3fba00eca41f56e730831ed83', size: this.iconSize })), h("button", { key: 'd48dfb497daae54c3106eaae0804fe927275206a', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'b136fdd62fff0bbdc9193ee53660ea8d9b0416e7', size: this.iconSize })))), showCharacterCounter && (h("span", { key: '529e111de421d936316d670208808ebb9abb1d26', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: '5c34b5c2c780fe088aa712fdaac46426510c88cb' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+        return (h(Host, { key: 'a30834f0740bfffea7f5ce4eb767e3d778ca5e8e' }, h("div", { key: 'e8a7a6a2d3760349330e6877aeafdd5e653198c5', class: className }, this.prefixLabel && (h("span", { key: '1a2de509fa993bdcb753889bda3bc4c8a09bce47', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '714b42e0489a82e11874b7c09bcdfe6bf116e21a', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '7dd58d866f09a455d727faf419609bd0d498e201', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: 'd6c57fe98e0786e7e4ee8d393a8e64861a833de9', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: 'cc3f5d3e04c37844aaf7a7506e2a1cd605d28cd2', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '04bfb17fa4bd317e24a8f2c3120d087883a68303', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: '30296317acd84c589e56186eea0c9c7bf65784ee', class: "text-input__stepper" }, h("button", { key: 'fe4830f4b0ade997c837e7311ea634cec3c4c3e0', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '981fcc970fa7e855e0c287658e7a7553d8790895', size: this.iconSize })), h("button", { key: '907edb43a4c9d043f77bf8c2877a9613919a370b', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'd057082c9e503ad43d4b12cc3de982182c55862d', size: this.iconSize })))), showCharacterCounter && (h("span", { key: '994e5065ea7faa5e12a127ca3428788619c87f0d', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: 'a2e5552d173a9855f05bf610d94d3aef748c4a01' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
     }
     static get is() { return "swirl-text-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/components/swirl-chip.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as r,createEvent as c,h as s,Host as e,transformTag as t}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{D as h}from"./media-query.service.js";import{d as p}from"./swirl-icon-close2.js";import{d as o}from"./swirl-progress-indicator2.js";const n=i(class extends r{constructor(i){super(),!1!==i&&this.__registerHost(),this.chipClick=c(this,"chipClick",7),this.removeChip=c(this,"remove",7),this.borderRadius="pill",this.iconColor="default",this.intent="default",this.interactive=!1,this.progressBarLabel="Loading progress",this.removeButtonLabel="Remove",this.size="m",this.variant="outline",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=h.subscribe((i=>{this.isDesktop=i,this.forceIconProps()}))}componentDidRender(){this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!this.iconEl&&!this.trailingIconEl)return;const i="s"===this.size?"16":this.isDesktop?"20":"24";if(this.iconEl){const r=this.iconEl.children[0];r?.setAttribute("size",i)}if(this.trailingIconEl){const r=this.trailingIconEl.children[0];r?.setAttribute("size",i)}}render(){const i=this.interactive||void 0!==this.pressed?"button":"span",r=!!this.el.querySelector('[slot="avatar"]'),c=!r&&!!this.icon,t=a("chip","chip--border-radius-"+this.borderRadius,"chip--icon-color-"+this.iconColor,"chip--intent-"+this.intent,"chip--size-"+this.size,"chip--variant-"+this.variant,{"chip--pressed":this.pressed,"chip--has-progress":void 0!==this.progress,"chip--interactive":this.interactive||void 0!==this.pressed,"chip--removable":this.removable});return s(e,{key:"556b0ebe143aae953feb22d5fffb385da98331b2"},s(i,{key:"d6f2d8fdfe06e7197632a1276046f9982d88a033","aria-pressed":void 0!==this.pressed?this.pressed+"":void 0,class:t,onClick:this.chipClick.emit,type:this.interactive?"button":void 0},s("span",{key:"fd8aac7bfc2435a277df0be543d4c219483e5bec",class:"chip__inner"},r&&s("span",{key:"bf9c36ecbbb30672cb804bece5b67613a38c7602",class:"chip__avatar"},s("slot",{key:"828c82e1f0d291ef766e8dd539737555d94f5d86",name:"avatar"})),c&&s("span",{key:"5d82eee4688b3250b19f10a9c5efedda7f03e187",class:"chip__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),s("span",{key:"e4e65bd102603bd86031687ce843f0556431158b",class:"chip__label"},this.label),this.trailingIcon&&s("span",{key:"ae819833c08132dbf18f6a1cf26b980030f229d1",class:"chip__trailing-icon",innerHTML:this.trailingIcon,ref:i=>this.trailingIconEl=i})),void 0!==this.progress&&s("span",{key:"371d5d577137fe5f58653b6f2bf5afe6f2c75a29",class:"chip__progress-indicator"},s("swirl-progress-indicator",{key:"8024a8596c0f3e2ddb983184cf69a3226dd139f5",label:this.progressBarLabel,value:this.progress}))),this.removable&&s("button",{key:"be2e97f005c28e54e52d618734bbc783b495c479","aria-label":this.removeButtonLabel,class:"chip__remove-button",onClick:this.removeChip.emit,type:"button"},s("swirl-icon-close",{key:"9c59678ddc6aa518e7bc8d2618783cd7e7ee0057",size:20})))}get el(){return this}static get style(){return'.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:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-raised-default)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-state-pressed)}.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--interactive.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-state-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:hover+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{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:active+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{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{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)}'}},[262,"swirl-chip",{borderRadius:[1,"border-radius"],icon:[1],iconColor:[1,"icon-color"],trailingIcon:[1,"trailing-icon"],intent:[1],interactive:[4],label:[1],progress:[2],pressed:[4],progressBarLabel:[1,"progress-bar-label"],removable:[4],removeButtonLabel:[1,"remove-button-label"],size:[1],variant:[1]}]),l=n,d=function(){"undefined"!=typeof customElements&&["swirl-chip","swirl-icon-close","swirl-progress-indicator"].forEach((i=>{switch(i){case"swirl-chip":customElements.get(t(i))||customElements.define(t(i),n);break;case"swirl-icon-close":customElements.get(t(i))||p();break;case"swirl-progress-indicator":customElements.get(t(i))||o()}}))};export{l as SwirlChip,d as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as r,createEvent as c,h as s,Host as e,transformTag as a}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as h}from"./media-query.service.js";import{d as p}from"./swirl-icon-close2.js";import{d as o}from"./swirl-progress-indicator2.js";const n=i(class extends r{constructor(i){super(),!1!==i&&this.__registerHost(),this.chipClick=c(this,"chipClick",7),this.removeChip=c(this,"remove",7),this.borderRadius="pill",this.iconColor="default",this.intent="default",this.interactive=!1,this.progressBarLabel="Loading progress",this.removeButtonLabel="Remove",this.size="m",this.variant="outline",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=h.subscribe((i=>{this.isDesktop=i,this.forceIconProps()}))}componentDidRender(){this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!this.iconEl&&!this.trailingIconEl)return;const i="s"===this.size?"16":this.isDesktop?"20":"24";if(this.iconEl){const r=this.iconEl.children[0];r?.setAttribute("size",i)}if(this.trailingIconEl){const r=this.trailingIconEl.children[0];r?.setAttribute("size",i)}}render(){const i=this.interactive||void 0!==this.pressed?"button":"span",r=!!this.el.querySelector('[slot="avatar"]'),c=!r&&!!this.icon,a=t("chip","chip--border-radius-"+this.borderRadius,"chip--icon-color-"+this.iconColor,"chip--intent-"+this.intent,"chip--size-"+this.size,"chip--variant-"+this.variant,{"chip--pressed":this.pressed,"chip--has-progress":void 0!==this.progress,"chip--interactive":this.interactive||void 0!==this.pressed,"chip--removable":this.removable});return s(e,{key:"556b0ebe143aae953feb22d5fffb385da98331b2"},s(i,{key:"d6f2d8fdfe06e7197632a1276046f9982d88a033","aria-pressed":void 0!==this.pressed?this.pressed+"":void 0,class:a,onClick:this.chipClick.emit,type:this.interactive?"button":void 0},s("span",{key:"fd8aac7bfc2435a277df0be543d4c219483e5bec",class:"chip__inner"},r&&s("span",{key:"bf9c36ecbbb30672cb804bece5b67613a38c7602",class:"chip__avatar"},s("slot",{key:"828c82e1f0d291ef766e8dd539737555d94f5d86",name:"avatar"})),c&&s("span",{key:"5d82eee4688b3250b19f10a9c5efedda7f03e187",class:"chip__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),s("span",{key:"e4e65bd102603bd86031687ce843f0556431158b",class:"chip__label"},this.label),this.trailingIcon&&s("span",{key:"ae819833c08132dbf18f6a1cf26b980030f229d1",class:"chip__trailing-icon",innerHTML:this.trailingIcon,ref:i=>this.trailingIconEl=i})),void 0!==this.progress&&s("span",{key:"371d5d577137fe5f58653b6f2bf5afe6f2c75a29",class:"chip__progress-indicator"},s("swirl-progress-indicator",{key:"8024a8596c0f3e2ddb983184cf69a3226dd139f5",label:this.progressBarLabel,value:this.progress}))),this.removable&&s("button",{key:"be2e97f005c28e54e52d618734bbc783b495c479","aria-label":this.removeButtonLabel,class:"chip__remove-button",onClick:this.removeChip.emit,type:"button"},s("swirl-icon-close",{key:"9c59678ddc6aa518e7bc8d2618783cd7e7ee0057",size:20})))}get el(){return this}static get style(){return'.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{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)}'}},[262,"swirl-chip",{borderRadius:[1,"border-radius"],icon:[1],iconColor:[1,"icon-color"],trailingIcon:[1,"trailing-icon"],intent:[1],interactive:[4],label:[1],progress:[2],pressed:[4],progressBarLabel:[1,"progress-bar-label"],removable:[4],removeButtonLabel:[1,"remove-button-label"],size:[1],variant:[1]}]),l=n,d=function(){"undefined"!=typeof customElements&&["swirl-chip","swirl-icon-close","swirl-progress-indicator"].forEach((i=>{switch(i){case"swirl-chip":customElements.get(a(i))||customElements.define(a(i),n);break;case"swirl-icon-close":customElements.get(a(i))||p();break;case"swirl-progress-indicator":customElements.get(a(i))||o()}}))};export{l as SwirlChip,d as defineCustomElement}

package/dist/components/swirl-popover2.js

@@ -1 +1 @@
-import{proxyCustomElement as o,HTMLElement as e,createEvent as t,h as i,Host as r,transformTag as n}from"@stencil/core/internal/client";import{c as s,a as p,s as a,o as d,f as c}from"./floating-ui.dom.js";import{d as l,e as h}from"./body-scroll-lock.js";import{c as v}from"./index2.js";import{t as m}from"./index.esm.js";import{i as f,t as u,k as b,q as _}from"./utils.js";const g=["xs","sm","base","l","xl"],w=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.popoverClose=t(this,"popoverClose",7),this.popoverOpen=t(this,"popoverOpen",7),this.animation="scale-in-xy",this.enableFlip=!0,this.fallbackAxisSideDirection="none",this.maxHeight="22rem",this.offset=8,this.padded=!0,this.placement="bottom-start",this.returnFocusToTrigger=!0,this.translucent=!0,this.borderRadius="base",this.active=!1,this.closing=!1,this.componentLoaded=!1,this.togglePopover=o=>{o.stopPropagation(),this.active?this.close():this.open()},this.onKeydown=o=>{"Escape"===o.code&&this.active&&(o.stopImmediatePropagation(),o.stopPropagation(),this.close())},this.reposition=async()=>{const o=f();if(!Boolean(this.triggerEl)||!Boolean(this.contentContainer))return;if(o)return void(this.position=void 0);const e="number"==typeof this.offset?{mainAxis:this.offset,crossAxis:0}:{mainAxis:this.offset[0],crossAxis:this.offset[1]},t=u("--s-space-16"),i=a({padding:{left:t,right:t}}),r=this.enableFlip?[d(e),c({fallbackAxisSideDirection:this.fallbackAxisSideDirection}),i]:[d(e),i];this.position=await s(this.triggerEl,this.contentContainer,{middleware:r,placement:this.placement,strategy:"fixed"})},this.onCloseButtonClick=()=>{this.close()}}connectedCallback(){this.componentLoaded&&this.connectTrigger()}componentDidLoad(){this.connectTrigger(),this.updateTriggerAttributes(),Boolean(this.trigger)&&console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs'),this.componentLoaded=!0}disconnectedCallback(){this.unlockBodyScroll(),this.disableAutoUpdate?.(),this.disableAutoUpdate=void 0,this.triggerEl?.removeEventListener("click",this.togglePopover)}onWindowFocusIn(o){if(!this.active)return;const e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),t="webkit"in window,i=e||t,r=o.target,n=o.relatedTarget,s=b(),p=o.composedPath(),a=!p.includes(this.el)&&!this.el.contains(s),d=!p.includes(this.triggerEl),c=i&&!this.el.contains(n||r)&&n!==this.el;["SWIRL-TAB"].includes(r.tagName)||!a||!d||i&&!c||this.close()}onWindowBlur(){if(!this.active||this.closing)return;const o=document.activeElement;o&&["IFRAME"].includes(o.tagName)&&this.close()}onWindowClick(o){if(!this.active||this.closing)return;const e=o.target,t=this.el.contains(e),i=o.composedPath().some((o=>!!(Boolean(o)&&o instanceof Node)&&this.el.contains(o))),r=e===this.triggerEl||this.triggerEl.contains(e)||o.composedPath().includes(this.triggerEl);t||i||r||this.close()}async close(o){!this.closing&&this.active&&(this.popoverClose.emit(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.closing=!0,setTimeout((()=>{this.popoverEl?.hidePopover(),this.active=!1,this.closing=!1,this.position=void 0,this.updateTriggerAttributes(this.openedVia),this.openedVia=void 0}),150),this.unlockBodyScroll(),this.returnFocusToTrigger&&!o&&this.getNativeTriggerElement()?.focus())}async open(o,e,t){if(this.triggerEl=o||this.triggerEl,this.active||!Boolean(this.triggerEl))return;this.adjustWidth(),this.position=void 0,this.active=!0,this.openedVia=t,this.updateTriggerAttributes(t);const i=this.getFocusableChildren();requestAnimationFrame((async()=>{this.popoverEl?.showPopover(),await this.reposition(),this.popoverOpen.emit({position:this.position}),i.length>0&&!e?i[0].focus():e||this.contentContainer.focus(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=p(this.triggerEl,this.contentContainer,(()=>this.reposition())),this.scrollContainer.scrollTop=0,this.lockBodyScroll()}))}async isOpen(){return this.active&&!this.closing}async toggle(o,e){this.active?this.close():this.open(o,void 0,e)}connectTrigger(){Boolean(this.trigger)?(this.triggerEl="string"==typeof this.trigger?_(this.triggerContainer||document.body,`#${this.trigger}`)[0]:this.trigger,Boolean(this.triggerEl)&&this.triggerEl.addEventListener("click",this.togglePopover)):this.triggerEl=void 0}getNativeTriggerElement(){return m(this.triggerEl,{includeContainer:!0,getShadowRoot:!0}).at(0)}updateTriggerAttributes(o){if(!Boolean(this.triggerEl))return;const e=this.getNativeTriggerElement();Boolean(e)&&("hover"!==o?(e.setAttribute("aria-controls",this.el.id),e.setAttribute("aria-expanded",String(this.active))):(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")),e.setAttribute("aria-haspopup","dialog"))}getFocusableChildren(){return _(this.el,'[role="menuitem"], [role="menuitemradio"], [role="option"]')}adjustWidth(){let o=this.useContainerWidth;[!0,"true"].includes(this.useContainerWidth)?o=!0:[!1,"false"].includes(this.useContainerWidth)&&(o=!1);const e=!window.matchMedia("(min-width: 768px)").matches;if(Boolean(o)&&!e){const e="string"==typeof o&&this.el.closest(o)||this.el.parentElement;this.contentContainer.style.maxWidth="none",this.contentContainer.style.width=e.getBoundingClientRect().width+"px"}else this.contentContainer.style.maxWidth="",this.contentContainer.style.width=""}lockBodyScroll(){f()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&l(this.scrollContainer)}unlockBodyScroll(){f()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&h(this.scrollContainer)}render(){const o=!window.matchMedia("(min-width: 768px)").matches,e=g.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius,t=v("popover",`popover--animation-${this.animation}`,`popover--placement-${this.position?.placement}`,{"popover--active":this.active,"popover--closing":this.closing,"popover--fullscreen-bottom-sheet":this.fullscreenBottomSheet,"popover--inactive":!this.active,"popover--translucent":this.translucent&&!this.transparent,"popover--transparent":this.transparent,"popover--padded":this.padded});return i(r,{key:"c72be6ac9e9adfb0ab0e410e392018eaba9c8ddf"},i("div",{key:"5d3730af1e4693ac33bb19e3079793d7031da0ae",popover:"manual",class:t,onKeyDown:this.onKeydown,ref:o=>this.popoverEl=o},i("div",{key:"3f1914a390e63960f2f73c530ea3f3fe580df76f","aria-hidden":this.active?"false":"true","aria-label":this.label,class:"popover__content",id:this.popoverId,part:"popover__content",role:"dialog",ref:o=>this.contentContainer=o,style:{top:Boolean(this.position)?`${this.position?.y}px`:"",left:Boolean(this.position)?`${this.position?.x}px`:"",opacity:!this.active||this.position||o?void 0:"0","--swirl-popover-border-radius":e},tabindex:"-1"},i("span",{key:"9802ca13e3ca9e39178c1a95c533278b4b1b0303",class:"popover__handle"}),i("div",{key:"2b911cfad74b6f130ee946100f9403bd748b9619",class:"popover__scroll-container",part:"popover__scroll-container",ref:o=>this.scrollContainer=o,style:{maxHeight:!o&&Boolean(this.maxHeight)?this.maxHeight:void 0}},i("slot",{key:"b03444b9c20c175a206b6f2d890c904c582bd4b5"}))),this.active&&i("div",{key:"96ee38b9fd630bd895721249d42c98e7d0a6795e",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return this}static get style(){return':host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover--translucent .popover__content{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)}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;border-radius:var(       --swirl-popover-border-radius,       var(--s-border-radius-base)     );max-width:22.5rem;animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}'}},[257,"swirl-popover",{animation:[1],disableScrollLock:[4,"disable-scroll-lock"],enableFlip:[4,"enable-flip"],fallbackAxisSideDirection:[1,"fallback-axis-side-direction"],fullscreenBottomSheet:[4,"fullscreen-bottom-sheet"],label:[1],maxHeight:[1,"max-height"],offset:[2],padded:[4],popoverId:[1,"popover-id"],placement:[1],returnFocusToTrigger:[4,"return-focus-to-trigger"],translucent:[4],transparent:[4],trigger:[1],triggerContainer:[16],useContainerWidth:[8,"use-container-width"],borderRadius:[1,"border-radius"],active:[32],closing:[32],position:[32],close:[64],open:[64],isOpen:[64],toggle:[64]},[[8,"focusin","onWindowFocusIn"],[8,"blur","onWindowBlur"],[8,"click","onWindowClick"]]]);function x(){"undefined"!=typeof customElements&&["swirl-popover"].forEach((o=>{"swirl-popover"===o&&(customElements.get(n(o))||customElements.define(n(o),w))}))}export{w as S,x as d}
+import{proxyCustomElement as o,HTMLElement as e,createEvent as t,h as i,Host as r,transformTag as n}from"@stencil/core/internal/client";import{c as s,a as p,s as a,o as d,f as c}from"./floating-ui.dom.js";import{d as l,e as h}from"./body-scroll-lock.js";import{c as v}from"./index2.js";import{t as m}from"./index.esm.js";import{i as f,t as u,k as b,q as _}from"./utils.js";const g=["xs","sm","base","l","xl"],w=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.popoverClose=t(this,"popoverClose",7),this.popoverOpen=t(this,"popoverOpen",7),this.animation="scale-in-xy",this.enableFlip=!0,this.fallbackAxisSideDirection="none",this.maxHeight="22rem",this.offset=8,this.padded=!0,this.placement="bottom-start",this.returnFocusToTrigger=!0,this.translucent=!0,this.borderRadius="base",this.active=!1,this.closing=!1,this.componentLoaded=!1,this.togglePopover=o=>{o.stopPropagation(),this.active?this.close():this.open()},this.onKeydown=o=>{"Escape"===o.code&&this.active&&(o.stopImmediatePropagation(),o.stopPropagation(),this.close())},this.reposition=async()=>{const o=f();if(!Boolean(this.triggerEl)||!Boolean(this.contentContainer))return;if(o)return void(this.position=void 0);const e="number"==typeof this.offset?{mainAxis:this.offset,crossAxis:0}:{mainAxis:this.offset[0],crossAxis:this.offset[1]},t=u("--s-space-16"),i=a({padding:{left:t,right:t}}),r=this.enableFlip?[d(e),c({fallbackAxisSideDirection:this.fallbackAxisSideDirection}),i]:[d(e),i];this.position=await s(this.triggerEl,this.contentContainer,{middleware:r,placement:this.placement,strategy:"fixed"})},this.onCloseButtonClick=()=>{this.close()}}connectedCallback(){this.componentLoaded&&this.connectTrigger()}componentDidLoad(){this.connectTrigger(),this.updateTriggerAttributes(),Boolean(this.trigger)&&console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs'),this.componentLoaded=!0}disconnectedCallback(){this.unlockBodyScroll(),this.disableAutoUpdate?.(),this.disableAutoUpdate=void 0,this.triggerEl?.removeEventListener("click",this.togglePopover)}onWindowFocusIn(o){if(!this.active)return;const e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),t="webkit"in window,i=e||t,r=o.target,n=o.relatedTarget,s=b(),p=o.composedPath(),a=!p.includes(this.el)&&!this.el.contains(s),d=!p.includes(this.triggerEl),c=i&&!this.el.contains(n||r)&&n!==this.el;["SWIRL-TAB"].includes(r.tagName)||!a||!d||i&&!c||this.close()}onWindowBlur(){if(!this.active||this.closing)return;const o=document.activeElement;o&&["IFRAME"].includes(o.tagName)&&this.close()}onWindowClick(o){if(!this.active||this.closing)return;const e=o.target,t=this.el.contains(e),i=o.composedPath().some((o=>!!(Boolean(o)&&o instanceof Node)&&this.el.contains(o))),r=e===this.triggerEl||this.triggerEl.contains(e)||o.composedPath().includes(this.triggerEl);t||i||r||this.close()}async close(o){!this.closing&&this.active&&(this.popoverClose.emit(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.closing=!0,setTimeout((()=>{this.popoverEl?.hidePopover(),this.active=!1,this.closing=!1,this.position=void 0,this.updateTriggerAttributes(this.openedVia),this.openedVia=void 0}),150),this.unlockBodyScroll(),this.returnFocusToTrigger&&!o&&this.getNativeTriggerElement()?.focus())}async open(o,e,t){if(this.triggerEl=o||this.triggerEl,this.active||!Boolean(this.triggerEl))return;this.adjustWidth(),this.position=void 0,this.active=!0,this.openedVia=t,this.updateTriggerAttributes(t);const i=this.getFocusableChildren();requestAnimationFrame((async()=>{this.popoverEl?.showPopover(),await this.reposition(),this.popoverOpen.emit({position:this.position}),i.length>0&&!e?i[0].focus():e||this.contentContainer.focus(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=p(this.triggerEl,this.contentContainer,(()=>this.reposition())),this.scrollContainer.scrollTop=0,this.lockBodyScroll()}))}async isOpen(){return this.active&&!this.closing}async toggle(o,e){this.active?this.close():this.open(o,void 0,e)}connectTrigger(){Boolean(this.trigger)?(this.triggerEl="string"==typeof this.trigger?_(this.triggerContainer||document.body,`#${this.trigger}`)[0]:this.trigger,Boolean(this.triggerEl)&&this.triggerEl.addEventListener("click",this.togglePopover)):this.triggerEl=void 0}getNativeTriggerElement(){return m(this.triggerEl,{includeContainer:!0,getShadowRoot:!0}).at(0)}updateTriggerAttributes(o){if(!Boolean(this.triggerEl))return;const e=this.getNativeTriggerElement();Boolean(e)&&("hover"!==o?(e.setAttribute("aria-controls",this.el.id),e.setAttribute("aria-expanded",String(this.active))):(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")),e.setAttribute("aria-haspopup","dialog"))}getFocusableChildren(){return _(this.el,'[role="menuitem"], [role="menuitemradio"], [role="option"]')}adjustWidth(){let o=this.useContainerWidth;[!0,"true"].includes(this.useContainerWidth)?o=!0:[!1,"false"].includes(this.useContainerWidth)&&(o=!1);const e=!window.matchMedia("(min-width: 768px)").matches;if(Boolean(o)&&!e){const e="string"==typeof o&&this.el.closest(o)||this.el.parentElement;this.contentContainer.style.maxWidth="none",this.contentContainer.style.width=e.getBoundingClientRect().width+"px"}else this.contentContainer.style.maxWidth="",this.contentContainer.style.width=""}lockBodyScroll(){f()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&l(this.scrollContainer)}unlockBodyScroll(){f()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&h(this.scrollContainer)}render(){const o=!window.matchMedia("(min-width: 768px)").matches,e=g.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius,t=v("popover",`popover--animation-${this.animation}`,`popover--placement-${this.position?.placement}`,{"popover--active":this.active,"popover--closing":this.closing,"popover--fullscreen-bottom-sheet":this.fullscreenBottomSheet,"popover--inactive":!this.active,"popover--translucent":this.translucent&&!this.transparent,"popover--transparent":this.transparent,"popover--padded":this.padded});return i(r,{key:"c72be6ac9e9adfb0ab0e410e392018eaba9c8ddf"},i("div",{key:"5d3730af1e4693ac33bb19e3079793d7031da0ae",popover:"manual",class:t,onKeyDown:this.onKeydown,ref:o=>this.popoverEl=o},i("div",{key:"3f1914a390e63960f2f73c530ea3f3fe580df76f","aria-hidden":this.active?"false":"true","aria-label":this.label,class:"popover__content",id:this.popoverId,part:"popover__content",role:"dialog",ref:o=>this.contentContainer=o,style:{top:Boolean(this.position)?`${this.position?.y}px`:"",left:Boolean(this.position)?`${this.position?.x}px`:"",opacity:!this.active||this.position||o?void 0:"0","--swirl-popover-border-radius":e},tabindex:"-1"},i("span",{key:"9802ca13e3ca9e39178c1a95c533278b4b1b0303",class:"popover__handle"}),i("div",{key:"2b911cfad74b6f130ee946100f9403bd748b9619",class:"popover__scroll-container",part:"popover__scroll-container",ref:o=>this.scrollContainer=o,style:{maxHeight:!o&&Boolean(this.maxHeight)?this.maxHeight:void 0}},i("slot",{key:"b03444b9c20c175a206b6f2d890c904c582bd4b5"}))),this.active&&i("div",{key:"96ee38b9fd630bd895721249d42c98e7d0a6795e",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return this}static get style(){return':host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{padding-top:env(safe-area-inset-top);top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover--translucent .popover__content{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)}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;border-radius:var(       --swirl-popover-border-radius,       var(--s-border-radius-base)     );max-width:22.5rem;animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}'}},[257,"swirl-popover",{animation:[1],disableScrollLock:[4,"disable-scroll-lock"],enableFlip:[4,"enable-flip"],fallbackAxisSideDirection:[1,"fallback-axis-side-direction"],fullscreenBottomSheet:[4,"fullscreen-bottom-sheet"],label:[1],maxHeight:[1,"max-height"],offset:[2],padded:[4],popoverId:[1,"popover-id"],placement:[1],returnFocusToTrigger:[4,"return-focus-to-trigger"],translucent:[4],transparent:[4],trigger:[1],triggerContainer:[16],useContainerWidth:[8,"use-container-width"],borderRadius:[1,"border-radius"],active:[32],closing:[32],position:[32],close:[64],open:[64],isOpen:[64],toggle:[64]},[[8,"focusin","onWindowFocusIn"],[8,"blur","onWindowBlur"],[8,"click","onWindowClick"]]]);function x(){"undefined"!=typeof customElements&&["swirl-popover"].forEach((o=>{"swirl-popover"===o&&(customElements.get(n(o))||customElements.define(n(o),w))}))}export{w as S,x as d}

package/dist/components/swirl-text-input2.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as n,transformTag as r}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{D as o}from"./media-query.service.js";import{d as l}from"./swirl-icon-cancel2.js";import{d as p}from"./swirl-icon-expand-less2.js";import{d as u}from"./swirl-icon-expand-more2.js";import{d as c}from"./swirl-icon-visibility2.js";import{d as h}from"./swirl-icon-visibility-off2.js";import{d}from"./swirl-visually-hidden2.js";const x=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.clear=e(this,"clear",7),this.inputBlur=e(this,"inputBlur",7),this.inputFocus=e(this,"inputFocus",7),this.valueChange=e(this,"valueChange",7),this.autoComplete="on",this.characterCounterLabel="Used characters",this.clearButtonLabel="Clear input",this.fontSize="default",this.passwordToggleLabel="Toggle password display",this.rows=1,this.type="text",this.iconSize=24,this.showPassword=!1,this.mediaQueryUnsubscribe=()=>{},this.handleClearClick=()=>{this.inputEl.value="",this.value="",this.valueChange.emit(""),this.inputEl.focus(),this.clear.emit()},this.onChange=t=>{this.value=t.target.value},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)},this.onKeyPress=t=>{"number"===this.type&&["+","-","e"].includes(t.key)&&t.preventDefault()},this.decreaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min+1:1),this.value=String(Math.max(this.min||-1/0,i-t)),this.valueChange.emit(this.value)},this.increaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min-1:-1),this.value=String(Math.min(this.max||1/0,i+t)),this.valueChange.emit(this.value)},this.togglePassword=()=>{"password"===this.type&&(this.showPassword=!this.showPassword)}}componentDidLoad(){this.mediaQueryUnsubscribe=o.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}componentDidRender(){this.adjustInputSize()}disconnectedCallback(){this.mediaQueryUnsubscribe()}async blurInput(){this.inputEl.blur()}async focusInput(){this.inputEl.focus()}watchValue(t,i){t!==i&&this.valueChange.emit(t)}updateIconSize(t){this.iconSize=t?20:24}adjustInputSize(){(this.rows>1||this.autoGrow)&&(this.inputEl.style.width="",this.inputEl.style.height=Boolean(this.inputEl.scrollHeight)?this.inputEl.scrollHeight/16+"rem":""),1!==this.rows||this.autoGrow||(this.inputEl.style.height="",this.inputEl.style.width="",!this.suffixLabel||"password"===this.type||this.disableDynamicWidth||Boolean(this.placeholder)||(this.inputEl.style.width=this.inputEl.scrollWidth/16+"rem"))}handleAutoSelect(t){(this.autoSelect||this.readonly)&&t.target.select()}render(){const t=1!==this.rows||this.autoGrow?"textarea":"input",i=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,e="number"===this.type&&!this.disabled&&!this.readonly,r="password"===this.type&&!this.disabled,o=this.clearable&&!this.disabled&&!this.readonly&&Boolean(this.value)&&!r&&!e,l=this.value?.length??0,p=this.showCharacterCounter&&(!this.showCharacterCounterNearLimit||l>=.8*this.maxLength),u="password"===this.type&&this.showPassword?"text":this.type,c=a("text-input",`text-input--font-size-${this.fontSize}`,`text-input--type-${this.type}`,{"text-input--auto-grow":this.autoGrow,"text-input--clearable":o,"text-input--disable-dynamic-width":this.disableDynamicWidth||Boolean(this.placeholder),"text-input--has-suffix":Boolean(this.suffixLabel),"text-input--inline":this.inline,"text-input--show-password":"password"===this.type&&this.showPassword});return s(n,{key:"86d0b6ba96e3248f369461527d22191031c54364"},s("div",{key:"706c269127bc1b1d278b0276ff2d508c46b1badb",class:c},this.prefixLabel&&s("span",{key:"0e2e54a2f1e1642016e7ccbdaf93836216f984e9",class:"text-input__prefix"},this.prefixLabel),s(t,{key:"e7e041cafa10c35b57a757f18ea53236cdfa3a55","aria-autocomplete":this.swirlAriaAutocomplete,"aria-controls":this.swirlAriaControls,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-invalid":i,autoComplete:this.autoComplete,autoFocus:this.autoFocus,class:"text-input__input",disabled:this.disabled,inputMode:this.mode,maxLength:this.maxLength,max:"number"===this.type?this.max:void 0,min:"number"===this.type?this.min:void 0,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,onKeyPress:this.onKeyPress,placeholder:Boolean(this.suffixLabel)?void 0:this.placeholder,ref:t=>this.inputEl=t,required:this.required,role:this.swirlRole,name:this.inputName,rows:this.rows>1?this.rows:this.autoGrow?1:void 0,spellcheck:this.spellCheck,step:"number"===this.type?this.step:void 0,type:u,value:this.value,readonly:this.readonly},this.rows>1&&this.value),this.suffixLabel&&s("span",{key:"28604a47e75f169d507e57346df10715b2842563",class:"text-input__suffix"},this.suffixLabel),o&&s("button",{key:"84b3bd1b998b2a1417d7ef18cfcdb0a1a8b8ef87","aria-label":this.clearButtonLabel,class:"text-input__clear-button",onClick:this.handleClearClick,part:"text-input__clear-button",type:"button"},s("swirl-icon-cancel",{key:"0eff2281d586dcb903e6634f7d33141aa171821f",size:this.iconSize})),r&&s("button",{key:"16fdb2aa2148b46d6833f5f81c18e55c07ab943c","aria-label":this.passwordToggleLabel,class:"text-input__password-toggle",onClick:this.togglePassword,type:"button"},s(this.showPassword?"swirl-icon-visibility-off":"swirl-icon-visibility",{size:this.iconSize})),e&&s("span",{key:"f68f6fc9460ff2d8eb7c8466221a6b54d124419b",class:"text-input__stepper"},s("button",{key:"e582af56a177eb5315fb900e56778061753a23cf","aria-hidden":"true",class:"text-input__step-button",onClick:this.increaseValue,tabIndex:-1,type:"button"},s("swirl-icon-expand-less",{key:"017c4bda6bc8bac3fba00eca41f56e730831ed83",size:this.iconSize})),s("button",{key:"d48dfb497daae54c3106eaae0804fe927275206a","aria-hidden":"true",class:"text-input__step-button",onClick:this.decreaseValue,tabIndex:-1,type:"button"},s("swirl-icon-expand-more",{key:"b136fdd62fff0bbdc9193ee53660ea8d9b0416e7",size:this.iconSize}))),p&&s("span",{key:"529e111de421d936316d670208808ebb9abb1d26",class:"text-input__character-counter","aria-live":"polite"},s("swirl-visually-hidden",{key:"5c34b5c2c780fe088aa712fdaac46426510c88cb"},this.characterCounterLabel),l," ",Boolean(this.maxLength)?`/ ${this.maxLength}`:"")))}static get watchers(){return{value:[{watchValue:0}]}}static get style(){return'.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--clearable.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}'}},[2,"swirl-text-input",{autoComplete:[1,"auto-complete"],autoFocus:[4,"auto-focus"],autoGrow:[4,"auto-grow"],autoSelect:[4,"auto-select"],characterCounterLabel:[1,"character-counter-label"],clearable:[4],clearButtonLabel:[1,"clear-button-label"],disabled:[4],disableDynamicWidth:[4,"disable-dynamic-width"],fontSize:[1,"font-size"],inline:[4],invalid:[4],maxLength:[2,"max-length"],max:[2],min:[2],mode:[1],inputName:[1,"input-name"],passwordToggleLabel:[1,"password-toggle-label"],placeholder:[1],prefixLabel:[1,"prefix-label"],required:[4],rows:[2],showCharacterCounter:[4,"show-character-counter"],showCharacterCounterNearLimit:[4,"show-character-counter-near-limit"],spellCheck:[4,"spell-check"],suffixLabel:[1,"suffix-label"],step:[2],swirlAriaAutocomplete:[1,"swirl-aria-autocomplete"],swirlAriaControls:[1,"swirl-aria-controls"],swirlAriaDescribedby:[1,"swirl-aria-describedby"],swirlAriaExpanded:[1,"swirl-aria-expanded"],swirlRole:[1,"swirl-role"],type:[1],value:[1537],readonly:[4],iconSize:[32],showPassword:[32],blurInput:[64],focusInput:[64]},void 0,{value:[{watchValue:0}]}]);function w(){"undefined"!=typeof customElements&&["swirl-text-input","swirl-icon-cancel","swirl-icon-expand-less","swirl-icon-expand-more","swirl-icon-visibility","swirl-icon-visibility-off","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-text-input":customElements.get(r(t))||customElements.define(r(t),x);break;case"swirl-icon-cancel":customElements.get(r(t))||l();break;case"swirl-icon-expand-less":customElements.get(r(t))||p();break;case"swirl-icon-expand-more":customElements.get(r(t))||u();break;case"swirl-icon-visibility":customElements.get(r(t))||c();break;case"swirl-icon-visibility-off":customElements.get(r(t))||h();break;case"swirl-visually-hidden":customElements.get(r(t))||d()}}))}export{x as S,w as d}
+import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as n,transformTag as r}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{D as o}from"./media-query.service.js";import{d as l}from"./swirl-icon-cancel2.js";import{d as p}from"./swirl-icon-expand-less2.js";import{d as u}from"./swirl-icon-expand-more2.js";import{d as c}from"./swirl-icon-visibility2.js";import{d as h}from"./swirl-icon-visibility-off2.js";import{d}from"./swirl-visually-hidden2.js";const x=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.clear=e(this,"clear",7),this.inputBlur=e(this,"inputBlur",7),this.inputFocus=e(this,"inputFocus",7),this.valueChange=e(this,"valueChange",7),this.autoComplete="on",this.characterCounterLabel="Used characters",this.clearButtonLabel="Clear input",this.fontSize="default",this.passwordToggleLabel="Toggle password display",this.rows=1,this.type="text",this.iconSize=24,this.showPassword=!1,this.mediaQueryUnsubscribe=()=>{},this.handleClearClick=()=>{this.inputEl.value="",this.value="",this.valueChange.emit(""),this.inputEl.focus(),this.clear.emit()},this.onChange=t=>{this.value=t.target.value},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)},this.onKeyPress=t=>{"number"===this.type&&["+","-","e"].includes(t.key)&&t.preventDefault()},this.decreaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min+1:1),this.value=String(Math.max(this.min||-1/0,i-t)),this.valueChange.emit(this.value)},this.increaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min-1:-1),this.value=String(Math.min(this.max||1/0,i+t)),this.valueChange.emit(this.value)},this.togglePassword=()=>{"password"===this.type&&(this.showPassword=!this.showPassword)}}componentDidLoad(){this.mediaQueryUnsubscribe=o.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}componentDidRender(){this.adjustInputSize()}disconnectedCallback(){this.mediaQueryUnsubscribe()}async blurInput(){this.inputEl.blur()}async focusInput(){this.inputEl.focus()}watchValue(t,i){t!==i&&this.valueChange.emit(t)}updateIconSize(t){this.iconSize=t?20:24}adjustInputSize(){(this.rows>1||this.autoGrow)&&(this.inputEl.style.width="",this.inputEl.style.height="auto",this.inputEl.style.height=Boolean(this.inputEl.scrollHeight)?this.inputEl.scrollHeight/16+"rem":""),1!==this.rows||this.autoGrow||(this.inputEl.style.height="",this.inputEl.style.width="",!this.suffixLabel||"password"===this.type||this.disableDynamicWidth||Boolean(this.placeholder)||(this.inputEl.style.width=this.inputEl.scrollWidth/16+"rem"))}handleAutoSelect(t){(this.autoSelect||this.readonly)&&t.target.select()}render(){const t=1!==this.rows||this.autoGrow?"textarea":"input",i=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,e="number"===this.type&&!this.disabled&&!this.readonly,r="password"===this.type&&!this.disabled,o=this.clearable&&!this.disabled&&!this.readonly&&Boolean(this.value)&&!r&&!e,l=this.value?.length??0,p=this.showCharacterCounter&&(!this.showCharacterCounterNearLimit||l>=.8*this.maxLength),u="password"===this.type&&this.showPassword?"text":this.type,c=a("text-input",`text-input--font-size-${this.fontSize}`,`text-input--type-${this.type}`,{"text-input--auto-grow":this.autoGrow,"text-input--clearable":o,"text-input--disable-dynamic-width":this.disableDynamicWidth||Boolean(this.placeholder),"text-input--has-suffix":Boolean(this.suffixLabel),"text-input--inline":this.inline,"text-input--show-password":"password"===this.type&&this.showPassword});return s(n,{key:"a30834f0740bfffea7f5ce4eb767e3d778ca5e8e"},s("div",{key:"e8a7a6a2d3760349330e6877aeafdd5e653198c5",class:c},this.prefixLabel&&s("span",{key:"1a2de509fa993bdcb753889bda3bc4c8a09bce47",class:"text-input__prefix"},this.prefixLabel),s(t,{key:"714b42e0489a82e11874b7c09bcdfe6bf116e21a","aria-autocomplete":this.swirlAriaAutocomplete,"aria-controls":this.swirlAriaControls,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-invalid":i,autoComplete:this.autoComplete,autoFocus:this.autoFocus,class:"text-input__input",disabled:this.disabled,inputMode:this.mode,maxLength:this.maxLength,max:"number"===this.type?this.max:void 0,min:"number"===this.type?this.min:void 0,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,onKeyPress:this.onKeyPress,placeholder:Boolean(this.suffixLabel)?void 0:this.placeholder,ref:t=>this.inputEl=t,required:this.required,role:this.swirlRole,name:this.inputName,rows:this.rows>1?this.rows:this.autoGrow?1:void 0,spellcheck:this.spellCheck,step:"number"===this.type?this.step:void 0,type:u,value:this.value,readonly:this.readonly},this.rows>1&&this.value),this.suffixLabel&&s("span",{key:"7dd58d866f09a455d727faf419609bd0d498e201",class:"text-input__suffix"},this.suffixLabel),o&&s("button",{key:"d6c57fe98e0786e7e4ee8d393a8e64861a833de9","aria-label":this.clearButtonLabel,class:"text-input__clear-button",onClick:this.handleClearClick,part:"text-input__clear-button",type:"button"},s("swirl-icon-cancel",{key:"cc3f5d3e04c37844aaf7a7506e2a1cd605d28cd2",size:this.iconSize})),r&&s("button",{key:"04bfb17fa4bd317e24a8f2c3120d087883a68303","aria-label":this.passwordToggleLabel,class:"text-input__password-toggle",onClick:this.togglePassword,type:"button"},s(this.showPassword?"swirl-icon-visibility-off":"swirl-icon-visibility",{size:this.iconSize})),e&&s("span",{key:"30296317acd84c589e56186eea0c9c7bf65784ee",class:"text-input__stepper"},s("button",{key:"fe4830f4b0ade997c837e7311ea634cec3c4c3e0","aria-hidden":"true",class:"text-input__step-button",onClick:this.increaseValue,tabIndex:-1,type:"button"},s("swirl-icon-expand-less",{key:"981fcc970fa7e855e0c287658e7a7553d8790895",size:this.iconSize})),s("button",{key:"907edb43a4c9d043f77bf8c2877a9613919a370b","aria-hidden":"true",class:"text-input__step-button",onClick:this.decreaseValue,tabIndex:-1,type:"button"},s("swirl-icon-expand-more",{key:"d057082c9e503ad43d4b12cc3de982182c55862d",size:this.iconSize}))),p&&s("span",{key:"994e5065ea7faa5e12a127ca3428788619c87f0d",class:"text-input__character-counter","aria-live":"polite"},s("swirl-visually-hidden",{key:"a2e5552d173a9855f05bf610d94d3aef748c4a01"},this.characterCounterLabel),l," ",Boolean(this.maxLength)?`/ ${this.maxLength}`:"")))}static get watchers(){return{value:[{watchValue:0}]}}static get style(){return'.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--clearable.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}'}},[2,"swirl-text-input",{autoComplete:[1,"auto-complete"],autoFocus:[4,"auto-focus"],autoGrow:[4,"auto-grow"],autoSelect:[4,"auto-select"],characterCounterLabel:[1,"character-counter-label"],clearable:[4],clearButtonLabel:[1,"clear-button-label"],disabled:[4],disableDynamicWidth:[4,"disable-dynamic-width"],fontSize:[1,"font-size"],inline:[4],invalid:[4],maxLength:[2,"max-length"],max:[2],min:[2],mode:[1],inputName:[1,"input-name"],passwordToggleLabel:[1,"password-toggle-label"],placeholder:[1],prefixLabel:[1,"prefix-label"],required:[4],rows:[2],showCharacterCounter:[4,"show-character-counter"],showCharacterCounterNearLimit:[4,"show-character-counter-near-limit"],spellCheck:[4,"spell-check"],suffixLabel:[1,"suffix-label"],step:[2],swirlAriaAutocomplete:[1,"swirl-aria-autocomplete"],swirlAriaControls:[1,"swirl-aria-controls"],swirlAriaDescribedby:[1,"swirl-aria-describedby"],swirlAriaExpanded:[1,"swirl-aria-expanded"],swirlRole:[1,"swirl-role"],type:[1],value:[1537],readonly:[4],iconSize:[32],showPassword:[32],blurInput:[64],focusInput:[64]},void 0,{value:[{watchValue:0}]}]);function w(){"undefined"!=typeof customElements&&["swirl-text-input","swirl-icon-cancel","swirl-icon-expand-less","swirl-icon-expand-more","swirl-icon-visibility","swirl-icon-visibility-off","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-text-input":customElements.get(r(t))||customElements.define(r(t),x);break;case"swirl-icon-cancel":customElements.get(r(t))||l();break;case"swirl-icon-expand-less":customElements.get(r(t))||p();break;case"swirl-icon-expand-more":customElements.get(r(t))||u();break;case"swirl-icon-visibility":customElements.get(r(t))||c();break;case"swirl-icon-visibility-off":customElements.get(r(t))||h();break;case"swirl-visually-hidden":customElements.get(r(t))||d()}}))}export{x as S,w as d}

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

@@ -3,7 +3,7 @@ import { c as classnames } from './index-orsBiyT_.js';
 import { D as DesktopMediaQuery } from './media-query.service-CCYT6DU8.js';
 import './utils-CCck-DTo.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:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-raised-default)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-state-pressed)}.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--interactive.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-state-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:hover+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{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:active+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{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{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: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{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 SwirlChip = class {
     constructor(hostRef) {

package/dist/esm/swirl-popover_2.entry.js

@@ -5,7 +5,7 @@ import { c as classnames } from './index-orsBiyT_.js';
 import { t as tabbable } from './index.esm-DBTxpXCn.js';
 import { i as isMobileViewport, o as getPixelsFromRemToken, k as getActiveElement, q as querySelectorAllDeep } from './utils-CCck-DTo.js';
 
-const swirlPopoverCss = () => `:host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover--translucent .popover__content{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)}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;border-radius:var(       --swirl-popover-border-radius,       var(--s-border-radius-base)     );max-width:22.5rem;animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}`;
+const swirlPopoverCss = () => `:host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{padding-top:env(safe-area-inset-top);top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover--translucent .popover__content{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)}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;border-radius:var(       --swirl-popover-border-radius,       var(--s-border-radius-base)     );max-width:22.5rem;animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}`;
 
 const swirlPopoverBorderRadiusTokens = ["xs", "sm", "base", "l", "xl"];
 const SwirlPopover = class {

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

@@ -116,6 +116,7 @@ const SwirlTextInput = class {
     adjustInputSize() {
         if (this.rows > 1 || this.autoGrow) {
             this.inputEl.style.width = "";
+            this.inputEl.style.height = "auto";
             this.inputEl.style.height = Boolean(this.inputEl.scrollHeight)
                 ? this.inputEl.scrollHeight / 16 + "rem"
                 : "";
@@ -163,7 +164,7 @@ const SwirlTextInput = class {
             "text-input--inline": this.inline,
             "text-input--show-password": this.type === "password" && this.showPassword,
         });
-        return (h(Host, { key: '86d0b6ba96e3248f369461527d22191031c54364' }, h("div", { key: '706c269127bc1b1d278b0276ff2d508c46b1badb', class: className }, this.prefixLabel && (h("span", { key: '0e2e54a2f1e1642016e7ccbdaf93836216f984e9', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: 'e7e041cafa10c35b57a757f18ea53236cdfa3a55', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '28604a47e75f169d507e57346df10715b2842563', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '84b3bd1b998b2a1417d7ef18cfcdb0a1a8b8ef87', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '0eff2281d586dcb903e6634f7d33141aa171821f', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '16fdb2aa2148b46d6833f5f81c18e55c07ab943c', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'f68f6fc9460ff2d8eb7c8466221a6b54d124419b', class: "text-input__stepper" }, h("button", { key: 'e582af56a177eb5315fb900e56778061753a23cf', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '017c4bda6bc8bac3fba00eca41f56e730831ed83', size: this.iconSize })), h("button", { key: 'd48dfb497daae54c3106eaae0804fe927275206a', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'b136fdd62fff0bbdc9193ee53660ea8d9b0416e7', size: this.iconSize })))), showCharacterCounter && (h("span", { key: '529e111de421d936316d670208808ebb9abb1d26', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: '5c34b5c2c780fe088aa712fdaac46426510c88cb' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+        return (h(Host, { key: 'a30834f0740bfffea7f5ce4eb767e3d778ca5e8e' }, h("div", { key: 'e8a7a6a2d3760349330e6877aeafdd5e653198c5', class: className }, this.prefixLabel && (h("span", { key: '1a2de509fa993bdcb753889bda3bc4c8a09bce47', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '714b42e0489a82e11874b7c09bcdfe6bf116e21a', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '7dd58d866f09a455d727faf419609bd0d498e201', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: 'd6c57fe98e0786e7e4ee8d393a8e64861a833de9', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: 'cc3f5d3e04c37844aaf7a7506e2a1cd605d28cd2', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '04bfb17fa4bd317e24a8f2c3120d087883a68303', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: '30296317acd84c589e56186eea0c9c7bf65784ee', class: "text-input__stepper" }, h("button", { key: 'fe4830f4b0ade997c837e7311ea634cec3c4c3e0', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '981fcc970fa7e855e0c287658e7a7553d8790895', size: this.iconSize })), h("button", { key: '907edb43a4c9d043f77bf8c2877a9613919a370b', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'd057082c9e503ad43d4b12cc3de982182c55862d', size: this.iconSize })))), showCharacterCounter && (h("span", { key: '994e5065ea7faa5e12a127ca3428788619c87f0d', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: 'a2e5552d173a9855f05bf610d94d3aef748c4a01' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
     }
     static get watchers() { return {
         "value": [{

package/dist/swirl-components/p-42815d0a.entry.js

@@ -0,0 +1 @@
+import{r as i,c,h as r,a as s,d as e}from"./p-N0O_JBVJ.js";import{c as a}from"./p-orsBiyT_.js";import{D as t}from"./p-Bfn7CHM9.js";import"./p-CCck-DTo.js";const h=class{constructor(r){i(this,r),this.chipClick=c(this,"chipClick",7),this.removeChip=c(this,"remove",7),this.borderRadius="pill",this.iconColor="default",this.intent="default",this.interactive=!1,this.progressBarLabel="Loading progress",this.removeButtonLabel="Remove",this.size="m",this.variant="outline",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=t.subscribe((i=>{this.isDesktop=i,this.forceIconProps()}))}componentDidRender(){this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!Boolean(this.iconEl)&&!Boolean(this.trailingIconEl))return;const i="s"===this.size?"16":this.isDesktop?"20":"24";if(this.iconEl){const c=this.iconEl.children[0];c?.setAttribute("size",i)}if(this.trailingIconEl){const c=this.trailingIconEl.children[0];c?.setAttribute("size",i)}}render(){const i=this.interactive||void 0!==this.pressed?"button":"span",c=Boolean(this.el.querySelector('[slot="avatar"]')),e=!c&&Boolean(this.icon),t=a("chip",`chip--border-radius-${this.borderRadius}`,`chip--icon-color-${this.iconColor}`,`chip--intent-${this.intent}`,`chip--size-${this.size}`,`chip--variant-${this.variant}`,{"chip--pressed":this.pressed,"chip--has-progress":void 0!==this.progress,"chip--interactive":this.interactive||void 0!==this.pressed,"chip--removable":this.removable});return r(s,{key:"556b0ebe143aae953feb22d5fffb385da98331b2"},r(i,{key:"d6f2d8fdfe06e7197632a1276046f9982d88a033","aria-pressed":void 0!==this.pressed?String(this.pressed):void 0,class:t,onClick:this.chipClick.emit,type:this.interactive?"button":void 0},r("span",{key:"fd8aac7bfc2435a277df0be543d4c219483e5bec",class:"chip__inner"},c&&r("span",{key:"bf9c36ecbbb30672cb804bece5b67613a38c7602",class:"chip__avatar"},r("slot",{key:"828c82e1f0d291ef766e8dd539737555d94f5d86",name:"avatar"})),e&&r("span",{key:"5d82eee4688b3250b19f10a9c5efedda7f03e187",class:"chip__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),r("span",{key:"e4e65bd102603bd86031687ce843f0556431158b",class:"chip__label"},this.label),this.trailingIcon&&r("span",{key:"ae819833c08132dbf18f6a1cf26b980030f229d1",class:"chip__trailing-icon",innerHTML:this.trailingIcon,ref:i=>this.trailingIconEl=i})),void 0!==this.progress&&r("span",{key:"371d5d577137fe5f58653b6f2bf5afe6f2c75a29",class:"chip__progress-indicator"},r("swirl-progress-indicator",{key:"8024a8596c0f3e2ddb983184cf69a3226dd139f5",label:this.progressBarLabel,value:this.progress}))),this.removable&&r("button",{key:"be2e97f005c28e54e52d618734bbc783b495c479","aria-label":this.removeButtonLabel,class:"chip__remove-button",onClick:this.removeChip.emit,type:"button"},r("swirl-icon-close",{key:"9c59678ddc6aa518e7bc8d2618783cd7e7ee0057",size:20})))}get el(){return e(this)}};h.style='.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{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)}';export{h as swirl_chip}