npm - @getflip/swirl-components - Versions diffs - 0.394.1 → 0.396.0 - Mend

@getflip/swirl-components 0.394.1 → 0.396.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2048) hide show

package/dist/components/swirl-table-row-group.js CHANGED Viewed

@@ -44,10 +44,10 @@ const SwirlTableRowGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableRo
         const iconType = this.isVisible
             ? "<swirl-icon-expand-less></swirl-icon-expand-less"
             : "<swirl-icon-expand-more></swirl-icon-expand-more";
-        return (h(Host, { key: '4fb4a408031be6c9c5708550f5723d2542fbaa4d', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'a13eb8ce33a11488437cfc5f23afe626edc32ee5', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '8add6e9720dbeed048c163545a300493a05d7d07', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: 'adc0b6d8fd904e35eb1310adbf8a8641a0b75cfd', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: 'd97a376c484a5b55129cfc4af5727ad1d7a40ebe', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '9d485ab66fd05019d5e451289697c286d9c1c665', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '023e467d41b6105b3bacc3fc8c87e9329aaadbf6', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: 'b020c6220d12173c5d4da7049303212eb3eabfd0', class: {
+        return (h(Host, { key: 'adad7412dad236d8bb56639a1acc4690a3760700', class: "table-row-group", role: "rowgroup" }, h("div", { key: '29c9bd2bc56af09e3cac07fefa9bdad17730dbec', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'b53e018d80aba0f389930b825977d27982ba400f', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: '958ed87c78afada9e4488e0838f9d586786b398c', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '338a566a8d861684eed10c8a7beeaeff5c424ad5', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'b0aee30f5c358b18f9e83edd188d1988a0772ff2', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '01ac364034bf562bddd266bc2f3f2185ae99d918', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '930bc31f0478fa4c7cab4e7e38d9bf31168f82f8', class: {
                 "table-row-group__rows-container": true,
                 "table-row-group__rows-container--is-hidden": this.isVisible,
-            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: 'fa6ae0448026527ca6d6bda329b6b3711a2e9799' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '900d8486d712e304a08a7760e07a82f7fb0158db' }))));
     }
     get el() { return this; }
     static get style() { return swirlTableRowGroupCss; }

package/dist/components/swirl-table-row.js CHANGED Viewed

@@ -18,7 +18,7 @@ const SwirlTableRow$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableRow ext
         const className = classNames("table-row", {
             "table-row--highlighted": this.highlighted,
         });
-        return (h(Host, { key: '42e6b38e5586661e711b077bc636d0a92d9a8a60', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: 'eaa3ffa24e1c4943189e4c8634812e8fe9fd1dd1' })));
+        return (h(Host, { key: 'd7d696868ec0d9c2fa9afef7e3c2caa521529ebf', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: '491b4607b36a16ab1284970498963452024f0e60' })));
     }
     get el() { return this; }
     static get style() { return swirlTableRowCss; }

package/dist/components/swirl-tabs.js CHANGED Viewed

@@ -77,7 +77,7 @@ const SwirlTabs$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTabs extends HTM
         }));
     }
     render() {
-        return (h(Host, { key: 'd95a12ced0cb0a1cba77c8c0e7a1067a636fc881' }, h("div", { key: '974a81c3e650efbd622b10a01d704a04da3522c4', class: "tabs" }, h("swirl-tab-bar", { key: '5c7d1534d8fa58ca5b02ceee8b701babfec108e2', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: 'b6d21d61fbbde20d7176b171e62325df8beb0f11' })));
+        return (h(Host, { key: '6f51599988056556afb4325ad2a918efb801a690' }, h("div", { key: 'dffa8a80445febed2cece6572d37efbb620291d6', class: "tabs" }, h("swirl-tab-bar", { key: 'fac111812a85c0bcca67bd2d4a1fdf36613c562c', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: 'e7e646ffc04e6e4326c9ea1d0721c2755ff4e99b' })));
     }
     get el() { return this; }
     static get style() { return swirlTabsCss; }

package/dist/components/swirl-tag2.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
-import { d as defineCustomElement$1 } from './swirl-icon-close2.js';
+import { d as defineCustomElement$2 } from './swirl-icon-close2.js';
+import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
-const swirlTagCss = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;gap:var(--s-space-4);border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";
+const swirlTagCss = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";
 const SwirlTag = /*@__PURE__*/ proxyCustomElement(class SwirlTag extends HTMLElement {
     constructor() {
@@ -39,12 +40,13 @@ const SwirlTag = /*@__PURE__*/ proxyCustomElement(class SwirlTag extends HTMLEle
         }
     }
     render() {
-        const className = classNames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
-        return (h(Host, { key: '67c7207ee6d70299b7499c96ce3c604c73a8d7a6' }, h("span", { key: '7f0ba14caf885ca217fe98215335479f84edd3d7', class: className, part: "tag" }, this.icon && (h("span", { key: '8cddbdb1d526ecebc9e9eac2b4bef4035741f465', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '35cb9662720e3237a438ec27b225912667765f3b', class: "tag__label" }, this.label), this.removable && (h("button", { key: '279fe9066c3c3842097a32252ab15a5e575e2a8b', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '8428572b3b1d0542b658c0d688facba4db0d2842', size: 16 }))))));
+        const className = classNames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`, { "tag--hide-label": this.hideLabel });
+        return (h(Host, { key: 'f97009ab9374525e05ac62cafb00bb55a35e4dcf' }, h("span", { key: 'aec2db0f0875efb1c17017ef20211ca655942967', class: className, part: "tag" }, this.icon && (h("span", { key: 'ca66c4e4133746173be7140100c0d4c7557acde3', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (h("span", { class: "tag__label" }, this.label)) : (h("swirl-visually-hidden", null, this.label)), this.removable && (h("button", { key: 'bdefa851d3723497053398d664ada3d3c0e07151', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '8637f479bd7842cb9a76ca69e6efdab1322f76a7', size: 16 }))))));
     }
     get el() { return this; }
     static get style() { return swirlTagCss; }
 }, [1, "swirl-tag", {
+        "hideLabel": [4, "hide-label"],
         "icon": [1],
         "iconPosition": [1, "icon-position"],
         "intent": [1],
@@ -59,7 +61,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["swirl-tag", "swirl-icon-close"];
+    const components = ["swirl-tag", "swirl-icon-close", "swirl-visually-hidden"];
     components.forEach(tagName => { switch (tagName) {
         case "swirl-tag":
             if (!customElements.get(tagName)) {
@@ -67,6 +69,11 @@ function defineCustomElement() {
             }
             break;
         case "swirl-icon-close":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "swirl-visually-hidden":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/components/swirl-text-input2.js CHANGED Viewed

@@ -8,12 +8,13 @@ import { d as defineCustomElement$3 } from './swirl-icon-visibility2.js';
 import { d as defineCustomElement$2 } from './swirl-icon-visibility-off2.js';
 import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
-const swirlTextInputCss = ".sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
+const swirlTextInputCss = ".sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--clearable.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
 const SwirlTextInput = /*@__PURE__*/ proxyCustomElement(class SwirlTextInput extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.clear = createEvent(this, "clear", 7);
         this.inputBlur = createEvent(this, "inputBlur", 7);
         this.inputFocus = createEvent(this, "inputFocus", 7);
         this.valueChange = createEvent(this, "valueChange", 7);
@@ -27,11 +28,12 @@ const SwirlTextInput = /*@__PURE__*/ proxyCustomElement(class SwirlTextInput ext
         this.iconSize = 24;
         this.showPassword = false;
         this.mediaQueryUnsubscribe = () => { };
-        this.clear = () => {
+        this.handleClearClick = () => {
             this.inputEl.value = "";
             this.value = "";
             this.valueChange.emit("");
             this.inputEl.focus();
+            this.clear.emit();
         };
         this.onChange = (event) => {
             const el = event.target;
@@ -154,18 +156,21 @@ const SwirlTextInput = /*@__PURE__*/ proxyCustomElement(class SwirlTextInput ext
             !this.readonly &&
             Boolean(this.value) &&
             !showPasswordToggle &&
-            !showStepper &&
-            !this.showCharacterCounter;
+            !showStepper;
+        const characterCount = this.value?.length ?? 0;
+        const showCharacterCounter = this.showCharacterCounter &&
+            (!this.showCharacterCounterNearLimit ||
+                characterCount >= this.maxLength * 0.8);
         const type = this.type === "password" && this.showPassword ? "text" : this.type;
         const className = classNames("text-input", `text-input--font-size-${this.fontSize}`, `text-input--type-${this.type}`, {
             "text-input--auto-grow": this.autoGrow,
-            "text-input--clearable": this.clearable,
+            "text-input--clearable": showClearButton,
             "text-input--disable-dynamic-width": this.disableDynamicWidth || Boolean(this.placeholder),
             "text-input--has-suffix": Boolean(this.suffixLabel),
             "text-input--inline": this.inline,
             "text-input--show-password": this.type === "password" && this.showPassword,
         });
-        return (h(Host, { key: '47932ba64512368fef5948a2560afdf722ae106c' }, h("div", { key: '089210f7581a26934fa1851899e1b279c96a4f55', class: className }, this.prefixLabel && (h("span", { key: '7d77cb2af315fe8909fa92f7ea328e4970c853fb', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '1c73d0168a7ca0e7380b665c0e398b3dfb8be35b', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '2ae0f456126a27f0256b5dfd851da830ea379018', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: 'ea47c05178f0ce61188ca8ed15f3bbe6f132b1dc', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: 'd419f462f82b28bc6c8602f3d4cf65d2649d0234', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '565f3c92ef3fd90d1d43c673b94feec9bcf213cf', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'ec02752a5258a06827fc156fd4b4cd5a0e712751', class: "text-input__stepper" }, h("button", { key: 'c698d2fda7bf64b338920410ef0c894955cf6372', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '0f662dd62d1a315d288622a31e4f0dfb0ee530e0', size: this.iconSize })), h("button", { key: '49fc4ece3d4b67e3b6fa38ecdb681edf5e2e0791', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: '49de410032a3f513ba78e7f6a986645441db80eb', size: this.iconSize })))), this.showCharacterCounter && (h("span", { key: 'cc12de838a87f683af5ab14009cedcd1f98b39bb', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: '8df695b8970b8f35d7b119bff1cfe573c427f1e6' }, this.characterCounterLabel), this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+        return (h(Host, { key: '288582bcca41f2ae8cf3c904ed02fcb0a976be7b' }, h("div", { key: '817b0708b7bebf147ded143b4f0dea6206959d49', class: className }, this.prefixLabel && (h("span", { key: '1e1bd63e29fb41cdc58237b78e55b6744bb28cda', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '731a75748b874b5414668e4c4d412fa078b54b3e', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '2ac53e8616fba0f233c51e95b7a0686d03dc552c', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '48f457dfb8c41726623a34b68ba5f7622705145f', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '5f853517b77fcb680f985c5a4624732026c7d39a', size: this.iconSize }))), showPasswordToggle && (h("button", { key: 'a11670fac677c71297420e1ab2b7ce23dfe99671', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'e098155b27a7d5dd49019b2c1956b0b94e0c3035', class: "text-input__stepper" }, h("button", { key: '008c30c8f3bc1d7b4227db185b367d0216c051da', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '656e442c33bd16d69057fb59158d0900e8640b2c', size: this.iconSize })), h("button", { key: 'f1123bb4c9440e71727846782135c31a912cebf5', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'bbd40a1605fa6b3757d308fd5fca6ef5cd133b59', size: this.iconSize })))), showCharacterCounter && (h("span", { key: '98b9121e7b79872e05cd4d4d1c956405118ba0b8', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: '339c0dd5c187d8e7818ae3dc4a75a878b3f81f6c' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
     }
     static get watchers() { return {
         "value": ["watchValue"]
@@ -195,6 +200,7 @@ const SwirlTextInput = /*@__PURE__*/ proxyCustomElement(class SwirlTextInput ext
         "required": [4],
         "rows": [2],
         "showCharacterCounter": [4, "show-character-counter"],
+        "showCharacterCounterNearLimit": [4, "show-character-counter-near-limit"],
         "spellCheck": [4, "spell-check"],
         "suffixLabel": [1, "suffix-label"],
         "step": [2],

package/dist/components/swirl-text2.js CHANGED Viewed

@@ -987,7 +987,7 @@ const SwirlText = /*@__PURE__*/ proxyCustomElement(class SwirlText extends HTMLE
         const styles = {
             whiteSpace: truncate ? "nowrap" : this.whiteSpace,
         };
-        return (h(Host, { key: 'd0d12ca4d1097f8d177f030e566bfd4b45c1a9fa' }, h(Tag, { key: '7df0d7714d2926308580cbca4063fc92aa754217', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '3babc4ff0c7ec56ee5d01af5315250be65c83257' }))));
+        return (h(Host, { key: 'a635ca2f4d4b7afc4e4d4fceb0e995823e6cebdd' }, h(Tag, { key: 'e9cb49646443c597aa220a12ad0ce008aef9617e', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '33a7c292355d29886765808a120f1ead1dd43ab7' }))));
     }
     get el() { return this; }
     static get style() { return swirlTextCss; }

package/dist/components/swirl-theme-provider.js CHANGED Viewed

@@ -151,7 +151,7 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: 'c42a6302b1dc31a1d433abf914bfa914f9f5417a' }, h("slot", { key: '5c62068d1e6ceee187c00ec1d12253440302a8b0' })));
+        return (h(Host, { key: '4d298f7fdb7eb70b57bcccff39755956847ee51b' }, h("slot", { key: 'b3dace729e21553518628b6f733cd3364a23eac5' })));
     }
     static get watchers() { return {
         "config": ["watchConfig"]

package/dist/components/swirl-thumbnail2.js CHANGED Viewed

@@ -35,7 +35,7 @@ const SwirlThumbnail = /*@__PURE__*/ proxyCustomElement(class SwirlThumbnail ext
             "thumbnail--interactive": this.interactive,
             "thumbnail--has-progress": this.progress !== undefined,
         });
-        return (h(Host, { key: '3a03a8d63d4f07e3a81680a7749dcb4949ad0d6a' }, h("span", { key: '128c2fb11e09cd22e0e7fc13a13397a2e68e3e26', class: className, role: "group" }, h(ImageWrapper, { key: '5e4705d90d3837741e291b9731b92dd3598b0649', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: 'bc7663a2eda0af5b92a0f5ecb753fca2618f2243', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: 'a0cd9ec911923dde262f8a764864057d304d8676', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: 'f6bb6772aa76a224135d9b67cca47726cb2952e3', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: '0b272acf730c203d92e67bcb78a3d485431a9fe9', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: 'ef9a56d1a681b83aadee9e26efee13ff38be9f7b' }, h("swirl-button", { key: 'd39e922153c9a7a3eac822abbd9a567ece5a7885', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: 'd40b39263a85a7cd5decb0dc39bdacd127333449' }, h("swirl-button", { key: '9b153da5fd7998351f8111818b7678fb6e99089c', hideLabel: true, icon: "<swirl-icon-delete></swirl-icon-delete>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '1cc05b8a3d582d8930ea57c552f9a85b849c0c4a', class: "thumbnail__timestamp" }, this.timestamp)))));
+        return (h(Host, { key: '36e44781341fedd1722aa3d032dc25a7bf4fe55c' }, h("span", { key: '76d3f07fc84075b9e30afb518b36377a9da1aae9', class: className, role: "group" }, h(ImageWrapper, { key: '3b9c70936d55d54ec47f0f5cca578f48cf583b95', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: '9ce4889de7da525f1bed55b6329f8453b581d134', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: '44fd41e3e630f5bf27f86a888f71814aa54b3bbf', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '4a4d06672c2e872e321732a049a369dec1895870', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: '7c2d4050019b6f16ac14ecf991fae48609b17fa8', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: 'f451a0594a18af47f903f63031dfeda18728e864' }, h("swirl-button", { key: '4f53f3eef32bcd2091fde65177fff69383f71c49', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: 'd41e2a3fd6eb781d18ee581f51d1937a7cb3f90c' }, h("swirl-button", { key: 'f1147179e6838127d1120bd2b8ecd297982549df', hideLabel: true, icon: "<swirl-icon-delete></swirl-icon-delete>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '884dcdd938b46f619b1ac51e9239c5d8d6ebe682', class: "thumbnail__timestamp" }, this.timestamp)))));
     }
     static get style() { return swirlThumbnailCss; }
 }, [1, "swirl-thumbnail", {

package/dist/components/swirl-time-input.js CHANGED Viewed

@@ -143,7 +143,7 @@ const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput e
         const className = classNames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: 'd6c4f0d39df730f886088b0254898035d8061d4f' }, h("div", { key: '9acf0b203e64f0442886067d5d5139725ccb1b3d', class: className }, h("input", { key: '318a0c90c6243e2fea6adc41ed125ecb4d4d3791', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'af6ebcb46a3cfe4f624523c569aae1629ea5a243', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'ff76f97732b7b431146fc1a4d4a81e5d61562a80', size: this.iconSize })))));
+        return (h(Host, { key: 'e23b038bf99ddfd9893ff2b2cc2981ee7de0fbda' }, h("div", { key: '26b6cbb9a67cfb986bae34b2ff604862992f7076', class: className }, h("input", { key: 'd5123ad3101a1c0571e491d91c5916fba51aabe9', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'd53e9ea53813798aa0cdd2ce7f6f685053859862', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '61e91a6ae302b0b64d4283525f02b97bad37e9ad', size: this.iconSize })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-toast-provider.js CHANGED Viewed

@@ -48,7 +48,7 @@ const SwirlToastProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToastPr
         return newToastWithId;
     }
     render() {
-        return (h(Host, { key: 'dd0a45619c4cb022f8f11a830acca3eafacb2628', role: "status" }, h("swirl-stack", { key: '1a499d109072a863f3704edbcca17f203468765a', spacing: "12" }, this.toasts.map((toast) => {
+        return (h(Host, { key: 'd77ac2c1540cb1caea02cdd512ffb542689297a8', role: "status" }, h("swirl-stack", { key: '6b25556338ddf73c30f0307fee0598fa41f0bcdf', spacing: "12" }, this.toasts.map((toast) => {
             const props = { ...toast, content: undefined };
             return (h("swirl-toast", { key: toast.toastId, onDismiss: this.onDismiss, ...props }, toast.content));
         }))));

package/dist/components/swirl-toast2.js CHANGED Viewed

@@ -54,7 +54,7 @@ const SwirlToast = /*@__PURE__*/ proxyCustomElement(class SwirlToast extends HTM
     }
     render() {
         const className = classNames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: 'b2709e8fb769a641783d827a25579482968092e1' }, h("div", { key: '0bbff552294a5bd793172ac396796e58eb42e4df', class: className }, this.icon && (h("span", { key: '87fa4e5c1762e3ab6c08ceb8d58593dff6e711a1', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '46c9a7cb427dc14e84907dfbaabb3a9a2c76405d', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: 'e5e2aa1efbeace583f3a0c2f734eb6278437c95f' })), h("button", { key: 'f4b97a2dd5d2c57eec86f0ef373dcbbeb9538ab6', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: 'ff9be404ad01c6264f089e9c8e212c083c60f8e8', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: '43cb34a2df0fd98c1651a6a7a8921bd72917d820' }, h("div", { key: '2794719db1ae270a1dbfdd7cd667c7892778586c', class: className }, this.icon && (h("span", { key: '00106bb7daccabb75387507a6da93909905cfc66', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '4f14111240b148854ece64826319d11e57c93a8a', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '6ba35843c580885b83231901a746a1ceacefc2a6' })), h("button", { key: '145bd18d8822373d0ea2103e88a1c189228e47a8', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '80b7c90525bfb27844c789e1816e8f0d0175bd97', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get watchers() { return {
         "duration": ["watchDuration"]

package/dist/components/swirl-toggle-button.js CHANGED Viewed

@@ -18,7 +18,7 @@ const SwirlToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToggleBu
         const classNames$1 = classNames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: 'b00dc9f34972136f70a66e37bd00e76aa3a5dcb7', class: classNames$1, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'bbe9171ad046460afcaea4db6c2295c0ffc78788', class: "button__icon", glyph: this.icon })), h("span", { key: 'd8306bde008d608bcd2d9a738b24e7dbfc5da5c5', class: "button__label" }, this.label)));
+        return (h("button", { key: '2b9620d5152ba227e725f3b2308b96f49d0d79a0', class: classNames$1, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'f2504f9c4e4ec6f85fbd3d356f71470a5a133a4b', class: "button__icon", glyph: this.icon })), h("span", { key: '5ca11b4cebdc080a2ef08761344e349ff2248c16', class: "button__label" }, this.label)));
     }
     static get style() { return swirlToggleButtonCss; }
 }, [1, "swirl-toggle-button", {

package/dist/components/swirl-toggle-group.js CHANGED Viewed

@@ -63,7 +63,7 @@ const SwirlToggleGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToggleGro
         const className = classNames("toggle-group", `toggle-group--variant-${this.variant}`, {
             "toggle-group--elevated": this.elevated,
         });
-        return (h("swirl-stack", { key: '61e816188b9e828648b9d10783b383a9d3b58c98', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: 'ef8806d88bd4833082545c9a0852a06fbc123935', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: '592281557bdff4eb63d73e2d5f7371726be6a160', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '08fb51474cd7e1357891139b35c20a3279d9b5e2', onSlotchange: this.onSlotChange })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-toolbar.js CHANGED Viewed

@@ -72,7 +72,7 @@ const SwirlToolbar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToolbar exten
         });
     }
     render() {
-        return (h(Host, { key: 'ad6c20b8f56f68a4eec035587b6797980bf2d6cc' }, h("swirl-stack", { key: 'bdcd17216cf16045cd49417de774b4993b492280', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: '8f984329ea27c975220b846da6a3bc45ad3d6d6a' }))));
+        return (h(Host, { key: '9369f6a0113fb50ba750b4f16c25c544b1766154' }, h("swirl-stack", { key: 'f2c667c134c39c55ceafb36ba4b6e23b654a34f4', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: '138163699ddb35e2032885fc5b0a0bcd4cc26d62' }))));
     }
     get el() { return this; }
     static get style() { return swirlToolbarCss; }

package/dist/components/swirl-tooltip2.js CHANGED Viewed

@@ -139,7 +139,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
             "tooltip--visible": this.visible,
             "tooltip--promo": this.isPromo,
         });
-        return (h(Host, { key: '0fa9404559103428ce19831a0b45a5330d00c9fa', onKeydown: this.onKeydown }, h("span", { key: '3602318c40723c65c318cef0254dab0161439cc6', class: className }, h("span", { key: 'a9aaf081590bcf01ad2c82c99b8ea10bc9b8f8a5', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: !this.isPromo && this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '73ad565e8b91925bba6fcb490b542d74890926c1' })), h("span", { key: 'bd84b556b64f4d24f2064d00556070af818524f5', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: '7ef28ae781629b34563a9efb0f1dcbc2196a3755', onKeydown: this.onKeydown }, h("span", { key: '811e3f71710d631f3ee92cdffb162cca16210029', class: className }, h("span", { key: '9fddd540fbeb4bb648f80dce997002f4b95376f5', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: !this.isPromo && this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '899f37b42f80114ac92c29573d092a44f357c6a6' })), h("span", { key: '6dbd45a546f0bfe17e1ca21000b58b99e8a3a36e', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -147,7 +147,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: '41fb5ef06491bfaf355d3fd5a98e00a92cd75a92', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'a6a22b0bc86e87f2c7728fc3888ef109a8b9be8c', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'b036d30ba31fbf5b4c8519b229aed70f20509874', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: '409b0242a3b2e7ad4229e7e8c420740b24a36cc2', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'e5f0c69876909b0d40a62aa346db0f7eb83b1e19', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '6c2efa3de503af164e33944e39a1972b60ff8e70', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

package/dist/components/swirl-tree-navigation-item.js CHANGED Viewed

@@ -93,12 +93,12 @@ const SwirlTreeNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTr
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: '8369fe819475045275719bbe9b16711c59626577', role: "none" }, h("li", { key: '3011241c3bf474f4fb5c13b8e24ed35f1d5d8047', class: {
+        return (h(Host, { key: '1d750b175e5715e6ce44f427be7164cbf208c992', role: "none" }, h("li", { key: 'df354e4bb8486eb1b59cdc18ab76319fa6a54d8d', class: {
                 "tree-navigation-item": true,
                 "tree-navigation-item--expanded": this.expanded,
-            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: 'c4ec90c8ed555707559fa39b81a4e5d553ebe16a', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: '904ee9daa4ed944f633511932017f5f5849fd187', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '36ee876b8e36c30334f2402b10ec317be8d485cb', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '5eb37d27c1cff2775e15ac17376fa033bdb642ce', class: "tree-navigation-item__label" }, h("span", { key: '5f25b0ee30f33ab1e56ac80432e9040e4a1ed9af', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '96b84e2080a6e6443c29b492eab4e517a8adf57a', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '409e55c6c90611553b278a29c690b7a80e840e3d', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '31392fed7e98a3355d9e5e9cb2d7c141c4539b15', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '6d1991ac134fbeb55fc0b0cdf6e52e6c0b34ff0d', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'aebe5efe827154d974dd4b61a5351048340c4439', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
+            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: '072c1e016ca496beb24b1066d9ae29322fd70418', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: 'df801a9a7bcaff5da25905dfec39b460ed055096', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '4c11dc3049f488e4a729f548bddffcea8f4a4dc0', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'ba8d1fbbc813568617c4e19cbbf4b6b0676acfd1', class: "tree-navigation-item__label" }, h("span", { key: 'df1fe9cda6ff97d638c9a1ea431b61275f44c8b0', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '2fefe3aa3a88bbd5041d16e629fc9089b859075e', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '3f3bf81b0c92954ef16dd9b5e1f12ef03e50f41d', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'd27a45e3ed535832a86e1e9630c4225d9ee95ab7', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '66b459c55c22945c6fa47278fb89e54ce12a2d8b', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '0147cef7a24a5266e6214aee2b5e0fae5f4d82c2', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
                 height: this.childrenHeight,
-            } }, h("slot", { key: '0e40a2bce9714b627727f9b8f5eb92fea1688abf' }))))));
+            } }, h("slot", { key: '128b8af2ea1e0b39da09de3cc8ad3329fa1bc50a' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-tree-navigation.js CHANGED Viewed

@@ -9,7 +9,7 @@ const SwirlTreeNavigation$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeNa
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '2622a677484f0448fe54e7c5f98b18a78d0cd5f0' }, h("ul", { key: '0bb7b1384e3759d22c3b363f3332d28f78aaaa63', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '9159013c9b3c575e71c19be98d103e1f256aad17' }))));
+        return (h(Host, { key: '86870308bca066293786f8864ca39377e922f765' }, h("ul", { key: '3ebec851bb00a9d406d9bcc58df306c66b7f3724', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '3a9cf1a0069dd30b73b49ce295896ab5226f05e1' }))));
     }
     static get style() { return swirlTreeNavigationCss; }
 }, [1, "swirl-tree-navigation", {

package/dist/components/swirl-tree-view-item.js CHANGED Viewed

@@ -340,17 +340,17 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
             "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        return (h(Host, { key: '7b577a6fcf687903abce1fe1e334e1fdca4a8e39', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: 'e7825c463c72c09d9d60bbd172b5400782aa12ba', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: '0b1531bc9fcd4a6541f959503cf05f7102db428f', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
+        return (h(Host, { key: '92a6fc72ba951551fc8bcc6fd5ddaa3ff1b44f5d', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: '4ce0aad69e8863aea1efd79497f39147461f4c77', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: 'aee6e4e236b9da37d794e1cf53970be78a7a42f5', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
                 ? undefined
                 : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
                 ? `${this.itemId}-children`
-                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: 'ba5a1155da81061b986dc6e1de25bce41c55b08b', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '9a2732f2b7067b7cbece6ad8d91c608db21f28ef', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: '7a1c577285a5f01ddbc66e4b03fd2001f792d776', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '1633a0c318463da5e8808d3d98cc1f5f5c63ee3c' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: 'be6d89d04a9f415b9463c021a72de06cbfda2d6b' }, h("span", { key: '6b55c715e0e6a44c5d4eb7056936aa791b5c23ad', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '6a11499dcf1a1fc3da5c67112178297b138750bc', class: "tree-view-item__label" }, this.label), h("span", { key: '42c6773ea2682e6b0d07d6b29f016c4fba0efc6b', class: "tree-view-item__tags" }, h("slot", { key: 'a62b2e6948e3dd00186173dc01485b2a83f45da4', name: "tags" }))), h("ul", { key: '3fb3432cd4378b5d1359af5176c7235fbeb3a177', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '12067d39e01689715463586763bcf57b3792f6fe', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '587163d893c82db81ac14043387aeaf9fae01f28', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: '8e296cbbee0496269ae851e932d757872e48f414', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '69ab051f3055d7a67d39d2c3e84a6ecfc17ff6e7' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: '1cd32216980f812b5990c23b723428dfe50fa265' }, h("span", { key: '2ef9a931552385408c773d1002175b259e8ff20f', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '7de30e721f49840b8e9343d9643e4b04d2f111f5', class: "tree-view-item__label" }, this.label), h("span", { key: 'cc03525b5dc4f9ca2d8e8e6055b4bb5a2e8f1d62', class: "tree-view-item__tags" }, h("slot", { key: 'bd6f7235df3e6e7d7c317ae7402eedadb66029af', name: "tags" }))), h("ul", { key: 'a8bde6803502059aa11da1b78cfad862ddb6da1d', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
                 ? "tree-view-item__children--drop-zone"
                 : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: semantics === "tree" ? "group" : undefined, style: {
                 display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
                     ? "none"
                     : undefined,
-            } }, h("slot", { key: '65991009c10eae24df30e05c9655291bd180b7a9' })))));
+            } }, h("slot", { key: '5eacda6fce923483bb832e7ef43659eb8296b9b5' })))));
     }
     get el() { return this; }
     static get style() { return swirlTreeViewItemCss; }

package/dist/components/swirl-tree-view.js CHANGED Viewed

@@ -332,7 +332,7 @@ const SwirlTreeView$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView ext
         }
     }
     render() {
-        return (h(Host, { key: 'b76dd7b1be10f6a299ddff5ec95bd4bf78dc8557' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: 'a65f276e109ad467e6cec5fce4cd58886b3f6550' }, h("span", { key: 'cc228586d4a7197b77d6a555a91d4b16567186ed', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: 'f095b5911052c09f325fa13b9ef53b2031ddd066', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: 'e54b87e40415442a63d5f4ad23800f651e698ff1', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: 'b997026b01a6f01571f5dd435192a9568ee399e8' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '2a12eed1bcbb1be9ca09e6494cfcecbc6ebcd9cd' }, h("span", { key: '12297618e8e047ed6df71b906f0be8960adb6027', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: 'ee8d26c52e1c76f908f7ed981131a615086518f6', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: 'cc848e39bcbaa19e89d74ffd3edfa92fc934e278', onSlotchange: this.onSlotChange }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-video-thumbnail.js CHANGED Viewed

@@ -11,7 +11,7 @@ const SwirlVideoThumbnail$1 = /*@__PURE__*/ proxyCustomElement(class SwirlVideoT
         this.durationLabel = "Duration";
     }
     render() {
-        return (h(Host, { key: 'f422afa5aca092e9bc2181f861f87a6384ee98bf' }, h("button", { key: '39078ec3ae8a37e75cdf22c94516f193b84a32aa', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '0bd98edc0f61a314ed5b0e0de1f9f5afd49c929e', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '4a74df71a39e576da3affdc581ce88d1191d609d', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'd53262bc81a9f1d739bb391747910655e467c45d' }, this.durationLabel), this.duration)), h("svg", { key: 'ed07dc5e4af9f9fd27c96e2de12bf8fe78208bf1', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '41af314c2e110334fe103e064019a8b1f0c1ed64', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
+        return (h(Host, { key: '89dac32f65bef0a46b67703fe29f712d8177ad26' }, h("button", { key: '5f8bebb67d9dd7de8e5313c45869f5a5e0ae6398', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'e250188befd06bacf95cceb642b6a3f99d4339a5', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'd7223f77200e3ae6385de7533faba1df176a6fd4', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '5fa5a326db2af07b947a788f5f732bd171a8ca02' }, this.durationLabel), this.duration)), h("svg", { key: 'a5036ced8bff84f95bc39135b1fe2758ac194c85', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '27ff5a6714f1c3ec692f1bed311ff0607d07b10c', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
     }
     static get style() { return swirlVideoThumbnailCss; }
 }, [1, "swirl-video-thumbnail", {

package/dist/components/swirl-visually-hidden2.js CHANGED Viewed

@@ -8,7 +8,7 @@ const SwirlVisuallyHidden = /*@__PURE__*/ proxyCustomElement(class SwirlVisually
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '956e9d1b1c480480a8f9f4fd2ba7017d587c2fab' }, h("slot", { key: 'a196c8079eedb432a2b27b74b07e293258b608d8' })));
+        return (h(Host, { key: '09b1aec3ccdba045e8ebc6d830d708ab7831f74c' }, h("slot", { key: '08988756ba69ebcefe7e71f588a433c286c5adbf' })));
     }
     static get style() { return swirlVisuallyHiddenCss; }
 }, [6, "swirl-visually-hidden"]);

package/dist/esm/file-manager.entry.js CHANGED Viewed

@@ -55,7 +55,7 @@ const FileManager = class {
             onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
     }
     render() {
-        return (h(Host, { key: '81910466342a0f783d2b04fbbb0c3ed694477f50' }, h("swirl-app-layout", { key: '6602c2eb9ce0a558bcfe2f7e790df7abe40fbc5a', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '27fcd50e4c946b21cd96eaf5e1dfe4c1c24c700d', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'c5afd9e8fa67701de0826bcfa9ffbd2f935b3b2d', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '1e534234d64870567a28a88f554f64f495e10040', label: "Sort items" })), h("swirl-stack", { key: '0df2960e0a64ba41ac77e8e8239e4cd91dfe77a0', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '769e74f0b1a69a6a859d462f151f5789781c9752' }, h("swirl-heading", { key: 'a1e25645619ce516bcab332f9e83f9fde9dc6bde', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'cc8e991111876a80ef0990d544c2ddad079b73cf', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: 'cc6fe632a55a25b7ceca3ea332bc75eea2470b6c', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '355db3162225bdb84081f80cd41ff9832ec79547', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'af08e4ba2220437ab1d8568079c48bc5623c72e2', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'df7d3094c2346f4312cb6411d028335e0549a409', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '01c0c3b24f6075fc597fb718fb6693ba21c4485e', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '05ee0b481d18a2ba0367f70bb7589cd327718041', value: ["ascending"] }, h("swirl-option-list-item", { key: '872f69143e27c3947e4252c332443d04305fee1a', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'f633b1764cf58ca9e408e248261dc07b891a3db2', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '9369c99a8941627d4873b1c95e96fd335c1b03ec', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '14083c93c9141df0ab609647a390593b71d4c22e' }, h("swirl-app-layout", { key: 'b37221b75a21db26c333a556b91dffc66f0f6e8c', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '4861921bbe71766f2b8c05ebad59af0ade0fdd43', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'c6cca65267d4ee5d7b851526311eca602d919b07', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'cc6f70b78dfdc12edf541e41fc8bfc15981d3ebf', label: "Sort items" })), h("swirl-stack", { key: '09c69a17c5bdac668bfa3a5938eeb094e493c15e', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'b05439a6c50fc72ed89df65873919351a6711fd3' }, h("swirl-heading", { key: '37ecbf0cdbd0e803c6f79f3adca1ceb37bf347f0', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '297447a670515ca3a88a8a7ccea466038f92f476', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: '8240220a1322361d3f2fec3fad59c5c26572fab8', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '42c52c5c8e177328cc574f9de32793854236beb9', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'bf1986bbb921c29644e329bb47aeef3128a68412', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '39480bd58bc6c28a65823ee9e341e142fbb8389b', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '323f9a781a1b12254d8e1b41ff21938ba6c8e372', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '7156996dd05db60fca86169c2740052fdacf9eed', value: ["ascending"] }, h("swirl-option-list-item", { key: 'e5534f804442f5dd2583348454dac9f19e73e8e7', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'b6f8a821b576baf0f4e0be6592cbb679c66d0eb0', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '99e497bc9b4771d75417a7320260c1c2592edc23', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
 };