@eunomia/elements 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/features/table/table/table.styles.js

@@ -1,11 +1,12 @@
 import { css } from "lit";
 /**
- * Style for `eun-table` — the outer CSS Grid every `eun-table-header`/
- * `eun-table-item` row shares its column tracks with via CSS Subgrid (see
- * the class doc for the full mechanism). `:host` is deliberately both the
- * grid container *and* the scroll container (`overflow: auto`) : a sticky
- * header/column/pinned row sticks relative to whichever ancestor actually
- * scrolls, and this is the one meant to.
+ * Style for `eun-table`'s own shadow root. `#frame` is the table's border
+ * and its scroll container: a sticky header, column, or footer sticks
+ * relative to whichever ancestor actually scrolls, and this is the one
+ * meant to. The host only reserves room above it for the `<caption>`,
+ * which the light DOM sheet positions against the host, outside the
+ * frame's clipping. The slotted native table itself is styled from the light DOM
+ * (see `table-native.styles.ts`).
  *
  * Custom css variables:
  * [--table-border-color] - Set a custom border color
@@ -15,30 +16,31 @@ import { css } from "lit";
  */
 const base = css `
   :host {
-    display: grid;
-    grid-template-columns: var(--_columns, none);
-    align-items: stretch;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    box-sizing: border-box;
+    max-height: var(--table-max-height, none);
+    padding-top: var(--_table-caption-height, 0px);
+    font-family: var(--eun-font-family, "Mulish", sans-serif);
+  }
+
+  #frame {
+    flex: 1 1 auto;
+    min-height: 0;
     box-sizing: border-box;
     border: var(--eun-border-width-s, 1px) solid
       var(--table-border-color, var(--eun-border-color, #dee0e7));
     border-radius: var(--eun-border-radius-m, 10px);
     background: var(--table-background, var(--eun-surface-color, #ffffff));
     overflow: auto;
-    max-height: var(--table-max-height, none);
-    font-family: var(--eun-font-family, "Mulish", sans-serif);
-  }
-
-  :host([loading]) ::slotted(eun-table-item) {
-    display: none;
   }
 
   #table-sentinel {
-    grid-column: 1 / -1;
     block-size: 1px;
   }
 
   #table-loading-row {
-    grid-column: 1 / -1;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -49,5 +51,17 @@ const base = css `
   #table-loading-row[hidden] {
     display: none;
   }
+
+  .visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 `;
 export const tableStyles = base;

package/dist/features/table/table/table.types.d.ts

@@ -1,7 +1,6 @@
 import { TemplateResult } from "lit";
 import { EunomiaIconName } from "../../../components/content/icon/icon.type.js";
 import { EunomiaDropdownOption } from "../../../components/action/dropdown-button/dropdown-button.js";
-import { EunomiaTableColumnSort } from "../table-column/table-column.js";
 import { EunomiaActionColor } from "../../../types/variant.type.js";
 /**
  * A single action rendered in `eun-table-action-bar`'s center region — a
@@ -16,24 +15,16 @@ export interface EunomiaTableAction {
     disabled?: boolean;
 }
 /**
- * The `{ row, col }` coordinates of a single cell within `eun-table`'s
- * roving-tabindex grid — `row` 0 is the header, `row` 1..N are `eun-table-item`s
- * in DOM order ; `col` 0 is the select cell (when selectable), 1..M are data
- * cells, and the last index is the action cell (when any row has one).
- * @internal
+ * Sort state of a column, reflected as `aria-sort` on its header cell.
  */
-export interface EunomiaTableCellCoords {
-    row: number;
-    col: number;
-}
+export type EunomiaTableColumnSort = "ascending" | "descending" | "none";
 /**
  * Definition of a single column, for `eun-table`'s programmatic `columns` +
- * `data` mode — an alternative to hand-authoring `eun-table-header`/
- * `eun-table-column`/`eun-table-item`/`eun-table-cell` markup yourself.
- * `eun-table` generates that exact same markup from `columns`/`data`
- * internally, so the rendered result — visuals, CSS, ARIA, sticky/selection
- * behavior — is identical either way ; this is a convenience input mode,
- * not a second implementation.
+ * `data` mode — an alternative to hand-authoring the native `<table>`
+ * markup yourself. `eun-table` renders that same native markup from
+ * `columns`/`data`, so the result (visuals, semantics, sticky and
+ * selection behavior) is identical either way. `width` is any CSS width
+ * (`120px`, `20%`), applied to the column's header cell.
  *
  * @template T Shape of a data row.
  */
@@ -47,8 +38,8 @@ export interface EunomiaTableColumnDef<T extends object = Record<string, unknown
 }
 /**
  * A single row-end button action, for `eun-table`'s programmatic `rowAction`
- * — the data-driven equivalent of slotting a `eun-button` into
- * `slot="action"` yourself.
+ * — the data-driven equivalent of putting a `eun-button` in a
+ * `data-table-action` cell yourself.
  *
  * @template T Shape of a data row.
  */
@@ -66,8 +57,8 @@ export interface EunomiaTableRowButtonActionDef<T extends object = Record<string
 }
 /**
  * A single row-end dropdown action, for `eun-table`'s programmatic
- * `rowAction` — the data-driven equivalent of slotting a
- * `eun-dropdown-button` into `slot="action"` yourself. `options`/
+ * `rowAction` — the data-driven equivalent of putting a
+ * `eun-dropdown-button` in a `data-table-action` cell yourself. `options`/
  * `disabledKeys` are computed per row so they can reflect that row's own
  * state.
  *

package/dist/features/table/table/table.utils.d.ts

@@ -1,43 +1,13 @@
-import { TemplateResult } from "lit";
 /**
- * Builds the `grid-template-columns` track list shared, via CSS Subgrid, by
- * `eun-table`'s outer grid and every `eun-table-header`/`eun-table-item`
- * row. A missing/blank column width falls back to `minmax(0, 1fr)` (never
- * bare `auto`, which can blow the grid out on long unwrapped content).
- * @internal
- */
-export declare function computeColumnsTemplate(columnWidths: Array<string | undefined>, opts: {
-    selectable: boolean;
-    hasAction: boolean;
-}): string;
-/**
- * Resolves a row's stable identity : its own `row-key` if set, otherwise a
- * fallback keyed on DOM order. The fallback is documented as unstable
- * across client-side sort/filter/reorder — callers needing a table with any
- * of those should always set `row-key`.
+ * Resolves a row's stable identity : its own `data-row-key` if set,
+ * otherwise a fallback keyed on DOM order. The fallback is documented as
+ * unstable across client-side sort/filter/reorder — callers needing a
+ * table with any of those should always set `data-row-key`.
  * @internal
  */
 export declare function resolveRowKey(explicitKey: string | null | undefined, index: number): string;
 /**
- * Shared checkbox-cell markup rendered by both `eun-table-header` (the
- * select-all control) and `eun-table-item` (a per-row checkbox) — identical
- * internal markup in both, so factored out rather than duplicated. Not
- * exported from `index.ts` : this is an implementation detail of the two
- * elements that use it, not something a consumer authors directly.
- *
- * Both callers pin the checkbox's own `tabindex` to `"0"` explicitly,
- * overriding `eun-checkbox`'s own default (`"-1"`, meant for a composite
- * widget awaiting external promotion elsewhere, e.g. inside a radio
- * group) — this one is always meant to be its own plain, independently
- * `Tab`-reachable control, never a roving-tabindex stop managed by
- * anything else.
+ * Converts a column `align` value into the matching logical `text-align`.
  * @internal
  */
-export declare function renderSelectCell(props: {
-    role: "gridcell" | "columnheader";
-    checked: boolean;
-    indeterminate?: boolean;
-    ariaLabel: string;
-    disabled?: boolean;
-    onChange: () => void;
-}): TemplateResult;
+export declare function alignToTextAlign(align: "left" | "center" | "right" | undefined): string | undefined;

package/dist/features/table/table/table.utils.js

@@ -1,75 +1,26 @@
-import { html } from "lit";
 /**
- * Builds the `grid-template-columns` track list shared, via CSS Subgrid, by
- * `eun-table`'s outer grid and every `eun-table-header`/`eun-table-item`
- * row. A missing/blank column width falls back to `minmax(0, 1fr)` (never
- * bare `auto`, which can blow the grid out on long unwrapped content).
- * @internal
- */
-export function computeColumnsTemplate(columnWidths, opts) {
-    const tracks = [];
-    if (opts.selectable) {
-        tracks.push("var(--eun-table-select-col-width, 40px)");
-    }
-    for (const width of columnWidths) {
-        tracks.push(width?.trim() ? width.trim() : "minmax(0, 1fr)");
-    }
-    if (opts.hasAction) {
-        tracks.push("var(--eun-table-action-col-width, 56px)");
-    }
-    return tracks.join(" ") || "none";
-}
-/**
- * Resolves a row's stable identity : its own `row-key` if set, otherwise a
- * fallback keyed on DOM order. The fallback is documented as unstable
- * across client-side sort/filter/reorder — callers needing a table with any
- * of those should always set `row-key`.
+ * Resolves a row's stable identity : its own `data-row-key` if set,
+ * otherwise a fallback keyed on DOM order. The fallback is documented as
+ * unstable across client-side sort/filter/reorder — callers needing a
+ * table with any of those should always set `data-row-key`.
  * @internal
  */
 export function resolveRowKey(explicitKey, index) {
     return explicitKey?.length ? explicitKey : `__row-${index}`;
 }
 /**
- * Shared checkbox-cell markup rendered by both `eun-table-header` (the
- * select-all control) and `eun-table-item` (a per-row checkbox) — identical
- * internal markup in both, so factored out rather than duplicated. Not
- * exported from `index.ts` : this is an implementation detail of the two
- * elements that use it, not something a consumer authors directly.
- *
- * Both callers pin the checkbox's own `tabindex` to `"0"` explicitly,
- * overriding `eun-checkbox`'s own default (`"-1"`, meant for a composite
- * widget awaiting external promotion elsewhere, e.g. inside a radio
- * group) — this one is always meant to be its own plain, independently
- * `Tab`-reachable control, never a roving-tabindex stop managed by
- * anything else.
+ * Converts a column `align` value into the matching logical `text-align`.
  * @internal
  */
-/* eslint-disable lit-a11y/click-events-have-key-events -- this div only
-   stops a click's propagation so it doesn't also trigger the owning row's
-   click handling ; the real interactive control is the eun-checkbox inside
-   it, already independently keyboard-accessible. */
-export function renderSelectCell(props) {
-    return html `
-    <div
-      id="select-cell"
-      role=${props.role}
-      tabindex="-1"
-      @click=${(event) => event.stopPropagation()}
-    >
-      <eun-checkbox
-        tabindex="0"
-        ?checked=${props.checked}
-        .indeterminate=${props.indeterminate ?? false}
-        aria-label=${props.ariaLabel}
-        ?disabled=${props.disabled ?? false}
-        @eunchange=${props.onChange}
-        @click=${() => {
-        if (props.indeterminate) {
-            props.onChange();
-        }
-    }}
-      ></eun-checkbox>
-    </div>
-  `;
+export function alignToTextAlign(align) {
+    switch (align) {
+        case "center":
+            return "center";
+        case "right":
+            return "end";
+        case "left":
+            return "start";
+        default:
+            return undefined;
+    }
 }
-/* eslint-enable lit-a11y/click-events-have-key-events */

package/dist/features/table/table-action-bar/table-action-bar.d.ts

@@ -4,6 +4,7 @@ import { EunomiaTableAction } from "../table/table.types.js";
  * Tag name of the table-action-bar component.
  */
 export declare const EunomiaTableActionBarTagName = "eun-table-action-bar";
+declare const EunomiaTableActionBar_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A floating, bottom-centered toolbar shown while one or more rows are
  * selected: a count badge, a select or deselect all toggle, any number of
@@ -24,15 +25,15 @@ export declare const EunomiaTableActionBarTagName = "eun-table-action-bar";
  * @attr {number} [total-count=0] - The total number of selectable rows
  * @slot [default] - Extra content rendered in the center region, after the actions-driven buttons and dropdowns. An escape hatch for markup actions can't express, such as a custom control or a status message
  * @prop {Array<import('./table.types.js').EunomiaTableAction>} [actions=[]] - The custom actions rendered in the center region
- * @prop {string} [toolbarAriaLabel='Selection actions'] - The accessible label for the toolbar itself
+ * @prop {string} [toolbarAriaLabel='Selection actions'] - The accessible label for the toolbar itself ; translated from `locale` while unset
  * @attr {string} [toolbar-aria-label='Selection actions'] - The accessible label for the toolbar itself
- * @prop {string} [selectedLabel='selected'] - Text shown after the count in the badge
+ * @prop {string} [selectedLabel='selected'] - Text shown after the count in the badge ; translated from `locale` while unset
  * @attr {string} [selected-label='selected'] - Text shown after the count in the badge
- * @prop {string} [selectAllLabel='Select all'] - The label of the select-all button while not every row is selected
+ * @prop {string} [selectAllLabel='Select all'] - The label of the select-all button while not every row is selected ; translated from `locale` while unset
  * @attr {string} [select-all-label='Select all'] - The label of the select-all button while not every row is selected
- * @prop {string} [deselectAllLabel='Deselect all'] - The label of the select-all button once every row is selected
+ * @prop {string} [deselectAllLabel='Deselect all'] - The label of the select-all button once every row is selected ; translated from `locale` while unset
  * @attr {string} [deselect-all-label='Deselect all'] - The label of the select-all button once every row is selected
- * @prop {string} [closeAriaLabel='Clear selection'] - The accessible label for the close button
+ * @prop {string} [closeAriaLabel='Clear selection'] - The accessible label for the close button ; translated from `locale` while unset
  * @attr {string} [close-aria-label='Clear selection'] - The accessible label for the close button
  * @fires {TableActionEvent} euntableaction - Fired when a custom action is activated
  * @csspart bar - The bar's own surface box, carrying its padding, background, and border. Exposed for effects the bar's CSS custom properties don't cover
@@ -44,7 +45,7 @@ export declare const EunomiaTableActionBarTagName = "eun-table-action-bar";
  * @cssprop [--table-action-bar-border-radius] - Sets the corner radius of the action bar
  * @element eun-table-action-bar
  */
-export declare class EunomiaTableActionBar extends LitElement {
+export declare class EunomiaTableActionBar extends EunomiaTableActionBar_base {
     /**
      * Styles to import to the component.
      *
@@ -59,16 +60,31 @@ export declare class EunomiaTableActionBar extends LitElement {
     totalCount: number;
     /** @default [] */
     actions: EunomiaTableAction[];
-    /** @default Selection actions */
-    toolbarAriaLabel: string;
-    /** @default selected */
-    selectedLabel: string;
-    /** @default Select all */
-    selectAllLabel: string;
-    /** @default Deselect all */
-    deselectAllLabel: string;
-    /** @default Clear selection */
-    closeAriaLabel: string;
+    /**
+     * Translated from `locale` while unset.
+     * @default Selection actions
+     */
+    toolbarAriaLabel?: string;
+    /**
+     * Translated from `locale` while unset.
+     * @default selected
+     */
+    selectedLabel?: string;
+    /**
+     * Translated from `locale` while unset.
+     * @default Select all
+     */
+    selectAllLabel?: string;
+    /**
+     * Translated from `locale` while unset.
+     * @default Deselect all
+     */
+    deselectAllLabel?: string;
+    /**
+     * Translated from `locale` while unset.
+     * @default Clear selection
+     */
+    closeAriaLabel?: string;
     /**
      * Called when the select-all/deselect-all button is clicked. Set by the
      * owning `eun-table` (or a standalone consumer of this element).
@@ -94,3 +110,4 @@ declare global {
         [EunomiaTableActionBarTagName]: EunomiaTableActionBar;
     }
 }
+export {};

package/dist/features/table/table-action-bar/table-action-bar.js

@@ -9,6 +9,7 @@ import { html, LitElement, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { TableActionEvent } from "../../../events/table-action.event.js";
 import { tableActionBarStyles } from "./table-action-bar.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the table-action-bar component.
  */
@@ -33,15 +34,15 @@ export const EunomiaTableActionBarTagName = "eun-table-action-bar";
  * @attr {number} [total-count=0] - The total number of selectable rows
  * @slot [default] - Extra content rendered in the center region, after the actions-driven buttons and dropdowns. An escape hatch for markup actions can't express, such as a custom control or a status message
  * @prop {Array<import('./table.types.js').EunomiaTableAction>} [actions=[]] - The custom actions rendered in the center region
- * @prop {string} [toolbarAriaLabel='Selection actions'] - The accessible label for the toolbar itself
+ * @prop {string} [toolbarAriaLabel='Selection actions'] - The accessible label for the toolbar itself ; translated from `locale` while unset
  * @attr {string} [toolbar-aria-label='Selection actions'] - The accessible label for the toolbar itself
- * @prop {string} [selectedLabel='selected'] - Text shown after the count in the badge
+ * @prop {string} [selectedLabel='selected'] - Text shown after the count in the badge ; translated from `locale` while unset
  * @attr {string} [selected-label='selected'] - Text shown after the count in the badge
- * @prop {string} [selectAllLabel='Select all'] - The label of the select-all button while not every row is selected
+ * @prop {string} [selectAllLabel='Select all'] - The label of the select-all button while not every row is selected ; translated from `locale` while unset
  * @attr {string} [select-all-label='Select all'] - The label of the select-all button while not every row is selected
- * @prop {string} [deselectAllLabel='Deselect all'] - The label of the select-all button once every row is selected
+ * @prop {string} [deselectAllLabel='Deselect all'] - The label of the select-all button once every row is selected ; translated from `locale` while unset
  * @attr {string} [deselect-all-label='Deselect all'] - The label of the select-all button once every row is selected
- * @prop {string} [closeAriaLabel='Clear selection'] - The accessible label for the close button
+ * @prop {string} [closeAriaLabel='Clear selection'] - The accessible label for the close button ; translated from `locale` while unset
  * @attr {string} [close-aria-label='Clear selection'] - The accessible label for the close button
  * @fires {TableActionEvent} euntableaction - Fired when a custom action is activated
  * @csspart bar - The bar's own surface box, carrying its padding, background, and border. Exposed for effects the bar's CSS custom properties don't cover
@@ -53,7 +54,7 @@ export const EunomiaTableActionBarTagName = "eun-table-action-bar";
  * @cssprop [--table-action-bar-border-radius] - Sets the corner radius of the action bar
  * @element eun-table-action-bar
  */
-let EunomiaTableActionBar = class EunomiaTableActionBar extends LitElement {
+let EunomiaTableActionBar = class EunomiaTableActionBar extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /** @default 0 */
@@ -62,16 +63,6 @@ let EunomiaTableActionBar = class EunomiaTableActionBar extends LitElement {
         this.totalCount = 0;
         /** @default [] */
         this.actions = [];
-        /** @default Selection actions */
-        this.toolbarAriaLabel = "Selection actions";
-        /** @default selected */
-        this.selectedLabel = "selected";
-        /** @default Select all */
-        this.selectAllLabel = "Select all";
-        /** @default Deselect all */
-        this.deselectAllLabel = "Deselect all";
-        /** @default Clear selection */
-        this.closeAriaLabel = "Clear selection";
         this.handleSelectAllClick = () => {
             this.onSelectAll?.();
         };
@@ -87,8 +78,8 @@ let EunomiaTableActionBar = class EunomiaTableActionBar extends LitElement {
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has("toolbarAriaLabel")) {
-            this.setAttribute("aria-label", this.toolbarAriaLabel);
+        if (changed.has("toolbarAriaLabel") || changed.has("locale")) {
+            this.setAttribute("aria-label", this.toolbarAriaLabel ?? this.dictionary.table.selectionActions);
         }
     }
     get allSelected() {
@@ -149,13 +140,14 @@ let EunomiaTableActionBar = class EunomiaTableActionBar extends LitElement {
     render() {
         const allSelected = this.allSelected;
         const toggleLabel = allSelected
-            ? this.deselectAllLabel
-            : this.selectAllLabel;
+            ? (this.deselectAllLabel ?? this.dictionary.table.deselectAll)
+            : (this.selectAllLabel ?? this.dictionary.table.selectAll);
         return html `
       <div id="bar" part="bar">
         <div id="left">
           <eun-tag role="status"
-            >${this.selectedCount} ${this.selectedLabel}</eun-tag
+            >${this.selectedCount}
+            ${this.selectedLabel ?? this.dictionary.table.selected}</eun-tag
           >
           <eun-button
             appearance="flat"
@@ -177,7 +169,8 @@ let EunomiaTableActionBar = class EunomiaTableActionBar extends LitElement {
             size="xs"
             rounded
             appearance="flat"
-            aria-label=${this.closeAriaLabel}
+            aria-label=${this.closeAriaLabel ??
+            this.dictionary.table.clearSelection}
             @click=${this.handleCloseClick}
           >
             <eun-icon name="close" size="16"></eun-icon>

package/dist/features/table/table-action-bar/table-action-bar.styles.js

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
+import { cssBelow } from "../../../utils/media.styles.js";
 /**
  * Style for `eun-table-action-bar` — a floating, bottom-centered toolbar,
  * visually modeled on the sibling `eunomia-elements` design system's own
@@ -36,7 +36,19 @@ const base = css `
     z-index: var(--table-action-bar-z-index, 100);
     display: block;
     max-width: calc(100vw - var(--eun-space-l, 32px) * 2);
-    animation: eun-table-action-bar-in 180ms ease both;
+    animation: eun-table-action-bar-in var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease) both;
+  }
+
+  :host([popover]) {
+    top: auto;
+    right: auto;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    overflow: visible;
+    color: inherit;
   }
 
   :host([hidden]) {
@@ -84,7 +96,7 @@ const base = css `
     }
   }
 
-  @media (max-width: ${EUNOMIA_BREAKPOINTS.mobile}px) {
+  @media ${cssBelow("mobile")} {
     :host {
       left: var(--eun-space-s, 8px);
       right: var(--eun-space-s, 8px);

package/dist/i18n/en.d.ts

@@ -6,7 +6,15 @@
  * silent runtime fallback.
  */
 export declare const en: {
+    common: {
+        close: string;
+        cancel: string;
+        confirm: string;
+        noValue: string;
+        save: string;
+    };
     datePicker: {
+        openCalendar: string;
         previousMonth: string;
         chooseMonthYear: string;
         nextMonth: string;
@@ -19,6 +27,11 @@ export declare const en: {
         amPm: string;
         hour: string;
         minute: string;
+        day: string;
+        month: string;
+        year: string;
+        startDate: string;
+        endDate: string;
         heading: {
             day: {
                 single: string;
@@ -49,6 +62,7 @@ export declare const en: {
         };
     };
     timePicker: {
+        openClock: string;
         amPm: string;
         hour: string;
         minute: string;
@@ -58,14 +72,23 @@ export declare const en: {
         mustBeAtOrBefore: (time: string) => string;
     };
     scheduler: {
+        previous: string;
+        next: string;
         calendarView: string;
     };
     carousel: {
         ofTotal: (index: number, total: number) => string;
         slideNavigation: string;
+        previous: string;
+        next: string;
         goToSlide: (index: number, total: number) => string;
     };
     imageCarousel: {
+        gallery: string;
+        previous: string;
+        next: string;
+        expand: string;
+        lightbox: string;
         selectImage: string;
         showImage: (index: number, total: number) => string;
         imageNavigation: string;
@@ -75,9 +98,85 @@ export declare const en: {
     chip: {
         remove: string;
     };
+    passwordStrength: {
+        label: string;
+        levels: string[];
+        caption: (label: string) => string;
+    };
+    infiniteList: {
+        loadingMore: string;
+        itemsLoaded: (count: number) => string;
+    };
+    table: {
+        loadingMore: string;
+        selected: string;
+        selectAll: string;
+        deselectAll: string;
+        selectAllRows: string;
+        deselectAllRows: string;
+        selectRow: string;
+        selectionActions: string;
+        clearSelection: string;
+        rowActions: string;
+        rowsLoaded: (count: number) => string;
+    };
     link: {
         opensInNewTab: string;
     };
+    input: {
+        clear: string;
+        showPassword: string;
+        hidePassword: string;
+    };
+    search: {
+        panel: string;
+    };
+    counter: {
+        increment: string;
+        decrement: string;
+    };
+    inputFile: {
+        remove: string;
+        select: string;
+        open: string;
+    };
+    inputPhone: {
+        selectCountry: string;
+    };
+    colorPicker: {
+        noColor: string;
+    };
+    pagination: {
+        previous: string;
+        next: string;
+        first: string;
+        last: string;
+        page: string;
+    };
+    sidebar: {
+        expand: string;
+        collapse: string;
+        resize: string;
+    };
+    toolbar: {
+        menuOpen: string;
+        menuClose: string;
+        menu: string;
+    };
+    rating: {
+        label: string;
+        valueText: (value: string, max: string) => string;
+        summary: (label: string, valueText: string) => string;
+        noValue: string;
+        clear: string;
+    };
+    validation: {
+        valueMissing: string;
+        tooShort: (min: number, length: number) => string;
+        tooLong: (max: number, length: number) => string;
+        invalidDate: string;
+        invalidTime: string;
+    };
 };
 /**
  * The shape every locale dictionary (see {@link ../i18n/fr.ts}) must match.