@brandsync/wc 1.10.0 → 1.11.0

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

@@ -1,86 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-AgoOSYvW.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) {
-        registerInstance(this, hostRef);
-        this.bsSelect = createEvent(this, "bsSelect");
-    }
-    get el() { return 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 (h("button", { key: '87234360dfed766afe447c3e8f037d8b59868a15', 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 }, h("span", { key: 'cecdf03d52896828f098956a25342209c0244f39', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'f4bbc1ac9ee7df0db6cb393c69b43227add0db3e', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'c14726bc5b6f47d0a96fdf5807a2dd7b2466a27f', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '88936beb454b7fa0b9d1c67d39e812f86e89ae56', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'a32984bfa7879e702748171fc51a4679b58d0b8b', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'ad516087badafb57ff4df818d0b9a100373f205e', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '30e25441bd650875ce8b6dd97befc1053c40ca47', part: "indicator", class: "bs-tab__indicator" })));
-    }
-};
-BsTab.style = bsTabCss();
-
-export { BsTab as bs_tab };

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

@@ -1,131 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-AgoOSYvW.js';
-
-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) {
-        registerInstance(this, hostRef);
-        this.bsChange = createEvent(this, "bsChange");
-    }
-    get el() { return 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 (h("div", { key: 'b47d3502305490c9098b825f1eb8c60f45dad5d8', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '133cf0b2ea93354a664bb304579fa59d85e53edf', onSlotchange: () => this.syncRovingTabindex() })));
-    }
-    static get watchers() { return {
-        "value": [{
-                "onValueChange": 0
-            }],
-        "orientation": [{
-                "syncRovingTabindex": 0
-            }]
-    }; }
-};
-BsTabs.style = bsTabsCss();
-
-export { BsTabs as bs_tabs };