@kubex/zinc 1.1.120 → 1.1.122

package/dist/zn.d.ts

@@ -650,6 +650,8 @@ declare module "components/menu-item/menu-item.component" {
         rel: string;
         gaid: string;
         confirm: boolean;
+        /** Leaves a containing dropdown open when this item is selected, whatever the dropdown's own setting. */
+        keepOpen: boolean;
         /** Removes all padding from the menu item. */
         flush: boolean;
         /** Removes horizontal (left/right) padding only. Ignored if flush is set. */
@@ -1000,6 +1002,8 @@ declare module "components/menu/menu.component" {
      * @cssproperty --example - An example CSS custom property.
      * @cssproperty --zn-menu-max-height - Caps the menu's height and makes it scroll internally.
      *  Unset (`none`) by default, so the menu grows to fit its items unless a consumer sets this.
+     * @cssproperty --zn-menu-min-width - Overrides the menu's resting width. Defaults to
+     *  `--zn-size-spanel`, or 245px for `variant="shell"`.
      */
     export default class ZnMenu extends ZincElement {
         static styles: CSSResultGroup;
@@ -1204,6 +1208,9 @@ declare module "components/button/button.component" {
         plain: boolean;
         /** Disables the hover background, for contexts where the tint doesn't fit. */
         noHover: boolean;
+        /** Renders the button as a pill: fully rounded, sentence case and regular
+         * weight. For label-like triggers such as filter chips. */
+        pill: boolean;
         panelBackground: boolean;
         dropdownCloser: boolean;
         notification: number;
@@ -1839,55 +1846,9 @@ declare module "events/zn-search-change" {
         }
     }
 }
-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";
-    /**
-     * @summary Short summary of the component's intended use.
-     * @documentation https://zinc.style/components/data-table-filter
-     * @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 ZnDataTableFilter extends ZincElement implements ZincFormControl {
-        static styles: CSSResultGroup;
-        private _formController;
-        filters: string;
-        name: string;
-        value: string;
-        get validationMessage(): string;
-        get validity(): ValidityState;
-        checkValidity(): boolean;
-        getForm(): HTMLFormElement | null;
-        reportValidity(): boolean;
-        setCustomValidity(): void;
-        protected firstUpdated(_changedProperties: PropertyValues): void;
-        handleQBClear: () => void;
-        handleQBReset: () => void;
-        handleQBUpdate: () => void;
-        closeSlideout(): void;
-        render(): import("lit-html").TemplateResult<1>;
-    }
-}
-declare module "components/data-table-filter/index" {
-    import ZnDataTableFilter from "components/data-table-filter/data-table-filter.component";
-    export * from "components/data-table-filter/data-table-filter.component";
-    export default ZnDataTableFilter;
-    global {
-        interface HTMLElementTagNameMap {
-            'zn-data-table-filter': ZnDataTableFilter;
-        }
-    }
+declare module "utilities/lit-to-html" {
+    import { type TemplateResult } from "lit";
+    export function litToHTML<T extends HTMLElement>(templateResult: TemplateResult): T | null;
 }
 declare module "components/slash-menu/slash-menu-items" {
     export interface SlashMenuItem {
@@ -2271,6 +2232,7 @@ declare module "components/input/input.component" {
      * @csspart password-toggle-button - The password toggle button.
      * @csspart suffix - The container that wraps the suffix.
      *
+     * @cssproperty --zn-input-box-shadow - Shadow cast by the field; set to `none` inside a panel that draws its own edge.
      * @cssproperty --zn-range-track-height - The height of a range input's track.
      * @cssproperty --zn-range-track-color - The color of a range input's track.
      * @cssproperty --zn-range-thumb-size - The diameter of a range input's thumb.
@@ -2509,53 +2471,6 @@ declare module "components/input/index" {
         }
     }
 }
-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";
-    export const colors: string[];
-    export const colorDataProvider: LocalDataProvider<DataProviderOption>;
-}
-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";
-    /**
-     * Providers are what the data select component uses to get data. They are
-     * responsible for defining the data.
-     */
-    export interface LocalDataProvider<T> {
-        getName: string;
-        getData: T[];
-    }
-    export interface RemoteDataProvider<T> {
-        getName: string;
-        getData: () => Promise<T[]>;
-    }
-    export interface DataProviderOption {
-        key: string;
-        value: string;
-        prefix?: string | HTMLTemplateResult;
-    }
-    export const emptyDataProvider: LocalDataProvider<DataProviderOption>;
-    export * from "components/data-select/providers/country-data-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";
-    export * from "components/data-select/providers/us-state-data-provider";
-}
 declare module "components/option/option.component" {
     import { type CSSResultGroup } from 'lit';
     import ZincElement from "internal/zinc-element";
@@ -3105,129 +3020,6 @@ declare module "components/select/index" {
         }
     }
 }
-declare module "components/data-select/data-select.component" {
-    import { type DataProviderOption, type LocalDataProvider } from "components/data-select/providers/provider";
-    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";
-    /**
-     * @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-select
-     * @dependency zn-option
-     *
-     * @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.
-     *
-     * @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.
-     *
-     * @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;
-        /** The name of the select. Used for form submission. */
-        name: string;
-        /** The value of the select. Used for form submission. When `multiple` is enabled, this is an array of strings. */
-        value: string | string[];
-        /** The default value of the form control. Primarily used for resetting the form control. */
-        defaultValue: string | string[];
-        /** The provider of the select. */
-        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. */
-        filter: string[];
-        /** The selects size. */
-        size: 'small' | 'medium' | 'large';
-        /** Should we show the clear button */
-        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. */
-        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 preferred placement of the selects menu. Note that the actual placement may vary as needed to keep the listbox
-         * inside the viewport.
-         */
-        placement: 'top' | 'bottom';
-        /** The selects help text. If you need to display HTML, use the `help-text` slot instead. */
-        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 readonly selectObserver;
-        get validationMessage(): string;
-        get validity(): ValidityState;
-        constructor();
-        connectedCallback(): void;
-        disconnectedCallback(): void;
-        protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
-        protected updated(_changedProperties: PropertyValues): Promise<void>;
-        checkValidity(): boolean;
-        getForm(): HTMLFormElement | null;
-        reportValidity(): boolean;
-        setCustomValidity(message: string): void;
-        closeOnTab: (e: KeyboardEvent) => void;
-        handleValueChange(): Promise<void>;
-        handleInput: (e: Event) => void;
-        handleClear: () => void;
-        getLocalProvider(name: string): LocalDataProvider<DataProviderOption>;
-        blur: () => void;
-        protected render(): import("lit-html").TemplateResult<1>;
-        private _updatePrefix;
-        private _updateIconEmptyState;
-        private getPlaceholder;
-        private _observeSelectDisabled;
-        private _syncDisabledState;
-        private _normalizeValue;
-    }
-}
-declare module "components/data-select/index" {
-    import ZnDataSelect from "components/data-select/data-select.component";
-    export * from "components/data-select/data-select.component";
-    export default ZnDataSelect;
-    global {
-        interface HTMLElementTagNameMap {
-            'zn-data-select': ZnDataSelect;
-        }
-    }
-}
-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 {
@@ -3278,6 +3070,7 @@ declare module "components/datepicker/datepicker.component" {
      *   - yyyy/MM/dd (2024/12/31)
      *
      * @cssproperty --zn-input-* - Inherited input component CSS custom properties.
+     * @cssproperty --zn-datepicker-inline-border-color - Border colour of the calendar in `inline` mode.
      */
     export default class ZnDatepicker extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
@@ -3324,6 +3117,8 @@ declare module "components/datepicker/datepicker.component" {
          */
         form: string;
         flush: boolean;
+        /** Renders the calendar in place instead of a popup, hiding the text input. */
+        inline: boolean;
         /** Makes the input a required field. */
         required: boolean;
         /** Adds a clear button to the calendar for removing a selected date. **/
@@ -3408,6 +3203,7 @@ declare module "components/datepicker/datepicker.component" {
          * a document-level calendar would render behind it and be inert, so we mount inside that element.
          */
         private getCalendarContainer;
+        private adoptCalendarStyles;
         /** Finds the closest `<dialog>` or popover ancestor, crossing shadow DOM boundaries. */
         private findTopLayerAncestor;
         private handleInput;
@@ -3505,6 +3301,9 @@ declare module "components/query-builder/query-builder.component" {
         Lt = "lt",
         Lte = "lte"
     }
+    export const operatorText: {
+        [key in QueryBuilderOperators]: string;
+    };
     export interface CreatedRule {
         id: string;
         name: string;
@@ -3587,42 +3386,311 @@ declare module "components/query-builder/index" {
         }
     }
 }
-declare module "components/data-table-search/data-table-search.component" {
-    import { type CSSResultGroup, type PropertyValues } from 'lit';
+declare module "components/data-table-filter/data-table-filter.component" {
+    import { type CSSResultGroup, nothing, type PropertyValues } from 'lit';
+    import { type QueryBuilderData } from "components/query-builder/index";
     import ZincElement, { type ZincFormControl } from "internal/zinc-element";
+    import ZnButton from "components/button/index";
+    import ZnDatepicker from "components/datepicker/index";
+    import ZnDropdown from "components/dropdown/index";
     import ZnInput from "components/input/index";
+    import ZnMenu from "components/menu/index";
+    import ZnMenuItem from "components/menu-item/index";
     /**
-     * @summary A search component for data tables.
-     * @documentation https://zinc.style/components/data-table-search
+     * @summary An inline filter bar for data tables. Each active filter is a pill whose dropdown sets its value.
+     * @documentation https://zinc.style/components/data-table-filter
      * @status experimental
      * @since 1.0
      *
+     * @dependency zn-button
+     * @dependency zn-datepicker
+     * @dependency zn-dropdown
      * @dependency zn-input
+     * @dependency zn-menu
+     * @dependency zn-menu-item
      *
-     * @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).
+     * @event zn-filter-change - Emitted when the active filters change. Read the encoded query off `value`.
      */
-    export default class ZnDataTableSearch extends ZincElement implements ZincFormControl {
+    export default class ZnDataTableFilter extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
         static dependencies: {
+            'zn-button': typeof ZnButton;
+            'zn-datepicker': typeof ZnDatepicker;
+            'zn-dropdown': typeof ZnDropdown;
             'zn-input': typeof ZnInput;
+            'zn-menu': typeof ZnMenu;
+            'zn-menu-item': typeof ZnMenuItem;
         };
         private _formController;
-        private _searchTimeout?;
+        private _textTimeout?;
+        private _pendingOpen?;
+        filters: QueryBuilderData;
         name: string;
         value: string;
-        placeholder: string;
-        helpText: string;
+        /** Filter keys to show a pill for before the user adds any. */
+        defaultFilters: string;
+        /** Typeahead values per filter key. `zn-data-table` fills this from the rows it has loaded. */
+        suggestions: Record<string, string[]>;
+        private _active;
+        private _typing;
+        private _optionQuery;
+        get validationMessage(): string;
+        get validity(): ValidityState;
+        checkValidity(): boolean;
+        getForm(): HTMLFormElement | null;
+        reportValidity(): boolean;
+        setCustomValidity(): void;
+        protected firstUpdated(_changedProperties: PropertyValues): void;
+        protected updated(changed: PropertyValues): void;
+        protected willUpdate(changed: PropertyValues): void;
+        disconnectedCallback(): void;
+        /** Number of filters with a value set. */
+        get activeCount(): number;
+        /** Removes every active filter. */
+        clear(): void;
+        private definition;
+        private operatorsFor;
+        private comparatorFor;
+        private operatorLabel;
+        private isMultiple;
+        private optionsFor;
+        private addFilter;
+        private removeFilter;
+        private setValue;
+        private setComparator;
+        private toggleOption;
+        private selectedValues;
+        private emitChange;
+        private handleDateInput;
+        private serializeDate;
+        private handleTextInput;
+        private suggestionsFor;
+        private applySuggestion;
+        private humanize;
+        private pillLabel;
+        private renderOperators;
+        private renderPill;
+        private isDateFilter;
+        private renderValueInput;
+        private handleOptionSearch;
+        private renderOptionSearch;
+        private renderOptionItems;
+        private renderAddFilter;
+        render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    }
+}
+declare module "components/data-table-filter/index" {
+    import ZnDataTableFilter from "components/data-table-filter/data-table-filter.component";
+    export * from "components/data-table-filter/data-table-filter.component";
+    export default ZnDataTableFilter;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-data-table-filter': ZnDataTableFilter;
+        }
+    }
+}
+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";
+    export const colors: string[];
+    export const colorDataProvider: LocalDataProvider<DataProviderOption>;
+}
+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";
+    /**
+     * Providers are what the data select component uses to get data. They are
+     * responsible for defining the data.
+     */
+    export interface LocalDataProvider<T> {
+        getName: string;
+        getData: T[];
+    }
+    export interface RemoteDataProvider<T> {
+        getName: string;
+        getData: () => Promise<T[]>;
+    }
+    export interface DataProviderOption {
+        key: string;
+        value: string;
+        prefix?: string | HTMLTemplateResult;
+    }
+    export const emptyDataProvider: LocalDataProvider<DataProviderOption>;
+    export * from "components/data-select/providers/country-data-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";
+    export * from "components/data-select/providers/us-state-data-provider";
+}
+declare module "components/data-select/data-select.component" {
+    import { type DataProviderOption, type LocalDataProvider } from "components/data-select/providers/provider";
+    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";
+    /**
+     * @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-select
+     * @dependency zn-option
+     *
+     * @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.
+     *
+     * @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.
+     *
+     * @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;
+        /** The name of the select. Used for form submission. */
+        name: string;
+        /** The value of the select. Used for form submission. When `multiple` is enabled, this is an array of strings. */
+        value: string | string[];
+        /** The default value of the form control. Primarily used for resetting the form control. */
+        defaultValue: string | string[];
+        /** The provider of the select. */
+        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. */
+        filter: string[];
+        /** The selects size. */
+        size: 'small' | 'medium' | 'large';
+        /** Should we show the clear button */
+        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. */
+        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 preferred placement of the selects menu. Note that the actual placement may vary as needed to keep the listbox
+         * inside the viewport.
+         */
+        placement: 'top' | 'bottom';
+        /** The selects help text. If you need to display HTML, use the `help-text` slot instead. */
+        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 readonly selectObserver;
+        get validationMessage(): string;
+        get validity(): ValidityState;
+        constructor();
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
+        protected updated(_changedProperties: PropertyValues): Promise<void>;
+        checkValidity(): boolean;
+        getForm(): HTMLFormElement | null;
+        reportValidity(): boolean;
+        setCustomValidity(message: string): void;
+        closeOnTab: (e: KeyboardEvent) => void;
+        handleValueChange(): Promise<void>;
+        handleInput: (e: Event) => void;
+        handleClear: () => void;
+        getLocalProvider(name: string): LocalDataProvider<DataProviderOption>;
+        blur: () => void;
+        protected render(): import("lit-html").TemplateResult<1>;
+        private _updatePrefix;
+        private _updateIconEmptyState;
+        private getPlaceholder;
+        private _observeSelectDisabled;
+        private _syncDisabledState;
+        private _normalizeValue;
+    }
+}
+declare module "components/data-select/index" {
+    import ZnDataSelect from "components/data-select/data-select.component";
+    export * from "components/data-select/data-select.component";
+    export default ZnDataSelect;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-data-select': ZnDataSelect;
+        }
+    }
+}
+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;
@@ -3760,6 +3828,58 @@ declare module "components/hover-container/index" {
         }
     }
 }
+declare module "components/panel/panel.component" {
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    /**
+     * @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 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.
+     * @csspart header - The header region, when a caption or actions are given.
+     * @csspart header-content - The padded row inside the header, forwarded from zn-header.
+     * @csspart footer - The footer region, when the footer slot is filled.
+     *
+     * @cssproperty --zn-panel-basis - The flex-basis of the panel. Can be set using the basis-px attribute.
+     * @cssproperty --zn-panel-header-padding - Padding around the header row. Defaults to `--zn-base-gap`.
+     * @cssproperty --zn-panel-footer-padding - Padding around the footer row.
+     */
+    export default class ZnPanel extends ZincElement {
+        static styles: CSSResultGroup;
+        private readonly hasSlotController;
+        basis: number;
+        caption: string;
+        icon: string;
+        tabbed: boolean;
+        headerBorderless: boolean;
+        cosmic: boolean;
+        flush: boolean;
+        flushX: boolean;
+        flushY: boolean;
+        flushFooter: boolean;
+        transparent: boolean;
+        shadow: boolean;
+        protected firstUpdated(_changedProperties: PropertyValues): void;
+        connectedCallback(): void;
+        protected render(): unknown;
+    }
+}
+declare module "components/panel/index" {
+    import ZnPanel from "components/panel/panel.component";
+    export * from "components/panel/panel.component";
+    export default ZnPanel;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-panel': ZnPanel;
+        }
+    }
+}
 declare module "components/skeleton/skeleton.component" {
     import ZincElement from "internal/zinc-element";
     import type { CSSResultGroup } from "lit";
@@ -3833,7 +3953,7 @@ declare module "components/style/index" {
     }
 }
 declare module "components/data-table/data-table.component" {
-    import { type CSSResultGroup, type TemplateResult } from 'lit';
+    import { type CSSResultGroup, type PropertyValues, 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";
@@ -3848,6 +3968,7 @@ declare module "components/data-table/data-table.component" {
     import ZnHoverContainer from "components/hover-container/index";
     import ZnMenu from "components/menu/index";
     import ZnMenuItem from "components/menu-item/index";
+    import ZnPanel from "components/panel/index";
     import ZnSkeleton from "components/skeleton/index";
     import ZnStyle from "components/style/index";
     interface Cell {
@@ -3870,6 +3991,10 @@ declare module "components/data-table/data-table.component" {
         copyable?: boolean;
         title?: string;
     }
+    interface RowGroup {
+        label: string;
+        rows: Row[];
+    }
     interface Row {
         id: string;
         uri?: string;
@@ -3941,19 +4066,20 @@ declare module "components/data-table/data-table.component" {
      * @dependency zn-dropdown
      * @dependency zn-menu
      * @dependency zn-menu-item
+     * @dependency zn-panel
      * @dependency zn-button-group
      * @dependency zn-confirm
      * @dependency zn-skeleton
      * @dependency zn-data-table-search
      *
      * @slot - The default 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 search - Slot for search component, in the header's right-hand group.
+     * @slot sort - Slot for sort component, in the header's right-hand group.
+     * @slot filter - Slot for filter component, in the header's right-hand group.
+     * @slot filter-top - Slot for a top-level filter component, rendered above the table's panel.
+     * @slot delete-action - Slot for delete action button, shown beside the caption once rows are selected.
+     * @slot modify-action - Slot for modify action button, shown beside the caption once rows are selected.
+     * @slot create-action - Slot for create action button, at the end of the header's right-hand group.
      * @slot inputs - Slot for additional input controls.
      * @slot empty-state - Slot for custom empty state.
      * @slot no-results - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.
@@ -3973,6 +4099,7 @@ declare module "components/data-table/data-table.component" {
             'zn-dropdown': typeof ZnDropdown;
             'zn-menu': typeof ZnMenu;
             'zn-menu-item': typeof ZnMenuItem;
+            'zn-panel': typeof ZnPanel;
             'zn-button-group': typeof ZnButtonGroup;
             'zn-confirm': typeof ZnConfirm;
             'zn-skeleton': typeof ZnSkeleton;
@@ -3995,6 +4122,8 @@ declare module "components/data-table/data-table.component" {
         unsortableHeaders: string;
         unsortable: boolean;
         hidePagination: boolean;
+        hideColumnSelect: boolean;
+        hideRefresh: boolean;
         standalone: boolean;
         caption: string;
         emptyStateCaption: string;
@@ -4014,7 +4143,9 @@ declare module "components/data-table/data-table.component" {
         private readonly resizeObserver;
         private page;
         private totalPages;
+        private _totalRows;
         private _rows;
+        private _suggestionsKey;
         private numberOfRowsSelected;
         private selectedRows;
         private tableContainer;
@@ -4024,22 +4155,43 @@ declare module "components/data-table/data-table.component" {
         private _expandedRows;
         private _hiddenCells;
         private _secondaryHeaders;
+        private _deselectedColumns;
+        private _filtersOpen;
+        private _columnDefaultsApplied;
         private _formatTemplates;
         requestParams: Record<string, any>;
         refresh(): void;
+        private visibleHeaders;
+        private selectableHeaders;
+        private isColumnVisible;
+        private applyColumnDefaults;
+        private toggleColumn;
         render(): TemplateResult<1>;
         connectedCallback(): void;
+        protected updated(changed: PropertyValues): void;
+        private publishFilterSuggestions;
         private getTemplate;
         disconnectedCallback(): void;
+        filterClearListener: (e: Event) => void;
         filterChangeListener: (e: ZnFilterChangeEvent) => void;
         searchChangeListener: (e: ZnSearchChangeEvent) => void;
         emptyState(): TemplateResult<1>;
         renderTable(data: Response): TemplateResult<1>;
         private renderErrorAlert;
         humanize(str: string): string;
-        renderTableData(data: any, error?: ResponseError): TemplateResult<1>;
+        renderTableData(groups: RowGroup[], error?: ResponseError): TemplateResult<1>;
         getTableHeader(): TemplateResult<1>;
-        getTableFooter(): TemplateResult<1>;
+        private getHeaderControls;
+        private hasRows;
+        private getFilterToggle;
+        private toggleFilters;
+        private appliedFilterCount;
+        private hasColumnSelect;
+        private hasRefresh;
+        private getColumnSelect;
+        private getRefreshButton;
+        private handleColumnSelect;
+        getTableFooter(slot?: string): TemplateResult<1> | null;
         getRowsSelected(): TemplateResult<1> | null;
         getRowsPerPage(): TemplateResult<1> | null;
         private getPageRange;
@@ -5557,53 +5709,6 @@ declare module "components/timer/index" {
         }
     }
 }
-declare module "components/panel/panel.component" {
-    import { type CSSResultGroup, type PropertyValues } from 'lit';
-    import ZincElement from "internal/zinc-element";
-    /**
-     * @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 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 --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;
-        private readonly hasSlotController;
-        basis: number;
-        caption: string;
-        icon: string;
-        tabbed: boolean;
-        headerBorderless: boolean;
-        cosmic: boolean;
-        flush: boolean;
-        flushX: boolean;
-        flushY: boolean;
-        flushFooter: boolean;
-        transparent: boolean;
-        shadow: boolean;
-        protected firstUpdated(_changedProperties: PropertyValues): void;
-        connectedCallback(): void;
-        protected render(): unknown;
-    }
-}
-declare module "components/panel/index" {
-    import ZnPanel from "components/panel/panel.component";
-    export * from "components/panel/panel.component";
-    export default ZnPanel;
-    global {
-        interface HTMLElementTagNameMap {
-            'zn-panel': ZnPanel;
-        }
-    }
-}
 declare module "components/table/table.component" {
     import { type CSSResultGroup } from 'lit';
     import ZincElement from "internal/zinc-element";
@@ -9345,8 +9450,8 @@ declare module "components/translation-group/translation-group.component" {
      * - `Partial` — only some children do
      * - `English` — none do, so all of them fall back to the English text
      *
-     * `Empty` replaces the last of those for English itself, which has nothing to fall back to. English is the source
-     * rather than a translation, so it is also left out of the `n of m translated` count beside the label.
+     * `Empty` replaces the last of those for English itself, which has nothing to fall back to. English counts towards
+     * the `n of m` beside the label like any other language.
      *
      * The children own their values; this component only chooses which language is shown and reports on what they hold.
      * It reads them back on every child `zn-change`, so the chips and the count follow an edit as it is typed.