@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-table.mjs

@@ -0,0 +1,2518 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, model, input, booleanAttribute, numberAttribute, output, ElementRef, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, HostAttributeToken, afterNextRender, DestroyRef, Directive } from '@angular/core';
+import { nextSelection, createFilter } from '@slotted/core/collection';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+import { createControllable } from '@slotted/core/state';
+import { injectMessages } from '@slotted/angular/i18n';
+import { tableMessages } from '@slotted/core/i18n';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { createScrollAffordance } from '@slotted/core/overflow';
+import { parseISODate, isPlainDate, toISODate, parseISOTime, parseISODateTime, isPlainTime, toISOTime, isPlainDateTime } from '@slotted/core/date';
+import { emptyFilter, defaultOperator, operatorsFor, isFilterActive, describeFilter, isConditionActive, operandCount, withCondition, withJoin, normalizeFilter, serializeFilter } from '@slotted/core/filter';
+import { NgTemplateOutlet } from '@angular/common';
+import { SlButton } from '@slotted/angular/button';
+import { SlCheckbox } from '@slotted/angular/checkbox';
+import { SlDatePicker } from '@slotted/angular/date-picker';
+import { SlDateRangePicker, SlDateRangePickerPresets } from '@slotted/angular/date-range-picker';
+import { SlDateTimePicker } from '@slotted/angular/datetime-picker';
+import { SlDateTimeRangePicker, SlDateTimeRangePickerPresets } from '@slotted/angular/datetime-range-picker';
+import { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';
+import { SlPopover, SlPopoverContent, SlPopoverLayer, SlPopoverTrigger } from '@slotted/angular/popover';
+import { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';
+import { SlSelect, SlSelectItem } from '@slotted/angular/select';
+import { SlTagsInput } from '@slotted/angular/tags-input';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+import { SlTimePicker } from '@slotted/angular/time-picker';
+import { SlTimeRangePicker, SlTimeRangePickerPresets } from '@slotted/angular/time-range-picker';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlSkeleton } from '@slotted/angular/skeleton';
+import * as i1 from '@slotted/angular/tooltip';
+import { SlTooltip, SlTooltipContent, SlTooltipLayer, provideTooltipDefaults, SlTooltipTrigger } from '@slotted/angular/tooltip';
+
+const FALLBACK = {
+    cellAlign: 'center',
+    columns: 1,
+    layout: 'auto',
+    selectionMode: 'none',
+    stickyFooter: false,
+    stickyHeader: false,
+    stickyTo: 'scroll',
+    striped: false,
+    variant: 'ruled',
+};
+const TABLE_DEFAULTS = new InjectionToken('slotted table defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its tables are framed and how they select,
+ * rather than repeating the same inputs on every listing screen. A table that
+ * states any of them itself still wins. Its words come from the language in
+ * force (`provideSlotted`).
+ */
+function provideTableDefaults(defaults) {
+    return {
+        provide: TABLE_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+function injectTableDefaults() {
+    return inject(TABLE_DEFAULTS);
+}
+/**
+ * Application-scoped rather than module-scoped, for the reason `field` records:
+ * a module-level counter produces colliding sequences when two applications
+ * render in one server process, and the server and the client sequences must
+ * match for hydration.
+ */
+class SlTableIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-table-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Every selectable row, in the order the body renders them. */
+const TABLE_ROW_SELECTOR = '[data-part="body"] > [data-part="row"][data-value]';
+/**
+ * A table of moderate data: the platform's own structure, with sorting,
+ * selection, expansion and a place for a paging control.
+ *
+ * **The role is `table`, not `grid`.** The APG is explicit — a table "is not an
+ * interactive widget. Thus, its cells are not focusable or selectable" — so
+ * every control inside it is its own tab stop and the family binds no key of
+ * its own. `data-grid` is the composite widget with a cell cursor.
+ *
+ * **The family holds the sort and reorders nothing.** The rows are the
+ * consumer's own, written with `@for` over their own array; reordering them
+ * would mean owning the data, which is the line between this family and
+ * `data-grid`.
+ *
+ * **The selection is a form value.** A bulk-action screen is a reactive form
+ * rather than a component with a callback, which no surveyed Angular table
+ * offers.
+ */
+class SlTable {
+    /** Which column the rows are ordered by. Two-way, so a template binds it. */
+    sort = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    /** The chosen rows, in the collection's own order. */
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The rows whose detail is open. */
+    expanded = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    layout = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    selectionMode = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Where every cell's content sits in a row as tall as its tallest cell. A
+     * cell states `blockAlign` to answer differently.
+     */
+    cellAlign = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellAlign" }] : /* istanbul ignore next */ []));
+    striped = input(undefined, { ...(ngDevMode ? { debugName: "striped" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    stickyHeader = input(undefined, { ...(ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /**
+     * Holds the summary rows against the bottom of the same box the header is
+     * held against the top of, so a total does not scroll out of the view that
+     * exists to show it. It pins the `tfoot` and not the footer bar, which is
+     * outside the scroller and never leaves.
+     */
+    stickyFooter = input(undefined, { ...(ngDevMode ? { debugName: "stickyFooter" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /**
+     * What the sticky header stays inside. `page` releases the family's own
+     * scroll container, so the table can no longer scroll sideways in its frame.
+     */
+    stickyTo = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stickyTo" }] : /* istanbul ignore next */ []));
+    /**
+     * How many columns the table renders. The spanning parts — the detail row,
+     * the empty cell, the skeleton rows — need the number, and reading it from
+     * the DOM would be nothing on the server and a count on the client.
+     */
+    columns = input(undefined, { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), transform: (count) => (count === undefined ? undefined : numberAttribute(count)) });
+    /** A refresh over rows already shown: `aria-busy`, and nothing moves. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * selection, expansion and sort words, the scrolling region's name and every
+     * word of the column filters.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** One output per transition, each carrying the reason and the event. */
+    sortChangeRequest = output();
+    valueChangeRequest = output();
+    expandedChangeRequest = output();
+    defaults = injectTableDefaults();
+    host = inject(ElementRef);
+    id = inject(SlTableIdFactory).next();
+    /** Where a range starts: the row of the last press that held no modifier. */
+    anchor = undefined;
+    touched = undefined;
+    notify = undefined;
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedLayout = computed(() => this.layout() ?? this.defaults.layout, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
+    resolvedCellAlign = computed(() => this.cellAlign() ?? this.defaults.cellAlign, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCellAlign" }] : /* istanbul ignore next */ []));
+    resolvedMode = computed(() => this.selectionMode() ?? this.defaults.selectionMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
+    resolvedStriped = computed(() => this.striped() ?? this.defaults.striped, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedStriped" }] : /* istanbul ignore next */ []));
+    resolvedStickyHeader = computed(() => this.stickyHeader() ?? this.defaults.stickyHeader, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedStickyHeader" }] : /* istanbul ignore next */ []));
+    resolvedStickyFooter = computed(() => this.stickyFooter() ?? this.defaults.stickyFooter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedStickyFooter" }] : /* istanbul ignore next */ []));
+    resolvedStickyTo = computed(() => this.stickyTo() ?? this.defaults.stickyTo, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedStickyTo" }] : /* istanbul ignore next */ []));
+    resolvedColumns = computed(() => this.columns() ?? this.defaults.columns, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedColumns" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this table's `messages` laid over them. */
+    t = injectMessages(tableMessages, this.messages);
+    isSelected(key) {
+        return this.value().includes(key);
+    }
+    isExpanded(key) {
+        return this.expanded().includes(key);
+    }
+    /**
+     * Every selectable row's value, read out of the DOM at the moment it is
+     * needed rather than kept in a registry. A registry holds the order rows were
+     * created in, and a sorted table renders the same rows in a new order without
+     * destroying one of them — so the range and the select-all would run against
+     * the order before the sort.
+     */
+    rows() {
+        return [...this.host.nativeElement.querySelectorAll(TABLE_ROW_SELECTOR)]
+            .filter((row) => !row.hasAttribute('data-disabled'))
+            .map((row) => row.getAttribute('data-value') ?? '');
+    }
+    requestSort(column, source) {
+        /**
+         * Ascending, descending, then none — the third state Material and Ant both
+         * ship and Carbon does not. A reader who sorted a column by accident has no
+         * other way back.
+         */
+        const held = this.sort();
+        const next = held?.column !== column
+            ? { column, direction: 'ascending' }
+            : held.direction === 'ascending'
+                ? { column, direction: 'descending' }
+                : null;
+        const state = createControllable({
+            initial: held,
+            equals: (a, b) => a?.column === b?.column && a?.direction === b?.direction,
+            onRequest: (request) => this.sortChangeRequest.emit(request),
+        });
+        const moved = state.request(next, next === null ? 'clear' : 'pointer', source);
+        /**
+         * `aria-sort` is a property, and a property that changes silently is a
+         * change no reader hears. None of the six surveyed implementations says it.
+         */
+        const heading = source?.currentTarget?.textContent?.trim() ?? column;
+        const said = next === null
+            ? this.t('sortCleared', { column: heading })
+            : next.direction === 'ascending'
+                ? this.t('sortedAscending', { column: heading })
+                : this.t('sortedDescending', { column: heading });
+        getLiveAnnouncer(this.host.nativeElement.ownerDocument).announce(said);
+        if (moved)
+            this.sort.set(next);
+    }
+    toggleSelected(key, options) {
+        const result = nextSelection({
+            action: options.range && this.resolvedMode() === 'multiple' ? 'range' : 'toggle',
+            anchor: this.anchor,
+            behavior: 'toggle',
+            key,
+            keys: this.rows(),
+            mode: this.resolvedMode(),
+            selected: this.value(),
+        });
+        if (!options.range)
+            this.anchor = key;
+        this.requestValue(result.selected, options.range ? 'select' : 'pointer', options.source);
+    }
+    toggleSelectAll(source) {
+        const result = nextSelection({
+            action: 'all',
+            keys: this.rows(),
+            mode: this.resolvedMode(),
+            selected: this.value(),
+        });
+        this.requestValue(result.selected, result.selected.length === 0 ? 'clear' : 'select', source);
+    }
+    toggleExpanded(key, source) {
+        const held = this.expanded();
+        const next = held.includes(key) ? held.filter((open) => open !== key) : [...held, key];
+        const state = createControllable({
+            initial: held,
+            equals: (a, b) => a.length === b.length && a.every((open, index) => open === b[index]),
+            onRequest: (request) => this.expandedChangeRequest.emit(request),
+        });
+        if (state.request(next, 'pointer', source))
+            this.expanded.set(next);
+    }
+    /** The form's own value is the selection, which is what a bulk action acts on. */
+    writeValue(value) {
+        this.value.set(value ?? []);
+    }
+    registerOnChange(fn) {
+        this.notify = fn;
+    }
+    registerOnTouched(fn) {
+        this.touched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    disabledByForm = computed(() => this.formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledByForm" }] : /* istanbul ignore next */ []));
+    requestValue(next, reason, source) {
+        const state = createControllable({
+            initial: this.value(),
+            equals: (a, b) => a.length === b.length && a.every((key, index) => key === b[index]),
+            onRequest: (request) => this.valueChangeRequest.emit(request),
+        });
+        if (!state.request(next, reason, source))
+            return;
+        this.value.set(next);
+        this.notify?.(next);
+        this.touched?.();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlTable, isStandalone: true, selector: "div[slTable]", inputs: { sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, cellAlign: { classPropertyName: "cellAlign", publicName: "cellAlign", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, stickyFooter: { classPropertyName: "stickyFooter", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, stickyTo: { classPropertyName: "stickyTo", publicName: "stickyTo", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", value: "valueChange", expanded: "expandedChange", sortChangeRequest: "sortChangeRequest", valueChangeRequest: "valueChangeRequest", expandedChangeRequest: "expandedChangeRequest" }, host: { attributes: { "data-ui": "table", "data-part": "root" }, properties: { "attr.data-variant": "resolvedVariant()", "attr.data-layout": "resolvedLayout()", "attr.data-cell-align": "resolvedCellAlign()", "attr.data-striped": "resolvedStriped() ? '' : null", "attr.data-sticky-header": "resolvedStickyHeader() ? '' : null", "attr.data-sticky-footer": "resolvedStickyFooter() ? '' : null", "attr.data-sticky-to": "resolvedStickyTo()", "attr.data-loading": "loading() ? '' : null" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlTable), multi: true }], exportAs: ["slTable"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui=table][data-part=root]{--_row-min-block: var( --slotted-table-row-min-block-size, var(--slotted-control-height-md, 34px) );--_font-size: var(--slotted-table-font-size, var(--slotted-control-font-size-md, 13px));--_icon-size: var(--slotted-table-icon-size, var(--slotted-control-icon-size-md, 16px));--_gap: var(--slotted-table-gap, var(--slotted-control-gap-md, 8px));--_pad-inline: var( --slotted-table-cell-padding-inline, var(--slotted-control-padding-inline-md, 13px) );--_pad-block: var( --slotted-table-cell-padding-block, max( var(--slotted-space-2, .25rem), calc((var(--_row-min-block) - var(--_font-size) * var(--slotted-line-height-md, 1.5)) / 2) ) );--_line: calc(var(--_font-size) * var(--slotted-line-height-md, 1.5));--_radius: var(--slotted-table-radius, var(--slotted-radius-md, 6px));--_rule: var(--slotted-table-border-color, var(--slotted-border-subtle, ButtonBorder));--_rule-strong: var( --slotted-table-border-color-strong, var(--slotted-border-strong, ButtonBorder) );--_rule-width: var(--slotted-table-border-width, var(--slotted-border-width-thin, 1px));--_text: var(--slotted-table-color, var(--slotted-text, CanvasText));--_muted: var(--slotted-table-color-muted, var(--slotted-text-muted, GrayText));--_surface: var(--slotted-table-surface, var(--slotted-ground, var(--slotted-surface, Canvas)));--_head-surface: var( --slotted-table-header-surface, color-mix(in oklab, var(--slotted-text, CanvasText) 8%, var(--_surface)) );--_stripe: var( --slotted-table-row-surface-stripe, color-mix(in oklab, var(--slotted-text, CanvasText) 5%, var(--_surface)) );--_hover: var( --slotted-table-row-surface-hover, var(--slotted-tone-secondary-subtle-hover, ButtonFace) );--_selected: var( --slotted-table-row-surface-selected, var(--slotted-tone-accent-surface, Canvas) );--_selected-hover: var( --slotted-table-row-surface-selected-hover, var(--slotted-tone-accent-subtle-hover, ButtonFace) );--_selected-text: var( --slotted-table-row-color-selected, var(--slotted-tone-accent-text, CanvasText) );background-color:var(--_surface);box-sizing:border-box;color:var(--_text);display:block;isolation:isolate;font-family:var(--slotted-table-font-family, var(--slotted-control-font-family));font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5);max-inline-size:100%}[data-ui=table][data-variant=framed]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-table-shadow, var(--slotted-shadow-xs, none));overflow:clip}[data-ui=table] [data-part=scroll]{overflow:auto;overscroll-behavior-inline:contain}[data-ui=table] [data-part=scroll]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=table] [data-part=table]{border-collapse:separate;border-spacing:0;inline-size:max-content;min-inline-size:100%;text-align:start}[data-ui=table][data-layout=fixed] [data-part=table]{inline-size:100%;table-layout:fixed}[data-ui=table] [data-part=caption]{caption-side:block-start;color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);padding-block:var(--_pad-block);padding-inline:var(--_pad-inline);text-align:start}[data-ui=table] [data-part=column-header],[data-ui=table] [data-part=head] [data-part=selection]{background-color:var(--_head-surface);border-block-end:var(--_rule-width) solid var(--_rule-strong);color:var(--_text);font-weight:var(--slotted-font-weight-semibold, 600);padding-block:var(--_pad-block);padding-inline:var(--_pad-inline);position:relative;text-align:start;vertical-align:bottom}[data-ui=table][data-variant=plain] [data-part=column-header]{background-color:transparent}[data-ui=table] [data-part=row]{background-color:var(--_surface)}[data-ui=table]{--_cell-align: middle}[data-ui=table][data-cell-align=start]{--_cell-align: top}[data-ui=table][data-cell-align=end]{--_cell-align: bottom}[data-ui=table] [data-part=cell],[data-ui=table] [data-part=row-header]{padding-block:var(--_pad-block);padding-inline:var(--_pad-inline);text-align:start;vertical-align:var(--_cell-align)}[data-ui=table] [data-block-align=start]{vertical-align:top}[data-ui=table] [data-block-align=center]{vertical-align:middle}[data-ui=table] [data-block-align=end]{vertical-align:bottom}[data-ui=table] :is([data-part=cell],[data-part=row-header]):has(>[data-part=root][data-variant=plain]:is([data-ui=select],[data-ui=combobox],[data-ui=multi-select],[data-ui=text-field],[data-ui=textarea],[data-ui=number-field],[data-ui=currency-field],[data-ui=date-field],[data-ui=time-field],[data-ui=datetime-field],[data-ui=tags-input],[data-ui=date-range-picker],[data-ui=time-range-picker],[data-ui=datetime-range-picker],[data-ui=entity-picker])){--slotted-control-padding-inline-sm: var(--_pad-inline);--slotted-control-padding-inline-md: var(--_pad-inline);--slotted-control-padding-inline-lg: var(--_pad-inline);--slotted-control-height-sm: var(--_row-min-block);--slotted-control-height-md: var(--_row-min-block);--slotted-control-height-lg: var(--_row-min-block);padding:0}[data-ui=table] [data-part=row-header]{font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=table]:is([data-variant=ruled],[data-variant=framed]) [data-part=body]>[data-part=row]>*{border-block-end:var(--_rule-width) solid var(--_rule)}[data-ui=table]:is([data-variant=ruled],[data-variant=framed]) [data-part=body]>[data-part=row]:last-child>*{border-block-end-color:transparent}[data-ui=table][data-striped] [data-part=body]>[data-part=row]:nth-child(2n){background-color:var(--_stripe)}[data-ui=table] [data-part=body]>[data-part=row]:not([data-disabled]):hover{background-color:var(--_hover)}[data-ui=table] [data-part=body]>[data-part=row][data-selected]{background-color:var(--_selected);color:var(--_selected-text)}[data-ui=table] [data-part=body]>[data-part=row][data-selected]:not([data-disabled]):hover{background-color:var(--_selected-hover)}[data-ui=table] [data-part=row][data-disabled]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=table] [data-align=start]{text-align:start}[data-ui=table] [data-align=center]{text-align:center}[data-ui=table] [data-align=end]{text-align:end}[data-ui=table] [data-numeric]{font-variant-numeric:tabular-nums}[data-ui=table] [data-numeric]:not([data-align]){text-align:end}[data-ui=table] [data-text=wrap]{overflow-wrap:anywhere}[data-ui=table] [data-text=nowrap]{white-space:nowrap}[data-ui=table] [data-text=truncate]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=table][data-sticky-header] [data-part=column-header],[data-ui=table][data-sticky-header] [data-part=head] [data-part=selection]{inset-block-start:var(--slotted-table-sticky-offset, 0);position:sticky;z-index:calc(var(--slotted-z-index-sticky, 100) + 1)}[data-ui=table][data-sticky-to=page] [data-part=scroll]{overflow:visible}[data-ui=table][data-sticky-footer] [data-part=summary]>[data-part=row]>*{inset-block-end:var(--slotted-table-sticky-offset-end, 0);position:sticky;z-index:calc(var(--slotted-z-index-sticky, 100) + 1)}[data-ui=table][data-sticky-footer] [data-part=summary] [data-sticky]{z-index:calc(var(--slotted-z-index-sticky, 100) + 2)}[data-ui=table] [data-sticky=start]{background-color:inherit;inset-inline-start:var(--slotted-table-sticky-inset, 0);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=table] [data-sticky=end]{background-color:inherit;inset-inline-end:var(--slotted-table-sticky-inset, 0);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=table][data-sticky-header] [data-part=column-header][data-sticky],[data-ui=table][data-sticky-header] [data-part=head] [data-part=selection][data-sticky]{background-color:var(--_head-surface);z-index:calc(var(--slotted-z-index-sticky, 100) + 2)}[data-ui=table] [data-sticky]:after{background-color:var(--slotted-table-border-color, var(--slotted-border-subtle));content:\"\";inline-size:var(--_rule-width);inset-block:calc(var(--_rule-width) * -1) 0;position:absolute;z-index:1}[data-ui=table] [data-sticky=start]:after{inset-inline-end:0}[data-ui=table] [data-sticky=end]:after{inset-inline-start:0}[data-ui=table] [data-part=column-header]:has(>[data-part=sort]){padding:0}[data-ui=table] [data-part=column-header]:has(>[data-part=column-actions]){--_actions-room: var( --slotted-table-column-actions-size, calc(var(--_pad-inline) + var(--slotted-target-min, 24px) + var(--_gap)) );padding-inline-end:var(--_actions-room)}[data-ui=table] [data-part=column-actions]{align-items:center;display:inline-flex;gap:var(--_gap);inset-block:0;inset-inline-end:var(--_pad-inline);position:absolute}[data-ui=table] [data-part=sort]{align-items:center;background-color:transparent;border:0;color:inherit;cursor:pointer;display:flex;font:inherit;gap:var(--_gap);inline-size:100%;justify-content:space-between;min-block-size:var(--slotted-target-min, 24px);min-inline-size:0;padding-block:var(--_pad-block);padding-inline:var(--_pad-inline);text-align:inherit}[data-ui=table] [data-align=center]>[data-part=sort]{justify-content:center}[data-ui=table] :is([data-align=end],[data-numeric]:not([data-align]))>[data-part=sort]{justify-content:end}[data-ui=table] [data-part=column-header]:has(>[data-part=sort]:not(:disabled)):hover{background-color:var( --slotted-table-header-surface-hover, color-mix(in oklab, var(--slotted-text, CanvasText) 7%, var(--_head-surface)) )}[data-ui=table] [data-part=column-header]{transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=table] [data-part=sort]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=table] [data-part=sort]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);opacity:0;transition:opacity var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),rotate var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=table] [data-part=sort]:not(:disabled):hover>[data-ui=icon],[data-ui=table] [data-part=sort]:focus-visible>[data-ui=icon]{opacity:.55}[data-ui=table] [aria-sort]>[data-part=sort]>[data-ui=icon]{opacity:1}[data-ui=table] [aria-sort=ascending]>[data-part=sort]>[data-ui=icon]{rotate:180deg}[data-ui=table] [data-part=selection]{inline-size:var(--slotted-table-selection-size, 3rem);padding-block:var(--_pad-block);padding-inline:var(--_pad-inline);text-align:center;vertical-align:var(--_cell-align);white-space:nowrap}[data-ui=table] [data-part=selection]>[data-ui=checkbox]{block-size:var(--_line)}[data-ui=table] [data-part=selection]{--slotted-selection-halo-opacity: 0}[data-ui=table] [data-part=cell]:has(>[data-part=expander]){inline-size:1%;padding-inline-end:0;white-space:nowrap}[data-ui=table] [data-part=column-actions] *:has([data-part=filter]){display:contents}[data-ui=table] [data-part=expander],[data-ui=table] [data-part=column-actions]>button,[data-ui=table] button[data-part=column-actions],[data-ui=table] [data-part=filter]{background-color:transparent;border:0;border-radius:var(--slotted-table-control-radius, var(--slotted-radius-sm, 4px));color:var(--_muted);cursor:pointer;display:inline-flex;block-size:var(--slotted-target-min, 24px);inline-size:var(--slotted-target-min, 24px);margin-block:calc((var(--_line) - var(--slotted-target-min, 24px)) / 2);padding:0;align-items:center;justify-content:center;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}@media(pointer:coarse){[data-ui=table] [data-part=expander],[data-ui=table] [data-part=column-actions]>button,[data-ui=table] button[data-part=column-actions],[data-ui=table] [data-part=filter]{position:relative}[data-ui=table] [data-part=expander]:after,[data-ui=table] [data-part=column-actions]>button:after,[data-ui=table] button[data-part=column-actions]:after,[data-ui=table] [data-part=filter]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}[data-ui=table] [data-part=column-actions]>button:after,[data-ui=table] button[data-part=column-actions]:after,[data-ui=table] [data-part=filter]:after{inset-inline-start:0}}[data-ui=table] [data-part=expander]:not(:disabled):hover{background-color:var(--_hover);color:var(--_text)}[data-ui=table] [data-part=column-actions]>button:not(:disabled):hover,[data-ui=table] button[data-part=column-actions]:not(:disabled):hover,[data-ui=table] [data-part=filter]:not(:disabled):hover{background-color:var( --slotted-table-header-surface-hover, color-mix(in oklab, var(--slotted-text, CanvasText) 7%, var(--_head-surface)) );color:var(--_text)}[data-ui=table] [data-part=expander]:focus-visible,[data-ui=table] [data-part=column-actions]>button:focus-visible,[data-ui=table] button[data-part=column-actions]:focus-visible,[data-ui=table] [data-part=filter]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:0}[data-ui=table] :is([data-part=column-actions],[data-part=filter]) :is(svg,img){block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=table] [data-part=filter][data-filtered],[data-ui=table] [data-part=filter][data-filtered]:not(:disabled):hover{color:var(--slotted-tone-accent-text, LinkText)}[data-ui=table][data-part=filter-panel]{--_gap: var(--slotted-table-gap, var(--slotted-control-gap-md, 8px));--_font-size: var(--slotted-table-font-size, var(--slotted-control-font-size-md, 13px));--_line: calc(var(--_font-size) * var(--slotted-line-height-md, 1.5));--_pad-block: var(--slotted-space-2, 4px);--_text: var(--slotted-table-color, var(--slotted-text, CanvasText));--_muted: var(--slotted-table-color-muted, var(--slotted-text-muted, GrayText));--_rule: var(--slotted-table-border-color, var(--slotted-border-subtle, ButtonBorder));--_rule-width: var(--slotted-table-border-width, var(--slotted-border-width-thin, 1px));--_hover: var( --slotted-table-row-surface-hover, var(--slotted-tone-secondary-subtle-hover, ButtonFace) );box-sizing:border-box;display:grid;gap:var(--_gap);color:var(--_text);font-size:var(--_font-size);font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-line-height-md, 1.5);padding:var(--slotted-space-5, 12px);min-inline-size:min(17rem,var(--slotted-positioner-available-width, 100%));max-inline-size:100%}[data-ui=table][data-part=filter-panel] [data-part=filter-condition]{display:grid;gap:calc(var(--_gap) / 2)}[data-ui=table][data-part=filter-panel] [data-part=filter-operator],[data-ui=table][data-part=filter-panel] [data-part=filter-search]{display:block}[data-ui=table][data-part=filter-panel] [data-part=filter-operand]{display:grid;gap:calc(var(--_gap) / 2);grid-template-columns:repeat(auto-fit,minmax(7rem,1fr))}[data-ui=table][data-part=filter-panel] [data-part=filter-operand][data-kind=set]{grid-template-columns:1fr;gap:var(--_gap)}[data-ui=table][data-part=filter-panel] [data-part=filter-operand][data-range],[data-ui=table][data-part=filter-panel] [data-part=filter-operand][data-kind=datetime],[data-ui=table][data-part=filter-panel] [data-part=filter-operand][data-operand=tags]{grid-template-columns:1fr}[data-ui=table][data-part=filter-panel] [data-part=filter-operand][data-kind=time]:not([data-range]){grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}[data-ui=table][data-part=filter-panel] [data-part=filter-join]{align-items:center;border-block-start:var(--_rule-width) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--_gap);padding-block-start:var(--_gap)}[data-ui=table][data-part=filter-panel] [data-part=filter-join]>[data-label]{color:var(--_muted)}[data-ui=table][data-part=filter-panel] [data-part=filter-list]{display:grid;gap:var(--_gap);max-block-size:calc(var(--_line) * 9);overflow-y:auto;padding-inline-end:var(--_gap)}[data-ui=table][data-part=filter-panel] [data-part=filter-option]{--slotted-selection-halo-opacity: 0;align-items:center;border-radius:var(--slotted-table-control-radius, var(--slotted-radius-sm, 4px));display:flex;gap:var(--_gap);justify-content:space-between;margin-inline:calc(var(--_gap) * -1);padding-inline:var(--_gap)}[data-ui=table][data-part=filter-panel] [data-part=filter-option]:not([data-disabled]):hover{background-color:var(--_hover)}[data-ui=table][data-part=filter-panel] [data-part=filter-option]>[data-count]{color:var(--_muted);font-variant-numeric:tabular-nums}[data-ui=table][data-part=filter-panel] [data-part=filter-option][data-covering]{border-block-end:var(--_rule-width) solid var(--_rule);padding-block-end:var(--_gap)}[data-ui=table][data-part=filter-panel] [data-part=filter-empty]{color:var(--_muted);padding-block:var(--_pad-block);text-align:center}[data-ui=table][data-part=filter-panel] [data-part=filter-actions]{border-block-start:var(--_rule-width) solid var(--_rule);display:flex;gap:var(--_gap);justify-content:space-between;padding-block-start:var(--_gap)}[data-ui=table] [data-part=expander]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);rotate:0deg;transition:rotate var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=table] [data-part=expander][aria-expanded=true]>[data-ui=icon]{rotate:90deg}[data-ui=table]:dir(rtl) [data-part=expander]>[data-ui=icon]{scale:-1 1}[data-ui=table]:dir(rtl) [data-part=expander][aria-expanded=true]>[data-ui=icon]{rotate:-90deg}[data-ui=table] [data-part=detail]{background-color:var(--_stripe)}[data-ui=table] [data-part=detail]>[data-part=cell]{padding-block:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=table][data-striped] [data-part=body]>[data-part=detail]{background-color:var(--_stripe)}[data-ui=table] [data-part=empty]{color:var(--_muted);padding-block:var(--slotted-space-9, 2rem);padding-inline:var(--_pad-inline);text-align:center}[data-ui=table] [data-part=loader]>[data-part=row]>*{padding-block:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=table][data-loading] [data-part=body]{opacity:.55;transition:opacity var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=table] [data-part=summary]>[data-part=row]>*{background-color:var(--_head-surface);border-block-start:var(--_rule-width) solid var(--_rule-strong);font-weight:var(--slotted-font-weight-medium, 500);padding-block:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=table][data-variant=plain] [data-part=summary]>[data-part=row]>*{background-color:transparent}[data-ui=table] [data-part=footer]{align-items:center;border-block-start:var(--_rule-width) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--_gap);padding-block:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=table] [data-part=footer]>:last-child{flex:1 1 auto;justify-content:end}@media print{[data-ui=table] [data-part=scroll]{max-block-size:none;overflow:visible}[data-ui=table][data-sticky-header] [data-part=column-header],[data-ui=table][data-sticky-header] [data-part=head] [data-part=selection],[data-ui=table][data-sticky-footer] [data-part=summary]>[data-part=row]>*,[data-ui=table] [data-sticky]{position:static}}}\n", "@layer slotted.components{[data-ui=checkbox][data-part=root]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-md, 16px));--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-label-gap-md, 12px);--_line-height: var(--slotted-checkbox-line-height, var(--slotted-line-height-md, 1.5));--_mark-inset: var(--slotted-checkbox-mark-inset, 2px);--_mark-size: calc(var(--_size) - 2 * var(--_mark-inset));--_halo-spread: calc(var(--_gap) / 2);--_target: var(--slotted-target-min, 24px);--_lift: calc((var(--_font-size) * var(--_line-height) - var(--_size)) / 2);--_description-gap: var(--slotted-space-3, .375rem);align-content:start;color:var(--slotted-checkbox-color, var(--slotted-text, CanvasText));display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr);isolation:isolate;line-height:var(--_line-height);position:relative}[data-ui=checkbox][data-part=root]{--_direction: ltr}[data-ui=checkbox][data-part=root]:dir(rtl){--_direction: rtl}[data-ui=checkbox][data-part=root][data-size=sm]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-sm, 14px));--_font-size: var(--slotted-control-font-size-sm, 12px);--_gap: var(--slotted-control-label-gap-sm, 8px);--_tile-inset: var( --slotted-checkbox-tile-inset, var(--slotted-control-padding-inline-sm, 10px) )}[data-ui=checkbox][data-part=root][data-size=md]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-md, 16px));--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-label-gap-md, 12px);--_tile-inset: var( --slotted-checkbox-tile-inset, var(--slotted-control-padding-inline-md, 13px) )}[data-ui=checkbox][data-part=root][data-size=lg]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-lg, 18px));--_font-size: var(--slotted-control-font-size-lg, 14px);--_gap: var(--slotted-control-label-gap-lg, 12px);--_tile-inset: var( --slotted-checkbox-tile-inset, var(--slotted-control-padding-inline-lg, 16px) )}[data-ui=checkbox] [data-part=control]{appearance:none;background-color:var(--slotted-checkbox-background, var(--slotted-surface, Canvas));border:var(--slotted-checkbox-border-width, var(--slotted-border-width-medium, 1.5px)) solid var(--slotted-checkbox-border-color, var(--slotted-border-strong, ButtonBorder));border-radius:var(--slotted-checkbox-radius, var(--slotted-radius-xs, 2px));block-size:var(--_size);box-sizing:border-box;cursor:pointer;grid-area:1 / 1;inline-size:var(--_size);margin:0;margin-block-start:var(--_lift);margin-block-end:var(--_lift);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=checkbox] [data-part=indicator]{--slotted-icon-size: var(--_mark-size);block-size:var(--_mark-size);clip-path:inset(0% 100% 0% 0%);color:var(--slotted-checkbox-mark-color, var(--slotted-tone-accent-on-solid));display:flex;grid-area:1 / 1;inline-size:var(--_mark-size);margin-block-start:calc(var(--_lift) + var(--_mark-inset));margin-inline-start:var(--_mark-inset);opacity:0;pointer-events:none;transition:clip-path var(--slotted-duration-medium) var(--slotted-control-transition-easing),opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing)}[data-ui=checkbox] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox] [data-part=control]:indeterminate+[data-part=indicator]{clip-path:inset(0% 0% 0% 0%);opacity:1}@media(prefers-reduced-motion:reduce){[data-ui=checkbox] [data-part=indicator],[data-ui=checkbox] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox] [data-part=control]:indeterminate+[data-part=indicator]{clip-path:none;transition:opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing)}}[data-ui=checkbox] [data-part=label]{cursor:pointer;grid-column:2;grid-row:1;overflow-wrap:anywhere}[data-ui=checkbox][data-part=root]:has(>[data-part=label]){column-gap:var(--_gap)}[data-ui=checkbox][data-part=root]:not([data-variant=tile]) [data-part=label]{justify-self:start;position:relative}[data-ui=checkbox][data-part=root]:not([data-variant=tile]) [data-part=label]:before{block-size:var(--_target);content:\"\";direction:var(--_direction);inline-size:var(--_target);inset-block-start:calc(var(--_lift) + var(--_size) - var(--_target));inset-inline-start:calc((var(--_size) - var(--_target)) / 2 - var(--_size) - var(--_gap));position:absolute;z-index:-1}[data-ui=checkbox][data-part=root]:not([data-variant=tile]) [data-part=label]:after{background-color:var(--slotted-checkbox-halo-color, var(--slotted-tone-accent-text));border-radius:calc(var(--slotted-checkbox-radius, var(--slotted-radius-xs, 2px)) + var(--_halo-spread));content:\"\";direction:var(--_direction);inset-block:calc(var(--_lift) - var(--_halo-spread));inset-inline-end:calc(-1.5 * var(--_halo-spread));inset-inline-start:calc(-1 * (var(--_size) + var(--_gap) + var(--_halo-spread)));opacity:0;position:absolute;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);z-index:-1}[data-ui=checkbox][data-part=root]:is([data-label-hidden],:has(>[data-part=label]:empty)):not([data-label-placement=start]){column-gap:0}[data-ui=checkbox][data-part=root]:is([data-label-hidden],:has(>[data-part=label]:empty)):not([data-label-placement=start],[data-variant=tile]) [data-part=label]:before{inset-inline-start:calc(-1 * var(--_target))}[data-ui=checkbox][data-part=root]:is([data-label-hidden],:has(>[data-part=label]:empty)):not([data-label-placement=start],[data-variant=tile]) [data-part=label]:after{inset-inline-end:calc(-1 * var(--_halo-spread));inset-inline-start:calc(-1 * (var(--_size) + var(--_halo-spread)))}[data-ui=checkbox] [data-part=description]{color:var(--slotted-checkbox-description-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-checkbox-description-font-size, var(--slotted-font-size-xs, .75rem));grid-column:2;grid-row:2;line-height:var(--slotted-line-height-xs, 1.4);margin:0;overflow-wrap:anywhere;padding-block-start:var(--_description-gap)}[data-ui=checkbox][data-part=root][data-label-placement=start]{grid-template-columns:minmax(0,1fr) auto}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=control],[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=indicator]{grid-area:1 / 2}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label],[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=description]{grid-column:1}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label]{justify-self:stretch}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label]:before{inset-inline-end:calc(-1 * (var(--_size) + var(--_gap)));inset-inline-start:auto}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label]:after{inset-inline-end:calc(-1 * (var(--_size) + var(--_gap) + var(--_halo-spread)));inset-inline-start:calc(-1.5 * var(--_halo-spread))}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:hover:not(:disabled){border-color:var(--slotted-checkbox-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:hover:not(:disabled)~[data-part=label]:after,[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:not(:disabled)~[data-part=label]:hover:after{opacity:var(--slotted-selection-halo-opacity, .12)}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:active:not(:disabled){background-color:var( --slotted-checkbox-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=checkbox] [data-part=control]:checked,[data-ui=checkbox] [data-part=control]:indeterminate{background-color:var(--slotted-checkbox-checked-background, var(--slotted-tone-accent-solid));border-color:var(--slotted-checkbox-checked-border-color, var(--slotted-tone-accent-solid))}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:checked:hover:not(:disabled),[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:indeterminate:hover:not(:disabled){background-color:var( --slotted-checkbox-checked-hover-background, var(--slotted-tone-accent-solid-hover) );border-color:var( --slotted-checkbox-checked-hover-background, var(--slotted-tone-accent-solid-hover) )}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:checked:active:not(:disabled),[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:indeterminate:active:not(:disabled){background-color:var( --slotted-checkbox-checked-active-background, var(--slotted-tone-accent-solid-active) );border-color:var( --slotted-checkbox-checked-active-background, var(--slotted-tone-accent-solid-active) )}[data-ui=checkbox] [data-part=control]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=checkbox][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-checkbox-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]{border-width:calc(var(--slotted-checkbox-border-width, var(--slotted-border-width-medium, 1.5px)) + var(--slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px)));border-color:var(--slotted-checkbox-invalid-border-color, var(--slotted-tone-danger-border))}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked,[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate{background-color:var( --slotted-checkbox-invalid-checked-background, var(--slotted-tone-danger-solid) );border-color:var( --slotted-checkbox-invalid-checked-background, var(--slotted-tone-danger-solid) );box-shadow:inset 0 0 0 var(--slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px)) var(--slotted-surface, Canvas)}[data-ui=checkbox][data-part=root][data-readonly] [data-part=control],[data-ui=checkbox][data-part=root][data-readonly] [data-part=label]{cursor:default}[data-ui=checkbox][data-part=root][data-readonly] [data-part=control]:not(:checked):not(:indeterminate){background-color:var( --slotted-checkbox-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=checkbox][data-part=root][data-disabled] [data-part=control],[data-ui=checkbox] [data-part=control]:disabled{background-color:var( --slotted-checkbox-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-checkbox-disabled-border-color, var(--slotted-disabled-border));cursor:not-allowed}[data-ui=checkbox] [data-part=control]:disabled+[data-part=indicator]{color:var(--slotted-checkbox-disabled-mark-color, var(--slotted-disabled-foreground))}[data-ui=checkbox][data-part=root][data-disabled] [data-part=label],[data-ui=checkbox][data-part=root][data-disabled] [data-part=description],[data-ui=checkbox] [data-part=control]:disabled~[data-part=label],[data-ui=checkbox] [data-part=control]:disabled~[data-part=description]{color:var(--slotted-checkbox-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=checkbox][data-part=root][data-variant=tile]{--_description-gap: var( --slotted-checkbox-tile-description-gap, var(--slotted-space-2, .25rem) );--_tile-surface: var(--slotted-checkbox-tile-background, var(--slotted-surface, Canvas));--_tile-edge: var( --slotted-checkbox-tile-border-color, var(--slotted-control-border-color, ButtonBorder) );--_tile-edge-width: var(--slotted-control-border-width, 1px);background-color:var(--_tile-surface);border-radius:var(--slotted-checkbox-tile-radius, var(--slotted-radius-md, 6px));box-shadow:var(--slotted-control-shadow, none);cursor:pointer;padding:var(--_tile-inset);position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=checkbox][data-part=root][data-variant=tile]:before{border:calc(var(--_tile-edge-width) + var(--_tile-invalid-edge, 0px)) solid var(--_tile-edge);border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute;transition:border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=checkbox][data-part=root][data-variant=tile] [data-part=label]:after{content:\"\";inset:0;position:absolute}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]):has([data-part=control]:not(:disabled)):not(:has([data-part=control]:is(:checked,:indeterminate))):hover{--_tile-surface: var( --slotted-checkbox-tile-hover-background, var(--slotted-tone-accent-subtle-hover) );--_tile-edge: var( --slotted-checkbox-tile-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]):has([data-part=control]:not(:disabled)):not(:has([data-part=control]:is(:checked,:indeterminate))):active{--_tile-surface: var( --slotted-checkbox-tile-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):has([data-part=control]:is(:checked,:indeterminate)){--_tile-edge: var( --slotted-checkbox-tile-checked-border-color, var(--slotted-tone-accent-solid) );--_tile-edge-width: var(--slotted-border-width-thick, 2px)}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):has([data-part=control]:is(:checked,:indeterminate)){--_tile-surface: var( --slotted-checkbox-tile-checked-background, var(--slotted-tone-accent-surface) )}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]):has([data-part=control]:is(:checked,:indeterminate):not(:disabled)):hover{--_tile-edge: var( --slotted-checkbox-tile-checked-hover-border-color, var(--slotted-tone-accent-solid-hover) )}[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid]{--_tile-edge: var( --slotted-checkbox-tile-invalid-border-color, var(--slotted-tone-danger-border) );--_tile-invalid-edge: var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )}[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid]:has([data-part=control]:is(:checked,:indeterminate)){--_tile-surface: var( --slotted-checkbox-tile-invalid-checked-background, var(--slotted-tone-danger-surface) );--_tile-edge: var( --slotted-checkbox-tile-invalid-checked-border-color, var(--slotted-tone-danger-solid) )}[data-ui=checkbox][data-part=root][data-variant=tile][data-readonly]{--_tile-surface: var( --slotted-checkbox-tile-readonly-background, var(--slotted-tone-secondary-subtle-hover) );--_tile-edge: var(--slotted-checkbox-tile-readonly-border-color, var(--slotted-border-strong));cursor:default}[data-ui=checkbox][data-part=root][data-variant=tile][data-disabled],[data-ui=checkbox][data-part=root][data-variant=tile]:has([data-part=control]:disabled){--_tile-surface: var( --slotted-checkbox-tile-disabled-background, var(--slotted-disabled-background) );--_tile-edge: var( --slotted-checkbox-tile-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;cursor:not-allowed}[data-ui=checkbox][data-part=root][data-variant=tile]:has([data-part=control]:focus-visible){outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=checkbox][data-part=root][data-variant=tile] [data-part=control]:focus-visible{outline:none}@media(forced-colors:active){[data-ui=checkbox] [data-part=control]{background-color:Field;border-color:FieldText}[data-ui=checkbox] [data-part=control]:checked,[data-ui=checkbox] [data-part=control]:indeterminate{background-color:Highlight;border-color:Highlight}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked,[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate{background-color:Highlight;border-color:CanvasText;outline:var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) ) solid Canvas;outline-offset:calc(-1 * (var(--slotted-checkbox-border-width, var(--slotted-border-width-medium, 1.5px)) + var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) ) + var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )))}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked:focus-visible,[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate:focus-visible{outline:calc(var(--slotted-focus-ring-width, 2px) + var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=checkbox] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox] [data-part=control]:indeterminate+[data-part=indicator]{color:HighlightText}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate+[data-part=indicator]{color:HighlightText}[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid],[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid]:has([data-part=control]:is(:checked,:indeterminate)){--_tile-edge: CanvasText}[data-ui=checkbox] [data-part=control]:disabled{background-color:Field;border-color:GrayText}[data-ui=checkbox] [data-part=control]:disabled+[data-part=indicator]{color:GrayText}}}\n", "@layer slotted.components{[data-ui=visually-hidden]:not([data-focusable]:focus-within){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:0;inset-inline-start:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[slTable]', standalone: true, exportAs: 'slTable', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlTable), multi: true }], host: {
+                        'data-ui': 'table',
+                        'data-part': 'root',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-layout]': 'resolvedLayout()',
+                        '[attr.data-cell-align]': 'resolvedCellAlign()',
+                        '[attr.data-striped]': "resolvedStriped() ? '' : null",
+                        '[attr.data-sticky-header]': "resolvedStickyHeader() ? '' : null",
+                        '[attr.data-sticky-footer]': "resolvedStickyFooter() ? '' : null",
+                        '[attr.data-sticky-to]': 'resolvedStickyTo()',
+                        '[attr.data-loading]': "loading() ? '' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=table][data-part=root]{--_row-min-block: var( --slotted-table-row-min-block-size, var(--slotted-control-height-md, 34px) );--_font-size: var(--slotted-table-font-size, var(--slotted-control-font-size-md, 13px));--_icon-size: var(--slotted-table-icon-size, var(--slotted-control-icon-size-md, 16px));--_gap: var(--slotted-table-gap, var(--slotted-control-gap-md, 8px));--_pad-inline: var( --slotted-table-cell-padding-inline, var(--slotted-control-padding-inline-md, 13px) );--_pad-block: var( --slotted-table-cell-padding-block, max( var(--slotted-space-2, .25rem), calc((var(--_row-min-block) - var(--_font-size) * var(--slotted-line-height-md, 1.5)) / 2) ) );--_line: calc(var(--_font-size) * var(--slotted-line-height-md, 1.5));--_radius: var(--slotted-table-radius, var(--slotted-radius-md, 6px));--_rule: var(--slotted-table-border-color, var(--slotted-border-subtle, ButtonBorder));--_rule-strong: var( --slotted-table-border-color-strong, var(--slotted-border-strong, ButtonBorder) );--_rule-width: var(--slotted-table-border-width, var(--slotted-border-width-thin, 1px));--_text: var(--slotted-table-color, var(--slotted-text, CanvasText));--_muted: var(--slotted-table-color-muted, var(--slotted-text-muted, GrayText));--_surface: var(--slotted-table-surface, var(--slotted-ground, var(--slotted-surface, Canvas)));--_head-surface: var( --slotted-table-header-surface, color-mix(in oklab, var(--slotted-text, CanvasText) 8%, var(--_surface)) );--_stripe: var( --slotted-table-row-surface-stripe, color-mix(in oklab, var(--slotted-text, CanvasText) 5%, var(--_surface)) );--_hover: var( --slotted-table-row-surface-hover, var(--slotted-tone-secondary-subtle-hover, ButtonFace) );--_selected: var( --slotted-table-row-surface-selected, var(--slotted-tone-accent-surface, Canvas) );--_selected-hover: var( --slotted-table-row-surface-selected-hover, var(--slotted-tone-accent-subtle-hover, ButtonFace) );--_selected-text: var( --slotted-table-row-color-selected, var(--slotted-tone-accent-text, CanvasText) );background-color:var(--_surface);box-sizing:border-box;color:var(--_text);display:block;isolation:isolate;font-family:var(--slotted-table-font-family, var(--slotted-control-font-family));font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5);max-inline-size:100%}[data-ui=table][data-variant=framed]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-table-shadow, var(--slotted-shadow-xs, none));overflow:clip}[data-ui=table] [data-part=scroll]{overflow:auto;overscroll-behavior-inline:contain}[data-ui=table] [data-part=scroll]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=table] [data-part=table]{border-collapse:separate;border-spacing:0;inline-size:max-content;min-inline-size:100%;text-align:start}[data-ui=table][data-layout=fixed] [data-part=table]{inline-size:100%;table-layout:fixed}[data-ui=table] [data-part=caption]{caption-side:block-start;color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);padding-block:var(--_pad-block);padding-inline:var(--_pad-inline);text-align:start}[data-ui=table] [data-part=column-header],[data-ui=table] [data-part=head] [data-part=selection]{background-color:var(--_head-surface);border-block-end:var(--_rule-width) solid var(--_rule-strong);color:var(--_text);font-weight:var(--slotted-font-weight-semibold, 600);padding-block:var(--_pad-block);padding-inline:var(--_pad-inline);position:relative;text-align:start;vertical-align:bottom}[data-ui=table][data-variant=plain] [data-part=column-header]{background-color:transparent}[data-ui=table] [data-part=row]{background-color:var(--_surface)}[data-ui=table]{--_cell-align: middle}[data-ui=table][data-cell-align=start]{--_cell-align: top}[data-ui=table][data-cell-align=end]{--_cell-align: bottom}[data-ui=table] [data-part=cell],[data-ui=table] [data-part=row-header]{padding-block:var(--_pad-block);padding-inline:var(--_pad-inline);text-align:start;vertical-align:var(--_cell-align)}[data-ui=table] [data-block-align=start]{vertical-align:top}[data-ui=table] [data-block-align=center]{vertical-align:middle}[data-ui=table] [data-block-align=end]{vertical-align:bottom}[data-ui=table] :is([data-part=cell],[data-part=row-header]):has(>[data-part=root][data-variant=plain]:is([data-ui=select],[data-ui=combobox],[data-ui=multi-select],[data-ui=text-field],[data-ui=textarea],[data-ui=number-field],[data-ui=currency-field],[data-ui=date-field],[data-ui=time-field],[data-ui=datetime-field],[data-ui=tags-input],[data-ui=date-range-picker],[data-ui=time-range-picker],[data-ui=datetime-range-picker],[data-ui=entity-picker])){--slotted-control-padding-inline-sm: var(--_pad-inline);--slotted-control-padding-inline-md: var(--_pad-inline);--slotted-control-padding-inline-lg: var(--_pad-inline);--slotted-control-height-sm: var(--_row-min-block);--slotted-control-height-md: var(--_row-min-block);--slotted-control-height-lg: var(--_row-min-block);padding:0}[data-ui=table] [data-part=row-header]{font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=table]:is([data-variant=ruled],[data-variant=framed]) [data-part=body]>[data-part=row]>*{border-block-end:var(--_rule-width) solid var(--_rule)}[data-ui=table]:is([data-variant=ruled],[data-variant=framed]) [data-part=body]>[data-part=row]:last-child>*{border-block-end-color:transparent}[data-ui=table][data-striped] [data-part=body]>[data-part=row]:nth-child(2n){background-color:var(--_stripe)}[data-ui=table] [data-part=body]>[data-part=row]:not([data-disabled]):hover{background-color:var(--_hover)}[data-ui=table] [data-part=body]>[data-part=row][data-selected]{background-color:var(--_selected);color:var(--_selected-text)}[data-ui=table] [data-part=body]>[data-part=row][data-selected]:not([data-disabled]):hover{background-color:var(--_selected-hover)}[data-ui=table] [data-part=row][data-disabled]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=table] [data-align=start]{text-align:start}[data-ui=table] [data-align=center]{text-align:center}[data-ui=table] [data-align=end]{text-align:end}[data-ui=table] [data-numeric]{font-variant-numeric:tabular-nums}[data-ui=table] [data-numeric]:not([data-align]){text-align:end}[data-ui=table] [data-text=wrap]{overflow-wrap:anywhere}[data-ui=table] [data-text=nowrap]{white-space:nowrap}[data-ui=table] [data-text=truncate]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=table][data-sticky-header] [data-part=column-header],[data-ui=table][data-sticky-header] [data-part=head] [data-part=selection]{inset-block-start:var(--slotted-table-sticky-offset, 0);position:sticky;z-index:calc(var(--slotted-z-index-sticky, 100) + 1)}[data-ui=table][data-sticky-to=page] [data-part=scroll]{overflow:visible}[data-ui=table][data-sticky-footer] [data-part=summary]>[data-part=row]>*{inset-block-end:var(--slotted-table-sticky-offset-end, 0);position:sticky;z-index:calc(var(--slotted-z-index-sticky, 100) + 1)}[data-ui=table][data-sticky-footer] [data-part=summary] [data-sticky]{z-index:calc(var(--slotted-z-index-sticky, 100) + 2)}[data-ui=table] [data-sticky=start]{background-color:inherit;inset-inline-start:var(--slotted-table-sticky-inset, 0);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=table] [data-sticky=end]{background-color:inherit;inset-inline-end:var(--slotted-table-sticky-inset, 0);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=table][data-sticky-header] [data-part=column-header][data-sticky],[data-ui=table][data-sticky-header] [data-part=head] [data-part=selection][data-sticky]{background-color:var(--_head-surface);z-index:calc(var(--slotted-z-index-sticky, 100) + 2)}[data-ui=table] [data-sticky]:after{background-color:var(--slotted-table-border-color, var(--slotted-border-subtle));content:\"\";inline-size:var(--_rule-width);inset-block:calc(var(--_rule-width) * -1) 0;position:absolute;z-index:1}[data-ui=table] [data-sticky=start]:after{inset-inline-end:0}[data-ui=table] [data-sticky=end]:after{inset-inline-start:0}[data-ui=table] [data-part=column-header]:has(>[data-part=sort]){padding:0}[data-ui=table] [data-part=column-header]:has(>[data-part=column-actions]){--_actions-room: var( --slotted-table-column-actions-size, calc(var(--_pad-inline) + var(--slotted-target-min, 24px) + var(--_gap)) );padding-inline-end:var(--_actions-room)}[data-ui=table] [data-part=column-actions]{align-items:center;display:inline-flex;gap:var(--_gap);inset-block:0;inset-inline-end:var(--_pad-inline);position:absolute}[data-ui=table] [data-part=sort]{align-items:center;background-color:transparent;border:0;color:inherit;cursor:pointer;display:flex;font:inherit;gap:var(--_gap);inline-size:100%;justify-content:space-between;min-block-size:var(--slotted-target-min, 24px);min-inline-size:0;padding-block:var(--_pad-block);padding-inline:var(--_pad-inline);text-align:inherit}[data-ui=table] [data-align=center]>[data-part=sort]{justify-content:center}[data-ui=table] :is([data-align=end],[data-numeric]:not([data-align]))>[data-part=sort]{justify-content:end}[data-ui=table] [data-part=column-header]:has(>[data-part=sort]:not(:disabled)):hover{background-color:var( --slotted-table-header-surface-hover, color-mix(in oklab, var(--slotted-text, CanvasText) 7%, var(--_head-surface)) )}[data-ui=table] [data-part=column-header]{transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=table] [data-part=sort]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=table] [data-part=sort]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);opacity:0;transition:opacity var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),rotate var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=table] [data-part=sort]:not(:disabled):hover>[data-ui=icon],[data-ui=table] [data-part=sort]:focus-visible>[data-ui=icon]{opacity:.55}[data-ui=table] [aria-sort]>[data-part=sort]>[data-ui=icon]{opacity:1}[data-ui=table] [aria-sort=ascending]>[data-part=sort]>[data-ui=icon]{rotate:180deg}[data-ui=table] [data-part=selection]{inline-size:var(--slotted-table-selection-size, 3rem);padding-block:var(--_pad-block);padding-inline:var(--_pad-inline);text-align:center;vertical-align:var(--_cell-align);white-space:nowrap}[data-ui=table] [data-part=selection]>[data-ui=checkbox]{block-size:var(--_line)}[data-ui=table] [data-part=selection]{--slotted-selection-halo-opacity: 0}[data-ui=table] [data-part=cell]:has(>[data-part=expander]){inline-size:1%;padding-inline-end:0;white-space:nowrap}[data-ui=table] [data-part=column-actions] *:has([data-part=filter]){display:contents}[data-ui=table] [data-part=expander],[data-ui=table] [data-part=column-actions]>button,[data-ui=table] button[data-part=column-actions],[data-ui=table] [data-part=filter]{background-color:transparent;border:0;border-radius:var(--slotted-table-control-radius, var(--slotted-radius-sm, 4px));color:var(--_muted);cursor:pointer;display:inline-flex;block-size:var(--slotted-target-min, 24px);inline-size:var(--slotted-target-min, 24px);margin-block:calc((var(--_line) - var(--slotted-target-min, 24px)) / 2);padding:0;align-items:center;justify-content:center;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}@media(pointer:coarse){[data-ui=table] [data-part=expander],[data-ui=table] [data-part=column-actions]>button,[data-ui=table] button[data-part=column-actions],[data-ui=table] [data-part=filter]{position:relative}[data-ui=table] [data-part=expander]:after,[data-ui=table] [data-part=column-actions]>button:after,[data-ui=table] button[data-part=column-actions]:after,[data-ui=table] [data-part=filter]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}[data-ui=table] [data-part=column-actions]>button:after,[data-ui=table] button[data-part=column-actions]:after,[data-ui=table] [data-part=filter]:after{inset-inline-start:0}}[data-ui=table] [data-part=expander]:not(:disabled):hover{background-color:var(--_hover);color:var(--_text)}[data-ui=table] [data-part=column-actions]>button:not(:disabled):hover,[data-ui=table] button[data-part=column-actions]:not(:disabled):hover,[data-ui=table] [data-part=filter]:not(:disabled):hover{background-color:var( --slotted-table-header-surface-hover, color-mix(in oklab, var(--slotted-text, CanvasText) 7%, var(--_head-surface)) );color:var(--_text)}[data-ui=table] [data-part=expander]:focus-visible,[data-ui=table] [data-part=column-actions]>button:focus-visible,[data-ui=table] button[data-part=column-actions]:focus-visible,[data-ui=table] [data-part=filter]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:0}[data-ui=table] :is([data-part=column-actions],[data-part=filter]) :is(svg,img){block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=table] [data-part=filter][data-filtered],[data-ui=table] [data-part=filter][data-filtered]:not(:disabled):hover{color:var(--slotted-tone-accent-text, LinkText)}[data-ui=table][data-part=filter-panel]{--_gap: var(--slotted-table-gap, var(--slotted-control-gap-md, 8px));--_font-size: var(--slotted-table-font-size, var(--slotted-control-font-size-md, 13px));--_line: calc(var(--_font-size) * var(--slotted-line-height-md, 1.5));--_pad-block: var(--slotted-space-2, 4px);--_text: var(--slotted-table-color, var(--slotted-text, CanvasText));--_muted: var(--slotted-table-color-muted, var(--slotted-text-muted, GrayText));--_rule: var(--slotted-table-border-color, var(--slotted-border-subtle, ButtonBorder));--_rule-width: var(--slotted-table-border-width, var(--slotted-border-width-thin, 1px));--_hover: var( --slotted-table-row-surface-hover, var(--slotted-tone-secondary-subtle-hover, ButtonFace) );box-sizing:border-box;display:grid;gap:var(--_gap);color:var(--_text);font-size:var(--_font-size);font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-line-height-md, 1.5);padding:var(--slotted-space-5, 12px);min-inline-size:min(17rem,var(--slotted-positioner-available-width, 100%));max-inline-size:100%}[data-ui=table][data-part=filter-panel] [data-part=filter-condition]{display:grid;gap:calc(var(--_gap) / 2)}[data-ui=table][data-part=filter-panel] [data-part=filter-operator],[data-ui=table][data-part=filter-panel] [data-part=filter-search]{display:block}[data-ui=table][data-part=filter-panel] [data-part=filter-operand]{display:grid;gap:calc(var(--_gap) / 2);grid-template-columns:repeat(auto-fit,minmax(7rem,1fr))}[data-ui=table][data-part=filter-panel] [data-part=filter-operand][data-kind=set]{grid-template-columns:1fr;gap:var(--_gap)}[data-ui=table][data-part=filter-panel] [data-part=filter-operand][data-range],[data-ui=table][data-part=filter-panel] [data-part=filter-operand][data-kind=datetime],[data-ui=table][data-part=filter-panel] [data-part=filter-operand][data-operand=tags]{grid-template-columns:1fr}[data-ui=table][data-part=filter-panel] [data-part=filter-operand][data-kind=time]:not([data-range]){grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}[data-ui=table][data-part=filter-panel] [data-part=filter-join]{align-items:center;border-block-start:var(--_rule-width) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--_gap);padding-block-start:var(--_gap)}[data-ui=table][data-part=filter-panel] [data-part=filter-join]>[data-label]{color:var(--_muted)}[data-ui=table][data-part=filter-panel] [data-part=filter-list]{display:grid;gap:var(--_gap);max-block-size:calc(var(--_line) * 9);overflow-y:auto;padding-inline-end:var(--_gap)}[data-ui=table][data-part=filter-panel] [data-part=filter-option]{--slotted-selection-halo-opacity: 0;align-items:center;border-radius:var(--slotted-table-control-radius, var(--slotted-radius-sm, 4px));display:flex;gap:var(--_gap);justify-content:space-between;margin-inline:calc(var(--_gap) * -1);padding-inline:var(--_gap)}[data-ui=table][data-part=filter-panel] [data-part=filter-option]:not([data-disabled]):hover{background-color:var(--_hover)}[data-ui=table][data-part=filter-panel] [data-part=filter-option]>[data-count]{color:var(--_muted);font-variant-numeric:tabular-nums}[data-ui=table][data-part=filter-panel] [data-part=filter-option][data-covering]{border-block-end:var(--_rule-width) solid var(--_rule);padding-block-end:var(--_gap)}[data-ui=table][data-part=filter-panel] [data-part=filter-empty]{color:var(--_muted);padding-block:var(--_pad-block);text-align:center}[data-ui=table][data-part=filter-panel] [data-part=filter-actions]{border-block-start:var(--_rule-width) solid var(--_rule);display:flex;gap:var(--_gap);justify-content:space-between;padding-block-start:var(--_gap)}[data-ui=table] [data-part=expander]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);rotate:0deg;transition:rotate var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=table] [data-part=expander][aria-expanded=true]>[data-ui=icon]{rotate:90deg}[data-ui=table]:dir(rtl) [data-part=expander]>[data-ui=icon]{scale:-1 1}[data-ui=table]:dir(rtl) [data-part=expander][aria-expanded=true]>[data-ui=icon]{rotate:-90deg}[data-ui=table] [data-part=detail]{background-color:var(--_stripe)}[data-ui=table] [data-part=detail]>[data-part=cell]{padding-block:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=table][data-striped] [data-part=body]>[data-part=detail]{background-color:var(--_stripe)}[data-ui=table] [data-part=empty]{color:var(--_muted);padding-block:var(--slotted-space-9, 2rem);padding-inline:var(--_pad-inline);text-align:center}[data-ui=table] [data-part=loader]>[data-part=row]>*{padding-block:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=table][data-loading] [data-part=body]{opacity:.55;transition:opacity var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=table] [data-part=summary]>[data-part=row]>*{background-color:var(--_head-surface);border-block-start:var(--_rule-width) solid var(--_rule-strong);font-weight:var(--slotted-font-weight-medium, 500);padding-block:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=table][data-variant=plain] [data-part=summary]>[data-part=row]>*{background-color:transparent}[data-ui=table] [data-part=footer]{align-items:center;border-block-start:var(--_rule-width) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--_gap);padding-block:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=table] [data-part=footer]>:last-child{flex:1 1 auto;justify-content:end}@media print{[data-ui=table] [data-part=scroll]{max-block-size:none;overflow:visible}[data-ui=table][data-sticky-header] [data-part=column-header],[data-ui=table][data-sticky-header] [data-part=head] [data-part=selection],[data-ui=table][data-sticky-footer] [data-part=summary]>[data-part=row]>*,[data-ui=table] [data-sticky]{position:static}}}\n", "@layer slotted.components{[data-ui=checkbox][data-part=root]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-md, 16px));--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-label-gap-md, 12px);--_line-height: var(--slotted-checkbox-line-height, var(--slotted-line-height-md, 1.5));--_mark-inset: var(--slotted-checkbox-mark-inset, 2px);--_mark-size: calc(var(--_size) - 2 * var(--_mark-inset));--_halo-spread: calc(var(--_gap) / 2);--_target: var(--slotted-target-min, 24px);--_lift: calc((var(--_font-size) * var(--_line-height) - var(--_size)) / 2);--_description-gap: var(--slotted-space-3, .375rem);align-content:start;color:var(--slotted-checkbox-color, var(--slotted-text, CanvasText));display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr);isolation:isolate;line-height:var(--_line-height);position:relative}[data-ui=checkbox][data-part=root]{--_direction: ltr}[data-ui=checkbox][data-part=root]:dir(rtl){--_direction: rtl}[data-ui=checkbox][data-part=root][data-size=sm]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-sm, 14px));--_font-size: var(--slotted-control-font-size-sm, 12px);--_gap: var(--slotted-control-label-gap-sm, 8px);--_tile-inset: var( --slotted-checkbox-tile-inset, var(--slotted-control-padding-inline-sm, 10px) )}[data-ui=checkbox][data-part=root][data-size=md]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-md, 16px));--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-label-gap-md, 12px);--_tile-inset: var( --slotted-checkbox-tile-inset, var(--slotted-control-padding-inline-md, 13px) )}[data-ui=checkbox][data-part=root][data-size=lg]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-lg, 18px));--_font-size: var(--slotted-control-font-size-lg, 14px);--_gap: var(--slotted-control-label-gap-lg, 12px);--_tile-inset: var( --slotted-checkbox-tile-inset, var(--slotted-control-padding-inline-lg, 16px) )}[data-ui=checkbox] [data-part=control]{appearance:none;background-color:var(--slotted-checkbox-background, var(--slotted-surface, Canvas));border:var(--slotted-checkbox-border-width, var(--slotted-border-width-medium, 1.5px)) solid var(--slotted-checkbox-border-color, var(--slotted-border-strong, ButtonBorder));border-radius:var(--slotted-checkbox-radius, var(--slotted-radius-xs, 2px));block-size:var(--_size);box-sizing:border-box;cursor:pointer;grid-area:1 / 1;inline-size:var(--_size);margin:0;margin-block-start:var(--_lift);margin-block-end:var(--_lift);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=checkbox] [data-part=indicator]{--slotted-icon-size: var(--_mark-size);block-size:var(--_mark-size);clip-path:inset(0% 100% 0% 0%);color:var(--slotted-checkbox-mark-color, var(--slotted-tone-accent-on-solid));display:flex;grid-area:1 / 1;inline-size:var(--_mark-size);margin-block-start:calc(var(--_lift) + var(--_mark-inset));margin-inline-start:var(--_mark-inset);opacity:0;pointer-events:none;transition:clip-path var(--slotted-duration-medium) var(--slotted-control-transition-easing),opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing)}[data-ui=checkbox] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox] [data-part=control]:indeterminate+[data-part=indicator]{clip-path:inset(0% 0% 0% 0%);opacity:1}@media(prefers-reduced-motion:reduce){[data-ui=checkbox] [data-part=indicator],[data-ui=checkbox] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox] [data-part=control]:indeterminate+[data-part=indicator]{clip-path:none;transition:opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing)}}[data-ui=checkbox] [data-part=label]{cursor:pointer;grid-column:2;grid-row:1;overflow-wrap:anywhere}[data-ui=checkbox][data-part=root]:has(>[data-part=label]){column-gap:var(--_gap)}[data-ui=checkbox][data-part=root]:not([data-variant=tile]) [data-part=label]{justify-self:start;position:relative}[data-ui=checkbox][data-part=root]:not([data-variant=tile]) [data-part=label]:before{block-size:var(--_target);content:\"\";direction:var(--_direction);inline-size:var(--_target);inset-block-start:calc(var(--_lift) + var(--_size) - var(--_target));inset-inline-start:calc((var(--_size) - var(--_target)) / 2 - var(--_size) - var(--_gap));position:absolute;z-index:-1}[data-ui=checkbox][data-part=root]:not([data-variant=tile]) [data-part=label]:after{background-color:var(--slotted-checkbox-halo-color, var(--slotted-tone-accent-text));border-radius:calc(var(--slotted-checkbox-radius, var(--slotted-radius-xs, 2px)) + var(--_halo-spread));content:\"\";direction:var(--_direction);inset-block:calc(var(--_lift) - var(--_halo-spread));inset-inline-end:calc(-1.5 * var(--_halo-spread));inset-inline-start:calc(-1 * (var(--_size) + var(--_gap) + var(--_halo-spread)));opacity:0;position:absolute;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);z-index:-1}[data-ui=checkbox][data-part=root]:is([data-label-hidden],:has(>[data-part=label]:empty)):not([data-label-placement=start]){column-gap:0}[data-ui=checkbox][data-part=root]:is([data-label-hidden],:has(>[data-part=label]:empty)):not([data-label-placement=start],[data-variant=tile]) [data-part=label]:before{inset-inline-start:calc(-1 * var(--_target))}[data-ui=checkbox][data-part=root]:is([data-label-hidden],:has(>[data-part=label]:empty)):not([data-label-placement=start],[data-variant=tile]) [data-part=label]:after{inset-inline-end:calc(-1 * var(--_halo-spread));inset-inline-start:calc(-1 * (var(--_size) + var(--_halo-spread)))}[data-ui=checkbox] [data-part=description]{color:var(--slotted-checkbox-description-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-checkbox-description-font-size, var(--slotted-font-size-xs, .75rem));grid-column:2;grid-row:2;line-height:var(--slotted-line-height-xs, 1.4);margin:0;overflow-wrap:anywhere;padding-block-start:var(--_description-gap)}[data-ui=checkbox][data-part=root][data-label-placement=start]{grid-template-columns:minmax(0,1fr) auto}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=control],[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=indicator]{grid-area:1 / 2}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label],[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=description]{grid-column:1}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label]{justify-self:stretch}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label]:before{inset-inline-end:calc(-1 * (var(--_size) + var(--_gap)));inset-inline-start:auto}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label]:after{inset-inline-end:calc(-1 * (var(--_size) + var(--_gap) + var(--_halo-spread)));inset-inline-start:calc(-1.5 * var(--_halo-spread))}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:hover:not(:disabled){border-color:var(--slotted-checkbox-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:hover:not(:disabled)~[data-part=label]:after,[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:not(:disabled)~[data-part=label]:hover:after{opacity:var(--slotted-selection-halo-opacity, .12)}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:active:not(:disabled){background-color:var( --slotted-checkbox-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=checkbox] [data-part=control]:checked,[data-ui=checkbox] [data-part=control]:indeterminate{background-color:var(--slotted-checkbox-checked-background, var(--slotted-tone-accent-solid));border-color:var(--slotted-checkbox-checked-border-color, var(--slotted-tone-accent-solid))}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:checked:hover:not(:disabled),[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:indeterminate:hover:not(:disabled){background-color:var( --slotted-checkbox-checked-hover-background, var(--slotted-tone-accent-solid-hover) );border-color:var( --slotted-checkbox-checked-hover-background, var(--slotted-tone-accent-solid-hover) )}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:checked:active:not(:disabled),[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:indeterminate:active:not(:disabled){background-color:var( --slotted-checkbox-checked-active-background, var(--slotted-tone-accent-solid-active) );border-color:var( --slotted-checkbox-checked-active-background, var(--slotted-tone-accent-solid-active) )}[data-ui=checkbox] [data-part=control]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=checkbox][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-checkbox-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]{border-width:calc(var(--slotted-checkbox-border-width, var(--slotted-border-width-medium, 1.5px)) + var(--slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px)));border-color:var(--slotted-checkbox-invalid-border-color, var(--slotted-tone-danger-border))}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked,[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate{background-color:var( --slotted-checkbox-invalid-checked-background, var(--slotted-tone-danger-solid) );border-color:var( --slotted-checkbox-invalid-checked-background, var(--slotted-tone-danger-solid) );box-shadow:inset 0 0 0 var(--slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px)) var(--slotted-surface, Canvas)}[data-ui=checkbox][data-part=root][data-readonly] [data-part=control],[data-ui=checkbox][data-part=root][data-readonly] [data-part=label]{cursor:default}[data-ui=checkbox][data-part=root][data-readonly] [data-part=control]:not(:checked):not(:indeterminate){background-color:var( --slotted-checkbox-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=checkbox][data-part=root][data-disabled] [data-part=control],[data-ui=checkbox] [data-part=control]:disabled{background-color:var( --slotted-checkbox-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-checkbox-disabled-border-color, var(--slotted-disabled-border));cursor:not-allowed}[data-ui=checkbox] [data-part=control]:disabled+[data-part=indicator]{color:var(--slotted-checkbox-disabled-mark-color, var(--slotted-disabled-foreground))}[data-ui=checkbox][data-part=root][data-disabled] [data-part=label],[data-ui=checkbox][data-part=root][data-disabled] [data-part=description],[data-ui=checkbox] [data-part=control]:disabled~[data-part=label],[data-ui=checkbox] [data-part=control]:disabled~[data-part=description]{color:var(--slotted-checkbox-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=checkbox][data-part=root][data-variant=tile]{--_description-gap: var( --slotted-checkbox-tile-description-gap, var(--slotted-space-2, .25rem) );--_tile-surface: var(--slotted-checkbox-tile-background, var(--slotted-surface, Canvas));--_tile-edge: var( --slotted-checkbox-tile-border-color, var(--slotted-control-border-color, ButtonBorder) );--_tile-edge-width: var(--slotted-control-border-width, 1px);background-color:var(--_tile-surface);border-radius:var(--slotted-checkbox-tile-radius, var(--slotted-radius-md, 6px));box-shadow:var(--slotted-control-shadow, none);cursor:pointer;padding:var(--_tile-inset);position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=checkbox][data-part=root][data-variant=tile]:before{border:calc(var(--_tile-edge-width) + var(--_tile-invalid-edge, 0px)) solid var(--_tile-edge);border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute;transition:border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=checkbox][data-part=root][data-variant=tile] [data-part=label]:after{content:\"\";inset:0;position:absolute}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]):has([data-part=control]:not(:disabled)):not(:has([data-part=control]:is(:checked,:indeterminate))):hover{--_tile-surface: var( --slotted-checkbox-tile-hover-background, var(--slotted-tone-accent-subtle-hover) );--_tile-edge: var( --slotted-checkbox-tile-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]):has([data-part=control]:not(:disabled)):not(:has([data-part=control]:is(:checked,:indeterminate))):active{--_tile-surface: var( --slotted-checkbox-tile-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):has([data-part=control]:is(:checked,:indeterminate)){--_tile-edge: var( --slotted-checkbox-tile-checked-border-color, var(--slotted-tone-accent-solid) );--_tile-edge-width: var(--slotted-border-width-thick, 2px)}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):has([data-part=control]:is(:checked,:indeterminate)){--_tile-surface: var( --slotted-checkbox-tile-checked-background, var(--slotted-tone-accent-surface) )}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]):has([data-part=control]:is(:checked,:indeterminate):not(:disabled)):hover{--_tile-edge: var( --slotted-checkbox-tile-checked-hover-border-color, var(--slotted-tone-accent-solid-hover) )}[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid]{--_tile-edge: var( --slotted-checkbox-tile-invalid-border-color, var(--slotted-tone-danger-border) );--_tile-invalid-edge: var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )}[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid]:has([data-part=control]:is(:checked,:indeterminate)){--_tile-surface: var( --slotted-checkbox-tile-invalid-checked-background, var(--slotted-tone-danger-surface) );--_tile-edge: var( --slotted-checkbox-tile-invalid-checked-border-color, var(--slotted-tone-danger-solid) )}[data-ui=checkbox][data-part=root][data-variant=tile][data-readonly]{--_tile-surface: var( --slotted-checkbox-tile-readonly-background, var(--slotted-tone-secondary-subtle-hover) );--_tile-edge: var(--slotted-checkbox-tile-readonly-border-color, var(--slotted-border-strong));cursor:default}[data-ui=checkbox][data-part=root][data-variant=tile][data-disabled],[data-ui=checkbox][data-part=root][data-variant=tile]:has([data-part=control]:disabled){--_tile-surface: var( --slotted-checkbox-tile-disabled-background, var(--slotted-disabled-background) );--_tile-edge: var( --slotted-checkbox-tile-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;cursor:not-allowed}[data-ui=checkbox][data-part=root][data-variant=tile]:has([data-part=control]:focus-visible){outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=checkbox][data-part=root][data-variant=tile] [data-part=control]:focus-visible{outline:none}@media(forced-colors:active){[data-ui=checkbox] [data-part=control]{background-color:Field;border-color:FieldText}[data-ui=checkbox] [data-part=control]:checked,[data-ui=checkbox] [data-part=control]:indeterminate{background-color:Highlight;border-color:Highlight}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked,[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate{background-color:Highlight;border-color:CanvasText;outline:var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) ) solid Canvas;outline-offset:calc(-1 * (var(--slotted-checkbox-border-width, var(--slotted-border-width-medium, 1.5px)) + var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) ) + var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )))}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked:focus-visible,[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate:focus-visible{outline:calc(var(--slotted-focus-ring-width, 2px) + var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=checkbox] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox] [data-part=control]:indeterminate+[data-part=indicator]{color:HighlightText}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate+[data-part=indicator]{color:HighlightText}[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid],[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid]:has([data-part=control]:is(:checked,:indeterminate)){--_tile-edge: CanvasText}[data-ui=checkbox] [data-part=control]:disabled{background-color:Field;border-color:GrayText}[data-ui=checkbox] [data-part=control]:disabled+[data-part=indicator]{color:GrayText}}}\n", "@layer slotted.components{[data-ui=visually-hidden]:not([data-focusable]:focus-within){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:0;inset-inline-start:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}}\n"] }]
+        }], propDecorators: { sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], cellAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellAlign", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], stickyFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFooter", required: false }] }], stickyTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyTo", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], sortChangeRequest: [{ type: i0.Output, args: ["sortChangeRequest"] }], valueChangeRequest: [{ type: i0.Output, args: ["valueChangeRequest"] }], expandedChangeRequest: [{ type: i0.Output, args: ["expandedChangeRequest"] }] } });
+
+/**
+ * The scroller and the table it holds.
+ *
+ * Two elements and one component, because neither is a decision a consumer
+ * makes: the `table` carries the semantics and the host carries the overflow.
+ * Angular pays one element for the host and draws the other in its template,
+ * which is the same division `checkbox` records.
+ *
+ * **The region wiring is written only while the table overflows.** `role`,
+ * `tabindex` and a name arrive together, measured by `@slotted/core/overflow` —
+ * the rule `prose` set. A tab stop on a table that fits makes a reader press Tab
+ * for nothing, and a wide table with no tab stop is unreachable without a
+ * pointer. Nothing is measured until the first render after mount, so the
+ * server renders a plain scroller and hydration finds the same DOM.
+ *
+ * **The host's `aria-label` names the table.** An instance with no caption
+ * names itself with it, and the template writes it on the `table`, the
+ * element whose name it is. The region takes the catalog's name, or
+ * `scrollLabel`.
+ */
+class SlTableContent {
+    /**
+     * The total number of rows behind a paged or filtered table. Written as
+     * `aria-rowcount`, with `aria-rowindex` on every row, and only then: the
+     * practice requires the pair exactly when the DOM is not the whole set.
+     */
+    totalRowCount = input(undefined, { ...(ngDevMode ? { debugName: "totalRowCount" } : /* istanbul ignore next */ {}), transform: (count) => (count === undefined ? undefined : numberAttribute(count)) });
+    /** The name the region takes while it overflows, over the catalog's. */
+    scrollLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollLabel" }] : /* istanbul ignore next */ []));
+    /** The element that names it instead, which is usually the caption. */
+    scrollLabelledBy = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollLabelledBy" }] : /* istanbul ignore next */ []));
+    table = inject(SlTable);
+    host = inject(ElementRef);
+    /** The host's own `aria-label`: the table's name, moved onto the `table`. */
+    tableLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    affordance = null;
+    state = signal({ overflowing: false, atStart: true, atEnd: true }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    regionLabel = computed(() => this.state().overflowing && this.scrollLabelledBy() === undefined
+        ? (this.scrollLabel() ?? this.table.t('scroll'))
+        : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "regionLabel" }] : /* istanbul ignore next */ []));
+    regionLabelledBy = computed(() => this.state().overflowing ? (this.scrollLabelledBy() ?? null) : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "regionLabelledBy" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            /**
+             * Nothing is measured under `stickyTo="page"`: the family has released its
+             * own scroll container so the header can stick to what scrolls outside it,
+             * and a box that does not scroll has no overflow to answer and no tab stop
+             * to earn.
+             */
+            if (this.table.resolvedStickyTo() === 'page')
+                return;
+            const handle = createScrollAffordance(this.host.nativeElement, {
+                onChange: (next) => this.state.set(next),
+            });
+            this.affordance = handle;
+            this.state.set(handle.state());
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.affordance?.destroy();
+            this.affordance = null;
+        });
+    }
+    /** Brings one row into view by the shortest movement that does it. */
+    scrollToRow(value) {
+        const row = this.host.nativeElement.querySelector(`[data-part="row"][data-value="${CSS.escape(value)}"]`);
+        if (row !== null)
+            this.affordance?.reveal(row);
+    }
+    /** Measures again, after rows arrive or a column changes width. */
+    refresh() {
+        this.affordance?.refresh();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlTableContent, isStandalone: true, selector: "div[slTableContent]", inputs: { totalRowCount: { classPropertyName: "totalRowCount", publicName: "totalRowCount", isSignal: true, isRequired: false, transformFunction: null }, scrollLabel: { classPropertyName: "scrollLabel", publicName: "scrollLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollLabelledBy: { classPropertyName: "scrollLabelledBy", publicName: "scrollLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "scroll" }, properties: { "attr.data-overflowing": "state().overflowing ? '' : null", "attr.data-at-start": "state().overflowing && state().atStart ? '' : null", "attr.data-at-end": "state().overflowing && state().atEnd ? '' : null", "attr.role": "state().overflowing ? 'region' : null", "attr.tabindex": "state().overflowing ? '0' : null", "attr.aria-label": "regionLabel()", "attr.aria-labelledby": "regionLabelledBy()" } }, exportAs: ["slTableContent"], ngImport: i0, template: `<table
+    data-part="table"
+    [attr.aria-label]="tableLabel"
+    [attr.aria-busy]="table.loading() ? 'true' : null"
+    [attr.aria-rowcount]="totalRowCount() ?? null"
+  >
+    <ng-content />
+  </table>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[slTableContent]',
+                    standalone: true,
+                    exportAs: 'slTableContent',
+                    template: `<table
+    data-part="table"
+    [attr.aria-label]="tableLabel"
+    [attr.aria-busy]="table.loading() ? 'true' : null"
+    [attr.aria-rowcount]="totalRowCount() ?? null"
+  >
+    <ng-content />
+  </table>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'scroll',
+                        '[attr.data-overflowing]': "state().overflowing ? '' : null",
+                        '[attr.data-at-start]': "state().overflowing && state().atStart ? '' : null",
+                        '[attr.data-at-end]': "state().overflowing && state().atEnd ? '' : null",
+                        '[attr.role]': "state().overflowing ? 'region' : null",
+                        '[attr.tabindex]': "state().overflowing ? '0' : null",
+                        '[attr.aria-label]': 'regionLabel()',
+                        '[attr.aria-labelledby]': 'regionLabelledBy()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { totalRowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRowCount", required: false }] }], scrollLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLabel", required: false }] }], scrollLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLabelledBy", required: false }] }] } });
+
+/**
+ * The axes every cell answers, written once. `numeric` and `align` are two facts
+ * rather than one axis: a number is set in tabular figures whichever way it is
+ * aligned, and a right-aligned label is not a number.
+ */
+class SlTableCellAxes {
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /**
+     * Where this cell's content sits in a row as tall as its tallest cell. The
+     * table states it once through `cellAlign`; this overrides it for the one
+     * cell that wants the other answer.
+     */
+    blockAlign = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blockAlign" }] : /* istanbul ignore next */ []));
+    numeric = input(false, { ...(ngDevMode ? { debugName: "numeric" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    text = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    sticky = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    /**
+     * Where a pinned column stops, as a CSS length. Nought unless stated: two
+     * columns pinned to the same edge need the second to know how wide the first
+     * is, and the family states that rather than measuring it — measuring would
+     * mean reading the layout during change detection.
+     */
+    stickyOffset = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stickyOffset" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableCellAxes, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTableCellAxes, isStandalone: true, inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, blockAlign: { classPropertyName: "blockAlign", publicName: "blockAlign", isSignal: true, isRequired: false, transformFunction: null }, numeric: { classPropertyName: "numeric", publicName: "numeric", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, stickyOffset: { classPropertyName: "stickyOffset", publicName: "stickyOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-align": "align() ?? null", "attr.data-block-align": "blockAlign() ?? null", "attr.data-numeric": "numeric() ? '' : null", "attr.data-text": "text() ?? null", "attr.data-sticky": "sticky() ?? null", "style.--slotted-table-sticky-inset": "stickyOffset() ?? null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableCellAxes, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    host: {
+                        '[attr.data-align]': 'align() ?? null',
+                        '[attr.data-block-align]': 'blockAlign() ?? null',
+                        '[attr.data-numeric]': "numeric() ? '' : null",
+                        '[attr.data-text]': 'text() ?? null',
+                        '[attr.data-sticky]': 'sticky() ?? null',
+                        '[style.--slotted-table-sticky-inset]': 'stickyOffset() ?? null',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], blockAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockAlign", required: false }] }], numeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "numeric", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], stickyOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyOffset", required: false }] }] } });
+/**
+ * The table's name, and the element the platform already associates with it. A
+ * `caption` is the accessible name whether it is read or hidden, so the family
+ * writes no `aria-labelledby` restating what the browser states.
+ */
+class SlTableCaption {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableCaption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTableCaption, isStandalone: true, selector: "caption[slTableCaption]", host: { attributes: { "data-part": "caption" } }, exportAs: ["slTableCaption"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableCaption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'caption[slTableCaption]',
+                    standalone: true,
+                    exportAs: 'slTableCaption',
+                    host: { 'data-part': 'caption' },
+                }]
+        }] });
+class SlTableHead {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableHead, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTableHead, isStandalone: true, selector: "thead[slTableHead]", host: { attributes: { "data-part": "head" } }, exportAs: ["slTableHead"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableHead, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'thead[slTableHead]',
+                    standalone: true,
+                    exportAs: 'slTableHead',
+                    host: { 'data-part': 'head' },
+                }]
+        }] });
+class SlTableBody {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTableBody, isStandalone: true, selector: "tbody[slTableBody]", host: { attributes: { "data-part": "body" } }, exportAs: ["slTableBody"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tbody[slTableBody]',
+                    standalone: true,
+                    exportAs: 'slTableBody',
+                    host: { 'data-part': 'body' },
+                }]
+        }] });
+/**
+ * The `tfoot`, which the HTML Standard calls the column summaries of the table.
+ * It is not `slTableFooter`, which is the bar outside the table holding the
+ * consumer's own controls.
+ */
+class SlTableSummary {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableSummary, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTableSummary, isStandalone: true, selector: "tfoot[slTableSummary]", host: { attributes: { "data-part": "summary" } }, exportAs: ["slTableSummary"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableSummary, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tfoot[slTableSummary]',
+                    standalone: true,
+                    exportAs: 'slTableSummary',
+                    host: { 'data-part': 'summary' },
+                }]
+        }] });
+/**
+ * The bar under the table and inside its frame, where a paged listing puts its
+ * control. It is a sibling of the scroller rather than a child, so a table
+ * scrolled sideways does not take its pagination with it.
+ */
+class SlTableFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTableFooter, isStandalone: true, selector: "div[slTableFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slTableFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[slTableFooter]',
+                    standalone: true,
+                    exportAs: 'slTableFooter',
+                    host: { 'data-part': 'footer' },
+                }]
+        }] });
+/**
+ * One record. It carries `data-selected` and `data-expanded` for the stylesheet
+ * and `data-value` for the range and the select-all, which read the rows out of
+ * the DOM at the moment they act.
+ *
+ * A row is not selectable under the `table` role, so it carries no
+ * `aria-selected`: the state is painted here and announced by the checkbox.
+ */
+class SlTableRow {
+    /** The row's key, required wherever selection or expansion is on. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The row's position in the whole set, one-based, written only where the
+     * table states a total: the practice warns that setting `aria-rowindex` on
+     * some rows and not others has devastating effects on assistive technology.
+     */
+    rowIndex = input(undefined, { ...(ngDevMode ? { debugName: "rowIndex" } : /* istanbul ignore next */ {}), transform: (index) => (index === undefined ? undefined : numberAttribute(index)) });
+    table = inject(SlTable);
+    selected = computed(() => {
+        const key = this.value();
+        return key !== undefined && this.table.isSelected(key);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    expanded = computed(() => {
+        const key = this.value();
+        return key !== undefined && this.table.isExpanded(key);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    detailId = computed(() => `${this.table.id}-detail-${this.value() ?? ''}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "detailId" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTableRow, isStandalone: true, selector: "tr[slTableRow]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "row" }, properties: { "attr.data-value": "value() ?? null", "attr.data-selected": "selected() ? '' : null", "attr.data-expanded": "expanded() ? '' : null", "attr.data-disabled": "disabled() ? '' : null", "attr.aria-rowindex": "rowIndex() ?? null" } }, exportAs: ["slTableRow"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tr[slTableRow]',
+                    standalone: true,
+                    exportAs: 'slTableRow',
+                    host: {
+                        'data-part': 'row',
+                        '[attr.data-value]': 'value() ?? null',
+                        '[attr.data-selected]': "selected() ? '' : null",
+                        '[attr.data-expanded]': "expanded() ? '' : null",
+                        '[attr.data-disabled]': "disabled() ? '' : null",
+                        '[attr.aria-rowindex]': 'rowIndex() ?? null',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: false }] }] } });
+/**
+ * A column's name. `scope="col"` is what makes a screen reader repeat it for
+ * every cell under it, and `aria-sort` is written here and on no other header.
+ *
+ * A name cut by its own box — `text="truncate"` on a column with no room —
+ * reads `Op…` to the eye while the whole of it is still what a screen reader
+ * repeats under every cell. The hint closes that gap: it opens only while the
+ * name is measured as cut, which a header that wraps or fits never is, and it
+ * is shown rather than read — `describes="none"`, because the header already
+ * states the words.
+ */
+class SlTableColumnHeader {
+    /** The column's own key, which the sort descriptor names. */
+    column = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    scope = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scope" }] : /* istanbul ignore next */ []));
+    table = inject(SlTable);
+    tooltip = inject(SlTooltip);
+    native = inject(ElementRef).nativeElement;
+    ariaSort = computed(() => {
+        const sort = this.table.sort();
+        return sort !== null && sort.column === this.column() ? sort.direction : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSort" }] : /* istanbul ignore next */ []));
+    /** The words the header itself holds, read when the hint is about to show them. */
+    hint = computed(() => this.tooltip.isOpen() ? (this.native.textContent ?? '').trim() : '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableColumnHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlTableColumnHeader, isStandalone: true, selector: "th[slTableColumnHeader]", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "column-header" }, properties: { "attr.scope": "scope() ?? 'col'", "attr.aria-sort": "ariaSort()" } }, providers: [
+            provideTooltipDefaults({
+                describes: 'none',
+                openOn: 'hover',
+                side: 'bottom',
+                whenClipped: true,
+            }),
+        ], exportAs: ["slTableColumnHeader"], hostDirectives: [{ directive: SlTableCellAxes, inputs: ["align", "align", "blockAlign", "blockAlign", "numeric", "numeric", "text", "text", "sticky", "sticky", "stickyOffset", "stickyOffset"] }, { directive: i1.SlTooltip }, { directive: i1.SlTooltipTrigger }], ngImport: i0, template: `<ng-content />
+    <ng-template slTooltipLayer>
+      <div slTooltipContent>{{ hint() }}</div>
+    </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: SlTooltipContent, selector: "[slTooltipContent]", exportAs: ["slTooltipContent"] }, { kind: "directive", type: SlTooltipLayer, selector: "ng-template[slTooltipLayer]", exportAs: ["slTooltipLayer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableColumnHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'th[slTableColumnHeader]',
+                    standalone: true,
+                    exportAs: 'slTableColumnHeader',
+                    imports: [SlTooltipContent, SlTooltipLayer],
+                    template: `<ng-content />
+    <ng-template slTooltipLayer>
+      <div slTooltipContent>{{ hint() }}</div>
+    </ng-template>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [
+                        {
+                            directive: SlTableCellAxes,
+                            inputs: ['align', 'blockAlign', 'numeric', 'text', 'sticky', 'stickyOffset'],
+                        },
+                        SlTooltip,
+                        SlTooltipTrigger,
+                    ],
+                    providers: [
+                        provideTooltipDefaults({
+                            describes: 'none',
+                            openOn: 'hover',
+                            side: 'bottom',
+                            whenClipped: true,
+                        }),
+                    ],
+                    host: {
+                        'data-part': 'column-header',
+                        '[attr.scope]': "scope() ?? 'col'",
+                        '[attr.aria-sort]': 'ariaSort()',
+                    },
+                }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }] } });
+/**
+ * The cell that identifies the record, which a screen reader repeats in each of
+ * the cells beside it. It states no colour of its own, so a selected record's
+ * name turns with the row and a disabled one dims with it.
+ */
+class SlTableRowHeader {
+    scope = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scope" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableRowHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTableRowHeader, isStandalone: true, selector: "th[slTableRowHeader]", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "row-header" }, properties: { "attr.scope": "scope() ?? 'row'" } }, exportAs: ["slTableRowHeader"], hostDirectives: [{ directive: SlTableCellAxes, inputs: ["align", "align", "blockAlign", "blockAlign", "numeric", "numeric", "text", "text", "sticky", "sticky", "stickyOffset", "stickyOffset"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableRowHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'th[slTableRowHeader]',
+                    standalone: true,
+                    exportAs: 'slTableRowHeader',
+                    hostDirectives: [
+                        {
+                            directive: SlTableCellAxes,
+                            inputs: ['align', 'blockAlign', 'numeric', 'text', 'sticky', 'stickyOffset'],
+                        },
+                    ],
+                    host: { 'data-part': 'row-header', '[attr.scope]': "scope() ?? 'row'" },
+                }]
+        }], propDecorators: { scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }] } });
+class SlTableCell {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTableCell, isStandalone: true, selector: "td[slTableCell]", host: { attributes: { "data-part": "cell" } }, exportAs: ["slTableCell"], hostDirectives: [{ directive: SlTableCellAxes, inputs: ["align", "align", "blockAlign", "blockAlign", "numeric", "numeric", "text", "text", "sticky", "sticky", "stickyOffset", "stickyOffset"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'td[slTableCell]',
+                    standalone: true,
+                    exportAs: 'slTableCell',
+                    hostDirectives: [
+                        {
+                            directive: SlTableCellAxes,
+                            inputs: ['align', 'blockAlign', 'numeric', 'text', 'sticky', 'stickyOffset'],
+                        },
+                    ],
+                    host: { 'data-part': 'cell' },
+                }]
+        }] });
+/**
+ * The column's name wrapped in a button, which is what the APG's own sortable
+ * example does. The cycle is ascending, descending, then none.
+ *
+ * The consumer's own listener runs as well: this is a listener on the host, so
+ * both fire and a consumer who calls `preventDefault()` keeps the sort still.
+ */
+class SlTableSort {
+    /** Overrides the column the header states, where a header holds two. */
+    column = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    table = inject(SlTable);
+    header = inject(SlTableColumnHeader, { optional: true });
+    press(event) {
+        if (event.defaultPrevented)
+            return;
+        const key = this.column() ?? this.header?.column();
+        if (key === undefined)
+            return;
+        this.table.requestSort(key, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableSort, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlTableSort, isStandalone: true, selector: "button[slTableSort]", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "sort", "type": "button" }, listeners: { "click": "press($event)" } }, exportAs: ["slTableSort"], ngImport: i0, template: `<ng-content /><span slIcon><svg slGlyph name="chevron-down"></svg></span>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableSort, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slTableSort]',
+                    standalone: true,
+                    exportAs: 'slTableSort',
+                    imports: [SlGlyph, SlIcon],
+                    /* The direction mark follows the name: one chevron the stylesheet turns over
+                       for ascending and shows, muted, under the pointer on an unsorted column. */
+                    template: `<ng-content /><span slIcon><svg slGlyph name="chevron-down"></svg></span>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-part': 'sort',
+                        type: 'button',
+                        '(click)': 'press($event)',
+                    },
+                }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }] } });
+/**
+ * The slot beside a column's name for the controls it carries: a filter
+ * trigger, a column menu, a help hint. The family holds the place and the
+ * geometry; what a filter means is the consumer's query.
+ */
+class SlTableColumnActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableColumnActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTableColumnActions, isStandalone: true, selector: "span[slTableColumnActions]", host: { attributes: { "data-part": "column-actions" } }, exportAs: ["slTableColumnActions"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableColumnActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'span[slTableColumnActions]',
+                    standalone: true,
+                    exportAs: 'slTableColumnActions',
+                    host: { 'data-part': 'column-actions' },
+                }]
+        }] });
+/**
+ * A row's own checkbox, in the cell the family lays out. The control is
+ * `checkbox`'s: the cell is this family's and the chooser is not, which is the
+ * division `list-item` recorded. Its name is a visually hidden label rather
+ * than an `aria-label` on the wrapper, because the wrapper is not the control.
+ *
+ * `Shift` while pressing selects every row from the anchor to this one.
+ */
+class SlTableSelect {
+    /** The row this checkbox chooses. Read from the row when it is not stated. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    table = inject(SlTable);
+    row = inject(SlTableRow);
+    key = computed(() => this.value() ?? this.row.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    checked = computed(() => {
+        const key = this.key();
+        return key !== undefined && this.table.isSelected(key);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    name = computed(() => {
+        const key = this.key();
+        return this.table.t('selectRow', { row: key ?? '' }).trim();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    press(event) {
+        const key = this.key();
+        if (key === undefined || this.row.disabled())
+            return;
+        this.table.toggleSelected(key, { range: event.shiftKey, source: event });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlTableSelect, isStandalone: true, selector: "td[slTableSelect]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "selection" } }, exportAs: ["slTableSelect"], hostDirectives: [{ directive: SlTableCellAxes, inputs: ["align", "align", "blockAlign", "blockAlign", "numeric", "numeric", "text", "text", "sticky", "sticky", "stickyOffset", "stickyOffset"] }], ngImport: i0, template: `<span
+    slCheckbox
+    [checked]="checked()"
+    [disabled]="row.disabled()"
+    (click)="press($event)"
+  >
+    <span data-ui="visually-hidden" data-part="root">{{ name() }}</span>
+  </span>`, isInline: true, dependencies: [{ kind: "component", type: SlCheckbox, selector: "[slCheckbox]", inputs: ["checked", "defaultChecked", "indeterminate", "parent", "value", "name", "size", "labelPlacement", "variant", "disabled", "readOnly", "invalid"], outputs: ["checkedChange"], exportAs: ["slCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableSelect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'td[slTableSelect]',
+                    standalone: true,
+                    exportAs: 'slTableSelect',
+                    imports: [SlCheckbox],
+                    template: `<span
+    slCheckbox
+    [checked]="checked()"
+    [disabled]="row.disabled()"
+    (click)="press($event)"
+  >
+    <span data-ui="visually-hidden" data-part="root">{{ name() }}</span>
+  </span>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [
+                        {
+                            directive: SlTableCellAxes,
+                            inputs: ['align', 'blockAlign', 'numeric', 'text', 'sticky', 'stickyOffset'],
+                        },
+                    ],
+                    host: { 'data-part': 'selection' },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+/**
+ * The header's checkbox. It covers the rows in the DOM, is indeterminate while
+ * some of them are selected, and states the count it covers in its own name — a
+ * selection over a whole result set is a decision only the consumer's query can
+ * make.
+ */
+class SlTableSelectAll {
+    table = inject(SlTable);
+    checked = computed(() => {
+        const chosen = this.table.value().length;
+        return chosen > 0 && chosen === this.table.rows().length;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    indeterminate = computed(() => {
+        const chosen = this.table.value().length;
+        return chosen > 0 && chosen < this.table.rows().length;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    name = computed(() => {
+        return this.table.t('selectAll', { count: this.table.value().length });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    press(event) {
+        this.table.toggleSelectAll(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableSelectAll, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlTableSelectAll, isStandalone: true, selector: "th[slTableSelectAll]", host: { attributes: { "data-part": "selection", "scope": "col" } }, exportAs: ["slTableSelectAll"], hostDirectives: [{ directive: SlTableCellAxes, inputs: ["align", "align", "blockAlign", "blockAlign", "numeric", "numeric", "text", "text", "sticky", "sticky", "stickyOffset", "stickyOffset"] }], ngImport: i0, template: `<span
+    slCheckbox
+    [checked]="checked()"
+    [indeterminate]="indeterminate()"
+    (click)="press($event)"
+  >
+    <span data-ui="visually-hidden" data-part="root">{{ name() }}</span>
+  </span>`, isInline: true, dependencies: [{ kind: "component", type: SlCheckbox, selector: "[slCheckbox]", inputs: ["checked", "defaultChecked", "indeterminate", "parent", "value", "name", "size", "labelPlacement", "variant", "disabled", "readOnly", "invalid"], outputs: ["checkedChange"], exportAs: ["slCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableSelectAll, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'th[slTableSelectAll]',
+                    standalone: true,
+                    exportAs: 'slTableSelectAll',
+                    imports: [SlCheckbox],
+                    template: `<span
+    slCheckbox
+    [checked]="checked()"
+    [indeterminate]="indeterminate()"
+    (click)="press($event)"
+  >
+    <span data-ui="visually-hidden" data-part="root">{{ name() }}</span>
+  </span>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [
+                        {
+                            directive: SlTableCellAxes,
+                            inputs: ['align', 'blockAlign', 'numeric', 'text', 'sticky', 'stickyOffset'],
+                        },
+                    ],
+                    host: { 'data-part': 'selection', scope: 'col' },
+                }]
+        }] });
+/**
+ * The Disclosure pattern, borrowed whole: a `button` carrying `aria-expanded`
+ * and naming the row it opens.
+ */
+class SlTableExpander {
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    table = inject(SlTable);
+    row = inject(SlTableRow);
+    name = computed(() => {
+        return this.row.expanded() ? this.table.t('collapse') : this.table.t('expand');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    press(event) {
+        if (event.defaultPrevented)
+            return;
+        const key = this.value() ?? this.row.value();
+        if (key === undefined)
+            return;
+        this.table.toggleExpanded(key, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableExpander, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlTableExpander, isStandalone: true, selector: "button[slTableExpander]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "expander", "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.aria-expanded": "row.expanded()", "attr.aria-controls": "row.expanded() ? row.detailId() : null", "attr.aria-label": "name()" } }, exportAs: ["slTableExpander"], ngImport: i0, template: `<ng-content
+    ><span slIcon><svg slGlyph name="chevron-right"></svg></span
+  ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableExpander, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slTableExpander]',
+                    standalone: true,
+                    exportAs: 'slTableExpander',
+                    imports: [SlGlyph, SlIcon],
+                    /* The chevron is drawn unless the consumer wrote content of their own. */
+                    template: `<ng-content
+    ><span slIcon><svg slGlyph name="chevron-right"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-part': 'expander',
+                        type: 'button',
+                        '[attr.aria-expanded]': 'row.expanded()',
+                        '[attr.aria-controls]': 'row.expanded() ? row.detailId() : null',
+                        '[attr.aria-label]': 'name()',
+                        '(click)': 'press($event)',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+/**
+ * One row holding one cell that spans the table.
+ *
+ * **The consumer writes the `@if`.** Angular's own control flow is what keeps a
+ * closed detail out of the DOM entirely, and a component whose host is the `tr`
+ * cannot remove that `tr` from inside itself — an empty row is a row a screen
+ * reader still counts. React returns `null` from the component instead, and the
+ * two reach the same DOM; the asymmetry is the frameworks', not the family's.
+ */
+class SlTableDetail {
+    /** The row the detail belongs to. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** How many columns the detail spans. Defaults to the table's own count. */
+    colSpan = input(undefined, { ...(ngDevMode ? { debugName: "colSpan" } : /* istanbul ignore next */ {}), transform: (count) => (count === undefined ? undefined : numberAttribute(count)) });
+    table = inject(SlTable);
+    span = computed(() => this.colSpan() ?? this.table.resolvedColumns(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "span" }] : /* istanbul ignore next */ []));
+    detailId = computed(() => `${this.table.id}-detail-${this.value()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "detailId" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableDetail, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlTableDetail, isStandalone: true, selector: "tr[slTableDetail]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "detail" }, properties: { "attr.id": "detailId()" } }, exportAs: ["slTableDetail"], ngImport: i0, template: `<td [attr.colspan]="span()" data-part="cell"><ng-content /></td>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableDetail, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tr[slTableDetail]',
+                    standalone: true,
+                    exportAs: 'slTableDetail',
+                    template: `<td [attr.colspan]="span()" data-part="cell"><ng-content /></td>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'detail', '[attr.id]': 'detailId()' },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }] } });
+/**
+ * What is shown when there is nothing. It takes a `result-state`, whose status
+ * axis already separates an empty set from a set a filter emptied.
+ */
+class SlTableEmpty {
+    colSpan = input(undefined, { ...(ngDevMode ? { debugName: "colSpan" } : /* istanbul ignore next */ {}), transform: (count) => (count === undefined ? undefined : numberAttribute(count)) });
+    table = inject(SlTable);
+    span = computed(() => this.colSpan() ?? this.table.resolvedColumns(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "span" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTableEmpty, isStandalone: true, selector: "td[slTableEmpty]", inputs: { colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "empty" }, properties: { "attr.colspan": "span()" } }, exportAs: ["slTableEmpty"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'td[slTableEmpty]',
+                    standalone: true,
+                    exportAs: 'slTableEmpty',
+                    host: { 'data-part': 'empty', '[attr.colspan]': 'span()' },
+                }]
+        }], propDecorators: { colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }] } });
+/**
+ * The skeleton rows of a first load: the table's shape before its content. A
+ * refresh over rows already read is the other state and is not this one —
+ * `loading` on the table dims the body and moves nothing.
+ */
+class SlTableLoader {
+    /** How many skeleton rows a first load draws. */
+    skeletonRows = input(5, { ...(ngDevMode ? { debugName: "skeletonRows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    table = inject(SlTable);
+    skeleton = computed(() => Array.from({ length: this.skeletonRows() }, (_row, index) => index), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeleton" }] : /* istanbul ignore next */ []));
+    cells = computed(() => Array.from({ length: this.table.resolvedColumns() }, (_cell, index) => index), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableLoader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTableLoader, isStandalone: true, selector: "tbody[slTableLoader]", inputs: { skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "loader", "aria-hidden": "true" } }, exportAs: ["slTableLoader"], ngImport: i0, template: `@for (row of skeleton(); track row) {
+    <tr data-part="row">
+      @for (cell of cells(); track cell) {
+        <td data-part="cell">
+          <span slSkeleton loading inlineSize="100%"></span>
+        </td>
+      }
+    </tr>
+  }`, isInline: true, dependencies: [{ kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableLoader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tbody[slTableLoader]',
+                    standalone: true,
+                    exportAs: 'slTableLoader',
+                    imports: [SlSkeleton],
+                    template: `@for (row of skeleton(); track row) {
+    <tr data-part="row">
+      @for (cell of cells(); track cell) {
+        <td data-part="cell">
+          <span slSkeleton loading inlineSize="100%"></span>
+        </td>
+      }
+    </tr>
+  }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'loader', 'aria-hidden': 'true' },
+                }]
+        }], propDecorators: { skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }] } });
+/** Every part of the family, for a template that imports the set at once. */
+const SL_TABLE_PARTS = [
+    SlTableBody,
+    SlTableCaption,
+    SlTableCell,
+    SlTableColumnActions,
+    SlTableColumnHeader,
+    SlTableDetail,
+    SlTableEmpty,
+    SlTableExpander,
+    SlTableFooter,
+    SlTableHead,
+    SlTableLoader,
+    SlTableRow,
+    SlTableRowHeader,
+    SlTableSelect,
+    SlTableSelectAll,
+    SlTableSort,
+    SlTableSummary,
+];
+
+/**
+ * Everything the five filters share: the draft, the conditions, the join, the
+ * announcements and the request that carries a reason. What each of them adds
+ * is its kind, its own typed `value`, and the control inside `filter-operand`.
+ *
+ * The panel edits a **draft**. Nothing reaches the consumer until Apply, and
+ * Escape or a press outside restores the descriptor the panel opened with. The
+ * family applies nothing: it reports the descriptor, and
+ * `createFilterPredicate` in `@slotted/core/filter` is what a consumer applies
+ * to its own rows.
+ */
+class SlTableFilterBase {
+    /**
+     * The operators this column offers, narrowing the kind's own list. Declared
+     * once here rather than per component: the narrow operator type is the one
+     * thing a shared base cannot keep, and the value — which is what a consumer
+     * reads — stays exact on each of the five.
+     */
+    operators = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operators" }] : /* istanbul ignore next */ []));
+    /** Which one the panel opens on. The kind's own default unless stated. */
+    defaultOperator = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultOperator" }] : /* istanbul ignore next */ []));
+    /**
+     * How many conditions the panel offers, which is AG Grid's
+     * `maxNumConditions`. The second appears once the first is complete.
+     */
+    conditions = input(2, { ...(ngDevMode ? { debugName: "conditions" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * The column's name in the trigger's own name. Read from the column header
+     * around it when it is not stated.
+     */
+    columnLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * The trigger's whole accessible name, replacing the one the catalog writes.
+     * It is the trigger's `aria-label`, which no other input reaches.
+     */
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the panel is drawn at the end of the document. On by default, and
+     * that is not a preference: a framed table clips its own overflow, so an
+     * unportalled panel is cut off at the frame's edge — read on the Angular
+     * reference page, where the join and both actions were simply not there. The
+     * React binding takes `popover`'s own default, which is the same answer.
+     */
+    portal = input(true, { ...(ngDevMode ? { debugName: "portal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The request behind every committed change, with the reason it carries. */
+    valueChangeRequest = output();
+    table = inject(SlTable);
+    header = inject(SlTableColumnHeader, { optional: true });
+    host = inject(ElementRef);
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    draft = signal(emptyFilter('text'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    /** The table's words, which the panel speaks in. */
+    t = this.table.t;
+    start = computed(() => this.defaultOperator() ?? defaultOperator(this.kind), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "start" }] : /* istanbul ignore next */ []));
+    offered = computed(() => this.operators() ?? operatorsFor(this.kind), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offered" }] : /* istanbul ignore next */ []));
+    format = {
+        join: (join) => this.t(`filterJoins.${join}`),
+        operator: (operator) => this.t(`filterOperators.${operator}`),
+    };
+    operatorName(operator) {
+        return this.format.operator(operator);
+    }
+    /** Every operator as a labelled option, so the closed chooser names its own. */
+    operatorItems = computed(() => this.offered().map((operator) => ({ label: this.operatorName(operator), value: operator })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operatorItems" }] : /* istanbul ignore next */ []));
+    joinName(join) {
+        return this.format.join(join);
+    }
+    filtered = computed(() => isFilterActive(this.readValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+    name = computed(() => {
+        const stated = this.label();
+        if (stated !== undefined)
+            return stated;
+        const column = this.columnName();
+        const committed = this.readValue();
+        return isFilterActive(committed)
+            ? this.t('filterApplied', { column, filter: describeFilter(committed, this.format) })
+            : this.t('filterColumn', { column }).trim();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** One condition, or the two the panel can hold. */
+    rows = computed(() => {
+        const draft = this.draft();
+        const first = draft.conditions[0] ?? { operator: this.start() };
+        /* AG Grid's own reveal: the second appears once the first is complete. A
+           button would be one more word to translate before the common case, and an
+           empty second row is noise in every panel that never needs it. */
+        if (this.allowed() < 2 || !isConditionActive(this.kind, first))
+            return [first];
+        return [first, draft.conditions[1] ?? { operator: this.start() }];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    allowed() {
+        return this.conditions();
+    }
+    hasSecond = computed(() => this.rows().length === 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSecond" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the operand template draws one control for both ends of a range,
+     * written as `data-range` on `filter-operand` so the two-column operand grid
+     * collapses to one. The date, time and date-time filters say yes.
+     */
+    rangeOperand() {
+        return false;
+    }
+    /** Which of a kind's operands is drawn, written as `data-operand`. */
+    operandName() {
+        return null;
+    }
+    /** `data-range`, for the condition whose operator takes two operands. */
+    rangeMark(condition) {
+        return this.rangeOperand() && this.slotsOf(condition).length === 2 ? '' : null;
+    }
+    slotsOf(condition) {
+        const operands = operandCount(condition.operator);
+        return operands === 0 ? [] : operands === 1 ? [0] : [0, 1];
+    }
+    operandLabel(condition, slot) {
+        if (operandCount(condition.operator) < 2)
+            return this.t('filterValue');
+        return slot === 0 ? this.t('filterFrom') : this.t('filterTo');
+    }
+    context(index) {
+        const condition = this.rows()[index] ?? { operator: this.start() };
+        return {
+            apply: () => this.applyDraft(null, 'keyboard'),
+            condition,
+            label: (slot) => this.operandLabel(condition, slot),
+            set: (slot, value) => this.setOperand(index, slot, value),
+            setBoth: (value, end) => this.setOperands(index, value, end),
+            slots: this.slotsOf(condition),
+        };
+    }
+    announce(message) {
+        getLiveAnnouncer(this.host.nativeElement.ownerDocument).announce(message);
+    }
+    /**
+     * Opens and closes, and resets the draft either way: the draft starts from
+     * what is committed every time the panel opens, and closing puts it back —
+     * closing is cancelling, and Apply closes the panel itself after committing.
+     */
+    toggle(next) {
+        this.open.set(next);
+        this.draft.set(this.readValue() ?? this.blank());
+    }
+    blank() {
+        return emptyFilter(this.kind, this.start());
+    }
+    setOperator(index, operator) {
+        const condition = this.rows()[index] ?? { operator: this.start() };
+        const before = operandCount(condition.operator);
+        const after = operandCount(operator);
+        /* An operand the new operator still takes survives the change: a reader who
+           typed a value and then chose a different comparison meant to keep it. */
+        const next = {
+            operator,
+            ...(after >= 1 && before >= 1 ? { value: condition.value } : {}),
+            ...(after === 2 && before === 2 ? { end: condition.end } : {}),
+        };
+        this.draft.set(withCondition(this.draft(), index, next));
+        /* The panel grows a field or loses two. Announced, because a form that
+           changes shape under a reader who cannot see it says nothing otherwise. */
+        if (after !== before) {
+            this.announce(this.t('filterOperands', { operator: this.operatorName(operator), count: after }));
+        }
+    }
+    setOperand(index, slot, operand) {
+        const condition = this.rows()[index] ?? { operator: this.start() };
+        const wasActive = isConditionActive(this.kind, condition);
+        const next = slot === 0 ? { ...condition, value: operand } : { ...condition, end: operand };
+        this.draft.set(withCondition(this.draft(), index, next));
+        if (index === 0 && this.allowed() >= 2 && !wasActive && isConditionActive(this.kind, next)) {
+            this.announce(this.t('filterConditionAdded'));
+        }
+    }
+    setOperands(index, value, end) {
+        const condition = this.rows()[index] ?? { operator: this.start() };
+        const wasActive = isConditionActive(this.kind, condition);
+        const next = { ...condition, value, end };
+        this.draft.set(withCondition(this.draft(), index, next));
+        if (index === 0 && this.allowed() >= 2 && !wasActive && isConditionActive(this.kind, next)) {
+            this.announce(this.t('filterConditionAdded'));
+        }
+    }
+    setJoin(join) {
+        this.draft.set(withJoin(this.draft(), join));
+    }
+    /**
+     * Named for what it does rather than `apply`, which reads as
+     * `Function.prototype.apply` to a linter and to the next reader after it.
+     */
+    applyDraft(source, reason = 'pointer') {
+        const next = normalizeFilter(this.draft());
+        this.request(next, reason, source);
+        const column = this.columnName();
+        this.announce(next
+            ? this.t('filterApplied', { column, filter: describeFilter(next, this.format) })
+            : this.t('filterCleared', { column }));
+        this.open.set(false);
+    }
+    clear(source) {
+        this.draft.set(this.blank());
+        this.announce(this.t('filterCleared', { column: this.columnName() }));
+        this.request(null, 'clear', source);
+        this.open.set(false);
+    }
+    canClear = computed(() => isFilterActive(this.draft()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canClear" }] : /* istanbul ignore next */ []));
+    columnName() {
+        return this.columnLabel() ?? this.header?.column() ?? '';
+    }
+    request(next, reason, source) {
+        const state = createControllable({
+            initial: this.readValue(),
+            /* Two descriptors are the same filter when they serialise the same. */
+            equals: (a, b) => serializeFilter(a) === serializeFilter(b),
+            onRequest: (request) => this.valueChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.writeValue(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableFilterBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTableFilterBase, isStandalone: true, inputs: { operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, defaultOperator: { classPropertyName: "defaultOperator", publicName: "defaultOperator", isSignal: true, isRequired: false, transformFunction: null }, conditions: { classPropertyName: "conditions", publicName: "conditions", isSignal: true, isRequired: false, transformFunction: null }, columnLabel: { classPropertyName: "columnLabel", publicName: "columnLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, portal: { classPropertyName: "portal", publicName: "portal", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChangeRequest: "valueChangeRequest", open: "openChange" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableFilterBase, decorators: [{
+            type: Directive
+        }], propDecorators: { operators: [{ type: i0.Input, args: [{ isSignal: true, alias: "operators", required: false }] }], defaultOperator: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOperator", required: false }] }], conditions: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditions", required: false }] }], columnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], portal: [{ type: i0.Input, args: [{ isSignal: true, alias: "portal", required: false }] }], valueChangeRequest: [{ type: i0.Output, args: ["valueChangeRequest"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
+/**
+ * The panel every kind shares, drawn around an operand its owner projects.
+ *
+ * The operand is an `ng-template` rather than projected content, because it is
+ * rendered once per condition: content would be built once and then belong to
+ * whichever condition asked for it first.
+ */
+class SlTableFilterShell {
+    /** The filter this shell draws for. */
+    owner = input.required({ ...(ngDevMode ? { debugName: "owner" } : /* istanbul ignore next */ {}), alias: 'slTableFilterShell' });
+    /** The control inside `filter-operand`, rendered once per condition. */
+    operand = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operand" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableFilterShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTableFilterShell, isStandalone: true, selector: "span[slTableFilterShell]", inputs: { owner: { classPropertyName: "owner", publicName: "slTableFilterShell", isSignal: true, isRequired: true, transformFunction: null }, operand: { classPropertyName: "operand", publicName: "operand", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["slTableFilterShell"], ngImport: i0, template: `<ng-container
+    slPopover
+    [portal]="owner().portal()"
+    [open]="owner().open()"
+    (openChange)="owner().toggle($event)"
+  >
+    <button
+      slPopoverTrigger
+      type="button"
+      data-part="filter"
+      [attr.data-filtered]="owner().filtered() ? '' : null"
+      [attr.aria-label]="owner().name()"
+    >
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" />
+      </svg>
+    </button>
+
+    <ng-template slPopoverLayer>
+      <div slPopoverContent [attr.aria-label]="owner().name()">
+        <!-- The parts are on this family's own element rather than on the
+             popover's: slPopoverContent names its own identity, and a second
+             data-ui on the same element is one of them lost — the surface, the
+             radius and the shadow all came off the panel. -->
+        <div data-ui="table" data-part="filter-panel" [attr.data-kind]="owner().kind">
+          @for (row of owner().rows(); track $index) {
+            @if ($index === 1) {
+              <div data-part="filter-join">
+                <span data-label>{{ owner().t('filterJoin') }}</span>
+                <div
+                  slRadioGroup
+                  orientation="horizontal"
+                  size="sm"
+                  [attr.aria-label]="owner().t('filterJoin')"
+                  [value]="owner().draft().join"
+                  (valueChange)="owner().setJoin($event.value ?? 'and')"
+                >
+                  <div slRadio value="and">{{ owner().joinName('and') }}</div>
+                  <div slRadio value="or">{{ owner().joinName('or') }}</div>
+                </div>
+              </div>
+            }
+
+            <div data-part="filter-condition" [attr.data-operands]="owner().slotsOf(row).length">
+              <div data-part="filter-operator">
+                <!-- items names every operator for the closed control: without
+                     it the trigger falls back to the value itself and a reader
+                     sees the raw between the engine speaks. -->
+                <sl-select
+                  size="sm"
+                  [fullWidth]="true"
+                  [items]="owner().operatorItems()"
+                  [attr.aria-label]="owner().t('filterOperator')"
+                  [value]="row.operator"
+                  (valueChange)="owner().setOperator($index, $any($event))"
+                >
+                  @for (operator of owner().offered(); track operator) {
+                    <sl-select-item [value]="operator">
+                      {{ owner().operatorName(operator) }}
+                    </sl-select-item>
+                  }
+                </sl-select>
+              </div>
+
+              @if (owner().slotsOf(row).length > 0) {
+                <div
+                  data-part="filter-operand"
+                  [attr.data-kind]="owner().kind"
+                  [attr.data-operand]="owner().operandName()"
+                  [attr.data-range]="owner().rangeMark(row)"
+                >
+                  <ng-container
+                    [ngTemplateOutlet]="operand()"
+                    [ngTemplateOutletContext]="{ $implicit: owner().context($index) }"
+                  />
+                </div>
+              }
+            </div>
+          }
+
+          <div data-part="filter-actions">
+            <button
+              slButton
+              type="button"
+              size="sm"
+              tone="secondary"
+              variant="ghost"
+              [disabled]="!owner().canClear()"
+              (click)="owner().clear($event)"
+            >
+              {{ owner().t('filterClear') }}
+            </button>
+            <button slButton type="button" size="sm" (click)="owner().applyDraft($event)">
+              {{ owner().t('filterApply') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  </ng-container>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlButton, selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "directive", type: SlPopover, selector: "[slPopover]", inputs: ["open", "defaultOpen", "disabled", "size", "width", "side", "align", "mount", "strategy", "messages", "initialFocus", "finalFocus", "arrow", "autoFocus", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "sideOffset", "alignOffset", "collisionPadding", "arrowPadding"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slPopover"] }, { kind: "component", type: SlPopoverContent, selector: "[slPopoverContent]", exportAs: ["slPopoverContent"] }, { kind: "directive", type: SlPopoverLayer, selector: "ng-template[slPopoverLayer]", exportAs: ["slPopoverLayer"] }, { kind: "directive", type: SlPopoverTrigger, selector: "[slPopoverTrigger]", exportAs: ["slPopoverTrigger"] }, { kind: "component", type: SlRadio, selector: "[slRadio]", inputs: ["value", "disabled"], exportAs: ["slRadio"] }, { kind: "component", type: SlRadioGroup, selector: "[slRadioGroup]", inputs: ["value", "defaultValue", "name", "size", "orientation", "labelPlacement", "variant", "disabled", "readOnly", "invalid", "required"], outputs: ["valueChange"], exportAs: ["slRadioGroup"] }, { kind: "component", type: SlSelect, selector: "sl-select", inputs: ["value", "open", "highlightedValue", "searchValue", "aria-label", "placeholder", "name", "form", "items", "total", "size", "variant", "side", "align", "width", "mount", "strategy", "messages", "filter", "locale", "sideOffset", "alignOffset", "collisionPadding", "typeaheadTimeout", "multiple", "clearable", "loop", "search", "highlightMatch", "typeahead", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "fullWidth", "disabled", "readOnly", "required", "invalid", "loading"], outputs: ["valueChange", "valueChangeRequest", "openChange", "openChangeRequest", "highlightedValueChange", "highlightedValueChangeRequest", "searchValueChange", "searchValueChangeRequest"], exportAs: ["slSelect"] }, { kind: "component", type: SlSelectItem, selector: "sl-select-item", inputs: ["value", "disabled", "description", "icon", "textValue", "label", "position"], exportAs: ["slSelectItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableFilterShell, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slTableFilterShell]',
+                    standalone: true,
+                    exportAs: 'slTableFilterShell',
+                    imports: [
+                        NgTemplateOutlet,
+                        SlButton,
+                        SlPopover,
+                        SlPopoverContent,
+                        SlPopoverLayer,
+                        SlPopoverTrigger,
+                        SlRadio,
+                        SlRadioGroup,
+                        SlSelect,
+                        SlSelectItem,
+                    ],
+                    template: `<ng-container
+    slPopover
+    [portal]="owner().portal()"
+    [open]="owner().open()"
+    (openChange)="owner().toggle($event)"
+  >
+    <button
+      slPopoverTrigger
+      type="button"
+      data-part="filter"
+      [attr.data-filtered]="owner().filtered() ? '' : null"
+      [attr.aria-label]="owner().name()"
+    >
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" />
+      </svg>
+    </button>
+
+    <ng-template slPopoverLayer>
+      <div slPopoverContent [attr.aria-label]="owner().name()">
+        <!-- The parts are on this family's own element rather than on the
+             popover's: slPopoverContent names its own identity, and a second
+             data-ui on the same element is one of them lost — the surface, the
+             radius and the shadow all came off the panel. -->
+        <div data-ui="table" data-part="filter-panel" [attr.data-kind]="owner().kind">
+          @for (row of owner().rows(); track $index) {
+            @if ($index === 1) {
+              <div data-part="filter-join">
+                <span data-label>{{ owner().t('filterJoin') }}</span>
+                <div
+                  slRadioGroup
+                  orientation="horizontal"
+                  size="sm"
+                  [attr.aria-label]="owner().t('filterJoin')"
+                  [value]="owner().draft().join"
+                  (valueChange)="owner().setJoin($event.value ?? 'and')"
+                >
+                  <div slRadio value="and">{{ owner().joinName('and') }}</div>
+                  <div slRadio value="or">{{ owner().joinName('or') }}</div>
+                </div>
+              </div>
+            }
+
+            <div data-part="filter-condition" [attr.data-operands]="owner().slotsOf(row).length">
+              <div data-part="filter-operator">
+                <!-- items names every operator for the closed control: without
+                     it the trigger falls back to the value itself and a reader
+                     sees the raw between the engine speaks. -->
+                <sl-select
+                  size="sm"
+                  [fullWidth]="true"
+                  [items]="owner().operatorItems()"
+                  [attr.aria-label]="owner().t('filterOperator')"
+                  [value]="row.operator"
+                  (valueChange)="owner().setOperator($index, $any($event))"
+                >
+                  @for (operator of owner().offered(); track operator) {
+                    <sl-select-item [value]="operator">
+                      {{ owner().operatorName(operator) }}
+                    </sl-select-item>
+                  }
+                </sl-select>
+              </div>
+
+              @if (owner().slotsOf(row).length > 0) {
+                <div
+                  data-part="filter-operand"
+                  [attr.data-kind]="owner().kind"
+                  [attr.data-operand]="owner().operandName()"
+                  [attr.data-range]="owner().rangeMark(row)"
+                >
+                  <ng-container
+                    [ngTemplateOutlet]="operand()"
+                    [ngTemplateOutletContext]="{ $implicit: owner().context($index) }"
+                  />
+                </div>
+              }
+            </div>
+          }
+
+          <div data-part="filter-actions">
+            <button
+              slButton
+              type="button"
+              size="sm"
+              tone="secondary"
+              variant="ghost"
+              [disabled]="!owner().canClear()"
+              (click)="owner().clear($event)"
+            >
+              {{ owner().t('filterClear') }}
+            </button>
+            <button slButton type="button" size="sm" (click)="owner().applyDraft($event)">
+              {{ owner().t('filterApply') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  </ng-container>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { owner: [{ type: i0.Input, args: [{ isSignal: true, alias: "slTableFilterShell", required: true }] }], operand: [{ type: i0.Input, args: [{ isSignal: true, alias: "operand", required: true }] }] } });
+/** A column of words. Its comparisons are the collator's, never a fold. */
+class SlTableTextFilter extends SlTableFilterBase {
+    kind = 'text';
+    /** The filter the column holds. Two-way, so a template binds it. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    readValue() {
+        return this.value();
+    }
+    writeValue(next) {
+        this.value.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableTextFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTableTextFilter, isStandalone: true, selector: "span[slTableTextFilter]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, exportAs: ["slTableTextFilter"], usesInheritance: true, ngImport: i0, template: `<span [slTableFilterShell]="this" [operand]="operand"></span>
+    <ng-template #operand let-context>
+      @for (slot of context.slots; track slot) {
+        <div slTextField size="sm">
+          <input
+            slTextFieldInput
+            [value]="$any(slot === 0 ? context.condition.value : context.condition.end) ?? ''"
+            [attr.aria-label]="context.label(slot)"
+            [attr.placeholder]="context.label(slot)"
+            (input)="context.set(slot, $any($event.target).value)"
+            (keydown.enter)="context.apply()"
+          />
+        </div>
+      }
+    </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: SlTableFilterShell, selector: "span[slTableFilterShell]", inputs: ["slTableFilterShell", "operand"], exportAs: ["slTableFilterShell"] }, { kind: "component", type: SlTextField, selector: "[slTextField]", inputs: ["size", "variant", "mono", "clearable", "revealable", "copyable", "messages", "loading"], outputs: ["valueCopy"], exportAs: ["slTextField"] }, { kind: "directive", type: SlTextFieldInput, selector: "input[slTextFieldInput]", inputs: ["value", "defaultValue", "disabled", "readOnly", "invalid", "showCount", "countMax", "revealed", "defaultRevealed", "type"], outputs: ["valueChange", "revealedChange"], exportAs: ["slTextFieldInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableTextFilter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slTableTextFilter]',
+                    exportAs: 'slTableTextFilter',
+                    imports: [SlTableFilterShell, SlTextField, SlTextFieldInput],
+                    template: `<span [slTableFilterShell]="this" [operand]="operand"></span>
+    <ng-template #operand let-context>
+      @for (slot of context.slots; track slot) {
+        <div slTextField size="sm">
+          <input
+            slTextFieldInput
+            [value]="$any(slot === 0 ? context.condition.value : context.condition.end) ?? ''"
+            [attr.aria-label]="context.label(slot)"
+            [attr.placeholder]="context.label(slot)"
+            (input)="context.set(slot, $any($event.target).value)"
+            (keydown.enter)="context.apply()"
+          />
+        </div>
+      }
+    </ng-template>`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+/** A column of quantities. The operand parses in the reader's own locale. */
+class SlTableNumberFilter extends SlTableFilterBase {
+    kind = 'number';
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** BCP 47, for the operand's own parsing. Defaults to the runtime's. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    readValue() {
+        return this.value();
+    }
+    writeValue(next) {
+        this.value.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableNumberFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTableNumberFilter, isStandalone: true, selector: "span[slTableNumberFilter]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, exportAs: ["slTableNumberFilter"], usesInheritance: true, ngImport: i0, template: `<span [slTableFilterShell]="this" [operand]="operand"></span>
+    <ng-template #operand let-context>
+      @for (slot of context.slots; track slot) {
+        <div slNumberField size="sm">
+          <input
+            slNumberFieldInput
+            [value]="$any(slot === 0 ? context.condition.value : context.condition.end) ?? null"
+            [locale]="locale()"
+            [attr.aria-label]="context.label(slot)"
+            [attr.placeholder]="context.label(slot)"
+            (valueChange)="context.set(slot, $event.value)"
+            (keydown.enter)="context.apply()"
+          />
+        </div>
+      }
+    </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: SlTableFilterShell, selector: "span[slTableFilterShell]", inputs: ["slTableFilterShell", "operand"], exportAs: ["slTableFilterShell"] }, { kind: "component", type: SlNumberField, selector: "[slNumberField]", inputs: ["size", "variant", "stepper", "messages"], exportAs: ["slNumberField"] }, { kind: "directive", type: SlNumberFieldInput, selector: "input[slNumberFieldInput]", inputs: ["value", "defaultValue", "min", "max", "step", "largeStep", "smallStep", "stepFrom", "snapToStep", "clamp", "format", "formatOn", "locale", "wheel", "disabled", "readOnly", "invalid"], outputs: ["valueChange"], exportAs: ["slNumberFieldInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableNumberFilter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slTableNumberFilter]',
+                    exportAs: 'slTableNumberFilter',
+                    imports: [SlTableFilterShell, SlNumberField, SlNumberFieldInput],
+                    template: `<span [slTableFilterShell]="this" [operand]="operand"></span>
+    <ng-template #operand let-context>
+      @for (slot of context.slots; track slot) {
+        <div slNumberField size="sm">
+          <input
+            slNumberFieldInput
+            [value]="$any(slot === 0 ? context.condition.value : context.condition.end) ?? null"
+            [locale]="locale()"
+            [attr.aria-label]="context.label(slot)"
+            [attr.placeholder]="context.label(slot)"
+            (valueChange)="context.set(slot, $event.value)"
+            (keydown.enter)="context.apply()"
+          />
+        </div>
+      }
+    </ng-template>`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }] } });
+/**
+ * A column of days. The operand is the whole date picker — the segmented field
+ * and the calendar behind it — rather than the field alone: every surveyed
+ * implementation that filters a date column offers a grid to point at, and a
+ * reader who has to type a date they could have pointed at is the one thing a
+ * date filter exists to spare them. The calendar opens a layer inside the
+ * panel's layer, which `dismissable-layer` already stacks for the operator
+ * chooser beside it.
+ *
+ * `between` is one `date-range-picker` rather than two pickers: it says the
+ * run's length while it is drawn, takes the ends in either order and carries
+ * the application's own presets. The descriptor holds the ISO days the
+ * pickers produce, never a `Date`, and is the same object either way.
+ */
+class SlTableDateFilter extends SlTableFilterBase {
+    kind = 'date';
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** BCP 47. Decides the operand's field order and separators. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * The application's own ranges — this week, this month — as
+     * `slDateRangePickerPreset` buttons in a template, offered inside the range
+     * picker `between` draws. The descriptor still receives two ISO days.
+     */
+    presets = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    rangeOperand() {
+        return true;
+    }
+    /** The descriptor's ISO day as the field's own value, and back. */
+    day(value) {
+        return value ? parseISODate(String(value)) : null;
+    }
+    iso(value) {
+        return isPlainDate(value) ? toISODate(value) : null;
+    }
+    range(condition) {
+        return { start: this.day(condition.value), end: this.day(condition.end) };
+    }
+    readValue() {
+        return this.value();
+    }
+    writeValue(next) {
+        this.value.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableDateFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTableDateFilter, isStandalone: true, selector: "span[slTableDateFilter]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, exportAs: ["slTableDateFilter"], usesInheritance: true, ngImport: i0, template: `<span [slTableFilterShell]="this" [operand]="operand"></span>
+    <ng-template #operand let-context>
+      @if (context.slots.length === 2) {
+        <div
+          slDateRangePicker
+          size="sm"
+          [locale]="locale()"
+          [messages]="{ start: context.label(0), end: context.label(1) }"
+          [value]="range(context.condition)"
+          (valueChange)="context.setBoth(iso($event.value?.start), iso($event.value?.end))"
+          (keydown.enter)="context.apply()"
+        >
+          @if (presets(); as presetsTemplate) {
+            <div slDateRangePickerPresets>
+              <ng-container [ngTemplateOutlet]="presetsTemplate" />
+            </div>
+          }
+        </div>
+      } @else {
+        <div
+          slDatePicker
+          size="sm"
+          [locale]="locale()"
+          [value]="day(context.condition.value)"
+          [attr.aria-label]="context.label(0)"
+          (valueChange)="context.set(0, iso($event.value))"
+          (keydown.enter)="context.apply()"
+        ></div>
+      }
+    </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlTableFilterShell, selector: "span[slTableFilterShell]", inputs: ["slTableFilterShell", "operand"], exportAs: ["slTableFilterShell"] }, { kind: "component", type: SlDatePicker, selector: "[slDatePicker]", inputs: ["value", "defaultValue", "open", "defaultOpen", "min", "max", "isDateUnavailable", "selectionMode", "months", "defaultView", "weekNumbers", "fixedWeeks", "locale", "timeZone", "firstDayOfWeek", "yearPivot", "calendar", "size", "variant", "placement", "closeOnSelect", "disabled", "readOnly", "invalid", "required", "clearable", "name", "messages"], outputs: ["valueChange", "openChange"], exportAs: ["slDatePicker"] }, { kind: "component", type: SlDateRangePicker, selector: "[slDateRangePicker]", inputs: ["value", "defaultValue", "open", "defaultOpen", "position", "defaultPosition", "min", "max", "isDateUnavailable", "contiguous", "minLength", "maxLength", "count", "months", "weekNumbers", "fixedWeeks", "locale", "timeZone", "firstDayOfWeek", "yearPivot", "calendar", "size", "variant", "placement", "closeOnSelect", "disabled", "readOnly", "invalid", "required", "clearable", "messages", "startName", "endName"], outputs: ["valueChange", "openChange", "positionChange"], exportAs: ["slDateRangePicker"] }, { kind: "directive", type: SlDateRangePickerPresets, selector: "[slDateRangePickerPresets]", exportAs: ["slDateRangePickerPresets"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableDateFilter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slTableDateFilter]',
+                    exportAs: 'slTableDateFilter',
+                    imports: [
+                        NgTemplateOutlet,
+                        SlTableFilterShell,
+                        SlDatePicker,
+                        SlDateRangePicker,
+                        SlDateRangePickerPresets,
+                    ],
+                    template: `<span [slTableFilterShell]="this" [operand]="operand"></span>
+    <ng-template #operand let-context>
+      @if (context.slots.length === 2) {
+        <div
+          slDateRangePicker
+          size="sm"
+          [locale]="locale()"
+          [messages]="{ start: context.label(0), end: context.label(1) }"
+          [value]="range(context.condition)"
+          (valueChange)="context.setBoth(iso($event.value?.start), iso($event.value?.end))"
+          (keydown.enter)="context.apply()"
+        >
+          @if (presets(); as presetsTemplate) {
+            <div slDateRangePickerPresets>
+              <ng-container [ngTemplateOutlet]="presetsTemplate" />
+            </div>
+          }
+        </div>
+      } @else {
+        <div
+          slDatePicker
+          size="sm"
+          [locale]="locale()"
+          [value]="day(context.condition.value)"
+          [attr.aria-label]="context.label(0)"
+          (valueChange)="context.set(0, iso($event.value))"
+          (keydown.enter)="context.apply()"
+        ></div>
+      }
+    </ng-template>`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }] } });
+/** `HH` and `HH:MM` are prefixes the engine accepts and the field cannot read. */
+function timeOf(text) {
+    if (!text)
+        return null;
+    const written = String(text);
+    return parseISOTime(/^\d{2}$/.test(written) ? `${written}:00` : written);
+}
+/** A day, or a day and an hour, padded to the `T…:MM` the field reads. */
+function dateTimeOf(text) {
+    if (!text)
+        return null;
+    const written = String(text);
+    if (/^\d{4}-\d{2}-\d{2}$/.test(written))
+        return parseISODateTime(`${written}T00:00`);
+    if (/^\d{4}-\d{2}-\d{2}T\d{2}$/.test(written))
+        return parseISODateTime(`${written}:00`);
+    return parseISODateTime(written);
+}
+/**
+ * A column of times of day. The operand is `time-picker` — the segmented field
+ * and the list behind it — at the column's own granularity, which decides the
+ * precision the descriptor is written at and the engine compares at: a picker
+ * writing minutes produces `09:14`, and `is 09:14` then matches every second
+ * of that minute.
+ *
+ * `between` is one `time-range-picker` rather than two pickers: it says the
+ * run's length while it is drawn, its end list refuses the times before the
+ * start, and it carries the application's presets. The descriptor is
+ * unchanged. A pair whose start is later than its end is the overnight window
+ * to the engine and `order` to the picker; the pair reaches the descriptor
+ * either way, and the picker's `wrap`, pending in `docs/process/build-order.md`, is
+ * what lifts the mark. No `(keydown.enter)` on the range picker: its frame
+ * is a button, and `Enter` on it opens the picker.
+ */
+class SlTableTimeFilter extends SlTableFilterBase {
+    kind = 'time';
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** BCP 47. Decides the operand's hour cycle and separators. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** Twelve or twenty-four hours, overriding what the locale says. */
+    hourCycle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourCycle" }] : /* istanbul ignore next */ []));
+    /** The last unit the operand writes. Minute unless stated. */
+    granularity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
+    /** The list's step, in seconds. */
+    step = input(undefined, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (given) => (given === undefined ? undefined : numberAttribute(given)) });
+    /** The list's own entries, replacing the step. */
+    options = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** The earliest time the operand accepts, as ISO time text. */
+    min = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** The latest, as ISO time text. */
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /**
+     * The application's own windows — the morning shift, the night shift — as
+     * `slTimeRangePickerPreset` buttons in a template, offered inside the range
+     * picker `between` draws. The descriptor still receives two ISO times.
+     */
+    presets = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    rangeOperand() {
+        return true;
+    }
+    timeOf(value) {
+        return timeOf(value) ?? undefined;
+    }
+    iso(value) {
+        return isPlainTime(value) ? toISOTime(value, this.granularity() ?? 'minute') : null;
+    }
+    range(condition) {
+        return { start: timeOf(condition.value), end: timeOf(condition.end) };
+    }
+    readValue() {
+        return this.value();
+    }
+    writeValue(next) {
+        this.value.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableTimeFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTableTimeFilter, isStandalone: true, selector: "span[slTableTimeFilter]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, hourCycle: { classPropertyName: "hourCycle", publicName: "hourCycle", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, exportAs: ["slTableTimeFilter"], usesInheritance: true, ngImport: i0, template: `<span [slTableFilterShell]="this" [operand]="operand"></span>
+    <ng-template #operand let-context>
+      @if (context.slots.length === 2) {
+        <div
+          slTimeRangePicker
+          size="sm"
+          [locale]="locale()"
+          [hourCycle]="hourCycle()"
+          [granularity]="granularity()"
+          [step]="step()"
+          [options]="options()"
+          [min]="timeOf(min())"
+          [max]="timeOf(max())"
+          [messages]="{ start: context.label(0), end: context.label(1) }"
+          [value]="range(context.condition)"
+          (valueChange)="context.setBoth(iso($event.value?.start), iso($event.value?.end))"
+        >
+          @if (presets(); as presetsTemplate) {
+            <div slTimeRangePickerPresets>
+              <ng-container [ngTemplateOutlet]="presetsTemplate" />
+            </div>
+          }
+        </div>
+      } @else {
+        <div
+          slTimePicker
+          size="sm"
+          [locale]="locale()"
+          [hourCycle]="hourCycle()"
+          [granularity]="granularity()"
+          [step]="step()"
+          [options]="options()"
+          [min]="timeOf(min())"
+          [max]="timeOf(max())"
+          [value]="timeOf(context.condition.value)"
+          [attr.aria-label]="context.label(0)"
+          (valueChange)="context.set(0, iso($event.value))"
+          (keydown.enter)="context.apply()"
+        ></div>
+      }
+    </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlTableFilterShell, selector: "span[slTableFilterShell]", inputs: ["slTableFilterShell", "operand"], exportAs: ["slTableFilterShell"] }, { kind: "component", type: SlTimePicker, selector: "[slTimePicker]", inputs: ["value", "defaultValue", "open", "defaultOpen", "highlightedValue", "defaultHighlightedValue", "min", "max", "isTimeUnavailable", "step", "options", "maxOptions", "unavailableOptions", "locale", "timeZone", "hourCycle", "granularity", "referenceTime", "size", "variant", "placement", "closeOnSelect", "disabled", "readOnly", "invalid", "required", "clearable", "relative", "name", "messages"], outputs: ["valueChange", "openChange", "highlightedValueChange"], exportAs: ["slTimePicker"] }, { kind: "component", type: SlTimeRangePicker, selector: "[slTimeRangePicker]", inputs: ["value", "defaultValue", "open", "defaultOpen", "position", "defaultPosition", "highlighted", "defaultHighlighted", "min", "max", "isTimeUnavailable", "contiguous", "minLength", "maxLength", "lengthLabel", "step", "options", "maxOptions", "unavailableOptions", "locale", "timeZone", "hourCycle", "granularity", "referenceTime", "size", "variant", "placement", "closeOnSelect", "disabled", "readOnly", "invalid", "required", "clearable", "relative", "messages", "startName", "endName"], outputs: ["valueChange", "openChange", "positionChange", "highlightedChange"], exportAs: ["slTimeRangePicker"] }, { kind: "directive", type: SlTimeRangePickerPresets, selector: "[slTimeRangePickerPresets]", exportAs: ["slTimeRangePickerPresets"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableTimeFilter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slTableTimeFilter]',
+                    exportAs: 'slTableTimeFilter',
+                    imports: [
+                        NgTemplateOutlet,
+                        SlTableFilterShell,
+                        SlTimePicker,
+                        SlTimeRangePicker,
+                        SlTimeRangePickerPresets,
+                    ],
+                    template: `<span [slTableFilterShell]="this" [operand]="operand"></span>
+    <ng-template #operand let-context>
+      @if (context.slots.length === 2) {
+        <div
+          slTimeRangePicker
+          size="sm"
+          [locale]="locale()"
+          [hourCycle]="hourCycle()"
+          [granularity]="granularity()"
+          [step]="step()"
+          [options]="options()"
+          [min]="timeOf(min())"
+          [max]="timeOf(max())"
+          [messages]="{ start: context.label(0), end: context.label(1) }"
+          [value]="range(context.condition)"
+          (valueChange)="context.setBoth(iso($event.value?.start), iso($event.value?.end))"
+        >
+          @if (presets(); as presetsTemplate) {
+            <div slTimeRangePickerPresets>
+              <ng-container [ngTemplateOutlet]="presetsTemplate" />
+            </div>
+          }
+        </div>
+      } @else {
+        <div
+          slTimePicker
+          size="sm"
+          [locale]="locale()"
+          [hourCycle]="hourCycle()"
+          [granularity]="granularity()"
+          [step]="step()"
+          [options]="options()"
+          [min]="timeOf(min())"
+          [max]="timeOf(max())"
+          [value]="timeOf(context.condition.value)"
+          [attr.aria-label]="context.label(0)"
+          (valueChange)="context.set(0, iso($event.value))"
+          (keydown.enter)="context.apply()"
+        ></div>
+      }
+    </ng-template>`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], hourCycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourCycle", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }] } });
+/**
+ * A column of dates with times. The operand is `datetime-picker`, the
+ * seven-segment field and the two surfaces behind it. A value with one half
+ * missing reaches the draft as no operand at all, so the condition stays
+ * inactive until both halves exist — the engine's one rule for a missing
+ * operand, and the reason Apply reports nothing for a date without a time.
+ *
+ * `between` is one `datetime-range-picker`: the run's length said while it is
+ * drawn, the dates ordered with each time kept on its end, and the
+ * application's presets. No `(keydown.enter)` on it: the frame is a button,
+ * and `Enter` on it opens the picker.
+ */
+class SlTableDateTimeFilter extends SlTableFilterBase {
+    kind = 'datetime';
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** BCP 47. Decides the operand's field order and separators. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** The zone "now" is read in. Defaults to the runtime's. */
+    timeZone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+    /** Twelve or twenty-four hours, overriding what the locale says. */
+    hourCycle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourCycle" }] : /* istanbul ignore next */ []));
+    /** The last unit the operand writes. Minute unless stated. */
+    granularity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
+    /** The list's step, in seconds. */
+    step = input(undefined, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (given) => (given === undefined ? undefined : numberAttribute(given)) });
+    /** The earliest date-time the operand accepts, as ISO date-time text. */
+    min = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** The latest, as ISO date-time text. */
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /**
+     * The application's own windows — the last 24 hours, this week — as
+     * `slDateTimeRangePickerPreset` buttons in a template, offered inside the
+     * range picker `between` draws. The descriptor still receives two ISO
+     * date-times.
+     */
+    presets = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    rangeOperand() {
+        return true;
+    }
+    dateTimeOf(value) {
+        return dateTimeOf(value) ?? undefined;
+    }
+    range(condition) {
+        return { start: dateTimeOf(condition.value), end: dateTimeOf(condition.end) };
+    }
+    iso(value) {
+        return isPlainDateTime(value)
+            ? `${toISODate(value.date)}T${toISOTime(value.time, this.granularity() ?? 'minute')}`
+            : null;
+    }
+    readValue() {
+        return this.value();
+    }
+    writeValue(next) {
+        this.value.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableDateTimeFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTableDateTimeFilter, isStandalone: true, selector: "span[slTableDateTimeFilter]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, hourCycle: { classPropertyName: "hourCycle", publicName: "hourCycle", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, exportAs: ["slTableDateTimeFilter"], usesInheritance: true, ngImport: i0, template: `<span [slTableFilterShell]="this" [operand]="operand"></span>
+    <ng-template #operand let-context>
+      @if (context.slots.length === 2) {
+        <div
+          slDateTimeRangePicker
+          size="sm"
+          [locale]="locale()"
+          [timeZone]="timeZone()"
+          [hourCycle]="hourCycle()"
+          [granularity]="granularity()"
+          [step]="step()"
+          [min]="dateTimeOf(min())"
+          [max]="dateTimeOf(max())"
+          [messages]="{ start: context.label(0), end: context.label(1) }"
+          [value]="range(context.condition)"
+          (valueChange)="context.setBoth(iso($event.value?.start), iso($event.value?.end))"
+        >
+          @if (presets(); as presetsTemplate) {
+            <div slDateTimeRangePickerPresets>
+              <ng-container [ngTemplateOutlet]="presetsTemplate" />
+            </div>
+          }
+        </div>
+      } @else {
+        <div
+          slDateTimePicker
+          size="sm"
+          [locale]="locale()"
+          [timeZone]="timeZone()"
+          [hourCycle]="hourCycle()"
+          [granularity]="granularity()"
+          [step]="step()"
+          [min]="dateTimeOf(min())"
+          [max]="dateTimeOf(max())"
+          [value]="dateTimeOf(context.condition.value)"
+          [attr.aria-label]="context.label(0)"
+          (valueChange)="context.set(0, iso($event.value))"
+          (keydown.enter)="context.apply()"
+        ></div>
+      }
+    </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlTableFilterShell, selector: "span[slTableFilterShell]", inputs: ["slTableFilterShell", "operand"], exportAs: ["slTableFilterShell"] }, { kind: "component", type: SlDateTimePicker, selector: "[slDateTimePicker]", inputs: ["value", "defaultValue", "open", "defaultOpen", "highlighted", "defaultHighlighted", "min", "max", "minTime", "maxTime", "isDateUnavailable", "isTimeUnavailable", "step", "options", "maxOptions", "unavailableOptions", "locale", "timeZone", "hourCycle", "granularity", "calendar", "firstDayOfWeek", "months", "weekNumbers", "referenceDateTime", "size", "variant", "placement", "openTo", "closeOnSelect", "disabled", "readOnly", "invalid", "required", "clearable", "relative", "name", "messages"], outputs: ["valueChange", "openChange", "highlightedChange"], exportAs: ["slDateTimePicker"] }, { kind: "component", type: SlDateTimeRangePicker, selector: "[slDateTimeRangePicker]", inputs: ["value", "defaultValue", "open", "defaultOpen", "position", "defaultPosition", "highlighted", "defaultHighlighted", "min", "max", "minTime", "maxTime", "isDateUnavailable", "isTimeUnavailable", "contiguous", "minLength", "maxLength", "lengthLabel", "step", "options", "maxOptions", "unavailableOptions", "months", "weekNumbers", "fixedWeeks", "locale", "timeZone", "hourCycle", "granularity", "calendar", "firstDayOfWeek", "yearPivot", "referenceDateTime", "size", "variant", "placement", "closeOnSelect", "disabled", "readOnly", "invalid", "required", "clearable", "relative", "messages", "startName", "endName"], outputs: ["valueChange", "openChange", "positionChange", "highlightedChange"], exportAs: ["slDateTimeRangePicker"] }, { kind: "directive", type: SlDateTimeRangePickerPresets, selector: "[slDateTimeRangePickerPresets]", exportAs: ["slDateTimeRangePickerPresets"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableDateTimeFilter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slTableDateTimeFilter]',
+                    exportAs: 'slTableDateTimeFilter',
+                    imports: [
+                        NgTemplateOutlet,
+                        SlTableFilterShell,
+                        SlDateTimePicker,
+                        SlDateTimeRangePicker,
+                        SlDateTimeRangePickerPresets,
+                    ],
+                    template: `<span [slTableFilterShell]="this" [operand]="operand"></span>
+    <ng-template #operand let-context>
+      @if (context.slots.length === 2) {
+        <div
+          slDateTimeRangePicker
+          size="sm"
+          [locale]="locale()"
+          [timeZone]="timeZone()"
+          [hourCycle]="hourCycle()"
+          [granularity]="granularity()"
+          [step]="step()"
+          [min]="dateTimeOf(min())"
+          [max]="dateTimeOf(max())"
+          [messages]="{ start: context.label(0), end: context.label(1) }"
+          [value]="range(context.condition)"
+          (valueChange)="context.setBoth(iso($event.value?.start), iso($event.value?.end))"
+        >
+          @if (presets(); as presetsTemplate) {
+            <div slDateTimeRangePickerPresets>
+              <ng-container [ngTemplateOutlet]="presetsTemplate" />
+            </div>
+          }
+        </div>
+      } @else {
+        <div
+          slDateTimePicker
+          size="sm"
+          [locale]="locale()"
+          [timeZone]="timeZone()"
+          [hourCycle]="hourCycle()"
+          [granularity]="granularity()"
+          [step]="step()"
+          [min]="dateTimeOf(min())"
+          [max]="dateTimeOf(max())"
+          [value]="dateTimeOf(context.condition.value)"
+          [attr.aria-label]="context.label(0)"
+          (valueChange)="context.set(0, iso($event.value))"
+          (keydown.enter)="context.apply()"
+        ></div>
+      }
+    </ng-template>`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], hourCycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourCycle", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }] } });
+/**
+ * A column of yes and no. Three answers rather than two: the third is not being
+ * filtered at all, which is what Clear leaves and what an empty draft is.
+ */
+class SlTableBooleanFilter extends SlTableFilterBase {
+    kind = 'boolean';
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    answer(value) {
+        return value === undefined || value === null ? '' : String(value);
+    }
+    readValue() {
+        return this.value();
+    }
+    writeValue(next) {
+        this.value.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableBooleanFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlTableBooleanFilter, isStandalone: true, selector: "span[slTableBooleanFilter]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, exportAs: ["slTableBooleanFilter"], usesInheritance: true, ngImport: i0, template: `<span [slTableFilterShell]="this" [operand]="operand"></span>
+    <ng-template #operand let-context>
+      <div
+        slRadioGroup
+        orientation="horizontal"
+        size="sm"
+        [attr.aria-label]="context.label(0)"
+        [value]="answer(context.condition.value)"
+        (valueChange)="context.set(0, $event.value === 'true')"
+      >
+        <div slRadio value="true">{{ t('true') }}</div>
+        <div slRadio value="false">{{ t('false') }}</div>
+      </div>
+    </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: SlTableFilterShell, selector: "span[slTableFilterShell]", inputs: ["slTableFilterShell", "operand"], exportAs: ["slTableFilterShell"] }, { kind: "component", type: SlRadio, selector: "[slRadio]", inputs: ["value", "disabled"], exportAs: ["slRadio"] }, { kind: "component", type: SlRadioGroup, selector: "[slRadioGroup]", inputs: ["value", "defaultValue", "name", "size", "orientation", "labelPlacement", "variant", "disabled", "readOnly", "invalid", "required"], outputs: ["valueChange"], exportAs: ["slRadioGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableBooleanFilter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slTableBooleanFilter]',
+                    exportAs: 'slTableBooleanFilter',
+                    imports: [SlTableFilterShell, SlRadio, SlRadioGroup],
+                    template: `<span [slTableFilterShell]="this" [operand]="operand"></span>
+    <ng-template #operand let-context>
+      <div
+        slRadioGroup
+        orientation="horizontal"
+        size="sm"
+        [attr.aria-label]="context.label(0)"
+        [value]="answer(context.condition.value)"
+        (valueChange)="context.set(0, $event.value === 'true')"
+      >
+        <div slRadio value="true">{{ t('true') }}</div>
+        <div slRadio value="false">{{ t('false') }}</div>
+      </div>
+    </ng-template>`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+/**
+ * A column filtered to values the consumer named: the list, its search and the
+ * checkbox that covers what the search left.
+ *
+ * One condition, and the design says why: `anyOf A and anyOf B` is
+ * `anyOf (A ∩ B)`, so every pair of set conditions collapses to a single list.
+ */
+class SlTableSetFilter extends SlTableFilterBase {
+    kind = 'set';
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * How the values are chosen. `list` is the search, the covering checkbox and
+     * the values; `tags` is `tags-input`, for a list too long to tick — the
+     * chosen values are chips, and `options` become a datalist of suggestions
+     * and the set a typed value must belong to. The descriptor is the same list
+     * either way.
+     */
+    operand = input('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operand" }] : /* istanbul ignore next */ []));
+    /**
+     * The values this column can be filtered to, and optionally their counts.
+     * Optional with `tags`, where a column may hold more values than a page
+     * knows; without it any typed value is admitted.
+     */
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the panel carries a search. Unstated, it appears once there are
+     * `searchThreshold` values.
+     */
+    searchable = input(undefined, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /** How many values bring the search with them. Eight unless stated. */
+    searchThreshold = input(8, { ...(ngDevMode ? { debugName: "searchThreshold" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    listId = `sl-table-filter-options-${Math.random().toString(36).slice(2, 8)}`;
+    operandName() {
+        return this.operand();
+    }
+    /** Whether a typed value has to be one of the options. */
+    constrained = computed(() => this.operand() === 'tags' && this.options().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "constrained" }] : /* istanbul ignore next */ []));
+    byValue = computed(() => new Map(this.options().map((option) => [option.value, option])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "byValue" }] : /* istanbul ignore next */ []));
+    /** The chip's text for a value, and the judgement on a typed one. */
+    optionLabel = (value) => this.byValue().get(value)?.label ?? value;
+    known = (text) => this.byValue().has(text);
+    applyOnEmpty(event, context) {
+        const input = event.target;
+        if (!event.defaultPrevented && input?.value === '')
+            context.apply();
+    }
+    /**
+     * The collator `combobox` filters its own options with, rather than a fold
+     * that strips combining marks: `normalize('NFD')` is an English answer
+     * wearing a Unicode one — it turns `ø` into `ø` and leaves `ß` alone.
+     */
+    compare = createFilter({ sensitivity: 'base' });
+    /** Two set conditions collapse to one list, so the panel offers one. */
+    allowed() {
+        return 1;
+    }
+    /** What the search left. The covering checkbox answers for exactly this. */
+    shown = computed(() => {
+        const query = this.query();
+        const options = this.options();
+        if (query === '')
+            return options;
+        return options.filter((option) => this.compare.contains(option.label ?? option.value, query));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    searching = computed(() => this.searchable() ?? this.options().length >= this.searchThreshold(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searching" }] : /* istanbul ignore next */ []));
+    chosen(context) {
+        return context.condition.value ?? [];
+    }
+    covered(context) {
+        const chosen = this.chosen(context);
+        return this.shown().filter((option) => chosen.includes(option.value)).length;
+    }
+    allCovered(context) {
+        const covered = this.covered(context);
+        return covered > 0 && covered === this.shown().length;
+    }
+    someCovered(context) {
+        const covered = this.covered(context);
+        return covered > 0 && covered < this.shown().length;
+    }
+    search(event) {
+        this.query.set(event.target.value);
+        /* A list that shortens under a reader who cannot see it says nothing. */
+        this.announce(this.t('filterMatches', { count: this.shown().length }));
+    }
+    hold(context, value, next) {
+        const chosen = this.chosen(context);
+        context.set(0, next ? [...chosen, value] : chosen.filter((held) => held !== value));
+    }
+    coverAll(context, next) {
+        const visible = this.shown().map((option) => option.value);
+        const chosen = this.chosen(context);
+        context.set(0, next
+            ? [...new Set([...chosen, ...visible])]
+            : chosen.filter((held) => !visible.includes(held)));
+    }
+    readValue() {
+        return this.value();
+    }
+    writeValue(next) {
+        this.value.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableSetFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTableSetFilter, isStandalone: true, selector: "span[slTableSetFilter]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, operand: { classPropertyName: "operand", publicName: "operand", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, exportAs: ["slTableSetFilter"], usesInheritance: true, ngImport: i0, template: `<span [slTableFilterShell]="this" [operand]="operandTemplate"></span>
+    <!-- The template is not named operand: that is the input that says which
+         of the two operands is drawn, and a template variable of the same name
+         would shadow it in every binding below. -->
+    <ng-template #operandTemplate let-context>
+      @if (operand() === 'tags') {
+        <!-- The chosen values as chips, for a list too long to tick. With
+             options, a typed value outside them is refused and announced by
+             tags-input's own validation, and the options are a datalist:
+             native completion in every engine, with no second listbox inside
+             the panel. Enter with pending text commits a chip, which is
+             tags-input's key; Enter on an empty field applies, which is the
+             panel's. -->
+        <sl-tags-input
+          size="sm"
+          [fullWidth]="true"
+          [attr.aria-label]="context.label(0)"
+          [formatLabel]="optionLabel"
+          [list]="constrained() ? listId : undefined"
+          [validateValue]="constrained() ? known : undefined"
+          [invalidValues]="constrained() ? 'refuse' : undefined"
+          [value]="chosen(context)"
+          (valueChange)="context.set(0, $event)"
+          (keydown.enter)="applyOnEmpty($event, context)"
+        ></sl-tags-input>
+        @if (constrained()) {
+          <datalist [id]="listId">
+            @for (option of options(); track option.value) {
+              <option [value]="option.value">{{ option.label ?? option.value }}</option>
+            }
+          </datalist>
+        }
+      } @else {
+        @if (searching()) {
+          <div data-part="filter-search">
+            <div slTextField size="sm" clearable>
+              <input
+                slTextFieldInput
+                [value]="query()"
+                [attr.aria-label]="t('filterSearch')"
+                [attr.placeholder]="t('filterSearch')"
+                (input)="search($event)"
+              />
+            </div>
+          </div>
+        }
+
+        @if (shown().length === 0) {
+          <p data-part="filter-empty">{{ t('filterEmpty') }}</p>
+        } @else {
+          <div data-part="filter-list">
+            <div data-part="filter-option" data-covering>
+              <span
+                slCheckbox
+                [checked]="allCovered(context)"
+                [indeterminate]="someCovered(context)"
+                (checkedChange)="coverAll(context, !allCovered(context))"
+              >
+                {{ t('filterSelectAll') }}
+              </span>
+              <span data-count>{{ shown().length }}</span>
+            </div>
+
+            @for (option of shown(); track option.value) {
+              <div data-part="filter-option">
+                <span
+                  slCheckbox
+                  [checked]="chosen(context).includes(option.value)"
+                  (checkedChange)="hold(context, option.value, $event.value)"
+                >
+                  {{ option.label ?? option.value }}
+                </span>
+                @if (option.count !== undefined) {
+                  <span data-count>{{ option.count }}</span>
+                }
+              </div>
+            }
+          </div>
+        }
+      }
+    </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: SlTableFilterShell, selector: "span[slTableFilterShell]", inputs: ["slTableFilterShell", "operand"], exportAs: ["slTableFilterShell"] }, { kind: "component", type: SlCheckbox, selector: "[slCheckbox]", inputs: ["checked", "defaultChecked", "indeterminate", "parent", "value", "name", "size", "labelPlacement", "variant", "disabled", "readOnly", "invalid"], outputs: ["checkedChange"], exportAs: ["slCheckbox"] }, { kind: "component", type: SlTagsInput, selector: "sl-tags-input", inputs: ["value", "defaultValue", "inputValue", "aria-label", "placeholder", "name", "form", "type", "list", "pattern", "minLength", "maxLength", "inputMode", "autocomplete", "locale", "validateValue", "normalize", "split", "formatLabel", "lockedValues", "delimiters", "max", "size", "variant", "overflow", "invalidValues", "pendingOnBlur", "messages", "addOnPaste", "allowDuplicates", "editable", "reorderable", "clearable", "fullWidth", "disabled", "readOnly", "required", "invalid"], outputs: ["valueChange", "valueChangeRequest", "inputValueChange", "inputValueChangeRequest", "valueRefuse", "valueCopy"], exportAs: ["slTagsInput"] }, { kind: "component", type: SlTextField, selector: "[slTextField]", inputs: ["size", "variant", "mono", "clearable", "revealable", "copyable", "messages", "loading"], outputs: ["valueCopy"], exportAs: ["slTextField"] }, { kind: "directive", type: SlTextFieldInput, selector: "input[slTextFieldInput]", inputs: ["value", "defaultValue", "disabled", "readOnly", "invalid", "showCount", "countMax", "revealed", "defaultRevealed", "type"], outputs: ["valueChange", "revealedChange"], exportAs: ["slTextFieldInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableSetFilter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slTableSetFilter]',
+                    exportAs: 'slTableSetFilter',
+                    imports: [SlTableFilterShell, SlCheckbox, SlTagsInput, SlTextField, SlTextFieldInput],
+                    template: `<span [slTableFilterShell]="this" [operand]="operandTemplate"></span>
+    <!-- The template is not named operand: that is the input that says which
+         of the two operands is drawn, and a template variable of the same name
+         would shadow it in every binding below. -->
+    <ng-template #operandTemplate let-context>
+      @if (operand() === 'tags') {
+        <!-- The chosen values as chips, for a list too long to tick. With
+             options, a typed value outside them is refused and announced by
+             tags-input's own validation, and the options are a datalist:
+             native completion in every engine, with no second listbox inside
+             the panel. Enter with pending text commits a chip, which is
+             tags-input's key; Enter on an empty field applies, which is the
+             panel's. -->
+        <sl-tags-input
+          size="sm"
+          [fullWidth]="true"
+          [attr.aria-label]="context.label(0)"
+          [formatLabel]="optionLabel"
+          [list]="constrained() ? listId : undefined"
+          [validateValue]="constrained() ? known : undefined"
+          [invalidValues]="constrained() ? 'refuse' : undefined"
+          [value]="chosen(context)"
+          (valueChange)="context.set(0, $event)"
+          (keydown.enter)="applyOnEmpty($event, context)"
+        ></sl-tags-input>
+        @if (constrained()) {
+          <datalist [id]="listId">
+            @for (option of options(); track option.value) {
+              <option [value]="option.value">{{ option.label ?? option.value }}</option>
+            }
+          </datalist>
+        }
+      } @else {
+        @if (searching()) {
+          <div data-part="filter-search">
+            <div slTextField size="sm" clearable>
+              <input
+                slTextFieldInput
+                [value]="query()"
+                [attr.aria-label]="t('filterSearch')"
+                [attr.placeholder]="t('filterSearch')"
+                (input)="search($event)"
+              />
+            </div>
+          </div>
+        }
+
+        @if (shown().length === 0) {
+          <p data-part="filter-empty">{{ t('filterEmpty') }}</p>
+        } @else {
+          <div data-part="filter-list">
+            <div data-part="filter-option" data-covering>
+              <span
+                slCheckbox
+                [checked]="allCovered(context)"
+                [indeterminate]="someCovered(context)"
+                (checkedChange)="coverAll(context, !allCovered(context))"
+              >
+                {{ t('filterSelectAll') }}
+              </span>
+              <span data-count>{{ shown().length }}</span>
+            </div>
+
+            @for (option of shown(); track option.value) {
+              <div data-part="filter-option">
+                <span
+                  slCheckbox
+                  [checked]="chosen(context).includes(option.value)"
+                  (checkedChange)="hold(context, option.value, $event.value)"
+                >
+                  {{ option.label ?? option.value }}
+                </span>
+                @if (option.count !== undefined) {
+                  <span data-count>{{ option.count }}</span>
+                }
+              </div>
+            }
+          </div>
+        }
+      }
+    </ng-template>`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], operand: [{ type: i0.Input, args: [{ isSignal: true, alias: "operand", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SL_TABLE_PARTS, SlTable, SlTableBody, SlTableBooleanFilter, SlTableCaption, SlTableCell, SlTableCellAxes, SlTableColumnActions, SlTableColumnHeader, SlTableContent, SlTableDateFilter, SlTableDateTimeFilter, SlTableDetail, SlTableEmpty, SlTableExpander, SlTableFilterBase, SlTableFilterShell, SlTableFooter, SlTableHead, SlTableIdFactory, SlTableLoader, SlTableNumberFilter, SlTableRow, SlTableRowHeader, SlTableSelect, SlTableSelectAll, SlTableSetFilter, SlTableSort, SlTableSummary, SlTableTextFilter, SlTableTimeFilter, TABLE_DEFAULTS, TABLE_ROW_SELECTOR, injectTableDefaults, provideTableDefaults };
+//# sourceMappingURL=slotted-angular-table.mjs.map