@uh-design-system/component-library 1.4.0-rc.2 → 1.4.0-rc.3

package/dist/components/ds-action-list-divider.js

@@ -1,36 +1 @@
-import { p as proxyCustomElement, H, h } from './p-GalXVdFP.js';
-import { c as cx } from './p-C34PGDVY.js';
-
-const dsActionListDividerCss = ".ds-no-style-leak.sc-ds-action-list-divider *.sc-ds-action-list-divider{all:unset;box-sizing:border-box;display:block}.sc-ds-action-list-divider-h{display:block}.ds-action-list-divider__oSBnIJ.sc-ds-action-list-divider{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);border:none;border-top:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);margin:var(--ds-spacing-2xSmall) 0}";
-
-const DsActionListDivider$1 = proxyCustomElement(class DsActionListDivider extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    render() {
-        const baseClass = cx('ds-action-list-divider');
-        return h("hr", { key: 'ff48fa0e82ff90b4eff83bc4b2c2be824c4e1d77', role: "separator", class: baseClass, "aria-hidden": "true" });
-    }
-    static get style() { return dsActionListDividerCss; }
-}, [258, "ds-action-list-divider"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-action-list-divider"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-action-list-divider":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsActionListDivider$1);
-            }
-            break;
-    } });
-}
-
-const DsActionListDivider = DsActionListDivider$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsActionListDivider, defineCustomElement };
+import{p as i,H as s,h as t,t as d}from"./p-DZOTmLzP.js";import{c as r}from"./p-ByHAbBpc.js";const e=i(class extends s{constructor(i){super(),!1!==i&&this.__registerHost()}render(){const i=r("ds-action-list-divider");return t("hr",{key:"f17c840f1522d906e1cbdf627b15b3933942586f",role:"separator",class:i,"aria-hidden":"true"})}static get style(){return".ds-no-style-leak.sc-ds-action-list-divider *.sc-ds-action-list-divider{all:unset;box-sizing:border-box;display:block}.sc-ds-action-list-divider-h{display:block}.ds-action-list-divider__KmYz6O.sc-ds-action-list-divider{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);border:none;border-top:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);margin:var(--ds-spacing-2xSmall) 0}"}},[2,"ds-action-list-divider"]),o=e,n=function(){"undefined"!=typeof customElements&&["ds-action-list-divider"].forEach((i=>{"ds-action-list-divider"===i&&(customElements.get(d(i))||customElements.define(d(i),e))}))};export{o as DsActionListDivider,n as defineCustomElement}

package/dist/components/ds-action-list-group-title.js

@@ -1,43 +1 @@
-import { p as proxyCustomElement, H, h } from './p-GalXVdFP.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { i as idGenerator } from './p-J5Ghj1_T.js';
-
-const dsActionListGroupTitleCss = ".ds-no-style-leak.sc-ds-action-list-group-title *.sc-ds-action-list-group-title{all:unset;box-sizing:border-box;display:block}.sc-ds-action-list-group-title-h{display:block}.ds-action-list-group-title__oSBnIJ__wrapper.sc-ds-action-list-group-title{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block;list-style:none}.ds-action-list-group-title__oSBnIJ.sc-ds-action-list-group-title{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block;padding:var(--ds-spacing-2xSmall) var(--ds-spacing-small) var(--ds-spacing-3xSmall);color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}";
-
-const groupTitleIdGenerator = idGenerator('ds-action-list-group-title');
-const DsActionListGroupTitle$1 = proxyCustomElement(class DsActionListGroupTitle extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    dsTitle;
-    dsId = groupTitleIdGenerator.next().value;
-    render() {
-        const baseClass = cx('ds-action-list-group-title');
-        return (h("li", { key: 'de24d2f9d9a98c0fdbb3550162753f429fa8ebd0', role: "presentation", class: `${baseClass}__wrapper` }, h("span", { key: '7fc645b6bdd183674f804ff2f0800fcb99db2015', id: this.dsId, class: baseClass }, this.dsTitle)));
-    }
-    static get style() { return dsActionListGroupTitleCss; }
-}, [258, "ds-action-list-group-title", {
-        "dsTitle": [1, "ds-title"],
-        "dsId": [1, "ds-id"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-action-list-group-title"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-action-list-group-title":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsActionListGroupTitle$1);
-            }
-            break;
-    } });
-}
-
-const DsActionListGroupTitle = DsActionListGroupTitle$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsActionListGroupTitle, defineCustomElement };
+import{p as t,H as s,h as i,t as o}from"./p-DZOTmLzP.js";import{c as l}from"./p-ByHAbBpc.js";import{i as e}from"./p-J5Ghj1_T.js";const a=e("ds-action-list-group-title"),d=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost()}dsTitle;dsId=a.next().value;render(){const t=l("ds-action-list-group-title");return i("span",{key:"4e452df1a41a7a87a1db538cd0de941ed6aa51cb",id:this.dsId,class:t},this.dsTitle)}static get style(){return".ds-no-style-leak.sc-ds-action-list-group-title *.sc-ds-action-list-group-title{all:unset;box-sizing:border-box;display:block}.sc-ds-action-list-group-title-h{display:block}.ds-action-list-group-title__KmYz6O.sc-ds-action-list-group-title{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block;padding:var(--ds-spacing-2xSmall) var(--ds-spacing-small) var(--ds-spacing-3xSmall);color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}"}},[514,"ds-action-list-group-title",{dsTitle:[1,"ds-title"],dsId:[1,"ds-id"]}]),n=d,r=function(){"undefined"!=typeof customElements&&["ds-action-list-group-title"].forEach((t=>{"ds-action-list-group-title"===t&&(customElements.get(o(t))||customElements.define(o(t),d))}))};export{n as DsActionListGroupTitle,r as defineCustomElement}

package/dist/components/ds-action-list-item.js

@@ -1,135 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-GalXVdFP.js';
-import { c as classNames } from './p-BfTCfPZ1.js';
-import { i as idGenerator, t as transformTagName, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { c as consumeActionMenuContext } from './p-Ccf9CXPb.js';
-import { d as defineCustomElement$2 } from './p-DIxFOW85.js';
-
-const dsActionListItemCss = ".ds-no-style-leak.sc-ds-action-list-item *.sc-ds-action-list-item{all:unset;box-sizing:border-box;display:block}.sc-ds-action-list-item-h{display:block}.ds-action-list-item__oSBnIJ__wrapper.sc-ds-action-list-item{display:block;list-style:none}.ds-action-list-item__oSBnIJ.sc-ds-action-list-item{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:flex;align-items:center;gap:var(--ds-spacing-xSmall);width:100%;padding:var(--ds-spacing-2xSmall) var(--ds-spacing-small);background-color:var(--ds-bgColor-white);border:none;text-align:left;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);box-sizing:border-box;min-height:2.75rem;text-decoration:none}.ds-action-list-item__oSBnIJ.sc-ds-action-list-item:hover:not(:disabled):not(.ds-action-list-item__oSBnIJ--unavailable){background-color:var(--ds-bgColor-white-hover)}.ds-action-list-item__oSBnIJ.sc-ds-action-list-item:active:not(:disabled):not(.ds-action-list-item__oSBnIJ--unavailable){background-color:var(--ds-bgColor-white-active)}.ds-action-list-item__oSBnIJ.sc-ds-action-list-item:focus-visible:not(:disabled){box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1)}.ds-action-list-item__oSBnIJ.sc-ds-action-list-item:disabled,.ds-action-list-item__oSBnIJ.ds-action-list-item__oSBnIJ--disabled.sc-ds-action-list-item{color:var(--ds-textColor-disabled-onLight)}.ds-action-list-item__oSBnIJ.ds-action-list-item__oSBnIJ--unavailable.sc-ds-action-list-item{color:var(--ds-textColor-secondary)}.ds-action-list-item__oSBnIJ.ds-action-list-item__oSBnIJ--unavailable.sc-ds-action-list-item .ds-action-list-item__oSBnIJ__checkbox--checked.sc-ds-action-list-item{color:var(--ds-textColor-secondary)}.ds-action-list-item__oSBnIJ.ds-action-list-item__oSBnIJ--unavailable.sc-ds-action-list-item .ds-action-list-item__oSBnIJ__description.sc-ds-action-list-item{color:var(--ds-textColor-attention)}.ds-action-list-item__oSBnIJ.ds-action-list-item__oSBnIJ--action-danger.sc-ds-action-list-item{color:var(--ds-textColor-danger)}.ds-action-list-item__oSBnIJ.ds-action-list-item__oSBnIJ--action-danger.sc-ds-action-list-item:hover:not(:disabled):not(.ds-action-list-item__oSBnIJ--unavailable){background-color:var(--ds-bgColor-danger)}.ds-action-list-item__oSBnIJ.ds-action-list-item__oSBnIJ--action-danger.sc-ds-action-list-item:active:not(:disabled):not(.ds-action-list-item__oSBnIJ--unavailable){background-color:var(--ds-bgColor-danger-hover)}.ds-action-list-item__oSBnIJ.ds-action-list-item__oSBnIJ--action-danger.sc-ds-action-list-item:disabled,.ds-action-list-item__oSBnIJ.ds-action-list-item__oSBnIJ--action-danger.ds-action-list-item__oSBnIJ--disabled.sc-ds-action-list-item{color:var(--ds-textColor-disabled-onLight)}.ds-action-list-item__oSBnIJ__icon.sc-ds-action-list-item{flex-shrink:0;display:flex;align-items:center;justify-content:center}.ds-action-list-item__oSBnIJ__indent.sc-ds-action-list-item{flex-shrink:0;width:1.25rem}.ds-action-list-item__oSBnIJ__content.sc-ds-action-list-item{display:flex;flex-direction:column;flex:1;min-width:0}.ds-action-list-item__oSBnIJ__label.sc-ds-action-list-item{display:block}.ds-action-list-item__oSBnIJ__description.sc-ds-action-list-item{display:block;color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-action-list-item__oSBnIJ__selector.sc-ds-action-list-item{flex-shrink:0;width:1.25rem;display:flex;align-items:center;justify-content:center;visibility:hidden}.ds-action-list-item__oSBnIJ__selector.ds-action-list-item__oSBnIJ__selector--visible.sc-ds-action-list-item{visibility:visible}.ds-action-list-item__oSBnIJ__checkbox.sc-ds-action-list-item{flex-shrink:0;color:var(--ds-iconColor-neutral)}.ds-action-list-item__oSBnIJ__checkbox--checked.sc-ds-action-list-item{color:var(--ds-iconColor-primary)}[disabled].sc-ds-action-list-item-h .ds-action-list-item__oSBnIJ__selector--visible.sc-ds-action-list-item,button.sc-ds-action-list-item:disabled .ds-action-list-item__oSBnIJ__selector--visible.sc-ds-action-list-item{color:var(--ds-textColor-disabled-onLight)}button.sc-ds-action-list-item:disabled .ds-action-list-item__oSBnIJ__checkbox.sc-ds-action-list-item,button.sc-ds-action-list-item:disabled .ds-action-list-item__oSBnIJ__checkbox--checked.sc-ds-action-list-item{color:var(--ds-textColor-disabled-onLight)}";
-
-const actionListItemIdGenerator = idGenerator('ds-action-list-item');
-const DsActionListItem$1 = proxyCustomElement(class DsActionListItem extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.dsSelect = createEvent(this, "dsSelect");
-    }
-    get el() { return this; }
-    buttonEl;
-    dsId = actionListItemIdGenerator.next().value;
-    dsVariant = 'action';
-    dsLabel;
-    dsDescription;
-    dsIcon;
-    dsDisabled = false;
-    dsUnavailable = false;
-    dsSelected = false;
-    dsCloseOnSelect = true;
-    dsIndented = false;
-    dsSelect;
-    async setFocus() {
-        this.buttonEl?.focus();
-    }
-    async setTabIndex(value) {
-        if (this.buttonEl)
-            this.buttonEl.tabIndex = value;
-    }
-    get role() {
-        switch (this.dsVariant) {
-            case 'single-select':
-                return 'menuitemradio';
-            case 'multi-select':
-                return 'menuitemcheckbox';
-            default:
-                return 'menuitem';
-        }
-    }
-    handleSelect() {
-        if (this.dsDisabled || this.dsUnavailable)
-            return;
-        const nextSelected = this.dsVariant === 'multi-select' ? !this.dsSelected : true;
-        this.dsSelect.emit({
-            id: this.dsId,
-            label: this.dsLabel,
-            selected: nextSelected,
-            variant: this.dsVariant,
-        });
-        if (this.dsVariant !== 'multi-select' && (this.dsVariant !== 'single-select' || this.dsCloseOnSelect)) {
-            const context = consumeActionMenuContext(this.el);
-            context?.closeMenu();
-        }
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.handleSelect();
-        }
-    }
-    renderIcon(baseClass) {
-        if (!this.dsIcon || this.dsVariant === 'multi-select')
-            return null;
-        const DsIcon = transformTagName('ds-icon', 'ds-action-list-item', this.el);
-        return h(DsIcon, { class: `${baseClass}__icon`, dsName: this.dsIcon, dsSize: "1.25rem", "aria-hidden": "true" });
-    }
-    renderSelector(baseClass) {
-        if (this.dsVariant === 'single-select') {
-            const DsIcon = transformTagName('ds-icon', 'ds-action-list-item', this.el);
-            return (h("span", { class: classNames(`${baseClass}__selector`, { [`${baseClass}__selector--visible`]: this.dsSelected }), "aria-hidden": "true" }, this.dsSelected && h(DsIcon, { dsName: "check", dsSize: "1.25rem" })));
-        }
-        if (this.dsVariant === 'multi-select') {
-            const DsIcon = transformTagName('ds-icon', 'ds-action-list-item', this.el);
-            return (h(DsIcon, { class: classNames(`${baseClass}__checkbox`, { [`${baseClass}__checkbox--checked`]: this.dsSelected }), dsName: this.dsSelected ? 'check_box_fill' : 'check_box_outline_blank', dsSize: "1.25rem", "aria-hidden": "true" }));
-        }
-        return null;
-    }
-    render() {
-        const baseClass = cx('ds-action-list-item');
-        const showIndent = this.dsIndented && !this.dsIcon && this.dsVariant !== 'multi-select';
-        const classes = classNames(baseClass, `${baseClass}--${this.dsVariant}`, {
-            [`${baseClass}--disabled`]: this.dsDisabled,
-            [`${baseClass}--unavailable`]: this.dsUnavailable,
-            [`${baseClass}--indented`]: showIndent,
-        });
-        return (h("li", { key: '70090838922a7c4b302464ebb1092bb0b603ea68', role: "presentation", class: `${baseClass}__wrapper` }, h("button", { key: 'da8b47e41f913ba96930a7d3851f5d725709539a', ref: el => (this.buttonEl = el), class: classes, role: this.role, "aria-checked": this.dsVariant === 'single-select' || this.dsVariant === 'multi-select' ? (this.dsSelected ? 'true' : 'false') : undefined, "aria-disabled": this.dsDisabled || this.dsUnavailable ? 'true' : undefined, disabled: this.dsDisabled, tabIndex: -1, onClick: () => this.handleSelect() }, this.renderSelector(baseClass), showIndent && h("span", { key: 'd0b35011b122c1dce028f794fb5266decb51fdd2', class: `${baseClass}__indent`, "aria-hidden": "true" }), this.renderIcon(baseClass), h("span", { key: 'cfc5dfb1c6a7cf3b29a99bde27ac97598ed56c30', class: `${baseClass}__content` }, h("span", { key: 'ac385d6ba565a10710e3e93f2edcc528249a940c', class: `${baseClass}__label` }, this.dsLabel), this.dsDescription && h("span", { key: '86bda4ea7922368fecfc70ee874e60f5f1e58267', class: `${baseClass}__description` }, this.dsDescription)))));
-    }
-    static get style() { return dsActionListItemCss; }
-}, [258, "ds-action-list-item", {
-        "dsId": [1, "ds-id"],
-        "dsVariant": [1, "ds-variant"],
-        "dsLabel": [1, "ds-label"],
-        "dsDescription": [1, "ds-description"],
-        "dsIcon": [1, "ds-icon"],
-        "dsDisabled": [4, "ds-disabled"],
-        "dsUnavailable": [4, "ds-unavailable"],
-        "dsSelected": [1028, "ds-selected"],
-        "dsCloseOnSelect": [4, "ds-close-on-select"],
-        "dsIndented": [1028, "ds-indented"],
-        "setFocus": [64],
-        "setTabIndex": [64]
-    }, [[0, "keydown", "handleKeyDown"]]]);
-declareComponentDependencies([h("ds-icon", { dsName: "" })]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-action-list-item", "ds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-action-list-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsActionListItem$1);
-            }
-            break;
-        case "ds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsActionListItem = DsActionListItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsActionListItem, defineCustomElement };
+import{p as t,H as i,c as s,h as e,t as o}from"./p-DZOTmLzP.js";import{c as d}from"./p-BfTCfPZ1.js";import{i as a,t as l,d as c}from"./p-J5Ghj1_T.js";import{c as n}from"./p-ByHAbBpc.js";import{c as r}from"./p-Ccf9CXPb.js";import{d as m}from"./p-CeglrwZj.js";const _=a("ds-action-list-item"),b=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.dsSelect=s(this,"dsSelect",7)}get el(){return this}buttonEl;dsId=_.next().value;dsVariant="action";dsLabel;dsDescription;dsIcon;dsDisabled=!1;dsUnavailable=!1;dsSelected=!1;dsCloseOnSelect=!0;dsIndented=!1;dsSelect;tabIndex=-1;async setFocus(){this.buttonEl?.focus()}async setTabIndex(t){this.tabIndex=t}get role(){switch(this.dsVariant){case"single-select":return"menuitemradio";case"multi-select":return"menuitemcheckbox";default:return"menuitem"}}handleSelect(){if(!this.dsDisabled&&!this.dsUnavailable&&(this.dsSelect.emit({id:this.dsId,label:this.dsLabel,selected:"multi-select"!==this.dsVariant||!this.dsSelected,variant:this.dsVariant}),"multi-select"!==this.dsVariant&&("single-select"!==this.dsVariant||this.dsCloseOnSelect))){const t=r(this.el);t?.closeMenu()}}handleKeyDown(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleSelect())}renderIcon(t){if(!this.dsIcon||"multi-select"===this.dsVariant)return null;const i=l("ds-icon","ds-action-list-item",this.el);return e(i,{class:t+"__icon",dsName:this.dsIcon,dsSize:"1.25rem"})}renderSelector(t){if("single-select"===this.dsVariant){const i=l("ds-icon","ds-action-list-item",this.el);return e("span",{class:d(t+"__selector",{[t+"__selector--visible"]:this.dsSelected}),"aria-hidden":"true"},this.dsSelected&&e(i,{dsName:"check",dsSize:"1.25rem"}))}if("multi-select"===this.dsVariant){const i=l("ds-icon","ds-action-list-item",this.el);return e(i,{class:d(t+"__checkbox",{[t+"__checkbox--checked"]:this.dsSelected}),dsName:this.dsSelected?"check_box_fill":"check_box_outline_blank",dsSize:"1.25rem"})}return null}render(){const{role:t}=this,i=n("ds-action-list-item"),s=this.dsIndented&&!this.dsIcon&&"multi-select"!==this.dsVariant,o=d(i,`${i}--${this.dsVariant}`,{[i+"--disabled"]:this.dsDisabled,[i+"--unavailable"]:this.dsUnavailable,[i+"--indented"]:s});return e("button",{key:"6e7ddd404aded454f0d4921ba8e37d73e06673d6",ref:t=>this.buttonEl=t,class:o,role:t,"aria-checked":"menuitemcheckbox"===t||"menuitemradio"===t?this.dsSelected?"true":"false":void 0,"aria-disabled":this.dsDisabled||this.dsUnavailable?"true":void 0,disabled:this.dsDisabled,tabIndex:this.tabIndex,onClick:()=>this.handleSelect()},this.renderSelector(i),s&&e("span",{key:"8442451065fe3204f89d6d1e73643978197ac176",class:i+"__indent","aria-hidden":"true"}),this.renderIcon(i),e("span",{key:"8fe826f125e3f854b30b4bf6c11fee71f0232835",class:i+"__content"},e("span",{key:"7477b91f881bdcc910313ead5e94942213a1e206",class:i+"__label"},this.dsLabel),this.dsDescription&&e("span",{key:"1a666e65603b5a1f274673e702e39b3323e63900",class:i+"__description"},this.dsDescription)))}static get style(){return".ds-no-style-leak.sc-ds-action-list-item *.sc-ds-action-list-item{all:unset;box-sizing:border-box;display:block}.sc-ds-action-list-item-h{display:contents}.ds-action-list-item__KmYz6O.sc-ds-action-list-item{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:flex;align-items:center;gap:var(--ds-spacing-xSmall);width:100%;padding:var(--ds-spacing-2xSmall) var(--ds-spacing-small);background-color:var(--ds-bgColor-white);border:none;text-align:left;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);box-sizing:border-box;min-height:2.75rem;text-decoration:none}.ds-action-list-item__KmYz6O.sc-ds-action-list-item:hover:not(:disabled):not(.ds-action-list-item__KmYz6O--unavailable){background-color:var(--ds-bgColor-white-hover)}.ds-action-list-item__KmYz6O.sc-ds-action-list-item:active:not(:disabled):not(.ds-action-list-item__KmYz6O--unavailable){background-color:var(--ds-bgColor-white-active)}.ds-action-list-item__KmYz6O.sc-ds-action-list-item:focus-visible:not(:disabled){box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1)}.ds-action-list-item__KmYz6O.sc-ds-action-list-item:disabled,.ds-action-list-item__KmYz6O.ds-action-list-item__KmYz6O--disabled.sc-ds-action-list-item{color:var(--ds-textColor-disabled-onLight)}.ds-action-list-item__KmYz6O.ds-action-list-item__KmYz6O--unavailable.sc-ds-action-list-item{color:var(--ds-textColor-secondary)}.ds-action-list-item__KmYz6O.ds-action-list-item__KmYz6O--unavailable.sc-ds-action-list-item .ds-action-list-item__KmYz6O__checkbox--checked.sc-ds-action-list-item{color:var(--ds-textColor-secondary)}.ds-action-list-item__KmYz6O.ds-action-list-item__KmYz6O--unavailable.sc-ds-action-list-item .ds-action-list-item__KmYz6O__description.sc-ds-action-list-item{color:var(--ds-textColor-attention)}.ds-action-list-item__KmYz6O.ds-action-list-item__KmYz6O--action-danger.sc-ds-action-list-item{color:var(--ds-textColor-danger)}.ds-action-list-item__KmYz6O.ds-action-list-item__KmYz6O--action-danger.sc-ds-action-list-item:hover:not(:disabled):not(.ds-action-list-item__KmYz6O--unavailable){background-color:var(--ds-bgColor-danger)}.ds-action-list-item__KmYz6O.ds-action-list-item__KmYz6O--action-danger.sc-ds-action-list-item:active:not(:disabled):not(.ds-action-list-item__KmYz6O--unavailable){background-color:var(--ds-bgColor-danger-hover)}.ds-action-list-item__KmYz6O.ds-action-list-item__KmYz6O--action-danger.sc-ds-action-list-item:disabled,.ds-action-list-item__KmYz6O.ds-action-list-item__KmYz6O--action-danger.ds-action-list-item__KmYz6O--disabled.sc-ds-action-list-item{color:var(--ds-textColor-disabled-onLight)}.ds-action-list-item__KmYz6O__icon.sc-ds-action-list-item{flex-shrink:0;display:flex;align-items:center;justify-content:center}.ds-action-list-item__KmYz6O__indent.sc-ds-action-list-item{flex-shrink:0;width:1.25rem}.ds-action-list-item__KmYz6O__content.sc-ds-action-list-item{display:flex;flex-direction:column;flex:1;min-width:0}.ds-action-list-item__KmYz6O__label.sc-ds-action-list-item{display:block}.ds-action-list-item__KmYz6O__description.sc-ds-action-list-item{display:block;color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-action-list-item__KmYz6O__selector.sc-ds-action-list-item{flex-shrink:0;width:1.25rem;display:flex;align-items:center;justify-content:center;visibility:hidden}.ds-action-list-item__KmYz6O__selector.ds-action-list-item__KmYz6O__selector--visible.sc-ds-action-list-item{visibility:visible}.ds-action-list-item__KmYz6O__checkbox.sc-ds-action-list-item{flex-shrink:0;color:var(--ds-iconColor-neutral)}.ds-action-list-item__KmYz6O__checkbox--checked.sc-ds-action-list-item{color:var(--ds-iconColor-primary)}[disabled].sc-ds-action-list-item-h .ds-action-list-item__KmYz6O__selector--visible.sc-ds-action-list-item,button.sc-ds-action-list-item:disabled .ds-action-list-item__KmYz6O__selector--visible.sc-ds-action-list-item{color:var(--ds-textColor-disabled-onLight)}button.sc-ds-action-list-item:disabled .ds-action-list-item__KmYz6O__checkbox.sc-ds-action-list-item,button.sc-ds-action-list-item:disabled .ds-action-list-item__KmYz6O__checkbox--checked.sc-ds-action-list-item{color:var(--ds-textColor-disabled-onLight)}"}},[514,"ds-action-list-item",{dsId:[1,"ds-id"],dsVariant:[1,"ds-variant"],dsLabel:[1,"ds-label"],dsDescription:[1,"ds-description"],dsIcon:[1,"ds-icon"],dsDisabled:[4,"ds-disabled"],dsUnavailable:[4,"ds-unavailable"],dsSelected:[1028,"ds-selected"],dsCloseOnSelect:[4,"ds-close-on-select"],dsIndented:[1028,"ds-indented"],tabIndex:[32],setFocus:[64],setTabIndex:[64]},[[0,"keydown","handleKeyDown"]]]);c([e("ds-icon",{dsName:""})]);const h=b,u=function(){"undefined"!=typeof customElements&&["ds-action-list-item","ds-icon"].forEach((t=>{switch(t){case"ds-action-list-item":customElements.get(o(t))||customElements.define(o(t),b);break;case"ds-icon":customElements.get(o(t))||m()}}))};export{h as DsActionListItem,u as defineCustomElement}

package/dist/components/ds-action-list.js

@@ -1,262 +1 @@
-import { p as proxyCustomElement, H, h } from './p-GalXVdFP.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { t as transformTagName } from './p-J5Ghj1_T.js';
-import { c as consumeActionMenuContext } from './p-Ccf9CXPb.js';
-import { g as getLanguage } from './p-B71giUZh.js';
-
-const actionListGroupLabel = () => {
-    switch (getLanguage()) {
-        case 'fi':
-            return 'Toiminnallisuudet';
-        case 'sv':
-            return 'Åtgärder';
-        default:
-            return 'Actions';
-    }
-};
-const actionListGroupLabelSingleSelect = () => {
-    switch (getLanguage()) {
-        case 'fi':
-            return 'Valitse yksi';
-        case 'sv':
-            return 'Välj ett';
-        default:
-            return 'Choose one';
-    }
-};
-const actionListGroupLabelMultiSelect = () => {
-    switch (getLanguage()) {
-        case 'fi':
-            return 'Monivalinta';
-        case 'sv':
-            return 'Välj flera';
-        default:
-            return 'Choose multiple';
-    }
-};
-
-const dsActionListCss = ".ds-no-style-leak.sc-ds-action-list *.sc-ds-action-list{all:unset;box-sizing:border-box;display:block}.sc-ds-action-list-h{display:block}.ds-action-list__oSBnIJ.sc-ds-action-list{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);list-style:none;margin:0;padding:0}";
-
-const DsActionList$1 = proxyCustomElement(class DsActionList extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    get el() { return this; }
-    isStandalone = false;
-    componentDidLoad() {
-        this.isStandalone = !consumeActionMenuContext(this.el);
-        this.updateIndentation();
-        if (this.isStandalone) {
-            this.updateRovingTabindex();
-        }
-        if (!this.isStandalone) {
-            this.applyGroupTitleLabel();
-        }
-        const slot = this.el.querySelector('ul')?.querySelector('slot') ?? this.el.querySelector('slot');
-        if (slot) {
-            slot.addEventListener('slotchange', () => {
-                this.updateIndentation();
-                if (this.isStandalone) {
-                    this.updateRovingTabindex();
-                }
-            });
-        }
-    }
-    applyGroupTitleLabel() {
-        const listEl = this.el.querySelector('ul');
-        if (!listEl)
-            return;
-        const titleTag = transformTagName('ds-action-list-group-title', 'ds-action-list', this.el);
-        const titleEl = this.el.querySelector(titleTag);
-        if (titleEl) {
-            const span = titleEl.querySelector('[id]');
-            if (span?.id) {
-                listEl.removeAttribute('aria-label');
-                listEl.setAttribute('aria-labelledby', span.id);
-            }
-            return;
-        }
-        const itemTag = transformTagName('ds-action-list-item', 'ds-action-list', this.el);
-        const firstItem = this.el.querySelector(itemTag);
-        const variant = firstItem?.dsVariant ?? firstItem?.getAttribute('ds-variant') ?? 'action';
-        let label;
-        if (variant === 'single-select') {
-            label = actionListGroupLabelSingleSelect();
-        }
-        else if (variant === 'multi-select') {
-            label = actionListGroupLabelMultiSelect();
-        }
-        else {
-            label = actionListGroupLabel();
-        }
-        listEl.removeAttribute('aria-labelledby');
-        listEl.setAttribute('aria-label', label);
-    }
-    handleLanguageChange() {
-        if (!this.isStandalone) {
-            this.applyGroupTitleLabel();
-        }
-    }
-    getFocusableItems() {
-        return this.getFocusableItemsFromEl(this.el);
-    }
-    getFocusableItemsFromEl(el) {
-        const itemTag = transformTagName('ds-action-list-item', 'ds-action-list', this.el);
-        return Array.from(el.querySelectorAll(itemTag)).filter(item => !item.dsDisabled);
-    }
-    getSiblingLists() {
-        const parent = this.el.parentElement;
-        if (!parent)
-            return [this.el];
-        const listTag = transformTagName('ds-action-list', 'ds-action-list', this.el);
-        return Array.from(parent.querySelectorAll(`:scope > ${listTag}`));
-    }
-    updateIndentation() {
-        const itemTag = transformTagName('ds-action-list-item', 'ds-action-list', this.el);
-        const allItems = Array.from(this.el.querySelectorAll(`:scope > ${itemTag}`));
-        const hasIcon = allItems.some(item => item.dsIcon && item.dsVariant !== 'multi-select');
-        allItems.forEach(item => {
-            if (item.dsVariant !== 'multi-select') {
-                item.dsIndented = hasIcon && !item.dsIcon;
-            }
-        });
-    }
-    updateRovingTabindex(activeItem) {
-        const items = this.getFocusableItems();
-        const target = activeItem ?? items[0];
-        items.forEach(item => {
-            item.setTabIndex?.(item === target ? 0 : -1);
-        });
-    }
-    handleItemSelect(event) {
-        const { variant, selected } = event.detail;
-        const itemTag = transformTagName('ds-action-list-item', 'ds-action-list', this.el);
-        const allItems = Array.from(this.el.querySelectorAll(itemTag));
-        if (variant === 'single-select') {
-            allItems.forEach(item => {
-                item.dsSelected = item === event.target ? selected : false;
-            });
-        }
-        else if (variant === 'multi-select') {
-            const target = allItems.find(item => item === event.target);
-            if (target)
-                target.dsSelected = selected;
-        }
-    }
-    handleKeyDown(event) {
-        const items = this.getFocusableItems();
-        if (items.length === 0)
-            return;
-        const activeEl = document.activeElement;
-        const currentIndex = items.findIndex(item => item.contains(activeEl));
-        switch (event.key) {
-            case 'ArrowDown': {
-                event.preventDefault();
-                if (currentIndex < items.length - 1) {
-                    items[currentIndex + 1].setFocus?.();
-                    if (this.isStandalone)
-                        this.updateRovingTabindex(items[currentIndex + 1]);
-                }
-                else if (!this.isStandalone) {
-                    const lists = this.getSiblingLists();
-                    const myIndex = lists.indexOf(this.el);
-                    const nextList = lists[myIndex + 1] ?? lists[0];
-                    this.getFocusableItemsFromEl(nextList)[0]?.setFocus?.();
-                }
-                else {
-                    items[0].setFocus?.();
-                    this.updateRovingTabindex(items[0]);
-                }
-                break;
-            }
-            case 'ArrowUp': {
-                event.preventDefault();
-                if (currentIndex > 0) {
-                    items[currentIndex - 1].setFocus?.();
-                    if (this.isStandalone)
-                        this.updateRovingTabindex(items[currentIndex - 1]);
-                }
-                else if (!this.isStandalone) {
-                    const lists = this.getSiblingLists();
-                    const myIndex = lists.indexOf(this.el);
-                    const prevList = lists[myIndex - 1] ?? lists[lists.length - 1];
-                    const prevItems = this.getFocusableItemsFromEl(prevList);
-                    prevItems[prevItems.length - 1]?.setFocus?.();
-                }
-                else {
-                    items[items.length - 1].setFocus?.();
-                    this.updateRovingTabindex(items[items.length - 1]);
-                }
-                break;
-            }
-            case 'Home': {
-                event.preventDefault();
-                if (!this.isStandalone) {
-                    const firstList = this.getSiblingLists()[0];
-                    this.getFocusableItemsFromEl(firstList)[0]?.setFocus?.();
-                }
-                else {
-                    items[0].setFocus?.();
-                    this.updateRovingTabindex(items[0]);
-                }
-                break;
-            }
-            case 'End': {
-                event.preventDefault();
-                if (!this.isStandalone) {
-                    const lists = this.getSiblingLists();
-                    const lastListItems = this.getFocusableItemsFromEl(lists[lists.length - 1]);
-                    lastListItems[lastListItems.length - 1]?.setFocus?.();
-                }
-                else {
-                    items[items.length - 1].setFocus?.();
-                    this.updateRovingTabindex(items[items.length - 1]);
-                }
-                break;
-            }
-            default: {
-                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-                    event.preventDefault();
-                    const char = event.key.toLowerCase();
-                    const allItems = this.isStandalone
-                        ? this.getFocusableItems()
-                        : [].concat(...this.getSiblingLists().map(l => this.getFocusableItemsFromEl(l)));
-                    const activeEl = document.activeElement;
-                    const currentIndex = allItems.findIndex(item => item.contains(activeEl));
-                    const searchOrder = [...allItems.slice(currentIndex + 1), ...allItems.slice(0, currentIndex + 1)];
-                    const match = searchOrder.find(item => {
-                        const label = item.dsLabel ?? item.getAttribute('ds-label') ?? '';
-                        return label.trim().toLowerCase().startsWith(char);
-                    });
-                    match?.setFocus?.();
-                }
-            }
-        }
-    }
-    render() {
-        const baseClass = cx('ds-action-list');
-        return (h("ul", { key: '7867e5dfde937caf074e98e1a79850fff70c8558', role: this.isStandalone ? 'presentation' : 'group', class: baseClass }, h("slot", { key: 'd756ad50a5517b8870489e320f53195eff3358bf' })));
-    }
-    static get style() { return dsActionListCss; }
-}, [262, "ds-action-list", undefined, [[16, "dsLanguageChange", "handleLanguageChange"], [0, "dsSelect", "handleItemSelect"], [0, "keydown", "handleKeyDown"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-action-list"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-action-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsActionList$1);
-            }
-            break;
-    } });
-}
-
-const DsActionList = DsActionList$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsActionList, defineCustomElement };
+import{p as t,H as s,h as i,d as e,t as n}from"./p-DZOTmLzP.js";import{c as a}from"./p-ByHAbBpc.js";import{t as l,a as o}from"./p-J5Ghj1_T.js";import{g as c}from"./p-CHu0W_4n.js";const r=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost()}get el(){return this}dsRole="group";ariaLabel;ariaLabelledby;get isStandalone(){return"menu"===this.dsRole}slotChangeHandler=()=>{this.updateIndentation(),this.isStandalone&&this.updateRovingTabindex(),this.updateAriaLabelling()};componentWillLoad(){this.updateAriaLabelling()}componentDidLoad(){this.updateIndentation(),this.isStandalone&&this.updateRovingTabindex();const t=this.el.querySelector("slot");t?.addEventListener("slotchange",this.slotChangeHandler)}disconnectedCallback(){const t=this.el.querySelector("slot");t?.removeEventListener("slotchange",this.slotChangeHandler)}updateAriaLabelling(){const t=l("ds-action-list-group-title","ds-action-list",this.el),s=this.el.querySelector(t);if(s){const t=s.querySelector("[id]");if(t?.id)return this.ariaLabel=void 0,void(this.ariaLabelledby=t.id)}const i=l("ds-action-list-item","ds-action-list",this.el),e=this.el.querySelector(i),n=e?.dsVariant??e?.getAttribute("ds-variant")??"action";this.ariaLabel="single-select"===n?(()=>{switch(c()){case"fi":return"Valitse yksi";case"sv":return"Välj ett";default:return"Choose one"}})():"multi-select"===n?(()=>{switch(c()){case"fi":return"Monivalinta";case"sv":return"Välj flera";default:return"Choose multiple"}})():(()=>{switch(c()){case"fi":return"Toiminnallisuudet";case"sv":return"Åtgärder";default:return"Actions"}})(),this.ariaLabelledby=void 0}handleLanguageChange(){this.updateAriaLabelling()}getFocusableItems(){return this.getFocusableItemsFromEl(this.el)}getFocusableItemsFromEl(t){const s=l("ds-action-list-item","ds-action-list",this.el);return Array.from(t.querySelectorAll(s)).filter((t=>!t.dsDisabled))}getSiblingLists(){const t=this.el.parentElement;if(!t)return[this.el];const s=l("ds-action-list","ds-action-list",this.el);return Array.from(t.querySelectorAll(":scope > "+s))}updateIndentation(){const t=l("ds-action-list-item","ds-action-list",this.el),s=Array.from(this.el.querySelectorAll(":scope > "+t)),i=s.some((t=>t.dsIcon&&"multi-select"!==t.dsVariant));s.forEach((t=>{"multi-select"!==t.dsVariant&&(t.dsIndented=i&&!t.dsIcon)}))}updateRovingTabindex(t){const s=this.getFocusableItems(),i=t??s[0];s.forEach((t=>{t.setTabIndex?.(t===i?0:-1)}))}handleItemSelect(t){const{variant:s,selected:i}=t.detail,e=l("ds-action-list-item","ds-action-list",this.el),n=Array.from(this.el.querySelectorAll(e));if("single-select"===s)n.forEach((s=>{s.dsSelected=s===t.target&&i}));else if("multi-select"===s){const s=n.find((s=>s===t.target));s&&(s.dsSelected=i)}}handleKeyDown(t){const s=this.getFocusableItems();if(0===s.length)return;const i=document.activeElement,e=s.findIndex((t=>t.contains(i)));switch(t.key){case"ArrowDown":if(t.preventDefault(),e<s.length-1)s[e+1].setFocus?.(),this.isStandalone&&this.updateRovingTabindex(s[e+1]);else if(this.isStandalone)s[0].setFocus?.(),this.updateRovingTabindex(s[0]);else{const t=this.getSiblingLists(),s=t.indexOf(this.el),i=t[s+1]??t[0];this.getFocusableItemsFromEl(i)[0]?.setFocus?.()}break;case"ArrowUp":if(t.preventDefault(),e>0)s[e-1].setFocus?.(),this.isStandalone&&this.updateRovingTabindex(s[e-1]);else if(this.isStandalone)s[s.length-1].setFocus?.(),this.updateRovingTabindex(s[s.length-1]);else{const t=this.getSiblingLists(),s=t.indexOf(this.el),i=this.getFocusableItemsFromEl(t[s-1]??t[t.length-1]);i[i.length-1]?.setFocus?.()}break;case"Home":if(t.preventDefault(),this.isStandalone)s[0].setFocus?.(),this.updateRovingTabindex(s[0]);else{const t=this.getSiblingLists()[0];this.getFocusableItemsFromEl(t)[0]?.setFocus?.()}break;case"End":if(t.preventDefault(),this.isStandalone)s[s.length-1].setFocus?.(),this.updateRovingTabindex(s[s.length-1]);else{const t=this.getSiblingLists(),s=this.getFocusableItemsFromEl(t[t.length-1]);s[s.length-1]?.setFocus?.()}break;default:if(1===t.key.length&&!t.ctrlKey&&!t.metaKey&&!t.altKey){t.preventDefault();const s=t.key.toLowerCase(),i=this.isStandalone?this.getFocusableItems():[].concat(...this.getSiblingLists().map((t=>this.getFocusableItemsFromEl(t)))),e=document.activeElement,n=i.findIndex((t=>t.contains(e))),a=[...i.slice(n+1),...i.slice(0,n+1)].find((t=>(t.dsLabel??t.getAttribute("ds-label")??"").trim().toLowerCase().startsWith(s)));a?.setFocus?.()}}}render(){const t=a("ds-action-list");return i(e,{key:"416359e7c52d95866c31b064c1e28b905f39749f",class:t,role:this.dsRole,...o("aria-label",this.ariaLabel),...o("aria-labelledby",this.ariaLabelledby)},i("slot",{key:"23b828f825c333f6230f1d03dac7eead9c6ed3de"}))}static get style(){return".ds-no-style-leak.sc-ds-action-list *.sc-ds-action-list{all:unset;box-sizing:border-box;display:block}.ds-action-list__KmYz6O.sc-ds-action-list{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block;list-style:none;margin:0;padding:0}"}},[774,"ds-action-list",{dsRole:[1,"ds-role"],ariaLabel:[32],ariaLabelledby:[32]},[[16,"dsLanguageChange","handleLanguageChange"],[0,"dsSelect","handleItemSelect"],[0,"keydown","handleKeyDown"]]]),d=r,h=function(){"undefined"!=typeof customElements&&["ds-action-list"].forEach((t=>{"ds-action-list"===t&&(customElements.get(n(t))||customElements.define(n(t),r))}))};export{d as DsActionList,h as defineCustomElement}