optikos 0.4.0 → 0.5.1

package/dist/optikos.css

@@ -1022,6 +1022,9 @@
 }
 
 @layer optikos {
+  :root {
+    --op-label-image-size: 1.5em;
+  }
   .op-label {
     color: var(--op-label-fg, var(--op-color-fg));
   }
@@ -1032,6 +1035,17 @@
     font-size: var(--op-label-title-size, var(--op-font-size-lg));
     font-weight: var(--op-label-title-weight, var(--op-font-weight-bold));
   }
+  .op-label--media {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-2);
+  }
+  .op-label__image {
+    block-size: var(--op-label-image-size);
+    inline-size: auto;
+    max-inline-size: 100%;
+    object-fit: contain;
+  }
 }
 
 @layer optikos {
@@ -1266,6 +1280,20 @@
     inset-inline-end: var(--op-space-4);
     inline-size: var(--op-stat-spark-width);
   }
+  .op-stat.is-interactive {
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background var(--op-duration) var(--op-easing), border-color var(--op-duration) var(--op-easing);
+  }
+  .op-stat.is-interactive:hover {
+    background: var(--op-stat-hover-bg, var(--op-color-hover));
+    border-color: var(--op-color-border-strong);
+  }
+  .op-stat.is-interactive:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
 }
 
 @layer optikos {
@@ -1535,6 +1563,63 @@
   }
 }
 
+@layer optikos {
+  .op-columntotals {
+    display: grid;
+    grid-template-columns: var(--op-grid-cols);
+    box-sizing: border-box;
+    flex: none;
+    overflow: hidden;
+    min-block-size: var(--op-grid-row-height, var(--op-row-height));
+    border-block-start: var(--op-border-width) solid var(--op-grid-header-border, var(--op-color-border-strong));
+    background: var(--op-grid-total-bg, var(--op-color-surface-2));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-columntotals[hidden] {
+    display: none;
+  }
+  .op-columntotals__cell {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    min-inline-size: 0;
+    padding-inline: var(--op-grid-cell-padding-x, var(--op-control-padding-x));
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .op-columntotals__cell--right { justify-content: flex-end; }
+  .op-columntotals__cell--center { justify-content: center; }
+  .op-columntotals__op {
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-normal, normal);
+  }
+  .op-columntotals__btn {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    margin-inline-start: auto;
+    padding: var(--op-space-1);
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    background: transparent;
+    color: var(--op-color-fg-muted);
+    cursor: pointer;
+  }
+  .op-columntotals__btn:hover {
+    background: var(--op-color-hover);
+    color: var(--op-color-fg);
+  }
+  .op-columntotals__btn:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-columntotals--top {
+    border-block-start: 0;
+    border-block-end: var(--op-border-width) solid var(--op-grid-header-border, var(--op-color-border-strong));
+  }
+}
+
 @layer optikos {
   :root {
     --op-dataview-item-width: 10rem;
@@ -1592,6 +1677,16 @@
   }
 }
 
+@layer optikos {
+  .op-exportbar {
+    display: flex;
+    flex: none;
+    gap: var(--op-space-1);
+    margin-inline-start: auto;
+    padding-inline: var(--op-space-2);
+  }
+}
+
 @layer optikos {
   :root {
     --op-filterbuilder-gap: var(--op-space-2);
@@ -1853,6 +1948,18 @@
     padding: var(--op-space-2);
     border-block-start: var(--op-border-width) solid var(--_border);
   }
+  .op-grid__footer {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    border-block-start: var(--op-border-width) solid var(--_border);
+  }
+  .op-grid__footer .op-grid__pager {
+    flex: 1 1 auto;
+    border-block-start: 0;
+  }
   .op-grid .op-virtual {
     min-inline-size: var(--op-grid-min-width);
   }
@@ -2221,6 +2328,13 @@
       transition: none;
     }
   }
+  .op-groupcontrols {
+    display: flex;
+    flex: none;
+    gap: var(--op-space-1);
+    margin-inline-start: auto;
+    padding-inline: var(--op-space-2);
+  }
 }
 
 @layer optikos {
@@ -2247,6 +2361,20 @@
   }
 }
 
+@layer optikos {
+  :root {
+    --op-quicksearch-width: 14rem;
+  }
+  .op-quicksearch__group {
+    display: flex;
+    flex: none;
+    padding-inline: var(--op-space-2);
+  }
+  .op-quicksearch {
+    inline-size: var(--op-quicksearch-width);
+  }
+}
+
 @layer optikos {
   .op-grid__body-row.is-row-editing {
     z-index: 2;
@@ -2362,11 +2490,130 @@
   }
 }
 
+@layer optikos {
+  :root {
+    --op-timeentry-handle: 0.5rem;
+    --op-timeentry-cursor: 0.125rem;
+    --op-timeentry-grip: 0.125rem;
+  }
+  .op-timeline--entry .op-timeline__lane {
+    cursor: crosshair;
+    border-radius: var(--op-radius);
+  }
+  .op-timeline--entry .op-timeline__lane:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-timeline--entry .op-timeline__track {
+    touch-action: pan-y;
+  }
+  .op-timeline--entry .op-timeline__bar {
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+  .op-timeline--entry .op-timeline__bar.is-dragging {
+    cursor: grabbing;
+    z-index: 1;
+    box-shadow: var(--op-shadow);
+  }
+  .op-timeline--entry .op-timeline__bar.is-locked {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  .op-timeline--entry .op-timeline__bar.is-invalid,
+  .op-timeentry__ghost.is-invalid {
+    --op-timeline-c: var(--op-color-danger);
+  }
+  .is-time-dragging {
+    user-select: none;
+  }
+  .op-timeentry__handle {
+    position: absolute;
+    inset-block: 0;
+    inline-size: var(--op-timeentry-handle);
+    cursor: ew-resize;
+  }
+  .op-timeentry__handle--start { inset-inline-start: 0; }
+  .op-timeentry__handle--end { inset-inline-end: 0; }
+  .op-timeentry__handle::after {
+    content: '';
+    position: absolute;
+    inset-block: 25%;
+    inset-inline-start: 40%;
+    inline-size: var(--op-timeentry-grip);
+    border-radius: var(--op-timeentry-grip);
+    background: currentColor;
+    opacity: 0.6;
+  }
+  .op-timeentry__ghost {
+    --op-timeline-c: var(--op-color-primary);
+    position: absolute;
+    inset-block: 0;
+    border: var(--op-border-width) dashed var(--op-timeline-c);
+    border-radius: var(--op-radius);
+    background: color-mix(in srgb, var(--op-timeline-c) 25%, transparent);
+    pointer-events: none;
+  }
+  .op-timeentry__cursor {
+    position: absolute;
+    inset-block: 0;
+    inline-size: var(--op-timeentry-cursor);
+    background: var(--op-color-focus);
+    pointer-events: none;
+  }
+  .op-timeentry__lane.is-under .op-timeline__lane-name { color: var(--op-color-warning); }
+  .op-timeentry__lane.is-met .op-timeline__lane-name { color: var(--op-color-success); }
+  .op-timeentry__lane.is-over .op-timeline__lane-name { color: var(--op-color-danger); }
+  .op-timeentry__grand {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--op-space-3);
+    padding: var(--op-space-2);
+    border-block-start: var(--op-border-width) solid var(--op-color-border-strong);
+    font-size: var(--op-font-size-sm);
+  }
+
+  .op-timeline--vertical.op-timeline--entry .op-timeline__track {
+    touch-action: auto;
+  }
+  .op-timeline--vertical .op-timeentry__handle {
+    inset-block: auto;
+    inset-inline: 0;
+    inline-size: auto;
+    block-size: var(--op-timeentry-handle);
+    cursor: ns-resize;
+  }
+  .op-timeline--vertical .op-timeentry__handle--start { inset-block-start: 0; }
+  .op-timeline--vertical .op-timeentry__handle--end { inset-block-end: 0; }
+  .op-timeline--vertical .op-timeentry__handle::after {
+    inset-block: 40% auto;
+    inset-inline: 25%;
+    inline-size: auto;
+    block-size: var(--op-timeentry-grip);
+  }
+  .op-timeline--vertical .op-timeentry__ghost {
+    inset-block: auto;
+    inset-inline: 0;
+  }
+  .op-timeline--vertical .op-timeentry__cursor {
+    inset-block: auto;
+    inset-inline: 0;
+    inline-size: auto;
+    block-size: var(--op-timeentry-cursor);
+  }
+  .op-timeline--vertical .op-timeentry__grand {
+    grid-column: 1 / -1;
+  }
+}
+
 @layer optikos {
   :root {
     --op-timeline-marker: 0.875rem;
     --op-timeline-when-width: 8rem;
     --op-timeline-lane-width: 8rem;
+    --op-timeline-axis-width: 4rem;
+    --op-timeline-height: 32rem;
     --op-timeline-bar-height: 1.75rem;
     --op-timeline-line: 2px;
   }
@@ -2501,6 +2748,49 @@
     background: var(--op-color-danger);
     pointer-events: none;
   }
+
+  .op-timeline--vertical.op-timeline--range {
+    display: grid;
+    gap: var(--op-space-2);
+  }
+  .op-timeline--vertical .op-timeline__axis,
+  .op-timeline--vertical .op-timeline__lane {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border-block-start: 0;
+    border-inline-start: var(--op-border-width) solid var(--op-color-border);
+    padding-block: 0;
+    padding-inline: var(--op-space-1);
+    min-inline-size: 0;
+  }
+  .op-timeline--vertical .op-timeline__axis {
+    border-inline-start: 0;
+  }
+  .op-timeline--vertical .op-timeline__lane-name {
+    text-align: center;
+    padding-block-end: var(--op-space-1);
+  }
+  .op-timeline--vertical .op-timeline__track,
+  .op-timeline--vertical .op-timeline__axis .op-timeline__track {
+    block-size: var(--op-timeline-height);
+  }
+  .op-timeline--vertical .op-timeline__tick {
+    inset-inline-start: 0;
+    transform: translateY(-50%);
+  }
+  .op-timeline--vertical .op-timeline__bar {
+    inset-block: auto;
+    inset-inline: 0;
+    align-items: flex-start;
+    padding-block: var(--op-space-1);
+  }
+  .op-timeline--vertical .op-timeline__now {
+    inset-block: auto;
+    inset-inline: 0;
+    inline-size: auto;
+    block-size: var(--op-timeline-line);
+  }
 }
 
 @layer optikos {
@@ -2743,6 +3033,67 @@
   }
 }
 
+@layer optikos {
+  :root {
+    --op-alert-accent: 0.25rem;
+    --op-alert-icon-offset: 0.125em;
+  }
+  .op-alert {
+    --_tone: var(--op-color-info);
+    --_soft: var(--op-color-info-soft);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--op-space-3);
+    padding: var(--op-space-3) var(--op-space-4);
+    color: var(--op-alert-fg, var(--op-color-fg));
+    background: var(--op-alert-bg, var(--_soft));
+    border: var(--op-border-width) solid var(--_tone);
+    border-inline-start-width: var(--op-alert-accent);
+    border-radius: var(--op-alert-radius, var(--op-radius));
+    font-family: var(--op-font-family);
+    min-inline-size: 0;
+  }
+  .op-alert--success { --_tone: var(--op-color-success); --_soft: var(--op-color-success-soft); }
+  .op-alert--warning { --_tone: var(--op-color-warning); --_soft: var(--op-color-warning-soft); }
+  .op-alert--danger { --_tone: var(--op-color-danger); --_soft: var(--op-color-danger-soft); }
+  .op-alert[hidden] {
+    display: none;
+  }
+  .op-alert__icon {
+    display: inline-flex;
+    flex: none;
+    margin-block-start: var(--op-alert-icon-offset);
+    color: var(--_tone);
+  }
+  .op-alert__body {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .op-alert__title {
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-alert__text {
+    overflow-wrap: anywhere;
+  }
+  .op-alert__close {
+    display: inline-flex;
+    flex: none;
+    padding: var(--op-space-1);
+    color: inherit;
+    background: none;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+  }
+  .op-alert__close:hover {
+    background: color-mix(in srgb, var(--_tone) 15%, transparent);
+  }
+  .op-alert__close:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+}
+
 @layer optikos {
   :root {
     --op-checkbox-size: 1.125rem;
@@ -4060,6 +4411,20 @@
     opacity: 0.4;
     cursor: default;
   }
+  .op-carousel__footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--op-space-1);
+  }
+  .op-carousel__footer:not(:has(:not([hidden]))) {
+    display: none;
+  }
+  .op-carousel__caption {
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    text-align: center;
+  }
   .op-carousel__bar {
     display: flex;
     align-items: center;
@@ -4069,6 +4434,49 @@
   .op-carousel__bar:not(:has(:not([hidden]))) {
     display: none;
   }
+  .op-carousel--fade .op-carousel__track {
+    display: grid;
+    overflow: hidden;
+    scroll-snap-type: none;
+  }
+  .op-carousel--fade .op-carousel__track > * {
+    grid-area: 1 / 1;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--op-carousel-fade, 600ms) var(--op-easing), visibility 0s linear var(--op-carousel-fade, 600ms);
+  }
+  .op-carousel--fade .op-carousel__track > .is-active {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity var(--op-carousel-fade, 600ms) var(--op-easing);
+  }
+  .op-carousel--overlay {
+    position: relative;
+  }
+  .op-carousel--overlay .op-carousel__footer {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    padding: var(--op-space-6) var(--op-space-3) var(--op-space-3);
+    color: var(--op-carousel-overlay-fg, var(--op-color-surface));
+    background: linear-gradient(transparent, var(--op-carousel-scrim, color-mix(in srgb, var(--op-color-fg) 65%, transparent)));
+    border-end-start-radius: var(--op-carousel-radius, var(--op-radius));
+    border-end-end-radius: var(--op-carousel-radius, var(--op-radius));
+    pointer-events: none;
+  }
+  .op-carousel--overlay .op-carousel__footer > * {
+    pointer-events: auto;
+  }
+  .op-carousel--overlay .op-carousel__caption,
+  .op-carousel--overlay .op-carousel__toggle {
+    color: inherit;
+  }
+  .op-carousel--overlay .op-carousel__dot {
+    background: color-mix(in srgb, currentColor 45%, transparent);
+  }
+  .op-carousel--overlay .op-carousel__dot[aria-current] {
+    background: currentColor;
+  }
   .op-carousel__dots {
     display: flex;
     gap: var(--op-space-1);
@@ -4111,6 +4519,9 @@
     .op-carousel__track {
       scroll-behavior: auto;
     }
+    .op-carousel--fade .op-carousel__track > * {
+      transition: none;
+    }
   }
 }
 

package/dist/types/build/build.d.ts

@@ -0,0 +1,49 @@
+import { Grid, type GridConfig } from '../components/data/grid/grid.js';
+import { Form, type FormConfig } from '../components/form/form/form.js';
+import type { FilterField } from '../components/data/filterbuilder/filterbuilder.js';
+import type { Column } from '../data/column.js';
+import type { Component } from '../core/component.js';
+export type FieldKind = 'text' | 'email' | 'area' | 'number' | 'money' | 'duration' | 'date' | 'datetime' | 'select' | 'bool';
+type Cfg = Record<string, any>;
+export interface FieldSpec {
+    /** The record's property. */
+    name: string;
+    /** Default: the name as words (`unitPrice` → "Unit price"). */
+    label?: string;
+    /** Default `text`. `duration` is a number of minutes, shown as `7h 30m`. */
+    type?: FieldKind;
+    /** For `select`. */
+    options?: Array<string | number | {
+        value: string | number;
+        label: string;
+    }>;
+    /** Picks the value in a lookup window: a LookupDef or the name given to `registerLookup`. */
+    lookup?: Cfg | string;
+    required?: boolean;
+    readonly?: boolean;
+    /** A band over the grid header and a section of the form. */
+    group?: string;
+    /** Total of the (filtered) rows in the grid: the starting total of the `columnTotals()` plugin. */
+    summary?: Column['summary'];
+    /** Grid column width in px. */
+    width?: number;
+    /** Leaves the field out of some of the builds. */
+    hide?: Array<'grid' | 'form' | 'filter'>;
+    /** Overrides for what each build makes. */
+    column?: Partial<Column>;
+    field?: Cfg;
+    filter?: Partial<FilterField>;
+}
+/** Grid columns: right-aligned numbers and money, formatted dates and booleans. */
+export declare function buildColumns(specs: FieldSpec[]): Column[];
+/** Form fields (instances), in order. */
+export declare function buildFields(specs: FieldSpec[]): Component[];
+/** Fields for a `FilterBuilder`; `bool` filters as a Yes/No choice. */
+export declare function buildFilterFields(specs: FieldSpec[]): FilterField[];
+/** A `Grid` whose columns come from the specs. `cfg` adds or overrides anything (`store`, `selection`, ...). */
+export declare const buildGrid: (specs: FieldSpec[], cfg?: Partial<GridConfig>) => Grid<any>;
+/** A `Form` with the fields in `columns` columns (default 2); specs with a `group` go in a `FieldSet` of that title. */
+export declare function buildForm(specs: FieldSpec[], cfg?: FormConfig & {
+    columns?: number;
+}): Form;
+export {};

package/dist/types/build/index.d.ts

@@ -0,0 +1 @@
+export { buildColumns, buildFields, buildFilterFields, buildGrid, buildForm, type FieldSpec, type FieldKind } from './build.js';

package/dist/types/components/alert.d.ts

@@ -0,0 +1 @@
+export * from '../components/feedback/alert/alert.js';

package/dist/types/components/base/label/label.d.ts

@@ -4,11 +4,21 @@ export interface LabelConfig extends ComponentConfig {
     /** Id of the field this label names (renders a `<label for>`). */
     for?: string;
     variant?: 'default' | 'muted' | 'title';
+    /** The element: `h1`…`h6` make it a heading, `p` a paragraph. Default `span` (`label` with `for`). */
+    tag?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** An icon before the text. */
+    icon?: string;
+    /** An image before the text (a logo): `alt` names it (empty for a decorative one). */
+    src?: string;
+    alt?: string;
 }
 export declare class Label extends Component<LabelConfig> {
     protected baseCls: string;
-    protected build(): HTMLLabelElement | HTMLSpanElement;
+    protected build(): HTMLDivElement | HTMLHeadingElement | HTMLLabelElement | HTMLParagraphElement | HTMLSpanElement;
     protected onRender(): void;
+    private paint;
     setText(text: string): void;
+    setIcon(icon: string | undefined): void;
+    setImage(src: string | undefined, alt?: string): void;
     setVariant(variant: NonNullable<LabelConfig['variant']>): void;
 }

package/dist/types/components/charts/stat/stat.d.ts

@@ -14,6 +14,10 @@ export interface StatConfig extends ComponentConfig {
     icon?: string;
     /** Numbers for a sparkline beside the value. */
     trend?: number[];
+    /** Makes the tile a link. */
+    href?: string;
+    /** Makes the tile a button (focusable, Enter/Space): drill down, open a detail. */
+    handler?: (stat: Stat, ev: Event) => void;
 }
 /** A KPI tile: a label, a big value, the change since last time and an optional sparkline. */
 export declare class Stat extends Component<StatConfig> {
@@ -23,9 +27,11 @@ export declare class Stat extends Component<StatConfig> {
     private deltaEl;
     private captionEl;
     private chart?;
-    protected build(): HTMLDivElement;
+    protected build(): HTMLAnchorElement | HTMLDivElement;
     protected onRender(): void;
     setLabel(label: string): void;
+    /** An interactive tile reads as one sentence: "Open orders: 12". */
+    private name;
     setValue(value: number | string | null): void;
     setDelta(delta: number | undefined): void;
     setCaption(caption: string): void;

package/dist/types/components/columntotals.d.ts

@@ -0,0 +1 @@
+export * from '../components/data/columntotals/columntotals.js';

package/dist/types/components/data/columntotals/columntotals.d.ts

@@ -0,0 +1,24 @@
+import type { Model } from '../../../data/model.js';
+import type { GridPlugin } from '../grid/grid.js';
+/** An operation offered in the column menu besides the built-in ones. */
+export interface TotalOperation {
+    text: string;
+    /** The column's values and the records of every filtered row. */
+    run: (values: any[], recs: Model[]) => unknown;
+}
+export interface ColumnTotalsOptions {
+    /** Your own operations (a median, a weighted mean...). Offered on every column. */
+    operations?: TotalOperation[];
+    /**
+     * Where the answer goes: `'bar'` (default) keeps it in a bar under the grid; `'modal'` answers in a dialog and `'toast'` in a
+     * notice, once, and nothing stays on the grid.
+     */
+    show?: 'bar' | 'modal' | 'toast';
+    /** `bar` only: under the grid (default) or `'top'`, right under the header, above the rows (a row of the grid itself). */
+    position?: 'bottom' | 'top';
+}
+/**
+ * A button on every column header opens a menu of totals (sum, average, minimum, maximum, count, your own); the choice
+ * shows in a bar under the grid, over every filtered row. A column's `summary` is where it starts and where it is kept.
+ */
+export declare function columnTotals(options?: ColumnTotalsOptions): GridPlugin;

package/dist/types/components/data/exportbar/exportbar.d.ts

@@ -0,0 +1,24 @@
+import type { GridPlugin } from '../grid/grid.js';
+export type ExportBarAction = 'csv' | 'xlsx' | 'page' | 'print';
+export interface ExportBarOptions {
+    /** Each button: `false` leaves it out. `csv`, `xlsx` and `print` default to true; `page` (CSV of the page on screen) to true on a paged grid. */
+    csv?: boolean;
+    xlsx?: boolean;
+    page?: boolean;
+    print?: boolean;
+    /** File name without extension. Default `export`. */
+    filename?: string;
+    /** A heading above the printed table. */
+    title?: string;
+    /** Show the text beside the icons. Default false (icons with a tooltip). */
+    labels?: boolean;
+}
+export interface ExportBar extends GridPlugin {
+    setVisible(action: ExportBarAction, visible: boolean): void;
+    setDisabled(action: ExportBarAction, disabled: boolean): void;
+}
+/**
+ * Export and print buttons inside the grid, in a row with the pager: `plugins: [exportBar({ print: false })]`. They run
+ * `exportGrid` and `printGrid`, which still work on their own from your own buttons.
+ */
+export declare function exportBar(options?: ExportBarOptions): ExportBar;

package/dist/types/components/data/grid/footer.d.ts

@@ -0,0 +1,6 @@
+import type { Grid } from './grid.js';
+/**
+ * The row under a grid where the pager and the plugins' icon buttons sit side by side. Each plugin adds its own group;
+ * the last one out gives the pager back.
+ */
+export declare function addFooterGroup(grid: Grid, group: HTMLElement): () => void;

package/dist/types/components/data/grouping/controls.d.ts

@@ -0,0 +1,27 @@
+import type { Model } from '../../../data/model.js';
+import type { Grid } from '../grid/grid.js';
+export type GroupingControl = 'expand' | 'collapse' | 'by';
+/** A way to group, offered in the "Group by" menu: a record field or any function of the record. */
+export interface GroupChoice {
+    text: string;
+    field?: string;
+    by?: (rec: Model) => unknown;
+}
+interface Target {
+    expandAll(): void;
+    collapseAll(): void;
+    setGroupBy(by: string | ((rec: Model) => unknown) | null): void;
+}
+/** Icon buttons in the grid's footer row (beside the pager): expand all, collapse all and a "Group by" menu. */
+export declare function groupingControls(grid: Grid, target: Target, o: {
+    expand?: boolean;
+    collapse?: boolean;
+    by?: boolean;
+    choices: GroupChoice[];
+    current?: string;
+}): {
+    set: (a: GroupingControl, visible: boolean) => void | undefined;
+    disable: (a: GroupingControl, disabled: boolean) => void | undefined;
+    destroy(): void;
+};
+export {};