@brandsync/wc 1.10.0 → 1.11.0

package/dist/cjs/bs-tab_3.cjs.entry.js

@@ -0,0 +1,255 @@
+'use strict';
+
+var index = require('./index-tFJjflK5.js');
+
+const bsTabCss = () => `:host{display:inline-block;--bs-tab-radius:var(--bs-border-radius-100);--bs-tab-padding-y:var(--bs-spacing-150);--bs-tab-padding-x:var(--bs-spacing-200);--bs-tab-gap:var(--bs-spacing-75);--bs-tab-gap-vertical:var(--bs-spacing-50);--bs-tab-color-default:var(--bs-text-muted);--bs-tab-icon-color-default:var(--bs-icon-muted);--bs-tab-color-hover:var(--bs-text-default);--bs-tab-icon-color-hover:var(--bs-icon-default);--bs-tab-indicator-hover:var(--bs-border-neutral-hover);--bs-tab-color-selected:var(--bs-color-primary-default);--bs-tab-color-selected-hover:var(--bs-color-primary-hover);--bs-tab-color-selected-pressed:var(--bs-color-primary-pressed);--bs-tab-indicator-selected:var(--bs-color-primary-default);--bs-tab-indicator-selected-hover:var(--bs-color-primary-hover);--bs-tab-indicator-selected-pressed:var(--bs-color-primary-pressed);--bs-tab-focus-ring-color:var(--bs-border-neutral-focus);--bs-tab-color-disabled:var(--bs-text-on-disabled);--bs-tab-icon-color-disabled:var(--bs-icon-disabled);--bs-tab-font-size:var(--bs-font-size-md);--bs-tab-line-height:var(--bs-line-height-body-md)}.bs-tab{box-sizing:border-box;position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;border:none;cursor:pointer;background:transparent;color:var(--bs-tab-color-default);font-family:inherit;border-radius:var(--bs-tab-radius);padding:var(--bs-tab-padding-y) var(--bs-tab-padding-x);gap:var(--bs-tab-gap);transition:color var(--bs-duration-fast) var(--bs-easing-standard),     background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-tab--vertical{flex-direction:column;gap:var(--bs-tab-gap-vertical)}.bs-tab:focus-visible{outline:2px solid var(--bs-tab-focus-ring-color);outline-offset:2px}.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):hover,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):focus-visible,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):active{color:var(--bs-tab-color-hover)}.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):hover .bs-tab__icon,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):focus-visible .bs-tab__icon,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):active .bs-tab__icon{color:var(--bs-tab-icon-color-hover)}.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):hover .bs-tab__indicator,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):focus-visible .bs-tab__indicator,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):active .bs-tab__indicator{background:var(--bs-tab-indicator-hover)}.bs-tab--selected{color:var(--bs-tab-color-selected)}.bs-tab--selected .bs-tab__icon--has-content{color:var(--bs-tab-color-selected)}.bs-tab--selected .bs-tab__indicator{background:var(--bs-tab-indicator-selected)}.bs-tab--selected:not(.bs-tab--disabled):hover,.bs-tab--selected:not(.bs-tab--disabled):focus-visible{color:var(--bs-tab-color-selected-hover)}.bs-tab--selected:not(.bs-tab--disabled):hover .bs-tab__icon--has-content,.bs-tab--selected:not(.bs-tab--disabled):focus-visible .bs-tab__icon--has-content{color:var(--bs-tab-color-selected-hover)}.bs-tab--selected:not(.bs-tab--disabled):hover .bs-tab__indicator,.bs-tab--selected:not(.bs-tab--disabled):focus-visible .bs-tab__indicator{background:var(--bs-tab-indicator-selected-hover)}.bs-tab--selected:not(.bs-tab--disabled):active{color:var(--bs-tab-color-selected-pressed)}.bs-tab--selected:not(.bs-tab--disabled):active .bs-tab__icon--has-content{color:var(--bs-tab-color-selected-pressed)}.bs-tab--selected:not(.bs-tab--disabled):active .bs-tab__indicator{background:var(--bs-tab-indicator-selected-pressed)}.bs-tab--disabled{color:var(--bs-tab-color-disabled);cursor:not-allowed}.bs-tab--disabled .bs-tab__icon--has-content{color:var(--bs-tab-icon-color-disabled)}.bs-tab--disabled .bs-tab__indicator{background:transparent}.bs-tab__icon{display:none;width:24px;height:24px;flex-shrink:0;color:var(--bs-tab-icon-color-default)}.bs-tab__icon--has-content{display:inline-flex;align-items:center;justify-content:center}.bs-tab__icon ::slotted(svg){width:24px;height:24px}.bs-tab__label{display:none;font-size:var(--bs-tab-font-size);line-height:calc(var(--bs-tab-line-height) * 1px);white-space:nowrap}.bs-tab__label--has-content{display:inline-block}.bs-tab__badge{display:none}.bs-tab__badge--has-content{display:inline-flex;align-items:center}.bs-tab__indicator{position:absolute;inset-inline-start:var(--bs-tab-padding-x);inset-inline-end:var(--bs-tab-padding-x);bottom:0;height:2px;background:transparent;border-radius:var(--bs-border-radius-50, 2px)}`;
+
+const BsTab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsSelect = index.createEvent(this, "bsSelect");
+    }
+    get el() { return index.getElement(this); }
+    /** Whether this tab is the currently active one. NOT mutable and NOT self-toggling -- see the
+     * "Known gap" note in the class JSDoc. Still reflected as an attribute so consumers/CSS can
+     * target `bs-tab[selected]`. */
+    selected = false;
+    /** Disables the tab: sets the native `disabled` attribute, suppresses hover/focus styling, and
+     * prevents clicking from emitting `bsSelect`. */
+    disabled = false;
+    /** Where the icon sits relative to the label, when both `icon` and the default slot are
+     * populated. Ignored for icon-only/text-only layouts. */
+    iconPosition = 'start';
+    /** Accessible name for the tab. Required for icon-only usage (no visible label text via the
+     * default slot) so screen readers still announce what the tab does -- without it, an icon-only
+     * tab has no discernible name at all (axe-core flags this as a critical `button-name`
+     * violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
+     * automatically, same as `bs-button`'s identical prop. */
+    ariaLabel = null;
+    /** Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's
+     * `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its
+     * zero-based position in the group (`"0"`, `"1"`...). */
+    value;
+    /** Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the
+     * Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays
+     * a normal tab stop. */
+    tabbable;
+    /** Tracks whether the `icon` slot has assigned content. */
+    hasIcon = false;
+    /** Tracks whether the default (label) slot has assigned content. */
+    hasLabel = false;
+    /** Tracks whether the `badge` slot has assigned content. */
+    hasBadge = false;
+    /** Fires when the tab is clicked. Does not toggle `selected` itself -- see the class JSDoc. */
+    bsSelect;
+    /**
+     * Computes the initial `hasIcon`/`hasLabel`/`hasBadge` state directly from the host's light DOM
+     * children, before first render -- same reasoning as `bs-button.componentWillLoad` (a slot with
+     * zero assigned nodes from the start never fires `slotchange`).
+     */
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('icon');
+        this.hasLabel = this.hasSlottedContent(null);
+        this.hasBadge = this.hasSlottedContent('badge');
+    }
+    hasSlottedContent(slotName) {
+        return Array.from(this.el.childNodes).some(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                return node.getAttribute('slot') === slotName;
+            }
+            // Only elements can carry a `slot` attribute -- any other node type (text, comments) can
+            // only ever be assigned to the default slot.
+            return slotName === null;
+        });
+    }
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onLabelSlotchange = (ev) => {
+        this.hasLabel = ev.target.assignedNodes().length > 0;
+    };
+    onBadgeSlotchange = (ev) => {
+        this.hasBadge = ev.target.assignedNodes().length > 0;
+    };
+    onClick = () => {
+        if (this.disabled)
+            return;
+        this.bsSelect.emit();
+    };
+    render() {
+        const iconOnly = this.hasIcon && !this.hasLabel;
+        const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
+        const showBadge = this.hasBadge && !iconOnly && !vertical;
+        return (index.h("button", { key: '6cb94a173877a8e339585dd41bfca7cdb5152277', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, 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 }, index.h("span", { key: '87fc3d0b1e958295bb3ff41c3a4f6a76803c4b31', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, index.h("slot", { key: '5fb74ca62c8f60b50d7f53cd5b77b02cfb547365', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: '4774748fa4d8d5f441914aaca0cc8729c3d85857', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, index.h("slot", { key: '87d793b4e8088f51ff64dd388f3769aebd5c507d', onSlotchange: this.onLabelSlotchange })), index.h("span", { key: 'ddfc8532be46adab986a6f4a6b0e46d2c8fcc8f4', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, index.h("slot", { key: '729a03df8dbca1814725d06ceb23d1d1c694cc63', name: "badge", onSlotchange: this.onBadgeSlotchange })), index.h("span", { key: 'd873545b4148383e3df42fe1ff76aab027d4a0f8', part: "indicator", class: "bs-tab__indicator" })));
+    }
+};
+BsTab.style = bsTabCss();
+
+const bsTabsCss = () => `:host{display:inline-block;--bs-tabs-tab-gap:var(--bs-spacing-100);--bs-tabs-inline-tab-bg:var(--bs-color-neutral-container);--bs-tabs-inline-tab-padding-x:var(--bs-spacing-50);--bs-tabs-inline-tab-radius:var(--bs-border-radius-full);--bs-tabs-inline-tab-gap:var(--bs-spacing-50)}.bs-tabs{display:inline-flex;align-items:center}.bs-tabs--vertical{display:flex;flex-direction:column;align-items:flex-start}.bs-tabs--bs-tab{gap:var(--bs-tabs-tab-gap)}.bs-tabs--bs-inline-tab{background:var(--bs-tabs-inline-tab-bg);padding:0 var(--bs-tabs-inline-tab-padding-x);border-radius:var(--bs-tabs-inline-tab-radius);gap:var(--bs-tabs-inline-tab-gap)}`;
+
+const BsTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsChange = index.createEvent(this, "bsChange");
+    }
+    get el() { return index.getElement(this); }
+    /** Which tab-button family this group wraps. Governs the wrapper's own visual treatment (gap-only
+     * for `bs-tab`, a filled pill bar for `bs-inline-tab`). Not reflected as an attribute -- nothing
+     * external needs to target it via CSS attribute selector, it only drives internal class names. */
+    type = 'bs-tab';
+    /** Layout direction of the tab bar itself. Sets `aria-orientation` on the internal wrapper and
+     * switches `flex-direction`. */
+    orientation = 'horizontal';
+    /** The selected tab's `value`. Mutable and reflected: it follows the user's selection, and
+     * setting it from outside (attribute or property) selects the matching tab -- without emitting
+     * `bsChange`, which only fires for user-driven changes. A tab's value is its own `value` prop,
+     * or, for a tab without one, its zero-based position in the group as a string (`"0"`, `"1"`...).
+     * If unset, it is read from whichever tab is already `selected` once the group loads. */
+    value;
+    /** Fires when the user selects a different tab (click, or arrow/Home/End), with the new
+     * `value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab
+     * still fires as before. */
+    bsChange;
+    /**
+     * Catches `bsSelect` bubbling up from any slotted `<bs-tab>`/`<bs-inline-tab>` (Stencil's
+     * `@Event()` defaults to `bubbles: true, composed: true`, and `@Listen` without a target listens
+     * on the host itself), and sets `selected` on the clicked child / `false` on its siblings.
+     * Disabled children never emit `bsSelect` in the first place (each's own `onClick` guards
+     * `if (this.disabled) return;`), so no special-casing is needed here.
+     */
+    onTabSelect(ev) {
+        const tabs = this.tabs();
+        tabs.forEach(tab => {
+            tab.selected = tab === ev.target;
+        });
+        this.syncRovingTabindex();
+        const index = tabs.findIndex(tab => tab === ev.target);
+        if (index === -1)
+            return;
+        const value = this.tabValue(tabs[index], index);
+        if (value !== this.value) {
+            this.value = value;
+            this.bsChange.emit({ value });
+        }
+    }
+    componentDidLoad() {
+        if (this.value !== undefined) {
+            this.applyValue();
+        }
+        else {
+            // Uncontrolled: report whichever tab the consumer already marked `selected`.
+            const tabs = this.tabs();
+            const index = tabs.findIndex(t => t.selected);
+            if (index !== -1)
+                this.value = this.tabValue(tabs[index], index);
+        }
+        this.syncRovingTabindex();
+    }
+    tabValue(tab, index) {
+        return tab.value ?? String(index);
+    }
+    /** Selects the tab whose value matches `this.value` (and deselects the rest). */
+    applyValue() {
+        this.tabs().forEach((tab, i) => {
+            tab.selected = this.tabValue(tab, i) === this.value;
+        });
+        this.syncRovingTabindex();
+    }
+    onValueChange() {
+        this.applyValue();
+    }
+    syncRovingTabindex() {
+        const tabs = this.tabs();
+        const anySelected = tabs.some(t => t.selected);
+        const firstEnabled = tabs.find(t => !t.disabled);
+        tabs.forEach(t => {
+            t.tabbable = anySelected ? t.selected : t === firstEnabled;
+        });
+    }
+    tabs() {
+        return Array.from(this.el.querySelectorAll(':scope > bs-tab, :scope > bs-inline-tab'));
+    }
+    /** WAI-ARIA tabs pattern (automatic activation): arrows move focus *and* selection to the
+     * previous/next enabled tab (wrapping), Home/End jump to the first/last. Arrow axis follows
+     * `orientation`; in RTL the horizontal arrows are mirrored. */
+    onKeyDown(ev) {
+        const vertical = this.orientation === 'vertical';
+        const rtl = getComputedStyle(this.el).direction === 'rtl';
+        const prevKey = vertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
+        const nextKey = vertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
+        if (![prevKey, nextKey, 'Home', 'End'].includes(ev.key))
+            return;
+        const enabled = this.tabs().filter(t => !t.disabled);
+        const current = enabled.findIndex(t => t === ev.target || t.contains(ev.target));
+        if (current === -1 || enabled.length === 0)
+            return;
+        ev.preventDefault();
+        let nextIdx = current;
+        if (ev.key === nextKey)
+            nextIdx = (current + 1) % enabled.length;
+        else if (ev.key === prevKey)
+            nextIdx = (current - 1 + enabled.length) % enabled.length;
+        else if (ev.key === 'Home')
+            nextIdx = 0;
+        else
+            nextIdx = enabled.length - 1;
+        const target = enabled[nextIdx];
+        const button = target.shadowRoot?.querySelector('button');
+        button?.focus();
+        button?.click();
+    }
+    render() {
+        const vertical = this.orientation === 'vertical';
+        return (index.h("div", { key: 'e7f42dc2b8504a99f03c35fa3617155ac430def0', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, index.h("slot", { key: 'a9a96d3fca150110a8490b42d516db9609677903', onSlotchange: () => this.syncRovingTabindex() })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "orientation": [{
+                "syncRovingTabindex": 0
+            }]
+    }; }
+};
+BsTabs.style = bsTabsCss();
+
+const bsWhatsNewEntryCss = () => `:host{display:block;--bs-whats-new-entry-gap:var(--bs-spacing-100);--bs-whats-new-entry-color:var(--bs-text-default);--bs-whats-new-entry-color-secondary:var(--bs-text-secondary);--bs-whats-new-entry-unread:var(--bs-color-primary-default);--bs-whats-new-entry-image-bg:var(--bs-color-primary-container);--bs-whats-new-entry-image-height:140px;--bs-whats-new-entry-image-radius:var(--bs-border-radius-100);--bs-whats-new-entry-divider:var(--bs-border-default)}.bs-whats-new-entry{display:flex;flex-direction:column;gap:var(--bs-whats-new-entry-gap);color:var(--bs-whats-new-entry-color)}.bs-whats-new-entry p,.bs-whats-new-entry h1,.bs-whats-new-entry h2,.bs-whats-new-entry h3,.bs-whats-new-entry h4,.bs-whats-new-entry h5,.bs-whats-new-entry h6{margin:0}.bs-whats-new-entry__meta{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-whats-new-entry__date{color:var(--bs-whats-new-entry-color-secondary);font-size:var(--bs-font-size-xs);line-height:16px;white-space:nowrap}.bs-whats-new-entry__unread{flex:none;width:8px;height:8px;border-radius:50%;background:var(--bs-whats-new-entry-unread)}.bs-whats-new-entry__sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.bs-whats-new-entry__image{display:none;height:var(--bs-whats-new-entry-image-height);border-radius:var(--bs-whats-new-entry-image-radius);background:var(--bs-whats-new-entry-image-bg);overflow:hidden}.bs-whats-new-entry__image--visible{display:block}::slotted([slot='image']){display:block;width:100%;height:100%;object-fit:cover}.bs-whats-new-entry__content{display:flex;flex-direction:column;gap:var(--bs-spacing-100);align-items:flex-start}.bs-whats-new-entry__heading{align-self:stretch;font-size:var(--bs-font-size-md);font-weight:var(--bs-font-weight-bold);line-height:20px}.bs-whats-new-entry__description{align-self:stretch;color:var(--bs-whats-new-entry-color-secondary);font-size:var(--bs-font-size-sm);line-height:20px}.bs-whats-new-entry__action{--bs-button-subtle-color:var(--bs-text-action);--bs-button-height-sm:var(--bs-spacing-400);--bs-button-padding-x-label-side:var(--bs-spacing-150);--bs-button-padding-x-icon-side:var(--bs-spacing-100)}.bs-whats-new-entry__action svg{width:20px;height:20px}.bs-whats-new-entry__divider{height:8px;background:linear-gradient(var(--bs-whats-new-entry-divider), var(--bs-whats-new-entry-divider)) center / 100% 1px no-repeat}`;
+
+const BsWhatsNewEntry = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsAction = index.createEvent(this, "bsAction");
+    }
+    /** The tag text, e.g. "New feature". No tag when empty. */
+    tag;
+    /** Colour of the tag: `info` (default), `success`, `warning`, `error` or `neutral`. */
+    tagColor = 'info';
+    /** The date as text, already formatted for the reader (e.g. "24.09.2026"). */
+    date;
+    /** Shows a dot after the date for an update the user hasn't seen. */
+    unread = false;
+    /** Title. */
+    heading;
+    /** HTML heading level for the title, 1-6. */
+    headingLevel = 3;
+    /** Short description under the title. */
+    description;
+    /** Label of the action link (e.g. "Try it"). No action when empty. */
+    actionLabel;
+    /** Draws a rule under the entry, to separate it from the next one. */
+    divider = false;
+    /** Visually hidden text for the unread dot. */
+    unreadLabel = 'Unread';
+    /** Fires when the action link is pressed. */
+    bsAction;
+    hasImage = false;
+    render() {
+        const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 3));
+        return (index.h("div", { key: 'f3b59b9886ee7dc0cff3ce37ef361081d268c301', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (index.h("div", { key: '849ff3110f9b5e8862d2e8743c69e37a3913ba3f', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (index.h("bs-chip-informative", { key: '1e3ab58124be4aac1785ac5094f607eebba06ada', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (index.h("span", { key: '351f70bd49e94fd4848e34d2b134dda0a76aa3ce', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (index.h("span", { key: '9e5341acb5e4b5628ad9c567ca30d87f03c7c511', part: "unread", class: "bs-whats-new-entry__unread" }, index.h("span", { key: 'cca65aff39503436f75f7e1a6eada38975985b63', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), index.h("div", { key: '9c4e28e9687456fbe4b40fdba7e22dc162ea26c7', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, index.h("slot", { key: '4e698f6b9cd3bc68c4723877a6c257c2cdafb5a4', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), index.h("div", { key: '60e73438ed675a12159986ae8352b1c5b2735fb1', class: "bs-whats-new-entry__content" }, this.heading && index.h(`h${level}`, { part: 'heading', class: { 'bs-whats-new-entry__heading': true } }, this.heading), this.description && (index.h("p", { key: 'ddf69ede4112a2da4554b0ed4dae5664f739c055', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (index.h("bs-button", { key: 'a6465a5bfab7ee0ccf8e26eb6221e566ad483b2e', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, index.h("svg", { key: 'd45596c561a1366f54beaf3c5ba62084581742fe', slot: "end-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("path", { key: 'a87b5824ff0fe97c7c025096e432948864e1d19b', d: "M5 12H19" }), index.h("path", { key: '96659132bb0262ed354a33c2c33d48dde199a95b', d: "M13 6L19 12L13 18" }))))), this.divider && index.h("div", { key: '25381aa31681ccdb1e18fe74a019bd57e1fa8a62', part: "divider", class: "bs-whats-new-entry__divider" })));
+    }
+};
+BsWhatsNewEntry.style = bsWhatsNewEntryCss();
+
+exports.bs_tab = BsTab;
+exports.bs_tabs = BsTabs;
+exports.bs_whats_new_entry = BsWhatsNewEntry;

package/dist/cjs/bs-timepicker.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-kk9YXF2S.js');
+var index = require('./index-tFJjflK5.js');
 
-const bsTimepickerCss = () => `:host{display:inline-block;--bs-timepicker-width:294px;--bs-timepicker-bg:var(--bs-surface-raised);--bs-timepicker-radius:var(--bs-border-radius-100);--bs-timepicker-padding-y:var(--bs-spacing-200);--bs-timepicker-padding-x:var(--bs-spacing-200);--bs-timepicker-gap:var(--bs-spacing-200);--bs-timepicker-shadow:var(--bs-shadow-md);--bs-timepicker-title-size:var(--bs-font-size-2xl);--bs-timepicker-title-line-height:var(--bs-line-height-heading-h6);--bs-timepicker-color:var(--bs-text-default);--bs-timepicker-color-secondary:var(--bs-text-secondary);--bs-timepicker-divider:var(--bs-border-neutral-container);--bs-timepicker-cell-size:var(--bs-spacing-550);--bs-timepicker-cell-radius:var(--bs-border-radius-100);--bs-timepicker-value-radius:var(--bs-border-radius-50);--bs-timepicker-hover:var(--bs-surface-hover);--bs-timepicker-pressed:var(--bs-surface-pressed);--bs-timepicker-focus-ring-color:var(--bs-border-neutral-container-focused)}.bs-timepicker{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-timepicker-gap);width:var(--bs-timepicker-width);max-width:100%;padding:var(--bs-timepicker-padding-y) 0;border-radius:var(--bs-timepicker-radius);background:var(--bs-timepicker-bg);box-shadow:var(--bs-timepicker-shadow);color:var(--bs-timepicker-color);font-family:inherit;font-size:var(--bs-font-size-md)}.bs-timepicker__header{display:flex;align-items:center;gap:var(--bs-spacing-100);padding:0 var(--bs-timepicker-padding-x)}.bs-timepicker__title{flex:1 1 0;min-width:0;font-size:var(--bs-timepicker-title-size);font-weight:var(--bs-font-weight-bold);line-height:calc(var(--bs-timepicker-title-line-height) * 1px)}.bs-timepicker__format{display:flex;align-items:center;gap:var(--bs-spacing-50);color:var(--bs-timepicker-color-secondary);line-height:calc(var(--bs-line-height-body-md) * 1px)}.bs-timepicker__divider{height:1px;background:var(--bs-timepicker-divider)}.bs-timepicker__selector{display:flex;align-items:center;justify-content:center;gap:var(--bs-spacing-200);padding:0 var(--bs-timepicker-padding-x)}.bs-timepicker__spinner{display:flex;flex-direction:column;align-items:center;gap:var(--bs-spacing-100);width:var(--bs-timepicker-cell-size)}.bs-timepicker__step,.bs-timepicker__value{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bs-timepicker-cell-size);height:var(--bs-timepicker-cell-size);padding:0;border:none;background:transparent;font-family:inherit}.bs-timepicker__step{border-radius:var(--bs-timepicker-cell-radius);color:var(--bs-timepicker-color-secondary);cursor:pointer}.bs-timepicker__step svg{width:24px;height:24px}.bs-timepicker__value{border-radius:var(--bs-timepicker-value-radius);color:var(--bs-timepicker-color);font-size:var(--bs-timepicker-title-size);font-weight:var(--bs-font-weight-bold);line-height:calc(var(--bs-timepicker-title-line-height) * 1px);font-variant-numeric:tabular-nums;cursor:pointer;user-select:none}.bs-timepicker__step:hover,.bs-timepicker__value:hover{background:var(--bs-timepicker-hover)}.bs-timepicker__step:active,.bs-timepicker__value:active{background:var(--bs-timepicker-pressed)}.bs-timepicker__step:focus-visible,.bs-timepicker__value:focus-visible{outline:2px solid var(--bs-timepicker-focus-ring-color);outline-offset:0}.bs-timepicker__separator{display:flex;align-items:center;color:var(--bs-timepicker-color)}.bs-timepicker__separator svg{width:4px;height:32px}.bs-timepicker__period::part(label){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.bs-timepicker__period{width:112px}.bs-timepicker__period::part(control){caret-color:transparent;cursor:pointer;text-overflow:clip}.bs-timepicker__footer{display:flex;align-items:flex-start;justify-content:flex-end;gap:var(--bs-spacing-100);padding:0 var(--bs-timepicker-padding-x)}`;
+const bsTimepickerCss = () => `:host{display:inline-block;--bs-timepicker-width:294px;--bs-timepicker-bg:var(--bs-paper-bg-raised);--bs-timepicker-radius:var(--bs-border-radius-100);--bs-timepicker-padding-y:var(--bs-spacing-200);--bs-timepicker-padding-x:var(--bs-spacing-200);--bs-timepicker-gap:var(--bs-spacing-200);--bs-timepicker-shadow:var(--bs-shadow-md);--bs-timepicker-title-size:var(--bs-font-size-2xl);--bs-timepicker-title-line-height:var(--bs-line-height-heading-h6);--bs-timepicker-color:var(--bs-text-default);--bs-timepicker-color-secondary:var(--bs-text-secondary);--bs-timepicker-divider:var(--bs-border-neutral-container);--bs-timepicker-cell-size:var(--bs-spacing-550);--bs-timepicker-cell-radius:var(--bs-border-radius-100);--bs-timepicker-value-radius:var(--bs-border-radius-50);--bs-timepicker-hover:var(--bs-surface-hover);--bs-timepicker-pressed:var(--bs-surface-pressed);--bs-timepicker-focus-ring-color:var(--bs-border-neutral-container-focused)}.bs-timepicker{width:var(--bs-timepicker-width);max-width:100%;color:var(--bs-timepicker-color);font-size:var(--bs-font-size-md);--bs-card-bg:var(--bs-timepicker-bg);--bs-card-radius:var(--bs-timepicker-radius);--bs-card-padding:var(--bs-timepicker-padding-y) 0;--bs-card-shadow:var(--bs-timepicker-shadow);--bs-card-overflow:visible}.bs-timepicker__body{display:flex;flex-direction:column;gap:var(--bs-timepicker-gap)}.bs-timepicker__header{display:flex;align-items:center;gap:var(--bs-spacing-100);padding:0 var(--bs-timepicker-padding-x)}.bs-timepicker__title{flex:1 1 0;min-width:0;font-size:var(--bs-timepicker-title-size);font-weight:var(--bs-font-weight-bold);line-height:calc(var(--bs-timepicker-title-line-height) * 1px)}.bs-timepicker__format{display:flex;align-items:center;gap:var(--bs-spacing-50);color:var(--bs-timepicker-color-secondary);line-height:calc(var(--bs-line-height-body-md) * 1px)}.bs-timepicker__divider{height:1px;background:var(--bs-timepicker-divider)}.bs-timepicker__selector{display:flex;align-items:center;justify-content:center;gap:var(--bs-spacing-200);padding:0 var(--bs-timepicker-padding-x)}.bs-timepicker__spinner{display:flex;flex-direction:column;align-items:center;gap:var(--bs-spacing-100);width:var(--bs-timepicker-cell-size)}.bs-timepicker__step,.bs-timepicker__value{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bs-timepicker-cell-size);height:var(--bs-timepicker-cell-size);padding:0;border:none;background:transparent;font-family:inherit}.bs-timepicker__step{border-radius:var(--bs-timepicker-cell-radius);color:var(--bs-timepicker-color-secondary);cursor:pointer}.bs-timepicker__step svg{width:24px;height:24px}.bs-timepicker__value{border-radius:var(--bs-timepicker-value-radius);color:var(--bs-timepicker-color);font-size:var(--bs-timepicker-title-size);font-weight:var(--bs-font-weight-bold);line-height:calc(var(--bs-timepicker-title-line-height) * 1px);font-variant-numeric:tabular-nums;cursor:pointer;user-select:none}.bs-timepicker__step:hover,.bs-timepicker__value:hover{background:var(--bs-timepicker-hover)}.bs-timepicker__step:active,.bs-timepicker__value:active{background:var(--bs-timepicker-pressed)}.bs-timepicker__step:focus-visible,.bs-timepicker__value:focus-visible{outline:2px solid var(--bs-timepicker-focus-ring-color);outline-offset:0}.bs-timepicker__separator{display:flex;align-items:center;color:var(--bs-timepicker-color)}.bs-timepicker__separator svg{width:4px;height:32px}.bs-timepicker__period::part(label){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.bs-timepicker__period{width:112px}.bs-timepicker__period::part(control){caret-color:transparent;cursor:pointer;text-overflow:clip}.bs-timepicker__footer{display:flex;align-items:flex-start;justify-content:flex-end;gap:var(--bs-spacing-100);padding:0 var(--bs-timepicker-padding-x)}`;
 
 const BsTimepicker = class {
     constructor(hostRef) {
@@ -174,14 +174,14 @@ const BsTimepicker = class {
         return (index.h("div", { part: "spinner", class: "bs-timepicker__spinner" }, index.h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel('Increase'), tabindex: -1, onClick: () => this.stepBy(col, 1) }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { d: "M18 15L12 9L6 15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("div", { part: "value", class: "bs-timepicker__value", role: "spinbutton", tabindex: 0, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": n, "aria-valuetext": pad(n), onKeyDown: this.onKeyDown(col), onBlur: () => (this.typed = '') }, pad(n)), index.h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel('Decrease'), tabindex: -1, onClick: () => this.stepBy(col, -1) }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     render() {
-        return (index.h("div", { key: 'a2e5fe098763d32468ffc0bdd3c2df153385dfd7', part: "container", class: "bs-timepicker" }, index.h("div", { key: 'd7a3bcdb9585480d2f58b27d8499f6ef9c8d21e0', part: "header", class: "bs-timepicker__header" }, index.h("div", { key: '6183e6243df377936ddc2d5a92238720efc7a671', part: "title", class: "bs-timepicker__title" }, this.heading), index.h("label", { key: '4e95425e9f67d6575ef9572a9c385b9a5c887359', class: "bs-timepicker__format" }, index.h("span", { key: '29771986229fd68af07078e3528a12d75f4a5794' }, this.formatLabel), index.h("bs-switch", { key: '946ea660ff659d71ca2c3e024bff8eb05afdcfe8', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), index.h("div", { key: 'e6367ea101ae0981224129bc6c70c7bf5d2b6db9', class: "bs-timepicker__divider" }), index.h("div", { key: '20ab9cfd9702dae8bf097de642e61439489f6fb5', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), index.h("div", { key: '5780f3fb2eb6f5b2e6d29ed4cd1585190051e3fd', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, index.h("svg", { key: 'd35956df0f6f18f1472cc720f4ab876bbc41e515', viewBox: "0 0 4 32", fill: "currentColor" }, index.h("circle", { key: '4e6083df833bc3bf6390c80d7911219e61a51d37', cx: "2", cy: "10", r: "2" }), index.h("circle", { key: 'e3dea9bb879e7b4b09b9d37a0becbfd54f803169', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (index.h("bs-input", { key: 'a9fb9ef6ff16d5c3f4aa4e067e3795a7ddc7d1e7', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
+        return (index.h("bs-card", { key: 'e0545d99e052005bcad5509f81505f628adb5dc4', part: "container", class: "bs-timepicker", surface: "raised" }, index.h("div", { key: '664c7184dcefe5c63f03afad3953787cbc3064cc', class: "bs-timepicker__body" }, index.h("div", { key: '602d4f0ca6975b22daa7c7a37a6d53a259c39768', part: "header", class: "bs-timepicker__header" }, index.h("div", { key: '1650464c84e066f14f6343f18f779e35932535c3', part: "title", class: "bs-timepicker__title" }, this.heading), index.h("label", { key: 'debc6155ccf39b90f281d49240203d642fb5039d', class: "bs-timepicker__format" }, index.h("span", { key: '147a6d85b4f0922b5c7d96ebef88b3c70d1fbe05' }, this.formatLabel), index.h("bs-switch", { key: 'ddb0be1751ce8246acbfd6c187e66fb6bc878cd5', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), index.h("div", { key: '35f13bd74133f2c1109df96aafdc456178e4a32f', class: "bs-timepicker__divider" }), index.h("div", { key: '9c979a8d3300a8f5dba7d8df784dc8ef691a40a6', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), index.h("div", { key: '5b4af0371fd816067b92854da2b35e5a7de8e4ea', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, index.h("svg", { key: 'a70450b5068add559c48e795ce6aca204b30d02d', viewBox: "0 0 4 32", fill: "currentColor" }, index.h("circle", { key: '26a760f4d4712eca3df48b97bde276ce241511d5', cx: "2", cy: "10", r: "2" }), index.h("circle", { key: '3c6eb56e2736353dc5e5bc4a1d6ef64242f6a367', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (index.h("bs-input", { key: '948e724c331008bbd00fd84c516d02e919e622e1', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
                 { label: 'AM', value: 'AM' },
                 { label: 'PM', value: 'PM' },
             ], onBsChange: (ev) => {
                 const pm = ev.detail === 'PM';
                 if (pm !== this.isPm)
                     this.hour = (this.hour + 12) % 24;
-            } }))), index.h("div", { key: 'e4256dede407bec46c5da8e967001472ccd0f49b', class: "bs-timepicker__divider" }), index.h("div", { key: '9be6cade11a25c92c77f4313827f49ee8d89dfb4', part: "footer", class: "bs-timepicker__footer" }, index.h("bs-button", { key: '6ded59a284b389b5e4a259b1a238296ec83d6c27', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), index.h("bs-button", { key: 'e1f566c9c34b3371783206910d91a9d49f8cdc41', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel))));
+            } }))), index.h("div", { key: '08b57e8c0b895e272d98386fe5b2ac2e55a87de0', class: "bs-timepicker__divider" }), index.h("div", { key: '5b1af1da10c4333ef6b826eaafd75fa12ef2e785', part: "footer", class: "bs-timepicker__footer" }, index.h("bs-button", { key: 'ad24615dbe6ae46e00ca558f71cee030504573a5', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), index.h("bs-button", { key: 'f76cd192e1e7e0bb524080cf54a655c5b4508a3c', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/cjs/bs-toast.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-kk9YXF2S.js');
+var index = require('./index-tFJjflK5.js');
 
 const bsToastCss = () => `:host{display:inline-flex;--bs-toast-radius:var(--bs-border-radius-100);--bs-toast-shadow:var(--bs-shadow-md);--bs-toast-content-padding-y:var(--bs-spacing-200);--bs-toast-content-padding-x:var(--bs-spacing-200);--bs-toast-content-gap:var(--bs-spacing-150);--bs-toast-font-size:var(--bs-font-size-md);--bs-toast-line-height:var(--bs-line-height-body-md);--bs-toast-actions-padding-y:var(--bs-spacing-50);--bs-toast-actions-padding-x:var(--bs-spacing-100);--bs-toast-close-radius:var(--bs-border-radius-100);--bs-toast-surface-info:var(--bs-color-info-container);--bs-toast-text-info:var(--bs-text-info);--bs-toast-surface-warning:var(--bs-color-warning-container);--bs-toast-text-warning:var(--bs-text-warning);--bs-toast-surface-success:var(--bs-color-success-container);--bs-toast-text-success:var(--bs-text-success);--bs-toast-surface-error:var(--bs-color-error-container);--bs-toast-text-error:var(--bs-text-error)}.bs-toast{display:flex;align-items:center;border-radius:var(--bs-toast-radius);box-shadow:var(--bs-toast-shadow);font-family:inherit}.bs-toast--info{background:var(--bs-toast-surface-info);color:var(--bs-toast-text-info)}.bs-toast--warning{background:var(--bs-toast-surface-warning);color:var(--bs-toast-text-warning)}.bs-toast--success{background:var(--bs-toast-surface-success);color:var(--bs-toast-text-success)}.bs-toast--error{background:var(--bs-toast-surface-error);color:var(--bs-toast-text-error)}.bs-toast__content{display:flex;align-items:center;gap:var(--bs-toast-content-gap);flex:1 1 auto;min-width:0;padding:var(--bs-toast-content-padding-y) 0 var(--bs-toast-content-padding-y) var(--bs-toast-content-padding-x)}.bs-toast__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:inherit}.bs-toast__icon svg{width:24px;height:24px}.bs-toast__message{flex:1 1 auto;min-width:0;font-size:var(--bs-toast-font-size);line-height:calc(var(--bs-toast-line-height) * 1px)}.bs-toast__actions{display:flex;align-items:center;align-self:stretch;flex-shrink:0;padding:var(--bs-toast-actions-padding-y) var(--bs-toast-actions-padding-x) var(--bs-toast-actions-padding-y) 0}.bs-toast__close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;padding:0;border:none;background:transparent;border-radius:var(--bs-toast-close-radius);color:inherit;cursor:pointer}.bs-toast__close svg{width:24px;height:24px}.bs-toast__close:hover{background:color-mix(in srgb, currentColor 12%, transparent)}.bs-toast__close:active{background:color-mix(in srgb, currentColor 24%, transparent)}.bs-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}`;
 
@@ -19,7 +19,7 @@ const BsToast = class {
         this.bsDismiss.emit();
     };
     render() {
-        return (index.h("div", { key: 'e8da15f45d0491a0eb8568a8fc31e2b802cf30c3', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, index.h("div", { key: '703099dfc85c56997a2cf6e5e86bd559d1a9d971', class: "bs-toast__content" }, index.h("span", { key: 'dacb887b5e7bdae27100399a80f9c2cc7a9970d6', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, index.h(StateIcon, { key: '5d71c6abf0c68673c20de54162557a224cffd66b', state: this.state })), index.h("span", { key: '6587834edfbdf0188a8780ee0c5b93a572956da4', part: "message", class: "bs-toast__message" }, index.h("slot", { key: '559c2a397c140532185da397a7cab18f484fad19' }))), index.h("div", { key: '87f868f1b541432798de1f511f92091434c41e0f', class: "bs-toast__actions" }, index.h("button", { key: '6267c6dcc3114af0d9fecd250097416f80f661b1', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, index.h(CloseIcon, { key: '8b6a5b9e2ce36d5cbbec7801df81fd125c7d0f27' })))));
+        return (index.h("div", { key: 'fcf10204b781318554bd1d1b65b3b003759f47ca', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, index.h("div", { key: '77a9fc881d530b43aa93cd71ab00d79a402ac5df', class: "bs-toast__content" }, index.h("span", { key: '18b4ffee843c2f9f235477e729a7a5bca1044595', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, index.h(StateIcon, { key: '62a78820785f12ccfa503d7690ae99d2b3b47aa2', state: this.state })), index.h("span", { key: 'b17882e4d5f4afe5bcfa5704b515c145df94799b', part: "message", class: "bs-toast__message" }, index.h("slot", { key: '678d2256cc21e6e07b099d417837b5891e7d6021' }))), index.h("div", { key: 'aba935f0a62a599b9eacfed9d13598f70a941283', class: "bs-toast__actions" }, index.h("button", { key: 'a9ee43cf75eca8e737d5e59507408de7f8bffaf1', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, index.h(CloseIcon, { key: '4e4c5a25e6b25da2362385f1be5c4b86f02bbeb0' })))));
     }
 };
 const StateIcon = ({ state }) => {

package/dist/cjs/bs-tooltip.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-kk9YXF2S.js');
+var index = require('./index-tFJjflK5.js');
 
 const bsTooltipCss = () => `:host{display:inline-block;--bs-tooltip-bg:var(--bs-surface-inverse);--bs-tooltip-color:var(--bs-text-inverse);--bs-tooltip-radius:var(--bs-border-radius-50);--bs-tooltip-padding-x:var(--bs-spacing-200);--bs-tooltip-padding-y:var(--bs-spacing-100);--bs-tooltip-max-width:200px;--bs-tooltip-shadow:-1px 4px 8px rgba(0, 0, 0, 0.08);--bs-tooltip-font-size:var(--bs-font-size-sm);--bs-tooltip-line-height:var(--bs-line-height-body-sm)}.bs-tooltip{position:relative;display:inline-block}.bs-tooltip__bubble{box-sizing:border-box;max-width:var(--bs-tooltip-max-width);padding:var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);background:var(--bs-tooltip-bg);color:var(--bs-tooltip-color);border-radius:var(--bs-tooltip-radius);box-shadow:var(--bs-tooltip-shadow);font-family:inherit;font-size:var(--bs-tooltip-font-size);line-height:calc(var(--bs-tooltip-line-height) * 1px)}.bs-tooltip__arrow{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:8px;height:8px;background:var(--bs-tooltip-bg);clip-path:polygon(50% 0, 0% 100%, 100% 100%)}`;
 
@@ -16,7 +16,7 @@ const BsTooltip = class {
      */
     placement = 'top';
     render() {
-        return (index.h("div", { key: '6fdabb24080aa3e58a1054aa63f43878da2d0787', class: "bs-tooltip" }, index.h("span", { key: 'ec139068fd7714642215b47ffbd91318062cbb84', part: "arrow", class: "bs-tooltip__arrow" }), index.h("div", { key: 'c1e18985eeb5263b6faf9c14c1f6c93cfe6c1062', part: "bubble", class: "bs-tooltip__bubble" }, index.h("slot", { key: 'f521333b359cb1b30457753ee28379a064aeeae2' }))));
+        return (index.h("div", { key: '8fdc149cce564aa5531956eda52b81bedd9db1bb', class: "bs-tooltip" }, index.h("span", { key: '34234ea02b510a5a728bb97d259cfbd2c8f7f7b2', part: "arrow", class: "bs-tooltip__arrow" }), index.h("div", { key: '04d825a91dc6753a90b7daaf370e575c9ddee6d1', part: "bubble", class: "bs-tooltip__bubble" }, index.h("slot", { key: '81b8681507245e597177d169c1925dfb65aaeeab' }))));
     }
 };
 BsTooltip.style = bsTooltipCss();

package/dist/cjs/bs-whats-new.cjs.entry.js

@@ -0,0 +1,144 @@
+'use strict';
+
+var index = require('./index-tFJjflK5.js');
+
+const bsWhatsNewCss = () => `:host{display:block;max-width:100%;--bs-whats-new-width:400px;--bs-whats-new-padding:var(--bs-spacing-200);--bs-whats-new-color:var(--bs-text-default);--bs-whats-new-color-secondary:var(--bs-text-secondary);--bs-whats-new-border:var(--bs-border-default);--bs-whats-new-hero-bg:var(--bs-color-primary-container);--bs-whats-new-hero-height:220px;--bs-whats-new-link:var(--bs-text-link);--bs-whats-new-link-underline:var(--bs-border-info);width:var(--bs-whats-new-width)}:host([type='announcement']){--bs-whats-new-width:560px}:host([type='teaser']){--bs-whats-new-width:300px;--bs-whats-new-padding:var(--bs-spacing-150)}.bs-wn--feed{--bs-card-radius:0;--bs-card-padding:var(--bs-whats-new-padding);--bs-card-shadow:0 2px 2px var(--bs-elevation-medium), inset 1px 0 0 var(--bs-whats-new-border)}.bs-wn--announcement{position:relative;--bs-card-radius:var(--bs-border-radius-200);--bs-card-padding:0;--bs-card-shadow:0 2px 4px var(--bs-elevation-medium)}.bs-wn--teaser{--bs-card-radius:var(--bs-border-radius-100);--bs-card-padding:var(--bs-whats-new-padding);--bs-card-shadow:0 4px 4px var(--bs-elevation-high)}.bs-wn{color:var(--bs-whats-new-color)}.bs-wn p,.bs-wn ul,.bs-wn h1,.bs-wn h2,.bs-wn h3,.bs-wn h4,.bs-wn h5,.bs-wn h6{margin:0}.bs-wn__heading{font-size:var(--bs-font-size-2xl);font-weight:var(--bs-font-weight-bold);line-height:32px}.bs-wn__heading--lg{align-self:stretch}.bs-wn__heading--sm{font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-semibold);line-height:20px}.bs-wn__spacer{flex:1 1 0}.bs-wn__text-button{--bs-button-subtle-color:var(--bs-text-action);--bs-button-height-sm:var(--bs-spacing-400);--bs-button-padding-x-sm:var(--bs-spacing-150)}.bs-wn__text-button--md{--bs-button-height-md:var(--bs-spacing-550)}.bs-wn__close{flex:none}.bs-wn__close svg{width:20px;height:20px}.bs-wn__close--compact{--bs-icon-button-size-md:24px}.bs-wn__feed{display:flex;flex-direction:column;gap:var(--bs-spacing-100)}.bs-wn__head{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-wn__filters{overflow-x:auto;scrollbar-width:none}.bs-wn__filters::-webkit-scrollbar{display:none}.bs-wn__entries{display:flex;flex-direction:column;padding-top:var(--bs-spacing-200);padding-bottom:var(--bs-spacing-100)}.bs-wn__empty{padding:var(--bs-spacing-300) 0;color:var(--bs-whats-new-color-secondary);font-size:var(--bs-font-size-sm);line-height:20px;text-align:center}.bs-wn__footer{display:flex;align-items:center;padding-top:var(--bs-spacing-150)}.bs-wn__link{display:inline-flex;align-items:center;gap:var(--bs-spacing-25);color:var(--bs-whats-new-link);font-size:var(--bs-font-size-xs);line-height:16px;text-decoration:none}.bs-wn__link-text{border-bottom:1px solid var(--bs-whats-new-link-underline)}.bs-wn__link svg{width:16px;height:16px}.bs-wn__link:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-wn__announcement{display:flex;flex-direction:column}.bs-wn--announcement .bs-wn__close{position:absolute;z-index:1;top:var(--bs-spacing-50);inset-inline-end:var(--bs-spacing-50)}.bs-wn__hero{display:none;height:var(--bs-whats-new-hero-height);background:var(--bs-whats-new-hero-bg);overflow:hidden}.bs-wn__hero--visible{display:block}.bs-wn__hero img,::slotted([slot='hero']){display:block;width:100%;height:100%;object-fit:cover}.bs-wn__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--bs-spacing-150);padding:var(--bs-whats-new-padding)}.bs-wn__points{display:flex;flex-direction:column;gap:var(--bs-spacing-150);align-self:stretch;padding:0;list-style:none;font-size:var(--bs-font-size-sm);line-height:20px}.bs-wn__points li{display:flex;align-items:center;gap:var(--bs-spacing-150)}.bs-wn__check{flex:none;width:18px;height:18px;color:var(--bs-icon-action)}.bs-wn__announcement-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--bs-spacing-100);align-self:stretch;padding-top:var(--bs-spacing-100)}.bs-wn__step{color:var(--bs-whats-new-color-secondary);font-size:var(--bs-font-size-xs);line-height:16px;white-space:nowrap}.bs-wn__actions{display:flex;align-items:center;gap:var(--bs-spacing-100);margin-inline-start:auto}.bs-wn__actions bs-button{--bs-button-height-md:var(--bs-spacing-550)}.bs-wn__teaser{display:flex;flex-direction:column;align-items:flex-start;gap:var(--bs-spacing-75)}.bs-wn__teaser-row{display:flex;align-items:center;gap:var(--bs-spacing-100);align-self:stretch}.bs-wn__date{color:var(--bs-whats-new-color-secondary);font-size:var(--bs-font-size-xs);line-height:16px;white-space:nowrap}.bs-wn__description{color:var(--bs-whats-new-color-secondary);font-size:var(--bs-font-size-sm);line-height:20px}.bs-wn__link-button{--bs-button-padding-x-label-side:var(--bs-spacing-150);--bs-button-padding-x-icon-side:var(--bs-spacing-100);margin-inline-start:calc(var(--bs-spacing-150) * -1)}.bs-wn__link-button svg{width:20px;height:20px}`;
+
+const BsWhatsNew = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsMarkAllRead = index.createEvent(this, "bsMarkAllRead");
+        this.bsEntryAction = index.createEvent(this, "bsEntryAction");
+        this.bsFilterChange = index.createEvent(this, "bsFilterChange");
+        this.bsClose = index.createEvent(this, "bsClose");
+        this.bsPrimary = index.createEvent(this, "bsPrimary");
+        this.bsSecondary = index.createEvent(this, "bsSecondary");
+        this.bsOpen = index.createEvent(this, "bsOpen");
+    }
+    /** Which form: `feed`, `announcement` or `teaser`. */
+    type = 'feed';
+    /** Heading. Defaults to "What's new" for `feed`; set it for the other forms. */
+    heading;
+    /** HTML heading level, 1-6. */
+    headingLevel = 2;
+    /** Shows a close button. */
+    closable = false;
+    /** Accessible name of the close button. */
+    closeLabel = 'Close';
+    // --- feed --------------------------------------------------------------------------------
+    /** The updates in the feed: `[{ id, category?, tag?, tagColor?, date?, unread?, heading, description?,
+     * actionLabel?, image? }]`. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's
+     * non-string props rule. */
+    entries = [];
+    /** The filter tabs: `[{ value, label }]`. `value: "all"` shows every entry; any other value shows the
+     * entries whose `category` matches. Defaults to All, New Features, Improvements and Fixes
+     * (categories `features`, `improvements`, `fixes`). Set `[]` for no tabs. */
+    filters = [
+        { value: 'all', label: 'All' },
+        { value: 'features', label: 'New Features' },
+        { value: 'improvements', label: 'Improvements' },
+        { value: 'fixes', label: 'Fixes' },
+    ];
+    /** The selected filter's `value`. Mutable: choosing a tab updates it. */
+    filter = 'all';
+    /** Label of the "Mark all as read" button, shown while any entry is `unread`. */
+    markAllReadLabel = 'Mark all as read';
+    /** Text of the release notes link. */
+    releaseNotesLabel = 'See all release notes';
+    /** URL of the full release notes. The link is only shown when this is set. */
+    releaseNotesUrl;
+    /** Text shown when the selected filter has no entries. */
+    emptyLabel = 'Nothing new here yet.';
+    // --- announcement ------------------------------------------------------------------------
+    /** Tag text (`announcement`, `teaser`), e.g. "New feature". */
+    tag;
+    /** Colour of the tag. */
+    tagColor = 'info';
+    /** URL of the hero image (`announcement`). Or slot your own into `hero`. */
+    image;
+    /** The bullet points (`announcement`). Must be set as a JS property -- see CONVENTIONS.md. */
+    points = [];
+    /** Current step, 1-based (`announcement`). Used with `total`. */
+    step = 1;
+    /** Number of announcements in the sequence (`announcement`). The step label is hidden when 0. */
+    total = 0;
+    /** Template of the step label; `{step}` and `{total}` are replaced. */
+    stepLabel = '{step} of {total}';
+    /** Label of the secondary button (`announcement`). Empty hides it. */
+    secondaryLabel = 'Remind me later';
+    /** Label of the primary button (`announcement`). Empty hides it. */
+    primaryLabel = 'Next';
+    // --- teaser ------------------------------------------------------------------------------
+    /** The date as text (`teaser`). */
+    date;
+    /** The line under the heading (`teaser`). */
+    description;
+    /** Label of the link (`teaser`). */
+    actionLabel = 'Open What’s new';
+    // --- events ------------------------------------------------------------------------------
+    /** Fires when "Mark all as read" is pressed (`feed`). Update the entries' `unread` yourself. */
+    bsMarkAllRead;
+    /** Fires when an entry's action link is pressed (`feed`): `{ id }`. */
+    bsEntryAction;
+    /** Fires when the user picks a filter tab (`feed`): `{ value }`. */
+    bsFilterChange;
+    /** Fires when the close button is pressed. */
+    bsClose;
+    /** Fires when the primary button (`announcement`) is pressed. */
+    bsPrimary;
+    /** Fires when the secondary button (`announcement`) is pressed. */
+    bsSecondary;
+    /** Fires when the teaser's link is pressed (`teaser`) -- open the feed. */
+    bsOpen;
+    /** True while something is assigned to the `hero` slot, so the hero area only exists then. */
+    hasHeroSlot = false;
+    // --- pieces ------------------------------------------------------------------------------
+    heading_(text, cls = '') {
+        const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 2));
+        return index.h(`h${level}`, { part: 'heading', id: 'heading', class: { 'bs-wn__heading': true, [cls]: !!cls } }, text);
+    }
+    renderClose(compact = false) {
+        if (!this.closable)
+            return null;
+        return (index.h("bs-icon-button", { part: "close", class: { 'bs-wn__close': true, 'bs-wn__close--compact': compact }, variant: "subtle", size: "md", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "aria-hidden": "true" }, index.h("path", { d: "M6 6L18 18M18 6L6 18" }))));
+    }
+    renderTag() {
+        if (!this.tag)
+            return null;
+        return (index.h("bs-chip-informative", { part: "tag", size: "sm", color: this.tagColor }, this.tag));
+    }
+    renderFeed() {
+        const all = this.entries ?? [];
+        const visible = this.filter === 'all' ? all : all.filter(e => e.category === this.filter);
+        const anyUnread = all.some(e => e.unread);
+        const filters = this.filters ?? [];
+        return (index.h("bs-card", { part: "container", class: "bs-wn bs-wn--feed", surface: "base", role: "region", "aria-labelledby": "heading" }, index.h("div", { class: "bs-wn__feed" }, index.h("div", { class: "bs-wn__head" }, this.heading_(this.heading ?? 'What’s new'), index.h("span", { class: "bs-wn__spacer" }), anyUnread && (index.h("bs-button", { part: "mark-all-read", class: "bs-wn__text-button", variant: "subtle", size: "sm", onClick: () => this.bsMarkAllRead.emit() }, this.markAllReadLabel)), this.renderClose()), filters.length > 0 && (index.h("div", { part: "filters", class: "bs-wn__filters" }, index.h("bs-tabs", { value: this.filter, onBsChange: (ev) => this.onFilter(ev.detail.value) }, filters.map(f => (index.h("bs-tab", { key: f.value, value: f.value, selected: f.value === this.filter }, f.label)))))), visible.length === 0 ? (index.h("p", { class: "bs-wn__empty" }, this.emptyLabel)) : (index.h("div", { part: "entries", class: "bs-wn__entries" }, visible.map((e, i) => (index.h("bs-whats-new-entry", { key: e.id, part: "entry", tag: e.tag, tagColor: e.tagColor, date: e.date, unread: !!e.unread, heading: e.heading, headingLevel: Math.min(6, (Number(this.headingLevel) || 2) + 1), description: e.description, actionLabel: e.actionLabel, divider: i < visible.length - 1 || !!this.releaseNotesUrl, onBsAction: () => this.bsEntryAction.emit({ id: e.id }) }, e.image && index.h("img", { slot: "image", src: e.image, alt: "" })))))), this.releaseNotesUrl && (index.h("div", { class: "bs-wn__footer" }, index.h("a", { part: "release-notes", class: "bs-wn__link", href: this.releaseNotesUrl }, index.h("span", { class: "bs-wn__link-text" }, this.releaseNotesLabel), index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("path", { d: "M7 17L17 7" }), index.h("path", { d: "M8 7H17V16" }))))))));
+    }
+    onFilter(value) {
+        if (value === this.filter)
+            return;
+        this.filter = value;
+        this.bsFilterChange.emit({ value });
+    }
+    renderAnnouncement() {
+        const step = this.total > 0 ? this.stepLabel.replace('{step}', String(this.step)).replace('{total}', String(this.total)) : '';
+        const points = this.points ?? [];
+        return (index.h("bs-card", { part: "container", class: "bs-wn bs-wn--announcement", surface: "base", role: "region", "aria-labelledby": "heading" }, index.h("div", { class: "bs-wn__announcement" }, this.renderClose(), index.h("div", { part: "hero", class: { 'bs-wn__hero': true, 'bs-wn__hero--visible': !!this.image || this.hasHeroSlot } }, this.image && index.h("img", { src: this.image, alt: "" }), index.h("slot", { name: "hero", onSlotchange: (ev) => (this.hasHeroSlot = ev.target.assignedNodes().length > 0) })), index.h("div", { class: "bs-wn__body" }, this.renderTag(), this.heading_(this.heading ?? '', 'bs-wn__heading--lg'), points.length > 0 && (index.h("ul", { part: "points", class: "bs-wn__points" }, points.map(p => (index.h("li", null, index.h("svg", { class: "bs-wn__check", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("path", { d: "M3.5 9.5L7 13L14.5 5" })), index.h("span", null, p)))))), index.h("div", { class: "bs-wn__announcement-footer" }, index.h("span", { part: "step", class: "bs-wn__step" }, step), index.h("div", { class: "bs-wn__actions" }, this.secondaryLabel && (index.h("bs-button", { part: "secondary", class: "bs-wn__text-button bs-wn__text-button--md", variant: "subtle", onClick: () => this.bsSecondary.emit() }, this.secondaryLabel)), this.primaryLabel && (index.h("bs-button", { part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, this.primaryLabel))))))));
+    }
+    renderTeaser() {
+        return (index.h("bs-card", { part: "container", class: "bs-wn bs-wn--teaser", surface: "base", role: "region", "aria-labelledby": "heading" }, index.h("div", { class: "bs-wn__teaser" }, index.h("div", { class: "bs-wn__teaser-row" }, this.renderTag(), this.date && (index.h("span", { part: "date", class: "bs-wn__date" }, this.date)), index.h("span", { class: "bs-wn__spacer" }), this.renderClose(true)), this.heading_(this.heading ?? '', 'bs-wn__heading--sm'), this.description && (index.h("p", { part: "description", class: "bs-wn__description" }, this.description)), this.actionLabel && (index.h("bs-button", { part: "action", class: "bs-wn__text-button bs-wn__link-button", variant: "subtle", size: "sm", onClick: () => this.bsOpen.emit() }, this.actionLabel, index.h("svg", { slot: "end-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("path", { d: "M5 12H19" }), index.h("path", { d: "M13 6L19 12L13 18" })))))));
+    }
+    render() {
+        switch (this.type) {
+            case 'announcement':
+                return this.renderAnnouncement();
+            case 'teaser':
+                return this.renderTeaser();
+            default:
+                return this.renderFeed();
+        }
+    }
+};
+BsWhatsNew.style = bsWhatsNewCss();
+
+exports.bs_whats_new = BsWhatsNew;