@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-progress-indicator2.js

@@ -1,44 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-
-const swirlProgressIndicatorCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}";
-
-const SwirlProgressIndicator = /*@__PURE__*/ proxyCustomElement(class SwirlProgressIndicator extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.size = "m";
-        this.value = 0;
-        this.variant = "bar";
-    }
-    render() {
-        const className = classNames("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`);
-        const strokeWidth = this.size === "m" ? 4 : 2;
-        const radius = this.size === "m" ? 20 : 10;
-        const circumference = Math.round(radius * 2 * Math.PI);
-        const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
-        return (h(Host, { key: '15ba041f628a1fe13bb8895fe0b5f810ffe33fa6', class: this.variant }, this.variant === "bar" && (h("progress", { key: '4459d644857d98fe7c9eef03cb246a9ae80cb1bc', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (h("span", { key: 'cd113f19715a00a10aba83e86196a4d8bec065ff', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { key: '3ed7ffaab9e0093f23e5da7aea3d3ca3df5f862b', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { key: '5ec0d19a264e60df79dddcb15b64ce18b3681026', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: 'e166b97835ae53503ede4fc78a09cb0e3715302e', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
-    }
-    static get style() { return swirlProgressIndicatorCss; }
-}, [1, "swirl-progress-indicator", {
-        "label": [1],
-        "size": [1],
-        "value": [2],
-        "variant": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-progress-indicator"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-progress-indicator":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlProgressIndicator);
-            }
-            break;
-    } });
-}
-
-export { SwirlProgressIndicator as S, defineCustomElement as d };
+import{proxyCustomElement as r,HTMLElement as e,h as i,Host as a,transformTag as s}from"@stencil/core/internal/client";import{c as o}from"./index2.js";const t=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.size="m",this.value=0,this.variant="bar"}render(){const r=o("progress-indicator",`progress-indicator--size-${this.size}`,`progress-indicator--variant-${this.variant}`),e="m"===this.size?4:2,s="m"===this.size?20:10,t=Math.round(2*s*Math.PI),n=Math.round(t*((100-this.value)/100));return i(a,{key:"15ba041f628a1fe13bb8895fe0b5f810ffe33fa6",class:this.variant},"bar"===this.variant&&i("progress",{key:"4459d644857d98fe7c9eef03cb246a9ae80cb1bc","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r,max:100,value:this.value}),"circle"===this.variant&&i("span",{key:"cd113f19715a00a10aba83e86196a4d8bec065ff",role:"progressbar","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r},i("svg",{key:"3ed7ffaab9e0093f23e5da7aea3d3ca3df5f862b",class:"progress-indicator__circle",focusable:"false",viewBox:`0 0 ${2*(s+e)} ${2*(s+e)}`},i("circle",{key:"5ec0d19a264e60df79dddcb15b64ce18b3681026",class:"progress-indicator__circle-background",cx:s+e,cy:s+e,r:s,fill:"none","stroke-width":e}),i("circle",{key:"e166b97835ae53503ede4fc78a09cb0e3715302e",class:"progress-indicator__circle-value",cx:s+e,cy:s+e,r:s,fill:"none","stroke-width":e,"stroke-dasharray":t,"stroke-dashoffset":n}))))}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}"}},[1,"swirl-progress-indicator",{label:[1],size:[1],value:[2],variant:[1]}]);function n(){"undefined"!=typeof customElements&&["swirl-progress-indicator"].forEach((r=>{"swirl-progress-indicator"===r&&(customElements.get(s(r))||customElements.define(s(r),t))}))}export{t as S,n as d}

package/dist/components/swirl-radio-group.js

@@ -1,69 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const swirlRadioGroupCss = ".sc-swirl-radio-group-h{display:block}.sc-swirl-radio-group-h *.sc-swirl-radio-group{box-sizing:border-box}.radio-group.sc-swirl-radio-group{display:flex;flex-direction:column;gap:var(--s-space-12)}";
-
-const SwirlRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlRadioGroup extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.valueChange = createEvent(this, "valueChange", 7);
-    }
-    componentDidLoad() {
-        this.radioButtons = Array.from(this.el.querySelectorAll("swirl-radio"));
-        this.initValue();
-        this.handleValueChanges();
-    }
-    initValue() {
-        if (this.value === undefined) {
-            return;
-        }
-        const radioWithValue = this.radioButtons.find((radio) => radio.value === this.value);
-        if (!Boolean(radioWithValue)) {
-            return;
-        }
-        radioWithValue.checked = true;
-    }
-    handleValueChanges() {
-        for (const [key, radio] of Object.entries(this.radioButtons)) {
-            radio.addEventListener("valueChange", (event) => {
-                event.stopPropagation();
-                if (radio.checked === true || radio.checked === "true") {
-                    this.value = radio.value;
-                    this.valueChange.emit(radio.value);
-                    this.radioButtons.forEach((r, k) => {
-                        if (String(k) === key) {
-                            return;
-                        }
-                        r.checked = false;
-                    });
-                }
-            });
-        }
-    }
-    render() {
-        return (h(Host, { key: '613050e2ccb0ff359c0861b2d398defab7e6c53f', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: 'dbc2fedbb15f5e94fbdd20f373e48dee17f2b587', class: "radio-group" }, h("slot", { key: '381ccd368471dc42aeef79759b17cb5ea061e222' }))));
-    }
-    get el() { return this; }
-    static get style() { return swirlRadioGroupCss; }
-}, [6, "swirl-radio-group", {
-        "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
-        "value": [1537]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-radio-group"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-radio-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlRadioGroup$1);
-            }
-            break;
-    } });
-}
-
-const SwirlRadioGroup = SwirlRadioGroup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlRadioGroup, defineCustomElement };
+import{proxyCustomElement as r,HTMLElement as i,createEvent as e,h as s,Host as t,transformTag as o}from"@stencil/core/internal/client";const a=r(class extends i{constructor(r){super(),!1!==r&&this.__registerHost(),this.valueChange=e(this,"valueChange",7)}componentDidLoad(){this.radioButtons=Array.from(this.el.querySelectorAll("swirl-radio")),this.initValue(),this.handleValueChanges()}initValue(){if(void 0===this.value)return;const r=this.radioButtons.find((r=>r.value===this.value));r&&(r.checked=!0)}handleValueChanges(){for(const[r,i]of Object.entries(this.radioButtons))i.addEventListener("valueChange",(e=>{e.stopPropagation(),!0!==i.checked&&"true"!==i.checked||(this.value=i.value,this.valueChange.emit(i.value),this.radioButtons.forEach(((i,e)=>{e+""!==r&&(i.checked=!1)})))}))}render(){return s(t,{key:"b0803e4ca7a7d851b25591b92da91194b3666ab7","aria-describedby":this.swirlAriaDescribedby,role:"radiogroup"},s("div",{key:"8b090a939c2b6d7da1587cfad732c6f496534c92",class:"radio-group"},s("slot",{key:"5f530f56eca63da58b1dd6410f7cade9e4869e14"})))}get el(){return this}static get style(){return".sc-swirl-radio-group-h{display:block}.sc-swirl-radio-group-h *.sc-swirl-radio-group{box-sizing:border-box}.radio-group.sc-swirl-radio-group{display:flex;flex-direction:column;gap:var(--s-space-12)}"}},[262,"swirl-radio-group",{swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537]}]),d=a,c=function(){"undefined"!=typeof customElements&&["swirl-radio-group"].forEach((r=>{"swirl-radio-group"===r&&(customElements.get(o(r))||customElements.define(o(r),a))}))};export{d as SwirlRadioGroup,c as defineCustomElement}

package/dist/components/swirl-radio.js

@@ -1,89 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as defineCustomElement$4 } from './swirl-icon-help2.js';
-import { d as defineCustomElement$3 } from './swirl-tooltip2.js';
-import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
-
-const swirlRadioCss = ".sc-swirl-radio-h{display:inline-flex}.sc-swirl-radio-h *.sc-swirl-radio{box-sizing:border-box}.radio.sc-swirl-radio{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer;align-items:center}.radio.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.radio--variant-card.sc-swirl-radio:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default),\n      0 0 0 0.25rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:none}.radio--variant-card.sc-swirl-radio:hover:not(.radio--disabled){background-color:var(--s-surface-hovered)}.radio--variant-card.sc-swirl-radio:active:not(.radio--disabled){background-color:var(--s-surface-pressed)}.radio--variant-card.radio--checked.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-highlight)}.radio--variant-card.radio--invalid.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-critical)}.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:\"\";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio,.radio--invalid.radio--indeterminate.sc-swirl-radio .radio__box.sc-swirl-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-swirl-radio{cursor:default}.radio--disabled.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:transparent}.radio--disabled.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__description.sc-swirl-radio,.radio--disabled.sc-swirl-radio .radio__label.sc-swirl-radio{color:var(--s-text-disabled)}.radio__control.sc-swirl-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__control.sc-swirl-radio{width:1.375rem;height:1.375rem}}.radio__box.sc-swirl-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-swirl-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-swirl-radio{display:flex;align-items:center;font-weight:var(--s-font-weight-medium);gap:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__label.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.radio__description.sc-swirl-radio{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__description.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
-
-const SwirlRadio$1 = /*@__PURE__*/ proxyCustomElement(class SwirlRadio extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.valueChange = createEvent(this, "valueChange", 7);
-        this.checked = false;
-        this.disabled = false;
-        this.variant = "default";
-        this.onChange = () => {
-            this.checked = true;
-            this.valueChange.emit(this.value);
-        };
-    }
-    getAriaCheckedLabel(checked, unchecked) {
-        if (checked) {
-            return "true";
-        }
-        else if (unchecked) {
-            return "false";
-        }
-        return "mixed";
-    }
-    render() {
-        const unchecked = this.checked === false || this.checked === "false";
-        const checked = this.checked === true || this.checked === "true";
-        const ariaCheckedLabel = this.getAriaCheckedLabel(checked, unchecked);
-        const ariaInvalid = this.invalid;
-        const className = classNames("radio", `radio--variant-${this.variant}`, {
-            "radio--checked": checked,
-            "radio--disabled": this.disabled,
-            "radio--invalid": this.invalid,
-            "radio--unchecked": unchecked,
-        });
-        return (h(Host, { key: 'e606346e6bad20694e405a1426a0a45911fc11be', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '70f07188dea6fc75ece1061539fd26e44551584b', class: className, htmlFor: this.inputId }, h("span", { key: '031193006c8ba2d68ca1d3a5ee5a87a0205d5ef8', class: "radio__control" }, h("swirl-visually-hidden", { key: '30292376b3339413b56e22237c9de56cf4738661' }, h("input", { key: '69d0e9e195b7bc137beccbfeda14f6d5b8ba2f88', "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), h("span", { key: 'c4699b0ea5113a48ffeb9ee41328d473fe778baf', "aria-hidden": "true", class: "radio__box" })), h("span", { key: 'a34d4909cfaa730ae3d9604a4ee0a0c09cf5a9c4', class: "radio__label-container" }, this.label && (h("span", { key: 'd6d5eec0fb5333b6e6a6fee7f96cbd9a34bddf84', class: "radio__label" }, this.label, this.tooltip && (h("swirl-tooltip", { key: 'd754046e3aff9efa96ca9d22989982b1eea453b3', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: 'bed19b2c0a4795a34bcfcdd27866ad5705e6e908', color: "default", size: 20, tabIndex: 0 }))))), this.description && (h("span", { key: '92fd8741756d33a86549bef45636b4a2499ce4d6', class: "radio__description", innerHTML: this.description }))))));
-    }
-    static get style() { return swirlRadioCss; }
-}, [2, "swirl-radio", {
-        "checked": [1032],
-        "description": [1],
-        "disabled": [4],
-        "inputId": [1, "input-id"],
-        "inputName": [1, "input-name"],
-        "invalid": [4],
-        "label": [1],
-        "tooltip": [1],
-        "value": [1],
-        "variant": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-radio", "swirl-icon-help", "swirl-tooltip", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-radio":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlRadio$1);
-            }
-            break;
-        case "swirl-icon-help":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlRadio = SwirlRadio$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlRadio, defineCustomElement };
+import{proxyCustomElement as i,HTMLElement as r,createEvent as a,h as o,Host as d,transformTag as s}from"@stencil/core/internal/client";import{c as e}from"./index2.js";import{d as c}from"./swirl-icon-help2.js";import{d as l}from"./swirl-tooltip2.js";import{d as t}from"./swirl-visually-hidden2.js";const n=i(class extends r{constructor(i){super(),!1!==i&&this.__registerHost(),this.valueChange=a(this,"valueChange",7),this.checked=!1,this.disabled=!1,this.variant="default",this.onChange=()=>{this.checked=!0,this.valueChange.emit(this.value)}}getAriaCheckedLabel(i,r){return i?"true":r?"false":"mixed"}render(){const i=!1===this.checked||"false"===this.checked,r=!0===this.checked||"true"===this.checked,a=this.getAriaCheckedLabel(r,i),s=this.invalid,c=e("radio","radio--variant-"+this.variant,{"radio--checked":r,"radio--disabled":this.disabled,"radio--invalid":this.invalid,"radio--unchecked":i});return o(d,{key:"e606346e6bad20694e405a1426a0a45911fc11be",style:{width:"card"===this.variant?"100%":void 0}},o("label",{key:"70f07188dea6fc75ece1061539fd26e44551584b",class:c,htmlFor:this.inputId},o("span",{key:"031193006c8ba2d68ca1d3a5ee5a87a0205d5ef8",class:"radio__control"},o("swirl-visually-hidden",{key:"30292376b3339413b56e22237c9de56cf4738661"},o("input",{key:"69d0e9e195b7bc137beccbfeda14f6d5b8ba2f88","aria-checked":a,"aria-invalid":s,checked:r,class:"radio__input",disabled:this.disabled,id:this.inputId,name:this.inputName,onChange:this.onChange,type:"radio",value:this.value})),o("span",{key:"c4699b0ea5113a48ffeb9ee41328d473fe778baf","aria-hidden":"true",class:"radio__box"})),o("span",{key:"a34d4909cfaa730ae3d9604a4ee0a0c09cf5a9c4",class:"radio__label-container"},this.label&&o("span",{key:"d6d5eec0fb5333b6e6a6fee7f96cbd9a34bddf84",class:"radio__label"},this.label,this.tooltip&&o("swirl-tooltip",{key:"d754046e3aff9efa96ca9d22989982b1eea453b3",content:this.tooltip,position:"top"},o("swirl-icon-help",{key:"bed19b2c0a4795a34bcfcdd27866ad5705e6e908",color:"default",size:20,tabIndex:0}))),this.description&&o("span",{key:"92fd8741756d33a86549bef45636b4a2499ce4d6",class:"radio__description",innerHTML:this.description}))))}static get style(){return'.sc-swirl-radio-h{display:inline-flex}.sc-swirl-radio-h *.sc-swirl-radio{box-sizing:border-box}.radio.sc-swirl-radio{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer;align-items:center}.radio.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),       0 0 0 0.1875rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.radio--variant-card.sc-swirl-radio:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default),       0 0 0 0.25rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:none}.radio--variant-card.sc-swirl-radio:hover:not(.radio--disabled){background-color:var(--s-surface-hovered)}.radio--variant-card.sc-swirl-radio:active:not(.radio--disabled){background-color:var(--s-surface-pressed)}.radio--variant-card.radio--checked.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-highlight)}.radio--variant-card.radio--invalid.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-critical)}.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:"";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio,.radio--invalid.radio--indeterminate.sc-swirl-radio .radio__box.sc-swirl-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-swirl-radio{cursor:default}.radio--disabled.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:transparent}.radio--disabled.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__description.sc-swirl-radio,.radio--disabled.sc-swirl-radio .radio__label.sc-swirl-radio{color:var(--s-text-disabled)}.radio__control.sc-swirl-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__control.sc-swirl-radio{width:1.375rem;height:1.375rem}}.radio__box.sc-swirl-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-swirl-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-swirl-radio{display:flex;align-items:center;font-weight:var(--s-font-weight-medium);gap:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__label.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.radio__description.sc-swirl-radio{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__description.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}'}},[2,"swirl-radio",{checked:[1032],description:[1],disabled:[4],inputId:[1,"input-id"],inputName:[1,"input-name"],invalid:[4],label:[1],tooltip:[1],value:[1],variant:[1]}]),h=n,b=function(){"undefined"!=typeof customElements&&["swirl-radio","swirl-icon-help","swirl-tooltip","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-radio":customElements.get(s(i))||customElements.define(s(i),n);break;case"swirl-icon-help":customElements.get(s(i))||c();break;case"swirl-tooltip":customElements.get(s(i))||l();break;case"swirl-visually-hidden":customElements.get(s(i))||t()}}))};export{h as SwirlRadio,b as defineCustomElement}

package/dist/components/swirl-resource-list-file-item.js

@@ -1,101 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { D as DesktopMediaQuery } from './media-query.service.js';
-import { d as defineCustomElement$6 } from './swirl-button2.js';
-import { d as defineCustomElement$5 } from './swirl-icon-error2.js';
-import { d as defineCustomElement$4 } from './swirl-inline-error2.js';
-import { d as defineCustomElement$3 } from './swirl-spinner2.js';
-import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
-
-const swirlResourceListFileItemCss = ".sc-swirl-resource-list-file-item-h{display:block;width:100%}.sc-swirl-resource-list-file-item-h *.sc-swirl-resource-list-file-item{box-sizing:border-box}.resource-list-file-item.sc-swirl-resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item.sc-swirl-resource-list-file-item:focus{outline:none}.resource-list-file-item.sc-swirl-resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item.sc-swirl-resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control.sc-swirl-resource-list-file-item .resource-list-file-item__label-container.sc-swirl-resource-list-file-item{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.5rem;height:1.5rem;color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.25rem;height:1.25rem}}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-file-item__label.sc-swirl-resource-list-file-item{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description.sc-swirl-resource-list-file-item{overflow:hidden;margin-top:var(--s-space-2);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-file-item__error-message.sc-swirl-resource-list-file-item{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}";
-
-const SwirlResourceListFileItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlResourceListFileItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.remove = createEvent(this, "remove", 7);
-        this.icon = "<swirl-icon-file></swirl-icon-file>";
-        this.removeButtonLabel = "Remove file";
-        this.mediaQueryUnsubscribe = () => { };
-    }
-    componentDidLoad() {
-        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
-            this.forceIconProps(isDesktop);
-        });
-    }
-    disconnectedCallback() {
-        this.mediaQueryUnsubscribe();
-    }
-    forceIconProps(smallIcon) {
-        if (!Boolean(this.iconEl)) {
-            return;
-        }
-        const icon = this.iconEl.children[0];
-        icon?.setAttribute("size", smallIcon ? "20" : "24");
-    }
-    render() {
-        const showError = Boolean(this.errorMessage);
-        const showDescription = !showError && Boolean(this.description);
-        const showSpinner = !showError && this.loading;
-        const showRemoveButton = this.removable && !showSpinner;
-        const hostRole = !!this.el.closest('[role="grid"]') ? "row" : "listitem";
-        const containerRole = hostRole === "row" ? "gridcell" : undefined;
-        const className = classNames("resource-list-file-item", {
-            "resource-list-file-item--has-control": showSpinner || showRemoveButton,
-        });
-        return (h(Host, { key: 'ee72b6b629ec54fe2e3057a7691d9563f057646d', role: hostRole }, h("div", { key: '96befaf801e640b96cac329ed0931589e037fcea', class: className, part: "resource-list-file-item", role: containerRole }, h("span", { key: '265577eaf476c51f947f423e48d1be4689454939', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '772b068427645cbdf008654bd436e19d61382648', class: "resource-list-file-item__label-container" }, h("span", { key: 'b45467b30178299f7bf78f221be1ad2634b66f4c', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '01afaf82ba068ebe4d43278aff179e1f9a31d180', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '6a08fdeed73bd715fca6f4060b17bab211647a4e', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '63427dfb60372c17193ac877854e45a298d17ebb', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '64419c8dbbf3ce3220d3f683cf9c1af335a5c22a', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: 'f9945cafa165965e1de1f54980461eefb8ca8c34', size: "s" }))), showRemoveButton && (h("span", { key: '6c5dfa284520c7f1e639edbfa0e97124673cb525', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '3e5f8aa392b1bb82f054291efb65ec2e49e59f12', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
-    }
-    get el() { return this; }
-    static get style() { return swirlResourceListFileItemCss; }
-}, [2, "swirl-resource-list-file-item", {
-        "description": [1],
-        "errorMessage": [1, "error-message"],
-        "icon": [1],
-        "label": [1],
-        "loading": [4],
-        "removable": [4],
-        "removeButtonLabel": [1, "remove-button-label"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-resource-list-file-item", "swirl-button", "swirl-icon-error", "swirl-inline-error", "swirl-spinner", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-resource-list-file-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlResourceListFileItem$1);
-            }
-            break;
-        case "swirl-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "swirl-icon-error":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "swirl-inline-error":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlResourceListFileItem = SwirlResourceListFileItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlResourceListFileItem, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as i,createEvent as s,h as r,Host as t,transformTag as l}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-error2.js";import{d as f}from"./swirl-inline-error2.js";import{d as m}from"./swirl-spinner2.js";import{d}from"./swirl-visually-hidden2.js";const u=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.remove=s(this,"remove",7),this.icon="<swirl-icon-file></swirl-icon-file>",this.removeButtonLabel="Remove file",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(e){if(!this.iconEl)return;const i=this.iconEl.children[0];i?.setAttribute("size",e?"20":"24")}render(){const e=!!this.errorMessage,i=!e&&!!this.description,s=!e&&this.loading,l=this.removable&&!s,c=this.el.closest('[role="grid"]')?"row":"listitem",a="row"===c?"gridcell":void 0,n=o("resource-list-file-item",{"resource-list-file-item--has-control":s||l});return r(t,{key:"ee72b6b629ec54fe2e3057a7691d9563f057646d",role:c},r("div",{key:"96befaf801e640b96cac329ed0931589e037fcea",class:n,part:"resource-list-file-item",role:a},r("span",{key:"265577eaf476c51f947f423e48d1be4689454939",class:"resource-list-file-item__icon",innerHTML:this.icon,ref:e=>this.iconEl=e}),r("span",{key:"772b068427645cbdf008654bd436e19d61382648",class:"resource-list-file-item__label-container"},r("span",{key:"b45467b30178299f7bf78f221be1ad2634b66f4c",class:"resource-list-file-item__label",id:"label"},this.label),i&&r("span",{key:"01afaf82ba068ebe4d43278aff179e1f9a31d180",class:"resource-list-file-item__description"},this.description),e&&r("span",{key:"6a08fdeed73bd715fca6f4060b17bab211647a4e","aria-live":"polite",class:"resource-list-file-item__error-message"},r("swirl-inline-error",{key:"63427dfb60372c17193ac877854e45a298d17ebb",message:this.errorMessage,size:"s"}))),s&&r("span",{key:"64419c8dbbf3ce3220d3f683cf9c1af335a5c22a",class:"resource-list-file-item__spinner"},r("swirl-spinner",{key:"f9945cafa165965e1de1f54980461eefb8ca8c34",size:"s"})),l&&r("span",{key:"6c5dfa284520c7f1e639edbfa0e97124673cb525",class:"resource-list-file-item__remove-button"},r("swirl-button",{key:"3e5f8aa392b1bb82f054291efb65ec2e49e59f12",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.removeButtonLabel,onClick:this.remove.emit}))))}get el(){return this}static get style(){return'.sc-swirl-resource-list-file-item-h{display:block;width:100%}.sc-swirl-resource-list-file-item-h *.sc-swirl-resource-list-file-item{box-sizing:border-box}.resource-list-file-item.sc-swirl-resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item.sc-swirl-resource-list-file-item:focus{outline:none}.resource-list-file-item.sc-swirl-resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item.sc-swirl-resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control.sc-swirl-resource-list-file-item .resource-list-file-item__label-container.sc-swirl-resource-list-file-item{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.5rem;height:1.5rem;color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.25rem;height:1.25rem}}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-file-item__label.sc-swirl-resource-list-file-item{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description.sc-swirl-resource-list-file-item{overflow:hidden;margin-top:var(--s-space-2);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-file-item__error-message.sc-swirl-resource-list-file-item{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}'}},[2,"swirl-resource-list-file-item",{description:[1],errorMessage:[1,"error-message"],icon:[1],label:[1],loading:[4],removable:[4],removeButtonLabel:[1,"remove-button-label"]}]),h=u,b=function(){"undefined"!=typeof customElements&&["swirl-resource-list-file-item","swirl-button","swirl-icon-error","swirl-inline-error","swirl-spinner","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-resource-list-file-item":customElements.get(l(e))||customElements.define(l(e),u);break;case"swirl-button":customElements.get(l(e))||a();break;case"swirl-icon-error":customElements.get(l(e))||n();break;case"swirl-inline-error":customElements.get(l(e))||f();break;case"swirl-spinner":customElements.get(l(e))||m();break;case"swirl-visually-hidden":customElements.get(l(e))||d()}}))};export{h as SwirlResourceListFileItem,b as defineCustomElement}

package/dist/components/swirl-resource-list-item.js

@@ -1,6 +1 @@
-import { S as SwirlResourceListItem$1, d as defineCustomElement$1 } from './swirl-resource-list-item2.js';
-
-const SwirlResourceListItem = SwirlResourceListItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlResourceListItem, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as r,Host as t,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-check-strong2.js";import{d as m}from"./swirl-icon-drag-handle2.js";import{d as u}from"./swirl-popover-trigger2.js";import{d}from"./swirl-tooltip2.js";import{v as h}from"./v4.js";const w=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.toggleDrag=i(this,"toggleDrag",7),this.valueChange=i(this,"valueChange",7),this.checked=!1,this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move item",this.interactive=!0,this.labelWeight="medium",this.labelTooltipPosition="top",this.menuTriggerLabel="Options",this.hasMedia=!1,this.iconSize=24,this.elementId=h(),this.mediaQueryUnsubscribe=()=>{},this.onClick=()=>{this.selectable&&(this.checked=!this.checked,this.valueChange.emit(this.checked))},this.onBlur=()=>{this.makeControlUnfocusable()},this.onFocus=()=>{this.makeControlFocusable()},this.onMenuTriggerClick=e=>{this.disabled&&!this.href&&e.stopPropagation()},this.onDragHandleKeyDown=e=>{"Space"!==e.code&&"Enter"!==e.code||(e.preventDefault(),this.toggleDrag.emit(this.el))},this.onControlClick=e=>{e.preventDefault(),e.stopPropagation()}}componentWillLoad(){this.updateMediaState()}componentDidLoad(){this.parentSemantics=this.el.closest("swirl-resource-list")?.semantics,this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e),this.updateIconSize(e)})),this.makeControlUnfocusable(),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!!this.el.querySelector("[slot='badges']")}get showMeta(){return(!!this.meta||this.hasBadges)&&!this.selectable}forceIconProps(e){const s=this.iconEl?.children[0];s?.setAttribute("size",e?"20":"24")}updateIconSize(e){this.iconSize=e?20:24}updateMediaState(){const e=!!this.el.querySelector('[slot="media"]');e!==this.hasMedia&&(this.hasMedia=e)}getControl(){return this.el.querySelector('[slot="control"] button')}makeControlFocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=0)}makeControlUnfocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=-1)}render(){const e=this.interactive||this.selectable?this.href&&!this.selectable?"a":"button":"div",s=this.disabled&&!this.href,i=this.hasBadges,o=this.el.querySelector("[slot='control']"),c=!!this.menuTriggerId||o,a=this.interactive&&this.href?this.href:void 0,n=o&&(!!this.meta||i),m=!!this.menuTriggerId&&!this.meta&&!this.selectable,u=this.showMeta,d=this.swirlAriaLabel?this.swirlAriaLabel:this.label,h=this.selectable?this.checked+"":void 0,w=this.interactive&&this.selectable?"checkbox":void 0,b=this.el.closest('[role="grid"]')?"row":"listitem",g="row"===b?"gridcell":void 0,p={minHeight:this.labelMinHeight??void 0},v=()=>r("span",{key:"37c85747056a39da4bae4c738509399648f3d736",class:"resource-list-item__label",id:this.elementId,innerHTML:this.allowHtml?this.label:void 0},!this.allowHtml&&this.label),f=l("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":o,"resource-list-item--has-menu":c,"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":n,"resource-list-item--show-meta":u,"resource-list-item--wrap-description":this.descriptionWrap,"resource-list-item--wrap-label":this.labelWrap});return r(t,{key:"ca338b580e9a4a0b9516d3391d0aeeae4ea1a654",role:b},r("div",{key:"dffac16c5ecfb85b556f92cfdcef17e69f81cc70",class:f,role:g,onClick:this.onClick},r(e,{key:"1365aa82443f7377e4e3c989bf44cf22d354d6dd","aria-checked":h,"aria-current":this.swirlAriaCurrent,"aria-disabled":s?"true":void 0,"aria-label":d,"aria-labelledby":this.swirlAriaLabel?void 0:this.elementId,class:"resource-list-item__content",style:{alignItems:this.alignItems},href:a,disabled:s,onBlur:this.onBlur,onFocus:this.onFocus,part:"resource-list-item__content",role:w,tabIndex:0,type:"button"===e?"button":void 0},this.hasMedia&&r("span",{key:"82efa5ce45e4e221eaf709c8784684e5413933b7",class:"resource-list-item__media"},r("slot",{key:"81896485ba4dd4805c9fee22df235458230fbb3f",name:"media"})),r("span",{key:"42c7ef04acf577e9a9549e99b2299efd5040eb40",class:"resource-list-item__label-container",style:p},this.labelTooltip?r("swirl-tooltip",{content:this.labelTooltip,position:this.labelTooltipPosition},v()):v(),this.description&&r("span",{key:"011b264b8906faa3d6b671ead50e3c1a3ccf1567",class:"resource-list-item__description",innerHTML:this.allowHtml?this.description:void 0},!this.allowHtml&&this.description))),this.selectable&&r("span",{key:"6ca551c7ad81601df78e94eece8c0d72bb89adeb","aria-hidden":"true",class:"resource-list-item__checkbox"},r("span",{key:"eddf677da7c6b606c76649bf4f4a06eb5ffd0b94",class:"resource-list-item__checkbox-icon"},this.checked&&r("swirl-icon-check-strong",{key:"384628edf729e8e3214af4007e3acdbae190e3b1"}))),u&&r("span",{key:"efad9e9c3d1c7fb68cfd6f45268d2d511dac8d23",class:"resource-list-item__meta"},this.meta&&r("span",{key:"6c654ea6eb33af529908885e13b15a60a25c6996",class:"resource-list-item__meta-text"},this.meta),r("span",{key:"f1aba6b5a08158a3d1830b8a3e55831fbc658334",class:"resource-list-item__badges"},r("slot",{key:"c53cc549305d4b1b338357a4c6e6ff04a877d70b",name:"badges"}))),r("span",{key:"2fb88347d7c809a4a66ca2887f86267ab1daaa96",class:"resource-list-item__control",onClick:this.onControlClick},r("slot",{key:"8d2c303b222c5714fd2c18a9449ab621ee729e3c",name:"control"})),m&&r("swirl-popover-trigger",{key:"81a43da61e282fb76de74d0d0b99526501d8907f",swirlPopover:this.menuTriggerId},r("swirl-button",{key:"0b71d4831ca2126ca233a19c932654dc11343e76","aria-disabled":s?"true":void 0,class:"resource-list-item__menu-trigger",disabled:s,hideLabel:!0,icon:"<swirl-icon-more-horizontal></swirl-icon-more-horizontal>",intent:"primary",label:this.menuTriggerLabel,onClick:this.onMenuTriggerClick}))),this.allowDrag&&r("button",{key:"933b327f60287bbd3c22f41106322724fa18a8f6","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"resource-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,type:"button"},r("swirl-icon-drag-handle",{key:"da629f0be562d793985940781af6c829556ab918",size:this.iconSize})))}get el(){return this}static get style(){return'.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)}'}},[262,"swirl-resource-list-item",{active:[4],allowDrag:[4,"allow-drag"],allowHtml:[4,"allow-html"],checked:[1028],compact:[4],description:[1],descriptionWrap:[4,"description-wrap"],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],hideDivider:[4,"hide-divider"],href:[1],interactive:[4],label:[1],labelWeight:[1,"label-weight"],labelWrap:[4,"label-wrap"],labelMinHeight:[1,"label-min-height"],labelTooltip:[1,"label-tooltip"],labelTooltipPosition:[1,"label-tooltip-position"],menuTriggerId:[1,"menu-trigger-id"],menuTriggerLabel:[1,"menu-trigger-label"],meta:[1],selectable:[4],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaLabel:[1,"swirl-aria-label"],value:[1],alignItems:[1,"align-items"],hasMedia:[32],iconSize:[32]}]),b=w,g=function(){"undefined"!=typeof customElements&&["swirl-resource-list-item","swirl-button","swirl-icon-check-strong","swirl-icon-drag-handle","swirl-popover-trigger","swirl-tooltip"].forEach((e=>{switch(e){case"swirl-resource-list-item":customElements.get(o(e))||customElements.define(o(e),w);break;case"swirl-button":customElements.get(o(e))||a();break;case"swirl-icon-check-strong":customElements.get(o(e))||n();break;case"swirl-icon-drag-handle":customElements.get(o(e))||m();break;case"swirl-popover-trigger":customElements.get(o(e))||u();break;case"swirl-tooltip":customElements.get(o(e))||d()}}))};export{b as SwirlResourceListItem,g as defineCustomElement}

package/dist/components/swirl-resource-list-section.js

@@ -1,56 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './swirl-separator2.js';
-import { d as defineCustomElement$2 } from './swirl-stack2.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 SwirlResourceListSection$1 = /*@__PURE__*/ proxyCustomElement(class SwirlResourceListSection extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.separatorSpacing = "4";
-        this.spacing = "0";
-        this.hasSeparator = false;
-    }
-    render() {
-        const role = !!this.el.closest('[role="grid"]') ? "rowgroup" : "listitem";
-        const childrenListRole = role === "listitem" ? "list" : undefined;
-        return (h(Host, { key: 'e143edaf19d7312eb789647d55101717d2773674' }, this.hasSeparator && (h("swirl-separator", { key: '5ac9702f4c8652faa2821d4202d6d59c6a6f106c', spacing: this.separatorSpacing, semantics: "none" })), h("div", { key: '7b5c383da17bed1a12fdb3c75e648cc20a34e7c7', "aria-labelledby": "label", role: role }, h("span", { key: '1a253c554d956504e9112fb54ea0772d031e1f04', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: '617eb3cfbd43a117bb5442def682c9eaf2867758', spacing: this.spacing, swirlAriaRole: childrenListRole }, h("slot", { key: '93d85585b5067389b641018245fed9a1d87808f2' })))));
-    }
-    get el() { return this; }
-    static get style() { return swirlResourceListSectionCss; }
-}, [1, "swirl-resource-list-section", {
-        "label": [1],
-        "separatorSpacing": [1, "separator-spacing"],
-        "spacing": [1],
-        "hasSeparator": [4, "has-separator"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-resource-list-section", "swirl-separator", "swirl-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-resource-list-section":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlResourceListSection$1);
-            }
-            break;
-        case "swirl-separator":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlResourceListSection = SwirlResourceListSection$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlResourceListSection, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as r}from"@stencil/core/internal/client";import{d as a}from"./swirl-separator2.js";import{d as l}from"./swirl-stack2.js";const o=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){const e=this.el.closest('[role="grid"]')?"rowgroup":"listitem",s="listitem"===e?"list":void 0;return t(i,{key:"e143edaf19d7312eb789647d55101717d2773674"},this.hasSeparator&&t("swirl-separator",{key:"5ac9702f4c8652faa2821d4202d6d59c6a6f106c",spacing:this.separatorSpacing,semantics:"none"}),t("div",{key:"7b5c383da17bed1a12fdb3c75e648cc20a34e7c7","aria-labelledby":"label",role:e},t("span",{key:"1a253c554d956504e9112fb54ea0772d031e1f04",id:"label",class:"resource-list-section-label",part:"resource-list-section-label"},this.label),t("swirl-stack",{key:"617eb3cfbd43a117bb5442def682c9eaf2867758",spacing:this.spacing,swirlAriaRole:s},t("slot",{key:"93d85585b5067389b641018245fed9a1d87808f2"}))))}get el(){return this}static get style(){return":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)}}"}},[257,"swirl-resource-list-section",{label:[1],separatorSpacing:[1,"separator-spacing"],spacing:[1],hasSeparator:[4,"has-separator"]}]),c=o,n=function(){"undefined"!=typeof customElements&&["swirl-resource-list-section","swirl-separator","swirl-stack"].forEach((e=>{switch(e){case"swirl-resource-list-section":customElements.get(r(e))||customElements.define(r(e),o);break;case"swirl-separator":customElements.get(r(e))||a();break;case"swirl-stack":customElements.get(r(e))||l()}}))};export{c as SwirlResourceListSection,n as defineCustomElement}

package/dist/components/swirl-resource-list.js

@@ -1,6 +1 @@
-import { S as SwirlResourceList$1, d as defineCustomElement$1 } from './swirl-resource-list2.js';
-
-const SwirlResourceList = SwirlResourceList$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlResourceList, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as r,transformTag as h}from"@stencil/core/internal/client";import{S as a}from"./sortable.esm.js";import{d as o}from"./swirl-box2.js";import{d as l}from"./swirl-stack2.js";import{d as n}from"./swirl-visually-hidden2.js";import{v as d}from"./v4.js";const c=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.itemDrop=i(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=d(),this.focusedIndex=0,this.toggleDrag=t=>{const s=t.detail;this.dragging?this.stopDrag(s):this.startDrag(s)},this.startDrag=t=>{this.dragging=t,this.draggingStartIndex=this.getItemIndex(this.dragging),t.setAttribute("dragging","true");const s=this.getItemIndex(this.dragging);this.focusItemAtIndex(s),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{const s=this.getItemIndex(this.dragging);this.dragging=void 0,t.removeAttribute("dragging"),this.assistiveText=`${this.assistiveTextItemMoved} ${s+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:s}),this.draggingStartIndex=void 0},this.onKeyDown=t=>{if("grid"===this.semantics&&!this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.focusItemAtIndex((this.focusedIndex+1)%this.items.length);else if("ArrowUp"===t.code)t.preventDefault(),this.focusItemAtIndex(0===this.focusedIndex?this.items.length-1:this.focusedIndex-1);else if("Enter"===t.code&&this.controllingElement){const s=this.items[this.focusedIndex];if(!s||!s.isConnected)return;t.stopPropagation(),t.preventDefault(),s.click()}else"Home"===t.code?(t.preventDefault(),this.focusItemAtIndex(0)):"End"===t.code&&(t.preventDefault(),this.focusItemAtIndex(this.items.length-1));if(this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.moveDraggedItemDown();else if("ArrowUp"===t.code)t.preventDefault(),this.moveDraggedItemUp();else if("Space"===t.code||"Enter"===t.code){const s=t.composedPath()[0];s?.classList.contains("resource-list-item__drag-handle")||(t.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:!0,characterData:!0,subtree:!0})}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}async resetFocus(){this.focusedIndex=0,this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[0]),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((t=>t.isConnected)),this.sections=Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((t=>t.isConnected)),this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[this.focusedIndex]),this.controllingElement&&this.items[0]?.setAttribute("aria-selected","true")}setupControllingElement(){this.controllingElement&&(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(t){return this.items.map((t=>t)).findIndex((s=>s===t))}removeItemsFromTabOrder(){"grid"===this.semantics&&this.items.forEach((t=>{const s=t?.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),i=t?.querySelector(".resource-list-item__drag-handle");this.controllingElement&&t.setAttribute("aria-selected","false"),s?.setAttribute("tabIndex","-1"),i?.setAttribute("tabIndex","-1")}))}setItemAllowDragState(){this.allowDrag?this.items.filter((t=>this.sections.every((s=>!s.contains(t))))).forEach((t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)})):this.items.forEach((t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)}))}setupDragDrop(){this.sortable&&this.sortable.destroy(),this.allowDrag&&(this.sortable=a.create(this.gridEl,{animation:150,draggable:"swirl-resource-list-item",dragClass:"swirl-resource-list-item--drag",handle:".resource-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldDraggableIndex,newIndex:t.newDraggableIndex})}}))}enableItemFocus(t,s){if(!t||this.controllingElement)return;const i=t.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),e=t.querySelector(".resource-list-item__drag-handle");e&&e.setAttribute("tabIndex","0"),i&&(i.setAttribute("tabIndex","0"),s&&!this.controllingElement&&i.focus())}focusItemAtIndex(t){this.removeItemsFromTabOrder();const s=this.items[t];s&&s.isConnected&&(this.enableItemFocus(s,!this.controllingElement),this.controllingElement&&(s.setAttribute("aria-selected","true"),s.scrollIntoView({block:"nearest"})),this.focusedIndex=t)}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;t&&(t.after(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;t&&(t.before(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}setSectionSpacingAndSeparator(){this.sections.forEach(((t,s)=>{0===s&&"SWIRL-RESOURCE-LIST-ITEM"!==t.previousElementSibling?.tagName&&(t.hasSeparator=!1),t.spacing=this.spacing}))}render(){return e(r,{key:"b6b5c57cd6b804e8a291f45dcc9f918ca307c45b",onKeyDown:this.onKeyDown},e("swirl-visually-hidden",{key:"3509117ca4e73cc4feaf30e204531a931d75ebab",role:"alert"},this.assistiveText),e("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"},e("swirl-stack",{key:"58f9742215c325be3039b10a07acccff90d6ed11","aria-label":this.label,class:"resource-list",id:this.listId,ref:t=>this.gridEl=t,role:this.semantics,spacing:this.spacing},e("slot",{key:"37c212d102a2f9b35f38cb62341345e5da12036b"}))))}get el(){return this}static get watchers(){return{allowDrag:[{watchAllowDrag:0}]}}static get style(){return".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}"}},[262,"swirl-resource-list",{allowDrag:[4,"allow-drag"],assistiveTextItemGrabbed:[1,"assistive-text-item-grabbed"],assistiveTextItemMoving:[1,"assistive-text-item-moving"],assistiveTextItemMoved:[1,"assistive-text-item-moved"],controllingElement:[16],label:[1],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],semantics:[1],spacing:[1],assistiveText:[32],listId:[32],resetFocus:[64]},void 0,{allowDrag:[{watchAllowDrag:0}]}]),m=c,g=function(){"undefined"!=typeof customElements&&["swirl-resource-list","swirl-box","swirl-stack","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-resource-list":customElements.get(h(t))||customElements.define(h(t),c);break;case"swirl-box":customElements.get(h(t))||o();break;case"swirl-stack":customElements.get(h(t))||l();break;case"swirl-visually-hidden":customElements.get(h(t))||n()}}))};export{m as SwirlResourceList,g as defineCustomElement}