@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/esm/swirl-resource-list-item.entry.js

@@ -0,0 +1,162 @@
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-bQirifsr.js';
+import { c as classnames } from './index-orsBiyT_.js';
+import { D as DesktopMediaQuery } from './media-query.service-CCYT6DU8.js';
+import { v as v4 } from './v4-DD3477fe.js';
+import './utils-CCck-DTo.js';
+
+const swirlResourceListItemCss = () => `.sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item{--swirl-badge-border-color:var(     --swirl-resource-list-item-background-hovered   );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2rem}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within{--swirl-flat-button-background-default:var(--s-background-default);--swirl-flat-button-background-disabled:var(--s-background-disabled);--swirl-flat-button-background-hovered:var(--s-background-hovered);--swirl-flat-button-background-pressed:var(--s-background-pressed)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none;margin:calc(-1 * var(--s-space-4)) 0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),   0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;display:flex;width:100%;min-width:0;margin:0;padding:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{align-self:center}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon),.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item [part~="icon"]{width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}`;
+
+const SwirlResourceListItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.toggleDrag = createEvent(this, "toggleDrag", 7);
+        this.valueChange = createEvent(this, "valueChange", 7);
+        this.checked = false;
+        this.dragHandleDescription = "Press spacebar to toggle grab";
+        this.dragHandleLabel = "Move item";
+        this.interactive = true;
+        this.labelWeight = "medium";
+        this.labelTooltipPosition = "top";
+        this.menuTriggerLabel = "Options";
+        this.hasMedia = false;
+        this.iconSize = 24;
+        this.elementId = v4();
+        this.mediaQueryUnsubscribe = () => { };
+        this.onClick = () => {
+            if (!this.selectable) {
+                return;
+            }
+            this.checked = !this.checked;
+            this.valueChange.emit(this.checked);
+        };
+        this.onBlur = () => {
+            this.makeControlUnfocusable();
+        };
+        this.onFocus = () => {
+            this.makeControlFocusable();
+        };
+        this.onMenuTriggerClick = (event) => {
+            if (this.disabled && !Boolean(this.href)) {
+                event.stopPropagation();
+            }
+        };
+        this.onDragHandleKeyDown = (event) => {
+            if (event.code === "Space" || event.code === "Enter") {
+                event.preventDefault();
+                this.toggleDrag.emit(this.el);
+            }
+        };
+        this.onControlClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+    }
+    componentWillLoad() {
+        this.updateMediaState();
+    }
+    componentDidLoad() {
+        this.parentSemantics = this.el.closest("swirl-resource-list")?.semantics;
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+            this.updateIconSize(isDesktop);
+        });
+        this.makeControlUnfocusable();
+        if (Boolean(this.menuTriggerId)) {
+            console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs');
+        }
+    }
+    disconnectedCallback() {
+        this.mediaQueryUnsubscribe();
+    }
+    get hasBadges() {
+        return Boolean(this.el.querySelector("[slot='badges']"));
+    }
+    get showMeta() {
+        return (Boolean(this.meta) || this.hasBadges) && !this.selectable;
+    }
+    forceIconProps(smallIcon) {
+        const icon = this.iconEl?.children[0];
+        icon?.setAttribute("size", smallIcon ? "20" : "24");
+    }
+    updateIconSize(smallIcon) {
+        this.iconSize = smallIcon ? 20 : 24;
+    }
+    updateMediaState() {
+        const mediaContainer = this.el.querySelector('[slot="media"]');
+        const hasMedia = Boolean(mediaContainer);
+        if (hasMedia !== this.hasMedia) {
+            this.hasMedia = hasMedia;
+        }
+    }
+    getControl() {
+        return this.el.querySelector('[slot="control"] button');
+    }
+    makeControlFocusable() {
+        if (this.parentSemantics !== "grid") {
+            return;
+        }
+        const control = this.getControl();
+        if (!Boolean(control)) {
+            return;
+        }
+        control.tabIndex = 0;
+    }
+    makeControlUnfocusable() {
+        if (this.parentSemantics !== "grid") {
+            return;
+        }
+        const control = this.getControl();
+        if (!Boolean(control)) {
+            return;
+        }
+        control.tabIndex = -1;
+    }
+    render() {
+        const Tag = !this.interactive && !this.selectable
+            ? "div"
+            : Boolean(this.href) && !this.selectable
+                ? "a"
+                : "button";
+        const disabled = this.disabled && !Boolean(this.href);
+        const hasBadges = this.hasBadges;
+        const hasControl = this.el.querySelector("[slot='control']");
+        const hasMenu = Boolean(this.menuTriggerId) || hasControl;
+        const href = this.interactive && Boolean(this.href) ? this.href : undefined;
+        const showControlOnFocus = hasControl && (Boolean(this.meta) || hasBadges);
+        const showMenu = Boolean(this.menuTriggerId) && !Boolean(this.meta) && !this.selectable;
+        const showMeta = this.showMeta;
+        const ariaLabel = Boolean(this.swirlAriaLabel)
+            ? this.swirlAriaLabel
+            : this.label;
+        const ariaChecked = this.selectable ? String(this.checked) : undefined;
+        const role = this.interactive && this.selectable ? "checkbox" : undefined;
+        const hostRole = !!this.el.closest('[role="grid"]') ? "row" : "listitem";
+        const containerRole = hostRole === "row" ? "gridcell" : undefined;
+        const labelContainerStyles = {
+            minHeight: this.labelMinHeight ?? undefined,
+        };
+        const renderLabel = () => (h("span", { key: '37c85747056a39da4bae4c738509399648f3d736', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label));
+        const className = classnames("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
+            "resource-list-item--active": this.active,
+            "resource-list-item--checked": this.checked,
+            "resource-list-item--compact": this.compact,
+            "resource-list-item--disabled": this.disabled,
+            "resource-list-item--draggable": this.allowDrag,
+            "resource-list-item--dragging": this.dragging,
+            "resource-list-item--has-control": hasControl,
+            "resource-list-item--has-menu": hasMenu,
+            "resource-list-item--hide-divider": this.hideDivider,
+            "resource-list-item--interactive": this.interactive || this.selectable,
+            "resource-list-item--selectable": this.selectable,
+            "resource-list-item--show-control-on-focus": showControlOnFocus,
+            "resource-list-item--show-meta": showMeta,
+            "resource-list-item--wrap-description": this.descriptionWrap,
+            "resource-list-item--wrap-label": this.labelWrap,
+        });
+        return (h(Host, { key: 'ca338b580e9a4a0b9516d3391d0aeeae4ea1a654', role: hostRole }, h("div", { key: 'dffac16c5ecfb85b556f92cfdcef17e69f81cc70', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: '1365aa82443f7377e4e3c989bf44cf22d354d6dd', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '82efa5ce45e4e221eaf709c8784684e5413933b7', class: "resource-list-item__media" }, h("slot", { key: '81896485ba4dd4805c9fee22df235458230fbb3f', name: "media" }))), h("span", { key: '42c7ef04acf577e9a9549e99b2299efd5040eb40', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (h("span", { key: '011b264b8906faa3d6b671ead50e3c1a3ccf1567', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (h("span", { key: '6ca551c7ad81601df78e94eece8c0d72bb89adeb', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: 'eddf677da7c6b606c76649bf4f4a06eb5ffd0b94', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '384628edf729e8e3214af4007e3acdbae190e3b1' }))))), showMeta && (h("span", { key: 'efad9e9c3d1c7fb68cfd6f45268d2d511dac8d23', class: "resource-list-item__meta" }, this.meta && (h("span", { key: '6c654ea6eb33af529908885e13b15a60a25c6996', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: 'f1aba6b5a08158a3d1830b8a3e55831fbc658334', class: "resource-list-item__badges" }, h("slot", { key: 'c53cc549305d4b1b338357a4c6e6ff04a877d70b', name: "badges" })))), h("span", { key: '2fb88347d7c809a4a66ca2887f86267ab1daaa96', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: '8d2c303b222c5714fd2c18a9449ab621ee729e3c', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '81a43da61e282fb76de74d0d0b99526501d8907f', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '0b71d4831ca2126ca233a19c932654dc11343e76', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: '933b327f60287bbd3c22f41106322724fa18a8f6', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: 'da629f0be562d793985940781af6c829556ab918', size: this.iconSize })))));
+    }
+    get el() { return getElement(this); }
+};
+SwirlResourceListItem.style = swirlResourceListItemCss();
+
+export { SwirlResourceListItem as swirl_resource_list_item };

package/dist/esm/swirl-resource-list-section.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-9hghByCV.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-bQirifsr.js';
 
-const swirlResourceListSectionCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-section-label{display:flex;padding:var(--s-space-8);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);font-size:var(--s-font-size-base);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-section-label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+const swirlResourceListSectionCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-section-label{display:flex;padding:var(--s-space-8);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);font-size:var(--s-font-size-base);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-section-label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}`;
 
 const SwirlResourceListSection = class {
     constructor(hostRef) {
@@ -16,6 +16,6 @@ const SwirlResourceListSection = class {
     }
     get el() { return getElement(this); }
 };
-SwirlResourceListSection.style = swirlResourceListSectionCss;
+SwirlResourceListSection.style = swirlResourceListSectionCss();
 
 export { SwirlResourceListSection as swirl_resource_list_section };

package/dist/esm/swirl-resource-list.entry.js

@@ -0,0 +1,278 @@
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-bQirifsr.js';
+import { S as Sortable } from './sortable.esm-CMrz6687.js';
+import { v as v4 } from './v4-DD3477fe.js';
+
+const swirlResourceListCss = () => `.sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}`;
+
+const SwirlResourceList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemDrop = createEvent(this, "itemDrop", 7);
+        this.assistiveTextItemGrabbed = "Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.";
+        this.assistiveTextItemMoving = "Current position:";
+        this.assistiveTextItemMoved = "Item moved. New position:";
+        this.semantics = "grid";
+        this.spacing = "0";
+        this.listId = v4();
+        this.focusedIndex = 0;
+        this.toggleDrag = (event) => {
+            const item = event.detail;
+            if (Boolean(this.dragging)) {
+                this.stopDrag(item);
+            }
+            else {
+                this.startDrag(item);
+            }
+        };
+        this.startDrag = (item) => {
+            this.dragging = item;
+            this.draggingStartIndex = this.getItemIndex(this.dragging);
+            item.setAttribute("dragging", "true");
+            const index = this.getItemIndex(this.dragging);
+            this.focusItemAtIndex(index);
+            this.assistiveText = this.assistiveTextItemGrabbed;
+        };
+        this.stopDrag = (item) => {
+            const newIndex = this.getItemIndex(this.dragging);
+            this.dragging = undefined;
+            item.removeAttribute("dragging");
+            this.assistiveText = `${this.assistiveTextItemMoved} ${newIndex + 1}`;
+            this.itemDrop.emit({ item, oldIndex: this.draggingStartIndex, newIndex });
+            this.draggingStartIndex = undefined;
+        };
+        this.onKeyDown = (event) => {
+            if (this.semantics === "grid" && !Boolean(this.dragging)) {
+                if (event.code === "ArrowDown") {
+                    event.preventDefault();
+                    this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+                }
+                else if (event.code === "ArrowUp") {
+                    event.preventDefault();
+                    const prevIndex = this.focusedIndex === 0
+                        ? this.items.length - 1
+                        : this.focusedIndex - 1;
+                    this.focusItemAtIndex(prevIndex);
+                }
+                else if (event.code === "Enter" && Boolean(this.controllingElement)) {
+                    const item = this.items[this.focusedIndex];
+                    if (!Boolean(item) || !item.isConnected) {
+                        return;
+                    }
+                    event.stopPropagation();
+                    event.preventDefault();
+                    item.click();
+                }
+                else if (event.code === "Home") {
+                    event.preventDefault();
+                    this.focusItemAtIndex(0);
+                }
+                else if (event.code === "End") {
+                    event.preventDefault();
+                    this.focusItemAtIndex(this.items.length - 1);
+                }
+            }
+            if (Boolean(this.dragging)) {
+                if (event.code === "ArrowDown") {
+                    event.preventDefault();
+                    this.moveDraggedItemDown();
+                }
+                else if (event.code === "ArrowUp") {
+                    event.preventDefault();
+                    this.moveDraggedItemUp();
+                }
+                else if (event.code === "Space" || event.code === "Enter") {
+                    const target = event.composedPath()[0];
+                    if (!target?.classList.contains("resource-list-item__drag-handle")) {
+                        event.preventDefault();
+                        this.stopDrag(this.dragging);
+                    }
+                }
+            }
+        };
+    }
+    componentDidLoad() {
+        this.observeSlotChanges();
+        this.collectItems();
+        this.setupControllingElement();
+        this.setItemAllowDragState();
+        this.setupDragDrop();
+        this.setSectionSpacingAndSeparator();
+    }
+    componentDidRender() {
+        this.setupDragDrop();
+    }
+    disconnectedCallback() {
+        this.sortable?.destroy();
+        this.observer?.disconnect();
+        this.controllingElement?.removeEventListener("keydown", this.onKeyDown);
+    }
+    observeSlotChanges() {
+        this.observer = new MutationObserver(() => {
+            this.collectItems();
+            this.setItemAllowDragState();
+            this.setSectionSpacingAndSeparator();
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    }
+    watchAllowDrag() {
+        this.setItemAllowDragState();
+        this.setupDragDrop();
+    }
+    async resetFocus() {
+        this.focusedIndex = 0;
+        this.removeItemsFromTabOrder();
+        this.enableItemFocus(this.items[0]);
+        if (Boolean(this.controllingElement)) {
+            this.items[0]?.setAttribute("aria-selected", "true");
+        }
+    }
+    collectItems() {
+        this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item, [data-resource-list-item]")).filter((el) => el.isConnected);
+        this.sections = Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((el) => el.isConnected);
+        this.removeItemsFromTabOrder();
+        this.enableItemFocus(this.items[this.focusedIndex]);
+        if (Boolean(this.controllingElement)) {
+            this.items[0]?.setAttribute("aria-selected", "true");
+        }
+    }
+    setupControllingElement() {
+        if (!Boolean(this.controllingElement)) {
+            return;
+        }
+        this.controllingElement.setAttribute("aria-controls", this.listId);
+        this.controllingElement.setAttribute("role", "combobox");
+        this.controllingElement.setAttribute("aria-autocomplete", "list");
+        this.controllingElement.addEventListener("keydown", this.onKeyDown);
+    }
+    getItemIndex(item) {
+        return this.items.map((i) => i).findIndex((i) => i === item);
+    }
+    removeItemsFromTabOrder() {
+        if (this.semantics !== "grid") {
+            return;
+        }
+        this.items.forEach((item) => {
+            const focusableEl = item?.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]");
+            const dragHandle = item?.querySelector(".resource-list-item__drag-handle");
+            if (Boolean(this.controllingElement)) {
+                item.setAttribute("aria-selected", "false");
+            }
+            focusableEl?.setAttribute("tabIndex", "-1");
+            dragHandle?.setAttribute("tabIndex", "-1");
+        });
+    }
+    setItemAllowDragState() {
+        if (this.allowDrag) {
+            // Dragging items inside a `swirl-resource-list-section` is not currently allowed
+            this.items
+                .filter((item) => this.sections.every((section) => !section.contains(item)))
+                .forEach((item) => {
+                item.setAttribute("allow-drag", "true");
+                item.addEventListener("toggleDrag", this.toggleDrag);
+            });
+        }
+        else {
+            this.items.forEach((item) => {
+                item.removeAttribute("allow-drag");
+                item.removeEventListener("toggleDrag", this.toggleDrag);
+            });
+        }
+    }
+    setupDragDrop() {
+        if (Boolean(this.sortable)) {
+            this.sortable.destroy();
+        }
+        if (!this.allowDrag) {
+            return;
+        }
+        this.sortable = Sortable.create(this.gridEl, {
+            animation: 150,
+            draggable: "swirl-resource-list-item",
+            dragClass: "swirl-resource-list-item--drag",
+            handle: ".resource-list-item__drag-handle",
+            onEnd: (event) => {
+                this.itemDrop.emit({
+                    item: event.item,
+                    oldIndex: event.oldDraggableIndex,
+                    newIndex: event.newDraggableIndex,
+                });
+            },
+        });
+    }
+    enableItemFocus(item, focus) {
+        if (!Boolean(item) || Boolean(this.controllingElement)) {
+            return;
+        }
+        const interactiveElement = item.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]");
+        const dragHandle = item.querySelector(".resource-list-item__drag-handle");
+        if (Boolean(dragHandle)) {
+            dragHandle.setAttribute("tabIndex", "0");
+        }
+        if (!Boolean(interactiveElement)) {
+            return;
+        }
+        interactiveElement.setAttribute("tabIndex", "0");
+        if (focus && !Boolean(this.controllingElement)) {
+            interactiveElement.focus();
+        }
+    }
+    focusItemAtIndex(index) {
+        this.removeItemsFromTabOrder();
+        const item = this.items[index];
+        if (!Boolean(item) || !item.isConnected) {
+            return;
+        }
+        this.enableItemFocus(item, !Boolean(this.controllingElement));
+        if (Boolean(this.controllingElement)) {
+            item.setAttribute("aria-selected", "true");
+            item.scrollIntoView({ block: "nearest" });
+        }
+        this.focusedIndex = index;
+    }
+    moveDraggedItemDown() {
+        const nextSibling = this.dragging.nextElementSibling;
+        if (!Boolean(nextSibling)) {
+            return;
+        }
+        nextSibling.after(this.dragging);
+        this.collectItems();
+        this.focusItemAtIndex(this.getItemIndex(this.dragging));
+        this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
+    }
+    moveDraggedItemUp() {
+        const prevSibling = this.dragging.previousElementSibling;
+        if (!Boolean(prevSibling)) {
+            return;
+        }
+        prevSibling.before(this.dragging);
+        this.collectItems();
+        this.focusItemAtIndex(this.getItemIndex(this.dragging));
+        this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
+    }
+    setSectionSpacingAndSeparator() {
+        this.sections.forEach((section, index) => {
+            // First section should not have a separator if there are no items above
+            if (index === 0 &&
+                section.previousElementSibling?.tagName !== "SWIRL-RESOURCE-LIST-ITEM") {
+                section.hasSeparator = false;
+            }
+            section.spacing = this.spacing;
+        });
+    }
+    render() {
+        return (h(Host, { key: 'b6b5c57cd6b804e8a291f45dcc9f918ca307c45b', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '3509117ca4e73cc4feaf30e204531a931d75ebab', role: "alert" }, this.assistiveText), h("swirl-box", { key: '7daef9d639a894f852c3e05b5f5395e0f7e24457', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: '58f9742215c325be3039b10a07acccff90d6ed11', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, h("slot", { key: '37c212d102a2f9b35f38cb62341345e5da12036b' })))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "allowDrag": [{
+                "watchAllowDrag": 0
+            }]
+    }; }
+};
+SwirlResourceList.style = swirlResourceListCss();
+
+export { SwirlResourceList as swirl_resource_list };

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9hghByCV.js';
+import { r as registerInstance, c as createEvent, h, a as Host } from './index-bQirifsr.js';
 import { c as classnames } from './index-orsBiyT_.js';
-import { D as DesktopMediaQuery } from './media-query.service-BSiuFyfW.js';
-import './utils-Dn2SWlGn.js';
+import { D as DesktopMediaQuery } from './media-query.service-CCYT6DU8.js';
+import './utils-CCck-DTo.js';
 
-const swirlSearchCss = ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--variant-ghost.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}";
+const swirlSearchCss = () => `.sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--variant-ghost.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}`;
 
 const SwirlSearch = class {
     constructor(hostRef) {
@@ -71,6 +71,6 @@ const SwirlSearch = class {
         return (h(Host, { key: '0f630711e4962a8fd678a4fefe295fa3c515c056' }, h("span", { key: '8d5be9748521ce0010da5064ffe92a191e7e4f42', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: '2967fea8aa9642d43361a488a8dd66b724348949', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '3b4c4dfe8545468ee325071dfc6791af187700af', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (h("button", { key: '3860feb2b8bbdcf3460ffee9dcfd7dc7d5519137', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, h("swirl-icon-cancel", { key: 'cea745efe5b8abb5cfa16d69463a9ce9a01bede9' }))))));
     }
 };
-SwirlSearch.style = swirlSearchCss;
+SwirlSearch.style = swirlSearchCss();
 
 export { SwirlSearch as swirl_search };

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-9hghByCV.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-bQirifsr.js';
 import { c as classnames } from './index-orsBiyT_.js';
-import { q as querySelectorAllDeep } from './utils-Dn2SWlGn.js';
+import { q as querySelectorAllDeep } from './utils-CCck-DTo.js';
 
-const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-webkit-min-content;width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:pre;white-space:pre;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;flex-shrink:0;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag){height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}";
+const swirlSelectCss = () => `.sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content),.select.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content),.select--placement-top-start.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-webkit-min-content;width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:pre;white-space:pre;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;flex-shrink:0;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag),.select__multi-select-values.sc-swirl-select .sc-swirl-select [part~="tag"]{height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}`;
 
 const SwirlSelect = class {
     constructor(hostRef) {
@@ -132,9 +132,11 @@ const SwirlSelect = class {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "value": ["onValueChange"]
+        "value": [{
+                "onValueChange": 0
+            }]
     }; }
 };
-SwirlSelect.style = swirlSelectCss;
+SwirlSelect.style = swirlSelectCss();
 
 export { SwirlSelect as swirl_select };

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, F as Fragment, H as Host } from './index-9hghByCV.js';
+import { r as registerInstance, h, F as Fragment, a as Host } from './index-bQirifsr.js';
 import { c as classnames } from './index-orsBiyT_.js';
 
-const swirlSeparatorCss = ":host{display:flex;width:100%;align-items:center;gap:var(--s-space-8)}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto;flex-direction:column}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--color-critical) .separator__line{background-color:var(--s-border-critical)}:host(.separator--color-critical) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-strong) .separator__line{background-color:var(--s-border-strong)}:host(.separator--color-strong) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-highlight) .separator__line{background-color:var(--s-border-highlight)}:host(.separator--color-highlight) .separator__label{color:var(--s-text-highlight)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-on-translucent)}.separator__label{flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:var(--s-font-size-sm);color:var(--s-text-disabled)}";
+const swirlSeparatorCss = () => `:host{display:flex;width:100%;align-items:center;gap:var(--s-space-8)}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto;flex-direction:column}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--color-critical) .separator__line{background-color:var(--s-border-critical)}:host(.separator--color-critical) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-strong) .separator__line{background-color:var(--s-border-strong)}:host(.separator--color-strong) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-highlight) .separator__line{background-color:var(--s-border-highlight)}:host(.separator--color-highlight) .separator__label{color:var(--s-text-highlight)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-on-translucent)}.separator__label{flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:var(--s-font-size-sm);color:var(--s-text-disabled)}`;
 
 const SwirlSeparator = class {
     constructor(hostRef) {
@@ -38,6 +38,6 @@ const SwirlSeparator = class {
         return (h(Host, { key: '23acb3a29638b92737838e75a54d7616e6c9150e', ...attributes, class: className, role: this.semantics, style: styles }, h("span", { key: '3ebf80f47fb36438403551f560db91ecf7d7e559', class: "separator__line" }), this.label && (h(Fragment, { key: '84ac7960ba714ab27559751c11bd7c4b56ac3176' }, h("span", { key: '6f8dc3ad3bde938789e28ad05c67da657262a4d1', class: "separator__label" }, this.label), h("span", { key: '63ddb77ea887a890bb1731d12a939783b592e21a', class: "separator__line" })))));
     }
 };
-SwirlSeparator.style = swirlSeparatorCss;
+SwirlSeparator.style = swirlSeparatorCss();
 
 export { SwirlSeparator as swirl_separator };