@getflip/swirl-components 0.363.6 → 0.364.0

package/dist/cjs/swirl-icon-check-small_2.cjs.entry.js

@@ -1,94 +0,0 @@
-'use strict';
-
-var index = require('./index-DM-IG6w2.js');
-var index$1 = require('./index-DcAhLZUH.js');
-var mediaQuery_service = require('./media-query.service-DRPgROAV.js');
-var v4 = require('./v4-Bq3ldsQe.js');
-require('./utils-Br2wWntR.js');
-
-const swirlIconCss = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
-
-const SwirlIconCheckSmall = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.size = 24;
-    }
-    render() {
-        const viewBoxSize = this.size === 20 ? 24 : this.size;
-        const styles = {
-            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
-        };
-        const className = index$1.classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-        return (index.h("svg", { key: '86c65881a19e81f25345239840884e0f8365b020', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (index.h(index.Fragment, { key: '32a20c7ebf4c7d14fb0923257ee41bda9154c096' }, index.h("path", { key: 'bce3f131dd7b0c18a3d90980cc4977628793bac9', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.4142 4.91924C12.8047 5.30976 12.8047 5.94293 12.4142 6.33345L7.08086 11.6667C6.69033 12.0572 6.05717 12.0572 5.66664 11.6667L3.70711 9.70707C3.31658 9.31655 3.31658 8.68338 3.70711 8.29286C4.09763 7.90233 4.7308 7.90233 5.12132 8.29286L6.37375 9.54539L11 4.91924C11.3905 4.52871 12.0237 4.52871 12.4142 4.91924Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (index.h(index.Fragment, { key: 'f8fdd1dc701ef3ec3463726fdfdcc77ec65218e1' }, index.h("path", { key: 'a3dd6757827c6887efea1f3edc3d23b63b9f1c6e', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.6213 7.37879C19.2071 7.96458 19.2071 8.91433 18.6213 9.50011L10.6213 17.5C10.0355 18.0858 9.08577 18.0858 8.49998 17.5L5.56068 14.5605C4.97489 13.9748 4.97489 13.025 5.56068 12.4392C6.14646 11.8534 7.09621 11.8534 7.682 12.4392L9.56064 14.318L16.5 7.37879C17.0858 6.79301 18.0355 6.79301 18.6213 7.37879Z", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, { key: '67fa72f7fe9590fb0882cf516a6c2ba68fe7f175' }, index.h("path", { key: '5c7451a7104842b97c66b74bd4d4ba11f20f3d04', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.7248 8.60863C22.4083 9.29205 22.4083 10.4001 21.7248 11.0835L12.3915 20.4167C11.7081 21.1001 10.6001 21.1001 9.91663 20.4167L6.48744 16.9873C5.80403 16.3039 5.80403 15.1959 6.48744 14.5125C7.17086 13.8291 8.2789 13.8291 8.96232 14.5125L11.1541 16.7044L19.25 8.60863C19.9334 7.92521 21.0414 7.92521 21.7248 8.60863Z", fill: "currentColor" })))));
-    }
-};
-SwirlIconCheckSmall.style = swirlIconCss;
-
-const swirlOptionListItemCss = ".sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-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),\n    0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}";
-
-const SwirlOptionListItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.toggleDrag = index.createEvent(this, "toggleDrag", 7);
-        this.context = "single-select";
-        this.dragHandleDescription = "Press spacebar to toggle grab";
-        this.dragHandleLabel = "Move option";
-        this.selected = false;
-        this.swirlAriaRole = "option";
-        this.iconSize = 24;
-        this.elementId = v4.v4();
-        this.mediaQueryUnsubscribe = () => { };
-        this.onDragHandleKeyDown = (event) => {
-            if (event.code === "Space" || event.code === "Enter") {
-                event.preventDefault();
-                this.toggleDrag.emit(this.el);
-            }
-        };
-        this.onBlur = () => {
-            this.focused = false;
-        };
-        this.onFocus = () => {
-            this.focused = true;
-        };
-    }
-    componentDidLoad() {
-        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
-            this.forceIconProps(isDesktop);
-            this.updateIconSize(isDesktop);
-        });
-    }
-    disconnectedCallback() {
-        this.mediaQueryUnsubscribe();
-    }
-    forceIconProps(smallIcon) {
-        const icon = this.iconEl?.children[0];
-        icon?.setAttribute("size", smallIcon ? "20" : "24");
-    }
-    updateIconSize(smallIcon) {
-        this.iconSize = smallIcon ? 20 : 24;
-    }
-    render() {
-        const ariaDisabled = this.disabled ? "true" : undefined;
-        const ariaSelected = String(this.selected);
-        const showCheckbox = this.context === "multi-select";
-        const showIcon = Boolean(this.icon) && this.context === "single-select";
-        const showIconBadge = Boolean(this.iconBadge);
-        const showAvatar = this.el.querySelector('[slot="avatar"]');
-        const showSelectionIcon = this.selected && this.context === "single-select";
-        const className = index$1.classnames("option-list-item", `option-list-item--context-${this.context}`, {
-            "option-list-item--disabled": this.disabled,
-            "option-list-item--draggable": this.allowDrag,
-            "option-list-item--dragging": this.dragging,
-            "option-list-item--selected": this.selected,
-            "option-list-item--show-avatar": showAvatar,
-        });
-        return (index.h(index.Host, { key: '56c07efaa3f0d283d157c8f8bb0addfe930b4293' }, index.h("div", { key: '4542378bd31546f0551e237d4df5ee3701e3c199', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
-                ? `option-list-item-${this.elementId}-description`
-                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (index.h("span", { key: 'df3f3af40e854f02ba688aa54dd834b9e77ac738', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (index.h("span", { key: 'c21077d165c5d7869d99b5321dbab13d4005ad85', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (index.h("span", { key: '26a71ace947042fb21e1abf05c6402e8539c773c', class: "option-list-item__checkbox" }, index.h("span", { key: 'de7da45be1f25839f26ae02df9082d56e5f2d0df', class: "option-list-item__checkbox-box" }, this.selected && (index.h("swirl-icon-check-strong", { key: '692c1642e9f035b2267b60bdd064477da25f1b60', class: "option-list-item__checkbox-icon", size: 16 }))))), index.h("span", { key: 'f88effa897b9752dd5f02f9e7f73df5bd0714e04', class: "option-list-item__avatar" }, index.h("slot", { key: 'f412533bd41ed61784d341e25d90d3d0860f1406', name: "avatar" })), index.h("span", { key: 'b1091ff43a18a3095d9c20ecbd43d3642ed22bef', class: "option-list-item__label-container" }, index.h("span", { key: 'efbd6424c68e71884a26d8bf868921e006422f9d', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (index.h("span", { key: 'ac57368d8364c458fa7a330ff5b4a7e816c94c12', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (index.h("span", { key: 'e6caa3b02cba778b6d6031e12f376effb0c703e3', class: "option-list-item__selection-icon" }, index.h("swirl-icon-check-small", { key: '20a94203bea74ec7e2a926145ba49b0042824a6a', size: this.iconSize })))), this.allowDrag && (index.h("button", { key: '9565e02956129bdb87316c8d96086556f6c5961a', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, index.h("swirl-icon-drag-handle", { key: '2fc4af86dacaa1a0057c4231fc73f02cce3b0c6e', size: this.iconSize })))));
-    }
-    get el() { return index.getElement(this); }
-};
-SwirlOptionListItem.style = swirlOptionListItemCss;
-
-exports.swirl_icon_check_small = SwirlIconCheckSmall;
-exports.swirl_option_list_item = SwirlOptionListItem;

package/dist/cjs/swirl-icon-check-strong_2.cjs.entry.js

@@ -1,43 +0,0 @@
-'use strict';
-
-var index = require('./index-DM-IG6w2.js');
-var index$1 = require('./index-DcAhLZUH.js');
-
-const swirlIconCss$1 = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
-
-const SwirlIconCheckStrong = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.size = 24;
-    }
-    render() {
-        const viewBoxSize = this.size === 20 ? 24 : this.size;
-        const styles = {
-            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
-        };
-        const className = index$1.classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-        return (index.h("svg", { key: 'e9e3a8cb49c66d0dc52a60f8c8a82f67df373b42', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (index.h(index.Fragment, { key: '1052b9521f33b77bbcf9c1aa0b22c820fffbe70c' }, index.h("path", { key: 'f291fa4f072c7e88e1210c8f4a63036e566adae7', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.0404 4.29289C13.431 4.68342 13.431 5.31658 13.0404 5.70711L6.7071 12.0404C6.31657 12.431 5.68341 12.431 5.29288 12.0404L2.95955 9.70711C2.56903 9.31658 2.56903 8.68342 2.95955 8.29289C3.35007 7.90237 3.98324 7.90237 4.37376 8.29289L5.99999 9.91912L11.6262 4.29289C12.0167 3.90237 12.6499 3.90237 13.0404 4.29289Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (index.h(index.Fragment, { key: '2497c796e5c684f92718a33b502cf618014c172c' }, index.h("path", { key: 'd27631fc3fde86cb8101cd97148c5c94b6831c60', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.5607 6.43934C20.1464 7.02513 20.1464 7.97487 19.5607 8.56066L10.0607 18.0607C9.47487 18.6464 8.52513 18.6464 7.93934 18.0607L4.43934 14.5607C3.85355 13.9749 3.85355 13.0251 4.43934 12.4393C5.02513 11.8536 5.97487 11.8536 6.56066 12.4393L9 14.8787L17.4393 6.43934C18.0251 5.85355 18.9749 5.85355 19.5607 6.43934Z", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, { key: '188581607068e5ea2e7be6840e2b5565c6c50c19' }, index.h("path", { key: '538b2e00e91233bef631092376edcc5a8d93821e', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22.8208 7.51256C23.5042 8.19598 23.5042 9.30402 22.8208 9.98744L11.7374 21.0708C11.054 21.7542 9.94597 21.7542 9.26255 21.0708L5.17922 16.9874C4.4958 16.304 4.4958 15.196 5.17922 14.5126C5.86264 13.8291 6.97068 13.8291 7.65409 14.5126L10.5 17.3585L20.3459 7.51256C21.0293 6.82915 22.1373 6.82915 22.8208 7.51256Z", fill: "currentColor" })))));
-    }
-};
-SwirlIconCheckStrong.style = swirlIconCss$1;
-
-const swirlIconCss = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
-
-const SwirlIconDragHandle = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.size = 24;
-    }
-    render() {
-        const viewBoxSize = this.size === 20 ? 24 : this.size;
-        const styles = {
-            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
-        };
-        const className = index$1.classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-        return (index.h("svg", { key: '8a6cf858dedb3e661633cafb41a834e298726b5e', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (index.h(index.Fragment, { key: 'd6c7cc436f9bb95a91b60cf8ca544071cf22886c' }, index.h("rect", { key: '45d6c93abe42d99ef48e99dc0e66d70bb159326e', x: "9", y: "3", width: "2", height: "2", rx: "1", fill: "currentColor" }), index.h("rect", { key: 'e864347cbac65ed3ff0e2bf621a7d48501cfa381', x: "9", y: "7", width: "2", height: "2", rx: "1", fill: "currentColor" }), index.h("rect", { key: 'ed14d86f3f1f30bceda608cc66e3c4678027f6a8', x: "9", y: "11", width: "2", height: "2", rx: "1", fill: "currentColor" }), index.h("rect", { key: '2621c0f930e3748e07be685d56bd831784d122a2', x: "5", y: "3", width: "2", height: "2", rx: "1", fill: "currentColor" }), index.h("rect", { key: 'd890ce867cfb481096652c9022f995de6f9b8582', x: "5", y: "7", width: "2", height: "2", rx: "1", fill: "currentColor" }), index.h("rect", { key: 'ed5dfde113af6d4af2971c2c05b339920deecb5f', x: "5", y: "11", width: "2", height: "2", rx: "1", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (index.h(index.Fragment, { key: '677fcea7cdfe8664e4b192c7f027fb9ddef89472' }, index.h("rect", { key: 'c55f12d6f72ab47f408cf3f8fc9f2fe17654f04e', x: "13.5", y: "4.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), index.h("rect", { key: '1abce33b28788a5125a82fc7a45a851cd2f56276', x: "13.5", y: "10.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), index.h("rect", { key: 'b7d768b4e4dba79bd83685aa2a8694d9a7d1c123', x: "13.5", y: "16.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), index.h("rect", { key: 'e71a152584b1e252772b4981819a40c0cdf76531', x: "7.5", y: "4.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), index.h("rect", { key: 'e8e947a2d3211c5a58fe47fd4cf069c34848451c', x: "7.5", y: "10.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), index.h("rect", { key: '67edeee90784ada45918991a48daf2947aa727cb', x: "7.5", y: "16.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, { key: 'afcab3f061a6ded8a100e04ecc1d676ac648debd' }, index.h("rect", { key: '06b152669c754642cd41701d2bf2277ff7ab2c11', x: "15.75", y: "5.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), index.h("rect", { key: '2028f41a94afde997b51a21ffbdff2e0d4cfa250', x: "15.75", y: "12.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), index.h("rect", { key: '2e83c571d3e81ed618f53a46cea14ecdeee1a5e2', x: "15.75", y: "19.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), index.h("rect", { key: 'b07eebdf87f73156b2ecfef95162856d8f5d343f', x: "8.75", y: "5.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), index.h("rect", { key: 'e1af1ac8d345e2ab81facf14dd15807978a3c6b9', x: "8.75", y: "12.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), index.h("rect", { key: 'cae2f6a13a3075f9aa63cd7b56ef2366e10b3ab1', x: "8.75", y: "19.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" })))));
-    }
-};
-SwirlIconDragHandle.style = swirlIconCss;
-
-exports.swirl_icon_check_strong = SwirlIconCheckStrong;
-exports.swirl_icon_drag_handle = SwirlIconDragHandle;

package/dist/cjs/swirl-option-list.cjs.entry.js

@@ -1,357 +0,0 @@
-'use strict';
-
-var index = require('./index-DM-IG6w2.js');
-var sortable_esm = require('./sortable.esm-B1ZNencO.js');
-var utils = require('./utils-Br2wWntR.js');
-
-const swirlOptionListCss = ".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}";
-
-const SwirlOptionList = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.itemDrop = index.createEvent(this, "itemDrop", 7);
-        this.valueChange = index.createEvent(this, "valueChange", 7);
-        this.allowDeselect = true;
-        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.value = [];
-        this.onClick = (event) => {
-            event.preventDefault();
-            const target = event.target;
-            const item = target?.closest("swirl-option-list-item");
-            const composedTarget = event.composedPath()[0];
-            const clickedOption = Boolean(utils.closestPassShadow(composedTarget, '[role="option"]'));
-            if (!Boolean(item) || !clickedOption) {
-                event.preventDefault();
-                return;
-            }
-            this.selectItem(this.items.findIndex((i) => i.value === item.value));
-        };
-        this.onKeyDown = (event) => {
-            if (event.code === "ArrowDown") {
-                event.preventDefault();
-                if (!Boolean(this.dragging)) {
-                    this.focusNextItem();
-                }
-                else {
-                    this.moveDraggedItemDown();
-                }
-            }
-            else if (event.code === "ArrowUp") {
-                event.preventDefault();
-                if (!Boolean(this.dragging)) {
-                    this.focusPreviousItem();
-                }
-                else {
-                    this.moveDraggedItemUp();
-                }
-            }
-            else if (event.code === "Space" || event.code === "Enter") {
-                const startingDrag = event.target.classList.contains("option-list-item__drag-handle");
-                if (!startingDrag && Boolean(this.dragging)) {
-                    event.preventDefault();
-                    this.stopDrag(this.dragging);
-                    return;
-                }
-                const target = event.composedPath()[0];
-                const optionFocused = Boolean(utils.closestPassShadow(target, '[role="option"]'));
-                if (!optionFocused) {
-                    return;
-                }
-                event.preventDefault();
-                if (Boolean(this.dragging)) {
-                    this.stopDrag(this.dragging);
-                }
-                else {
-                    this.selectFocusedItem();
-                }
-            }
-            else if (event.code === "Home") {
-                event.preventDefault();
-                this.focusItem(0);
-            }
-            else if (event.code === "End") {
-                event.preventDefault();
-                this.focusItem(this.items.length - 1);
-            }
-            else if (event.code === "KeyA" &&
-                (event.metaKey || event.ctrlKey) &&
-                this.multiSelect) {
-                event.preventDefault();
-                this.selectAllItems();
-            }
-            else if (event.code === "Tab") {
-                if (Boolean(this.dragging)) {
-                    event.preventDefault();
-                }
-            }
-        };
-        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.focusItem(index);
-            this.assistiveText = this.assistiveTextItemGrabbed;
-        };
-        this.stopDrag = (item) => {
-            this.dragging = undefined;
-            item.removeAttribute("dragging");
-            const newIndex = this.getActiveItemIndex();
-            this.assistiveText = `${this.assistiveTextItemMoved} ${newIndex + 1}`;
-            this.itemDrop.emit({ item, oldIndex: this.draggingStartIndex, newIndex });
-            this.draggingStartIndex = undefined;
-            this.focusItem(newIndex);
-        };
-    }
-    componentDidLoad() {
-        this.updateItems();
-        this.observeSlotChanges();
-        this.setItemAllowDragState();
-        this.setItemDisabledState();
-        this.setItemContext();
-        this.syncItemsWithValue();
-        this.setupDragDrop();
-        this.setSectionSeparator();
-    }
-    componentDidRender() {
-        this.setupDragDrop();
-    }
-    disconnectedCallback() {
-        this.observer?.disconnect();
-        this.sortable?.destroy();
-    }
-    watchAllowDrag() {
-        this.setItemAllowDragState();
-        this.setupDragDrop();
-    }
-    watchDisabled() {
-        this.setItemDisabledState();
-    }
-    watchMultiSelect() {
-        this.setItemContext();
-    }
-    watchValue() {
-        this.syncItemsWithValue();
-    }
-    observeSlotChanges() {
-        this.observer = new MutationObserver(() => {
-            this.updateItems();
-            this.setItemAllowDragState();
-            this.setItemDisabledState();
-            this.setItemContext();
-            this.syncItemsWithValue();
-        });
-        this.observer.observe(this.listboxEl, { childList: true, subtree: true });
-    }
-    updateItems() {
-        this.items = utils.querySelectorAllDeep(this.el, "swirl-option-list-item");
-        this.items.forEach((item) => item.querySelector('[role="option"]')?.removeAttribute("tabIndex"));
-        const item = this.items[0]?.querySelector('[role="option"]');
-        if (!Boolean(item)) {
-            return;
-        }
-        item.setAttribute("tabIndex", "0");
-    }
-    setItemDisabledState() {
-        if (this.disabled) {
-            this.items.forEach((item) => (item.disabled = true));
-        }
-    }
-    setItemContext() {
-        if (this.multiSelect) {
-            this.items.forEach((item) => (item.context = "multi-select"));
-        }
-        else {
-            this.items.forEach((item) => (item.context = "single-select"));
-            if (this.value.length > 1) {
-                this.updateValue([this.value[0]]);
-            }
-        }
-    }
-    setupDragDrop() {
-        if (Boolean(this.sortable)) {
-            this.sortable.destroy();
-        }
-        if (!this.allowDrag) {
-            return;
-        }
-        this.sortable = sortable_esm.Sortable.create(this.listboxEl, {
-            animation: 150,
-            draggable: "swirl-option-list-item",
-            handle: ".option-list-item__drag-handle",
-            onEnd: (event) => {
-                this.itemDrop.emit({
-                    item: event.item,
-                    oldIndex: event.oldIndex,
-                    newIndex: event.newIndex,
-                });
-            },
-        });
-    }
-    setItemAllowDragState() {
-        if (this.allowDrag && !this.multiSelect) {
-            console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");
-            return;
-        }
-        const sections = utils.querySelectorAllDeep(this.el, "swirl-option-list-section");
-        if (this.allowDrag && sections.length > 0) {
-            console.error("[SwirlOptionList] Drag can only be allowed for lists without sections.");
-            return;
-        }
-        if (this.allowDrag) {
-            this.items.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);
-            });
-        }
-    }
-    selectItem(index) {
-        if (this.disabled) {
-            return;
-        }
-        const item = this.items[index];
-        if (item.disabled) {
-            return;
-        }
-        const itemIsAlreadySelected = this.value.includes(item.value);
-        if (itemIsAlreadySelected && !this.allowDeselect) {
-            return;
-        }
-        if (!this.multiSelect) {
-            this.value = [];
-        }
-        if (!itemIsAlreadySelected) {
-            this.updateValue([...this.value, item.value]);
-        }
-        else {
-            this.updateValue(this.value.filter((v) => v !== item.value));
-        }
-        this.focusItem(index);
-    }
-    updateValue(value) {
-        this.value = value;
-        this.valueChange.emit(this.value);
-    }
-    selectFocusedItem() {
-        if (this.disabled || this.getActiveItemIndex() === -1) {
-            return;
-        }
-        this.selectItem(this.getActiveItemIndex());
-    }
-    selectAllItems() {
-        if (this.disabled) {
-            return;
-        }
-        const alreadySelected = this.items.every((item) => this.value.includes(item.value));
-        if (alreadySelected) {
-            this.updateValue([]);
-        }
-        else {
-            this.updateValue(this.items.map((item) => item.value));
-        }
-    }
-    syncItemsWithValue() {
-        this.items?.forEach((item) => (item.selected = this.value.includes(item.value)));
-    }
-    focusItem(index) {
-        if (this.disabled) {
-            return;
-        }
-        this.items.forEach((item) => item.querySelector('[role="option"]').removeAttribute("tabIndex"));
-        const item = this.items[index]?.querySelector('[role="option"]');
-        if (!Boolean(item)) {
-            return;
-        }
-        item.setAttribute("tabIndex", "0");
-        item.focus();
-        this.focusedItem = item;
-    }
-    focusNextItem() {
-        if (this.disabled) {
-            return;
-        }
-        const activeItemIndex = this.getActiveItemIndex();
-        const newIndex = Math.min(activeItemIndex + 1, this.items.length - 1);
-        this.focusItem(newIndex);
-    }
-    focusPreviousItem() {
-        const activeItemIndex = this.getActiveItemIndex();
-        const newIndex = Math.max(activeItemIndex - 1, 0);
-        this.focusItem(newIndex);
-    }
-    getActiveItemIndex() {
-        return Boolean(this.focusedItem)
-            ? this.items
-                .map((item) => item.querySelector('[role="option"]'))
-                .findIndex((item) => item === this.focusedItem)
-            : 0;
-    }
-    getItemIndex(item) {
-        return this.items.map((i) => i).findIndex((i) => i === item);
-    }
-    moveDraggedItemDown() {
-        const nextSibling = this.dragging.nextElementSibling;
-        if (!Boolean(nextSibling)) {
-            return;
-        }
-        nextSibling.after(this.dragging);
-        this.updateItems();
-        this.listboxEl.focus();
-        this.assistiveText = `${this.assistiveTextItemMoving} ${this.getActiveItemIndex() + 1}`;
-    }
-    moveDraggedItemUp() {
-        const prevSibling = this.dragging.previousElementSibling;
-        if (!Boolean(prevSibling)) {
-            return;
-        }
-        prevSibling.before(this.dragging);
-        this.updateItems();
-        this.listboxEl.focus();
-        this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
-    }
-    setSectionSeparator() {
-        if (!this.el) {
-            return;
-        }
-        const sections = Array.from(this.el.querySelectorAll("swirl-option-list-section")).filter((el) => el.isConnected);
-        sections.forEach((section, index) => {
-            // First section should not have a separator if there are no items above
-            if (index === 0 &&
-                section.previousElementSibling?.tagName !== "SWIRL-OPTION-LIST-ITEM") {
-                section.hasSeparator = false;
-            }
-        });
-    }
-    render() {
-        const ariaMultiselectable = this.multiSelect ? "true" : undefined;
-        const tabIndex = Boolean(this.dragging) ? 0 : undefined;
-        return (index.h(index.Host, { key: '7eab0e132c99c86955fb1b761f617a17ae1da6ee' }, index.h("swirl-visually-hidden", { key: '694674872ea99abb4bb5e33e36fb13a00094737b', role: "alert" }, this.assistiveText), index.h("div", { key: '6e6823ed6383a1582cada32c8cdbbc82cd5a0e7e', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, index.h("slot", { key: '1df33bb4a0c6d910e9103b9e94cc7cf29057fdeb', onSlotchange: this.setSectionSeparator }))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "allowDrag": ["watchAllowDrag"],
-        "disabled": ["watchDisabled"],
-        "multiSelect": ["watchMultiSelect"],
-        "value": ["watchValue"]
-    }; }
-};
-SwirlOptionList.style = swirlOptionListCss;
-
-exports.swirl_option_list = SwirlOptionList;

package/dist/esm/swirl-icon-check-small_2.entry.js

@@ -1,91 +0,0 @@
-import { r as registerInstance, h, F as Fragment, c as createEvent, H as Host, d as getElement } from './index-CWOhMVtL.js';
-import { c as classnames } from './index-orsBiyT_.js';
-import { D as DesktopMediaQuery } from './media-query.service-Cx_VEA2f.js';
-import { v as v4 } from './v4-DD3477fe.js';
-import './utils-D_MUFqkF.js';
-
-const swirlIconCss = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
-
-const SwirlIconCheckSmall = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.size = 24;
-    }
-    render() {
-        const viewBoxSize = this.size === 20 ? 24 : this.size;
-        const styles = {
-            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
-        };
-        const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-        return (h("svg", { key: '86c65881a19e81f25345239840884e0f8365b020', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: '32a20c7ebf4c7d14fb0923257ee41bda9154c096' }, h("path", { key: 'bce3f131dd7b0c18a3d90980cc4977628793bac9', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.4142 4.91924C12.8047 5.30976 12.8047 5.94293 12.4142 6.33345L7.08086 11.6667C6.69033 12.0572 6.05717 12.0572 5.66664 11.6667L3.70711 9.70707C3.31658 9.31655 3.31658 8.68338 3.70711 8.29286C4.09763 7.90233 4.7308 7.90233 5.12132 8.29286L6.37375 9.54539L11 4.91924C11.3905 4.52871 12.0237 4.52871 12.4142 4.91924Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'f8fdd1dc701ef3ec3463726fdfdcc77ec65218e1' }, h("path", { key: 'a3dd6757827c6887efea1f3edc3d23b63b9f1c6e', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.6213 7.37879C19.2071 7.96458 19.2071 8.91433 18.6213 9.50011L10.6213 17.5C10.0355 18.0858 9.08577 18.0858 8.49998 17.5L5.56068 14.5605C4.97489 13.9748 4.97489 13.025 5.56068 12.4392C6.14646 11.8534 7.09621 11.8534 7.682 12.4392L9.56064 14.318L16.5 7.37879C17.0858 6.79301 18.0355 6.79301 18.6213 7.37879Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: '67fa72f7fe9590fb0882cf516a6c2ba68fe7f175' }, h("path", { key: '5c7451a7104842b97c66b74bd4d4ba11f20f3d04', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.7248 8.60863C22.4083 9.29205 22.4083 10.4001 21.7248 11.0835L12.3915 20.4167C11.7081 21.1001 10.6001 21.1001 9.91663 20.4167L6.48744 16.9873C5.80403 16.3039 5.80403 15.1959 6.48744 14.5125C7.17086 13.8291 8.2789 13.8291 8.96232 14.5125L11.1541 16.7044L19.25 8.60863C19.9334 7.92521 21.0414 7.92521 21.7248 8.60863Z", fill: "currentColor" })))));
-    }
-};
-SwirlIconCheckSmall.style = swirlIconCss;
-
-const swirlOptionListItemCss = ".sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-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),\n    0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}";
-
-const SwirlOptionListItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.toggleDrag = createEvent(this, "toggleDrag", 7);
-        this.context = "single-select";
-        this.dragHandleDescription = "Press spacebar to toggle grab";
-        this.dragHandleLabel = "Move option";
-        this.selected = false;
-        this.swirlAriaRole = "option";
-        this.iconSize = 24;
-        this.elementId = v4();
-        this.mediaQueryUnsubscribe = () => { };
-        this.onDragHandleKeyDown = (event) => {
-            if (event.code === "Space" || event.code === "Enter") {
-                event.preventDefault();
-                this.toggleDrag.emit(this.el);
-            }
-        };
-        this.onBlur = () => {
-            this.focused = false;
-        };
-        this.onFocus = () => {
-            this.focused = true;
-        };
-    }
-    componentDidLoad() {
-        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
-            this.forceIconProps(isDesktop);
-            this.updateIconSize(isDesktop);
-        });
-    }
-    disconnectedCallback() {
-        this.mediaQueryUnsubscribe();
-    }
-    forceIconProps(smallIcon) {
-        const icon = this.iconEl?.children[0];
-        icon?.setAttribute("size", smallIcon ? "20" : "24");
-    }
-    updateIconSize(smallIcon) {
-        this.iconSize = smallIcon ? 20 : 24;
-    }
-    render() {
-        const ariaDisabled = this.disabled ? "true" : undefined;
-        const ariaSelected = String(this.selected);
-        const showCheckbox = this.context === "multi-select";
-        const showIcon = Boolean(this.icon) && this.context === "single-select";
-        const showIconBadge = Boolean(this.iconBadge);
-        const showAvatar = this.el.querySelector('[slot="avatar"]');
-        const showSelectionIcon = this.selected && this.context === "single-select";
-        const className = classnames("option-list-item", `option-list-item--context-${this.context}`, {
-            "option-list-item--disabled": this.disabled,
-            "option-list-item--draggable": this.allowDrag,
-            "option-list-item--dragging": this.dragging,
-            "option-list-item--selected": this.selected,
-            "option-list-item--show-avatar": showAvatar,
-        });
-        return (h(Host, { key: '56c07efaa3f0d283d157c8f8bb0addfe930b4293' }, h("div", { key: '4542378bd31546f0551e237d4df5ee3701e3c199', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
-                ? `option-list-item-${this.elementId}-description`
-                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: 'df3f3af40e854f02ba688aa54dd834b9e77ac738', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: 'c21077d165c5d7869d99b5321dbab13d4005ad85', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: '26a71ace947042fb21e1abf05c6402e8539c773c', class: "option-list-item__checkbox" }, h("span", { key: 'de7da45be1f25839f26ae02df9082d56e5f2d0df', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '692c1642e9f035b2267b60bdd064477da25f1b60', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: 'f88effa897b9752dd5f02f9e7f73df5bd0714e04', class: "option-list-item__avatar" }, h("slot", { key: 'f412533bd41ed61784d341e25d90d3d0860f1406', name: "avatar" })), h("span", { key: 'b1091ff43a18a3095d9c20ecbd43d3642ed22bef', class: "option-list-item__label-container" }, h("span", { key: 'efbd6424c68e71884a26d8bf868921e006422f9d', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: 'ac57368d8364c458fa7a330ff5b4a7e816c94c12', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: 'e6caa3b02cba778b6d6031e12f376effb0c703e3', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: '20a94203bea74ec7e2a926145ba49b0042824a6a', size: this.iconSize })))), this.allowDrag && (h("button", { key: '9565e02956129bdb87316c8d96086556f6c5961a', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: '2fc4af86dacaa1a0057c4231fc73f02cce3b0c6e', size: this.iconSize })))));
-    }
-    get el() { return getElement(this); }
-};
-SwirlOptionListItem.style = swirlOptionListItemCss;
-
-export { SwirlIconCheckSmall as swirl_icon_check_small, SwirlOptionListItem as swirl_option_list_item };