@nova-design-system/nova-webcomponents 3.31.1 → 3.31.2-beta.3

package/dist/collection/components/nv-pill/nv-pill.js

@@ -0,0 +1,464 @@
+import { Build, Host, h, forceUpdate, } from "@stencil/core";
+import { getAriaStateAttributes, normalizeToggleAriaRole, getRoleAwareNextSelectedState, isToggleKey, } from "../../utils/accessibility.utils";
+/**
+ * The Pill component is an interactive, selectable chip used for filtering,
+ * categorization, and compact toggle states.
+ *
+ * @slot leading-icon - Icon before the label.
+ */
+export class NvPill {
+    constructor() {
+        this.hasWarnedMissingLabel = false;
+        /**
+         * Whether the pill is currently selected.
+         */
+        this.selected = false;
+        /**
+         * Prevents all interaction with the pill.
+         */
+        this.disabled = false;
+        /**
+         * ARIA role for accessibility contexts.
+         * Defaults to button and can be overridden by group wrappers.
+         */
+        this.pillAriaRole = 'button';
+        this.toggleSelected = () => {
+            if (!this.hasInteractiveLabel)
+                return;
+            const nextSelected = getRoleAwareNextSelectedState(this.normalizedRole, this.selected, this.disabled);
+            if (nextSelected === this.selected)
+                return;
+            this.selected = nextSelected;
+            if (this.isRadioInRadioGroup && this.selected) {
+                const parent = this.el.parentElement;
+                if (parent) {
+                    const radioPills = Array.from(parent.querySelectorAll('nv-pill[pill-aria-role="radio"]'));
+                    radioPills.forEach(pill => {
+                        if (pill !== this.el) {
+                            pill.selected = false;
+                            pill.removeAttribute('selected');
+                        }
+                        const nextTabIndex = pill === this.el ? 0 : -1;
+                        this.setPillTabIndex(pill, nextTabIndex);
+                        if (pill !== this.el) {
+                            forceUpdate(pill);
+                        }
+                    });
+                }
+                // Watchers can fire before reflected attributes settle; pin the selected
+                // radio for the batched sync to keep radiogroup tabindex deterministic.
+                this.queueRadioGroupTabIndexSync(this.el);
+            }
+            else {
+                this.syncRadioGroupTabIndexes(this.selected ? this.el : undefined);
+            }
+            this.toggled.emit({
+                selected: this.selected,
+                active: this.selected,
+                value: this.value,
+            });
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    get normalizedRole() {
+        return normalizeToggleAriaRole(String(this.pillAriaRole));
+    }
+    get resolvedLabel() {
+        return (this.label ?? '').trim();
+    }
+    get hasInteractiveLabel() {
+        return this.resolvedLabel.length > 0;
+    }
+    get resolvedTabIndex() {
+        if (this.disabled || !this.hasInteractiveLabel)
+            return -1;
+        if (this.normalizedRole !== 'radio')
+            return 0;
+        return NvPill.radioGroupTabIndexCache.get(this.el) ?? 0;
+    }
+    get isRadioInRadioGroup() {
+        return (this.normalizedRole === 'radio' &&
+            this.el.parentElement?.getAttribute('role') === 'radiogroup');
+    }
+    isInteractiveRadioPill(pill) {
+        const resolvedLabel = (pill.getAttribute('label') ?? pill.label ?? '').trim().length > 0;
+        return !pill.hasAttribute('disabled') && resolvedLabel;
+    }
+    setPillTabIndex(pill, value) {
+        pill.tabIndex = value;
+        NvPill.radioGroupTabIndexCache.set(pill, value);
+    }
+    syncRadioGroupTabIndexes(preferredSelectedRadio) {
+        if (!this.isRadioInRadioGroup)
+            return;
+        const parent = this.el.parentElement;
+        if (!parent)
+            return;
+        const radioPills = Array.from(parent.querySelectorAll('nv-pill[pill-aria-role="radio"]'));
+        const selectedRadio = preferredSelectedRadio &&
+            this.isInteractiveRadioPill(preferredSelectedRadio)
+            ? preferredSelectedRadio
+            : radioPills.find(pill => this.isInteractiveRadioPill(pill) &&
+                pill.hasAttribute('selected'));
+        const firstInteractiveRadio = radioPills.find(pill => this.isInteractiveRadioPill(pill));
+        radioPills.forEach(pill => {
+            if (!this.isInteractiveRadioPill(pill)) {
+                this.setPillTabIndex(pill, -1);
+                return;
+            }
+            if (selectedRadio) {
+                const nextTabIndex = pill === selectedRadio ? 0 : -1;
+                this.setPillTabIndex(pill, nextTabIndex);
+                return;
+            }
+            const nextTabIndex = pill === firstInteractiveRadio ? 0 : -1;
+            this.setPillTabIndex(pill, nextTabIndex);
+        });
+    }
+    queueRadioGroupTabIndexSync(preferredSelectedRadio) {
+        if (!this.isRadioInRadioGroup)
+            return;
+        const parent = this.el.parentElement;
+        if (!parent)
+            return;
+        const pending = NvPill.pendingRadioGroupSyncs.get(parent);
+        if (pending) {
+            if (preferredSelectedRadio &&
+                this.isInteractiveRadioPill(preferredSelectedRadio)) {
+                pending[1] = preferredSelectedRadio;
+            }
+            return;
+        }
+        const nextPending = [this];
+        if (preferredSelectedRadio &&
+            this.isInteractiveRadioPill(preferredSelectedRadio)) {
+            nextPending[1] = preferredSelectedRadio;
+        }
+        NvPill.pendingRadioGroupSyncs.set(parent, nextPending);
+        queueMicrotask(() => {
+            const latestPending = NvPill.pendingRadioGroupSyncs.get(parent);
+            NvPill.pendingRadioGroupSyncs.delete(parent);
+            if (!latestPending)
+                return;
+            const [runner, latestPreferredSelectedRadio] = latestPending;
+            if (!runner.el.isConnected)
+                return;
+            runner.syncRadioGroupTabIndexes(latestPreferredSelectedRadio);
+        });
+    }
+    handleRadioGroupArrowKey(event) {
+        if (!this.isRadioInRadioGroup)
+            return false;
+        const isNextKey = event.key === 'ArrowRight' ||
+            event.key === 'ArrowDown' ||
+            event.key === 'Right' ||
+            event.key === 'Down';
+        const isPreviousKey = event.key === 'ArrowLeft' ||
+            event.key === 'ArrowUp' ||
+            event.key === 'Left' ||
+            event.key === 'Up';
+        if (!isNextKey && !isPreviousKey) {
+            return false;
+        }
+        const parent = this.el.parentElement;
+        if (!parent) {
+            return false;
+        }
+        const radioPills = Array.from(parent.querySelectorAll('nv-pill[pill-aria-role="radio"]')).filter(pill => this.isInteractiveRadioPill(pill));
+        if (radioPills.length === 0) {
+            return false;
+        }
+        event.preventDefault();
+        const currentIndex = radioPills.indexOf(this.el);
+        if (currentIndex === -1) {
+            return true;
+        }
+        const delta = isNextKey ? 1 : -1;
+        const nextIndex = (currentIndex + delta + radioPills.length) % radioPills.length;
+        const nextRadio = radioPills[nextIndex];
+        if (nextRadio === this.el) {
+            return true;
+        }
+        const previousSelectedRadio = radioPills.find(pill => pill.selected);
+        radioPills.forEach(pill => {
+            const isTarget = pill === nextRadio;
+            if (pill.selected === isTarget)
+                return;
+            pill.selected = isTarget;
+            if (!isTarget) {
+                pill.removeAttribute('selected');
+            }
+            if (pill !== nextRadio) {
+                forceUpdate(pill);
+            }
+        });
+        this.queueRadioGroupTabIndexSync(nextRadio);
+        nextRadio.focus();
+        if (previousSelectedRadio !== nextRadio) {
+            nextRadio.dispatchEvent(new CustomEvent('toggled', {
+                bubbles: false,
+                detail: {
+                    selected: true,
+                    active: true,
+                    value: nextRadio.value,
+                },
+            }));
+        }
+        return true;
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LISTENERS
+    componentDidLoad() {
+        this.queueRadioGroupTabIndexSync();
+    }
+    handleTabIndexAffectingChanges() {
+        if (!this.isRadioInRadioGroup) {
+            NvPill.radioGroupTabIndexCache.delete(this.el);
+        }
+        this.queueRadioGroupTabIndexSync();
+    }
+    handleKeyDown(event) {
+        if (!this.hasInteractiveLabel)
+            return;
+        if (this.disabled)
+            return;
+        if (event.repeat)
+            return;
+        if (this.handleRadioGroupArrowKey(event)) {
+            return;
+        }
+        if (isToggleKey(event.key)) {
+            event.preventDefault();
+            this.el.click();
+        }
+    }
+    handleHostClickCapture(event) {
+        if (!this.hasInteractiveLabel) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            event.stopPropagation();
+            return;
+        }
+        if (!this.disabled)
+            return;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        if (Build.isDev &&
+            !this.hasInteractiveLabel &&
+            !this.hasWarnedMissingLabel) {
+            console.warn('[nv-pill] Missing required label prop. Unlabeled pills are rendered as non-interactive for accessibility.');
+            this.hasWarnedMissingLabel = true;
+        }
+        const ariaState = getAriaStateAttributes(this.normalizedRole, this.selected);
+        return (h(Host, { key: 'a117cead9ef6ad60f00fb19da3fa6d513a707092', role: this.hasInteractiveLabel ? this.normalizedRole : undefined, tabindex: this.resolvedTabIndex, "aria-pressed": this.hasInteractiveLabel ? ariaState.ariaPressed : undefined, "aria-checked": this.hasInteractiveLabel ? ariaState.ariaChecked : undefined, "aria-disabled": this.hasInteractiveLabel && this.disabled ? 'true' : undefined, "aria-label": this.hasInteractiveLabel ? this.resolvedLabel : undefined, "aria-hidden": this.hasInteractiveLabel ? undefined : 'true', onClick: this.hasInteractiveLabel ? this.toggleSelected : undefined }, h("span", { key: '1319aed0d2e9191624f41d8bc9c3e942ee2aa151', class: "leading-icon", "aria-hidden": "true" }, this.leadingIcon && (h("nv-icon", { key: '37b314abc0b385ba86d482312eb7e45b281f2705', name: this.leadingIcon, size: "xs" })), h("slot", { key: 'c61fb778c205c2dc7e87482c4650cb776ae46025', name: "leading-icon" })), h("span", { key: '4908da1bdada3803d029ca0757f9c064ae4d39ff', class: "label" }, this.resolvedLabel), this.selected && (h("span", { key: '3dcfab23e115665d403c1ba15ac6c74cc24e42ed', class: "trailing-icon", "aria-hidden": "true" }, h("nv-icon", { key: '2447fe8fc1b24acf95fa5b35bd167010173df92e', name: "check", size: "xs" })))));
+    }
+    static get is() { return "nv-pill"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-pill.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-pill.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visible text inside the pill."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the pill is currently selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prevents all interaction with the pill."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional value emitted when the pill toggles."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "leadingIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${IconName}`",
+                    "resolved": "\"access-point\" | \"access-point-off\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back\" | \"arrow-back-up\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-forward\" | \"arrow-forward-up\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"bell\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bike\" | \"bluetooth\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bolt\" | \"bolt-off\" | \"book\" | \"bookmark\" | \"bookmark-off\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"brush\" | \"building\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"bulb\" | \"bulb-off\" | \"cake\" | \"calendar\" | \"calendar-time\" | \"calendar-week\" | \"camera\" | \"camera-off\" | \"car\" | \"car-crane\" | \"caravan\" | \"cash\" | \"cash-banknote\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area\" | \"chart-area-line\" | \"chart-arrows\" | \"chart-arrows-vertical\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-minus\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clock\" | \"clock-edit\" | \"cloud\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile\" | \"device-mobile-rotated\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction\" | \"direction-horizontal\" | \"direction-sign\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots\" | \"dots-vertical\" | \"download\" | \"drone\" | \"droplet\" | \"droplet-filled\" | \"droplet-half\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser\" | \"eraser-off\" | \"exclamation-mark\" | \"external-link\" | \"eye\" | \"eye-check\" | \"eye-off\" | \"eyeglass2\" | \"face-id\" | \"feather\" | \"file\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text\" | \"file-text-bookmark\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"files\" | \"files-off\" | \"filter\" | \"filter-off\" | \"filter-sort\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge\" | \"gauge-off\" | \"gift\" | \"git-branch\" | \"git-branch-delete\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones\" | \"headphones-off\" | \"headset\" | \"heart\" | \"heart-off\" | \"heartbeat\" | \"helicopter\" | \"helmet\" | \"helmet-swopp\" | \"help\" | \"history\" | \"home\" | \"hourglass\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"inbox\" | \"info-circle\" | \"info-small\" | \"keyboard\" | \"keyboard-hide\" | \"keyboard-show\" | \"layers-intersect\" | \"layers-off\" | \"layout\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list\" | \"list-search\" | \"loader\" | \"location\" | \"lock\" | \"lock-off\" | \"lock-open\" | \"login\" | \"logout\" | \"mail\" | \"mail-forward\" | \"mail-opened\" | \"map\" | \"map-pin\" | \"map-pin-2\" | \"map-pin-off\" | \"master-data\" | \"menu\" | \"message\" | \"message-dots\" | \"message-off\" | \"messages\" | \"microphone\" | \"microphone-off\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"photo\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned\" | \"pinned-off\" | \"plane\" | \"plane-off\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug\" | \"plug-connected\" | \"plus\" | \"power\" | \"power-ac\" | \"power-dc\" | \"presentation\" | \"presentation-analytics\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle\" | \"puzzle-2\" | \"pylon\" | \"qrcode\" | \"question-mark\" | \"quotes\" | \"quotes-open\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"recharging\" | \"recycle\" | \"refresh\" | \"refresh-alert\" | \"refresh-off\" | \"repeat\" | \"repeat-once\" | \"replace\" | \"report\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"ripple\" | \"ripple-off\" | \"rocket\" | \"rotate\" | \"rotate-2\" | \"rotate-clockwise\" | \"rotate-clockwise-2\" | \"rotate-dot\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share\" | \"share-2\" | \"shield\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"ship\" | \"ship-off\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature\" | \"temperature-off\" | \"template\" | \"terminal\" | \"text\" | \"text-size\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash\" | \"trash-off\" | \"tree\" | \"trees\" | \"trending-down\" | \"trending-down-2\" | \"trending-down-3\" | \"trending-up\" | \"trending-up-2\" | \"trending-up-3\" | \"truck\" | \"truck-delivery\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"users\" | \"users-group\" | \"versions\" | \"video\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"volume\" | \"volume-2\" | \"volume-3\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi\" | \"wifi-off\" | \"wind\" | \"wind-direction\" | \"windmill\" | \"wood\" | \"world\" | \"world-code\" | \"writing\" | \"x\" | \"zoom-reset\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../nv-icon/nv-icons",
+                            "id": "src/components/nv-icon/nv-icons.ts::IconName",
+                            "referenceLocation": "IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "icon",
+                            "text": undefined
+                        }],
+                    "text": "Optional leading icon rendered before the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "leading-icon"
+            },
+            "pillAriaRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToggleAriaRole",
+                    "resolved": "\"button\" | \"checkbox\" | \"radio\"",
+                    "references": {
+                        "ToggleAriaRole": {
+                            "location": "import",
+                            "path": "../../utils/accessibility.utils",
+                            "id": "src/utils/accessibility.utils.ts::ToggleAriaRole",
+                            "referenceLocation": "ToggleAriaRole"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA role for accessibility contexts.\nDefaults to button and can be overridden by group wrappers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "pill-aria-role",
+                "defaultValue": "'button'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggled",
+                "name": "toggled",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected state changes.\nIntentionally non-bubbling; consumers should listen on the pill element."
+                },
+                "complexType": {
+                    "original": "{\n    /** Whether the pill is selected after toggling. */\n    selected: boolean;\n    /** Backward-compatible alias for selected. */\n    active: boolean;\n    /** Optional value associated with the pill. */\n    value?: string;\n  }",
+                    "resolved": "{ selected: boolean; active: boolean; value?: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selected",
+                "methodName": "handleTabIndexAffectingChanges"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleTabIndexAffectingChanges"
+            }, {
+                "propName": "label",
+                "methodName": "handleTabIndexAffectingChanges"
+            }, {
+                "propName": "pillAriaRole",
+                "methodName": "handleTabIndexAffectingChanges"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleHostClickCapture",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}
+NvPill.pendingRadioGroupSyncs = new WeakMap();
+NvPill.radioGroupTabIndexCache = new WeakMap();

package/dist/collection/components/nv-popover/nv-popover.js

@@ -311,7 +311,7 @@ export class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'bf65e878d126fd511b574bf0262dde4f60e89750' }, h("slot", { key: '5482a6bc3d6eb3edfa6653623f6c3024c6d150be', name: "trigger" }), h("div", { key: '6cd445d44ad05def95647d2898dc19092716a8ee', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'b23f0f9709f733a44d239a05b99f965d5ba036fb', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '423901f5afaf3418edc8870b4de7b113151c685d', name: "content" }))));
+        return (h(Host, { key: '1a604043f59c8aa04237b6d03838125079ac5c49' }, h("slot", { key: 'c22461b3d5050f7b502635221cbe17c03ef425a9', name: "trigger" }), h("div", { key: '58a438db8308be12d854afe3deda462d4ae528fb', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'af18bf4b8700484ca989a8d45da8295e8d11ea2e', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: 'f3308bfc01d5a4f954a1f0b822cf378cd874f9bd', name: "content" }))));
     }
     static get is() { return "nv-popover"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-row/nv-row.js

@@ -7,7 +7,7 @@ export class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'dd18c6bf2c540a0f9389d32c01ce1bf19417e15a' }, h("slot", { key: '2bae51fa253dd71ff2318af8538a64200b7dfef4' })));
+        return (h(Host, { key: 'f19fb4030becd15fb3cc8f6d3a7e3a04d8a172e4' }, h("slot", { key: 'e1f3ae7b01b0a66874ea6af627a503bed92e7f82' })));
     }
     static get is() { return "nv-row"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-sidebar/nv-sidebar.js

@@ -317,9 +317,9 @@ export class NvSidebar {
         const isCollapsed = this.type === 'collapsible' && !this.open;
         const showResizeHandle = this.resizable && !isCollapsed;
         const [ariaValueMin, ariaValueMax] = this.getBounds();
-        return (h(Host, { key: '6d43cb441e9477d4146d44af59365848dbbee875', role: "navigation", collapsed: isCollapsed ? true : undefined, resizing: this.resizing ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, h("div", { key: 'f6c58fbbafdb759499dd5a52e45eebc9ed6e5f4a', class: "nv-sidebar-container" }, h("slot", { key: '9ebf341658bb5631858390e3c76e274de72b5448' })), this.type === 'collapsible' && (h("button", { key: '1fd482c9157d47a5852395eb99a65f044f3db76a', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, h("nv-icon", { key: 'cd0a51cd731fc8c703256c3b781e0f20b14a3e2f', name: this.open
+        return (h(Host, { key: 'f584d8b2007d46a966b1d5ea00ccc20ffdb7a566', role: "navigation", collapsed: isCollapsed ? true : undefined, resizing: this.resizing ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, h("div", { key: 'b4264b03e34c809616d492519146d4be4c6e9199', class: "nv-sidebar-container" }, h("slot", { key: 'b272545553a32d154b1d994057957ad6ef5f0413' })), this.type === 'collapsible' && (h("button", { key: '0c3ee094010027fc2036974116087c64dc8cf6c5', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, h("nv-icon", { key: '3bfcf6301a5376ff9a144912af82e1b83ed3b617', name: this.open
                 ? 'layout-sidebar-left-collapse'
-                : 'layout-sidebar-right-collapse', size: "sm" }))), showResizeHandle && (h("div", { key: '75fe0b6d98ad9558b9003c541f255f84a41dbf27', class: "nv-sidebar-resize-handle", role: "separator", "aria-orientation": "vertical", "aria-label": "Resize sidebar", "aria-valuenow": this.getAriaValueNow(), "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, tabIndex: 0, onPointerDown: this.handleResizeStart, onPointerMove: this.handleResizeMove, onPointerUp: this.handleResizeEnd, onPointerCancel: this.handleResizeCancel, onKeyDown: this.handleResizeKeyDown }))));
+                : 'layout-sidebar-right-collapse', size: "sm" }))), showResizeHandle && (h("div", { key: '12a6e9a907edd25b2b1adf52c831141905f3369b', class: "nv-sidebar-resize-handle", role: "separator", "aria-orientation": "vertical", "aria-label": "Resize sidebar", "aria-valuenow": this.getAriaValueNow(), "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, tabIndex: 0, onPointerDown: this.handleResizeStart, onPointerMove: this.handleResizeMove, onPointerUp: this.handleResizeEnd, onPointerCancel: this.handleResizeCancel, onKeyDown: this.handleResizeKeyDown }))));
     }
     static get is() { return "nv-sidebar"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-sidebarcontent/nv-sidebarcontent.js

@@ -7,7 +7,7 @@ export class NvSidebarcontent {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '2460a0659ee45f37e92776ccf05a30a4bd58772f', role: "list" }, h("slot", { key: 'e7f41a9684461e8ee3fbc0388a6e1e80a33894ba' })));
+        return (h(Host, { key: '5e9ea9dabd866c1eeb822fb9ff0f240f9ed7baf6', role: "list" }, h("slot", { key: '9c196e39fccdce97a4abb97c78c4e4989a9d0a2f' })));
     }
     static get is() { return "nv-sidebarcontent"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-sidebardivider/nv-sidebardivider.js

@@ -6,7 +6,7 @@ export class NvSidebardivider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return h(Host, { key: '479568a0cd52812e71cfc721ddd7e2af3da0762d', role: "separator", "aria-orientation": "horizontal" });
+        return h(Host, { key: 'c72803cbb9850b35168a96482d9c23019de96424', role: "separator", "aria-orientation": "horizontal" });
     }
     static get is() { return "nv-sidebardivider"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-sidebarfooter/nv-sidebarfooter.js

@@ -8,7 +8,7 @@ export class NvSidebarfooter {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'e678899934cfdb9b0c5433d3a22b23e73728ab46' }, h("slot", { key: '39e4a8351deb008e9672a3e90c2f2c51196a2021' })));
+        return (h(Host, { key: '77a05cf3a036b84ac31632c96c988bdf9264909c' }, h("slot", { key: '9553a50d609f7f03fc5cca08833c9db2949371bf' })));
     }
     static get is() { return "nv-sidebarfooter"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-sidebargroup/nv-sidebargroup.js

@@ -8,7 +8,7 @@ export class NvSidebargroup {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'aa466d5d04f8f349c5f40b2705ce3ca07dcc0733', role: "group", "aria-label": this.label }, this.label && h("div", { key: '4460638eaac697aaba09e634bebc895dfeac43c8', class: "nv-sidebargroup-label" }, this.label), h("slot", { key: '4bfb3047dd95cb445797068c6915860b372a0864' })));
+        return (h(Host, { key: '94ff9b0f5a9b4c99a52f1259e3d7b0c6227b14a3', role: "group", "aria-label": this.label }, this.label && h("div", { key: '9a83d5a98fdd1d73b84b7a217c70ef279e69fa4a', class: "nv-sidebargroup-label" }, this.label), h("slot", { key: '4e987ce6b98fadced75ccc814b9ca9be80db0c8f' })));
     }
     static get is() { return "nv-sidebargroup"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-sidebarheader/nv-sidebarheader.js

@@ -8,7 +8,7 @@ export class NvSidebarheader {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '058b1681ff0e0a35d96b3f5b27444853211eb067' }, h("slot", { key: '7b2f91201fe6ae8325dcfd07fae8f71cc15ffea1' })));
+        return (h(Host, { key: '4a2c70f79c4702dfd0bbbb5ab193382ad27d5522' }, h("slot", { key: '3c8c9ab5bc2837ed011d630b17c111eb7d091433' })));
     }
     static get is() { return "nv-sidebarheader"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-sidebarlogo/nv-sidebarlogo.js

@@ -21,7 +21,7 @@ export class NvSidebarlogo {
     render() {
         const logoSrc = this.logo || this.defaultLogo;
         const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;
-        return (h(Host, { key: '1b61ccdfac0bf190f46b9750c0d64dd594982446' }, h("div", { key: '57e98866efe588eb18a6e9ec89a4bc1a43129598', class: "nv-sidebarlogo-container" }, h("img", { key: 'b682703b4343aa2ab1db7f9d312e238acd2af008', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), h("img", { key: '0c01b944f5dabbb3120c890651b40724edbdae29', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), h("slot", { key: '9f6cb193bc61463f827e8bb8a39aaac8c37d3049', name: "label" }), this.label && h("span", { key: '1610d7896bcdce509fd601f3dfb4b6a59fcebac8', class: "nv-sidebarlogo-title" }, this.label))));
+        return (h(Host, { key: 'ff93a7354c92b3fc7a9f35d89331537e0ed93209' }, h("div", { key: '7304b9c975b1499c4719da252d7c98826e81b559', class: "nv-sidebarlogo-container" }, h("img", { key: 'e1955ccfba4573bc834b0db681c1841daedef5c3', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), h("img", { key: 'b02a31dbb3a61509bae66043feab0987a5bc7517', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), h("slot", { key: '9cf5c77752c1078ec4a2d75e186a626094f05d33', name: "label" }), this.label && h("span", { key: '0f738654eeea4dafe7ab171cd2c575245775fc6d', class: "nv-sidebarlogo-title" }, this.label))));
     }
     static get is() { return "nv-sidebarlogo"; }
     static get originalStyleUrls() {