@brandsync/wc 1.17.0 → 1.19.0

package/dist/esm/bs-icon-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, a as getElement, h } from './index-D3SkQJpw.js';
 
-const bsIconButtonCss = () => `:host{display:inline-block;--bs-icon-button-radius:var(--bs-border-radius-100);--bs-icon-button-size-sm:40px;--bs-icon-button-size-md:44px;--bs-icon-button-size-lg:48px;--bs-icon-button-icon-size-sm:16px;--bs-icon-button-icon-size-md:20px;--bs-icon-button-icon-size-lg:24px;--bs-icon-button-padding:var(--bs-spacing-150);--bs-icon-button-radius-xs:var(--bs-border-radius-50);--bs-icon-button-size-xs:16px;--bs-icon-button-icon-size-xs:8px;--bs-icon-button-padding-xs:var(--bs-spacing-50);--bs-icon-button-primary-default:var(--bs-color-primary-default);--bs-icon-button-primary-hover:var(--bs-color-primary-hover);--bs-icon-button-primary-pressed:var(--bs-color-primary-pressed);--bs-icon-button-primary-disabled:var(--bs-surface-action-disabled);--bs-icon-button-neutral-container:var(--bs-color-neutral-container);--bs-icon-button-neutral-hover:var(--bs-color-neutral-container-hover);--bs-icon-button-neutral-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-neutral-border:var(--bs-border-neutral-container);--bs-icon-button-neutral-border-hover:var(--bs-border-neutral-container-hover);--bs-icon-button-neutral-border-pressed:var(--bs-border-neutral-container-pressed);--bs-icon-button-subtle-hover:var(--bs-color-neutral-container);--bs-icon-button-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-subtle-focus:var(--bs-border-primary-focus);--bs-icon-button-outlined-border:var(--bs-color-primary-default);--bs-icon-button-outlined-border-hover:var(--bs-color-primary-hover);--bs-icon-button-outlined-border-pressed:var(--bs-color-primary-pressed);--bs-icon-button-outlined-text-hover:var(--bs-text-action-hover);--bs-icon-button-outlined-container:var(--bs-color-primary-container);--bs-icon-button-outlined-focus:var(--bs-border-primary-focus);--bs-icon-button-success-default:var(--bs-color-success-default);--bs-icon-button-success-hover:var(--bs-color-success-hover);--bs-icon-button-success-pressed:var(--bs-color-success-pressed);--bs-icon-button-success-disabled:var(--bs-surface-action-disabled);--bs-icon-button-success-focus:var(--bs-border-success-focus);--bs-icon-button-warning-default:var(--bs-color-warning-default);--bs-icon-button-warning-hover:var(--bs-color-warning-hover);--bs-icon-button-warning-pressed:var(--bs-color-warning-pressed);--bs-icon-button-warning-disabled:var(--bs-surface-action-disabled);--bs-icon-button-warning-focus:var(--bs-border-warning-focus);--bs-icon-button-info-default:var(--bs-color-info-default);--bs-icon-button-info-hover:var(--bs-color-info-hover);--bs-icon-button-info-pressed:var(--bs-color-info-pressed);--bs-icon-button-info-disabled:var(--bs-surface-action-disabled);--bs-icon-button-info-focus:var(--bs-border-info-focus);--bs-icon-button-error-default:var(--bs-color-error-default);--bs-icon-button-error-hover:var(--bs-color-error-hover);--bs-icon-button-error-pressed:var(--bs-color-error-pressed);--bs-icon-button-error-disabled:var(--bs-surface-action-disabled);--bs-icon-button-error-focus:var(--bs-border-error-focus)}.bs-icon-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;border-radius:var(--bs-icon-button-radius);padding:var(--bs-icon-button-padding);cursor:pointer;transition:background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease)}.bs-icon-button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-icon-button:disabled{cursor:not-allowed}.bs-icon-button--xs{width:var(--bs-icon-button-size-xs);height:var(--bs-icon-button-size-xs);padding:var(--bs-icon-button-padding-xs);border-radius:var(--bs-icon-button-radius-xs)}.bs-icon-button--xs .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-xs);height:var(--bs-icon-button-icon-size-xs);font-size:var(--bs-icon-button-icon-size-xs)}.bs-icon-button--sm{width:var(--bs-icon-button-size-sm);height:var(--bs-icon-button-size-sm)}.bs-icon-button--sm .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-sm);height:var(--bs-icon-button-icon-size-sm);font-size:var(--bs-icon-button-icon-size-sm)}.bs-icon-button--md{width:var(--bs-icon-button-size-md);height:var(--bs-icon-button-size-md)}.bs-icon-button--md .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-md);height:var(--bs-icon-button-icon-size-md);font-size:var(--bs-icon-button-icon-size-md)}.bs-icon-button--lg{width:var(--bs-icon-button-size-lg);height:var(--bs-icon-button-size-lg)}.bs-icon-button--lg .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-lg);height:var(--bs-icon-button-icon-size-lg);font-size:var(--bs-icon-button-icon-size-lg)}.bs-icon-button__icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;line-height:1}.bs-icon-button__icon ::slotted(*){display:block;width:100%;height:100%;font-size:inherit;line-height:1}.bs-icon-button--primary{background:var(--bs-icon-button-primary-default);color:var(--bs-text-on-action)}.bs-icon-button--primary:hover:not(:disabled){background:var(--bs-icon-button-primary-hover)}.bs-icon-button--primary:active:not(:disabled){background:var(--bs-icon-button-primary-pressed)}.bs-icon-button--primary:disabled{background:var(--bs-icon-button-primary-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--neutral{background:var(--bs-icon-button-neutral-container);color:var(--bs-text-default);border:1px solid var(--bs-icon-button-neutral-border)}.bs-icon-button--neutral:hover:not(:disabled){background:var(--bs-icon-button-neutral-hover);border-color:var(--bs-icon-button-neutral-border-hover)}.bs-icon-button--neutral:active:not(:disabled){background:var(--bs-icon-button-neutral-pressed);border-color:var(--bs-icon-button-neutral-border-pressed)}.bs-icon-button--neutral:disabled{background:var(--bs-icon-button-neutral-container);color:var(--bs-text-on-disabled);border-color:var(--bs-icon-button-neutral-border)}.bs-icon-button--error{background:var(--bs-icon-button-error-default);color:var(--bs-text-on-action)}.bs-icon-button--error:hover:not(:disabled){background:var(--bs-icon-button-error-hover)}.bs-icon-button--error:active:not(:disabled){background:var(--bs-icon-button-error-pressed)}.bs-icon-button--error:disabled{background:var(--bs-icon-button-error-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--error:focus-visible{outline-color:var(--bs-icon-button-error-focus)}.bs-icon-button--success{background:var(--bs-icon-button-success-default);color:var(--bs-text-on-action)}.bs-icon-button--success:hover:not(:disabled){background:var(--bs-icon-button-success-hover)}.bs-icon-button--success:active:not(:disabled){background:var(--bs-icon-button-success-pressed)}.bs-icon-button--success:disabled{background:var(--bs-icon-button-success-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--success:focus-visible{outline-color:var(--bs-icon-button-success-focus)}.bs-icon-button--warning{background:var(--bs-icon-button-warning-default);color:var(--bs-text-on-action)}.bs-icon-button--warning:hover:not(:disabled){background:var(--bs-icon-button-warning-hover)}.bs-icon-button--warning:active:not(:disabled){background:var(--bs-icon-button-warning-pressed)}.bs-icon-button--warning:disabled{background:var(--bs-icon-button-warning-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--warning:focus-visible{outline-color:var(--bs-icon-button-warning-focus)}.bs-icon-button--info{background:var(--bs-icon-button-info-default);color:var(--bs-text-on-action)}.bs-icon-button--info:hover:not(:disabled){background:var(--bs-icon-button-info-hover)}.bs-icon-button--info:active:not(:disabled){background:var(--bs-icon-button-info-pressed)}.bs-icon-button--info:disabled{background:var(--bs-icon-button-info-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--info:focus-visible{outline-color:var(--bs-icon-button-info-focus)}.bs-icon-button--subtle{background:transparent;color:var(--bs-icon-neutral-default)}.bs-icon-button--subtle:hover:not(:disabled){background:var(--bs-icon-button-subtle-hover)}.bs-icon-button--subtle:active:not(:disabled){background:var(--bs-icon-button-subtle-pressed)}.bs-icon-button--subtle:disabled{background:transparent;color:var(--bs-text-on-disabled)}.bs-icon-button--subtle:focus-visible{outline-color:var(--bs-icon-button-subtle-focus);background:var(--bs-icon-button-subtle-hover)}.bs-icon-button--outlined{background:transparent;color:var(--bs-color-primary-default);border:1px solid var(--bs-icon-button-outlined-border)}.bs-icon-button--outlined:hover:not(:disabled){background:var(--bs-icon-button-outlined-container);border-color:var(--bs-icon-button-outlined-border-hover);color:var(--bs-icon-button-outlined-text-hover)}.bs-icon-button--outlined:active:not(:disabled){background:var(--bs-icon-button-outlined-container);color:var(--bs-icon-button-outlined-text-hover);border-color:var(--bs-icon-button-outlined-border-pressed)}.bs-icon-button--outlined:disabled{opacity:var(--bs-opacity-disabled);cursor:not-allowed}.bs-icon-button--outlined:focus-visible{outline-color:var(--bs-icon-button-outlined-focus)}`;
+const bsIconButtonCss = () => `:host{display:inline-block;--bs-icon-button-radius:var(--bs-border-radius-100);--bs-icon-button-size-sm:40px;--bs-icon-button-size-md:44px;--bs-icon-button-size-lg:48px;--bs-icon-button-icon-size-sm:16px;--bs-icon-button-icon-size-md:20px;--bs-icon-button-icon-size-lg:24px;--bs-icon-button-padding:var(--bs-spacing-150);--bs-icon-button-radius-xs:var(--bs-border-radius-50);--bs-icon-button-size-xs:16px;--bs-icon-button-icon-size-xs:8px;--bs-icon-button-padding-xs:var(--bs-spacing-50);--bs-icon-button-primary-default:var(--bs-color-primary-default);--bs-icon-button-primary-hover:var(--bs-color-primary-hover);--bs-icon-button-primary-pressed:var(--bs-color-primary-pressed);--bs-icon-button-primary-disabled:var(--bs-surface-action-disabled);--bs-icon-button-neutral-container:var(--bs-color-neutral-container);--bs-icon-button-neutral-hover:var(--bs-color-neutral-container-hover);--bs-icon-button-neutral-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-neutral-border:var(--bs-border-neutral-container);--bs-icon-button-neutral-border-hover:var(--bs-border-neutral-container-hover);--bs-icon-button-neutral-border-pressed:var(--bs-border-neutral-container-pressed);--bs-icon-button-subtle-hover:var(--bs-color-neutral-container);--bs-icon-button-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-subtle-focus:var(--bs-border-primary-focus);--bs-icon-button-outlined-border:var(--bs-color-primary-default);--bs-icon-button-outlined-border-hover:var(--bs-color-primary-hover);--bs-icon-button-outlined-border-pressed:var(--bs-color-primary-pressed);--bs-icon-button-outlined-text-hover:var(--bs-text-action-hover);--bs-icon-button-outlined-container:var(--bs-color-primary-container);--bs-icon-button-outlined-focus:var(--bs-border-primary-focus);--bs-icon-button-success-default:var(--bs-color-success-default);--bs-icon-button-success-hover:var(--bs-color-success-hover);--bs-icon-button-success-pressed:var(--bs-color-success-pressed);--bs-icon-button-success-disabled:var(--bs-surface-action-disabled);--bs-icon-button-success-focus:var(--bs-border-success-focus);--bs-icon-button-warning-default:var(--bs-color-warning-default);--bs-icon-button-warning-hover:var(--bs-color-warning-hover);--bs-icon-button-warning-pressed:var(--bs-color-warning-pressed);--bs-icon-button-warning-disabled:var(--bs-surface-action-disabled);--bs-icon-button-warning-focus:var(--bs-border-warning-focus);--bs-icon-button-info-default:var(--bs-color-info-default);--bs-icon-button-info-hover:var(--bs-color-info-hover);--bs-icon-button-info-pressed:var(--bs-color-info-pressed);--bs-icon-button-info-disabled:var(--bs-surface-action-disabled);--bs-icon-button-info-focus:var(--bs-border-info-focus);--bs-icon-button-error-default:var(--bs-color-error-default);--bs-icon-button-error-hover:var(--bs-color-error-hover);--bs-icon-button-error-pressed:var(--bs-color-error-pressed);--bs-icon-button-error-disabled:var(--bs-surface-action-disabled);--bs-icon-button-error-focus:var(--bs-border-error-focus)}.bs-icon-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;border-radius:var(--bs-icon-button-radius);padding:var(--bs-icon-button-padding);cursor:pointer;transition:background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease)}.bs-icon-button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-icon-button:disabled{cursor:not-allowed}.bs-icon-button--xs{width:var(--bs-icon-button-size-xs);height:var(--bs-icon-button-size-xs);padding:var(--bs-icon-button-padding-xs);border-radius:var(--bs-icon-button-radius-xs)}.bs-icon-button--xs .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-xs);height:var(--bs-icon-button-icon-size-xs);font-size:var(--bs-icon-button-icon-size-xs)}.bs-icon-button--sm{width:var(--bs-icon-button-size-sm);height:var(--bs-icon-button-size-sm)}.bs-icon-button--sm .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-sm);height:var(--bs-icon-button-icon-size-sm);font-size:var(--bs-icon-button-icon-size-sm)}.bs-icon-button--md{width:var(--bs-icon-button-size-md);height:var(--bs-icon-button-size-md)}.bs-icon-button--md .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-md);height:var(--bs-icon-button-icon-size-md);font-size:var(--bs-icon-button-icon-size-md)}.bs-icon-button--lg{width:var(--bs-icon-button-size-lg);height:var(--bs-icon-button-size-lg)}.bs-icon-button--lg .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-lg);height:var(--bs-icon-button-icon-size-lg);font-size:var(--bs-icon-button-icon-size-lg)}.bs-icon-button__icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;line-height:1}.bs-icon-button__icon ::slotted(*){display:block;width:100%;height:100%;font-size:inherit;line-height:1}.bs-icon-button--primary{background:var(--bs-icon-button-primary-default);color:var(--bs-text-on-action)}.bs-icon-button--primary:hover:not(:disabled){background:var(--bs-icon-button-primary-hover)}.bs-icon-button--primary:active:not(:disabled){background:var(--bs-icon-button-primary-pressed)}.bs-icon-button--primary:disabled{background:var(--bs-icon-button-primary-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--neutral{background:var(--bs-icon-button-neutral-container);color:var(--bs-text-default);border:1px solid var(--bs-icon-button-neutral-border)}.bs-icon-button--neutral:hover:not(:disabled){background:var(--bs-icon-button-neutral-hover);border-color:var(--bs-icon-button-neutral-border-hover)}.bs-icon-button--neutral:active:not(:disabled){background:var(--bs-icon-button-neutral-pressed);border-color:var(--bs-icon-button-neutral-border-pressed)}.bs-icon-button--neutral:disabled{background:var(--bs-icon-button-neutral-container);color:var(--bs-text-on-disabled);border-color:var(--bs-icon-button-neutral-border)}.bs-icon-button--error{background:var(--bs-icon-button-error-default);color:var(--bs-text-on-action)}.bs-icon-button--error:hover:not(:disabled){background:var(--bs-icon-button-error-hover)}.bs-icon-button--error:active:not(:disabled){background:var(--bs-icon-button-error-pressed)}.bs-icon-button--error:disabled{background:var(--bs-icon-button-error-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--error:focus-visible{outline-color:var(--bs-icon-button-error-focus)}.bs-icon-button--success{background:var(--bs-icon-button-success-default);color:var(--bs-text-on-action)}.bs-icon-button--success:hover:not(:disabled){background:var(--bs-icon-button-success-hover)}.bs-icon-button--success:active:not(:disabled){background:var(--bs-icon-button-success-pressed)}.bs-icon-button--success:disabled{background:var(--bs-icon-button-success-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--success:focus-visible{outline-color:var(--bs-icon-button-success-focus)}.bs-icon-button--warning{background:var(--bs-icon-button-warning-default);color:var(--bs-text-on-action)}.bs-icon-button--warning:hover:not(:disabled){background:var(--bs-icon-button-warning-hover)}.bs-icon-button--warning:active:not(:disabled){background:var(--bs-icon-button-warning-pressed)}.bs-icon-button--warning:disabled{background:var(--bs-icon-button-warning-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--warning:focus-visible{outline-color:var(--bs-icon-button-warning-focus)}.bs-icon-button--info{background:var(--bs-icon-button-info-default);color:var(--bs-text-on-action)}.bs-icon-button--info:hover:not(:disabled){background:var(--bs-icon-button-info-hover)}.bs-icon-button--info:active:not(:disabled){background:var(--bs-icon-button-info-pressed)}.bs-icon-button--info:disabled{background:var(--bs-icon-button-info-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--info:focus-visible{outline-color:var(--bs-icon-button-info-focus)}.bs-icon-button--subtle{background:transparent;color:var(--bs-icon-neutral-default)}.bs-icon-button--subtle:hover:not(:disabled){background:var(--bs-icon-button-subtle-hover)}.bs-icon-button--subtle:active:not(:disabled){background:var(--bs-icon-button-subtle-pressed)}.bs-icon-button--subtle:disabled{background:transparent;color:var(--bs-text-on-disabled)}.bs-icon-button--subtle:focus-visible{outline-color:var(--bs-icon-button-subtle-focus);background:var(--bs-icon-button-subtle-hover)}.bs-icon-button--outlined{background:transparent;color:var(--bs-color-primary-default);border:1px solid var(--bs-icon-button-outlined-border)}.bs-icon-button--outlined:hover:not(:disabled){background:var(--bs-icon-button-outlined-container);border-color:var(--bs-icon-button-outlined-border-hover);color:var(--bs-icon-button-outlined-text-hover)}.bs-icon-button--outlined:active:not(:disabled){background:var(--bs-icon-button-outlined-container);color:var(--bs-icon-button-outlined-text-hover);border-color:var(--bs-icon-button-outlined-border-pressed)}.bs-icon-button--outlined:disabled{opacity:var(--bs-opacity-disabled);cursor:not-allowed}.bs-icon-button--outlined:focus-visible{outline-color:var(--bs-icon-button-outlined-focus)}`;
 
 const BsIconButton = class {
     constructor(hostRef) {
@@ -37,6 +37,13 @@ const BsIconButton = class {
      * prop to the `aria-label` HTML attribute automatically.
      */
     ariaLabel = null;
+    /**
+     * Makes this a toggle button: sets `aria-pressed` on the inner `<button>` to `true`/`false`. Leave it
+     * unset (the default) for a plain action button, which then has no `aria-pressed` at all. The component
+     * does not toggle itself; the owner flips this on click. Put the toggle's state in the icon (e.g. a filled
+     * star), not in the label, which should stay the same.
+     */
+    pressed;
     onClick = () => {
         const form = this.internals?.form;
         if (!form || this.disabled)
@@ -47,7 +54,7 @@ const BsIconButton = class {
             form.reset();
     };
     render() {
-        return (h("button", { key: '75325bed02f38716052a4341a971ed429355d615', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'a427c213e0bbf3ee96698917ffc127d1d4d15de8', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: 'b46bf34d3fb24e9b899ba52fbd2ca39a49c634d3' }))));
+        return (h("button", { key: '6ffeb6535c6c1fb493f6c805a1f70a431a593d08', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, "aria-pressed": this.pressed === undefined ? undefined : String(this.pressed), onClick: this.onClick }, h("bs-ripple", { key: '0f3f40ca57f447a5d92b3f0ef132c146ef25675d', part: "ripple", centered: true, disabled: this.disabled }), h("span", { key: '00c1039364372917781441fca63553a430b9398a', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '18ba74587ec975b3f95115c211bcef1d4bac6ae5' }))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

package/dist/esm/bs-icon-tile.entry.js

@@ -1,4 +1,4 @@
-import { h, r as registerInstance } from './index-D3SkQJpw.js';
+import { h, r as registerInstance, a as getElement } from './index-D3SkQJpw.js';
 
 const bsIconTileCss = () => `:host{display:inline-flex;align-items:center;gap:var(--bs-icon-tile-text-gap);vertical-align:middle;--bs-icon-tile-size:24px;--bs-icon-tile-radius:var(--bs-border-radius-50);--bs-icon-tile-icon-size:12px;--bs-icon-tile-text-color:var(--bs-text-default);--bs-icon-tile-text-gap:var(--bs-spacing-100);--bs-icon-tile-bg:var(--bs-color-neutral-container);--bs-icon-tile-color:var(--bs-icon-default)}:host([size='md']){--bs-icon-tile-size:32px;--bs-icon-tile-radius:calc(var(--bs-border-radius-100) * 2 / 3);--bs-icon-tile-icon-size:16px}:host([size='lg']){--bs-icon-tile-size:48px;--bs-icon-tile-radius:var(--bs-border-radius-100);--bs-icon-tile-icon-size:24px}:host([intent='success']){--bs-icon-tile-bg:var(--bs-icon-tile-success-bg, var(--bs-success-50));--bs-icon-tile-color:var(--bs-icon-tile-success-color, var(--bs-icon-success))}:host([intent='warning']){--bs-icon-tile-bg:var(--bs-icon-tile-warning-bg, var(--bs-color-warning-container));--bs-icon-tile-color:var(--bs-icon-tile-warning-color, var(--bs-icon-warning))}:host([intent='error']){--bs-icon-tile-bg:var(--bs-icon-tile-error-bg, var(--bs-color-error-container));--bs-icon-tile-color:var(--bs-icon-tile-error-color, var(--bs-icon-error))}:host([intent='brand']){--bs-icon-tile-bg:var(--bs-color-primary-container);--bs-icon-tile-color:var(--bs-icon-action)}:host([intent='information']){--bs-icon-tile-bg:var(--bs-icon-tile-information-bg, var(--bs-information-50));--bs-icon-tile-color:var(--bs-icon-tile-information-color, var(--bs-icon-info))}.bs-icon-tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:none;width:var(--bs-icon-tile-size);height:var(--bs-icon-tile-size);border-radius:var(--bs-icon-tile-radius);background:var(--bs-icon-tile-bg);color:var(--bs-icon-tile-color);overflow:hidden}.bs-icon-tile__icon{display:flex;align-items:center;justify-content:center;width:var(--bs-icon-tile-icon-size);height:var(--bs-icon-tile-icon-size)}.bs-icon-tile__icon svg,::slotted(svg),::slotted(img){width:var(--bs-icon-tile-icon-size);height:var(--bs-icon-tile-icon-size)}.bs-icon-tile__text{display:none;color:var(--bs-icon-tile-text-color);font-size:var(--bs-font-size-md);line-height:24px}.bs-icon-tile__text--visible{display:block}:host([size='sm']) .bs-icon-tile__text{font-size:var(--bs-font-size-sm);line-height:20px}`;
 
@@ -6,6 +6,7 @@ const BsIconTile = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    get el() { return getElement(this); }
     /** Tile size: `sm` 24px, `md` 32px, `lg` 48px. */
     size = 'sm';
     /** Colour and default glyph. `brand` uses the brand colours; `information` the info palette. */
@@ -17,11 +18,18 @@ const BsIconTile = class {
     hasCustomIcon = false;
     /** True while something is assigned to the `text` slot, so the text wrapper (and its gap) only exists then. */
     hasText = false;
+    /** `slotchange` alone is not enough: when the icon is already a child at first render (or is added in the same
+     * pass that upgrades this element) the event can fire before the handler is attached, leaving the default
+     * glyph drawn next to the slotted icon. Read the light DOM once up front. */
+    componentWillLoad() {
+        this.hasCustomIcon = Array.from(this.el.childNodes).some(n => (n.nodeType === Node.ELEMENT_NODE && !n.hasAttribute('slot')) || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim()));
+        this.hasText = Array.from(this.el.children).some(c => c.getAttribute('slot') === 'text');
+    }
     render() {
         const labelled = !!this.label;
         return [
-            h("div", { key: '3fc3a9874dbadcf9ac6fa3df92f7c5cb48c4cc7b', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: 'e27206a1f0ef5a05183863c952c631614e44b591', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: '31c4cd875c08f01b04d1fbc8b27dbb471c383129', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
-            h("span", { key: 'fcc4dbeff34fa2de817619963ec0ec2597d04db3', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: '24509194d7cb291ee7930039f42dcea780f0bcf3', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
+            h("div", { key: '72226f2004fa4334e1b270d790e182b0c5b9dd05', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '126fdd0362b424918cff1e84d95a40b529693a57', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: '7d5ea3f933dd8fada375e98110ceddc55176c792', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            h("span", { key: '7902e66e2e74303c43dae40fae7993b71dff7ace', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: '4a97955f0d4aa46206d85209fa1c8cde20c664aa', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
         ];
     }
 };

package/dist/esm/bs-inline-tab.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3SkQJpw.js';
 
-const bsInlineTabCss = () => `:host{display:inline-block;--bs-inline-tab-radius:var(--bs-border-radius-full);--bs-inline-tab-padding-y:var(--bs-spacing-100);--bs-inline-tab-padding-x:var(--bs-spacing-200);--bs-inline-tab-padding-left-with-icon:var(--bs-spacing-150);--bs-inline-tab-padding-right-with-icon:var(--bs-spacing-200);--bs-inline-tab-gap:var(--bs-spacing-50);--bs-inline-tab-bg-default:var(--bs-color-neutral-container);--bs-inline-tab-color-default:var(--bs-text-secondary);--bs-inline-tab-bg-hover:var(--bs-color-neutral-container-hover);--bs-inline-tab-color-hover:var(--bs-text-default);--bs-inline-tab-bg-focus:var(--bs-color-neutral-container-focused);--bs-inline-tab-bg-pressed:var(--bs-color-neutral-container-pressed);--bs-inline-tab-focus-ring-color:var(--bs-border-neutral-focus);--bs-inline-tab-bg-disabled:var(--bs-surface-action-disabled);--bs-inline-tab-color-disabled:var(--bs-text-on-disabled);--bs-inline-tab-bg-selected:var(--bs-color-primary-default);--bs-inline-tab-color-selected:var(--bs-text-on-action);--bs-inline-tab-bg-selected-hover:var(--bs-color-primary-hover);--bs-inline-tab-bg-selected-focus:var(--bs-color-primary-focused);--bs-inline-tab-bg-selected-pressed:var(--bs-color-primary-pressed);--bs-inline-tab-font-size:var(--bs-font-size-sm);--bs-inline-tab-font-weight:var(--bs-font-weight-semibold);--bs-inline-tab-line-height:var(--bs-line-height-body-sm)}.bs-inline-tab{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-family:inherit;border-radius:var(--bs-inline-tab-radius);padding:var(--bs-inline-tab-padding-y) var(--bs-inline-tab-padding-x);background:var(--bs-inline-tab-bg-default);color:var(--bs-inline-tab-color-default);transition:color var(--bs-duration-fast) var(--bs-easing-standard),     background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-inline-tab--has-icon{padding-top:var(--bs-inline-tab-padding-y);padding-bottom:var(--bs-inline-tab-padding-y);padding-inline-start:var(--bs-inline-tab-padding-left-with-icon);padding-inline-end:var(--bs-inline-tab-padding-right-with-icon);gap:var(--bs-inline-tab-gap)}.bs-inline-tab:focus-visible{outline:2px solid var(--bs-inline-tab-focus-ring-color);outline-offset:2px}.bs-inline-tab:not(.bs-inline-tab--selected):not(.bs-inline-tab--disabled):hover{background:var(--bs-inline-tab-bg-hover);color:var(--bs-inline-tab-color-hover)}.bs-inline-tab:not(.bs-inline-tab--selected):not(.bs-inline-tab--disabled):focus-visible{background:var(--bs-inline-tab-bg-focus);color:var(--bs-inline-tab-color-hover)}.bs-inline-tab:not(.bs-inline-tab--selected):not(.bs-inline-tab--disabled):active{background:var(--bs-inline-tab-bg-pressed);color:var(--bs-inline-tab-color-hover)}.bs-inline-tab--selected{background:var(--bs-inline-tab-bg-selected);color:var(--bs-inline-tab-color-selected)}.bs-inline-tab--selected:not(.bs-inline-tab--disabled):hover{background:var(--bs-inline-tab-bg-selected-hover)}.bs-inline-tab--selected:not(.bs-inline-tab--disabled):focus-visible{background:var(--bs-inline-tab-bg-selected-focus)}.bs-inline-tab--selected:not(.bs-inline-tab--disabled):active{background:var(--bs-inline-tab-bg-selected-pressed)}.bs-inline-tab--disabled{background:var(--bs-inline-tab-bg-disabled);color:var(--bs-inline-tab-color-disabled);cursor:not-allowed}.bs-inline-tab__icon{display:none;width:24px;height:24px;flex-shrink:0;color:inherit}.bs-inline-tab__icon--has-content{display:inline-flex;align-items:center;justify-content:center}.bs-inline-tab__icon ::slotted(svg){width:24px;height:24px}.bs-inline-tab__label{display:none;font-size:var(--bs-inline-tab-font-size);font-weight:var(--bs-inline-tab-font-weight);line-height:calc(var(--bs-inline-tab-line-height) * 1px);white-space:nowrap}.bs-inline-tab__label--has-content{display:inline-block}`;
+const bsInlineTabCss = () => `:host{display:inline-block;--bs-inline-tab-radius:var(--bs-border-radius-full);--bs-inline-tab-padding-y:var(--bs-spacing-100);--bs-inline-tab-padding-x:var(--bs-spacing-200);--bs-inline-tab-padding-left-with-icon:var(--bs-spacing-150);--bs-inline-tab-padding-right-with-icon:var(--bs-spacing-200);--bs-inline-tab-gap:var(--bs-spacing-50);--bs-inline-tab-bg-default:var(--bs-color-neutral-container);--bs-inline-tab-color-default:var(--bs-text-secondary);--bs-inline-tab-bg-hover:var(--bs-color-neutral-container-hover);--bs-inline-tab-color-hover:var(--bs-text-default);--bs-inline-tab-bg-focus:var(--bs-color-neutral-container-focused);--bs-inline-tab-bg-pressed:var(--bs-color-neutral-container-pressed);--bs-inline-tab-focus-ring-color:var(--bs-border-neutral-focus);--bs-inline-tab-bg-disabled:var(--bs-surface-action-disabled);--bs-inline-tab-color-disabled:var(--bs-text-on-disabled);--bs-inline-tab-bg-selected:var(--bs-color-primary-default);--bs-inline-tab-color-selected:var(--bs-text-on-action);--bs-inline-tab-bg-selected-hover:var(--bs-color-primary-hover);--bs-inline-tab-bg-selected-focus:var(--bs-color-primary-focused);--bs-inline-tab-bg-selected-pressed:var(--bs-color-primary-pressed);--bs-inline-tab-font-size:var(--bs-font-size-sm);--bs-inline-tab-font-weight:var(--bs-font-weight-semibold);--bs-inline-tab-line-height:var(--bs-line-height-body-sm)}.bs-inline-tab{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-family:inherit;border-radius:var(--bs-inline-tab-radius);padding:var(--bs-inline-tab-padding-y) var(--bs-inline-tab-padding-x);background:var(--bs-inline-tab-bg-default);color:var(--bs-inline-tab-color-default);transition:color var(--bs-duration-fast) var(--bs-easing-standard),     background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-inline-tab--has-icon{padding-top:var(--bs-inline-tab-padding-y);padding-bottom:var(--bs-inline-tab-padding-y);padding-inline-start:var(--bs-inline-tab-padding-left-with-icon);padding-inline-end:var(--bs-inline-tab-padding-right-with-icon);gap:var(--bs-inline-tab-gap)}.bs-inline-tab:focus-visible{outline:2px solid var(--bs-inline-tab-focus-ring-color);outline-offset:2px}.bs-inline-tab:not(.bs-inline-tab--selected):not(.bs-inline-tab--disabled):hover{background:var(--bs-inline-tab-bg-hover);color:var(--bs-inline-tab-color-hover)}.bs-inline-tab:not(.bs-inline-tab--selected):not(.bs-inline-tab--disabled):focus-visible{background:var(--bs-inline-tab-bg-focus);color:var(--bs-inline-tab-color-hover)}.bs-inline-tab:not(.bs-inline-tab--selected):not(.bs-inline-tab--disabled):active{background:var(--bs-inline-tab-bg-pressed);color:var(--bs-inline-tab-color-hover)}.bs-inline-tab--selected{background:var(--bs-inline-tab-bg-selected);color:var(--bs-inline-tab-color-selected)}.bs-inline-tab--selected:not(.bs-inline-tab--disabled):hover{background:var(--bs-inline-tab-bg-selected-hover)}.bs-inline-tab--selected:not(.bs-inline-tab--disabled):focus-visible{background:var(--bs-inline-tab-bg-selected-focus)}.bs-inline-tab--selected:not(.bs-inline-tab--disabled):active{background:var(--bs-inline-tab-bg-selected-pressed)}.bs-inline-tab--disabled{background:var(--bs-inline-tab-bg-disabled);color:var(--bs-inline-tab-color-disabled);cursor:not-allowed}.bs-inline-tab__icon{display:none;width:24px;height:24px;flex-shrink:0;color:inherit}.bs-inline-tab__icon--has-content{display:inline-flex;align-items:center;justify-content:center}.bs-inline-tab__icon ::slotted(svg){width:24px;height:24px}.bs-inline-tab__label{display:none;font-size:var(--bs-inline-tab-font-size);font-weight:var(--bs-inline-tab-font-weight);line-height:calc(var(--bs-inline-tab-line-height) * 1px);white-space:nowrap}.bs-inline-tab__label--has-content{display:inline-block}`;
 
 const BsInlineTab = class {
     constructor(hostRef) {
@@ -67,7 +67,7 @@ const BsInlineTab = class {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: 'ec19773b2ad2363cb5f6dc1f3f845db3755c3d13', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: '561fa96dd2f01fe03b1bdb30675be98aec9e33ef', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'c1f0d97a04e41fccd22fb412b3019fd0d63b0cc6', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '07f4873273ef9e91c472344bbdf97b6915d4b14f', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '3bc180fa828034358155abd397aa68661f09fcf3', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: '8dc1570ed12bc71fd69e9fee3fe1159006785b52', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("bs-ripple", { key: 'd7548736d118b53c5b0e3fa36af2e3ff8c7a6b5f', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'd5f1355d7b9fe756edc2a503bf32c9feafcb3ffc', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'ed0d0de3d21804e233b0593b96aebb9bbd07ac80', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '6ab027e86d0d3d1c47e3e22bb53e7f846b32031c', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '90b51e5ead7fb092ee1ee2f81b68709550b00b32', onSlotchange: this.onLabelSlotchange }))));
     }
 };
 BsInlineTab.style = bsInlineTabCss();

package/dist/esm/bs-input_3.entry.js

@@ -366,10 +366,10 @@ const BsInput = class {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: '99df53d78ddc715d336738a27efeb3d64140a9c7', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: 'a462df7f8f0e0a78a90cadb6453cbccd120e9baf', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '27f894fedaf23ded0432d9f26e80a9dd4d2bbb8e', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '4260924b6128864a17ae809e5e54bc3f5aff5b64', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '7aebd73c573b3fb1b26ea0ca0959db890073d9f5', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '40bb309ab983fbccd797e878aa78e612e65c6b56', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
@@ -420,12 +420,12 @@ const BsMenu = class {
         items[next].shadowRoot?.querySelector('button')?.focus();
     }
     render() {
-        return (h("div", { key: '8acfe07941922ce4ad0bbb5eef11bb6eecba2c08', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'a3482ba2653512937d3c1f2b4fa798f1bd81859c' })));
+        return (h("div", { key: 'b6cc3be6f6df9dab73a50bc0c398ec48e9c81c04', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'ee7a51748f40144e04f9deac9117b175e9cc2f3d' })));
     }
 };
 BsMenu.style = bsMenuCss();
 
-const bsMenuItemCss = () => `:host{display:block;--bs-menu-item-radius:var(--bs-border-radius-100);--bs-menu-item-padding-y:var(--bs-spacing-100);--bs-menu-item-padding-x:var(--bs-spacing-150);--bs-menu-item-gap:var(--bs-spacing-100);--bs-menu-item-hover:var(--bs-color-neutral-container-hover);--bs-menu-item-pressed:var(--bs-color-neutral-container-pressed);--bs-menu-item-disabled-bg:var(--bs-surface-action-disabled);--bs-menu-item-icon-color:var(--bs-icon-default);--bs-menu-item-icon-color-disabled:var(--bs-icon-disabled);--bs-menu-item-color:var(--bs-text-muted);--bs-menu-item-color-disabled:var(--bs-text-on-disabled);--bs-menu-item-font-size:var(--bs-font-size-md);--bs-menu-item-line-height:var(--bs-line-height-body-md)}.bs-menu-item{box-sizing:border-box;display:flex;align-items:center;width:100%;height:48px;border:none;cursor:pointer;background:transparent;color:var(--bs-menu-item-color);font-family:inherit;border-radius:var(--bs-menu-item-radius);padding:var(--bs-menu-item-padding-y) var(--bs-menu-item-padding-x);gap:var(--bs-menu-item-gap);transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-menu-item:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-menu-item:hover{background:var(--bs-menu-item-hover)}.bs-menu-item:active{background:var(--bs-menu-item-pressed)}.bs-menu-item--disabled{background:var(--bs-menu-item-disabled-bg);color:var(--bs-menu-item-color-disabled);cursor:not-allowed}.bs-menu-item--disabled:hover,.bs-menu-item--disabled:active{background:var(--bs-menu-item-disabled-bg)}.bs-menu-item--disabled .bs-menu-item__icon{color:var(--bs-menu-item-icon-color-disabled)}.bs-menu-item__icon{display:none;width:24px;height:24px;flex-shrink:0;color:var(--bs-menu-item-icon-color)}.bs-menu-item__icon--has-content{display:inline-flex;align-items:center;justify-content:center}.bs-menu-item__icon ::slotted(svg){width:24px;height:24px}.bs-menu-item__label{font-size:var(--bs-menu-item-font-size);line-height:calc(var(--bs-menu-item-line-height) * 1px);white-space:nowrap}`;
+const bsMenuItemCss = () => `:host{display:block;--bs-menu-item-radius:var(--bs-border-radius-100);--bs-menu-item-padding-y:var(--bs-spacing-100);--bs-menu-item-padding-x:var(--bs-spacing-150);--bs-menu-item-gap:var(--bs-spacing-100);--bs-menu-item-hover:var(--bs-color-neutral-container-hover);--bs-menu-item-pressed:var(--bs-color-neutral-container-pressed);--bs-menu-item-disabled-bg:var(--bs-surface-action-disabled);--bs-menu-item-icon-color:var(--bs-icon-default);--bs-menu-item-icon-color-disabled:var(--bs-icon-disabled);--bs-menu-item-color:var(--bs-text-muted);--bs-menu-item-color-disabled:var(--bs-text-on-disabled);--bs-menu-item-font-size:var(--bs-font-size-md);--bs-menu-item-line-height:var(--bs-line-height-body-md)}.bs-menu-item{position:relative;box-sizing:border-box;display:flex;align-items:center;width:100%;height:48px;border:none;cursor:pointer;background:transparent;color:var(--bs-menu-item-color);font-family:inherit;border-radius:var(--bs-menu-item-radius);padding:var(--bs-menu-item-padding-y) var(--bs-menu-item-padding-x);gap:var(--bs-menu-item-gap);transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-menu-item:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-menu-item:hover{background:var(--bs-menu-item-hover)}.bs-menu-item:active{background:var(--bs-menu-item-pressed)}.bs-menu-item--disabled{background:var(--bs-menu-item-disabled-bg);color:var(--bs-menu-item-color-disabled);cursor:not-allowed}.bs-menu-item--disabled:hover,.bs-menu-item--disabled:active{background:var(--bs-menu-item-disabled-bg)}.bs-menu-item--disabled .bs-menu-item__icon{color:var(--bs-menu-item-icon-color-disabled)}.bs-menu-item__icon{display:none;width:24px;height:24px;flex-shrink:0;color:var(--bs-menu-item-icon-color)}.bs-menu-item__icon--has-content{display:inline-flex;align-items:center;justify-content:center}.bs-menu-item__icon ::slotted(svg){width:24px;height:24px}.bs-menu-item__label{font-size:var(--bs-menu-item-font-size);line-height:calc(var(--bs-menu-item-line-height) * 1px);white-space:nowrap}`;
 
 const BsMenuItem = class {
     constructor(hostRef) {
@@ -449,7 +449,7 @@ const BsMenuItem = class {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '09c4e8582ce6a31ff4aa293e20c3d7f1caa6e845', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: 'ecfc57bc3eab836edd5f0ef0d009da8ccbbce563', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '8eb2a0b480c7fbe7aa17ec5cd193764353a394e9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'e67b7512fd58b0e0847b5d3d14658cfc1bd4a00c', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '466a45cb85e7cdadde2fb994243689873482d65c' }))));
+        return (h("button", { key: 'a6022e318de72f62cf5b4be5c924d472221b4cff', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("bs-ripple", { key: '5c330b32fb6450c9015ea5549ec522bbab0a3ac0', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '16fece8c1363813f05410e120be8bdee4281ccfa', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: 'e8ceb7834a709543718dd0145d753fb186a74489', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '7ddb04608737ffeb097bebcdb5c00f825e058b9f', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'd24f52e58bfb3629ba8512e17e41844ad0b3baab' }))));
     }
 };
 BsMenuItem.style = bsMenuItemCss();

package/dist/esm/bs-key-caps.entry.js

@@ -29,7 +29,7 @@ const BsKeyCaps = class {
     render() {
         const keys = this.keyList();
         const name = this.label ?? (keys.length ? keys.join(' plus ') : undefined);
-        return (h("span", { key: 'd2396eec919fbad20d6152faf4786d1bcfac9042', part: "container", class: "bs-key-caps", role: "group", "aria-label": name, "aria-disabled": this.disabled ? 'true' : undefined }, keys.map(k => (h("bs-key", { label: k }))), h("slot", { key: '9f4facb9f8d6ce6079facc16d260a41f48e54470' })));
+        return (h("span", { key: '53c116e6e8a19e8d02f1c0062054ba2446f7e7fc', part: "container", class: "bs-key-caps", role: "group", "aria-label": name, "aria-disabled": this.disabled ? 'true' : undefined }, keys.map(k => (h("bs-key", { label: k }))), h("slot", { key: '05d08db73dd84fdc420ea4346bf5b6b4431c5ffc' })));
     }
 };
 BsKeyCaps.style = bsKeyCapsCss();

package/dist/esm/bs-key.entry.js

@@ -18,7 +18,7 @@ const BsKey = class {
         this.hasIcon = ev.target.assignedNodes().length > 0;
     };
     render() {
-        return (h("kbd", { key: 'ebd13e9ce82e11cb2868adaf1d9dfc38a261bf26', part: "container", class: "bs-key" }, !this.hasIcon && (h("span", { key: 'abb27af837ff8a82bc976841a04a2ef3d0386cdd', part: "label", class: "bs-key__label" }, h("slot", { key: 'e28affc720c80cf40edba55229e7df67e79a579b' }, this.label))), h("span", { key: 'c88fb0200102cfcd6e3b3b84218de6fcfddf06b8', part: "icon", class: { 'bs-key__icon': true, 'bs-key__icon--hidden': !this.hasIcon } }, h("slot", { key: '4043e70a46538183913b6275ba569fb75c078c27', name: "icon", onSlotchange: this.onIconSlotChange }))));
+        return (h("kbd", { key: 'e84e287f0dd4b06bc63839a8b8bfccfac064bdd2', part: "container", class: "bs-key" }, !this.hasIcon && (h("span", { key: '625fff9396a1d12863cb7eacfd0adf021a70835d', part: "label", class: "bs-key__label" }, h("slot", { key: '62f75a400443b6719994800e0050469d16939197' }, this.label))), h("span", { key: '3a989710a0d213de963feb4c51eb950fa46add68', part: "icon", class: { 'bs-key__icon': true, 'bs-key__icon--hidden': !this.hasIcon } }, h("slot", { key: '62ca858bdc844d645701096b6b72ef6291abceb9', name: "icon", onSlotchange: this.onIconSlotChange }))));
     }
 };
 BsKey.style = bsKeyCss();

package/dist/esm/bs-keyboard-shortcuts.entry.js

@@ -99,10 +99,10 @@ const BsKeyboardShortcuts = class {
         const headId = `${this.id}-heading`;
         const noResults = count === 0 && (this.query ?? '').trim() !== '';
         let gi = 0;
-        return (h("bs-card", { key: '602e1b2fbeb09dc848435562c3188f784a96a26f', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, h("div", { key: '1ad1ad5d14769b755362b1c965390d929d190a81', class: "bs-keyboard-shortcuts__body" }, h("div", { key: '86e635b3e14a47fa5df69983f9fab132ab8b334c', part: "head", class: "bs-keyboard-shortcuts__head" }, h("svg", { key: '1b7c59483a38971e214126b309e2f62c7f69457c', class: "bs-keyboard-shortcuts__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("rect", { key: 'e70a9a55b1fa027dbaa50870dd79d2c2b4805efd', x: "2", y: "5", width: "20", height: "14", rx: "2" }), h("path", { key: '17c1bf9e1f044b802f1538a70da58334e1b328c4', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), h("h4", { key: '06466a27347a74bb61ab23f0a57ec19b8fd3feb7', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, h("slot", { key: '307d0611ceffa704345f1a138796e76df9101162', name: "heading" }, this.heading)), h("bs-icon-button", { key: 'a9126801a045b8e95301a2fd6cfcbae20e9ef29b', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '472f6467736f6baadd13ed4f723107be92dc9147', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'b20530074ac46a1764f613f02c9aca7be9771c40', d: "M6 6l12 12M18 6 6 18" })))), h("bs-input", { key: '94eb5e7ac066359e150681a0b9016da7e98d45b0', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (h("div", { key: 'b51f32af80233153e3f2e957e364e82e8458b0d5', part: "switch", class: "bs-keyboard-shortcuts__switch" }, h("div", { key: '5c043a1b80b20fc9b636b293a3e0782807d3fa0c', class: "bs-keyboard-shortcuts__switch-text" }, h("span", { key: 'bcc7015e1084d3479ff257fdc50e12b813d90bbd', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), h("span", { key: '43b88ef5e2368da7f1304c6c6c05c125a87132f8', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), h("bs-switch", { key: 'b7d95ac144d87947f64199ea9cf83eb108a2f00c', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), h("span", { key: 'd6d155b36ca413bca0978addbe1a82370d71c645', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
+        return (h("bs-card", { key: '79e5266a0337b073391c6c82c629086f3f5a6dce', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, h("div", { key: 'ad81f8b924d8d2d5462efd14e3201746fb00d04b', class: "bs-keyboard-shortcuts__body" }, h("div", { key: '54a8c9ea691523fe7f4c3f41157ffcaa814fff91', part: "head", class: "bs-keyboard-shortcuts__head" }, h("svg", { key: 'd11295fa495307b9d2117b5efda0be187eabbafb', class: "bs-keyboard-shortcuts__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("rect", { key: 'ff8e19a76fc9c2d21605d9d7e5642465a0b0977b', x: "2", y: "5", width: "20", height: "14", rx: "2" }), h("path", { key: 'e71f72087979fd4114439ca7db3722e5eba298d4', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), h("h4", { key: 'b5fb4a70cedbf7104abdc873c147e1f0986cfcd5', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, h("slot", { key: 'c4d748a98ef98e02a26476c4c8b853d3e77bad11', name: "heading" }, this.heading)), h("bs-icon-button", { key: 'aff51431172e892da6de1181bf3344eca2909e76', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: 'eb80c782f7af169f434b4ff142c961f85eef3306', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'c576a6aeca7ad33fb18922d6f6b327ac6e2aab5d', d: "M6 6l12 12M18 6 6 18" })))), h("bs-input", { key: '200bfa90b61cc7a8ecdde7f373fd6b0c7f438e7c', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (h("div", { key: '41584586700e0589f078e996ab54497401c87059', part: "switch", class: "bs-keyboard-shortcuts__switch" }, h("div", { key: '4987a67e712f50b2259c2a4cd2d945adc14a2786', class: "bs-keyboard-shortcuts__switch-text" }, h("span", { key: '410cc42bbb55207ec1f8c6f18c6a6ed07eab58b5', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), h("span", { key: '55cf6495958aa22f6470fd852ca4fae07195b5bc', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), h("bs-switch", { key: 'b7538cbce99447c3ac03c1dedceff7a4a84941f2', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), h("span", { key: '993d7c182bce54e4a0faad2873ab9a8a3257bfd7', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
             const tid = `${this.id}-g${gi++}`;
             return (h("div", { part: "group", class: "bs-keyboard-shortcuts__group", role: "group", "aria-labelledby": tid }, h("div", { part: "group-title", id: tid, class: "bs-keyboard-shortcuts__group-title" }, g.title), h("div", { class: "bs-keyboard-shortcuts__rows", role: "list" }, g.shortcuts.map(s => (h("bs-shortcut-row", { part: "row", action: s.action, keys: s.keys, selectionRole: "listitem", disabled: !!s.disabled || (!this.singleKeyEnabled && isSingleKey(s)) }))))));
-        })))))), this.showFooterHint && (h("div", { key: 'b61974f27c2909fe207e3e604b06ed408516a810', part: "footer", class: "bs-keyboard-shortcuts__footer" }, h("slot", { key: '44c2ddc9cd9e99418ee4edaf030e51f663bee47b', name: "footer" }, h("span", { key: '9679714a84380363982b4d7111bdc424547e4aa8' }, this.footerPrefix), h("bs-key", { key: '2945e09a15994b15753bad68530700020e666968', label: this.footerKey }), h("span", { key: '90fe405d4aeebb0dbd31d291e85dee48c12f6258' }, this.footerText)))))));
+        })))))), this.showFooterHint && (h("div", { key: '4b980ff2fa253a36021615fe9a9203707a728b64', part: "footer", class: "bs-keyboard-shortcuts__footer" }, h("slot", { key: 'b72e0707aef77ffd10c192a622a2c0bc6f387b29', name: "footer" }, h("span", { key: '1324c58fd399271b2f0d983306b39f734e6e2d7f' }, this.footerPrefix), h("bs-key", { key: '47d4279c83abd23982bb4030582a7c21262e99ce', label: this.footerKey }), h("span", { key: '8ab0550e4d65d4c85e8ff3395f5bc230f9faacf8' }, this.footerText)))))));
     }
 };
 BsKeyboardShortcuts.style = bsKeyboardShortcutsCss();

package/dist/esm/bs-list-item_2.entry.js

@@ -0,0 +1,258 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-D3SkQJpw.js';
+import { c as cancelMotion, r as readMotion, p as play } from './motion-BSt9HeTa.js';
+
+const bsListItemCss = () => `:host{display:block;width:100%;box-sizing:border-box;outline:none;color:var(--bs-list-item-color);--bs-list-item-min-height:var(--bs-spacing-1000);--bs-list-item-padding-y:var(--bs-spacing-150);--bs-list-item-padding-x:var(--bs-spacing-200);--bs-list-item-gap:var(--bs-spacing-200);--bs-list-item-content-gap:var(--bs-spacing-25);--bs-list-item-radius:var(--bs-border-radius-100);--bs-list-item-bg:transparent;--bs-list-item-bg-hover:var(--bs-surface-hover);--bs-list-item-bg-pressed:var(--bs-surface-pressed);--bs-list-item-bg-focus:var(--bs-surface-focus);--bs-list-item-bg-selected:var(--bs-surface-selected);--bs-list-item-bg-selected-hover:var(--bs-surface-selected-hover);--bs-list-item-bg-selected-pressed:var(--bs-surface-selected-pressed);--bs-list-item-bg-selected-focus:var(--bs-surface-selected-focus);--bs-list-item-bg-disabled:var(--bs-surface-action-disabled);--bs-list-item-color:var(--bs-text-default);--bs-list-item-color-disabled:var(--bs-text-on-disabled);--bs-list-item-focus-ring:var(--bs-border-neutral-focus);--bs-list-item-image-width:72px;--bs-list-item-image-height:56px}.bs-list-item{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-list-item-gap);width:100%;min-height:var(--bs-list-item-min-height);padding:var(--bs-list-item-padding-y) var(--bs-list-item-padding-x);border-radius:var(--bs-list-item-radius);overflow:clip;background:var(--bs-list-item-bg);color:var(--bs-list-item-color);font-family:inherit;font-size:var(--bs-font-size-md);line-height:calc(var(--bs-line-height-body-md) * 1px);transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}:host([selected]) .bs-list-item{background:var(--bs-list-item-bg-selected)}:host(.bs-list-item--interactive){cursor:pointer}:host(.bs-list-item--interactive:hover) .bs-list-item{background:var(--bs-list-item-bg-hover)}:host(.bs-list-item--interactive[selected]:hover) .bs-list-item{background:var(--bs-list-item-bg-selected-hover)}:host(.bs-list-item--interactive:active) .bs-list-item{background:var(--bs-list-item-bg-pressed)}:host(.bs-list-item--interactive[selected]:active) .bs-list-item{background:var(--bs-list-item-bg-selected-pressed)}:host(:focus-visible) .bs-list-item{background:var(--bs-list-item-bg-focus);outline:2px solid var(--bs-list-item-focus-ring);outline-offset:2px}:host([selected]:focus-visible) .bs-list-item{background:var(--bs-list-item-bg-selected-focus)}:host([disabled]){color:var(--bs-list-item-color-disabled);cursor:default}:host([disabled]) .bs-list-item{background:var(--bs-list-item-bg-disabled);color:var(--bs-list-item-color-disabled)}:host([disabled]) ::slotted(img),:host([disabled]) ::slotted(bs-avatar){opacity:0.5}.bs-list-item__leading{display:none;flex-shrink:0;align-items:center}.bs-list-item__leading--has-content{display:flex}::slotted(img[slot='leading']){display:block;width:var(--bs-list-item-image-width);height:var(--bs-list-item-image-height);border-radius:var(--bs-border-radius-100);object-fit:cover}::slotted(svg[slot='leading']){width:32px;height:32px}.bs-list-item__content{display:flex;flex-direction:column;gap:var(--bs-list-item-content-gap);flex:1 1 0;min-width:0}.bs-list-item__label{font-weight:var(--bs-font-weight-semibold)}.bs-list-item__description,.bs-list-item__support{font-weight:var(--bs-font-weight-regular)}.bs-list-item__trailing{display:none;flex-shrink:0;align-items:center;height:32px}.bs-list-item__trailing--shown{display:flex}@media (prefers-reduced-motion: reduce){.bs-list-item{transition:none}}`;
+
+const BsListItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsItemClick = createEvent(this, "bsItemClick");
+    }
+    get el() { return getElement(this); }
+    /** First text line (semibold). */
+    label = null;
+    /** Second text line (the "paragraph"). */
+    description = null;
+    /** Optional third text line. */
+    supportText = null;
+    /** Marks the row as selected. Managed by the parent `bs-list` when it is `selectable`. */
+    selected = false;
+    /** Disables the row: dimmed, not focusable, no click event. */
+    disabled = false;
+    /** Shows a trailing caret (unless the `trailing` slot has content). */
+    showArrow = false;
+    /** Identifies the item; emitted by `bsItemClick` and matched against `bs-list`'s `value`. */
+    value = null;
+    /** Makes a standalone row a focusable `role="button"` that emits `bsItemClick`. */
+    interactive = false;
+    /** Set by the parent `bs-list`: `listitem` (plain list) or `option` (selectable list). Do not set by hand. */
+    selectionRole = null;
+    hasLeading = false;
+    hasTrailing = false;
+    hasDefault = false;
+    /** Fires on click / Enter / Space when the row is interactive and not disabled. Payload is `value`. */
+    bsItemClick;
+    get isInteractive() {
+        return this.selectionRole === 'option' || this.interactive;
+    }
+    activate() {
+        if (this.disabled || !this.isInteractive)
+            return;
+        this.bsItemClick.emit(this.value);
+    }
+    onClick() {
+        this.activate();
+    }
+    onKeyDown(ev) {
+        if (ev.target !== this.el)
+            return;
+        if (ev.key === 'Enter' || ev.key === ' ') {
+            ev.preventDefault();
+            this.activate();
+        }
+    }
+    slotHas = (ev) => ev.target.assignedNodes({ flatten: true }).some(n => n.nodeType === 1 || (n.textContent || '').trim() !== '');
+    render() {
+        const interactive = this.isInteractive;
+        const role = this.selectionRole === 'option' ? 'option' : this.selectionRole === 'listitem' ? 'listitem' : this.interactive ? 'button' : undefined;
+        const standaloneFocusable = this.interactive && !this.selectionRole && !this.disabled;
+        const showTrailing = this.showArrow || this.hasTrailing;
+        return (h(Host, { key: 'a4036266a279faf010db1b74aafec4e82574e921', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: '5536afa9b97d2813b04ae1b81731a9a9598f326a', part: "container", class: "bs-list-item" }, interactive && !this.disabled && h("bs-ripple", { key: 'b88b81c3aa539eb54f275ec26c63049e9f3c8163', part: "ripple" }), h("div", { key: 'c297bb864a5744e51ef7053e1ee965cd5bb4184b', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: '7f67174fcaff9518c2b5b6303b0ea817f1a151c0', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: 'dc21fd490e75685ca49619f4eafb76e175c4d15d', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: '857cb18376ff874ae8f651f4b354a7e01c4992d0', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: '0c21f5a9300f1ef3ebd633e22467f05ccc4d4bc7', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: '0b5aa6198aec09d9a4a7cd3086407e71bd3daf99', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: 'ce13d14cb3d11f7ec93782dae33e83e802f56e5b', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '723bf038e7b070a17080c15183a8ea1b3b4abe79', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: '48057fb7c77264a761185f029a3f8a8c55f3eed4', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: 'b13854ebfc8bfe7571f91ffd0b1d15043c4edf5d', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: '386a20723c7b54845ef2fff0b2292828775f3c06', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+    }
+};
+BsListItem.style = bsListItemCss();
+
+const bsPopoverCss = () => `:host{display:inline-block;position:relative;--bs-popover-bg:var(--bs-surface-raised);--bs-popover-radius:var(--bs-border-radius-100);--bs-popover-shadow:var(--bs-shadow-md);--bs-popover-offset:var(--bs-spacing-100);--bs-popover-min-width:var(--bs-scale-1600);--bs-popover-z-index:var(--bs-z-index-popover);--bs-popover-duration:var(--bs-duration-fast);--bs-popover-easing:var(--bs-easing-standard);--bs-popover-distance:var(--bs-spacing-50)}.bs-popover__trigger{display:inline-block}.bs-popover__popup{position:absolute;z-index:var(--bs-popover-z-index);min-width:var(--bs-popover-min-width);background:var(--bs-popover-bg);border-radius:var(--bs-popover-radius);box-shadow:var(--bs-popover-shadow);top:calc(100% + var(--bs-popover-offset));left:0}.bs-popover__popup{outline:none}.bs-popover__popup[hidden]{display:none}:host([data-placement='bottom-start']) .bs-popover__popup{top:calc(100% + var(--bs-popover-offset));bottom:auto;left:0;right:auto}:host([data-placement='bottom-end']) .bs-popover__popup{top:calc(100% + var(--bs-popover-offset));bottom:auto;left:auto;right:0}:host([data-placement='top-start']) .bs-popover__popup{top:auto;left:0;right:auto;bottom:calc(100% + var(--bs-popover-offset))}:host([data-placement='top-end']) .bs-popover__popup{top:auto;left:auto;right:0;bottom:calc(100% + var(--bs-popover-offset))}`;
+
+let popoverId = 0;
+const BsPopover = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsOpenChange = createEvent(this, "bsOpenChange");
+    }
+    get el() { return getElement(this); }
+    /** Whether the popup is shown. */
+    open = false;
+    /** Where the popup sits relative to the trigger. */
+    placement = 'bottom-start';
+    /** Emitted when the open state changes through user interaction, with the new value. */
+    bsOpenChange;
+    popupId = `bs-popover-${++popoverId}`;
+    triggerSlot;
+    /** True while the exit motion plays after `open` went false, so the popup stays visible for it. */
+    closing = false;
+    popupEl;
+    enterPending = false;
+    exitPending = false;
+    motionRun = 0;
+    needsFocusIn = false;
+    escaped = false;
+    onOpenChange(next) {
+        this.detach();
+        this.motionRun++;
+        cancelMotion(this.popupEl);
+        if (next) {
+            this.closing = false;
+            this.enterPending = true;
+            document.addEventListener('click', this.onDocClick, true);
+            document.addEventListener('keydown', this.onKeyDown);
+            window.addEventListener('resize', this.reposition);
+            window.addEventListener('scroll', this.reposition, true);
+            this.needsFocusIn = true;
+        }
+        else {
+            this.needsFocusIn = false;
+            if (this.popupEl && !this.popupEl.hidden && readMotion(this.el, 'bs-popover').ms > 0) {
+                // Keep the resolved (possibly flipped) placement while the popup fades out; it is reset when the motion ends.
+                this.closing = true;
+                this.exitPending = true;
+            }
+            else {
+                this.el.setAttribute('data-placement', this.placement);
+            }
+            const active = this.el.shadowRoot?.activeElement || document.activeElement;
+            const focusInside = this.el.contains(document.activeElement) && document.activeElement !== this.triggerSlot?.assignedElements()[0] && !this.isInTrigger(document.activeElement);
+            if (this.escaped || (focusInside && active))
+                this.focusTrigger();
+        }
+        this.escaped = false;
+    }
+    onPlacementChange() {
+        this.reposition();
+    }
+    componentWillLoad() {
+        this.el.setAttribute('data-placement', this.placement);
+    }
+    /** Slides toward the trigger it hangs off: a popup above its trigger rises from below, one below drops from above. */
+    offset(distance) {
+        const above = (this.el.getAttribute('data-placement') ?? this.placement).startsWith('top');
+        return `translateY(${above ? distance : -distance}px)`;
+    }
+    playEnter() {
+        const { ms, easing, distance } = readMotion(this.el, 'bs-popover');
+        if (ms === 0)
+            return;
+        play(this.popupEl, [{ opacity: 0, transform: this.offset(distance) }, { opacity: 1, transform: 'none' }], ms, easing);
+    }
+    playExit() {
+        const { ms, easing, distance } = readMotion(this.el, 'bs-popover');
+        const run = ++this.motionRun;
+        play(this.popupEl, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: this.offset(distance) }], ms, easing, 'forwards').then(() => {
+            if (run !== this.motionRun)
+                return;
+            this.closing = false;
+            this.el.setAttribute('data-placement', this.placement);
+        });
+    }
+    componentDidRender() {
+        if (!this.open && this.closing && this.exitPending) {
+            this.exitPending = false;
+            this.playExit();
+        }
+        if (!this.open)
+            return;
+        this.reposition();
+        if (this.enterPending) {
+            this.enterPending = false;
+            this.playEnter();
+        }
+        if (this.needsFocusIn) {
+            this.needsFocusIn = false;
+            this.focusPopup();
+        }
+    }
+    isInTrigger(node) {
+        const first = this.triggerSlot?.assignedElements() ?? [];
+        return !!node && first.some(t => t.contains(node));
+    }
+    /** Effective placement after collision flipping; mirrored on the host as `data-placement`. */
+    reposition = () => {
+        if (!this.open || !this.popupEl)
+            return;
+        const [v, h] = this.placement.split('-');
+        // Measure from the preferred placement.
+        this.el.setAttribute('data-placement', this.placement);
+        const trig = this.el.getBoundingClientRect();
+        const pop = this.popupEl.getBoundingClientRect();
+        const vh = window.innerHeight;
+        const vw = window.innerWidth;
+        let rv = v;
+        let rh = h;
+        if (v === 'bottom' && pop.bottom > vh && trig.top >= pop.height)
+            rv = 'top';
+        else if (v === 'top' && pop.top < 0 && vh - trig.bottom >= pop.height)
+            rv = 'bottom';
+        if (h === 'start' && pop.right > vw && trig.right >= pop.width)
+            rh = 'end';
+        else if (h === 'end' && pop.left < 0 && vw - trig.left >= pop.width)
+            rh = 'start';
+        this.el.setAttribute('data-placement', `${rv}-${rh}`);
+    };
+    focusPopup() {
+        const sel = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+        const slot = this.popupEl?.querySelector('slot');
+        const assigned = slot?.assignedElements({ flatten: true }) ?? [];
+        for (const a of assigned) {
+            const target = a.matches(sel) ? a : a.querySelector(sel);
+            if (target) {
+                target.focus();
+                return;
+            }
+        }
+        this.popupEl?.focus();
+    }
+    disconnectedCallback() {
+        this.detach();
+    }
+    componentDidLoad() {
+        if (this.open)
+            this.onOpenChange(true);
+    }
+    detach() {
+        document.removeEventListener('click', this.onDocClick, true);
+        document.removeEventListener('keydown', this.onKeyDown);
+        window.removeEventListener('resize', this.reposition);
+        window.removeEventListener('scroll', this.reposition, true);
+    }
+    setOpen(next) {
+        if (this.open === next)
+            return;
+        this.open = next;
+        this.bsOpenChange.emit(next);
+    }
+    focusTrigger() {
+        const first = this.triggerSlot?.assignedElements()[0];
+        first?.focus();
+    }
+    onTriggerKeyDown = (ev) => {
+        if (ev.key === 'ArrowDown' && !this.open) {
+            ev.preventDefault();
+            this.setOpen(true);
+        }
+    };
+    onTriggerClick = () => this.setOpen(!this.open);
+    onDocClick = (ev) => {
+        if (!ev.composedPath().includes(this.el))
+            this.setOpen(false);
+    };
+    onKeyDown = (ev) => {
+        if (ev.key === 'Escape' && this.open) {
+            this.escaped = true;
+            this.setOpen(false);
+        }
+    };
+    render() {
+        return (h("div", { key: '39151f3b9bf56616c0e96cf0c5312d75331d89bb', class: "bs-popover" }, h("div", { key: 'dd05791d8e55c9abf1447761bd3c411b86bc20f4', part: "trigger", class: "bs-popover__trigger", "aria-haspopup": "true", "aria-expanded": String(this.open), "aria-controls": this.popupId, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("slot", { key: '5aaf9d25f29381bc005e2424a43e806d01a74ec4', name: "trigger", ref: el => (this.triggerSlot = el) })), h("div", { key: 'bc734ecdcb751ff09bb5ccdc5829035d8fd56f72', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open && !this.closing, ref: el => (this.popupEl = el) }, h("slot", { key: 'b10ce9654f2c0f899fded5b13bf0d66f841d3f2e' }))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }],
+        "placement": [{
+                "onPlacementChange": 0
+            }]
+    }; }
+};
+BsPopover.style = bsPopoverCss();
+
+export { BsListItem as bs_list_item, BsPopover as bs_popover };

package/dist/esm/bs-list.entry.js

@@ -85,7 +85,7 @@ const BsList = class {
         enabled[next].focus();
     }
     render() {
-        return (h("div", { key: '82a1f810e0044095794fa797075abb025275a973', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: '993e3311f2dd6ff26850676df5af426e574f9297', onSlotchange: () => this.sync() })));
+        return (h("div", { key: '9956c0d827c6ea78a2ed0a93e823555eac9af301', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: '054ef607c962bdb4171e2b3818928f7e1765f692', onSlotchange: () => this.sync() })));
     }
     static get watchers() { return {
         "value": [{