@nxgt/material-vue 0.37.1 → 0.38.0

package/dist/lib/components/ui/fields/repeatable-group/repeatable-group-names.d.ts

@@ -0,0 +1,16 @@
+import { RowAnnouncement } from '@nxgt/material-core/repeatable-group';
+import { useMaterialTranslation } from '../../../../i18n/use-material-translation';
+type Translate = ReturnType<typeof useMaterialTranslation>['t'];
+/** Why Add is disabled at `max`. */
+export declare const maxReached: (t: Translate, max?: number) => string;
+/** The group's button names, after the row's `label` and 1-based position. */
+export declare function rowNames(t: Translate, label: string, max?: number): {
+    add: string;
+    remove: (position: number) => string;
+    moveUp: (position: number) => string;
+    moveDown: (position: number) => string;
+    maxReached: string;
+};
+/** What the live region says about a change. */
+export declare function announcement(t: Translate, label: string, said: RowAnnouncement): string;
+export {};

package/dist/lib/components/ui/fields/repeatable-group/repeatable-group.vue.d.ts

@@ -0,0 +1,69 @@
+import { HTMLAttributes } from 'vue';
+export type RepeatableGroupProps<TItem> = {
+    /** The rows' values, one row each. */
+    items: readonly TItem[];
+    /**
+     * A stable key per row; by default the item's `key` (what vee-validate's
+     * `useFieldArray` gives each entry), else its `id`, else its index.
+     */
+    getKey?: (item: TItem, index: number) => PropertyKey;
+    /** The group's label, above the rows; it names the group and the list. */
+    label?: string;
+    /**
+     * What one row is, lower case: it names the row's buttons ("Remove
+     * period 2") and the announcements. Default "row", translated.
+     */
+    rowLabel?: string;
+    /** The Add button's text. Default "Add {rowLabel}", translated. */
+    addLabel?: string;
+    /** Move up and move down buttons on each row. */
+    reorderable?: boolean;
+    /** No Remove at this many rows. */
+    min?: number;
+    /** The Add button is disabled at this many rows, and says why. */
+    max?: number;
+    disabled?: boolean;
+    /** An error about the whole group, under the rows. */
+    error?: string;
+    /** With no row: an EmptyState with this title (and description). */
+    emptyTitle?: string;
+    emptyDescription?: string;
+    class?: HTMLAttributes['class'];
+    /**
+     * Called by the move buttons (`@move`), which `reorderable` shows only
+     * with a listener: a prop rather than an emit, so the group can tell.
+     */
+    onMove?: (from: number, to: number) => void;
+};
+/** What the `row` slot is given. `index` is 0-based, `position` 1-based. */
+export type RepeatableGroupRowContext<TItem> = {
+    item: TItem;
+    index: number;
+    position: number;
+};
+declare const __VLS_export: <TItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<RepeatableGroupProps<TItem> & {
+        onRemove?: ((index: number) => any) | undefined;
+        onAdd?: (() => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        /** One row's fields. */
+        row?: (row: RepeatableGroupRowContext<TItem>) => unknown;
+        label?: () => unknown;
+        empty?: () => unknown;
+    };
+    emit: ((evt: "remove", index: number) => void) & ((evt: "add") => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/lib/components/ui/fields/repeatable-group/use-repeatable-group.d.ts

@@ -0,0 +1,39 @@
+import { RowMoveDirection } from '@nxgt/material-core/repeatable-group';
+import { Ref } from 'vue';
+type Options = {
+    root: Readonly<Ref<HTMLElement | null>>;
+    items: () => readonly unknown[];
+    rowLabel: () => string | undefined;
+    max: () => number | undefined;
+    onAdd: () => void;
+    onRemove: (index: number) => void;
+    onMove: () => ((from: number, to: number) => void) | undefined;
+};
+/**
+ * A RepeatableGroup's behaviour: the buttons' names, the focus after a row
+ * is added, removed or moved (the rules are `@nxgt/material-core`'s, shared
+ * with the React group), and what the polite live region says.
+ */
+export declare function useRepeatableGroup(options: Options): {
+    message: Ref<{
+        text: string;
+        id: number;
+    }, {
+        text: string;
+        id: number;
+    } | {
+        text: string;
+        id: number;
+    }>;
+    names: import('vue').ComputedRef<{
+        add: string;
+        remove: (position: number) => string;
+        moveUp: (position: number) => string;
+        moveDown: (position: number) => string;
+        maxReached: string;
+    }>;
+    add: () => void;
+    remove: (index: number) => void;
+    move: (index: number, direction: RowMoveDirection) => void;
+};
+export {};

package/dist/lib/components/ui/fields/search-field/search-field.vue.d.ts

@@ -12,8 +12,17 @@ export type SearchFieldProps = {
     id?: string;
     placeholder?: string;
     modelValue?: string;
+    /**
+     * A hint for the key that focuses the field, for example `"/"`: shown as a
+     * `Kbd` while the field is empty and set as `aria-keyshortcuts`. It binds no
+     * key; the page owns the listener.
+     */
+    shortcut?: string;
 };
-declare const __VLS_export: import('vue').DefineComponent<SearchFieldProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare function focus(): void;
+declare const __VLS_export: import('vue').DefineComponent<SearchFieldProps, {
+    focus: typeof focus;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
     valueChange: (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<SearchFieldProps> & Readonly<{

package/dist/lib/components/ui/media/stx-player/stx-player-extras.vue.d.ts

@@ -5,8 +5,8 @@ export type StxPlayerExtrasProps = {
     dense?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<StxPlayerExtrasProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<StxPlayerExtrasProps> & Readonly<{}>, {
-    dense: boolean;
     tone: "overlay" | "surface";
+    dense: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/lib/components/ui/overlays/command/CommandItem.vue.d.ts

@@ -2,16 +2,23 @@ import { ListboxItemProps } from 'reka-ui';
 import { HTMLAttributes } from 'vue';
 type __VLS_Props = ListboxItemProps & {
     class?: HTMLAttributes['class'];
+    /**
+     * Sets `aria-checked` and shows a checkbox indicator. reka's
+     * `aria-selected` stays the selected value, so `multiple` is not used.
+     */
+    checked?: boolean;
 };
-declare var __VLS_11: {};
+declare var __VLS_16: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (event: import('reka-ui').ListboxItemSelectEvent<import('reka-ui').AcceptableValue>) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((event: import('reka-ui').ListboxItemSelectEvent<import('reka-ui').AcceptableValue>) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    checked: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/lib/components/ui/overlays/command/CommandList.vue.d.ts

@@ -2,10 +2,12 @@ import { ListboxContentProps } from 'reka-ui';
 import { HTMLAttributes } from 'vue';
 type __VLS_Props = ListboxContentProps & {
     class?: HTMLAttributes['class'];
+    /** Sets `aria-multiselectable`: the items carry a `checked` state. */
+    multiselectable?: boolean;
 };
-declare var __VLS_8: {};
+declare var __VLS_9: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/lib/components/ui/primitives/typography/typography.variants.d.ts

@@ -1,5 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const typographyVariants: (props?: ({
     variant?: "caption" | "normal" | "huge-larger" | "huge-large" | "huge-medium" | "huge-small" | "headline-larger" | "headline-large" | "headline-medium" | "headline-small" | "title-large" | "title-medium" | "title-small" | "body-medium" | "body-small" | null | undefined;
+    tone?: "default" | "error" | "primary" | "muted" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type TypographyVariants = VariantProps<typeof typographyVariants>;

package/dist/lib/components/ui/primitives/typography/typography.vue.d.ts

@@ -3,6 +3,8 @@ import { HTMLAttributes } from 'vue';
 import { TypographyVariants } from './typography.variants';
 export type TypographyProps = PrimitiveProps & {
     variant?: TypographyVariants['variant'];
+    /** The text colour: `default` inherits it, `muted` is `text-muted-foreground`. */
+    tone?: TypographyVariants['tone'];
     class?: HTMLAttributes['class'];
 };
 declare var __VLS_8: {};

package/dist/lib/components/ui/selection/checkbox-group/checkbox-group.vue.d.ts

@@ -2,6 +2,8 @@ import { HTMLAttributes } from 'vue';
 export type CheckboxGroupOption = {
     value: string;
     label: string;
+    /** Shown after the label and added to its accessible name. */
+    count?: number;
 };
 export type CheckboxGroupProps = {
     options: CheckboxGroupOption[];

package/dist/lib/components/ui/selection/option-count/option-count.vue.d.ts

@@ -0,0 +1,25 @@
+/**
+ * An option's trailing count, as plain text inside the option's label or
+ * chip: " 24" in muted `tabular-nums`, then a `sr-only` " results" (the
+ * `material.option-count.label` ICU plural, the unit word only). The name
+ * reads "CE1 24 results": it starts with the visible label (WCAG 2.5.3), and
+ * no zero-size or clipped trick is involved, so it names the same in
+ * Chromium, WebKit and Firefox. A checkbox or radio also gets that name
+ * as an explicit `aria-label` (`useOptionCountName`): Reka would derive one
+ * from `innerText`, which breaks the line before the `sr-only` unit.
+ *
+ * Limits: put it right after the label text, in the same inline wrapper
+ * (a `<span>`) for a checkbox or radio, so a flex `Label` sees one item. The
+ * leading space is a text node; a flex chip drops it and its `gap` spaces
+ * the items instead. On a filled chip (`inChip`) the count keeps the chip's
+ * colour: the muted one would not reach 4.5:1.
+ */
+type __VLS_Props = {
+    count: number;
+    inChip?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    inChip: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/lib/components/ui/selection/option-count/use-option-count-text.d.ts

@@ -0,0 +1,10 @@
+/** The unit word of a count in the page's language: "result" / "results". */
+export declare function useOptionCountUnit(): (count: number) => string;
+/**
+ * The accessible name of a checkbox or radio with a count: "CE1 24 results",
+ * the string `OptionCount`'s text also forms. Reka sets the `aria-label` of
+ * these two from their label's `innerText`, where the `sr-only` (absolute)
+ * unit lands on its own line ("CE1 24\nresults"), so the control gets it
+ * explicitly. `undefined` without a count: the control keeps its own name.
+ */
+export declare function useOptionCountName(): (label: string, count?: number) => string | undefined;

package/dist/lib/components/ui/selection/radio-group/radio-group-field.vue.d.ts

@@ -4,6 +4,8 @@ export type RadioGroupOption = {
     label: string;
     /** Rendered and announced as disabled, skipped by the arrow keys. */
     disabled?: boolean;
+    /** Shown after the label and added to its accessible name. */
+    count?: number;
 };
 export type RadioGroupFieldProps = {
     options: RadioGroupOption[];

package/dist/lib/components/ui/selection/select-chip-field/select-chip-field.vue.d.ts

@@ -1,11 +1,21 @@
+import { Component } from 'vue';
 export type SelectChipOption = {
     value: string;
     label: string;
+    /** An icon component, shown before the label. */
+    icon?: Component;
+    /** Shown after the label and added to its accessible name. */
+    count?: number;
 };
 export type SelectChipFieldProps = {
     mode?: 'single' | 'multiple';
     modelValue?: string[];
     options: SelectChipOption[];
+    /**
+     * Single mode: pressing the chosen chip again clears it (`true`, the
+     * default). `false` keeps it chosen, as a radio group does.
+     */
+    deselectable?: boolean;
     label?: string;
     helperText?: string;
     error?: boolean;
@@ -24,6 +34,7 @@ declare const __VLS_export: import('vue').DefineComponent<SelectChipFieldProps,
 }>, {
     mode: "single" | "multiple";
     modelValue: string[];
+    deselectable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/lib/components/ui/selection/sortable-list/sortable-list.vue.d.ts

@@ -31,8 +31,8 @@ declare const __VLS_base: import('vue').DefineComponent<SortableListProps, {}, {
     height: number | string;
     disabled: boolean;
     draggable: boolean;
-    searchable: boolean;
     reorderable: boolean;
+    searchable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/lib/components/ui/selection/transfer-list/transfer-list.vue.d.ts

@@ -36,8 +36,8 @@ declare const __VLS_base: import('vue').DefineComponent<TransferListProps, {}, {
     height: number | string;
     disabled: boolean;
     draggable: boolean;
-    searchable: boolean;
     reorderable: boolean;
+    searchable: boolean;
     showTransferAll: boolean;
     showSelectAll: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/lib/i18n/resources/en/en.d.ts

@@ -795,6 +795,9 @@ export declare const en: {
             placeholder: string;
             empty: string;
         };
+        "option-count": {
+            label: string;
+        };
         autocomplete: {
             empty: string;
             add: string;
@@ -1285,5 +1288,16 @@ export declare const en: {
             "saved-required": string;
             done: string;
         };
+        "repeatable-group": {
+            row: string;
+            add: string;
+            remove: string;
+            "move-up": string;
+            "move-down": string;
+            added: string;
+            removed: string;
+            moved: string;
+            "max-reached": string;
+        };
     };
 };

package/dist/lib/i18n/resources/en/material.json.d.ts

@@ -785,6 +785,9 @@ declare const _default: {
 		"placeholder": "Search…",
 		"empty": "No results"
 	},
+	"option-count": {
+		"label": "{count, plural, one {result} other {results}}"
+	},
 	"autocomplete": {
 		"empty": "No option found.",
 		"add": "Add \"{query}\"",
@@ -1274,6 +1277,17 @@ declare const _default: {
 		"saved": "I have saved these codes",
 		"saved-required": "Tick the box once your codes are safe",
 		"done": "Done"
+	},
+	"repeatable-group": {
+		"row": "row",
+		"add": "Add {label}",
+		"remove": "Remove {label} {index}",
+		"move-up": "Move {label} {index} up",
+		"move-down": "Move {label} {index} down",
+		"added": "Added {label} {index}",
+		"removed": "Removed {label} {index}",
+		"moved": "Moved {label} {from} to position {to}",
+		"max-reached": "Maximum reached ({max})"
 	}
 }
 ;

package/dist/lib/i18n/resources/fr/fr.d.ts

@@ -795,6 +795,9 @@ export declare const fr: {
             placeholder: string;
             empty: string;
         };
+        "option-count": {
+            label: string;
+        };
         autocomplete: {
             empty: string;
             add: string;
@@ -1285,5 +1288,16 @@ export declare const fr: {
             "saved-required": string;
             done: string;
         };
+        "repeatable-group": {
+            row: string;
+            add: string;
+            remove: string;
+            "move-up": string;
+            "move-down": string;
+            added: string;
+            removed: string;
+            moved: string;
+            "max-reached": string;
+        };
     };
 };

package/dist/lib/i18n/resources/fr/material.json.d.ts

@@ -785,6 +785,9 @@ declare const _default: {
 		"placeholder": "Rechercher…",
 		"empty": "Aucun résultat"
 	},
+	"option-count": {
+		"label": "{count, plural, one {résultat} other {résultats}}"
+	},
 	"autocomplete": {
 		"empty": "Aucune option.",
 		"add": "Ajouter « {query} »",
@@ -1274,6 +1277,17 @@ declare const _default: {
 		"saved": "J'ai enregistré ces codes",
 		"saved-required": "Cochez la case une fois vos codes en lieu sûr",
 		"done": "Terminé"
+	},
+	"repeatable-group": {
+		"row": "ligne",
+		"add": "Ajouter une {label}",
+		"remove": "Retirer la {label} {index}",
+		"move-up": "Monter la {label} {index}",
+		"move-down": "Descendre la {label} {index}",
+		"added": "Ajout : {label} {index}",
+		"removed": "Suppression : {label} {index}",
+		"moved": "Déplacement : {label} {from} en position {to}",
+		"max-reached": "Maximum atteint ({max})"
 	}
 }
 ;

package/dist/lib/i18n/resources/resources.d.ts

@@ -793,6 +793,9 @@ export declare const resources: {
                 placeholder: string;
                 empty: string;
             };
+            "option-count": {
+                label: string;
+            };
             autocomplete: {
                 empty: string;
                 add: string;
@@ -1283,6 +1286,17 @@ export declare const resources: {
                 "saved-required": string;
                 done: string;
             };
+            "repeatable-group": {
+                row: string;
+                add: string;
+                remove: string;
+                "move-up": string;
+                "move-down": string;
+                added: string;
+                removed: string;
+                moved: string;
+                "max-reached": string;
+            };
         };
     };
     fr: {
@@ -2073,6 +2087,9 @@ export declare const resources: {
                 placeholder: string;
                 empty: string;
             };
+            "option-count": {
+                label: string;
+            };
             autocomplete: {
                 empty: string;
                 add: string;
@@ -2563,6 +2580,17 @@ export declare const resources: {
                 "saved-required": string;
                 done: string;
             };
+            "repeatable-group": {
+                row: string;
+                add: string;
+                remove: string;
+                "move-up": string;
+                "move-down": string;
+                added: string;
+                removed: string;
+                moved: string;
+                "max-reached": string;
+            };
         };
     };
 };