@kubex/zinc 1.0.25 → 1.0.98

package/dist/zn.d.ts

@@ -24,6 +24,17 @@ declare module "zinc-autoloader" {
      */
     export function discover(root: Element | ShadowRoot): Promise<void>;
 }
+declare module "internal/tabbable" {
+    /**
+     * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+     * element because it short-circuits after finding the first and last ones.
+     */
+    export function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
+        start: HTMLElement;
+        end: HTMLElement;
+    };
+    export function getTabbableElements(root: HTMLElement | ShadowRoot): HTMLElement[];
+}
 declare module "internal/theme" {
     import type { ReactiveController, ReactiveControllerHost } from "lit";
     /**
@@ -105,6 +116,32 @@ declare module "internal/zinc-element" {
         setCustomValidity: (message: string) => void;
     }
 }
+declare module "internal/form-navigation" {
+    export class FormNavigationController {
+        private readonly form;
+        constructor(form: HTMLFormElement);
+        private handleKeyDown;
+        private shouldSkipEnterKey;
+        private shouldExcludeFromNavigation;
+        private isSelectOption;
+        private findParentSelect;
+        private findParentGroup;
+        private getGroupItems;
+        private focusNextInGroup;
+        private focusPreviousInGroup;
+        private areRequiredFieldsFilled;
+        private getNavigableControls;
+        private findCurrentControlIndex;
+        private focusNextControl;
+        private focusPreviousControl;
+        private submitForm;
+        destroy(): void;
+    }
+    /**
+     * Gets or creates a FormNavigationController for the given form
+     */
+    export function getFormNavigationController(form: HTMLFormElement): FormNavigationController;
+}
 declare module "internal/form" {
     import type { ReactiveController, ReactiveControllerHost } from "lit";
     import type { ZincFormControl } from "internal/zinc-element";
@@ -244,17 +281,6 @@ declare module "internal/watch" {
      */
     export function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
 }
-declare module "internal/tabbable" {
-    /**
-     * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
-     * element because it short-circuits after finding the first and last ones.
-     */
-    export function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
-        start: HTMLElement;
-        end: HTMLElement;
-    };
-    export function getTabbableElements(root: HTMLElement | ShadowRoot): HTMLElement[];
-}
 declare module "utilities/top-layer-manager" {
     class TopLayerManager {
         private openDropdowns;
@@ -492,7 +518,7 @@ declare module "components/icon/icon.component" {
     import { type CSSResultGroup } from 'lit';
     import ZincElement from "internal/zinc-element";
     type IconLibrary = "src" | "material" | "material-outlined" | "material-round" | "material-sharp" | "material-two-tone" | "material-symbols-outlined" | "gravatar" | "libravatar" | "avatar" | "brands" | "line";
-    export type IconColor = "default" | "primary" | "accent" | "info" | "warning" | "error" | "success" | "white" | "disabled" | "red" | "blue" | "green" | "orange" | "yellow" | "indigo" | "violet" | "pink" | "grey";
+    export type IconColor = "default" | "primary" | "accent" | "info" | "warning" | "error" | "success" | "white" | "disabled" | "red" | "blue" | "green" | "orange" | "yellow" | "indigo" | "violet" | "pink" | "grey" | (string & {});
     /**
      * @summary Short summary of the component's intended use.
      * @documentation https://zinc.style/components/icon
@@ -516,11 +542,15 @@ declare module "components/icon/icon.component" {
         alt: string;
         size: number;
         round: boolean;
+        tile: boolean;
+        depth: boolean;
         library: IconLibrary;
         color: IconColor;
         padded: boolean;
         blink: boolean;
         squared: boolean;
+        private static readonly presetColors;
+        private isPresetColor;
         gravatarOptions: string;
         defaultLibrary: IconLibrary;
         convertToLibrary(input: string): IconLibrary;
@@ -591,6 +621,16 @@ declare module "components/menu-item/menu-item.component" {
         rel: string;
         gaid: string;
         confirm: boolean;
+        /** Removes all padding from the menu item. */
+        flush: boolean;
+        /** Removes horizontal (left/right) padding only. Ignored if flush is set. */
+        flushX: boolean;
+        /** Removes vertical (top/bottom) padding only. Ignored if flush is set. */
+        flushY: boolean;
+        /** Removes the border from the menu item. */
+        noBorder: boolean;
+        /** Marks the menu item as currently active/selected. */
+        active: boolean;
         private readonly localize;
         private readonly hasSlotController;
         private submenuController;
@@ -713,7 +753,7 @@ declare module "components/dialog/dialog.component" {
         /** The dialog's theme variant. */
         variant: 'default' | 'warning' | 'announcement';
         /** The dialog's size. */
-        size: 'small' | 'medium' | 'large';
+        size: 'small' | 'medium' | 'large' | 'custom';
         /**
          * Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
          * use the `show()` and `hide()` methods and this attribute will reflect the dialog's state.
@@ -1146,6 +1186,7 @@ declare module "components/button/button.component" {
         getForm(): HTMLFormElement | null;
         reportValidity(): boolean;
         setCustomValidity(message: string): void;
+        click(): void;
         handleClick: () => void;
         private _isLink;
         private _isButton;
@@ -1230,21 +1271,21 @@ declare module "components/toggle/toggle.component" {
     import { type CSSResultGroup, type PropertyValues } from 'lit';
     import ZincElement, { type ZincFormControl } from "internal/zinc-element";
     /**
-     * @summary Short summary of the component's intended use.
+     * @summary Toggles allow the user to switch an option on or off.
      * @documentation https://zinc.style/components/toggle
-     * @status experimental
+     * @status stable
      * @since 1.0
      *
-     * @dependency zn-example
+     * @dependency zn-tooltip
      *
-     * @event zn-event-name - Emitted as an example.
+     * @event zn-input - Emitted when the toggle receives input.
      *
-     * @slot - The default slot.
-     * @slot example - An example slot.
+     * @slot - The toggle's label.
      *
-     * @csspart base - The component's base wrapper.
+     * @csspart base - The component's base wrapper containing the toggle switch.
+     * @csspart control - The toggle switch control (the circular button that slides).
      *
-     * @cssproperty --example - An example CSS custom property.
+     * @cssproperty --zn-toggle-margin - The margin around the toggle switch. Defaults to `8px 0`.
      */
     export default class ZnToggle extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
@@ -1266,6 +1307,7 @@ declare module "components/toggle/toggle.component" {
         onText: string;
         offText: string;
         label: string;
+        inline: boolean;
         get validity(): ValidityState;
         get validationMessage(): string;
         firstUpdated(_changedProperties: PropertyValues): void;
@@ -1296,10 +1338,10 @@ declare module "components/toggle/index" {
     }
 }
 declare module "components/collapsible/collapsible.component" {
-    import { type CSSResultGroup } from 'lit';
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
     import { Store } from "internal/storage";
     import ZincElement from "internal/zinc-element";
-    import { ZnInputEvent } from "events/zn-input";
+    import type { ZnInputEvent } from "events/zn-input";
     /**
      * @summary Toggles between showing and hiding content when clicked
      * @documentation https://zinc.style/components/collapsible
@@ -1331,6 +1373,7 @@ declare module "components/collapsible/collapsible.component" {
         private showArrow;
         connectedCallback(): Promise<void>;
         handleCaptionToggle: (e: ZnInputEvent) => void;
+        protected updated(changedProperties: PropertyValues): void;
         disconnectedCallback(): void;
         handleCollapse: (e: MouseEvent) => void;
         recalculateNumberOfItems: () => void;
@@ -1453,6 +1496,8 @@ declare module "components/chip/chip.component" {
     export default class ZnChip extends ZincElement {
         static styles: CSSResultGroup;
         icon: string;
+        caption: string;
+        iconSize: number;
         type: 'info' | 'success' | 'warning' | 'error' | 'primary' | 'transparent' | 'custom' | 'neutral';
         size: 'small' | 'medium' | 'large';
         flush: boolean;
@@ -1504,7 +1549,7 @@ declare module "components/well/index" {
 declare module "components/copy-button/copy-button.component" {
     import { type CSSResultGroup } from 'lit';
     import ZincElement from "internal/zinc-element";
-    import ZnTooltip from "components/tooltip/index";
+    import type ZnTooltip from "components/tooltip/index";
     /**
      * @summary Short summary of the component's intended use.
      * @documentation https://zinc.style/components/copy-button
@@ -1533,6 +1578,7 @@ declare module "components/copy-button/copy-button.component" {
         value: string;
         copyLabel: string;
         src: string;
+        size: number;
         /**
          * An id that references an element in the same document from which data will be copied. If both this and `value` are
          * present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an
@@ -1563,6 +1609,18 @@ declare module "events/zn-filter-change" {
         }
     }
 }
+declare module "events/zn-search-change" {
+    export type ZnSearchChangeEvent = CustomEvent<{
+        value: string;
+        formData: Record<string, any>;
+        searchUri?: string;
+    }>;
+    global {
+        interface GlobalEventHandlersEventMap {
+            'zn-search-change': ZnSearchChangeEvent;
+        }
+    }
+}
 declare module "components/data-table-filter/data-table-filter.component" {
     import { type CSSResultGroup, type PropertyValues } from 'lit';
     import ZincElement, { type ZincFormControl } from "internal/zinc-element";
@@ -1613,181 +1671,238 @@ declare module "components/data-table-filter/index" {
         }
     }
 }
-declare module "components/empty-state/empty-state.component" {
-    import { type CSSResultGroup } from 'lit';
+declare module "components/input/input.component" {
     import ZincElement from "internal/zinc-element";
+    import ZnIcon from "components/icon/index";
+    import ZnTooltip from "components/tooltip/index";
+    import type { ZincFormControl } from "internal/zinc-element";
     /**
      * @summary Short summary of the component's intended use.
-     * @documentation https://zinc.style/components/empty-state
+     * @documentation https://zinc.style/components/input
      * @status experimental
      * @since 1.0
      *
-     * @dependency zn-example
+     * @dependency zn-icon
+     * @dependency zn-tooltip
      *
-     * @event zn-event-name - Emitted as an example.
+     * @event zn-blur - Emitted when the control loses focus.
+     * @event zn-change - Emitted when an alteration to the control's value is committed by the user.
+     * @event zn-clear - Emitted when the clear button is activated.
+     * @event zn-focus - Emitted when the control gains focus.
+     * @event zn-input - Emitted when the control receives input.
+     * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
      *
-     * @slot - The default slot.
-     * @slot example - An example slot.
+     * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+     * @slot label-tooltip - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.
+     * @slot context-note - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute.
+     * @slot prefix - Used to prepend a presentational icon or similar element to the input.
+     * @slot suffix - Used to append a presentational icon or similar element to the input.
+     * @slot clear-icon - An icon to use in lieu of the default clear icon.
+     * @slot show-password-icon - An icon to use in lieu of the default show password icon.
+     * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
+     * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
      *
+     * @csspart form-control - The form control that wraps the label, input, and help text.
+     * @csspart form-control-label - The label's wrapper.
+     * @csspart form-control-input - The input's wrapper.
+     * @csspart form-control-help-text - The help text's wrapper.
      * @csspart base - The component's base wrapper.
-     *
-     * @cssproperty --example - An example CSS custom property.
+     * @csspart input - The internal `<input>` control.
+     * @csspart prefix - The container that wraps the prefix.
+     * @csspart clear-button - The clear button.
+     * @csspart password-toggle-button - The password toggle button.
+     * @csspart suffix - The container that wraps the suffix.
      */
-    export default class ZnEmptyState extends ZincElement {
-        static styles: CSSResultGroup;
-        icon: string;
-        caption: string;
-        description: string;
-        type: 'error' | 'info' | 'primary' | '';
-        padded: boolean;
+    export default class ZnInput extends ZincElement implements ZincFormControl {
+        static styles: import("lit").CSSResult;
+        static dependencies: {
+            'zn-icon': typeof ZnIcon;
+            'zn-tooltip': typeof ZnTooltip;
+        };
+        private readonly formControlController;
         private readonly hasSlotController;
-        render(): import("lit").TemplateResult<1>;
-    }
-}
-declare module "components/empty-state/index" {
-    import ZnEmptyState from "components/empty-state/empty-state.component";
-    export * from "components/empty-state/empty-state.component";
-    export default ZnEmptyState;
-    global {
-        interface HTMLElementTagNameMap {
-            'zn-empty-state': ZnEmptyState;
-        }
-    }
-}
-declare module "components/hover-container/hover-container.component" {
-    import { type CSSResultGroup, type PropertyValues } from 'lit';
-    import ZincElement from "internal/zinc-element";
-    import type Popup from "components/popup/index";
-    /**
-     * @summary The HoverContainer component is used to display additional information when a user hovers over or clicks
-     * on an element.
-     *
-     * @documentation https://zinc.style/components/hover-container
-     * @status experimental
-     * @since 1.0
-     *
-     * @event zn-show - Emitted when the hover-container is shown.
-     * @event zn-after-show - Emitted after the hover-container is shown.
-     * @event zn-hide - Emitted when the hover-container is hidden.
-     * @event zn-after-hide - Emitted after the hover-container is hidden.
-     *
-     * @slot - The content of the hover-container
-     * @slot anchor - The anchor the hover-container is attached to.
-     */
-    export default class ZnHoverContainer extends ZincElement {
-        static styles: CSSResultGroup;
-        private hoverTimeout;
-        private closeWatcher;
-        defaultSlot: HTMLSlotElement;
-        body: HTMLElement;
-        popup: Popup;
-        content: string;
-        placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
-        disabled: boolean;
-        distance: number;
-        open: boolean;
-        skidding: number;
-        trigger: string;
-        hoist: boolean;
-        constructor();
-        disconnectedCallback(): void;
-        protected firstUpdated(_changedProperties: PropertyValues): void;
-        private hasTrigger;
-        private handleBlur;
-        private handleClick;
-        private handleFocus;
-        private handleDocumentKeyDown;
-        private handleMouseOver;
-        private handleMouseOut;
-        handleOpenChange(): void;
-        handleOptionsChange(): Promise<void>;
-        handleDisabledChange(): void;
-        show(): Promise<void>;
-        hide(): void;
-        render(): import("lit").TemplateResult<1>;
-    }
-}
-declare module "components/hover-container/index" {
-    import ZnHoverContainer from "components/hover-container/hover-container.component";
-    export * from "components/hover-container/hover-container.component";
-    export default ZnHoverContainer;
-    global {
-        interface HTMLElementTagNameMap {
-            'zn-hover-container': ZnHoverContainer;
-        }
-    }
-}
-declare module "components/skeleton/skeleton.component" {
-    import ZincElement from "internal/zinc-element";
-    import type { CSSResultGroup } from "lit";
-    /**
-     * @summary Short summary of the component's intended use.
-     * @documentation https://zinc.style/components/skeleton
-     * @status experimental
-     * @since 1.0
-     */
-    export default class ZnSkeleton extends ZincElement {
-        static styles: CSSResultGroup;
-        speed: string;
-        width: string;
-        height: string;
-        radius: string;
-        protected render(): unknown;
-    }
-}
-declare module "components/skeleton/index" {
-    import ZnSkeleton from "components/skeleton/skeleton.component";
-    export * from "components/skeleton/skeleton.component";
-    export default ZnSkeleton;
-    global {
-        interface HTMLElementTagNameMap {
-            'zn-skeleton': ZnSkeleton;
-        }
-    }
-}
-declare module "components/style/style.component" {
-    import { type CSSResultGroup } from 'lit';
-    import ZincElement from "internal/zinc-element";
-    export default class ZnStyle extends ZincElement {
-        static styles: CSSResultGroup;
         private readonly localize;
-        color: string;
-        border: boolean;
-        error: boolean;
-        success: boolean;
-        info: boolean;
-        warning: boolean;
-        primary: boolean;
-        accent: boolean;
-        center: boolean;
-        display: null;
-        font: string;
-        width: string;
-        height: string;
-        pad: string;
-        margin: string;
-        autoMargin: string;
-        connectedCallback(): void;
-        createRenderRoot(): this;
-    }
-}
-declare module "components/style/index" {
-    import ZnStyle from "components/style/style.component";
-    export * from "components/style/style.component";
-    export default ZnStyle;
-    global {
-        interface HTMLElementTagNameMap {
-            'zn-style': ZnStyle;
-        }
-    }
-}
-declare module "components/data-select/providers/country-data-provider" {
-    import type { DataProviderOption, LocalDataProvider } from "components/data-select/providers/provider";
-    export const countryDataProvider: LocalDataProvider<DataProviderOption>;
-}
-declare module "components/data-select/providers/currency-data-provider" {
-    import type { DataProviderOption, LocalDataProvider } from "components/data-select/providers/provider";
-    export const currencyDataProvider: LocalDataProvider<DataProviderOption>;
+        input: HTMLInputElement;
+        colorPicker: HTMLInputElement;
+        private hasFocus;
+        private isUserTyping;
+        title: string;
+        private __numberInput;
+        private __dateInput;
+        /**
+         * The type of input. Works the same as native `<input>` element. But only a subset of types is supported. Defaults
+         * to `text`
+         */
+        type: 'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
+        /** The name of the input, submitted as a name/value pair with form data. */
+        name: string;
+        /** The current value of the input, submitted as a name/value pair with form data. */
+        value: any;
+        /** The default value of the form control. Primarily used for resetting the form control. */
+        defaultValue: string;
+        /** The inputs size **/
+        size: 'x-small' | 'small' | 'medium' | 'large';
+        /** Draws a pill-styled input **/
+        pill: boolean;
+        /** The inputs label. If you need to display HTML, use the `label` slot. **/
+        label: string;
+        /** Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the
+         * `label-tooltip` slot.
+         * **/
+        labelTooltip: string;
+        /**
+         * Text that appears above the input, on the right, to add additional context. If you need to display HTML
+         * in this text, use the `context-note` slot instead
+         */
+        contextNote: string;
+        /** The input's help text. If you need to display HTML, use the `help-text` slot instead. **/
+        helpText: string;
+        /** Adds a clear button when the input is not empty **/
+        clearable: boolean;
+        /** Adds the default optional icon for this input type. Currently only types `email` and `tel` have a default
+         * optional icon.
+         */
+        optionalIcon: boolean;
+        /** Disables the input **/
+        disabled: boolean;
+        /** Fills the input background white **/
+        filled: boolean;
+        /** Placeholder text to show as a hint when the input is empty. */
+        placeholder: string;
+        /** Makes the input read-only **/
+        readonly: boolean;
+        /** Adds a button to toggle the passwords visibility, only applies to password types **/
+        passwordToggle: boolean;
+        /** Determines whether or no the password is currently visible. Only applies to password types **/
+        passwordVisible: boolean;
+        /** Hides the browsers built-in increment/decrement spin buttons for number inputs **/
+        noSpinButtons: boolean;
+        /** The color format to display for color inputs. Only applies when type is 'color'. **/
+        colorFormat: 'hex' | 'rgb' | 'hsl' | 'oklch';
+        /**
+         * By default, form-controls are associated with the nearest containing `<form>` element. This attribute allows you
+         * to place the form control outside a form and associate it with the form that has this `id`. The form must be
+         * in the same document or shadow root for this to work.
+         */
+        form: string;
+        /** Makes the input a required field. */
+        required: boolean;
+        /** A regular expression pattern to validate input against. */
+        pattern: string;
+        /** The minimum length of input that will be considered valid. */
+        minlength: number;
+        /** The maximum length of input that will be considered valid. */
+        maxlength: number;
+        /** The input's minimum value. Only applies to date and number input types. */
+        min: number | string;
+        /** The input's maximum value. Only applies to date and number input types. */
+        max: number | string;
+        /**
+         * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
+         * implied, allowing any numeric value. Only applies to date and number input types.
+         */
+        step: number | 'any';
+        /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
+        autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+        /** Indicates whether the browser's autocorrect feature is on or off. */
+        autocorrect: 'off' | 'on';
+        /**
+         * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
+         * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
+         */
+        autocomplete: string;
+        /** Indicates that the input should receive focus on page load. */
+        autofocus: boolean;
+        /** Used to customize the label or icon of the Enter key on virtual keyboards. */
+        enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        /** Enables spell checking on the input. */
+        spellcheck: boolean;
+        /**
+         * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
+         * keyboard on supportive devices.
+         */
+        inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+        /**
+         * Gets or sets the current value as `date` object. Returns `null` if the value can't be converted. This will use
+         * the native `<input type="{{type}}">` implementation and may result in an error.
+         */
+        get valueAsDate(): Date | null;
+        set valueAsDate(newValue: Date | null);
+        /** Gets or sets the current value as a number. Return `null` if the value can't be converted. */
+        get valueAsNumber(): number;
+        set valueAsNumber(newValue: number);
+        /** Gets the validity state object */
+        get validity(): ValidityState;
+        /** Gets the validation message */
+        get validationMessage(): string;
+        private validateMinMax;
+        private hexToRgb;
+        private rgbToHex;
+        private hexToOklch;
+        private oklchToHex;
+        private hexToHsl;
+        private hslToHex;
+        private convertToHex;
+        private convertFromHex;
+        private handleBlur;
+        private handleChange;
+        private handleClearClick;
+        private handleFocus;
+        private handleInput;
+        private handleInvalid;
+        private handleKeyDown;
+        private handlePasswordToggle;
+        private handleColorSwatchClick;
+        private handleColorPickerChange;
+        private focusInput;
+        handleDisabledChange(): void;
+        handleStepChange(): void;
+        handleValueChange(): Promise<void>;
+        handleColorFormatChange(): Promise<void>;
+        /** Sets focus on the input. */
+        focus(options?: FocusOptions): void;
+        /** Removes focus from the input. */
+        blur(): void;
+        /** Selects all the text in the input. */
+        select(): void;
+        /** Sets the start and end positions of the text selection (0-based). */
+        setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
+        /** Replaces a range of text with a new string. */
+        setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
+        /** Displays the browser picker for an input element (only works if the browser supports it for the input type). */
+        showPicker(): void;
+        /** Increments the value of a numeric input type by the value of the step attribute. */
+        stepUp(): void;
+        /** Decrements the value of a numeric input type by the value of the step attribute. */
+        stepDown(): void;
+        /** Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+        checkValidity(): boolean;
+        /** Gets the associated form, if one exists. */
+        getForm(): HTMLFormElement | null;
+        /** Checks for validity and shows the browser's validation message if the control is invalid. */
+        reportValidity(): boolean;
+        /** Sets a custom validation message. Pass an empty string to restore validity. */
+        setCustomValidity(message: string): void;
+        render(): import("lit").TemplateResult<1>;
+    }
+}
+declare module "components/input/index" {
+    import ZnInput from "components/input/input.component";
+    export * from "components/input/input.component";
+    export default ZnInput;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-input': ZnInput;
+        }
+    }
+}
+declare module "components/data-select/providers/country-data-provider" {
+    import type { DataProviderOption, LocalDataProvider } from "components/data-select/providers/provider";
+    export const countryDataProvider: LocalDataProvider<DataProviderOption>;
+}
+declare module "components/data-select/providers/currency-data-provider" {
+    import type { DataProviderOption, LocalDataProvider } from "components/data-select/providers/provider";
+    export const currencyDataProvider: (allowCommon?: boolean) => LocalDataProvider<DataProviderOption>;
 }
 declare module "components/data-select/providers/color-data-provider" {
     import type { DataProviderOption, LocalDataProvider } from "components/data-select/providers/provider";
@@ -1798,6 +1913,10 @@ declare module "components/data-select/providers/country-code-data-provider" {
     import type { DataProviderOption, LocalDataProvider } from "components/data-select/providers/provider";
     export const countryDialPrefixDataProvider: LocalDataProvider<DataProviderOption>;
 }
+declare module "components/data-select/providers/us-state-data-provider" {
+    import type { DataProviderOption, LocalDataProvider } from "components/data-select/providers/provider";
+    export const usStateDataProvider: LocalDataProvider<DataProviderOption>;
+}
 declare module "components/data-select/providers/provider" {
     import type { HTMLTemplateResult } from "lit";
     /**
@@ -1822,64 +1941,7 @@ declare module "components/data-select/providers/provider" {
     export * from "components/data-select/providers/currency-data-provider";
     export * from "components/data-select/providers/color-data-provider";
     export * from "components/data-select/providers/country-code-data-provider";
-}
-declare module "internal/animate" {
-    /**
-     * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
-     */
-    export function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
-    /** Parses a CSS duration and returns the number of milliseconds. */
-    export function parseDuration(delay: number | string): number;
-    /** Tells if the user has enabled the "reduced motion" setting in their browser or OS. */
-    export function prefersReducedMotion(): boolean;
-    /**
-     * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
-     */
-    export function stopAnimations(el: HTMLElement): Promise<unknown[]>;
-    /**
-     * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
-     * element's scrollHeight before the animation.
-     */
-    export function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
-        height: string | number | null | undefined;
-        composite?: CompositeOperationOrAuto;
-        easing?: string;
-        offset?: number | null;
-    }[];
-}
-declare module "utilities/animation-registry" {
-    export interface ElementAnimation {
-        keyframes: Keyframe[];
-        rtlKeyframes?: Keyframe[];
-        options?: KeyframeAnimationOptions;
-    }
-    export interface ElementAnimationMap {
-        [animationName: string]: ElementAnimation;
-    }
-    export interface GetAnimationOptions {
-        /**
-         * The component's directionality. When set to "rtl", `rtlKeyframes` will be preferred over `keyframes` where
-         * available using getAnimation().
-         */
-        dir: string;
-    }
-    /**
-     * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`
-     * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.
-     */
-    export function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
-    /** Sets a custom animation for the specified element. */
-    export function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
-    /** Gets an element's animation. Falls back to the default if no animation is found. */
-    export function getAnimation(el: Element, animationName: string, options: GetAnimationOptions): ElementAnimation;
-}
-declare module "events/zn-remove" {
-    export type ZnRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
-    global {
-        interface GlobalEventHandlersEventMap {
-            'zn-remove': ZnRemoveEvent;
-        }
-    }
+    export * from "components/data-select/providers/us-state-data-provider";
 }
 declare module "components/option/option.component" {
     import { type CSSResultGroup } from 'lit';
@@ -1916,8 +1978,7 @@ declare module "components/option/option.component" {
         hasHover: boolean;
         /**
          * The option's value. When selected, the containing form control will receive this value. The value must be unique
-         * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
-         * multiple values.
+         * from other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.
          */
         value: string;
         /** Draws the option in a disabled state, preventing selection. */
@@ -1929,7 +1990,6 @@ declare module "components/option/option.component" {
         private handleMouseLeave;
         handleDisabledChange(): void;
         handleSelectedChange(): void;
-        handleValueChange(): void;
         /** Returns a plain text label based on the option's content. */
         getTextLabel(): string;
         render(): import("lit").TemplateResult<1>;
@@ -1945,45 +2005,150 @@ declare module "components/option/index" {
         }
     }
 }
-declare module "components/select/select.component" {
-    import { FormControlController } from "internal/form";
-    import ZincElement from "internal/zinc-element";
-    import ZnChip from "components/chip/index";
-    import ZnIcon from "components/icon/index";
-    import ZnPopup from "components/popup/index";
-    import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-    import type { ZincFormControl } from "internal/zinc-element";
-    import type ZnOption from "components/option/index";
+declare module "internal/animate" {
     /**
-     * @summary Short summary of the component's intended use.
-     * @documentation https://zinc.style/components/select
-     * @status experimental
-     * @since 1.0
-     *
-     * @dependency zn-icon
-     * @dependency zn-popup
-     * @dependency zn-tag
-     *
-     * @slot - The listbox options. Must be `<zn-option>` elements. You can use `<zn-divider>` to group items visually.
-     * @slot label - The input's label. Alternatively, you can use the `label` attribute.
-     * @slot label-tooltip - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.
-     * @slot context-note - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.
-     * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
-     * @slot clear-icon - An icon to use in lieu of the default clear icon.
-     * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
-     * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
-     *
-     * @event zn-change - Emitted when the control's value changes.
-     * @event zn-clear - Emitted when the control's value is cleared.
-     * @event zn-input - Emitted when the control receives input.
-     * @event zn-focus - Emitted when the control gains focus.
-     * @event zn-blur - Emitted when the control loses focus.
+     * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
+     */
+    export function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
+    /** Parses a CSS duration and returns the number of milliseconds. */
+    export function parseDuration(delay: number | string): number;
+    /** Tells if the user has enabled the "reduced motion" setting in their browser or OS. */
+    export function prefersReducedMotion(): boolean;
+    /**
+     * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
+     */
+    export function stopAnimations(el: HTMLElement): Promise<unknown[]>;
+    /**
+     * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
+     * element's scrollHeight before the animation.
+     */
+    export function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
+        height: string | number | null | undefined;
+        composite?: CompositeOperationOrAuto;
+        easing?: string;
+        offset?: number | null;
+    }[];
+}
+declare module "utilities/animation-registry" {
+    export interface ElementAnimation {
+        keyframes: Keyframe[];
+        rtlKeyframes?: Keyframe[];
+        options?: KeyframeAnimationOptions;
+    }
+    export interface ElementAnimationMap {
+        [animationName: string]: ElementAnimation;
+    }
+    export interface GetAnimationOptions {
+        /**
+         * The component's directionality. When set to "rtl", `rtlKeyframes` will be preferred over `keyframes` where
+         * available using getAnimation().
+         */
+        dir: string;
+    }
+    /**
+     * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`
+     * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.
+     */
+    export function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
+    /** Sets a custom animation for the specified element. */
+    export function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
+    /** Gets an element's animation. Falls back to the default if no animation is found. */
+    export function getAnimation(el: Element, animationName: string, options: GetAnimationOptions): ElementAnimation;
+}
+declare module "components/opt-group/opt-group.component" {
+    import { type CSSResultGroup } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    /**
+     * @summary Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.
+     * @documentation https://zinc.style/components/opt-group
+     * @status experimental
+     * @since 1.0
+     *
+     * @slot - The default slot for `<zn-option>` elements.
+     *
+     * @csspart base - The component's base wrapper.
+     * @csspart label - The group label element.
+     */
+    export default class ZnOptGroup extends ZincElement {
+        static styles: CSSResultGroup;
+        /** The label for the opt-group, displayed as a non-selectable header above the grouped options. */
+        label: string;
+        /** Disables all options within the group. */
+        disabled: boolean;
+        connectedCallback(): void;
+        handleLabelChange(): void;
+        handleDisabledChange(): void;
+        /** @internal - Updates visibility of the group based on whether any child options are visible. */
+        updateVisibility(): void;
+        render(): import("lit").TemplateResult<1>;
+        private handleSlotChange;
+        private propagateDisabled;
+    }
+}
+declare module "components/opt-group/index" {
+    import ZnOptGroup from "components/opt-group/opt-group.component";
+    export * from "components/opt-group/opt-group.component";
+    export default ZnOptGroup;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-opt-group': ZnOptGroup;
+        }
+    }
+}
+declare module "events/zn-remove" {
+    export type ZnRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
+    global {
+        interface GlobalEventHandlersEventMap {
+            'zn-remove': ZnRemoveEvent;
+        }
+    }
+}
+declare module "components/select/select.component" {
+    import { FormControlController } from "internal/form";
+    import ZincElement from "internal/zinc-element";
+    import ZnChip from "components/chip/index";
+    import ZnIcon from "components/icon/index";
+    import ZnOptGroup from "components/opt-group/index";
+    import ZnOption from "components/option/index";
+    import ZnPopup from "components/popup/index";
+    import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+    import type { ZincFormControl } from "internal/zinc-element";
+    /**
+     * @summary Short summary of the component's intended use.
+     * @documentation https://zinc.style/components/select
+     * @status experimental
+     * @since 1.0
+     *
+     * @dependency zn-icon
+     * @dependency zn-opt-group
+     * @dependency zn-option
+     * @dependency zn-popup
+     * @dependency zn-tag
+     *
+     * @slot - The listbox options. Must be `<zn-option>` elements. You can use `<zn-opt-group>` to group options under a labeled header, or `<zn-divider>` to group items visually.
+     * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+     * @slot label-tooltip - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.
+     * @slot context-note - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.
+     * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+     * @slot clear-icon - An icon to use in lieu of the default clear icon.
+     * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+     * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+     *
+     * @event zn-change - Emitted when the control's value changes.
+     * @event zn-clear - Emitted when the control's value is cleared.
+     * @event zn-input - Emitted when the control receives input.
+     * @event zn-focus - Emitted when the control gains focus.
+     * @event zn-blur - Emitted when the control loses focus.
      * @event zn-show - Emitted when the select's menu opens.
      * @event zn-after-show - Emitted after the select's menu opens and all animations are complete.
      * @event zn-hide - Emitted when the select's menu closes.
      * @event zn-after-hide - Emitted after the select's menu closes and all animations are complete.
      * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+     * @event zn-load - Emitted when options have been successfully loaded from the `src` URL.
+     * @event zn-error - Emitted when loading options from the `src` URL fails.
      *
+     * @csspart search-loading - The container shown while a remote search request is in flight.
+     * @csspart max-results-indicator - The message shown when results are truncated by `max-results`.
      * @csspart form-control - The form control that wraps the label, input, and help text.
      * @csspart form-control-label - The label's wrapper.
      * @csspart form-control-input - The select's wrapper.
@@ -2005,6 +2170,8 @@ declare module "components/select/select.component" {
         static styles: CSSResultGroup;
         static dependencies: {
             'zn-icon': typeof ZnIcon;
+            'zn-opt-group': typeof ZnOptGroup;
+            'zn-option': typeof ZnOption;
             'zn-popup': typeof ZnPopup;
             'zn-tag': typeof ZnChip;
         };
@@ -2026,14 +2193,44 @@ declare module "components/select/select.component" {
         selectedOptions: ZnOption[];
         private valueHasChanged;
         private inputPrefix;
+        /** @internal - current search/filter text when search is enabled (lowercased for matching) */
+        private _searchQuery;
+        /** @internal - raw display value of the search input (preserves case for the input field) */
+        private _searchDisplayValue;
+        /** @internal - whether the "no matching options" empty state is visible */
+        private _noResultsVisible;
+        /** @internal */
+        private _fetchedOptions;
+        /** @internal */
+        private _fetchLoading;
+        /** @internal */
+        private _fetchError;
+        /** @internal */
+        private _fetchAbortController;
+        /** @internal - debounce timer for remote search */
+        private _searchDebounceTimer;
+        /** @internal - whether a remote search fetch is in progress (distinct from initial load) */
+        private _searchLoading;
+        /** @internal - the query string of the last successful remote search */
+        private _lastRemoteQuery;
+        /** @internal - whether the last remote result set was exhaustive (fewer than maxResults returned) */
+        private _lastRemoteExhaustive;
+        /** @internal - total number of results before maxResults truncation (0 = not truncated) */
+        private _totalResultCount;
+        /**
+         * @internal - tracks selected items by key/value during remote search so they survive
+         * when search results replace the fetched options list.
+         */
+        private _selectedRemoteItems;
         /** The name of the select, submitted as a name/value pair with form data. */
         name: string;
+        nonRemovable: boolean;
         private _value;
         get value(): string | string[];
         /**
          * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
-         * value attribute will be a space-delimited list of values based on the options selected, and the value property will
-         * be an array. **For this reason, values must not contain spaces.**
+         * value property will be an array. Values may contain spaces when using JSON array syntax in the attribute,
+         * e.g. `value='["my value", "their value"]'`. Space-delimited strings are still supported for backward compatibility.
          */
         set value(val: string | string[]);
         /** The default value of the form control. Primarily used for resetting the form control. */
@@ -2067,6 +2264,8 @@ declare module "components/select/select.component" {
         hoist: boolean;
         /** Draws a pill-style select with rounded edges. */
         pill: boolean;
+        /** Enables search/filter functionality. When enabled, the user can type into the select to filter the visible options. */
+        search: boolean;
         /** The select's label. If you need to display HTML, use the `label` slot instead. */
         label: string;
         /** Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead. */
@@ -2096,13 +2295,47 @@ declare module "components/select/select.component" {
          * the specified value.
          */
         getTag: (option: ZnOption, index: number) => TemplateResult | string | HTMLElement;
+        /** Automatically select the first option if no value is set. */
+        selectFirst: boolean;
         distinct: string;
         conditional: string;
+        /**
+         * The URL to fetch options from. When set, the component fetches JSON from this URL and renders the results as
+         * options. The expected format is an array of objects with `key` and `value` properties:
+         * `[{"key": "us", "value": "United States"}, ...]`
+         * When not set, the component works exactly as before using slotted `<zn-option>` elements.
+         */
+        dataUri: string;
+        /**
+         * Context data to send as a header when fetching options from the URL specified by the `src` property.
+         */
+        contextData: string;
+        /**
+         * The maximum number of options to display from a remote fetch response. Set to 0 for unlimited.
+         * Only applies when fetching from `data-uri`.
+         */
+        maxResults: number;
+        /**
+         * Debounce delay in milliseconds for remote search requests. The component waits this long after the user
+         * stops typing before sending a request.
+         */
+        searchDebounce: number;
+        /**
+         * The query parameter name appended to the `data-uri` URL for remote search requests.
+         * Defaults to `"q"`, e.g. `/api/items?q=search+term`. Set to a custom value like `"search"` or `"filter"` to match your API.
+         */
+        searchParam: string;
+        /**
+         * When set alongside `search` and `data-uri`, the component will not fetch options on initial load.
+         * Options are only fetched when the user starts typing a search query.
+         */
+        searchOnly: boolean;
         /** Gets the validity state object */
         get validity(): ValidityState;
         /** Gets the validation message */
         get validationMessage(): string;
         connectedCallback(): void;
+        disconnectedCallback(): void;
         private updateHasInputPrefix;
         private addOpenListeners;
         private removeOpenListeners;
@@ -2116,19 +2349,50 @@ declare module "components/select/select.component" {
         private handleComboboxKeyDown;
         private handleClearClick;
         private handleClearMouseDown;
+        /** Whether the component is in remote-search mode (search + dataUri both set) */
+        private get _isRemoteSearch();
+        /** Handles text input on the display input for search/filter mode */
+        private handleSearchInput;
+        /** Filters visible options based on the current search query */
+        private filterOptions;
+        /** Clears the search query and shows all options */
+        private clearSearch;
         private handleOptionClick;
         private handleDefaultSlotChange;
         private handleTagRemove;
         private getAllOptions;
+        private getAllOptGroups;
+        private getVisibleOptions;
         getFirstOption(): ZnOption | null;
         private setCurrentOption;
         private setSelectedOptions;
         private toggleOptionSelection;
         private selectionChanged;
         protected get tags(): TemplateResult<1>[];
+        /**
+         * Renders hidden <zn-option> elements for items that are currently selected but not present in
+         * the latest `_fetchedOptions` (e.g. because a remote search narrowed the results). This keeps
+         * them in the DOM so `handleDefaultSlotChange` can find and re-select them.
+         */
+        private _renderSelectedRemoteItems;
         private handleInvalid;
         protected firstUpdated(_changedProperties: PropertyValues): void;
         handleDisabledChange(): void;
+        handleSrcChange(): void;
+        private _handleFetchError;
+        /** Builds the localStorage cache key for a given search query */
+        private _buildCacheKey;
+        /** Reads cached results from localStorage */
+        private _readCache;
+        /** Writes results to localStorage cache */
+        private _writeCache;
+        /**
+         * Parses raw JSON data into the internal fetched-options format.
+         * Applies `maxResults` limiting to flat option arrays.
+         */
+        private _parseOptions;
+        /** Fetches options from the URL specified by the `data-uri` property. Optionally appends a search query. */
+        fetchOptions(searchQuery?: string): Promise<void>;
         attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
         handleValueChange(): void;
         handleOpenChange(): Promise<void>;
@@ -2148,6 +2412,9 @@ declare module "components/select/select.component" {
         focus(options?: FocusOptions): void;
         /** Removes focus from the control. */
         blur(): void;
+        private updateDependencies;
+        private updateDependencyState;
+        private toggleDisabled;
         render(): TemplateResult<1>;
     }
 }
@@ -2166,35 +2433,46 @@ declare module "components/data-select/data-select.component" {
     import { type CSSResultGroup, type PropertyValues } from 'lit';
     import { FormControlController } from "internal/form";
     import ZincElement from "internal/zinc-element";
+    import ZnOption from "components/option/index";
+    import ZnSelect from "components/select/index";
     import type { ZincFormControl } from "internal/zinc-element";
-    import type ZnSelect from "components/select/index";
     /**
-     * @summary Short summary of the component's intended use.
+     * @summary A select component with built-in data providers for common options like colors, currencies, and countries.
      * @documentation https://zinc.style/components/data-select
      * @status experimental
      * @since 1.0
      *
-     * @dependency zn-example
-     *
-     * @event zn-event-name - Emitted as an example.
+     * @dependency zn-select
+     * @dependency zn-option
      *
-     * @slot - The default slot.
-     * @slot example - An example slot.
+     * @event zn-input - Emitted when the select's value changes.
+     * @event zn-clear - Emitted when the clear button is activated.
+     * @event blur - Emitted when the select loses focus.
      *
-     * @csspart base - The component's base wrapper.
+     * @slot label - The select's label. Alternatively, you can use the `label` attribute.
+     * @slot label-tooltip - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.
+     * @slot context-note - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.
+     * @slot help-text - Text that describes how to use the select. Alternatively, you can use the `help-text` attribute.
      *
-     * @cssproperty --example - An example CSS custom property.
+     * @csspart combobox - The container that wraps the prefix, combobox, clear icon, and expand button (forwarded from zn-select).
+     * @csspart expand-icon - The container that wraps the expand icon (forwarded from zn-select).
+     * @csspart form-control-help-text - The help text's wrapper (forwarded from zn-select).
+     * @csspart form-control-input - The select's wrapper (forwarded from zn-select).
+     * @csspart display-input - The element that displays the selected option's label (forwarded from zn-select).
      */
     export default class ZnDataSelect extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
+        static dependencies: {
+            'zn-select': typeof ZnSelect;
+            'zn-option': typeof ZnOption;
+        };
         select: ZnSelect;
-        selectPrefix: HTMLElement;
         /** The name of the select. Used for form submission. */
         name: string;
-        /** The value of the select. Used for form submission. */
-        value: string;
+        /** The value of the select. Used for form submission. When `multiple` is enabled, this is an array of strings. */
+        value: string | string[];
         /** The provider of the select. */
-        provider: 'color' | 'currency' | 'country' | 'phone';
+        provider: 'color' | 'currency' | 'country' | 'phone' | 'us-state';
         /** The position of the icon. */
         iconPosition: 'start' | 'end' | 'none';
         /** An array of keys to use for filtering the options in the selected provider. */
@@ -2205,6 +2483,8 @@ declare module "components/data-select/data-select.component" {
         clearable: boolean;
         /** Include an "All" option at the top. */
         allowAll: boolean;
+        /** Include a "Common" option that selects multiple common currencies. */
+        allowCommon: boolean;
         /** The selects label. If you need to display HTML, use the `label` slot instead. */
         label: string;
         /** Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead. */
@@ -2220,15 +2500,22 @@ declare module "components/data-select/data-select.component" {
         helpText: string;
         /** The selects required attribute. */
         required: boolean;
+        /** Disables the select. */
+        disabled: boolean;
         iconOnly: boolean;
         multiple: boolean;
+        selectFirst: boolean;
+        distinct: string;
+        conditional: string;
         protected readonly formControlController: FormControlController;
+        private selectObserver?;
         get validationMessage(): string;
         get validity(): ValidityState;
         constructor();
         connectedCallback(): void;
         disconnectedCallback(): void;
-        protected firstUpdated(_changedProperties: PropertyValues): void;
+        protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
+        protected updated(_changedProperties: PropertyValues): Promise<void>;
         checkValidity(): boolean;
         getForm(): HTMLFormElement | null;
         reportValidity(): boolean;
@@ -2241,7 +2528,11 @@ declare module "components/data-select/data-select.component" {
         blur: () => void;
         protected render(): import("lit").TemplateResult<1>;
         private _updatePrefix;
+        private _updateIconEmptyState;
         private getPlaceholder;
+        private _observeSelectDisabled;
+        private _syncDisabledState;
+        private _normalizeValue;
     }
 }
 declare module "components/data-select/index" {
@@ -2254,370 +2545,404 @@ declare module "components/data-select/index" {
         }
     }
 }
-declare module "components/input/input.component" {
+declare module "utilities/lit-to-html" {
+    import { type TemplateResult } from "lit";
+    export function litToHTML<T extends HTMLElement>(templateResult: TemplateResult): T | null;
+}
+declare module "events/zn-change" {
+    export type ZnChangeEvent = CustomEvent<Record<PropertyKey, never>>;
+    global {
+        interface GlobalEventHandlersEventMap {
+            'zn-change': ZnChangeEvent;
+        }
+    }
+}
+declare module "components/query-builder/query-builder.component" {
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
     import ZincElement from "internal/zinc-element";
-    import ZnIcon from "components/icon/index";
-    import ZnTooltip from "components/tooltip/index";
+    import ZnButton from "components/button/index";
+    import ZnInput from "components/input/index";
+    import ZnOption from "components/option/index";
+    import ZnSelect from "components/select/index";
     import type { ZincFormControl } from "internal/zinc-element";
+    export type QueryBuilderData = QueryBuilderItem[];
+    export interface QueryBuilderItem {
+        id: string;
+        name: string;
+        type?: QueryBuilderType;
+        options?: QueryBuilderOptions;
+        operators: QueryBuilderOperators[];
+        maxOptionsVisible?: string;
+    }
+    export type QueryBuilderType = 'bool' | 'boolean' | 'date' | 'number';
+    export interface QueryBuilderOptions {
+        [key: string | number]: string | number;
+    }
+    export enum QueryBuilderOperators {
+        Eq = "eq",
+        Neq = "neq",
+        Eqi = "eqi",
+        Neqi = "neqi",
+        Before = "before",
+        After = "after",
+        In = "in",
+        Nin = "nin",
+        MatchPhrasePre = "matchphrasepre",
+        NMatchPhrasePre = "nmatchphrasepre",
+        MatchPhrase = "matchphrase",
+        NMatchPhrase = "nmatchphrase",
+        Match = "match",
+        NMatch = "nmatch",
+        Contains = "contains",
+        DoesNotContain = "doesnotcontain",
+        Starts = "starts",
+        NStarts = "nstarts",
+        Ends = "ends",
+        NEnds = "nends",
+        Wild = "wild",
+        NWild = "nwild",
+        Like = "like",
+        NLike = "nlike",
+        Fuzzy = "fuzzy",
+        NFuzzy = "nfuzzy",
+        Gte = "gte",
+        Gt = "gt",
+        Lt = "lt",
+        Lte = "lte"
+    }
+    export interface CreatedRule {
+        id: string;
+        name: string;
+        operator: string;
+        value: string;
+    }
     /**
      * @summary Short summary of the component's intended use.
-     * @documentation https://zinc.style/components/input
+     * @documentation https://zinc.style/components/query-builder
      * @status experimental
      * @since 1.0
      *
-     * @dependency zn-icon
-     * @dependency zn-tooltip
+     * @dependency zn-button
+     * @dependency zn-input
+     * @dependency zn-option
+     * @dependency zn-select
      *
-     * @event zn-blur - Emitted when the control loses focus.
-     * @event zn-change - Emitted when an alteration to the control's value is committed by the user.
-     * @event zn-clear - Emitted when the clear button is activated.
-     * @event zn-focus - Emitted when the control gains focus.
-     * @event zn-input - Emitted when the control receives input.
-     * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+     * @slot - The default slot.
+     * @slot example - An example slot.
      *
-     * @slot label - The input's label. Alternatively, you can use the `label` attribute.
-     * @slot label-tooltip - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.
-     * @slot context-note - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute.
-     * @slot prefix - Used to prepend a presentational icon or similar element to the input.
-     * @slot suffix - Used to append a presentational icon or similar element to the input.
-     * @slot clear-icon - An icon to use in lieu of the default clear icon.
-     * @slot show-password-icon - An icon to use in lieu of the default show password icon.
-     * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
-     * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+     * @csspart base - The component's base wrapper.
      *
-     * @csspart form-control - The form control that wraps the label, input, and help text.
-     * @csspart form-control-label - The label's wrapper.
-     * @csspart form-control-input - The input's wrapper.
-     * @csspart form-control-help-text - The help text's wrapper.
-     * @csspart base - The component's base wrapper.
-     * @csspart input - The internal `<input>` control.
-     * @csspart prefix - The container that wraps the prefix.
-     * @csspart clear-button - The clear button.
-     * @csspart password-toggle-button - The password toggle button.
-     * @csspart suffix - The container that wraps the suffix.
+     * @cssproperty --example - An example CSS custom property.
      */
-    export default class ZnInput extends ZincElement implements ZincFormControl {
-        static styles: import("lit").CSSResult;
+    export default class ZnQueryBuilder extends ZincElement implements ZincFormControl {
+        static styles: CSSResultGroup;
         static dependencies: {
-            'zn-icon': typeof ZnIcon;
-            'zn-tooltip': typeof ZnTooltip;
+            'zn-button': typeof ZnButton;
+            'zn-input': typeof ZnInput;
+            'zn-option': typeof ZnOption;
+            'zn-select': typeof ZnSelect;
         };
-        private readonly formControlController;
-        private readonly hasSlotController;
-        private readonly localize;
+        private _selectedRules;
+        private _formController;
+        private _previousOperator;
+        container: HTMLDivElement;
+        addRule: ZnSelect;
         input: HTMLInputElement;
-        private hasFocus;
-        title: string;
-        private __numberInput;
-        private __dateInput;
-        /**
-         * The type of input. Works the same as native `<input>` element. But only a subset of types is supported. Defaults
-         * to `text`
-         */
-        type: 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
-        /** The name of the input, submitted as a name/value pair with form data. */
+        filters: QueryBuilderData;
+        dropdown: boolean;
         name: string;
-        /** The current value of the input, submitted as a name/value pair with form data. */
-        value: any;
-        /** The default value of the form control. Primarily used for resetting the form control. */
-        defaultValue: string;
-        /** The inputs size **/
-        size: 'x-small' | 'small' | 'medium' | 'large';
-        /** Draws a pill-styled input **/
-        pill: boolean;
-        /** The inputs label. If you need to display HTML, use the `label` slot. **/
-        label: string;
-        /** Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the
-         * `label-tooltip` slot.
-         * **/
-        labelTooltip: string;
-        /**
-         * Text that appears above the input, on the right, to add additional context. If you need to display HTML
-         * in this text, use the `context-note` slot instead
-         */
-        contextNote: string;
-        /** The input's help text. If you need to display HTML, use the `help-text` slot instead. **/
-        helpText: string;
-        /** Adds a clear button when the input is not empty **/
-        clearable: boolean;
-        /** Adds the default optional icon for this input type. Currently only types `email` and `tel` have a default
-         * optional icon.
-         */
-        optionalIcon: boolean;
-        /** Disables the input **/
-        disabled: boolean;
-        /** Fills the input background white **/
-        filled: boolean;
-        /** Placeholder text to show as a hint when the input is empty. */
-        placeholder: string;
-        /** Makes the input read-only **/
-        readonly: boolean;
-        /** Adds a button to toggle the passwords visibility, only applies to password types **/
-        passwordToggle: boolean;
-        /** Determines whether or no the password is currently visible. Only applies to password types **/
-        passwordVisible: boolean;
-        /** Hides the browsers built-in increment/decrement spin buttons for number inputs **/
-        noSpinButtons: boolean;
-        /**
-         * By default, form-controls are associated with the nearest containing `<form>` element. This attribute allows you
-         * to place the form control outside a form and associate it with the form that has this `id`. The form must be
-         * in the same document or shadow root for this to work.
-         */
-        form: string;
-        /** Makes the input a required field. */
-        required: boolean;
-        /** A regular expression pattern to validate input against. */
-        pattern: string;
-        /** The minimum length of input that will be considered valid. */
-        minlength: number;
-        /** The maximum length of input that will be considered valid. */
-        maxlength: number;
-        /** The input's minimum value. Only applies to date and number input types. */
-        min: number | string;
-        /** The input's maximum value. Only applies to date and number input types. */
-        max: number | string;
-        /**
-         * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
-         * implied, allowing any numeric value. Only applies to date and number input types.
-         */
-        step: number | 'any';
-        /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
-        autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
-        /** Indicates whether the browser's autocorrect feature is on or off. */
-        autocorrect: 'off' | 'on';
-        /**
-         * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
-         * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
-         */
-        autocomplete: string;
-        /** Indicates that the input should receive focus on page load. */
-        autofocus: boolean;
-        /** Used to customize the label or icon of the Enter key on virtual keyboards. */
-        enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
-        /** Enables spell checking on the input. */
-        spellcheck: boolean;
-        /**
-         * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
-         * keyboard on supportive devices.
-         */
-        inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
-        /**
-         * Gets or sets the current value as `date` object. Returns `null` if the value can't be converted. This will use
-         * the native `<input type="{{type}}">` implementation and may result in an error.
-         */
-        get valueAsDate(): Date | null;
-        set valueAsDate(newValue: Date | null);
-        /** Gets or sets the current value as a number. Return `null` if the value can't be converted. */
-        get valueAsNumber(): number;
-        set valueAsNumber(newValue: number);
-        /** Gets the validity state object */
-        get validity(): ValidityState;
-        /** Gets the validation message */
+        value: PropertyKey;
+        showValues: string[];
         get validationMessage(): string;
-        private validateMinMax;
-        private handleBlur;
-        private handleChange;
-        private handleClearClick;
-        private handleFocus;
-        private handleInput;
-        private handleInvalid;
-        private handleKeyDown;
-        private handlePasswordToggle;
-        private focusInput;
-        handleDisabledChange(): void;
-        handleStepChange(): void;
-        handleValueChange(): Promise<void>;
-        /** Sets focus on the input. */
-        focus(options?: FocusOptions): void;
-        /** Removes focus from the input. */
-        blur(): void;
-        /** Selects all the text in the input. */
-        select(): void;
-        /** Sets the start and end positions of the text selection (0-based). */
-        setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
-        /** Replaces a range of text with a new string. */
-        setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
-        /** Displays the browser picker for an input element (only works if the browser supports it for the input type). */
-        showPicker(): void;
-        /** Increments the value of a numeric input type by the value of the step attribute. */
-        stepUp(): void;
-        /** Decrements the value of a numeric input type by the value of the step attribute. */
-        stepDown(): void;
-        /** Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+        get validity(): ValidityState;
+        protected firstUpdated(_changedProperties: PropertyValues): void;
+        render(): import("lit").TemplateResult<1>;
+        private _handleChange;
+        private _addRule;
+        private _createInput;
+        private _changeValueInput;
+        private _createBooleanInput;
+        private _createNumberInput;
+        private _createDateInput;
+        private _createSelectInput;
+        private _createDefaultInput;
+        private _updateOperatorValue;
+        private _updateDateValue;
+        private _updateValue;
+        private updateInValue;
+        private _changeRule;
+        private _getRulePosition;
+        private _removeRule;
+        clear(): void;
+        reset(): void;
         checkValidity(): boolean;
-        /** Gets the associated form, if one exists. */
         getForm(): HTMLFormElement | null;
-        /** Checks for validity and shows the browser's validation message if the control is invalid. */
         reportValidity(): boolean;
-        /** Sets a custom validation message. Pass an empty string to restore validity. */
         setCustomValidity(message: string): void;
-        render(): import("lit").TemplateResult<1>;
     }
 }
-declare module "components/input/index" {
-    import ZnInput from "components/input/input.component";
-    export * from "components/input/input.component";
-    export default ZnInput;
+declare module "components/query-builder/index" {
+    import ZnQueryBuilder from "components/query-builder/query-builder.component";
+    export * from "components/query-builder/query-builder.component";
+    export default ZnQueryBuilder;
     global {
         interface HTMLElementTagNameMap {
-            'zn-input': ZnInput;
+            'zn-query-builder': ZnQueryBuilder;
         }
     }
 }
-declare module "utilities/lit-to-html" {
-    import { type TemplateResult } from "lit";
-    export function litToHTML<T extends HTMLElement>(templateResult: TemplateResult): T | null;
+declare module "components/data-table-search/data-table-search.component" {
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
+    import ZincElement, { type ZincFormControl } from "internal/zinc-element";
+    import ZnInput from "components/input/index";
+    /**
+     * @summary A search component for data tables.
+     * @documentation https://zinc.style/components/data-table-search
+     * @status experimental
+     * @since 1.0
+     *
+     * @dependency zn-input
+     *
+     * @event zn-search-change - Emitted when the search value changes (debounced).
+     *
+     * @slot - The default slot for additional form inputs.
+     *
+     * @csspart base - The component's base wrapper.
+     *
+     * @property {string} name - The name of the search input field (default: "search").
+     * @property {string} value - The current search value.
+     * @property {string} placeholder - The placeholder text for the search input (default: "Search...").
+     * @property {string} helpText - Help text displayed below the search input.
+     * @property {string} searchUri - Optional URI to use for search operations.
+     * @property {number} debounceDelay - The delay in milliseconds before triggering a search (default: 500).
+     */
+    export default class ZnDataTableSearch extends ZincElement implements ZincFormControl {
+        static styles: CSSResultGroup;
+        static dependencies: {
+            'zn-input': typeof ZnInput;
+        };
+        private _formController;
+        private _searchTimeout?;
+        name: string;
+        value: string;
+        placeholder: string;
+        helpText: string;
+        searchUri: string | undefined;
+        debounceDelay: number;
+        get validationMessage(): string;
+        get validity(): ValidityState;
+        checkValidity(): boolean;
+        getForm(): HTMLFormElement | null;
+        reportValidity(): boolean;
+        setCustomValidity(): void;
+        protected firstUpdated(_changedProperties: PropertyValues): void;
+        /**
+         * Collects form data from slotted input elements
+         */
+        getFormData(): Record<string, any>;
+        handleInput: (e: Event) => void;
+        handleClear: () => void;
+        disconnectedCallback(): void;
+        /**
+         * Emit the search change event with form data
+         */
+        private emitSearchChange;
+        render(): import("lit").TemplateResult<1>;
+    }
 }
-declare module "events/zn-change" {
-    export type ZnChangeEvent = CustomEvent<Record<PropertyKey, never>>;
+declare module "components/data-table-search/index" {
+    import ZnDataTableSearch from "components/data-table-search/data-table-search.component";
+    export * from "components/data-table-search/data-table-search.component";
+    export default ZnDataTableSearch;
     global {
-        interface GlobalEventHandlersEventMap {
-            'zn-change': ZnChangeEvent;
+        interface HTMLElementTagNameMap {
+            'zn-data-table-search': ZnDataTableSearch;
         }
     }
 }
-declare module "components/query-builder/query-builder.component" {
-    import { type CSSResultGroup, type PropertyValues } from 'lit';
+declare module "components/empty-state/empty-state.component" {
+    import { type CSSResultGroup } from 'lit';
     import ZincElement from "internal/zinc-element";
-    import ZnButton from "components/button/index";
-    import ZnInput from "components/input/index";
-    import ZnOption from "components/option/index";
-    import ZnSelect from "components/select/index";
-    import type { ZincFormControl } from "internal/zinc-element";
-    export type QueryBuilderData = QueryBuilderItem[];
-    export interface QueryBuilderItem {
-        id: string;
-        name: string;
-        type?: QueryBuilderType;
-        options?: QueryBuilderOptions;
-        operators: QueryBuilderOperators[];
-        maxOptionsVisible?: string;
-    }
-    export type QueryBuilderType = 'bool' | 'boolean' | 'date' | 'number';
-    export interface QueryBuilderOptions {
-        [key: string | number]: string | number;
-    }
-    export enum QueryBuilderOperators {
-        Eq = "eq",
-        Neq = "neq",
-        Eqi = "eqi",
-        Neqi = "neqi",
-        Before = "before",
-        After = "after",
-        In = "in",
-        Nin = "nin",
-        MatchPhrasePre = "matchphrasepre",
-        NMatchPhrasePre = "nmatchphrasepre",
-        MatchPhrase = "matchphrase",
-        NMatchPhrase = "nmatchphrase",
-        Match = "match",
-        NMatch = "nmatch",
-        Contains = "contains",
-        DoesNotContain = "doesnotcontain",
-        Starts = "starts",
-        NStarts = "nstarts",
-        Ends = "ends",
-        NEnds = "nends",
-        Wild = "wild",
-        NWild = "nwild",
-        Like = "like",
-        NLike = "nlike",
-        Fuzzy = "fuzzy",
-        NFuzzy = "nfuzzy",
-        Gte = "gte",
-        Gt = "gt",
-        Lt = "lt",
-        Lte = "lte"
+    /**
+     * @summary Short summary of the component's intended use.
+     * @documentation https://zinc.style/components/empty-state
+     * @status experimental
+     * @since 1.0
+     *
+     * @dependency zn-example
+     *
+     * @event zn-event-name - Emitted as an example.
+     *
+     * @slot - The default slot.
+     * @slot example - An example slot.
+     *
+     * @csspart base - The component's base wrapper.
+     *
+     * @cssproperty --example - An example CSS custom property.
+     */
+    export default class ZnEmptyState extends ZincElement {
+        static styles: CSSResultGroup;
+        icon: string;
+        caption: string;
+        description: string;
+        type: 'error' | 'info' | 'primary' | '';
+        padded: boolean;
+        private readonly hasSlotController;
+        render(): import("lit").TemplateResult<1>;
     }
-    export interface CreatedRule {
-        id: string;
-        name: string;
-        operator: string;
-        value: string;
+}
+declare module "components/empty-state/index" {
+    import ZnEmptyState from "components/empty-state/empty-state.component";
+    export * from "components/empty-state/empty-state.component";
+    export default ZnEmptyState;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-empty-state': ZnEmptyState;
+        }
     }
+}
+declare module "components/hover-container/hover-container.component" {
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    import type Popup from "components/popup/index";
     /**
-     * @summary Short summary of the component's intended use.
-     * @documentation https://zinc.style/components/query-builder
+     * @summary The HoverContainer component is used to display additional information when a user hovers over or clicks
+     * on an element.
+     *
+     * @documentation https://zinc.style/components/hover-container
      * @status experimental
      * @since 1.0
      *
-     * @dependency zn-button
-     * @dependency zn-input
-     * @dependency zn-option
-     * @dependency zn-select
-     *
-     * @slot - The default slot.
-     * @slot example - An example slot.
-     *
-     * @csspart base - The component's base wrapper.
+     * @event zn-show - Emitted when the hover-container is shown.
+     * @event zn-after-show - Emitted after the hover-container is shown.
+     * @event zn-hide - Emitted when the hover-container is hidden.
+     * @event zn-after-hide - Emitted after the hover-container is hidden.
      *
-     * @cssproperty --example - An example CSS custom property.
+     * @slot - The content of the hover-container
+     * @slot anchor - The anchor the hover-container is attached to.
      */
-    export default class ZnQueryBuilder extends ZincElement implements ZincFormControl {
+    export default class ZnHoverContainer extends ZincElement {
         static styles: CSSResultGroup;
-        static dependencies: {
-            'zn-button': typeof ZnButton;
-            'zn-input': typeof ZnInput;
-            'zn-option': typeof ZnOption;
-            'zn-select': typeof ZnSelect;
-        };
-        private _selectedRules;
-        private _formController;
-        private _previousOperator;
-        container: HTMLDivElement;
-        addRule: ZnSelect;
-        input: HTMLInputElement;
-        filters: QueryBuilderData;
-        dropdown: boolean;
-        name: string;
-        value: PropertyKey;
-        showValues: string[];
-        get validationMessage(): string;
-        get validity(): ValidityState;
+        private hoverTimeout;
+        private closeWatcher;
+        defaultSlot: HTMLSlotElement;
+        body: HTMLElement;
+        popup: Popup;
+        content: string;
+        placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+        disabled: boolean;
+        distance: number;
+        open: boolean;
+        skidding: number;
+        trigger: string;
+        hoist: boolean;
+        constructor();
+        disconnectedCallback(): void;
         protected firstUpdated(_changedProperties: PropertyValues): void;
+        private hasTrigger;
+        private handleBlur;
+        private handleClick;
+        private handleFocus;
+        private handleDocumentKeyDown;
+        private handleMouseOver;
+        private handleMouseOut;
+        handleOpenChange(): void;
+        handleOptionsChange(): Promise<void>;
+        handleDisabledChange(): void;
+        show(): Promise<void>;
+        hide(): void;
         render(): import("lit").TemplateResult<1>;
-        private _handleChange;
-        private _addRule;
-        private _createInput;
-        private _changeValueInput;
-        private _createBooleanInput;
-        private _createNumberInput;
-        private _createDateInput;
-        private _createSelectInput;
-        private _createDefaultInput;
-        private _updateOperatorValue;
-        private _updateDateValue;
-        private _updateValue;
-        private updateInValue;
-        private _changeRule;
-        private _getRulePosition;
-        private _removeRule;
-        clear(): void;
-        reset(): void;
-        checkValidity(): boolean;
-        getForm(): HTMLFormElement | null;
-        reportValidity(): boolean;
-        setCustomValidity(message: string): void;
     }
 }
-declare module "components/query-builder/index" {
-    import ZnQueryBuilder from "components/query-builder/query-builder.component";
-    export * from "components/query-builder/query-builder.component";
-    export default ZnQueryBuilder;
+declare module "components/hover-container/index" {
+    import ZnHoverContainer from "components/hover-container/hover-container.component";
+    export * from "components/hover-container/hover-container.component";
+    export default ZnHoverContainer;
     global {
         interface HTMLElementTagNameMap {
-            'zn-query-builder': ZnQueryBuilder;
+            'zn-hover-container': ZnHoverContainer;
+        }
+    }
+}
+declare module "components/skeleton/skeleton.component" {
+    import ZincElement from "internal/zinc-element";
+    import type { CSSResultGroup } from "lit";
+    /**
+     * @summary Skeleton loaders provide visual placeholders while content is loading, improving perceived performance and user experience.
+     * @documentation https://zinc.style/components/skeleton
+     * @status experimental
+     * @since 1.0
+     *
+     * @property {string} speed - Animation speed for the shimmer effect. Default: "3s"
+     * @property {string} width - Width of the skeleton element. Default: "100%"
+     * @property {string} height - Height of the skeleton element. Default: "20px"
+     * @property {string} radius - Border radius of the skeleton element. Default: "4px"
+     */
+    export default class ZnSkeleton extends ZincElement {
+        static styles: CSSResultGroup;
+        speed: string;
+        width: string;
+        height: string;
+        radius: string;
+        protected render(): unknown;
+    }
+}
+declare module "components/skeleton/index" {
+    import ZnSkeleton from "components/skeleton/skeleton.component";
+    export * from "components/skeleton/skeleton.component";
+    export default ZnSkeleton;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-skeleton': ZnSkeleton;
+        }
+    }
+}
+declare module "components/style/style.component" {
+    import { type CSSResultGroup } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    export default class ZnStyle extends ZincElement {
+        static styles: CSSResultGroup;
+        private readonly localize;
+        color: string;
+        border: boolean;
+        error: boolean;
+        success: boolean;
+        info: boolean;
+        warning: boolean;
+        primary: boolean;
+        accent: boolean;
+        center: boolean;
+        display: null;
+        font: string;
+        width: string;
+        height: string;
+        pad: string;
+        margin: string;
+        autoMargin: string;
+        connectedCallback(): void;
+        createRenderRoot(): this;
+    }
+}
+declare module "components/style/index" {
+    import ZnStyle from "components/style/style.component";
+    export * from "components/style/style.component";
+    export default ZnStyle;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-style': ZnStyle;
         }
     }
 }
 declare module "components/data-table/data-table.component" {
     import { type CSSResultGroup, type TemplateResult } from 'lit';
     import { type ZnFilterChangeEvent } from "events/zn-filter-change";
+    import { type ZnSearchChangeEvent } from "events/zn-search-change";
     import ZincElement from "internal/zinc-element";
     import ZnButton from "components/button/index";
     import ZnButtonGroup from "components/button-group/index";
     import ZnChip from "components/chip/index";
     import ZnConfirm from "components/confirm/index";
+    import ZnDataTableSearch from "components/data-table-search/index";
     import ZnDropdown from "components/dropdown/index";
     import ZnEmptyState from "components/empty-state/index";
     import ZnHoverContainer from "components/hover-container/index";
@@ -2661,6 +2986,7 @@ declare module "components/data-table/data-table.component" {
         filter = "filter",
         filter_top = "filter-top",
         sort = "sort",
+        search = "search",
         inputs = "inputs"
     }
     interface ActionConfig {
@@ -2672,6 +2998,8 @@ declare module "components/data-table/data-table.component" {
         confirmTitle: string;
         confirmContent: string;
         icon: string;
+        iconSrc?: string;
+        color?: string;
         type: string;
     }
     interface HeaderConfig {
@@ -2701,11 +3029,18 @@ declare module "components/data-table/data-table.component" {
      * @dependency zn-button-group
      * @dependency zn-confirm
      * @dependency zn-skeleton
-     *
-     * @event zn-event-name - Emitted as an example.
+     * @dependency zn-data-table-search
      *
      * @slot - The default slot.
-     * @slot example - An example slot.
+     * @slot search - Slot for search component.
+     * @slot sort - Slot for sort component.
+     * @slot filter - Slot for filter component.
+     * @slot filter-top - Slot for top-level filter component.
+     * @slot delete-action - Slot for delete action button.
+     * @slot modify-action - Slot for modify action button.
+     * @slot create-action - Slot for create action button.
+     * @slot inputs - Slot for additional input controls.
+     * @slot empty-state - Slot for custom empty state.
      *
      * @csspart base - The component's base wrapper.
      *
@@ -2725,6 +3060,7 @@ declare module "components/data-table/data-table.component" {
             'zn-confirm': typeof ZnConfirm;
             'zn-skeleton': typeof ZnSkeleton;
             'zn-style': typeof ZnStyle;
+            'zn-data-table-search': typeof ZnDataTableSearch;
         };
         dataUri: string;
         data: any;
@@ -2732,6 +3068,7 @@ declare module "components/data-table/data-table.component" {
         sortDirection: string;
         localSort: boolean;
         filter: string;
+        search: string;
         wideColumn: string;
         key: string;
         headers: Record<string, HeaderConfig>;
@@ -2772,7 +3109,8 @@ declare module "components/data-table/data-table.component" {
         render(): TemplateResult<1>;
         connectedCallback(): void;
         disconnectedCallback(): void;
-        changeEventListener: (e: ZnFilterChangeEvent) => void;
+        filterChangeListener: (e: ZnFilterChangeEvent) => void;
+        searchChangeListener: (e: ZnSearchChangeEvent) => void;
         emptyState(): TemplateResult<1>;
         renderTable(data: Response): TemplateResult<1>;
         humanize(str: string): string;
@@ -3010,6 +3348,7 @@ declare module "components/tile/tile.component" {
         flushY: boolean;
         inline: boolean;
         private _isLink;
+        private _handleActionsClick;
         render(): import("lit").TemplateResult;
     }
 }
@@ -3165,6 +3504,7 @@ declare module "events/zn-menu-select" {
 }
 declare module "components/navbar/navbar.component" {
     import { type CSSResultGroup, type PropertyValues } from 'lit';
+    import { Store } from "internal/storage";
     import ZincElement from "internal/zinc-element";
     import ZnDropdown from "components/dropdown/index";
     /**
@@ -3201,6 +3541,10 @@ declare module "components/navbar/navbar.component" {
         noPad: false;
         manualAddItems: boolean;
         isolated: boolean;
+        masterId: string;
+        storeKey: string;
+        storeTtl: number;
+        localStorage: boolean;
         private _preItems;
         private _postItems;
         private _appended;
@@ -3213,12 +3557,14 @@ declare module "components/navbar/navbar.component" {
         private _navItemsGap;
         private _expandableMargin;
         private _totalItemWidth;
+        protected _store: Store;
         appendItem(item: Element): void;
         connectedCallback(): void;
         handleResize: () => void;
-        addItem(item: Element): void;
+        addItem(item: Element, persist?: boolean): void;
         protected firstUpdated(_changedProperties: PropertyValues): void;
-        showMore(): void;
+        private _loadStoredTabs;
+        private _saveTabToStorage;
         private handleClick;
         render(): import("lit").TemplateResult<1>;
     }
@@ -3287,8 +3633,100 @@ declare module "components/header/index" {
         }
     }
 }
+declare module "components/icon-picker/brand-icons" {
+    export const brandIcons: string[];
+}
+declare module "components/icon-picker/line-icons" {
+    export const lineIcons: string[];
+}
+declare module "components/icon-picker/material-icons" {
+    export const materialIcons: string[];
+    export const material_outlinedIcons: string[];
+    export const material_roundIcons: string[];
+    export const material_sharpIcons: string[];
+    export const material_two_toneIcons: string[];
+    export const material_symbols_outlinedIcons: string[];
+}
+declare module "components/icon-picker/icon-picker.component" {
+    import { type CSSResultGroup } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    import ZnButton from "components/button/index";
+    import ZnDialog from "components/dialog/index";
+    import ZnIcon from "components/icon/index";
+    import ZnInput from "components/input/index";
+    import ZnOption from "components/option/index";
+    import ZnSelect from "components/select/index";
+    import type { ZincFormControl } from "internal/zinc-element";
+    export default class ZnIconPicker extends ZincElement implements ZincFormControl {
+        static styles: CSSResultGroup;
+        static dependencies: {
+            'zn-icon': typeof ZnIcon;
+            'zn-button': typeof ZnButton;
+            'zn-dialog': typeof ZnDialog;
+            'zn-input': typeof ZnInput;
+            'zn-select': typeof ZnSelect;
+            'zn-option': typeof ZnOption;
+        };
+        private readonly formControlController;
+        name: string;
+        icon: string;
+        label: string;
+        library: string;
+        color: string;
+        noColor: boolean;
+        noLibrary: boolean;
+        helpText: string;
+        disabled: boolean;
+        required: boolean;
+        form: string;
+        defaultValue: string;
+        private _dialogOpen;
+        private _searchQuery;
+        private _iconList;
+        private _filteredIcons;
+        private _pendingIcon;
+        private _pendingLibrary;
+        private _pendingColor;
+        private _dialog;
+        get value(): string;
+        set value(val: string);
+        get validity(): ValidityState;
+        get validationMessage(): string;
+        checkValidity(): boolean;
+        getForm(): HTMLFormElement | null;
+        reportValidity(): boolean;
+        setCustomValidity(_message: string): void;
+        private static readonly freeInputLibraries;
+        private isFreeInputLibrary;
+        private getIconsForLibrary;
+        private openDialog;
+        private closeDialog;
+        private handleConfirm;
+        private handleCancel;
+        private handleSearchInput;
+        private filterIcons;
+        private handleIconSelect;
+        private handleLibraryChange;
+        private handleColorInput;
+        private handleFreeInput;
+        private handleClear;
+        private _handleTriggerClick;
+        private _handleTriggerKeyDown;
+        render(): import("lit").TemplateResult<1>;
+    }
+}
+declare module "components/icon-picker/index" {
+    import ZnIconPicker from "components/icon-picker/icon-picker.component";
+    export * from "components/icon-picker/icon-picker.component";
+    export default ZnIconPicker;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-icon-picker': ZnIconPicker;
+        }
+    }
+}
 declare module "components/inline-edit/inline-edit.component" {
-    import { type CSSResultGroup, type HTMLTemplateResult } from 'lit';
+    import { type CSSResultGroup, type HTMLTemplateResult, type PropertyValues } from 'lit';
     import ZincElement from "internal/zinc-element";
     import ZnSelect from "components/select/index";
     import type { ZincFormControl } from "internal/zinc-element";
@@ -3303,8 +3741,9 @@ declare module "components/inline-edit/inline-edit.component" {
      *
      * @event zn-event-name - Emitted as an example.
      *
-     * @slot - The default slot.
+     * @slot - Default slot. When `input-type` is `select`, accepts `zn-option` elements to define select options. If provided, takes precedence over the `options` property.
      * @slot example - An example slot.
+     * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
      *
      * @csspart base - The component's base wrapper.
      *
@@ -3313,7 +3752,8 @@ declare module "components/inline-edit/inline-edit.component" {
     export default class ZnInlineEdit extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
         private readonly formControlController;
-        value: string;
+        private readonly hasSlotController;
+        value: string | string[];
         name: string;
         placeholder: string;
         editText: string;
@@ -3323,18 +3763,45 @@ declare module "components/inline-edit/inline-edit.component" {
         size: 'small' | 'medium' | 'large';
         required: boolean;
         pattern: string;
-        inputType: 'select' | 'text' | 'data-select' | 'number';
+        multiple: boolean;
+        clearable: boolean;
+        min: string | number;
+        max: string | number;
+        step: number | 'any';
+        inputType: 'select' | 'text' | 'data-select' | 'number' | 'textarea';
         options: {
             [key: string]: string;
         };
         selectProvider: string;
         iconPosition: 'start' | 'end' | 'none';
+        /**
+         * The URL to fetch options from. When set , the component fetches JSON from this URL and renders the results as
+         * options. The expected format is an array of objects with `key` and `value` properties:
+         * `[{"key": "us", "value": "United States"}, ...]`
+         * When not set, the component works exactly as before using slotted `<zn-option>` elements.
+         * Only works with type select.
+         */
+        dataUri: string;
+        /**
+         * Context data to send as a header when fetching options from the URL specified by the `src` property.
+         */
+        contextData: string;
+        /** Enables search/filtering on select inputs. */
+        search: boolean;
         /** The input's help text. If you need to display HTML, use the `help-text` slot instead. **/
         helpText: string;
+        /** The text direction for the input (ltr or rtl) **/
+        dir: 'ltr' | 'rtl' | 'auto';
+        /**
+         * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
+         * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
+         */
+        autocomplete: string;
         private hasFocus;
         private isEditing;
+        private _valueBeforeEdit;
         input: ZnInput | ZnSelect;
-        defaultValue: string;
+        defaultValue: string | string[];
         get validity(): ValidityState;
         get validationMessage(): string;
         checkValidity(): boolean;
@@ -3344,6 +3811,7 @@ declare module "components/inline-edit/inline-edit.component" {
         connectedCallback(): void;
         disconnectedCallback(): void;
         firstUpdated(): Promise<void>;
+        protected willUpdate(changedProperties: PropertyValues): void;
         handleValueChange(): Promise<void>;
         handleIsEditingChange(): Promise<void>;
         mouseEventHandler: (e: MouseEvent) => void;
@@ -3356,7 +3824,10 @@ declare module "components/inline-edit/inline-edit.component" {
         handleCancelClick: (e: MouseEvent) => void;
         handleBlur: () => void;
         handleInput: (e: Event) => void;
+        private moveSlottedOptionsToSelect;
+        handleSlotChange: () => Promise<void>;
         protected render(): import("lit").TemplateResult<1>;
+        protected _getTextAreaInput(): HTMLTemplateResult;
         protected _getTextInput(): HTMLTemplateResult;
         protected _getNumberInput(): HTMLTemplateResult;
         protected _getSelectInput(): HTMLTemplateResult;
@@ -3407,21 +3878,26 @@ declare module "components/vertical-stepper/vertical-stepper.component" {
     import { type CSSResultGroup } from 'lit';
     import ZincElement from "internal/zinc-element";
     /**
-     * @summary Short summary of the component's intended use.
+     * @summary Vertical steppers display a sequence of steps in a vertical layout with descriptions and optional icons.
      * @documentation https://zinc.style/components/vertical-stepper
      * @status experimental
      * @since 1.0
      *
-     * @dependency zn-example
-     *
-     * @event zn-event-name - Emitted as an example.
-     *
-     * @slot - The default slot.
-     * @slot example - An example slot.
-     *
-     * @csspart base - The component's base wrapper.
-     *
-     * @cssproperty --example - An example CSS custom property.
+     * @property {boolean} last - When true, removes the connecting line below this step (use for the final step in a sequence).
+     * @property {boolean} first - When true, indicates this is the first step in the sequence (affects visual styling).
+     * @property {boolean} active - When true, highlights this step as the current active step in the process.
+     * @property {string} description - A descriptive text explaining what happens in this step or its current status.
+     * @property {string} caption - The main label/title for this step.
+     *
+     * @slot icon - Optional slot for adding an icon or indicator before the step content.
+     *
+     * @csspart vs - The main container for the vertical stepper.
+     * @csspart vs__left - The left section containing the icon and connecting line.
+     * @csspart vs__icon - The icon container.
+     * @csspart vs__line - The vertical connecting line between steps.
+     * @csspart vs__right - The right section containing caption and description text.
+     * @csspart vs__caption - The caption/title text element.
+     * @csspart vs__description - The description text element.
      */
     export default class ZnVerticalStepper extends ZincElement {
         static styles: CSSResultGroup;
@@ -3466,6 +3942,8 @@ declare module "components/timer/timer.component" {
     export default class ZnTimer extends ZincElement {
         static styles: CSSResultGroup;
         private timestamp;
+        private _timerId;
+        disconnectedCallback(): void;
         private _getLastMessage;
         render(): import("lit").TemplateResult<1>;
         private _getTimes;
@@ -3574,18 +4052,18 @@ declare module "components/panel/panel.component" {
     import { type CSSResultGroup, type PropertyValues } from 'lit';
     import ZincElement from "internal/zinc-element";
     /**
-     * @summary Short summary of the component's intended use.
+     * @summary Panels are versatile containers that provide structure for organizing content with optional headers and footers.
      * @documentation https://zinc.style/components/panel
      * @status experimental
      * @since 1.0
      *
-     * @slot - The default slot.
-     * @slot actions - The actions slot.
-     * @slot footer - The footer slot.
-     *
+     * @slot - The panel's main content.
+     * @slot actions - Actions displayed in the panel header (buttons, chips, etc).
+     * @slot footer - Content displayed in the panel footer.
+     *
      * @csspart base - The component's base wrapper.
      *
-     * @cssproperty --example - An example CSS custom property.
+     * @cssproperty --zn-panel-basis - The flex-basis of the panel. Can be set using the basis-px attribute.
      */
     export default class ZnPanel extends ZincElement {
         static styles: CSSResultGroup;
@@ -3842,7 +4320,7 @@ declare module "components/sp/sp.component" {
         xl: string;
     };
     /**
-     * @summary Short summary of the component's intended use.
+     * @summary A flexible layout container for spacing and arranging child elements in rows or columns with configurable gap, padding, and dividers.
      * @documentation https://zinc.style/components/sp
      * @status experimental
      * @since 1.0
@@ -3867,6 +4345,7 @@ declare module "components/sp/sp.component" {
         padX: boolean;
         padY: boolean;
         noGap: boolean;
+        noPosition: boolean;
         flush: boolean;
         flushX: boolean;
         flushY: boolean;
@@ -3895,21 +4374,27 @@ declare module "components/stepper/stepper.component" {
     import { type CSSResultGroup } from 'lit';
     import ZincElement from "internal/zinc-element";
     /**
-     * @summary Short summary of the component's intended use.
+     * @summary Steppers provide visual feedback about progress through a multi-step process or workflow.
      * @documentation https://zinc.style/components/stepper
      * @status experimental
      * @since 1.0
      *
-     * @dependency zn-example
-     *
-     * @event zn-event-name - Emitted as an example.
-     *
-     * @slot - The default slot.
-     * @slot example - An example slot.
-     *
-     * @csspart base - The component's base wrapper.
-     *
-     * @cssproperty --example - An example CSS custom property.
+     * @property {string} caption - A descriptive label displayed above the stepper to indicate the current step or phase.
+     * @property {string} label - An optional label displayed above the caption, typically used for the wizard or workflow name.
+     * @property {number} steps - The total number of steps in the process.
+     * @property {number} value - The current step position (0 to steps). Progress is calculated as value/steps.
+     * @property {boolean} show-progress - When true, displays the step count (e.g., "2 / 5 steps") next to the caption.
+     *
+     * @csspart step-container - The container holding the progress line and steps.
+     * @csspart step-line - The background line showing the full step track.
+     * @csspart step-progress - The filled progress indicator showing completion.
+     * @csspart steps - The container for individual step markers.
+     * @csspart step - An individual step marker circle.
+     * @csspart header - The header container with caption and progress text.
+     * @csspart caption - The caption text element.
+     * @csspart progress - The progress count text (e.g., "2 / 5 steps").
+     * @csspart label - The label text container.
+     * @csspart info - The label text element.
      */
     export default class ZnStepper extends ZincElement {
         static styles: CSSResultGroup;
@@ -4073,21 +4558,25 @@ declare module "components/progress-bar/progress-bar.component" {
     import { type CSSResultGroup } from 'lit';
     import ZincElement from "internal/zinc-element";
     /**
-     * @summary Short summary of the component's intended use.
+     * @summary Progress bars provide visual feedback about the completion status of a task or process.
      * @documentation https://zinc.style/components/progress-bar
      * @status experimental
      * @since 1.0
      *
-     * @dependency zn-example
-     *
-     * @event zn-event-name - Emitted as an example.
-     *
-     * @slot - The default slot.
-     * @slot example - An example slot.
-     *
-     * @csspart base - The component's base wrapper.
-     *
-     * @cssproperty --example - An example CSS custom property.
+     * @csspart header - The header container that contains the caption and progress text.
+     * @csspart caption - The caption text element.
+     * @csspart progress - The progress percentage text element.
+     * @csspart bar - The SVG element containing the progress bar.
+     * @csspart track - The background track of the progress bar.
+     * @csspart fill - The filled portion of the progress bar indicating progress.
+     * @csspart footer - The footer container that contains the description.
+     * @csspart info - The description text element.
+     *
+     * @cssproperty --zn-border-color - The color of the progress bar background track.
+     * @cssproperty --zn-primary - The color of the progress bar fill.
+     * @cssproperty --zn-text-heading - The color of the caption text.
+     * @cssproperty --zn-text - The color of the progress percentage and description text.
+     * @cssproperty --zn-spacing-x-small - The spacing between header/footer and the progress bar.
      */
     export default class ZnProgressBar extends ZincElement {
         static styles: CSSResultGroup;
@@ -5014,6 +5503,8 @@ declare module "components/checkbox/checkbox.component" {
         indeterminate: boolean;
         /** Draws a container around the checkbox. */
         contained: boolean;
+        /** Removes a container around the checkbox. */
+        borderless: boolean;
         /** Applies styles relevant to checkboxes in a horizontal layout. */
         horizontal: boolean;
         /** The default value of the form control. Primarily used for resetting the form control. */
@@ -5093,21 +5584,41 @@ declare module "components/datepicker/datepicker.component" {
     import ZnTooltip from "components/tooltip/index";
     import type { ZincFormControl } from "internal/zinc-element";
     /**
-     * @summary Short summary of the component's intended use.
+     * @summary A date picker component with calendar popup and input validation.
      * @documentation https://zinc.style/components/datepicker
      * @status experimental
      * @since 1.0
      *
-     * @dependency zn-example
+     * @dependency zn-icon
+     * @dependency zn-tooltip
      *
-     * @event zn-event-name - Emitted as an example.
+     * @event zn-change - Emitted when the date value changes.
+     * @event zn-input - Emitted when the input value changes.
+     * @event zn-blur - Emitted when the input loses focus.
+     * @event zn-focus - Emitted when the input gains focus.
      *
-     * @slot - The default slot.
-     * @slot example - An example slot.
+     * @slot label - The datepicker's label. Alternatively, you can use the `label` attribute.
+     * @slot label-tooltip - Tooltip content for the label. Alternatively, you can use the `label-tooltip` attribute.
+     * @slot context-note - Additional context text displayed above the input. Alternatively, you can use the `context-note` attribute.
+     * @slot help-text - Help text displayed below the input. Alternatively, you can use the `help-text` attribute.
+     * @slot prefix - Content to display before the input (in addition to the default calendar icon).
+     * @slot suffix - Content to display after the input.
      *
      * @csspart base - The component's base wrapper.
-     *
-     * @cssproperty --example - An example CSS custom property.
+     * @csspart form-control - The form control wrapper.
+     * @csspart form-control-label - The label element.
+     * @csspart form-control-input - The input wrapper.
+     * @csspart form-control-help-text - The help text element.
+     *
+     * @property format - Date format using AirDatepicker tokens. Default: 'dd/MM/yyyy'
+     *   Supported formats:
+     *   - dd/MM/yyyy (31/12/2024) - Default
+     *   - MM/dd/yyyy (12/31/2024)
+     *   - yyyy-MM-dd (2024-12-31)
+     *   - dd-MM-yyyy (31-12-2024)
+     *   - yyyy/MM/dd (2024/12/31)
+     *
+     * @cssproperty --zn-input-* - Inherited input component CSS custom properties.
      */
     export default class ZnDatepicker extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
@@ -5153,10 +5664,35 @@ declare module "components/datepicker/datepicker.component" {
          * in the same document or shadow root for this to work.
          */
         form: string;
+        flush: boolean;
         /** Makes the input a required field. */
         required: boolean;
+        /** Adds a clear button to the calendar for removing a selected date. **/
+        clearable: boolean;
         /** Makes the input a range picker. **/
         range: boolean;
+        /** Disallows selecting past dates. **/
+        disablePastDates: boolean;
+        /** Minimum date that can be selected. Overrides disable-past-dates if both are set. Accepts Date object or date string. **/
+        minDate?: string | Date;
+        /** Maximum date that can be selected. Accepts Date object or date string. **/
+        maxDate?: string | Date;
+        /**
+         * Date format for display and input. Uses AirDatepicker format tokens.
+         *
+         * Common formats:
+         * - 'dd/MM/yyyy' (31/12/2024) - Default, European style
+         * - 'MM/dd/yyyy' (12/31/2024) - US style
+         * - 'yyyy-MM-dd' (2024-12-31) - ISO style
+         * - 'dd-MM-yyyy' (31-12-2024) - Alternative European
+         * - 'yyyy/MM/dd' (2024/12/31) - Alternative ISO
+         *
+         * Format tokens:
+         * - dd: Day with leading zero (01-31)
+         * - MM: Month with leading zero (01-12)
+         * - yyyy: Full year (2024)
+         */
+        format: string;
         private _instance;
         /** Gets the validity state object */
         get validity(): ValidityState;
@@ -5164,6 +5700,7 @@ declare module "components/datepicker/datepicker.component" {
         get validationMessage(): string;
         handleDisabledChange(): void;
         handleValueChange(): Promise<void>;
+        handleDatepickerOptionsChange(): void;
         /** Sets focus on the input. */
         focus(options?: FocusOptions): void;
         /** Removes focus from the input. */
@@ -5182,6 +5719,18 @@ declare module "components/datepicker/datepicker.component" {
         private handleInput;
         private handleChange;
         private handleInvalid;
+        private handleKeyDown;
+        private handlePaste;
+        private handleBlur;
+        private isValidDateString;
+        private parseDate;
+        private parseDateString;
+        private isDateInRange;
+        private clearInvalidDate;
+        private getFormatSeparator;
+        private escapeRegex;
+        private normalizeDate;
+        private autoFormatDate;
         protected updated(_changedProperties: PropertyValues): void;
         render(): import("lit").TemplateResult<1>;
     }
@@ -5259,6 +5808,8 @@ declare module "components/input-group/input-group.component" {
         defaultSlot: HTMLSlotElement;
         /** The input group's label. If you need to display HTML, use the `label` slot. */
         label: string;
+        /** Adds a gap between the grouped elements, preserving individual border radii. Use `sm`, `md`, or `lg`. */
+        gap: 'sm' | 'md' | 'lg';
         private handleSlotChange;
         render(): import("lit").TemplateResult<1>;
     }
@@ -5970,6 +6521,7 @@ declare module "components/item/item.component" {
         connectedCallback(): void;
         protected updated(_changedProperties: PropertyValues): void;
         protected _hasContent(): boolean;
+        protected _hasRequiredSlot(): boolean;
         render(): import("lit").TemplateResult<1>;
     }
 }
@@ -6534,6 +7086,7 @@ declare module "components/settings-container/settings-container.component" {
         private handleContentSlotChange;
         private handleFiltersSlotChange;
         private recomputeFiltersFromSlot;
+        private updateSingleFilter;
         updateFilters(): void;
         updateFilter(e: ZnChangeEvent): void;
         render(): import("lit").TemplateResult<1>;
@@ -6688,12 +7241,12 @@ declare module "components/audio-select/index" {
     }
 }
 declare module "components/translations/translations.component" {
-    import type { PropertyValues } from 'lit';
-    import type { ZincFormControl } from "internal/zinc-element";
     import ZincElement from "internal/zinc-element";
     import ZnInlineEdit from "components/inline-edit/index";
     import ZnInput from "components/input/index";
     import ZnNavbar from "components/navbar/index";
+    import type { PropertyValues } from 'lit';
+    import type { ZincFormControl } from "internal/zinc-element";
     export default class ZnTranslations extends ZincElement implements ZincFormControl {
         static styles: import("lit").CSSResult;
         static dependencies: {
@@ -6709,6 +7262,8 @@ declare module "components/translations/translations.component" {
         disabled: boolean;
         required: boolean;
         flush: boolean;
+        /** When true, hides the individual language navbar and defers language control to a parent zn-translation-group. */
+        grouped: boolean;
         languages: Record<string, string>;
         values: Record<string, string>;
         private _activeLanguage;
@@ -6718,6 +7273,14 @@ declare module "components/translations/translations.component" {
         getForm(): HTMLFormElement | null;
         reportValidity(): boolean;
         setCustomValidity(): void;
+        /** Sets the active language externally. Used by zn-translation-group. */
+        setActiveLanguage(language: string): void;
+        /** Returns the currently active language. */
+        getActiveLanguage(): string;
+        /** Adds a language key to this component's values if not already present. Used by zn-translation-group. */
+        addLanguageKey(languageCode: string): void;
+        /** Returns all language codes that have values. */
+        getValueLanguages(): string[];
         protected firstUpdated(): void;
         willUpdate(changedProperties: PropertyValues): void;
         private handleLanguageAdd;
@@ -6726,6 +7289,7 @@ declare module "components/translations/translations.component" {
         private updateValue;
         private handleKeyDown;
         private handleSubmit;
+        private isRTLLanguage;
         render(): import("lit").TemplateResult<1>;
     }
 }
@@ -6734,6 +7298,370 @@ declare module "components/translations/index" {
     export * from "components/translations/translations.component";
     export default ZnTranslations;
 }
+declare module "components/key/key.component" {
+    import { type CSSResultGroup } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    /**
+     * @summary A legend key item, typically used alongside charts to label and toggle visibility of data series by category.
+     * @documentation https://zinc.style/components/key
+     * @status experimental
+     * @since 1.0
+     *
+     * @slot - The description of the key.
+     */
+    export default class ZnKey extends ZincElement {
+        static styles: CSSResultGroup;
+        icon: string;
+        attribute: string;
+        value: string;
+        color: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+        active: boolean;
+        iconSize: number;
+        private _handleClick;
+        render(): import("lit").TemplateResult<1>;
+    }
+}
+declare module "components/key/index" {
+    import ZnKey from "components/key/key.component";
+    export * from "components/key/key.component";
+    export default ZnKey;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-key': ZnKey;
+        }
+    }
+}
+declare module "components/key-container/key-container.component" {
+    import { type CSSResultGroup } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    /**
+     * @summary A legend container that manages key items, typically used alongside charts to toggle visibility of data series by category.
+     * @documentation https://zinc.style/components/key-container
+     * @status experimental
+     * @since 1.0
+     *
+     * @slot - The content to be filtered.
+     * @slot keys - The key items (zn-key) that define the filters.
+     *
+     * @event zn-change - Emitted when the set of active keys changes.
+     */
+    export default class ZnKeyContainer extends ZincElement {
+        static styles: CSSResultGroup;
+        keysSlot: HTMLSlotElement;
+        defaultSlot: HTMLSlotElement;
+        position: 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
+        target: string;
+        itemSelector: string;
+        filterAttribute: string;
+        noScroll: boolean;
+        private _hiddenElements;
+        private _targetElement;
+        connectedCallback(): void;
+        firstUpdated(): void;
+        private _handleKeyChange;
+        private getKeys;
+        private updateFilters;
+        private itemMatchesKey;
+        render(): import("lit").TemplateResult<1>;
+    }
+}
+declare module "components/key-container/index" {
+    import ZnKeyContainer from "components/key-container/key-container.component";
+    export * from "components/key-container/key-container.component";
+    export default ZnKeyContainer;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-key-container': ZnKeyContainer;
+        }
+    }
+}
+declare module "components/animated-button/animated-button.component" {
+    import { type CSSResultGroup } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    import ZnIcon from "components/icon/icon.component";
+    export default class ZnAnimatedButton extends ZincElement {
+        static styles: CSSResultGroup;
+        static dependencies: {
+            'zn-icon': typeof ZnIcon;
+        };
+        private currentState;
+        private errorMessage;
+        /** The text to display in the idle state */
+        idleText: string;
+        /** The text to display in the processing state */
+        processingText: string;
+        /** The text to display in the success state */
+        successText: string;
+        /** The text to display in the failure state */
+        failureText: string;
+        /** The URL to redirect to after successful purchase */
+        redirectUrl: string;
+        /** Delay in milliseconds before redirecting after success (default: 1500ms) */
+        redirectDelay: number;
+        /** Delay in milliseconds before resetting from failure state (default: 2000ms) */
+        failureResetDelay: number;
+        /** Disabled state */
+        disabled: boolean;
+        /** The name of the form control (required for form submission) */
+        name: string;
+        /** The value of the form control */
+        value: string;
+        private resetTimeout?;
+        private redirectTimeout?;
+        disconnectedCallback(): void;
+        private clearTimeouts;
+        /** Programmatically trigger the purchase flow */
+        purchase(): void;
+        /** Set the button to success state manually */
+        setSuccess(): void;
+        /** Set the button to failure state manually with optional error message */
+        setFailure(message?: string): void;
+        /** Reset the button to idle state */
+        reset(): void;
+        private handlePurchase;
+        private scheduleRedirect;
+        private scheduleReset;
+        private handleClick;
+        protected render(): import("lit").TemplateResult<1>;
+    }
+}
+declare module "components/animated-button/index" {
+    import ZnAnimatedButton from "components/animated-button/animated-button.component";
+    export * from "components/animated-button/animated-button.component";
+    export default ZnAnimatedButton;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-animated-button': ZnAnimatedButton;
+        }
+    }
+}
+declare module "components/translation-group/translation-group.component" {
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
+    import ZnButton from "components/button/index";
+    import ZnButtonGroup from "components/button-group/index";
+    import ZnDropdown from "components/dropdown/index";
+    import ZnHeader from "components/header/index";
+    import ZnMenu from "components/menu/index";
+    import ZnPanel from "components/panel/panel.component";
+    /**
+     * @summary A panel-styled container that provides a shared language toggle for multiple zn-translations children.
+     *
+     * @dependency zn-button
+     * @dependency zn-button-group
+     * @dependency zn-dropdown
+     * @dependency zn-menu
+     *
+     * @event zn-language-change - Emitted when the active language changes. Detail: `{ language: string }`.
+     *
+     * @slot - Default slot for `<zn-translations>` elements.
+     * @slot actions - Actions displayed in the panel header alongside language buttons.
+     *
+     * @csspart base - The component's base wrapper.
+     */
+    export default class ZnTranslationGroup extends ZnPanel {
+        static styles: CSSResultGroup;
+        static dependencies: {
+            'zn-button': typeof ZnButton;
+            'zn-button-group': typeof ZnButtonGroup;
+            'zn-dropdown': typeof ZnDropdown;
+            'zn-header': typeof ZnHeader;
+            'zn-menu': typeof ZnMenu;
+        };
+        private readonly _slotController;
+        /** The group label displayed in the panel header. */
+        label: string;
+        /** The available languages for the group. */
+        languages: Record<string, string>;
+        private _activeLanguage;
+        /** Tracks all language codes that have been activated across children. */
+        private _activatedLanguages;
+        protected firstUpdated(_changedProperties: PropertyValues): void;
+        protected updated(changedProperties: PropertyValues): void;
+        private getAllTranslations;
+        /** Sync grouped state, languages, and active language to all children. */
+        private syncChildren;
+        private syncChildLanguages;
+        private handleSlotChange;
+        private switchLanguage;
+        private handleLanguageAdd;
+        render(): import("lit").TemplateResult<1>;
+    }
+}
+declare module "components/translation-group/index" {
+    import ZnTranslationGroup from "components/translation-group/translation-group.component";
+    export * from "components/translation-group/translation-group.component";
+    export default ZnTranslationGroup;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-translation-group': ZnTranslationGroup;
+        }
+    }
+}
+declare module "components/priority-list/priority-list.component" {
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
+    import { FormControlController } from "internal/form";
+    import ZincElement from "internal/zinc-element";
+    import ZnIcon from "components/icon/index";
+    import type { ZincFormControl } from "internal/zinc-element";
+    export interface PriorityItem {
+        key: string;
+        priority: number;
+    }
+    /**
+     * @summary A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop
+     *   and keyboard reordering. Priority values are submitted as form data via hidden inputs.
+     *
+     * @documentation https://zinc.style/components/priority-list
+     * @status experimental
+     * @since 1.0
+     *
+     * @dependency zn-icon
+     *
+     * @slot - The default slot where list items are placed. Each slotted element must have a `value` attribute that
+     *   uniquely identifies the item. The component automatically assigns slot names to project each item into the
+     *   correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).
+     * @slot label - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.
+     * @slot label-tooltip - Used to add text displayed in a tooltip next to the label.
+     * @slot help-text - Text that describes how to use the component. Alternatively, use the `help-text` attribute.
+     *
+     * @event zn-change - Emitted when the order of items changes.
+     * @event zn-reorder - Emitted when items are reordered. Call `getPriorityMap()` on the component to get
+     *   the updated `{ key: string, priority: number }[]` array.
+     *
+     * @csspart form-control - The form control wrapper.
+     * @csspart form-control-label - The label wrapper.
+     * @csspart form-control-input - The input area wrapper.
+     * @csspart form-control-help-text - The help text wrapper.
+     * @csspart list - The list container.
+     * @csspart item - An individual list item row.
+     * @csspart drag-handle - The drag handle icon.
+     * @csspart priority - The priority number badge.
+     * @csspart content - The content area of an item.
+     *
+     * @cssproperty --zn-priority-list-item-gap - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`.
+     * @cssproperty --zn-priority-list-item-padding - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`.
+     * @cssproperty --zn-priority-list-handle-color - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`.
+     * @cssproperty --zn-priority-list-priority-color - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`.
+     */
+    export default class ZnPriorityList extends ZincElement implements ZincFormControl {
+        static dependencies: {
+            'zn-icon': typeof ZnIcon;
+        };
+        static styles: CSSResultGroup;
+        protected readonly formControlController: FormControlController;
+        private readonly hasSlotController;
+        hiddenInputsContainer: HTMLDivElement;
+        /**
+         * The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`
+         * with the priority number as its value.
+         */
+        name: string;
+        /**
+         * The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.
+         * Each entry should match a `value` attribute on a slotted child element.
+         */
+        get value(): string[];
+        set value(val: string[]);
+        private _value;
+        defaultValue: string[];
+        /** The component's label. Required for proper accessibility. */
+        label: string;
+        /** Text that appears in a tooltip next to the label. */
+        labelTooltip: string;
+        /** Help text that describes how to use the component. */
+        helpText: string;
+        /**
+         * Associates the control with a form by id. The form must be in the same document or shadow root.
+         */
+        form: string;
+        /** The size of the list items. */
+        size: 'small' | 'medium' | 'large';
+        /** Whether the priority list is disabled. */
+        disabled: boolean;
+        /** Ensures the form control has a value before allowing submission. */
+        required: boolean;
+        /** The starting priority number. Defaults to 1. */
+        priorityStart: number;
+        /**
+         * When set, the associated form will be submitted with the given action URL whenever items are reordered.
+         * If set to an empty string, the form will be submitted using its existing action.
+         */
+        formAction: string;
+        /**
+         * A comma-separated list of item keys defining the initial display order.
+         * Keys must match the `value` attributes on slotted children.
+         * Any slotted items not listed are appended at the end in DOM order.
+         */
+        order: string;
+        private draggedKey;
+        private isDragging;
+        private dragOverKey;
+        /** Gets the validity state object. */
+        get validity(): ValidityState;
+        /** Gets the validation message. */
+        get validationMessage(): string;
+        connectedCallback(): void;
+        protected firstUpdated(_changedProperties: PropertyValues): void;
+        /**
+         * Initialize item order from slotted children if no explicit value was provided.
+         * If an `order` attribute is set, use it to define the initial order,
+         * appending any slotted items not listed in the order at the end.
+         */
+        private _initializeOrderFromSlot;
+        /**
+         * Gets all direct children with a `value` attribute (excluding those in reserved slots).
+         */
+        private _getSlottedItems;
+        /**
+         * Assigns `slot` attributes to light DOM children based on their `value` attribute,
+         * so they project into the correct named slot in the shadow DOM.
+         */
+        private _assignSlotNames;
+        /**
+         * Returns the priority map: an array of { key, priority } objects.
+         */
+        getPriorityMap(): PriorityItem[];
+        /**
+         * Syncs hidden inputs so form data includes priority values.
+         */
+        private _syncHiddenInputs;
+        /**
+         * Moves an item from one index to another.
+         */
+        private _moveItem;
+        /**
+         * Submits the associated form if a `formaction` attribute is set.
+         */
+        private _submitForm;
+        private _handleDragStart;
+        private _handleDragEnd;
+        private _handleDragOver;
+        private _handleDragLeave;
+        private _handleDrop;
+        private _handleKeyDown;
+        private _handleSlotChange;
+        /** Checks for validity but does not show a validation message. */
+        checkValidity(): boolean;
+        /** Gets the associated form, if one exists. */
+        getForm(): HTMLFormElement | null;
+        /** Checks for validity and shows the browser's validation message if the control is invalid. */
+        reportValidity(): boolean;
+        /** Sets a custom validation message. Pass an empty string to restore validity. */
+        setCustomValidity(_message?: string): void;
+        protected updated(changedProperties: PropertyValues): void;
+        render(): import("lit").TemplateResult<1>;
+    }
+}
+declare module "components/priority-list/index" {
+    import ZnPriorityList from "components/priority-list/priority-list.component";
+    export * from "components/priority-list/priority-list.component";
+    export default ZnPriorityList;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-priority-list': ZnPriorityList;
+        }
+    }
+}
 declare module "events/zn-after-hide" {
     export type ZnAfterHideEvent = CustomEvent<Record<PropertyKey, never>>;
     global {
@@ -6782,6 +7710,46 @@ declare module "events/zn-show" {
         }
     }
 }
+declare module "events/zn-purchase" {
+    export type ZnPurchaseEvent = CustomEvent<{
+        value: string;
+        setSuccess: () => void;
+        setFailure: (message?: string) => void;
+    }>;
+    global {
+        interface GlobalEventHandlersEventMap {
+            'zn-purchase': ZnPurchaseEvent;
+        }
+    }
+}
+declare module "events/zn-redirect" {
+    export type ZnRedirectEvent = CustomEvent<{
+        url: string;
+    }>;
+    global {
+        interface GlobalEventHandlersEventMap {
+            'zn-redirect': ZnRedirectEvent;
+        }
+    }
+}
+declare module "events/zn-language-change" {
+    export type ZnLanguageChangeEvent = CustomEvent<{
+        language: string;
+    }>;
+    global {
+        interface GlobalEventHandlersEventMap {
+            'zn-language-change': ZnLanguageChangeEvent;
+        }
+    }
+}
+declare module "events/zn-reorder" {
+    export type ZnReorderEvent = CustomEvent<Record<PropertyKey, never>>;
+    global {
+        interface GlobalEventHandlersEventMap {
+            'zn-reorder': ZnReorderEvent;
+        }
+    }
+}
 declare module "events/events" {
     export type { ZnAfterHideEvent } from "events/zn-after-hide";
     export type { ZnAfterShowEvent } from "events/zn-after-show";
@@ -6790,6 +7758,11 @@ declare module "events/events" {
     export type { ZnFocusEvent } from "events/zn-focus";
     export type { ZnInputEvent } from "events/zn-input";
     export type { ZnShowEvent } from "events/zn-show";
+    export type { ZnPurchaseEvent } from "events/zn-purchase";
+    export type { ZnRedirectEvent } from "events/zn-redirect";
+    export type { ZnSearchChangeEvent } from "events/zn-search-change";
+    export type { ZnLanguageChangeEvent } from "events/zn-language-change";
+    export type { ZnReorderEvent } from "events/zn-reorder";
 }
 declare module "zinc" {
     export { default as Button } from "components/button/index";
@@ -6819,6 +7792,7 @@ declare module "zinc" {
     export { default as SimpleChart } from "components/simple-chart/index";
     export { default as Header } from "components/header/index";
     export { default as Navbar } from "components/navbar/index";
+    export { default as IconPicker } from "components/icon-picker/index";
     export { default as InlineEdit } from "components/inline-edit/index";
     export { default as Pagination } from "components/pagination/index";
     export { default as VerticalStepper } from "components/vertical-stepper/index";
@@ -6864,6 +7838,7 @@ declare module "zinc" {
     export { default as Slideout } from "components/slideout/index";
     export { default as DataTableFilter } from "components/data-table-filter/index";
     export { default as DataTableSort } from "components/data-table-sort/index";
+    export { default as DataTableSearch } from "components/data-table-search/index";
     export { default as ActionBar } from "components/action-bar/index";
     export { default as ExpandingAction } from "components/expanding-action/index";
     export { default as PageNav } from "components/page-nav/index";
@@ -6878,6 +7853,12 @@ declare module "zinc" {
     export { default as Reveal } from "components/reveal/index";
     export { default as AudioSelect } from "components/audio-select/index";
     export { default as Translations } from "components/translations/index";
+    export { default as Key } from "components/key/index";
+    export { default as KeyContainer } from "components/key-container/index";
+    export { default as AnimatedButton } from "components/animated-button/index";
+    export { default as TranslationGroup } from "components/translation-group/index";
+    export { default as OptGroup } from "components/opt-group/index";
+    export { default as PriorityList } from "components/priority-list/index";
     export { default as ZincElement } from "internal/zinc-element";
     export * from "utilities/on";
     export * from "utilities/query";
@@ -7077,7 +8058,7 @@ declare module "events/zn-sort-change" {
 }
 declare module "events/zn-submit" {
     export type ZnSubmitEvent = CustomEvent<{
-        value: string;
+        value: string | string[];
         element: HTMLElement;
     }>;
     global {