@getflip/swirl-components 0.529.0 → 0.530.0

package/dist/cjs/swirl-action-list_2.cjs.entry.js

@@ -102,7 +102,7 @@ const SwirlActionList = class {
 };
 SwirlActionList.style = swirlActionListCss();
 
-const swirlActionListItemCss = () => `:host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-state-hovered);--swirl-tag-background-default:var(--s-state-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-state-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.action-list-item:active{background-color:var(--s-translucent-low-pressed)}.action-list-item:disabled{cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}`;
+const swirlActionListItemCss = () => `:host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover:not(.action-list-item--aria-disabled){background-color:var(--s-state-hovered);--swirl-tag-background-default:var(--s-state-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-state-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.action-list-item:active:not(.action-list-item--aria-disabled){background-color:var(--s-translucent-low-pressed)}.action-list-item:disabled,.action-list-item.action-list-item--aria-disabled{cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description,.action-list-item.action-list-item--aria-disabled .action-list-item__label,.action-list-item.action-list-item--aria-disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon,.action-list-item.action-list-item--aria-disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled):not(.action-list-item--aria-disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled):not(.action-list-item--aria-disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}`;
 
 const SwirlActionListItem = class {
     constructor(hostRef) {
@@ -111,15 +111,35 @@ const SwirlActionListItem = class {
         this.size = "m";
         this.truncateLabel = true;
         this.mediaQueryUnsubscribe = () => { };
+        this.onClick = (event) => {
+            if (this.swirlAriaDisabled) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
     }
     componentDidLoad() {
         this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
             this.forceIconProps(isDesktop);
         });
+        this.updateAriaDescribedByElements();
     }
     disconnectedCallback() {
         this.mediaQueryUnsubscribe();
     }
+    updateAriaDescribedByElements() {
+        if (!this.buttonEl) {
+            return;
+        }
+        const root = this.el.getRootNode();
+        const elements = (this.swirlAriaDescribedby ?? "")
+            .split(/\s+/)
+            .filter(Boolean)
+            .map((id) => root.getElementById?.(id))
+            .filter((element) => Boolean(element));
+        this.buttonEl.ariaDescribedByElements =
+            elements.length > 0 ? elements : null;
+    }
     forceIconProps(smallIcon) {
         const icon = this.iconEl?.children[0];
         const suffix = this.suffixEl?.children[0];
@@ -135,11 +155,18 @@ const SwirlActionListItem = class {
         const showBadge = Boolean(this.badge);
         const showIconBadge = Boolean(this.iconBadge);
         const showSuffixSlot = Boolean(this.el.querySelector('[slot="suffix"]'));
-        const showSuffix = (Boolean(this.suffix) || showSuffixSlot) && !this.disabled;
-        const className = index$1.classnames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
-        return (index.h(index.Host, { key: 'a8ec31c9d8234291c8379e9b3521f91c176e811e' }, index.h("button", { key: '3018e2f041a84b321b9cef388c85c59afa518b79', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, index.h("slot", { key: '34bebbac07562f76eb29e1b93900019a75143add', name: "avatar" }), this.icon && (index.h("span", { key: '15b82e7eb50d334254f1f6da7d55cecad4706475', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (index.h("span", { key: '0c4c8fc78fd13d707cb33dab2309c85f97a4e201', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), index.h("span", { key: 'c3c1a34a74a8dfbec8a82cb3fc797ce03e6ddd55', class: "action-list-item__label-container" }, index.h("span", { key: '9626f3a01f7c95da947b7665e7c97a9542f48cfb', class: "action-list-item__label", style: { whiteSpace: this.truncateLabel ? "nowrap" : "normal" } }, this.label), this.description && (index.h("span", { key: 'e002430aa42252b68c1550af4d2c75dd744f78ee', class: "action-list-item__description" }, this.description))), showBadge && (index.h("span", { key: '1aca4916c0f3fca1601c49db73ae72516520572f', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (index.h("span", { key: 'c355f7123d3d5deba0a72ca3ee1142ef3210d96e', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, index.h("slot", { key: 'd3d6cac336709a2592f637971f0479587cbf0dee', name: "suffix" }))))));
+        const showSuffix = (Boolean(this.suffix) || showSuffixSlot) &&
+            !this.disabled &&
+            !this.swirlAriaDisabled;
+        const className = index$1.classnames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`, { "action-list-item--aria-disabled": this.swirlAriaDisabled });
+        return (index.h(index.Host, { key: '2125fa1f925e009717dce2d081073ef1c0daf3af' }, index.h("button", { key: '70431b881121839eda2ee3b1c1e1735bad5c2dba', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.swirlAriaDisabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, onClick: this.onClick, part: "action-list-item", ref: (el) => (this.buttonEl = el), role: "menuitem", tabIndex: -1, type: "button" }, index.h("slot", { key: '82b824c5a3eba3eca06624e0f39b99dc8b4e817b', name: "avatar" }), this.icon && (index.h("span", { key: 'c39848c4fc802d7fa58283728f825312aca4fcdf', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (index.h("span", { key: '484b34bbc3f458c19888ac1c87225a7b60f263a9', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), index.h("span", { key: '2551812393270a09212a9a362bf2cc8c09464118', class: "action-list-item__label-container" }, index.h("span", { key: 'a4f58fdbec37c14f75ebb011293a9a25ec0ef583', class: "action-list-item__label", style: { whiteSpace: this.truncateLabel ? "nowrap" : "normal" } }, this.label), this.description && (index.h("span", { key: '5e43fa6ad0690a941ace39c669d1caa2aaf56867', class: "action-list-item__description" }, this.description))), showBadge && (index.h("span", { key: 'fc326052681d3a2f916c2766944d142d9250f7a3', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (index.h("span", { key: '5b8d18b728798d044fb109dc1701439f0c5d1387', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, index.h("slot", { key: '360bb09dc29294c10754030304ec80dea385990d', name: "suffix" }))))));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "swirlAriaDescribedby": [{
+                "updateAriaDescribedByElements": 0
+            }]
+    }; }
 };
 SwirlActionListItem.style = swirlActionListItemCss();