@brandsync/wc 1.15.0 → 1.17.0

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

@@ -312,7 +312,7 @@ const BsDatepicker = class {
             : this.defaultTabbable(days);
         const isInRange = (iso) => !!selectedStart && !!previewEnd && iso > selectedStart && iso < previewEnd;
         const weekdays = this.weekdays();
-        return (h("bs-card", { key: 'd2794a112b72b3dc871360b1e57273c9ef097fc4', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: 'bee55a1cd06aa44171f40babae77b1f2f742d160', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: 'd4ab1cfd76fcea8b64daeb951da7b36300c036f0', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '5fcbb3f928db51049fd034beb3519400afe4f128', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: '18889f8f9dd9364bd73595635b72515b91d35ade', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '3d648cd4be611ef4de37cc08f9017809388d36e3', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: 'c0647871f1c140472807ae51e04604c6d87ccaa4', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: 'ec3d33aeea146534d6640ac336905a002d0e7dc2', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '5cbac8630a30064d940e5f03ce767b525c09dd7c', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '2c47ca0911b8b42cd3590ff053905df327363e9f', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '91a6942792287f3044962fd278e36ed04ec03878', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '445e0548f0913426fe2eb730f291423d9165f839', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
+        return (h("bs-card", { key: '280abccf2d86d04f392f4daeb9811bf34d71dc6b', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: '624706b13929083f05bab4210a5c8444240f8a53', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '69d8f66f154e0e194b77b091bede097407c43902', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '089809f514e4513624749748d639ef6da997618b', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: 'd78f4940665d866752772f69de2e8058390bf6e5', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'f34d431a9f77b036fe4417c033f197c72780c1bf', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '36a37548a0bc04db3416f5e206c0990f0d1189eb', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '3bf5616d93ea0d5f8968691692b2b64ce6334d0b', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '5f9aac5a4e1658051908f5bad88b6c196f6dfea7', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '0515eaeb3cd01b48633675668292cb01634c134a', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '2decbaa1fc82ee83c58ae19cd19bd53c51aabe0d', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '4720f7dbda3ca990885a56d00860eaf4ab7689e8', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
             const row = days.slice(r * 7, r * 7 + 7);
             return (h("div", { class: "bs-datepicker__row", role: "row" }, row.map((d, c) => {
                 const iso = toIso(d);

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

@@ -19,7 +19,7 @@ const BsDivider = class {
         const a11y = this.decorative
             ? { role: 'none', 'aria-hidden': 'true' }
             : { role: 'separator', 'aria-orientation': orientation };
-        return (h(Host, { key: '72be86556d663c54fde0d585ae5850b236389b23', ...a11y }, h("div", { key: 'a08f191d8f900bc88fc0c44be08da1a7d8eb2e3c', class: "line", part: "line" })));
+        return (h(Host, { key: '0146af9f63ddd328e30262cf9767222445da478b', ...a11y }, h("div", { key: 'a621923c43fd326fe5ee6e7223bd5e7103b01e9e', class: "line", part: "line" })));
     }
 };
 BsDivider.style = bsDividerCss();

package/dist/esm/bs-empty-state.entry.js

@@ -0,0 +1,45 @@
+import { r as registerInstance, a as getElement, h } from './index-D3SkQJpw.js';
+
+const bsEmptyStateCss = () => `:host{display:block;box-sizing:border-box;--bs-empty-state-padding-y:var(--bs-spacing-700);--bs-empty-state-padding-x:var(--bs-spacing-300);--bs-empty-state-gap:var(--bs-spacing-150);--bs-empty-state-heading-color:var(--bs-text-default);--bs-empty-state-description-color:var(--bs-text-secondary)}.bs-empty-state{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:var(--bs-empty-state-gap);padding:var(--bs-empty-state-padding-y) var(--bs-empty-state-padding-x);text-align:center}.bs-empty-state__heading{margin:0;align-self:stretch;color:var(--bs-empty-state-heading-color);font-family:inherit;font-size:var(--bs-font-size-xl);font-weight:var(--bs-font-weight-bold);line-height:24px}.bs-empty-state__description{margin:0;align-self:stretch;color:var(--bs-empty-state-description-color);font-family:inherit;font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-regular);line-height:20px}.bs-empty-state__action{display:flex;justify-content:center}`;
+
+const BsEmptyState = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** The heading text. */
+    heading;
+    /** The description text. The default slot overrides it. */
+    description;
+    /** Colour and default glyph of the icon tile. Use `error` for failures. */
+    intent = 'default';
+    /** Heading level, 2 to 6 (renders `h2`..`h6`). Pick the one that fits the page outline. */
+    headingLevel = 3;
+    hasIcon = false;
+    hasDescriptionSlot = false;
+    hasAction = false;
+    observer;
+    componentWillLoad() {
+        this.readSlots();
+        this.observer = new MutationObserver(() => this.readSlots());
+        this.observer.observe(this.el, { childList: true, subtree: false, characterData: false });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    readSlots() {
+        const nodes = Array.from(this.el.childNodes);
+        const slotOf = (n) => (n.nodeType === Node.ELEMENT_NODE ? n.getAttribute('slot') : null);
+        this.hasIcon = nodes.some(n => slotOf(n) === 'icon');
+        this.hasAction = nodes.some(n => slotOf(n) === 'action');
+        this.hasDescriptionSlot = nodes.some(n => !slotOf(n) && (n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim())));
+    }
+    render() {
+        const level = Math.min(6, Math.max(2, Math.round(Number(this.headingLevel)) || 3));
+        const Heading = `h${level}`;
+        return (h("div", { key: '0f841411b4b0f38d29487f3f52f79cb7a281f32a', part: "container", class: "bs-empty-state" }, h("bs-icon-tile", { key: '69c1e66424d966aed5e29582c2947bbfe0725cde', part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { key: '3243c54d7760d27cee1463ffe1acd1d886929a77', name: "icon" })), this.heading && (h(Heading, { key: '06075e06b4917ba28276c8b4c77e7dcc000c6f23', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: '00dab545646803b8ed2f9723e6aa80f620f085a1', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '1a984f1efd3bfbe6e5fd981e2f367ddd25e6f3c7', part: "action", class: "bs-empty-state__action" }, h("slot", { key: 'ea9b962f5652238d74625a11627992f0f4fb34bf', name: "action" })))));
+    }
+};
+BsEmptyState.style = bsEmptyStateCss();
+
+export { BsEmptyState as bs_empty_state };

package/dist/esm/bs-error-page.entry.js

@@ -44,7 +44,7 @@ const BsErrorPage = class {
         const primary = this.primaryLabel ?? d.primary;
         const secondary = this.secondaryLabel ?? d.secondary;
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
-        return (h("bs-card", { key: '68774f7ab0252b92905900f06f564d1c2a8ce163', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: 'f263ce4991e2aa4553e430e60e646df5fc257120', class: "bs-error-page__body" }, h("div", { key: '3aa6b36e1aa05ea63e52e8c79684b166853e5950', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: 'b0b7f3fa925acef6b95e23136df7f9bac3e43ff4', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: 'e33db2aa8c275de0e32effc759e177ef1ee46c6d', name: "icon" }, d.glyph())), code && (h("span", { key: '9f576963f7399e4ca6e86cfd0331f0c7c7119886', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'ea4861b666f95c7416a4d54152f8ffd1b900eb61', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'e0ec38c28b957390486fce52497f91661abc7ef1', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'a2b190366240c9fbe3e7a78a16b9881a3ad4468a', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'bef26b3dcc61c4e968c054d35ed67430884c9f99', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: 'b8de6e83c2c68ca8880afc781e8ffceb03f23164', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+        return (h("bs-card", { key: '376ab30f0eeaf89fb522373b375d0c68eebe8e99', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: '380013c4a4ac5208823856bb565f841e4b9aace3', class: "bs-error-page__body" }, h("div", { key: 'ce3ed8170977a0e2c4b1247140734fa3ba4c4896', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '625d8cef3b2969f15e6ba5e94913359f54f277dd', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: 'e4415c41729cc3e9b52f1c61dfb8906a1d8dcc6a', name: "icon" }, d.glyph())), code && (h("span", { key: 'a6d8d24456746f9da3387c2acae20410382d7b62', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: '4cace21798cbd9f40f2eb493938b5c12db43be97', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'aca6cc9c414530bbb657e02c0910bbc4cae35ae6', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'e5ec7c649b3b49e42e2f8132372e5b1b25f850bf', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '7414d2d76186402404cf36ad662340f30e4b65aa', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: 'cf2fff2d7d2a77dd9f5a1fca1464ae0f687e4b5a', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
     }
 };
 const icon = (children) => () => (h("svg", { class: "bs-error-page__glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, children));

package/dist/esm/bs-file-upload-item.entry.js

@@ -69,7 +69,7 @@ const BsFileUploadItem = class {
     }
     render() {
         const removing = this.state === 'success';
-        return (h("div", { key: 'e109650dda74a0a0db7af7f621da5e70079a7830', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '800f1bd6a8cabd97c0aa43fe9a521876d4e6feb8', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: 'e5696a2cf9d69579ff8fd79688f83879c4093c74', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'bc52ee589c5cf4040dcb1aa86cce0150136d71ae', class: "bs-file-upload-item__content" }, h("div", { key: 'a70dc514e89ebfb1de3e772652e6ab8b2987007a', class: "bs-file-upload-item__meta" }, h("span", { key: '1c0a8e151f284a8344650fb00912582c17d2d5ee', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: 'f608a1ee6e44e34e9e67600622a180e676fb960a', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '5781f2aa401d12d3a4f4b0172d64cb0b9ceacf00', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
+        return (h("div", { key: '02ddff16491c33fa61626bca72275ea0a1037c14', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: 'c465a9216d363ee858933d24abb468d73d66190e', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '5aeaec4d3e9120163dab89c9bb3ca71e8976cae3', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: '3fdf5cb05270ae986e59404758f487932da10fbe', class: "bs-file-upload-item__content" }, h("div", { key: 'eb783412a8f97eaf6d566c06283c0ca0cc735570', class: "bs-file-upload-item__meta" }, h("span", { key: 'a456cfbcbaa19329715d55d80845a6b824bb2d64', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '7810e2855de50d3fa42d7ee29af81e2c58ea1a42', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '7be3bf3d73ec51a2ce3bc23b4e401306c2d6bcc9', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
     }
 };
 // Figma exports, recolored via currentColor so the CSS tokens drive the color.

package/dist/esm/bs-file-upload.entry.js

@@ -98,7 +98,7 @@ const BsFileUpload = class {
             this.handleFiles(files);
     };
     render() {
-        return (h("div", { key: 'd9f116b4dcf8641a590581c24176d4659a2b6892', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: '5aa0c733860505646bde5cad571a4d850d38f979', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: '292d3074620f2a228dbe544363f7ef8cce4f194c', name: "icon" }, h(UploadIcon, { key: '65c343be45634d10d561ba0f7a3cdd201a7664e6' }))), h("div", { key: '69d1ddde89b8c26d7a40a963cf16d1519b5b1fd4', class: "bs-file-upload__content" }, h("div", { key: '7730fdb7efb8eeffb374fff22fdd9d60497eebce', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '0ca349bd1fedd84d869b363da150e13c07623f3b', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: '522d99de1b5caf70cd7e44bf8e821fe49951c788', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'f7af51522dfb762102f0c17bcbfd0e737b52d783', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '71a2262124fd84b52dbffa18966eb1479e1ad95a', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
+        return (h("div", { key: '58fece79d4fb5204ba4edadbdac4a26b5ef3186b', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: '9339e7a61fd8d2d337c442518b0feca4eac56f4e', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'b361ea7dda65426da604485f8d00022520e96643', name: "icon" }, h(UploadIcon, { key: 'fb08c4f2ec4250293ca66ab7a84c0b77599b15b9' }))), h("div", { key: '1ee60fe58d4196a8aaf95d38e7ba1d6aaaf269fb', class: "bs-file-upload__content" }, h("div", { key: '57e91a29e74a9e02831b32e3ab674607a256e68c', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '389ea949446b63bb976071fec70d3e5398d3ebef', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'f6709820df651e915ee7b0073672820478e3c483', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: '29abda9026efccb881b26794ca5441888ef4c02c', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '3ea4af2d866795676c74138f5ce6f75f5cb13111', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
     }
 };
 // Figma's "UploadSimple" icon (3272:50330), exported SVG, recolored via currentColor.

package/dist/esm/bs-global-search.entry.js

@@ -0,0 +1,324 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3SkQJpw.js';
+
+const bsGlobalSearchCss = () => `:host{display:block;position:relative;box-sizing:border-box;width:var(--bs-global-search-width);max-width:100%;--bs-global-search-width:480px;--bs-global-search-panel-radius:var(--bs-border-radius-100);--bs-global-search-panel-padding:var(--bs-spacing-100);--bs-global-search-gap:var(--bs-spacing-100);--bs-global-search-panel-bg:var(--bs-surface-base);--bs-global-search-shadow:0 var(--bs-shadow-position-50) var(--bs-shadow-blur-100) 0 var(--bs-elevation-high);--bs-global-search-z-index:var(--bs-z-index-dropdown);--bs-global-search-divider-color:var(--bs-border-default);--bs-global-search-header-border-color:var(--bs-border-neutral-container);--bs-global-search-header-color:var(--bs-text-muted);--bs-global-search-hint-color:var(--bs-text-secondary)}.bs-global-search{position:relative}.bs-global-search__field bs-input{width:100%}.bs-global-search__panel{position:absolute;top:calc(100% + var(--bs-global-search-gap));left:0;right:0;z-index:var(--bs-global-search-z-index);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-global-search-gap);padding:var(--bs-global-search-panel-padding);overflow:clip;border-radius:var(--bs-global-search-panel-radius);background:var(--bs-global-search-panel-bg);box-shadow:var(--bs-global-search-shadow)}.bs-global-search__list{display:flex;flex-direction:column;gap:var(--bs-global-search-gap)}.bs-global-search__section{display:flex;flex-direction:column}.bs-global-search__section-header{padding:var(--bs-spacing-150) var(--bs-spacing-150) var(--bs-spacing-100);border-bottom:1px solid var(--bs-global-search-header-border-color);color:var(--bs-global-search-header-color);font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);line-height:20px}.bs-global-search__footer{display:flex;align-items:center;gap:var(--bs-spacing-200);padding:var(--bs-spacing-100) var(--bs-spacing-100) var(--bs-spacing-50);border-top:1px solid var(--bs-global-search-divider-color)}.bs-global-search__hint{display:inline-flex;align-items:center;gap:var(--bs-spacing-50);color:var(--bs-global-search-hint-color);font-size:var(--bs-font-size-sm);line-height:20px;white-space:nowrap}.bs-global-search__spacer{flex:1 1 0}.bs-global-search__action{display:flex;align-items:center;min-height:44px;cursor:pointer}.bs-global-search__text-button{--bs-button-height-sm:32px;--bs-button-padding-x-sm:var(--bs-spacing-150);--bs-button-radius:var(--bs-border-radius-100);--bs-button-subtle-color:var(--bs-text-default)}.bs-global-search__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}`;
+
+/** Sections shown per status, in display (and keyboard) order. */
+const SECTIONS = {
+    default: ['recent', 'jump-to'],
+    results: ['top-matches', 'search-in'],
+    empty: [],
+    error: [],
+};
+const ALL_SECTIONS = ['recent', 'jump-to', 'top-matches', 'search-in'];
+let uid = 0;
+const svgProps = {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '1.8',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'aria-hidden': 'true',
+};
+const BsGlobalSearch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsInput = createEvent(this, "bsInput");
+        this.bsSearch = createEvent(this, "bsSearch");
+        this.bsSelect = createEvent(this, "bsSelect");
+        this.bsOpenChange = createEvent(this, "bsOpenChange");
+        this.bsClearRecent = createEvent(this, "bsClearRecent");
+        this.bsClearSearch = createEvent(this, "bsClearSearch");
+        this.bsSeeAll = createEvent(this, "bsSeeAll");
+        this.bsRetry = createEvent(this, "bsRetry");
+    }
+    get el() { return getElement(this); }
+    id = `bs-gs-${++uid}`;
+    itemSeq = 0;
+    observer;
+    inputEl;
+    /** The query. Two-way with the field. */
+    value = '';
+    /** Placeholder of the field (also its accessible name unless `label` is set). */
+    placeholder = 'Search customers, orders, products…';
+    /** Accessible name of the search field. Falls back to the placeholder. `bs-input` has no aria-label prop, so this names the combobox wrapper. */
+    label;
+    /** Disables the field; the panel cannot open. */
+    disabled = false;
+    /** Whether the dropdown panel is open. Opens on focus, click and typing; closes on Escape, outside click and selection. */
+    open = false;
+    /** Which view the panel shows. You choose it; nothing is inferred from `value`. */
+    status = 'default';
+    /** Total number of results (status `results`): shown as "See all {n} results" and announced to screen readers. */
+    totalResults;
+    /** Shows the footer (hints and the Clear recent / See all button) for the `default` and `results` views. */
+    showFooter = true;
+    /** Accessible name of the suggestions listbox. */
+    listLabel = 'Search suggestions';
+    /** Header of the `recent` section. */
+    recentLabel = 'Recent searches';
+    /** Header of the `jump-to` section. */
+    jumpToLabel = 'Jump to';
+    /** Header of the `top-matches` section. */
+    topMatchesLabel = 'Top matches';
+    /** Header of the `search-in` section. */
+    searchInLabel = 'Search in';
+    /** Footer hint text after the arrow keys. */
+    navigateLabel = 'Navigate';
+    /** Footer hint text after the Enter key (default view). */
+    searchLabel = 'Search';
+    /** Footer hint text after the Esc key. */
+    closeLabel = 'Close';
+    /** Footer hint text after the Enter key (results view). */
+    fullResultsLabel = 'Full results';
+    /** Text of the footer button that clears recent searches. */
+    clearRecentLabel = 'Clear recent';
+    /** Text of the footer button of the results view, when `totalResults` is not set. */
+    seeAllLabel = 'See all results';
+    /** Heading of the built-in empty state. */
+    emptyHeading = 'No results';
+    /** Description of the built-in empty state. */
+    emptyDescription = 'Try a different search.';
+    /** Text of the empty state's action. */
+    clearSearchLabel = 'Clear search';
+    /** Heading of the built-in error state. */
+    errorHeading = 'Search isn’t available right now';
+    /** Description of the built-in error state. */
+    errorDescription = 'We couldn’t reach the server. Your query is kept — try again in a moment.';
+    /** Text of the error state's action. */
+    retryLabel = 'Try again';
+    /** Which sections currently have content in their slot. */
+    filled = { recent: false, 'jump-to': false, 'top-matches': false, 'search-in': false };
+    /** Id of the highlighted item. */
+    activeId = null;
+    /** Fires on every keystroke with the query. The component filters nothing itself. */
+    bsInput;
+    /** Fires on Enter with no highlighted item, with the query. */
+    bsSearch;
+    /** Fires when an item is chosen (click or Enter), with its `value` and section (slot name). */
+    bsSelect;
+    /** Fires when the panel opens or closes through user interaction, with the new state. */
+    bsOpenChange;
+    /** Fires when "Clear recent" is pressed. */
+    bsClearRecent;
+    /** Fires when the empty state's "Clear search" is pressed; the value is also cleared. */
+    bsClearSearch;
+    /** Fires when "See all results" is pressed. */
+    bsSeeAll;
+    /** Fires when the error state's "Try again" is pressed. */
+    bsRetry;
+    resetActive() {
+        this.activeId = null;
+    }
+    componentWillLoad() {
+        this.readFilled();
+        this.prepareItems();
+    }
+    connectedCallback() {
+        document.addEventListener('pointerdown', this.onDocPointerDown, true);
+        this.observer = new MutationObserver(() => {
+            this.readFilled();
+            this.prepareItems();
+            this.paintActive();
+        });
+        this.observer.observe(this.el, { childList: true });
+    }
+    disconnectedCallback() {
+        document.removeEventListener('pointerdown', this.onDocPointerDown, true);
+        this.observer?.disconnect();
+    }
+    componentDidRender() {
+        this.prepareItems();
+        this.paintActive();
+    }
+    allItems() {
+        return Array.from(this.el.children).filter(c => c.tagName === 'BS-SEARCH-ITEM' && ALL_SECTIONS.includes(c.getAttribute('slot')));
+    }
+    /** Visible items, section by section (display order), then DOM order within a section. */
+    visibleItems() {
+        if (!this.open)
+            return [];
+        const items = this.allItems();
+        return (SECTIONS[this.status] ?? []).flatMap(s => items.filter(i => i.getAttribute('slot') === s));
+    }
+    enabledItems() {
+        return this.visibleItems().filter(i => !i.disabled);
+    }
+    readFilled() {
+        const next = { ...this.filled };
+        let changed = false;
+        for (const s of ALL_SECTIONS) {
+            const has = Array.from(this.el.children).some(c => c.getAttribute('slot') === s);
+            if (next[s] !== has) {
+                next[s] = has;
+                changed = true;
+            }
+        }
+        if (changed)
+            this.filled = next;
+    }
+    /** Gives every item the option role and a stable id, like `bs-list` does for its rows. */
+    prepareItems() {
+        for (const item of this.allItems()) {
+            if (item.selectionRole !== 'option')
+                item.selectionRole = 'option';
+            if (!item.id)
+                item.id = `${this.id}-opt-${++this.itemSeq}`;
+        }
+    }
+    paintActive() {
+        for (const item of this.allItems()) {
+            const on = !!this.activeId && item.id === this.activeId;
+            if (item.active !== on)
+                item.active = on;
+        }
+    }
+    setOpen(next) {
+        if (next && this.disabled)
+            return;
+        if (this.open === next)
+            return;
+        this.open = next;
+        this.bsOpenChange.emit(next);
+    }
+    setActive(item) {
+        this.activeId = item ? item.id : null;
+        this.paintActive();
+        item?.scrollIntoView?.({ block: 'nearest' });
+    }
+    onDocPointerDown = (ev) => {
+        if (!this.open)
+            return;
+        if (!ev.composedPath().includes(this.el))
+            this.setOpen(false);
+    };
+    onInput = (ev) => {
+        // The inner bs-input's own bsInput would bubble out of this host too; ours replaces it.
+        ev.stopPropagation();
+        this.value = ev.detail;
+        this.activeId = null;
+        this.bsInput.emit(ev.detail);
+        this.setOpen(true);
+    };
+    onKeyDown = (ev) => {
+        switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                ev.preventDefault();
+                if (!this.open) {
+                    this.setOpen(true);
+                    return;
+                }
+                const items = this.enabledItems();
+                if (!items.length)
+                    return;
+                const idx = items.findIndex(i => i.id === this.activeId);
+                const down = ev.key === 'ArrowDown';
+                const next = down ? (idx + 1) % items.length : idx <= 0 ? items.length - 1 : idx - 1;
+                this.setActive(items[next]);
+                return;
+            }
+            case 'Enter': {
+                const active = this.open ? this.enabledItems().find(i => i.id === this.activeId) : undefined;
+                if (active) {
+                    ev.preventDefault();
+                    active.click();
+                }
+                else {
+                    this.bsSearch.emit(this.value);
+                    this.setOpen(false);
+                }
+                return;
+            }
+            case 'Escape':
+                if (this.open) {
+                    // Native search fields clear themselves on Escape; the first Escape only closes.
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.setOpen(false);
+                }
+                return;
+        }
+    };
+    onItemSelect(ev) {
+        const item = ev.target;
+        if (!item || item.tagName !== 'BS-SEARCH-ITEM')
+            return;
+        ev.stopPropagation();
+        this.bsSelect.emit({ value: ev.detail, section: item.getAttribute('slot') ?? '' });
+        this.setOpen(false);
+    }
+    onPanelMouseOver = (ev) => {
+        const item = ev.composedPath().find(n => n.tagName === 'BS-SEARCH-ITEM');
+        if (item && !item.disabled && item.id !== this.activeId)
+            this.setActive(item);
+    };
+    clearSearch = () => {
+        this.value = '';
+        this.bsClearSearch.emit();
+        this.inputEl?.focus();
+    };
+    sectionLabel(s) {
+        return { recent: this.recentLabel, 'jump-to': this.jumpToLabel, 'top-matches': this.topMatchesLabel, 'search-in': this.searchInLabel }[s];
+    }
+    renderHint(keys, label) {
+        return (h("span", { part: "hint", class: "bs-global-search__hint" }, keys, h("span", { class: "bs-global-search__hint-text" }, label)));
+    }
+    renderFooter() {
+        const hasTotal = typeof this.totalResults === 'number';
+        const enter = (h("bs-key", null, h("svg", { slot: "icon", ...svgProps }, h("path", { d: "M9 14 4 9l5-5" }), h("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" }))));
+        if (this.status === 'results') {
+            return (h("div", { part: "footer", class: "bs-global-search__footer" }, h("div", { part: "see-all", class: "bs-global-search__action", onClick: this.onActionWrapperClick(() => this.seeAll()) }, h("bs-button", { class: "bs-global-search__text-button", variant: "subtle", size: "sm", onClick: () => this.seeAll() }, hasTotal ? `See all ${this.totalResults} results` : this.seeAllLabel)), h("span", { class: "bs-global-search__spacer" }), this.renderHint([enter], this.fullResultsLabel)));
+        }
+        return (h("div", { part: "footer", class: "bs-global-search__footer" }, this.renderHint([
+            h("bs-key", null, h("svg", { slot: "icon", ...svgProps }, h("path", { d: "M12 19V5M5 12l7-7 7 7" }))),
+            h("bs-key", null, h("svg", { slot: "icon", ...svgProps }, h("path", { d: "M12 5v14M5 12l7 7 7-7" }))),
+        ], this.navigateLabel), this.renderHint([enter], this.searchLabel), this.renderHint([h("bs-key", { label: "Esc" })], this.closeLabel), h("span", { class: "bs-global-search__spacer" }), this.filled.recent && (h("div", { part: "clear-recent", class: "bs-global-search__action", onClick: this.onActionWrapperClick(() => this.bsClearRecent.emit()) }, h("bs-button", { class: "bs-global-search__text-button", variant: "subtle", size: "sm", onClick: () => this.bsClearRecent.emit() }, this.clearRecentLabel)))));
+    }
+    seeAll() {
+        this.bsSeeAll.emit();
+        this.setOpen(false);
+    }
+    /** Makes the whole 44px wrapper clickable while the button itself is 32px high. */
+    onActionWrapperClick = (fn) => (ev) => {
+        if (ev.target === ev.currentTarget)
+            fn();
+    };
+    renderStateBlock(kind) {
+        const isEmpty = kind === 'empty';
+        return (h("slot", { name: kind }, h("bs-empty-state", { part: "empty", intent: isEmpty ? 'default' : 'error', heading: isEmpty ? this.emptyHeading : this.errorHeading, description: isEmpty ? this.emptyDescription : this.errorDescription }, isEmpty ? (h("svg", { slot: "icon", ...svgProps }, h("circle", { cx: "11", cy: "11", r: "7" }), h("path", { d: "m20 20-3.5-3.5" }))) : (h("svg", { slot: "icon", ...svgProps }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 7.5v5M12 16.2v.1" }))), h("bs-button", { slot: "action", variant: "outlined", onClick: () => (isEmpty ? this.clearSearch() : this.bsRetry.emit()) }, isEmpty ? this.clearSearchLabel : this.retryLabel))));
+    }
+    announcement() {
+        if (!this.open)
+            return '';
+        if (this.status === 'results')
+            return typeof this.totalResults === 'number' ? `${this.totalResults} results` : '';
+        if (this.status === 'empty')
+            return this.emptyHeading;
+        if (this.status === 'error')
+            return this.errorHeading;
+        return '';
+    }
+    render() {
+        const sections = (SECTIONS[this.status] ?? []).filter(s => this.filled[s]);
+        const showList = sections.length > 0;
+        const listId = `${this.id}-listbox`;
+        const isList = this.status === 'default' || this.status === 'results';
+        const showFooter = this.showFooter && isList;
+        return (h("div", { key: 'dd4477e08b51d52d5309150c4e95f0e560411a05', class: "bs-global-search" }, h("div", { key: 'a37363a1076c4fab1676d4801a0f9751528b42d0', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: 'c0a4d130a36937c90c95659b439eef20655a6c99', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: 'f85e3f63bf82a5de2648e8fa60f4fd4df288ec3b', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: 'cc926315b2b1d2ad62026531a4174cb84df713a8', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
+            const hid = `${this.id}-h-${s}`;
+            return (h("div", { part: "section", class: "bs-global-search__section", role: "group", "aria-labelledby": hid }, h("div", { part: "section-header", id: hid, class: "bs-global-search__section-header" }, this.sectionLabel(s)), h("slot", { name: s })));
+        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: '4bf9f7fc2a00853aee7b48328819ef0a9181d668', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
+    }
+    static get watchers() { return {
+        "status": [{
+                "resetActive": 0
+            }],
+        "open": [{
+                "resetActive": 0
+            }]
+    }; }
+};
+BsGlobalSearch.style = bsGlobalSearchCss();
+
+export { BsGlobalSearch as bs_global_search };

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

@@ -40,12 +40,12 @@ const BsGrid = class {
         const row = this.rowGap ? this.token(this.rowGap) : gapValue;
         const col = this.columnGap ? this.token(this.columnGap) : gapValue;
         const align = ALIGNS.includes(this.align) ? this.align : 'stretch';
-        return (h("div", { key: 'a89d345eac5d88dd24b21606eb35b1f21e1b54dd', class: "bs-grid", part: "container", style: {
+        return (h("div", { key: '0799adbc2484f270db8ca5c2cadc1a0ec55ecbc0', class: "bs-grid", part: "container", style: {
                 gridTemplateColumns: this.template(),
                 rowGap: `var(--bs-grid-row-gap, ${row})`,
                 columnGap: `var(--bs-grid-column-gap, ${col})`,
                 alignItems: align,
-            } }, h("slot", { key: 'f5676a0cc12cf0fafc04045b4fed50aee50d2995' })));
+            } }, h("slot", { key: '90d4940c5b1870df9eaae616f8fbe3738f025a3b' })));
     }
 };
 BsGrid.style = bsGridCss();

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

@@ -47,7 +47,7 @@ const BsIconButton = class {
             form.reset();
     };
     render() {
-        return (h("button", { key: '285e98b32bc33089125e07f14c84b8c72cdc853b', 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: 'd91ec40e2d3e99ee3894e5c5c58f5b209b2ef545', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '6718a31a0f5f20bed9a5c682ddf0e6d1b703748b' }))));
+        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' }))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

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

@@ -20,8 +20,8 @@ const BsIconTile = class {
     render() {
         const labelled = !!this.label;
         return [
-            h("div", { key: '47586c94633cb072243559352fff92ffc178b59e', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: 'af1f942a94eed409beaaf6845eee09003ef70fd4', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: 'be9df10596772e84a65d4de467117ea6c6a13c29', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
-            h("span", { key: '0522505b1001e511e5c2446025a05b6e80ef0176', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: '0fc0bb97e5b23a984bcd64eafc0133eb93782c2f', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
+            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) })),
         ];
     }
 };

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

@@ -67,7 +67,7 @@ const BsInlineTab = class {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: '4b8df7a5f37f0aad60679cbdd3bd03cb20482ba7', 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: '037cdaae4331e050b5c02083d1776bb5509ff92b', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '3b67b01e65434c35545fc9f06dab7bb871362001', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd41611429e951d13df23521f938217716f2afacd', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '8ea82e8ecc120c9961b8288a1162ec03ac0223bf', onSlotchange: this.onLabelSlotchange }))));
+        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 }))));
     }
 };
 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: 'ec191e3590785654e3701c7c49b1643f671dcc16', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '99df53d78ddc715d336738a27efeb3d64140a9c7', 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: '264558031d7bdf104254724ad1891c893668da60', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '225d41e84484f1f160765a9f01e49a0bd850650c', 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: '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));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
@@ -420,7 +420,7 @@ const BsMenu = class {
         items[next].shadowRoot?.querySelector('button')?.focus();
     }
     render() {
-        return (h("div", { key: 'e886c7df63af6d741175aa81bc6390be600e371b', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '365eae17c25fd6a3cc69c9ff01a28ce81eca11f8' })));
+        return (h("div", { key: '8acfe07941922ce4ad0bbb5eef11bb6eecba2c08', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'a3482ba2653512937d3c1f2b4fa798f1bd81859c' })));
     }
 };
 BsMenu.style = bsMenuCss();
@@ -449,7 +449,7 @@ const BsMenuItem = class {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '2d4a54df61b047dab4531362aee81f5d9728818b', 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: '5ddaa17999d79962d279b927d659f592a2dccc81', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '41033aa1950751d8565eec3d04af3570120cda58', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'eb077b5082815adee640c53fa4396cccf1d81cad', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'cfb15ca71fd157aebfb0380e2eaac791bd50b051' }))));
+        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' }))));
     }
 };
 BsMenuItem.style = bsMenuItemCss();

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

@@ -0,0 +1,37 @@
+import { r as registerInstance, h } from './index-D3SkQJpw.js';
+
+const bsKeyCapsCss = () => `:host{display:inline-block;--bs-key-caps-gap:var(--bs-spacing-100);--bs-key-caps-separator-color:var(--bs-text-muted);--bs-key-caps-disabled-opacity:0.38}.bs-key-caps{display:inline-flex;align-items:center;gap:var(--bs-key-caps-gap)}.bs-key-caps bs-key:not(:first-child)::before,::slotted(bs-key:not(:first-child))::before{content:'+';color:var(--bs-key-caps-separator-color);font-size:var(--bs-font-size-xs);line-height:calc(var(--bs-line-height-caption-sm) * 1px)}:host([disabled]) .bs-key-caps{opacity:var(--bs-key-caps-disabled-opacity)}`;
+
+const BsKeyCaps = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * The keys as text. A string is split on `+` (`"Ctrl+K"`); use an array to include a literal
+     * plus key. Ignored when `bs-key` elements are slotted instead. Figma defines one to four keys.
+     */
+    keys;
+    /** Dims the whole shortcut and marks it `aria-disabled`. */
+    disabled = false;
+    /** Accessible name of the shortcut, e.g. "Control plus K". Defaults to the keys joined with " plus ". */
+    label;
+    keyList() {
+        if (Array.isArray(this.keys))
+            return this.keys.filter(k => k !== '');
+        if (typeof this.keys === 'string') {
+            return this.keys
+                .split('+')
+                .map(k => k.trim())
+                .filter(Boolean);
+        }
+        return [];
+    }
+    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' })));
+    }
+};
+BsKeyCaps.style = bsKeyCapsCss();
+
+export { BsKeyCaps as bs_key_caps };

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

@@ -0,0 +1,26 @@
+import { r as registerInstance, a as getElement, h } from './index-D3SkQJpw.js';
+
+const bsKeyCss = () => `:host{display:inline-flex;align-items:center;gap:var(--bs-spacing-100);--bs-key-bg:var(--bs-surface-base);--bs-key-border-color:var(--bs-border-default);--bs-key-radius:var(--bs-border-radius-50);--bs-key-padding-x:var(--bs-spacing-75);--bs-key-padding-y:var(--bs-spacing-50);--bs-key-min-width:25px;--bs-key-color:var(--bs-text-secondary);--bs-key-font-size:var(--bs-font-size-xs);--bs-key-icon-size:16px}.bs-key{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:var(--bs-key-min-width);padding:var(--bs-key-padding-y) var(--bs-key-padding-x);background:var(--bs-key-bg);border:1px solid var(--bs-key-border-color);border-radius:var(--bs-key-radius);color:var(--bs-key-color);font-family:inherit;font-size:var(--bs-key-font-size);font-weight:var(--bs-font-weight-regular);line-height:calc(var(--bs-line-height-caption-sm) * 1px);text-align:center;white-space:nowrap}.bs-key__label{display:block}.bs-key__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--bs-key-icon-size);height:var(--bs-key-icon-size)}.bs-key__icon--hidden{display:none}.bs-key__icon ::slotted(*){display:block;width:100%;height:100%}`;
+
+const BsKey = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** The key's text, e.g. `Ctrl`. The default slot overrides it. */
+    label;
+    /** Tracks whether the `icon` slot has content, so the label is replaced by the icon. */
+    hasIcon = false;
+    componentWillLoad() {
+        this.hasIcon = Array.from(this.el.children).some(c => c.getAttribute('slot') === 'icon');
+    }
+    onIconSlotChange = (ev) => {
+        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 }))));
+    }
+};
+BsKey.style = bsKeyCss();
+
+export { BsKey as bs_key };