@kubex/zinc 1.1.97 → 1.1.99

package/dist/zn.d.ts

@@ -124,6 +124,16 @@ declare module "internal/form-navigation" {
      */
     export function getFormNavigationController(form: HTMLFormElement): FormNavigationController;
 }
+declare module "utilities/query" {
+    /**
+     * Builds a valid `#id` selector. Ids can legally contain characters that CSS treats as syntax (`&`, `.`, `:`,
+     * a leading digit), so they must be escaped before being used in `querySelector`/`matches`.
+     */
+    export function idSelector(id: string): string;
+    export function deepQuery<T extends Element = Element>(selector: string, root?: Document | ShadowRoot | Element): T | null;
+    export function deepQueryAll<T extends Element = Element>(selector: string, root?: Document | ShadowRoot | Element, out?: T[]): T[];
+    export function deepQuerySelectorAll(selector: string, element: Element, stopSelector: string): Element[];
+}
 declare module "internal/storage" {
     export class Store {
         storage: Storage;
@@ -687,11 +697,6 @@ declare module "events/zn-select" {
         }
     }
 }
-declare module "utilities/query" {
-    export function deepQuery<T extends Element = Element>(selector: string, root?: Document | ShadowRoot | Element): T | null;
-    export function deepQueryAll<T extends Element = Element>(selector: string, root?: Document | ShadowRoot | Element, out?: T[]): T[];
-    export function deepQuerySelectorAll(selector: string, element: Element, stopSelector: string): Element[];
-}
 declare module "internal/offset" {
     /**
      * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
@@ -1215,6 +1220,8 @@ declare module "components/button/button.component" {
         dataTarget: 'modal' | 'slide' | string;
         rel: string;
         tooltip: string;
+        /** Accessible name for the button. Icon-only buttons fall back to `tooltip`. */
+        label: string;
         autoClick: boolean;
         autoClickDelay: number;
         loadingText: string;
@@ -1409,13 +1416,19 @@ declare module "components/collapsible/collapsible.component" {
         storeTtl: number;
         flush: boolean;
         numberOfItems: number;
+        private animating;
+        private animatingTimer?;
         protected _store: Store;
         private readonly hasSlotController;
         private readonly observer;
         private showArrow;
         connectedCallback(): Promise<void>;
+        disconnectedCallback(): void;
         handleCaptionToggle: (e: ZnInputEvent) => void;
         protected updated(changedProperties: PropertyValues): void;
+        private startAnimating;
+        private stopAnimating;
+        private handleTransitionEnd;
         handleCollapse: (e: MouseEvent) => void;
         recalculateNumberOfItems: () => void;
         render(): import("lit-html").TemplateResult<1>;
@@ -1716,11 +1729,16 @@ declare module "components/well/well.component" {
      * @since 1.0
      *
      * @slot - The default slot.
+     * @slot action - Content displayed on the right hand side of the well.
      */
     export default class ZnWell extends ZincElement {
         static styles: CSSResultGroup;
         icon: string;
         inline: boolean;
+        /** Renders the default slot inside a `pre` element, preserving whitespace using a monospace font. */
+        pre: boolean;
+        /** Breaks long unbroken words, so they wrap instead of forcing the well wider. */
+        breakLong: boolean;
         private readonly hasSlotController;
         render(): import("lit-html").TemplateResult<1>;
     }
@@ -4477,7 +4495,7 @@ declare module "components/channel-tile/index" {
 }
 declare module "components/chart/builders" {
     import type { EChartsOption } from 'echarts';
-    export type ChartType = 'area' | 'bar' | 'line' | 'sankey';
+    export type ChartType = 'area' | 'bar' | 'donut' | 'funnel' | 'gauge' | 'heatmap' | 'line' | 'pie' | 'radar' | 'sankey' | 'scatter' | 'sunburst' | 'treemap';
     export interface SeriesItem {
         name: string;
         data: any[];
@@ -4488,6 +4506,18 @@ declare module "components/chart/builders" {
         target: string;
         value: number;
     }
+    export interface PieDataItem {
+        name?: string;
+        value: number;
+        color?: string;
+        itemStyle?: Record<string, unknown>;
+    }
+    export interface RadarIndicator {
+        name: string;
+        max?: number;
+        min?: number;
+        color?: string;
+    }
     export interface BuilderProps {
         type: ChartType;
         data: SeriesItem[];
@@ -4503,10 +4533,25 @@ declare module "components/chart/builders" {
         scale?: boolean | number;
         textColor?: string;
         borderColor?: string;
+        innerRadius?: number | string;
+        outerRadius?: number | string;
+        showLabels?: boolean;
+        yCategories?: string[];
+        indicators?: RadarIndicator[];
+        minValue?: number;
+        maxValue?: number;
     }
     export function buildBarOption(props: BuilderProps): EChartsOption;
     export function buildLineOption(props: BuilderProps): EChartsOption;
     export function buildAreaOption(props: BuilderProps): EChartsOption;
+    export function buildScatterOption(props: BuilderProps): EChartsOption;
+    export function buildPieOption(props: BuilderProps): EChartsOption;
+    export function buildRadarOption(props: BuilderProps): EChartsOption;
+    export function buildGaugeOption(props: BuilderProps): EChartsOption;
+    export function buildFunnelOption(props: BuilderProps): EChartsOption;
+    export function buildHeatmapOption(props: BuilderProps): EChartsOption;
+    export function buildTreemapOption(props: BuilderProps): EChartsOption;
+    export function buildSunburstOption(props: BuilderProps): EChartsOption;
     export function buildSankeyOption(props: BuilderProps): EChartsOption;
 }
 declare module "components/chart/echarts-loader" {
@@ -4515,7 +4560,7 @@ declare module "components/chart/echarts-loader" {
     export function loadECharts(): Promise<EChartsModule>;
 }
 declare module "components/chart/chart.component" {
-    import { type ChartType, type SeriesItem } from "components/chart/builders";
+    import { type ChartType, type RadarIndicator, type SeriesItem } from "components/chart/builders";
     import { type CSSResultGroup, type PropertyValues } from 'lit';
     import ZincElement from "internal/zinc-element";
     /**
@@ -4531,6 +4576,8 @@ declare module "components/chart/chart.component" {
         type: ChartType;
         data: SeriesItem[];
         categories: string[];
+        yCategories: string[];
+        indicators: RadarIndicator[];
         xAxis: 'datetime' | 'category' | 'numeric';
         datapointSize: number;
         stacked: boolean;
@@ -4543,6 +4590,11 @@ declare module "components/chart/chart.component" {
         colors?: string[];
         syncGroup?: string;
         smooth: boolean;
+        innerRadius?: number | string;
+        outerRadius?: number | string;
+        showLabels?: boolean;
+        minValue?: number;
+        maxValue?: number;
         scale: boolean | number;
         private chart?;
         private echarts?;
@@ -5109,6 +5161,9 @@ declare module "components/icon-picker/brand-icons" {
 declare module "components/icon-picker/line-icons" {
     export const lineIcons: string[];
 }
+declare module "components/icon-picker/lucide-icons" {
+    export const lucideIcons: string[];
+}
 declare module "components/icon-picker/material-icons" {
     export const materialIcons: string[];
     export const material_outlinedIcons: string[];
@@ -5931,16 +5986,19 @@ declare module "components/scroll-container/scroll-container.component" {
      *
      * @csspart base - The component's base wrapper.
      *
-     * @cssproperty --example - An example CSS custom property.
+     * @cssproperty --zn-scroll-container-height - The height and maximum height of the scroll container.
      */
     export default class ZnScrollContainer extends ZincElement {
         static styles: CSSResultGroup;
+        /** The height and maximum height of the scroll container. */
+        height: string;
         startScrolled: boolean;
         private container;
         private footer;
         private _footerObserved;
         private _footerHeightFrame;
         protected firstUpdated(_changedProperties: PropertyValues): void;
+        protected updated(changedProperties: PropertyValues): void;
         disconnectedCallback(): void;
         scrollEnd(): void;
         private _syncFooterHeight;
@@ -6972,10 +7030,20 @@ declare module "components/editor/index" {
         }
     }
 }
+declare module "internal/selection-card" {
+    /** Where a selection card renders its image, relative to the card's text. */
+    export type SelectionCardImagePosition = 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Where a selection card renders its radio/checkbox indicator. `start` keeps the standard
+     * inline position; `none` hides the indicator so the card itself shows the selected state.
+     */
+    export type SelectionCardControlPosition = 'start' | 'none' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+}
 declare module "components/checkbox/checkbox.component" {
     import { type CSSResultGroup } from 'lit';
     import ZincElement from "internal/zinc-element";
     import ZnIcon from "components/icon/index";
+    import type { SelectionCardControlPosition, SelectionCardImagePosition } from "internal/selection-card";
     import type { ZincFormControl } from "internal/zinc-element";
     type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'transparent';
     /**
@@ -6987,6 +7055,7 @@ declare module "components/checkbox/checkbox.component" {
      * @dependency zn-icon
      *
      * @slot - The checkbox's label.
+     * @slot image - Replaces the built-in image used by contained checkboxes.
      * @slot description - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.
      * @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.
      *
@@ -7003,9 +7072,22 @@ declare module "components/checkbox/checkbox.component" {
      * @csspart checked-icon - The checked icon, an `<zn-icon>` element.
      * @csspart unchecked-icon - The unchecked icon, an `<zn-icon>` element.
      * @csspart indeterminate-icon - The indeterminate icon, an `<zn-icon>` element.
+     * @csspart image-container - The wrapper around the built-in image or image slot.
+     * @csspart image - The built-in image.
+     * @csspart card-title - The title inside a selection card.
      * @csspart label - The container that wraps the checkbox's label.
      * @csspart description - The container that wraps the checkbox's description.
      * @csspart selected-content - The container that wraps optional content that appears when a checkbox is checked.
+     *
+     * @cssproperty --zn-selection-card-image-width - Width of the built-in card image.
+     * @cssproperty --zn-selection-card-image-height - Height of the built-in card image.
+     * @cssproperty --zn-selection-card-min-height - Minimum height of a contained checkbox with an image.
+     * @cssproperty --zn-selection-card-content-min-width - Width the card text keeps before it wraps below the image.
+     * @cssproperty --zn-selection-card-title-font-size - Font size of a selection card title.
+     * @cssproperty --zn-selection-card-padding - Equal inset around the contents of a selection card.
+     * @cssproperty --zn-selection-card-gap - Space between the image, title, and indicator gutter.
+     * @cssproperty --zn-selection-card-control-offset - Distance between a positioned control and the card edge.
+     * @cssproperty --zn-selection-card-border-radius - Corner radius of a contained container.
      */
     export default class ZnCheckbox extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
@@ -7021,6 +7103,8 @@ declare module "components/checkbox/checkbox.component" {
         name: string;
         /** The current value of the checkbox, submitted as a name/value pair with form data. */
         value: string;
+        /** Title rendered inside the card. The default slot takes precedence when provided. */
+        cardTitle: string;
         /** The unchecked value of the checkbox, submitted as a name/value pair with form data. */
         uncheckedValue: string;
         /** The checkbox's size. */
@@ -7036,6 +7120,19 @@ declare module "components/checkbox/checkbox.component" {
         indeterminate: boolean;
         /** Draws a container around the checkbox. */
         contained: boolean;
+        /** Squares off the corners of the container drawn by `contained`, which is rounded by default. */
+        square: boolean;
+        /** URL for the image shown in a contained checkbox. */
+        src: string;
+        /** Accessible text for the built-in image. Leave empty when the image is decorative. */
+        imageAlt: string;
+        /** Places the image above, beside, or below the checkbox's text. Requires `contained`. */
+        imagePosition: SelectionCardImagePosition;
+        /**
+         * Places the checkbox indicator within a contained card. Use `none` to hide the indicator so the card itself
+         * shows the selected state. Requires `contained`.
+         */
+        controlPosition: SelectionCardControlPosition;
         /** Removes a container around the checkbox. */
         borderless: boolean;
         /** Applies styles relevant to checkboxes in a horizontal layout. */
@@ -7268,6 +7365,7 @@ declare module "components/radio/radio.component" {
     import { type CSSResultGroup } from 'lit';
     import ZincElement from "internal/zinc-element";
     import ZnIcon from "components/icon/index";
+    import type { SelectionCardControlPosition, SelectionCardImagePosition } from "internal/selection-card";
     import type { ZincFormControl } from "internal/zinc-element";
     /**
      * @summary Short summary of the component's intended use.
@@ -7278,6 +7376,7 @@ declare module "components/radio/radio.component" {
      * @dependency zn-icon
      *
      * @slot - The radio's label.
+     * @slot image - Replaces the built-in image used by contained radios.
      * @slot description - A description of the radio's label. Serves as help text for a radio item. Alternatively, you can use the `description` attribute.
      * @slot selected-content - Use to nest rich content (like an input) inside a selected radio item. Use only with the contained style.
      *
@@ -7291,9 +7390,22 @@ declare module "components/radio/radio.component" {
      * @csspart control - The square container that wraps the radio's checked state.
      * @csspart control--checked - Matches the control part when the radio is checked.
      * @csspart checked-icon - The checked icon, an `<zn-icon>` element.
+     * @csspart image-container - The wrapper around the built-in image or image slot.
+     * @csspart image - The built-in image.
+     * @csspart card-title - The title inside a selection card.
      * @csspart label - The container that wraps the radio's label.
      * @csspart description - The container that wraps the radio's description.
      * @csspart selected-content - The container that wraps optional content that appears when a radio is checked.
+     *
+     * @cssproperty --zn-selection-card-image-width - Width of the built-in card image.
+     * @cssproperty --zn-selection-card-image-height - Height of the built-in card image.
+     * @cssproperty --zn-selection-card-min-height - Minimum height of a contained radio with an image.
+     * @cssproperty --zn-selection-card-content-min-width - Width the card text keeps before it wraps below the image.
+     * @cssproperty --zn-selection-card-title-font-size - Font size of a selection card title.
+     * @cssproperty --zn-selection-card-padding - Equal inset around the contents of a selection card.
+     * @cssproperty --zn-selection-card-gap - Space between the image, title, and indicator gutter.
+     * @cssproperty --zn-selection-card-control-offset - Distance between a positioned control and the card edge.
+     * @cssproperty --zn-selection-card-border-radius - Corner radius of a contained container.
      */
     export default class ZnRadio extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
@@ -7309,6 +7421,8 @@ declare module "components/radio/radio.component" {
         name: string;
         /** The current value of the radio, submitted as a name/value pair with form data. */
         value: string;
+        /** Title rendered inside the card. The default slot takes precedence when provided. */
+        cardTitle: string;
         /** The radio's size. */
         size: 'small' | 'medium' | 'large';
         /** Disables the radio. */
@@ -7317,6 +7431,19 @@ declare module "components/radio/radio.component" {
         checked: boolean;
         /** Draws a container around the radio. */
         contained: boolean;
+        /** Squares off the corners of the container drawn by `contained`, which is rounded by default. */
+        square: boolean;
+        /** URL for the image shown in a contained radio. */
+        src: string;
+        /** Accessible text for the built-in image. Leave empty when the image is decorative. */
+        imageAlt: string;
+        /** Places the image above, beside, or below the radio's text. Requires `contained`. */
+        imagePosition: SelectionCardImagePosition;
+        /**
+         * Places the radio indicator within a contained card. Use `none` to hide the indicator so the card itself
+         * shows the selected state. Requires `contained`.
+         */
+        controlPosition: SelectionCardControlPosition;
         /** Applies styles relevant to radios in a horizontal layout. */
         horizontal: boolean;
         /** The default value of the form control. Primarily used for resetting the form control. */
@@ -7482,7 +7609,7 @@ declare module "components/radio-group/radio-group.component" {
      *
      * @csspart base - The component's base wrapper.
      *
-     * @cssproperty --example - An example CSS custom property.
+     * @cssproperty --zn-radio-group-column-width - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set.
      */
     export default class ZnRadioGroup extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
@@ -7509,10 +7636,17 @@ declare module "components/radio-group/radio-group.component" {
         value: string;
         /** The radio group's size. This size will be applied to all child radios */
         size: 'small' | 'medium' | 'large';
-        /** The checkbox group's orientation. Changes the group's layout from the default (vertical) to horizontal. */
+        /** The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal. */
         horizontal: boolean;
-        /** The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes. */
+        /** The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios. */
         contained: boolean;
+        /** Squares off the corners of every contained radio in the group, which are rounded by default. */
+        square: boolean;
+        /**
+         * Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from
+         * `--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.
+         */
+        wrap: 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
@@ -7857,6 +7991,8 @@ declare module "components/checkbox-group/checkbox-group.component" {
      * @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.
+     *
+     * @cssproperty --zn-checkbox-group-column-width - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set.
      */
     export default class ZnCheckboxGroup extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
@@ -7886,6 +8022,13 @@ declare module "components/checkbox-group/checkbox-group.component" {
         horizontal: boolean;
         /** The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes. */
         contained: boolean;
+        /** Squares off the corners of every contained checkbox in the group, which are rounded by default. */
+        square: boolean;
+        /**
+         * Lays horizontal contained checkboxes out as a wrapping row instead of an equal-width grid, so each one sizes from
+         * `--zn-checkbox-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.
+         */
+        wrap: boolean;
         /**
          * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
          * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
@@ -8808,6 +8951,12 @@ declare module "components/translations/translations.component" {
         addLanguageKey(languageCode: string): void;
         /** Returns all language codes that have values. */
         getValueLanguages(): string[];
+        /**
+         * `values`, falling back to the `value` attribute it is built from while that is still pending. A parent
+         * zn-translation-group syncs its children from its own first update, which runs before theirs, so reading
+         * `values` alone would see it empty and overwrite the value the server rendered.
+         */
+        private pendingValues;
         disconnectedCallback(): void;
         protected firstUpdated(): void;
         protected updated(changedProperties: PropertyValues): void;
@@ -9335,6 +9484,8 @@ declare module "components/remarkd-editor/remarkd-editor.component" {
      * @csspart image-controls - The caption / alignment / size panel shown when an image block is clicked.
      * @csspart include - The chip rendered in place of an `include::` directive.
      * @csspart include-picker - The inline Include picker opened from the toolbar or "/include".
+     *
+     * @cssproperty --remarkd-editor-max-height - The tallest the editor grows before its body scrolls. Defaults to `100dvh`.
      */
     export default class ZnRemarkdEditor extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
@@ -9373,6 +9524,8 @@ declare module "components/remarkd-editor/remarkd-editor.component" {
         private dragStartX;
         private dragStartY;
         private dragGhost;
+        private dragPointerY;
+        private autoScrollFrame;
         /** The name of the control, submitted as part of form data. */
         name: string;
         /** The current remarkd source. */
@@ -9443,6 +9596,20 @@ declare module "components/remarkd-editor/remarkd-editor.component" {
          */
         private computeEditShell;
         private focusInput;
+        /**
+         * Scrolls the editor's own body to bring `el` into view. Never `scrollIntoView()` and
+         * never `focus()` without preventScroll: both walk every scrollable ancestor, and an
+         * `overflow: hidden`/`auto` panel around the editor is scrollable too — that shifts a
+         * container the user never asked to move.
+         */
+        private reveal;
+        private revealAfterUpdate;
+        /**
+         * Centres a block added without opening an editor. An image has no height until it
+         * loads, so the first pass scrolls against a layout that is still short — the second
+         * pass corrects it once the real dimensions are in.
+         */
+        private revealBlock;
         private addBlockAt;
         private deleteBlock;
         /** Inserts a draft block — committed (or dropped, if left empty) on blur. */
@@ -9469,6 +9636,16 @@ declare module "components/remarkd-editor/remarkd-editor.component" {
         private insertionIndexFromY;
         private handleHandlePointerDown;
         private handleDragPointerMove;
+        /**
+         * Holding the pointer near a scroll edge keeps the content moving, so a block can
+         * be dragged past the visible slice of a long document. Runs per frame rather than
+         * per pointermove — a pointer parked at the edge stops emitting moves.
+         */
+        private stepAutoScroll;
+        /** Scrolls the editor body, falling through to the page once the body is at its limit. */
+        private autoScroll;
+        /** Scroll step for this frame: nothing until the pointer is within `edge` of a boundary. */
+        private edgeScrollDelta;
         private handleDragPointerUp;
         private cancelDrag;
         private createDragGhost;
@@ -11822,6 +11999,344 @@ declare module "components/schedule-builder/index" {
         }
     }
 }
+declare module "components/thumbnail/thumbnail.component" {
+    import { type CSSResultGroup } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    import ZnIcon from "components/icon/index";
+    /**
+     * @summary A captioned image tile — a fixed aspect-ratio preview with a title beneath it, optional
+     * corner badges and actions, and an optional full-screen preview that grows out of the thumbnail.
+     * @documentation https://zinc.style/components/thumbnail
+     * @status experimental
+     * @since 1.0
+     *
+     * @dependency zn-icon
+     *
+     * @event zn-select - Emitted when an enabled thumbnail is activated by click or keyboard. Cancelable —
+     *  call `preventDefault()` to stop the preview from opening and to stop a parent
+     *  `zn-thumbnail-group` from changing its selection.
+     * @event zn-show - Emitted when the preview overlay starts opening.
+     * @event zn-close - Emitted once the preview overlay has finished closing.
+     *
+     * @slot - Fallback content rendered in place of the media when no `src` is set.
+     * @slot image - Replaces the built-in `<img>` (e.g. a video, canvas or `zn-icon`).
+     * @slot caption - Replaces the caption text.
+     * @slot badge - Content pinned to the bottom-left of the media (e.g. a play indicator). Badges take
+     *  no pointer events and are held back on opacity, so they read as information about the asset
+     *  rather than as something to click.
+     * @slot actions - Controls pinned to the bottom-right of the media (e.g. a download button). Each
+     *  slotted element becomes its own chip, so several actions read as separate icons on the thumbnail
+     *  rather than one grouped pill. This sits outside the thumbnail's link, so buttons and links here
+     *  behave normally and never select the thumbnail or follow its `href`.
+     * @slot preview - Replaces the preview media (e.g. a `<video>` for the full-size asset).
+     *
+     * @csspart base - The component's base wrapper.
+     * @csspart link - The anchor (or div) covering the media and caption.
+     * @csspart media - The fixed aspect-ratio media frame.
+     * @csspart image - The built-in image element.
+     * @csspart overlay - The layer holding the badge, actions and preview button.
+     * @csspart badge - The bottom-left badge container.
+     * @csspart actions - The bottom-right actions container.
+     * @csspart preview-button - The built-in preview trigger, when `preview-trigger="button"`.
+     * @csspart caption - The caption beneath the media.
+     * @csspart preview - The preview `<dialog>`.
+     * @csspart preview-backdrop - The full-screen backdrop behind the preview.
+     * @csspart preview-frame - The rounded panel the preview media sits in.
+     * @csspart preview-image - The full-size image inside the preview.
+     * @csspart preview-close - The preview's close button.
+     *
+     * @cssproperty --zn-thumbnail-aspect-ratio - Aspect ratio of the media frame. Defaults to 16 / 9. The
+     *  `aspect-ratio` attribute sets this on the thumbnail itself; set the property on any ancestor
+     *  (including a `zn-thumbnail-group`) to apply it to every thumbnail beneath it.
+     * @cssproperty --zn-thumbnail-radius - Corner radius of the media frame.
+     * @cssproperty --zn-thumbnail-preview-aspect-ratio - Overrides the measured aspect ratio of the preview
+     *  panel. By default the panel takes the asset's own ratio so it wraps the image exactly.
+     * @cssproperty --zn-thumbnail-preview-max-width - Largest width the preview may take. Defaults to 70vw.
+     * @cssproperty --zn-thumbnail-preview-max-height - Largest height the preview may take. Defaults to 70vh.
+     * @cssproperty --zn-thumbnail-preview-radius - Corner radius of the preview panel.
+     * @cssproperty --zn-thumbnail-chip-radius - Corner radius of a badge, action or preview chip.
+     * @cssproperty --zn-thumbnail-chip-background - Background of a badge, action or preview chip.
+     * @cssproperty --zn-thumbnail-chip-background-hover - Hover background of an action or preview chip.
+     * @cssproperty --zn-thumbnail-chip-color - Foreground colour of a badge, action or preview chip.
+     * @cssproperty --zn-thumbnail-chip-gap - Gap between adjacent chips.
+     * @cssproperty --zn-thumbnail-badge-opacity - Opacity of a badge, holding it back from the action
+     *  chips beside it. Defaults to 0.65.
+     * @cssproperty --zn-thumbnail-selected-color - Ring colour for the selected state.
+     * @cssproperty --zn-thumbnail-active-color - Ring colour for the active state.
+     */
+    export default class ZnThumbnail extends ZincElement {
+        static styles: CSSResultGroup;
+        static dependencies: {
+            'zn-icon': typeof ZnIcon;
+        };
+        private readonly hasSlotController;
+        /** Image URL for the built-in `<img>`. */
+        src: string;
+        /** Alternative text for the built-in image. Falls back to the caption. */
+        alt: string;
+        /** The title shown beneath the media. */
+        caption: string;
+        /**
+         * Aspect ratio of the media frame, as any CSS `aspect-ratio` value (e.g. `1 / 1`, `4 / 3`).
+         * Takes precedence over an inherited `--zn-thumbnail-aspect-ratio`. Defaults to `16 / 9`.
+         */
+        aspectRatio: string;
+        /** Renders the thumbnail as a link to this URL. */
+        href: string;
+        /** Where to open `href` (e.g. `_blank`). */
+        target: string;
+        /**
+         * URL of the full-size asset. Setting this enables the preview overlay, which grows out of the
+         * thumbnail's position over a full-screen backdrop.
+         */
+        fullUri: string;
+        /**
+         * How the preview opens. `click` (the default) opens it when the thumbnail is activated; `button`
+         * adds a dedicated expand control to the media instead, leaving clicks for selection or the link.
+         */
+        previewTrigger: 'click' | 'button';
+        /** Accessible label for the built-in preview trigger and the preview overlay. */
+        previewLabel: string;
+        /** Identifier reported in the `zn-select` event detail and used for group selection. */
+        value: string;
+        /** Draws the selected ring. Managed automatically inside a `selectable` `zn-thumbnail-group`. */
+        selected: boolean;
+        /**
+         * Draws the active ring — for the thumbnail currently in use (playing, open, being edited), as
+         * distinct from the user's selection. Takes the ring colour when a thumbnail is both active and
+         * selected. Recolour it with `--zn-thumbnail-active-color`.
+         */
+        active: boolean;
+        /** Set by `zn-thumbnail-group` when it manages selection, so the thumbnail reads as clickable. */
+        selectable: boolean;
+        /** Dims the thumbnail and blocks selection, navigation and preview. */
+        disabled: boolean;
+        /** Icon rendered in the bottom-left badge when the `badge` slot is empty. */
+        icon: string;
+        /** Hides the caption row, leaving just the media frame. */
+        hideCaption: boolean;
+        private _previewOpen;
+        /** Aspect ratio (width / height) measured from the asset, so the preview wraps it exactly. */
+        private _previewRatio;
+        private _media;
+        private _image;
+        private _previewImage;
+        private _preview;
+        private _previewFrame;
+        private _previewBackdrop;
+        private _previewClose;
+        /** The media rect captured when the preview opened, so the grow animation starts from the thumbnail. */
+        private _origin;
+        private _animating;
+        disconnectedCallback(): void;
+        private _isLink;
+        private get _previewable();
+        /** True when activating the thumbnail itself should open the preview. */
+        private get _previewOnActivate();
+        /**
+         * The asset's real aspect ratio, so the preview panel wraps the image instead of letterboxing it
+         * inside a fixed-ratio box. The full-size image is preferred, but it usually hasn't loaded when
+         * the preview opens — the already-loaded thumbnail shares the asset's ratio, and the rendered
+         * media box is the last resort for slotted media that can't be measured.
+         */
+        private _resolveRatio;
+        /** Opens the preview overlay. */
+        showPreview(): Promise<void>;
+        /** Closes the preview overlay. */
+        hidePreview(): Promise<void>;
+        private _animatePreview;
+        /** Maps the preview panel onto the thumbnail's box, so the panel appears to grow out of it. */
+        private _collapsedTransform;
+        private _activate;
+        private _handleClick;
+        private _handleKeyDown;
+        private _handlePreviewButtonClick;
+        private _handlePreviewCancel;
+        private _handleBackdropClick;
+        private _handlePreviewImageLoad;
+        render(): import("lit-html").TemplateResult;
+    }
+}
+declare module "components/thumbnail/index" {
+    import ZnThumbnail from "components/thumbnail/thumbnail.component";
+    export * from "components/thumbnail/thumbnail.component";
+    export default ZnThumbnail;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-thumbnail': ZnThumbnail;
+        }
+    }
+}
+declare module "components/thumbnail-group/thumbnail-group.component" {
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    /**
+     * @summary Lays a set of `zn-thumbnail` elements out as a single scrollable row, with a
+     * "Show All" toggle that expands them into a wrapping grid.
+     * @documentation https://zinc.style/components/thumbnail-group
+     * @status experimental
+     * @since 1.0
+     *
+     * @dependency zn-thumbnail
+     *
+     * @event zn-expand - Emitted when the group expands into the full grid.
+     * @event zn-collapse - Emitted when the group collapses back to a single row.
+     * @event zn-change - Emitted when the selected thumbnail changes (`selectable` groups only).
+     *
+     * @slot - One or more `zn-thumbnail` elements.
+     * @slot caption - Replaces the heading text.
+     * @slot actions - Extra content in the header, before the toggle.
+     *
+     * @csspart base - The component's base wrapper.
+     * @csspart header - The header row holding the caption and toggle.
+     * @csspart caption - The heading text.
+     * @csspart toggle - The show all / show less button.
+     * @csspart items - The scrolling row / expanded grid that holds the thumbnails.
+     *
+     * @cssproperty --zn-thumbnail-width - Track width of a thumbnail. Defaults to 180px. Also settable
+     *  with the `thumbnail-width` attribute.
+     * @cssproperty --zn-thumbnail-gap - Gap between thumbnails. Also settable with the `gap` attribute.
+     * @cssproperty --zn-thumbnail-aspect-ratio - Aspect ratio of every thumbnail in the group. Also
+     *  settable with the `aspect-ratio` attribute. Any `zn-thumbnail` custom property set here is
+     *  inherited by the slotted thumbnails.
+     */
+    export default class ZnThumbnailGroup extends ZincElement {
+        static styles: CSSResultGroup;
+        /** The heading shown at the top left of the group. */
+        caption: string;
+        /** Expands the group into the full wrapping grid. */
+        expanded: boolean;
+        /**
+         * Total number of thumbnails in the underlying set, shown in the "Show All (n)" label. Set this when
+         * the row only holds the first page of a larger set; otherwise the slotted thumbnails are counted.
+         */
+        total: number;
+        /** Label of the expand toggle. The count is appended in brackets. */
+        showAllLabel: string;
+        /** Label of the collapse toggle. */
+        showLessLabel: string;
+        /** Never render the toggle, even when the row overflows. */
+        hideToggle: boolean;
+        /** Always render the toggle, even when every thumbnail already fits on the row. */
+        alwaysToggle: boolean;
+        /** Manages single selection across the slotted thumbnails. */
+        selectable: boolean;
+        /**
+         * Aspect ratio for every thumbnail in the group, as any CSS `aspect-ratio` value (e.g. `1 / 1`).
+         * Shorthand for setting `--zn-thumbnail-aspect-ratio` on the group. A thumbnail's own
+         * `aspect-ratio` attribute still wins.
+         */
+        aspectRatio: string;
+        /** Track width of each thumbnail (e.g. `140px`). Shorthand for `--zn-thumbnail-width`. */
+        thumbnailWidth: string;
+        /** Gap between thumbnails (e.g. `8px`). Shorthand for `--zn-thumbnail-gap`. */
+        gap: string;
+        /** The `value` of the selected thumbnail (`selectable` groups only). */
+        value: string;
+        private _overflowing;
+        private _count;
+        private _items;
+        private _resizeObserver;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        protected firstUpdated(changed: PropertyValues): void;
+        private _observe;
+        protected updated(changed: PropertyValues): void;
+        /**
+         * Mirrors the shorthand attributes onto host custom properties. They go on the host rather than
+         * anywhere in the shadow root because the thumbnails are light-DOM children — inheriting from the
+         * host is the only way the values reach them.
+         */
+        private _syncCustomProperties;
+        /** Expands the group into the full grid. */
+        show(): void;
+        /** Collapses the group back to a single row. */
+        hide(): void;
+        private get _thumbnails();
+        private _handleSlotChange;
+        private _sync;
+        private _measure;
+        private _handleSelect;
+        private _handleToggle;
+        render(): import("lit-html").TemplateResult<1>;
+    }
+}
+declare module "components/thumbnail-group/index" {
+    import ZnThumbnailGroup from "components/thumbnail-group/thumbnail-group.component";
+    export * from "components/thumbnail-group/thumbnail-group.component";
+    export default ZnThumbnailGroup;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-thumbnail-group': ZnThumbnailGroup;
+        }
+    }
+}
+declare module "components/background/background.component" {
+    import { type CSSResultGroup } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    import ZnIcon from "components/icon/index";
+    export type BackgroundImageStrength = 'soft' | 'medium' | 'full';
+    export type BackgroundMotion = 'none' | 'drift' | 'breathe';
+    export type BackgroundOverlay = 'none' | 'soft' | 'strong';
+    export type BackgroundOverlayTone = 'light' | 'dark';
+    /**
+     * @summary Composes a colour, decorative image, image strength, optional motion and contrast overlay behind slotted content.
+     *
+     * @documentation https://zinc.style/components/background
+     * @status experimental
+     * @since 1.0
+     *
+     * @dependency zn-icon
+     *
+     * @slot - Content displayed above the background layers.
+     *
+     * @csspart base - The component's full-size background canvas.
+     * @csspart image - The decorative background image.
+     * @csspart overlay - The contrast overlay between the image and content.
+     * @csspart floating-icons - The non-interactive layer containing the floating icons.
+     * @csspart floating-icon - Each floating `zn-icon`.
+     * @csspart content - The wrapper around the default slot.
+     *
+     * @cssproperty --zn-background-color - Fallback colour when the `color` attribute is not set.
+     * @cssproperty --zn-background-image-position - Position of the background image. Defaults to `center`.
+     * @cssproperty --zn-background-overlay-angle - Direction of the overlay gradient. Defaults to `110deg`.
+     * @cssproperty --zn-background-floating-icon-color - Colour of the floating icons. Defaults to `currentColor`.
+     */
+    export default class ZnBackground extends ZincElement {
+        static styles: CSSResultGroup;
+        static dependencies: {
+            'zn-icon': typeof ZnIcon;
+        };
+        private readonly resizeObserver;
+        /** URL of the decorative background image. */
+        image: string;
+        /** CSS colour painted beneath the image. */
+        color: string;
+        /** Visibility of the image: `soft` (30%), `medium` (62%) or `full` (100%). */
+        imageStrength: BackgroundImageStrength;
+        /** Subtle animation applied to the image. Motion stops when reduced motion is requested. */
+        motion: BackgroundMotion;
+        /** Strength of the contrast gradient above the image. */
+        overlay: BackgroundOverlay;
+        /** Whether the overlay uses a light or dark contrast treatment. */
+        overlayTone: BackgroundOverlayTone;
+        /** Comma-separated Zinc icon names placed as ambient decoration. At most eight are rendered. */
+        floatingIcons: string;
+        /** Pauses background motion without changing the selected motion treatment. */
+        paused: boolean;
+        render(): import("lit-html").TemplateResult<1>;
+    }
+}
+declare module "components/background/index" {
+    import ZnBackground from "components/background/background.component";
+    export * from "components/background/background.component";
+    export default ZnBackground;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-background': ZnBackground;
+        }
+    }
+}
 declare module "utilities/form" {
     export { clearFormStoreValues } from "internal/form";
 }
@@ -12183,6 +12698,9 @@ declare module "zinc" {
     export { default as SlashMenu } from "components/slash-menu/index";
     export { default as SlashItem } from "components/slash-item/index";
     export { default as ScheduleBuilder } from "components/schedule-builder/index";
+    export { default as Thumbnail } from "components/thumbnail/index";
+    export { default as ThumbnailGroup } from "components/thumbnail-group/index";
+    export { default as Background } from "components/background/index";
     export { default as ZincElement } from "internal/zinc-element";
     export * from "utilities/on";
     export * from "utilities/query";