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

package/dist/types/components/nv-pill/nv-pill.docs.d.ts

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvPillDocs: NovaDocs<Components.NvPill>;
+export default NvPillDocs;

package/dist/types/components.d.ts

@@ -12,6 +12,7 @@ import { DateOnly, TimeOnly } from "./interfaces/dates";
 import { Element } from "./stencil-public-runtime";
 import { FilterMode } from "./utils/search-engine";
 import { Placement, Strategy } from "@floating-ui/dom";
+import { ToggleAriaRole } from "./utils/accessibility.utils";
 import { TagColor } from "./components/nv-tag/nv-tag";
 export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, NotificationEmphasis, NotificationPosition, SemanticSizes, StatusIndicatorEmphasis, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
 export { IconName } from "./components/nv-icon/nv-icons";
@@ -20,6 +21,7 @@ export { DateOnly, TimeOnly } from "./interfaces/dates";
 export { Element } from "./stencil-public-runtime";
 export { FilterMode } from "./utils/search-engine";
 export { Placement, Strategy } from "@floating-ui/dom";
+export { ToggleAriaRole } from "./utils/accessibility.utils";
 export { TagColor } from "./components/nv-tag/nv-tag";
 export namespace Components {
     interface NvAccordion {
@@ -2917,6 +2919,40 @@ export namespace Components {
          */
         "setPageSize": (size: number) => Promise<void>;
     }
+    /**
+     * The Pill component is an interactive, selectable chip used for filtering,
+     * categorization, and compact toggle states.
+     */
+    interface NvPill {
+        /**
+          * Prevents all interaction with the pill.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The visible text inside the pill.
+         */
+        "label": string;
+        /**
+          * Optional leading icon rendered before the label.
+          * @icon
+         */
+        "leadingIcon"?: `${IconName}`;
+        /**
+          * ARIA role for accessibility contexts. Defaults to button and can be overridden by group wrappers.
+          * @default 'button'
+         */
+        "pillAriaRole": ToggleAriaRole;
+        /**
+          * Whether the pill is currently selected.
+          * @default false
+         */
+        "selected": boolean;
+        /**
+          * Optional value emitted when the pill toggles.
+         */
+        "value"?: string;
+    }
     interface NvPopover {
         /**
           * Disables the automatic flipping of the popover when the trigger element is out of the viewport. The popover will flip automatically by default.
@@ -3536,6 +3572,10 @@ export interface NvPaginationtableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvPaginationtableElement;
 }
+export interface NvPillCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvPillElement;
+}
 export interface NvPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvPopoverElement;
@@ -4338,6 +4378,34 @@ declare global {
         prototype: HTMLNvPaginationtableElement;
         new (): HTMLNvPaginationtableElement;
     };
+    interface HTMLNvPillElementEventMap {
+        "toggled": {
+    /** Whether the pill is selected after toggling. */
+    selected: boolean;
+    /** Backward-compatible alias for selected. */
+    active: boolean;
+    /** Optional value associated with the pill. */
+    value?: string;
+  };
+    }
+    /**
+     * The Pill component is an interactive, selectable chip used for filtering,
+     * categorization, and compact toggle states.
+     */
+    interface HTMLNvPillElement extends Components.NvPill, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvPillElementEventMap>(type: K, listener: (this: HTMLNvPillElement, ev: NvPillCustomEvent<HTMLNvPillElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvPillElementEventMap>(type: K, listener: (this: HTMLNvPillElement, ev: NvPillCustomEvent<HTMLNvPillElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvPillElement: {
+        prototype: HTMLNvPillElement;
+        new (): HTMLNvPillElement;
+    };
     interface HTMLNvPopoverElementEventMap {
         "openChanged": boolean;
     }
@@ -4689,6 +4757,7 @@ declare global {
         "nv-notificationcontainer": HTMLNvNotificationcontainerElement;
         "nv-pagination-nav": HTMLNvPaginationNavElement;
         "nv-paginationtable": HTMLNvPaginationtableElement;
+        "nv-pill": HTMLNvPillElement;
         "nv-popover": HTMLNvPopoverElement;
         "nv-row": HTMLNvRowElement;
         "nv-sidebar": HTMLNvSidebarElement;
@@ -7795,6 +7864,51 @@ declare namespace LocalJSX {
          */
         "rowCount"?: number;
     }
+    /**
+     * The Pill component is an interactive, selectable chip used for filtering,
+     * categorization, and compact toggle states.
+     */
+    interface NvPill {
+        /**
+          * Prevents all interaction with the pill.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The visible text inside the pill.
+         */
+        "label"?: string;
+        /**
+          * Optional leading icon rendered before the label.
+          * @icon
+         */
+        "leadingIcon"?: `${IconName}`;
+        /**
+          * Emitted when the selected state changes. Intentionally non-bubbling; consumers should listen on the pill element.
+         */
+        "onToggled"?: (event: NvPillCustomEvent<{
+    /** Whether the pill is selected after toggling. */
+    selected: boolean;
+    /** Backward-compatible alias for selected. */
+    active: boolean;
+    /** Optional value associated with the pill. */
+    value?: string;
+  }>) => void;
+        /**
+          * ARIA role for accessibility contexts. Defaults to button and can be overridden by group wrappers.
+          * @default 'button'
+         */
+        "pillAriaRole"?: ToggleAriaRole;
+        /**
+          * Whether the pill is currently selected.
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * Optional value emitted when the pill toggles.
+         */
+        "value"?: string;
+    }
     interface NvPopover {
         /**
           * Disables the automatic flipping of the popover when the trigger element is out of the viewport. The popover will flip automatically by default.
@@ -8368,6 +8482,7 @@ declare namespace LocalJSX {
         "nv-notificationcontainer": NvNotificationcontainer;
         "nv-pagination-nav": NvPaginationNav;
         "nv-paginationtable": NvPaginationtable;
+        "nv-pill": NvPill;
         "nv-popover": NvPopover;
         "nv-row": NvRow;
         "nv-sidebar": NvSidebar;
@@ -8478,6 +8593,11 @@ declare module "@stencil/core" {
              */
             "nv-pagination-nav": LocalJSX.NvPaginationNav & JSXBase.HTMLAttributes<HTMLNvPaginationNavElement>;
             "nv-paginationtable": LocalJSX.NvPaginationtable & JSXBase.HTMLAttributes<HTMLNvPaginationtableElement>;
+            /**
+             * The Pill component is an interactive, selectable chip used for filtering,
+             * categorization, and compact toggle states.
+             */
+            "nv-pill": LocalJSX.NvPill & JSXBase.HTMLAttributes<HTMLNvPillElement>;
             "nv-popover": LocalJSX.NvPopover & JSXBase.HTMLAttributes<HTMLNvPopoverElement>;
             /**
              * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.

package/dist/types/utils/accessibility.utils.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Supported ARIA roles for toggle-like controls.
+ *
+ * Note: `radio` is supported as a role value, but full radio-group behavior
+ * (roving tab index and arrow-key group navigation) is only available when
+ * the component is used inside a parent with `role="radiogroup"`.
+ */
+export type ToggleAriaRole = 'button' | 'checkbox' | 'radio';
+/**
+ * ARIA state attributes for interactive roles.
+ */
+export interface AriaStateAttributes {
+    /** The aria-pressed value, used for button-like toggles. */
+    ariaPressed?: string;
+    /** The aria-checked value, used for checkbox/radio toggles. */
+    ariaChecked?: string;
+}
+/**
+ * Checks whether a keyboard key should toggle a control.
+ * @param {string} key - KeyboardEvent key value.
+ * @returns {boolean} True when key should trigger toggle behavior.
+ */
+export declare function isToggleKey(key: string): boolean;
+/**
+ * Checks whether a role is a supported toggle ARIA role.
+ * @param {string} role - Role value to validate.
+ * @returns {boolean} True when role is supported.
+ */
+export declare function isToggleAriaRole(role: string): role is ToggleAriaRole;
+/**
+ * Normalizes runtime role values to supported toggle roles.
+ * Falls back to button semantics for invalid values.
+ * @param {string} role - Role value to normalize.
+ * @returns {ToggleAriaRole} Supported role value.
+ */
+export declare function normalizeToggleAriaRole(role: string): ToggleAriaRole;
+/**
+ * Calculates the next selected state for a toggle interaction.
+ * @param {boolean} selected - Current selected state.
+ * @param {boolean} disabled - Disabled state.
+ * @returns {boolean} Updated selected state.
+ */
+export declare function getNextSelectedState(selected: boolean, disabled: boolean): boolean;
+/**
+ * Calculates the next selected state based on role semantics.
+ * Radio-like controls cannot toggle off directly once selected.
+ * Group-level coordination (for example deselecting sibling radios) is handled
+ * by the consuming component in radiogroup context.
+ * @param {ToggleAriaRole} role - Interactive role of the control.
+ * @param {boolean} selected - Current selected state.
+ * @param {boolean} disabled - Disabled state.
+ * @returns {boolean} Updated selected state for the role.
+ */
+export declare function getRoleAwareNextSelectedState(role: ToggleAriaRole, selected: boolean, disabled: boolean): boolean;
+/**
+ * Maps role + state to ARIA attributes.
+ * @param {ToggleAriaRole} role - Interactive role of the control.
+ * @param {boolean} selected - Selected state.
+ * @returns {AriaStateAttributes} ARIA state attributes for the role.
+ */
+export declare function getAriaStateAttributes(role: ToggleAriaRole, selected: boolean): AriaStateAttributes;

package/dist/types/utils/test/accessibility.utils.test.d.ts

@@ -0,0 +1 @@
+export {};