@brandsync/wc 1.9.0 → 1.11.0

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

@@ -0,0 +1,207 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DqQRXQMx.js';
+
+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) {
+        registerInstance(this, hostRef);
+        this.bsChange = createEvent(this, "bsChange");
+        this.bsCancel = createEvent(this, "bsCancel");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return getElement(this); }
+    internals;
+    initialValue = '';
+    typed = '';
+    /** The `name` the confirmed value is submitted under in a surrounding `<form>`. */
+    name;
+    /** The confirmed time, 24-hour `HH:mm`. Empty means no time chosen yet (the picker opens on
+     * 00:00). Mutable so Confirm updates it directly; `bsChange` still fires. */
+    value = '';
+    /** Display format: `12h` (with an AM/PM dropdown) or `24h`. The user can switch it with the
+     * 24h switch. Does not change `value`, which is always 24-hour. */
+    format = '12h';
+    /** Step, in minutes, of the minute spinner's carets and arrow keys. Typing is not constrained. */
+    minuteStep = 1;
+    /** Heading text. */
+    heading = 'Select Time';
+    /** Label of the 24h switch. */
+    formatLabel = '24h';
+    /** Label of the Confirm button. */
+    confirmLabel = 'Confirm';
+    /** Label of the Cancel button. */
+    cancelLabel = 'Cancel';
+    /** Accessible name of the hour spinner. */
+    hourLabel = 'Hour';
+    /** Accessible name of the minute spinner. */
+    minuteLabel = 'Minute';
+    /** Accessible name of the AM/PM dropdown. */
+    periodLabel = 'AM/PM';
+    /** Fires when the user presses Confirm: `{ value }` as 24-hour `HH:mm`. Not fired when `value` is
+     * set programmatically. */
+    bsChange;
+    /** Fires when the user presses Cancel. The draft is reset to `value`. */
+    bsCancel;
+    /** Draft hour, 0-23. */
+    hour = 0;
+    /** Draft minute, 0-59. */
+    minute = 0;
+    componentWillLoad() {
+        this.initialValue = this.value;
+        this.resetDraft();
+        this.syncFormValue();
+    }
+    onValueChange() {
+        this.resetDraft();
+        this.syncFormValue();
+    }
+    onNameChange() {
+        this.syncFormValue();
+    }
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback() {
+        this.value = this.initialValue;
+    }
+    resetDraft() {
+        const t = parseTime(this.value);
+        this.hour = t ? t.hour : 0;
+        this.minute = t ? t.minute : 0;
+    }
+    syncFormValue() {
+        if (!this.internals?.setFormValue)
+            return;
+        this.internals.setFormValue(this.value ?? '');
+    }
+    get step() {
+        const n = Math.trunc(Number(this.minuteStep));
+        return Number.isFinite(n) && n >= 1 && n <= 59 ? n : 1;
+    }
+    get is12h() {
+        return this.format !== '24h';
+    }
+    get isPm() {
+        return this.hour >= 12;
+    }
+    // --- stepping ----------------------------------------------------------------------------
+    /** The number shown in a column. In 12h mode the hour reads 1-12. */
+    shown(col) {
+        if (col === 'minute')
+            return this.minute;
+        return this.is12h ? this.hour % 12 || 12 : this.hour;
+    }
+    bounds(col) {
+        if (col === 'minute')
+            return [0, 59];
+        return this.is12h ? [1, 12] : [0, 23];
+    }
+    setShown(col, n) {
+        if (col === 'minute') {
+            this.minute = n;
+        }
+        else {
+            // 12h keeps the current AM/PM; 12 AM is hour 0 and 12 PM is hour 12.
+            this.hour = this.is12h ? (n % 12) + (this.isPm ? 12 : 0) : n;
+        }
+    }
+    stepBy(col, dir) {
+        const [min, max] = this.bounds(col);
+        const size = max - min + 1;
+        const by = col === 'minute' ? this.step : 1;
+        let next = this.shown(col) + dir * by;
+        if (col === 'minute') {
+            // Snap onto the step grid when leaving an off-grid value (e.g. typed 07 with step 15).
+            const cur = this.shown(col);
+            next = dir === 1 ? Math.floor(cur / by) * by + by : Math.ceil(cur / by) * by - by;
+        }
+        this.setShown(col, ((((next - min) % size) + size) % size) + min);
+    }
+    onKeyDown = (col) => (ev) => {
+        const [min, max] = this.bounds(col);
+        if (ev.key === 'ArrowUp')
+            this.stepBy(col, 1);
+        else if (ev.key === 'ArrowDown')
+            this.stepBy(col, -1);
+        else if (ev.key === 'Home')
+            this.setShown(col, min);
+        else if (ev.key === 'End')
+            this.setShown(col, max);
+        else if (/^\d$/.test(ev.key)) {
+            // Two digits make a value; a lone digit that can't start a valid two-digit value commits
+            // immediately.
+            const candidate = Number((this.typed + ev.key).slice(-2));
+            this.typed = (this.typed + ev.key).slice(-2);
+            if (candidate >= min && candidate <= max)
+                this.setShown(col, candidate);
+            else {
+                this.typed = ev.key;
+                const single = Number(ev.key);
+                if (single >= min && single <= max)
+                    this.setShown(col, single);
+            }
+            if (this.typed.length === 2)
+                this.typed = '';
+            ev.preventDefault();
+            return;
+        }
+        else
+            return;
+        this.typed = '';
+        ev.preventDefault();
+    };
+    // --- actions -----------------------------------------------------------------------------
+    confirm = () => {
+        const value = `${pad(this.hour)}:${pad(this.minute)}`;
+        this.value = value;
+        this.bsChange.emit({ value });
+    };
+    cancel = () => {
+        this.resetDraft();
+        this.bsCancel.emit();
+    };
+    // --- rendering ---------------------------------------------------------------------------
+    renderColumn(col, label) {
+        const [min, max] = this.bounds(col);
+        const n = this.shown(col);
+        const stepLabel = (dir) => `${dir} ${label.toLowerCase()}`;
+        return (h("div", { part: "spinner", class: "bs-timepicker__spinner" }, h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel('Increase'), tabindex: -1, onClick: () => this.stepBy(col, 1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M18 15L12 9L6 15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), 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)), h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel('Decrease'), tabindex: -1, onClick: () => this.stepBy(col, -1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+    }
+    render() {
+        return (h("bs-card", { key: 'e0545d99e052005bcad5509f81505f628adb5dc4', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: '664c7184dcefe5c63f03afad3953787cbc3064cc', class: "bs-timepicker__body" }, h("div", { key: '602d4f0ca6975b22daa7c7a37a6d53a259c39768', part: "header", class: "bs-timepicker__header" }, h("div", { key: '1650464c84e066f14f6343f18f779e35932535c3', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'debc6155ccf39b90f281d49240203d642fb5039d', class: "bs-timepicker__format" }, h("span", { key: '147a6d85b4f0922b5c7d96ebef88b3c70d1fbe05' }, this.formatLabel), h("bs-switch", { key: 'ddb0be1751ce8246acbfd6c187e66fb6bc878cd5', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '35f13bd74133f2c1109df96aafdc456178e4a32f', class: "bs-timepicker__divider" }), h("div", { key: '9c979a8d3300a8f5dba7d8df784dc8ef691a40a6', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '5b4af0371fd816067b92854da2b35e5a7de8e4ea', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'a70450b5068add559c48e795ce6aca204b30d02d', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: '26a760f4d4712eca3df48b97bde276ce241511d5', cx: "2", cy: "10", r: "2" }), h("circle", { key: '3c6eb56e2736353dc5e5bc4a1d6ef64242f6a367', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (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;
+            } }))), h("div", { key: '08b57e8c0b895e272d98386fe5b2ac2e55a87de0', class: "bs-timepicker__divider" }), h("div", { key: '5b1af1da10c4333ef6b826eaafd75fa12ef2e785', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: 'ad24615dbe6ae46e00ca558f71cee030504573a5', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: 'f76cd192e1e7e0bb524080cf54a655c5b4508a3c', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "name": [{
+                "onNameChange": 0
+            }]
+    }; }
+};
+function pad(n) {
+    return String(n).padStart(2, '0');
+}
+function parseTime(s) {
+    const m = /^(\d{1,2}):(\d{2})$/.exec((s ?? '').trim());
+    if (!m)
+        return undefined;
+    const hour = Number(m[1]);
+    const minute = Number(m[2]);
+    return hour <= 23 && minute <= 59 ? { hour, minute } : undefined;
+}
+BsTimepicker.style = bsTimepickerCss();
+
+export { BsTimepicker as bs_timepicker };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-AgoOSYvW.js';
+import { r as registerInstance, c as createEvent, h } from './index-DqQRXQMx.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}`;
 
@@ -17,7 +17,7 @@ const BsToast = class {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '238f177a44aa2bd735432fe8f3fd1d761065d023', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '717e222c7b271db0ff5aa57db8ce0efa15bfaf50', class: "bs-toast__content" }, h("span", { key: '316106f6efbcc8abe6bb155e77ec21343b93287c', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '5973febbe8d7be889fd14cac847c417a22acb111', state: this.state })), h("span", { key: '1d16db1ba5c010ac5af237b4b399e0dda6f6df59', part: "message", class: "bs-toast__message" }, h("slot", { key: '40e97271fec790a850491be58ae87e54b4765a6a' }))), h("div", { key: '16744b9b6ad79d13aec16afa6593ab0de1ec5ee2', class: "bs-toast__actions" }, h("button", { key: '87adace9953b2dca831543132f3fe5590bc4c52f', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'dcf5ffe7a5553ec2792d801c7f62ed367d1454ef' })))));
+        return (h("div", { key: 'fcf10204b781318554bd1d1b65b3b003759f47ca', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '77a9fc881d530b43aa93cd71ab00d79a402ac5df', class: "bs-toast__content" }, h("span", { key: '18b4ffee843c2f9f235477e729a7a5bca1044595', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '62a78820785f12ccfa503d7690ae99d2b3b47aa2', state: this.state })), h("span", { key: 'b17882e4d5f4afe5bcfa5704b515c145df94799b', part: "message", class: "bs-toast__message" }, h("slot", { key: '678d2256cc21e6e07b099d417837b5891e7d6021' }))), h("div", { key: 'aba935f0a62a599b9eacfed9d13598f70a941283', class: "bs-toast__actions" }, h("button", { key: 'a9ee43cf75eca8e737d5e59507408de7f8bffaf1', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '4e4c5a25e6b25da2362385f1be5c4b86f02bbeb0' })))));
     }
 };
 const StateIcon = ({ state }) => {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-AgoOSYvW.js';
+import { r as registerInstance, h } from './index-DqQRXQMx.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%)}`;
 
@@ -14,7 +14,7 @@ const BsTooltip = class {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: 'b7c2ee57db3a4e36cdd106d78f0f8d54c45a04c6', class: "bs-tooltip" }, h("span", { key: '22b738a760e9967233052ce4540c77da4ac9563e', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '69a8b07711478e699be4c8151d9f7dfd2e4e0bf4', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: 'b32c75a06582b8e8f99b973889450e9100b75323' }))));
+        return (h("div", { key: '8fdc149cce564aa5531956eda52b81bedd9db1bb', class: "bs-tooltip" }, h("span", { key: '34234ea02b510a5a728bb97d259cfbd2c8f7f7b2', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '04d825a91dc6753a90b7daaf370e575c9ddee6d1', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '81b8681507245e597177d169c1925dfb65aaeeab' }))));
     }
 };
 BsTooltip.style = bsTooltipCss();

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

@@ -0,0 +1,142 @@
+import { r as registerInstance, c as createEvent, h } from './index-DqQRXQMx.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) {
+        registerInstance(this, hostRef);
+        this.bsMarkAllRead = createEvent(this, "bsMarkAllRead");
+        this.bsEntryAction = createEvent(this, "bsEntryAction");
+        this.bsFilterChange = createEvent(this, "bsFilterChange");
+        this.bsClose = createEvent(this, "bsClose");
+        this.bsPrimary = createEvent(this, "bsPrimary");
+        this.bsSecondary = createEvent(this, "bsSecondary");
+        this.bsOpen = 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 h(`h${level}`, { part: 'heading', id: 'heading', class: { 'bs-wn__heading': true, [cls]: !!cls } }, text);
+    }
+    renderClose(compact = false) {
+        if (!this.closable)
+            return null;
+        return (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() }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { d: "M6 6L18 18M18 6L6 18" }))));
+    }
+    renderTag() {
+        if (!this.tag)
+            return null;
+        return (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 (h("bs-card", { part: "container", class: "bs-wn bs-wn--feed", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { class: "bs-wn__feed" }, h("div", { class: "bs-wn__head" }, this.heading_(this.heading ?? 'What’s new'), h("span", { class: "bs-wn__spacer" }), anyUnread && (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 && (h("div", { part: "filters", class: "bs-wn__filters" }, h("bs-tabs", { value: this.filter, onBsChange: (ev) => this.onFilter(ev.detail.value) }, filters.map(f => (h("bs-tab", { key: f.value, value: f.value, selected: f.value === this.filter }, f.label)))))), visible.length === 0 ? (h("p", { class: "bs-wn__empty" }, this.emptyLabel)) : (h("div", { part: "entries", class: "bs-wn__entries" }, visible.map((e, i) => (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 && h("img", { slot: "image", src: e.image, alt: "" })))))), this.releaseNotesUrl && (h("div", { class: "bs-wn__footer" }, h("a", { part: "release-notes", class: "bs-wn__link", href: this.releaseNotesUrl }, h("span", { class: "bs-wn__link-text" }, this.releaseNotesLabel), h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M7 17L17 7" }), 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 (h("bs-card", { part: "container", class: "bs-wn bs-wn--announcement", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { class: "bs-wn__announcement" }, this.renderClose(), h("div", { part: "hero", class: { 'bs-wn__hero': true, 'bs-wn__hero--visible': !!this.image || this.hasHeroSlot } }, this.image && h("img", { src: this.image, alt: "" }), h("slot", { name: "hero", onSlotchange: (ev) => (this.hasHeroSlot = ev.target.assignedNodes().length > 0) })), h("div", { class: "bs-wn__body" }, this.renderTag(), this.heading_(this.heading ?? '', 'bs-wn__heading--lg'), points.length > 0 && (h("ul", { part: "points", class: "bs-wn__points" }, points.map(p => (h("li", null, 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" }, h("path", { d: "M3.5 9.5L7 13L14.5 5" })), h("span", null, p)))))), h("div", { class: "bs-wn__announcement-footer" }, h("span", { part: "step", class: "bs-wn__step" }, step), h("div", { class: "bs-wn__actions" }, this.secondaryLabel && (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 && (h("bs-button", { part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, this.primaryLabel))))))));
+    }
+    renderTeaser() {
+        return (h("bs-card", { part: "container", class: "bs-wn bs-wn--teaser", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { class: "bs-wn__teaser" }, h("div", { class: "bs-wn__teaser-row" }, this.renderTag(), this.date && (h("span", { part: "date", class: "bs-wn__date" }, this.date)), h("span", { class: "bs-wn__spacer" }), this.renderClose(true)), this.heading_(this.heading ?? '', 'bs-wn__heading--sm'), this.description && (h("p", { part: "description", class: "bs-wn__description" }, this.description)), this.actionLabel && (h("bs-button", { part: "action", class: "bs-wn__text-button bs-wn__link-button", variant: "subtle", size: "sm", onClick: () => this.bsOpen.emit() }, this.actionLabel, 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" }, h("path", { d: "M5 12H19" }), 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();
+
+export { BsWhatsNew as bs_whats_new };