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

package/fesm2022/slotted-angular-data-list.mjs

@@ -0,0 +1,1418 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, TemplateRef, Directive, ElementRef, afterNextRender, HostAttributeToken, booleanAttribute, model, output, contentChildren, computed, signal, afterRenderEffect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectMessages, injectLocale } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlCheckbox } from '@slotted/angular/checkbox';
+import { SlList, SlListSection, SlListSectionLabel, SlListSectionList } from '@slotted/angular/list';
+import { SlListItem, SlListItemActions, SlListItemBody, SlListItemContent, SlListItemDescription, SlListItemEnd, SlListItemLabel, SlListItemStart } from '@slotted/angular/list-item';
+import { SlMenu, SlMenuItem, SlMenuRadioGroup, SlMenuSeparator, SlMenuTrigger } from '@slotted/angular/menu';
+import { SlResultState, SlResultStateActions, SlResultStateContent, SlResultStateTitle } from '@slotted/angular/result-state';
+import { SlSkeleton, SlSkeletonRegion } from '@slotted/angular/skeleton';
+import { SlVisuallyHidden } from '@slotted/angular/visually-hidden';
+import { nextSelection } from '@slotted/core/collection';
+import { DEFAULT_DATA_LIST_FIELDS, resolveDataListLayout, dataListNodes, dataListKeys, describeDataListSort, dataListFieldText, withDataListSortColumn, withDataListSortDirection } from '@slotted/core/data-list';
+import { emptyQuery, applyQuery, isQueryActive, cellValue, sameQuery } from '@slotted/core/grid';
+import { dataListMessages } from '@slotted/core/i18n';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+
+const FALLBACK = {
+    variant: 'ruled',
+    size: 'md',
+    fields: DEFAULT_DATA_LIST_FIELDS,
+    selectionMode: 'none',
+    skeletonRows: 5,
+    loadingDelay: 200,
+    loadingMinDuration: 400,
+};
+const DATA_LIST_DEFAULTS = new InjectionToken('slotted data-list defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application states the family's defaults once. A list that states its
+ * own value still wins. Its words come from the language in force
+ * (`provideSlotted`).
+ */
+function provideDataListDefaults(defaults) {
+    return {
+        provide: DATA_LIST_DEFAULTS,
+        useFactory: () => ({
+            ...FALLBACK,
+            ...Object.fromEntries(Object.entries(defaults).filter(([, value]) => value !== undefined)),
+        }),
+    };
+}
+function injectDataListDefaults() {
+    return inject(DATA_LIST_DEFAULTS);
+}
+
+/**
+ * Draws a column's value wherever the record shows it: title, subtitle,
+ * trailing value, field or actions. A template with no column id serves every
+ * column that has none of its own.
+ */
+class SlDataListCellTemplate {
+    /** The column id, or empty for every column. */
+    slDataListCell = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slDataListCell" }] : /* istanbul ignore next */ []));
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDataListCellTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlDataListCellTemplate, isStandalone: true, selector: "ng-template[slDataListCell]", inputs: { slDataListCell: { classPropertyName: "slDataListCell", publicName: "slDataListCell", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDataListCellTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slDataListCell]', standalone: true }]
+        }], propDecorators: { slDataListCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "slDataListCell", required: false }] }] } });
+/** The picture at the start of a record: an avatar, a thumbnail. */
+class SlDataListMediaTemplate {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDataListMediaTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDataListMediaTemplate, isStandalone: true, selector: "ng-template[slDataListMedia]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDataListMediaTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slDataListMedia]', standalone: true }]
+        }] });
+/** Replaces the empty, no-results or error state. */
+class SlDataListEmptyTemplate {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDataListEmptyTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDataListEmptyTemplate, isStandalone: true, selector: "ng-template[slDataListEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDataListEmptyTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slDataListEmpty]', standalone: true }]
+        }] });
+
+/** The value that stands for "no sort" in the column group, a string no column id can be. */
+const NO_SORT = '\u0000none';
+/** Varied lengths, so a skeleton reads as text rather than as a stack of equal bars. */
+const BAR_WIDTHS = ['9rem', '7rem', '8rem', '6.5rem', '9.5rem'];
+const FIELD_WIDTHS = ['3.5rem', '5.5rem', '4rem', '5rem', '4.5rem', '6rem'];
+let instances = 0;
+/** A click the keyboard produced has no pointer detail. */
+const pressReason = (event) => event.detail === 0 ? 'keyboard' : 'pointer';
+function asKeys(value) {
+    if (Array.isArray(value))
+        return value;
+    return value === null || value === undefined ? [] : [value];
+}
+function sameKeys(a, b) {
+    return a.length === b.length && a.every((key, index) => key === b[index]);
+}
+function makeRequest(value, previous, reason, source, extra = {}) {
+    let cancelled = false;
+    return {
+        value,
+        previous,
+        reason,
+        source,
+        ...extra,
+        get cancelled() {
+            return cancelled;
+        },
+        cancel() {
+            cancelled = true;
+        },
+    };
+}
+/** The record with this key, found without `CSS.escape`, which not every document has. */
+function recordOf(root, key) {
+    for (const item of root.querySelectorAll('[data-ui="list-item"][data-key]')) {
+        if (item.getAttribute('data-key') === key)
+            return item;
+    }
+    return null;
+}
+/** The first control a record holds, where focus lands on that record. */
+function firstControl(item) {
+    return (item?.querySelector('input:not(:disabled), a[href][data-part="title"], button[data-part="title"]:not(:disabled), button[data-part="more"], [data-part="actions"] :is(a[href], button:not(:disabled))') ?? null);
+}
+/**
+ * Writes a part name back on an element whose other directive erased it.
+ * `slMenuTriggerFor` binds `[attr.data-part]` to `null` on a trigger that is
+ * neither a bar's item nor a submenu's, which takes `slButton`'s `root` with
+ * it; the binding is constant, so writing it after the first render holds.
+ */
+class SlDataListPart {
+    part = input.required({ ...(ngDevMode ? { debugName: "part" } : /* istanbul ignore next */ {}), alias: 'slDataListPart' });
+    host = inject(ElementRef);
+    constructor() {
+        afterNextRender(() => this.host.nativeElement.setAttribute('data-part', this.part()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDataListPart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlDataListPart, isStandalone: true, selector: "[slDataListPart]", inputs: { part: { classPropertyName: "part", publicName: "slDataListPart", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDataListPart, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slDataListPart]', standalone: true }]
+        }], ctorParameters: () => [], propDecorators: { part: [{ type: i0.Input, args: [{ isSignal: true, alias: "slDataListPart", required: true }] }] } });
+/** Marks the consumer's own content for the footer, beside load-more: a pagination. */
+class SlDataListFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDataListFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDataListFooter, isStandalone: true, selector: "[slDataListFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDataListFooter, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slDataListFooter]', standalone: true }]
+        }] });
+/**
+ * A small tabular set drawn as a list of records. Each record is a list item:
+ * the title, a subtitle, a trailing value, and the fields of highest priority
+ * as pairs of a label and a value. The family reads the column model and the
+ * query `sl-data-grid` reads, and it has no keyboard of its own: every control
+ * is a native one in the page's tab order.
+ */
+class SlDataList {
+    defaults = injectDataListDefaults();
+    host = inject(ElementRef).nativeElement;
+    writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    id = `slotted-data-list-${++instances}`;
+    noSort = NO_SORT;
+    min = Math.min;
+    rows = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    rowKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    columnState = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnState" }] : /* istanbul ignore next */ []));
+    title = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    trailing = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trailing" }] : /* istanbul ignore next */ []));
+    fields = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    labelledBy = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    mode = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    totalCount = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []));
+    selectionMode = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    disabledKeys = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledKeys" }] : /* istanbul ignore next */ []));
+    loadingKeys = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingKeys" }] : /* istanbul ignore next */ []));
+    /** The record open beside the list. The family never moves it. */
+    current = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    href = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    activatable = input(false, { ...(ngDevMode ? { debugName: "activatable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A message, or `true` for the family's own. Rows already shown stay. */
+    error = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    hasMore = input(false, { ...(ngDevMode ? { debugName: "hasMore" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Words laid over the catalog of the language in force, key by key. */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Formats the fields and counts; the provider's locale otherwise. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    skeletonRows = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
+    loadingDelay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingDelay" }] : /* istanbul ignore next */ []));
+    loadingMinDuration = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingMinDuration" }] : /* istanbul ignore next */ []));
+    query = model(emptyQuery(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    expanded = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    queryChangeRequest = output();
+    valueChangeRequest = output();
+    expandedChangeRequest = output();
+    activate$ = output({ alias: 'activate' });
+    loadMore = output();
+    retry = output();
+    cellTemplates = contentChildren(SlDataListCellTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []));
+    mediaTemplate = computed(() => this.mediaTemplates()[0] ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaTemplate" }] : /* istanbul ignore next */ []));
+    emptyTemplate = computed(() => this.emptyTemplates()[0] ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+    mediaTemplates = contentChildren(SlDataListMediaTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaTemplates" }] : /* istanbul ignore next */ []));
+    emptyTemplates = contentChildren(SlDataListEmptyTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyTemplates" }] : /* istanbul ignore next */ []));
+    footers = contentChildren(SlDataListFooter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footers" }] : /* istanbul ignore next */ []));
+    holding = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "holding" }] : /* istanbul ignore next */ []));
+    loadingMore = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingMore" }] : /* istanbul ignore next */ []));
+    anchor;
+    focusedKey = null;
+    previousKeys = [];
+    /** The family's words in the language in force, with this list's `messages` laid over them. */
+    t = injectMessages(dataListMessages, this.messages);
+    providedLocale = injectLocale();
+    localeValue = computed(() => this.locale() ?? this.providedLocale(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "localeValue" }] : /* istanbul ignore next */ []));
+    /** What a boolean field says, in the language in force. */
+    booleans = computed(() => ({ true: this.t('true'), false: this.t('false') }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "booleans" }] : /* istanbul ignore next */ []));
+    variantValue = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantValue" }] : /* istanbul ignore next */ []));
+    sizeValue = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeValue" }] : /* istanbul ignore next */ []));
+    selectionModeValue = computed(() => this.selectionMode() ?? this.defaults.selectionMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionModeValue" }] : /* istanbul ignore next */ []));
+    loadingValue = computed(() => this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingValue" }] : /* istanbul ignore next */ []));
+    loadingDelayValue = computed(() => this.loadingDelay() ?? this.defaults.loadingDelay, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingDelayValue" }] : /* istanbul ignore next */ []));
+    loadingMinDurationValue = computed(() => this.loadingMinDuration() ?? this.defaults.loadingMinDuration, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingMinDurationValue" }] : /* istanbul ignore next */ []));
+    listLabel = computed(() => this.label() ?? this.writtenLabel ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listLabel" }] : /* istanbul ignore next */ []));
+    modeValue = computed(() => this.mode() ?? (this.totalCount() === undefined ? 'client' : 'server'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modeValue" }] : /* istanbul ignore next */ []));
+    keyOf = computed(() => {
+        const rowKey = this.rowKey();
+        return typeof rowKey === 'function'
+            ? rowKey
+            : (row) => String(row[rowKey]);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyOf" }] : /* istanbul ignore next */ []));
+    layout = computed(() => resolveDataListLayout(this.columns(), {
+        title: this.title(),
+        subtitle: this.subtitle(),
+        trailing: this.trailing(),
+        fields: this.fields() ?? this.defaults.fields,
+        columnState: this.columnState(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    shownColumns = computed(() => this.layout().fields.slice(0, this.layout().shown), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shownColumns" }] : /* istanbul ignore next */ []));
+    applied = computed(() => {
+        const rows = this.rows();
+        const keyOf = this.keyOf();
+        if (this.modeValue() === 'server') {
+            return {
+                nodes: rows.map((row, index) => ({ kind: 'row', key: keyOf(row), row, index })),
+                visible: rows,
+                total: this.totalCount() ?? rows.length,
+            };
+        }
+        const result = applyQuery(rows, this.columns(), this.query(), {
+            rowKey: keyOf,
+            locale: this.localeValue(),
+            booleans: this.booleans(),
+        });
+        return { nodes: dataListNodes(result.nodes), visible: result.rows, total: result.total };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "applied" }] : /* istanbul ignore next */ []));
+    nodes = computed(() => this.applied().nodes, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    drawnKeys = computed(() => dataListKeys(this.nodes()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawnKeys" }] : /* istanbul ignore next */ []));
+    disabledSet = computed(() => new Set(this.disabledKeys()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledSet" }] : /* istanbul ignore next */ []));
+    selectedKeys = computed(() => asKeys(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    selectedSet = computed(() => new Set(this.selectedKeys()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedSet" }] : /* istanbul ignore next */ []));
+    firstLoad = computed(() => this.loading() && this.rows().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstLoad" }] : /* istanbul ignore next */ []));
+    showLoader = computed(() => this.firstLoad() || this.holding(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLoader" }] : /* istanbul ignore next */ []));
+    skeletonIndexes = computed(() => Array.from({ length: this.skeletonRows() ?? this.defaults.skeletonRows }, (_, index) => index), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonIndexes" }] : /* istanbul ignore next */ []));
+    emptyStatus = computed(() => {
+        if (this.showLoader())
+            return null;
+        if (this.error() && this.rows().length === 0)
+            return 'error';
+        if (this.drawnKeys().length > 0)
+            return null;
+        return this.rows().length === 0 && !isQueryActive(this.query()) ? 'empty' : 'no-results';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyStatus" }] : /* istanbul ignore next */ []));
+    errorOverRows = computed(() => !!this.error() && this.rows().length > 0 && !this.showLoader(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorOverRows" }] : /* istanbul ignore next */ []));
+    refreshing = computed(() => this.loading() && !this.showLoader() && this.rows().length > 0 && !this.loadingMore(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "refreshing" }] : /* istanbul ignore next */ []));
+    firstKey = computed(() => this.query().sort[0], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstKey" }] : /* istanbul ignore next */ []));
+    sortName = computed(() => {
+        const sort = this.query().sort;
+        if (sort.length === 0)
+            return this.t('sort');
+        return this.t('sortNamed', { order: describeDataListSort(sort, this.columns(), this.t) });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortName" }] : /* istanbul ignore next */ []));
+    sortText = computed(() => {
+        const sort = this.query().sort;
+        const column = this.columns().find((entry) => entry.id === sort[0]?.column);
+        if (!column)
+            return this.t('sort');
+        return this.t('sortSummary', { column: column.label, more: sort.length - 1 });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortText" }] : /* istanbul ignore next */ []));
+    allKeys = computed(() => {
+        const disabled = this.disabledSet();
+        const keyOf = this.keyOf();
+        const keys = this.modeValue() === 'client' ? this.applied().visible.map(keyOf) : this.drawnKeys();
+        return keys.filter((key) => !disabled.has(key));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allKeys" }] : /* istanbul ignore next */ []));
+    allSelected = computed(() => {
+        const all = this.allKeys();
+        const selected = this.selectedSet();
+        return all.length > 0 && all.every((key) => selected.has(key));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    someSelected = computed(() => this.allKeys().some((key) => this.selectedSet().has(key)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
+    countText = computed(() => {
+        const selected = this.selectedKeys().length;
+        const count = this.applied().total;
+        return this.selectionModeValue() !== 'none' && selected > 0
+            ? this.t('selectedCount', { selected, count })
+            : this.t('count', { count });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterRenderEffect(() => {
+            const keys = this.drawnKeys();
+            const before = this.previousKeys;
+            this.previousKeys = keys;
+            const lost = this.focusedKey;
+            if (lost === null || keys.includes(lost))
+                return;
+            const active = this.host.ownerDocument.activeElement;
+            if (active && active !== this.host.ownerDocument.body && this.host.contains(active))
+                return;
+            const at = before.indexOf(lost);
+            const next = before.slice(at + 1).find((key) => keys.includes(key));
+            const previous = before
+                .slice(0, Math.max(at, 0))
+                .reverse()
+                .find((key) => keys.includes(key));
+            const target = next ?? previous;
+            this.focusedKey = target ?? null;
+            if (target !== undefined)
+                firstControl(recordOf(this.host, target))?.focus();
+            else
+                this.host
+                    .querySelector('[data-part="empty"] [data-ui="result-state"]')
+                    ?.focus();
+        });
+        afterRenderEffect(() => {
+            if (this.firstLoad())
+                this.holding.set(true);
+            if (!this.loading())
+                this.loadingMore.set(false);
+        });
+    }
+    bar(index) {
+        return BAR_WIDTHS[index % BAR_WIDTHS.length];
+    }
+    fieldBar(index) {
+        return FIELD_WIDTHS[index % FIELD_WIDTHS.length];
+    }
+    sectionLabel(node) {
+        const column = this.columns().find((entry) => entry.id === node.column);
+        return `${column?.label ?? node.column}: ${node.text} · ${new Intl.NumberFormat(this.localeValue()).format(node.count)}`;
+    }
+    emptyTitle(status) {
+        if (status === 'error') {
+            const error = this.error();
+            return typeof error === 'string' ? error : this.t('errorTitle');
+        }
+        return this.t(status === 'no-results' ? 'noResultsTitle' : 'emptyTitle');
+    }
+    /* ── One record ────────────────────────────────────────────────────── */
+    field(column, row, key, place) {
+        const text = dataListFieldText(column, row, { locale: this.localeValue(), booleans: this.booleans() }) ??
+            '';
+        const templates = this.cellTemplates();
+        const template = templates.find((entry) => entry.slDataListCell() === column.id) ??
+            templates.find((entry) => entry.slDataListCell() === '') ??
+            null;
+        return {
+            column,
+            numeric: column.kind === 'number' || column.numeric === true,
+            template: template?.template ?? null,
+            context: { $implicit: row, row, column, key, value: cellValue(column, row), text, place },
+        };
+    }
+    record(key, row) {
+        const layout = this.layout();
+        const expanded = this.expanded().includes(key);
+        const current = this.current();
+        const title = layout.title ? this.field(layout.title, row, key, 'title') : null;
+        const columns = expanded ? layout.fields : layout.fields.slice(0, layout.shown);
+        return {
+            key,
+            row,
+            disabled: this.disabledSet().has(key),
+            busy: this.loadingKeys().includes(key),
+            selected: this.selectionModeValue() !== 'none' && this.selectedSet().has(key),
+            current: current !== undefined && current !== null && current === key,
+            expanded,
+            titleText: title?.context.text || key,
+            title,
+            subtitle: layout.subtitle ? this.field(layout.subtitle, row, key, 'subtitle') : null,
+            trailing: layout.trailing ? this.field(layout.trailing, row, key, 'trailing') : null,
+            actions: layout.actions.map((column) => this.field(column, row, key, 'actions')),
+            fields: columns.map((column) => this.field(column, row, key, 'field')),
+            hidden: layout.fields.length - layout.shown,
+            href: this.href()?.(row),
+            fieldsId: `${this.id}-${key}-fields`,
+        };
+    }
+    /* ── Requests ──────────────────────────────────────────────────────── */
+    requestQuery(next, change, reason, source) {
+        const query = this.query();
+        if (sameQuery(next, query))
+            return false;
+        const request = makeRequest(next, query, reason, source, { change });
+        this.queryChangeRequest.emit(request);
+        if (request.cancelled)
+            return false;
+        this.query.set(next);
+        return true;
+    }
+    requestValue(next, reason, source) {
+        const value = this.value();
+        if (sameKeys(asKeys(next), asKeys(value)))
+            return;
+        const request = makeRequest(next, value, reason, source);
+        this.valueChangeRequest.emit(request);
+        if (request.cancelled)
+            return;
+        this.value.set(next);
+    }
+    toggleExpanded(key, event) {
+        const expanded = this.expanded();
+        const next = expanded.includes(key)
+            ? expanded.filter((entry) => entry !== key)
+            : [...expanded, key];
+        const request = makeRequest(next, expanded, pressReason(event), event, {
+            key,
+        });
+        this.expandedChangeRequest.emit(request);
+        if (request.cancelled)
+            return;
+        this.expanded.set(next);
+    }
+    pressRecord(key, event) {
+        const mode = this.selectionModeValue();
+        if (mode === 'none' || this.disabledSet().has(key))
+            return;
+        const reason = pressReason(event);
+        const selected = this.selectedKeys();
+        const chosen = this.selectedSet();
+        if (mode === 'single') {
+            this.anchor = key;
+            this.requestValue(chosen.has(key) ? null : key, reason, event);
+            return;
+        }
+        const selectable = this.drawnKeys().filter((entry) => !this.disabledSet().has(entry));
+        if (event.shiftKey && this.anchor !== undefined) {
+            const result = nextSelection({
+                action: 'range',
+                mode: 'multiple',
+                selected,
+                keys: selectable,
+                key,
+                anchor: this.anchor,
+                disabled: (entry) => this.disabledSet().has(entry),
+            });
+            const outside = selected.filter((entry) => !selectable.includes(entry));
+            this.requestValue([...outside, ...result.selected], 'select', event);
+            return;
+        }
+        this.anchor = key;
+        this.requestValue(chosen.has(key) ? selected.filter((entry) => entry !== key) : [...selected, key], reason, event);
+    }
+    pressAll(event) {
+        const all = this.allKeys();
+        const covered = new Set(all);
+        const selected = this.selectedKeys();
+        const chosen = this.selectedSet();
+        const everything = this.allSelected();
+        const next = everything
+            ? selected.filter((key) => !covered.has(key))
+            : [...selected, ...all.filter((key) => !chosen.has(key))];
+        this.requestValue(next, everything ? 'clear' : 'select', event);
+    }
+    chooseColumn(request) {
+        const next = request.value === NO_SORT ? null : request.value;
+        this.sortTo(withDataListSortColumn(this.query(), next), request.reason, request.source);
+    }
+    chooseDirection(request) {
+        this.sortTo(withDataListSortDirection(this.query(), request.value), request.reason, request.source);
+    }
+    sortTo(next, reason, source) {
+        if (!this.requestQuery(next, 'sort', reason, source))
+            return;
+        getLiveAnnouncer(this.host.ownerDocument).announce(next.sort.length === 0
+            ? this.t('sortCleared')
+            : this.t('sortedBy', { order: describeDataListSort(next.sort, this.columns(), this.t) }));
+    }
+    clearFilters(event) {
+        const query = this.query();
+        const page = query.page && 'index' in query.page ? { ...query.page, index: 0 } : query.page;
+        this.requestQuery({ ...query, filter: null, search: '', page }, 'filter', 'clear', event);
+    }
+    activate(view, event) {
+        this.activate$.emit({ key: view.key, row: view.row, reason: pressReason(event), event });
+    }
+    activateLink(view, event) {
+        if (view.disabled || view.busy) {
+            event.preventDefault();
+            return;
+        }
+        this.activate(view, event);
+    }
+    askForMore() {
+        this.loadingMore.set(true);
+        this.loadMore.emit();
+    }
+    onFocusIn(event) {
+        const item = event.target.closest('[data-ui="list-item"][data-key]');
+        this.focusedKey = item?.getAttribute('data-key') ?? this.focusedKey;
+    }
+    /* ── Imperative ────────────────────────────────────────────────────── */
+    /** Focus goes to the first control of the first record, or to the empty state. */
+    focus() {
+        const first = this.host.querySelector('[data-ui="list-item"][data-key]');
+        const control = firstControl(first);
+        if (control)
+            control.focus();
+        else
+            this.host.querySelector('[data-part="empty"] [data-ui="result-state"]')?.focus();
+    }
+    /** Focus goes to the first control of the record with this key. Returns whether it was found. */
+    focusKey(key) {
+        const control = firstControl(recordOf(this.host, key));
+        control?.focus();
+        return control !== null;
+    }
+    /** Scrolls the record into view. Returns whether it was found. */
+    scrollToKey(key) {
+        const item = recordOf(this.host, key);
+        item?.scrollIntoView({ block: 'nearest' });
+        return item !== null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDataList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDataList, isStandalone: true, selector: "sl-data-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, columnState: { classPropertyName: "columnState", publicName: "columnState", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, trailing: { classPropertyName: "trailing", publicName: "trailing", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "labelledBy", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, disabledKeys: { classPropertyName: "disabledKeys", publicName: "disabledKeys", isSignal: true, isRequired: false, transformFunction: null }, loadingKeys: { classPropertyName: "loadingKeys", publicName: "loadingKeys", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, activatable: { classPropertyName: "activatable", publicName: "activatable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, loadingDelay: { classPropertyName: "loadingDelay", publicName: "loadingDelay", isSignal: true, isRequired: false, transformFunction: null }, loadingMinDuration: { classPropertyName: "loadingMinDuration", publicName: "loadingMinDuration", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", 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 } }, outputs: { query: "queryChange", value: "valueChange", expanded: "expandedChange", queryChangeRequest: "queryChangeRequest", valueChangeRequest: "valueChangeRequest", expandedChangeRequest: "expandedChangeRequest", activate$: "activate", loadMore: "loadMore", retry: "retry" }, host: { attributes: { "data-ui": "data-list", "data-part": "root" }, listeners: { "focusin": "onFocusIn($event)" }, properties: { "attr.data-variant": "variantValue()", "attr.data-size": "sizeValue()", "attr.aria-busy": "refreshing() ? 'true' : null", "attr.data-loading": "refreshing() ? '' : null" } }, queries: [{ propertyName: "cellTemplates", predicate: SlDataListCellTemplate, isSignal: true }, { propertyName: "mediaTemplates", predicate: SlDataListMediaTemplate, isSignal: true }, { propertyName: "emptyTemplates", predicate: SlDataListEmptyTemplate, isSignal: true }, { propertyName: "footers", predicate: SlDataListFooter, isSignal: true }], exportAs: ["slDataList"], ngImport: i0, template: `
+    <div data-part="header">
+      @if (selectionModeValue() === 'multiple' && !showLoader()) {
+        <span data-part="select-all">
+          <span
+            slCheckbox
+            [checked]="allSelected()"
+            [indeterminate]="someSelected() && !allSelected()"
+            [disabled]="allKeys().length === 0"
+            [size]="sizeValue()"
+            (click)="pressAll($event)"
+            ><span slVisuallyHidden>{{ t('selectAll', { count: allKeys().length }) }}</span></span
+          >
+        </span>
+      }
+      <output data-part="count" aria-live="polite">{{ showLoader() ? '' : countText() }}</output>
+      @if (layout().sortable.length > 0) {
+        <span data-part="sort" [attr.data-direction]="firstKey()?.direction ?? null">
+          <button
+            slButton
+            slDataListPart="root"
+            size="sm"
+            tone="secondary"
+            variant="ghost"
+            [disabled]="showLoader()"
+            [attr.aria-label]="sortName()"
+            [slMenuTriggerFor]="sortMenu"
+          >
+            {{ sortText()
+            }}<span slButtonEnd>
+              @if (firstKey()) {
+                <span slIcon size="sm"><svg slGlyph name="chevron-down"></svg></span>
+              }
+            </span>
+          </button>
+          <sl-menu #sortMenu align="end" [aria-label]="t('sort')">
+            <sl-menu-radio-group
+              [attr.aria-labelledby]="id + '-sort-column'"
+              [value]="firstKey()?.column ?? noSort"
+              (valueChangeRequest)="chooseColumn($event)"
+            >
+              <div data-part="group-label" [id]="id + '-sort-column'">
+                {{ t('sortColumn') }}
+              </div>
+              <button slMenuRadioItem [value]="noSort">{{ t('sortNone') }}</button>
+              @for (column of layout().sortable; track column.id) {
+                <button slMenuRadioItem [value]="column.id">{{ column.label }}</button>
+              }
+            </sl-menu-radio-group>
+            <hr slMenuSeparator />
+            <sl-menu-radio-group
+              [attr.aria-labelledby]="id + '-sort-direction'"
+              [value]="firstKey()?.direction ?? ''"
+              (valueChangeRequest)="chooseDirection($event)"
+            >
+              <div data-part="group-label" [id]="id + '-sort-direction'">
+                {{ t('sortDirection') }}
+              </div>
+              <button slMenuRadioItem value="ascending" [disabled]="!firstKey()">
+                {{ t('ascending') }}
+              </button>
+              <button slMenuRadioItem value="descending" [disabled]="!firstKey()">
+                {{ t('descending') }}
+              </button>
+            </sl-menu-radio-group>
+          </sl-menu>
+        </span>
+      }
+    </div>
+
+    @if (errorOverRows()) {
+      <ng-container
+        [ngTemplateOutlet]="emptyState"
+        [ngTemplateOutletContext]="{ $implicit: 'error' }"
+      />
+    }
+
+    @if (showLoader()) {
+      <div data-part="loader">
+        <div
+          slSkeletonRegion
+          [loading]="firstLoad()"
+          [delay]="loadingDelayValue()"
+          [minDuration]="loadingMinDurationValue()"
+          [messages]="{ label: t('loading') }"
+          (reveal)="holding.set(false)"
+        >
+          <ul slList aria-hidden="true" inert [variant]="variantValue()" [size]="sizeValue()">
+            @for (index of skeletonIndexes(); track index) {
+              <li slListItem align="start" [variant]="variantValue()" [size]="sizeValue()">
+                <div slListItemContent>
+                  <div slListItemBody>
+                    <div slListItemLabel><span slSkeleton [inlineSize]="bar(index)"></span></div>
+                    @if (layout().subtitle) {
+                      <div slListItemDescription>
+                        <span slSkeleton [inlineSize]="bar(index + 2)"></span>
+                      </div>
+                    }
+                  </div>
+                  @if (layout().trailing) {
+                    <div slListItemEnd>
+                      <span slSkeleton [inlineSize]="fieldBar(index + 3)"></span>
+                    </div>
+                  }
+                  @if (layout().shown > 0) {
+                    <dl data-part="fields">
+                      @for (column of shownColumns(); track column.id; let field = $index) {
+                        <div data-part="field">
+                          <dt data-part="field-label">{{ column.label }}</dt>
+                          <dd data-part="field-value">
+                            <span slSkeleton [inlineSize]="fieldBar(index + field)"></span>
+                          </dd>
+                        </div>
+                      }
+                    </dl>
+                  }
+                </div>
+              </li>
+            }
+          </ul>
+        </div>
+      </div>
+    } @else if (emptyStatus(); as status) {
+      <ng-container
+        [ngTemplateOutlet]="emptyState"
+        [ngTemplateOutletContext]="{ $implicit: status }"
+      />
+    } @else {
+      <ul
+        slList
+        [variant]="variantValue()"
+        [size]="sizeValue()"
+        [attr.aria-label]="labelledBy() ? null : listLabel()"
+        [attr.aria-labelledby]="labelledBy() ?? null"
+      >
+        <ng-container
+          [ngTemplateOutlet]="nodesTemplate"
+          [ngTemplateOutletContext]="{ $implicit: nodes() }"
+        />
+      </ul>
+    }
+
+    @if (hasMore() || footers().length > 0) {
+      <div data-part="footer">
+        @if (hasMore() && !showLoader()) {
+          <span data-part="load-more">
+            <button
+              slButton
+              size="sm"
+              tone="secondary"
+              variant="outline"
+              [loading]="loadingValue() && loadingMore()"
+              (click)="askForMore()"
+            >
+              {{ t('loadMore') }}
+            </button>
+          </span>
+        }
+        <ng-content select="[slDataListFooter]" />
+      </div>
+    }
+
+    <ng-template #nodesTemplate let-list>
+      @for (node of list; track node.key) {
+        @if (node.kind === 'row') {
+          <ng-container
+            [ngTemplateOutlet]="recordTemplate"
+            [ngTemplateOutletContext]="{ $implicit: record(node.key, node.row) }"
+          />
+        } @else {
+          <li slListSection>
+            <span slListSectionLabel role="heading" [attr.aria-level]="min(node.level + 2, 6)">{{
+              sectionLabel(node)
+            }}</span>
+            <ul slListSectionList>
+              <ng-container
+                [ngTemplateOutlet]="nodesTemplate"
+                [ngTemplateOutletContext]="{ $implicit: node.children }"
+              />
+            </ul>
+          </li>
+        }
+      }
+    </ng-template>
+
+    <ng-template #recordTemplate let-view>
+      <li
+        slListItem
+        align="start"
+        [attr.data-key]="view.key"
+        [attr.data-expanded]="view.expanded ? '' : null"
+        [variant]="variantValue()"
+        [size]="sizeValue()"
+        [selected]="view.selected"
+        [current]="view.current ? (view.href === undefined ? true : 'page') : false"
+        [disabled]="view.disabled"
+        [loading]="view.busy"
+      >
+        <div slListItemContent>
+          @if (selectionModeValue() !== 'none' || mediaTemplate()) {
+            <div slListItemStart>
+              @if (selectionModeValue() !== 'none') {
+                <span data-part="selection">
+                  <span
+                    slCheckbox
+                    [checked]="view.selected"
+                    [disabled]="view.disabled"
+                    [size]="sizeValue()"
+                    (click)="pressRecord(view.key, $event)"
+                    ><span slVisuallyHidden>{{
+                      t('selectRow', { title: view.titleText })
+                    }}</span></span
+                  >
+                </span>
+              }
+              @if (mediaTemplate(); as media) {
+                <span data-part="media">
+                  <ng-container
+                    [ngTemplateOutlet]="media.template"
+                    [ngTemplateOutletContext]="{ $implicit: view.row }"
+                  />
+                </span>
+              }
+            </div>
+          }
+          <div slListItemBody>
+            <div slListItemLabel>
+              @if (view.href !== undefined) {
+                <a
+                  data-part="title"
+                  [attr.href]="view.href"
+                  [attr.aria-disabled]="view.disabled || view.busy ? 'true' : null"
+                  (click)="activateLink(view, $event)"
+                  ><ng-container
+                    [ngTemplateOutlet]="value"
+                    [ngTemplateOutletContext]="{ $implicit: view.title }"
+                /></a>
+              } @else if (activatable()) {
+                <button
+                  data-part="title"
+                  type="button"
+                  [disabled]="view.disabled || view.busy"
+                  (click)="activate(view, $event)"
+                >
+                  <ng-container
+                    [ngTemplateOutlet]="value"
+                    [ngTemplateOutletContext]="{ $implicit: view.title }"
+                  />
+                </button>
+              } @else {
+                <span data-part="title"
+                  ><ng-container
+                    [ngTemplateOutlet]="value"
+                    [ngTemplateOutletContext]="{ $implicit: view.title }"
+                /></span>
+              }
+            </div>
+            @if (view.subtitle) {
+              <div slListItemDescription>
+                <ng-container
+                  [ngTemplateOutlet]="value"
+                  [ngTemplateOutletContext]="{ $implicit: view.subtitle }"
+                />
+              </div>
+            }
+          </div>
+          @if (view.trailing) {
+            <div slListItemEnd>
+              <span data-part="trailing"
+                ><ng-container
+                  [ngTemplateOutlet]="value"
+                  [ngTemplateOutletContext]="{ $implicit: view.trailing }"
+              /></span>
+            </div>
+          }
+          @if (view.fields.length > 0) {
+            <dl data-part="fields" [id]="view.fieldsId">
+              @for (field of view.fields; track field.column.id) {
+                <div data-part="field">
+                  <dt data-part="field-label">{{ field.column.label }}</dt>
+                  <dd data-part="field-value" [attr.data-numeric]="field.numeric ? '' : null">
+                    <ng-container
+                      [ngTemplateOutlet]="value"
+                      [ngTemplateOutletContext]="{ $implicit: field }"
+                    />
+                  </dd>
+                </div>
+              }
+            </dl>
+          }
+          @if (view.hidden > 0) {
+            <button
+              data-part="more"
+              type="button"
+              [attr.aria-controls]="view.fieldsId"
+              [attr.aria-expanded]="view.expanded"
+              (click)="toggleExpanded(view.key, $event)"
+            >
+              {{ view.expanded ? t('less') : t('more', { count: view.hidden }) }}
+              <span slIcon size="sm"><svg slGlyph name="chevron-down"></svg></span>
+            </button>
+          }
+        </div>
+        @if (view.actions.length > 0) {
+          <div slListItemActions>
+            @for (field of view.actions; track field.column.id) {
+              <ng-container
+                [ngTemplateOutlet]="value"
+                [ngTemplateOutletContext]="{ $implicit: field }"
+              />
+            }
+          </div>
+        }
+      </li>
+    </ng-template>
+
+    <ng-template #value let-field>
+      @if (field) {
+        @if (field.template) {
+          <ng-container
+            [ngTemplateOutlet]="field.template"
+            [ngTemplateOutletContext]="field.context"
+          />
+        } @else if (field.context.text === '' && field.context.place !== 'actions') {
+          <span data-part="field-empty"
+            ><span aria-hidden="true">—</span><span slVisuallyHidden>{{ t('empty') }}</span></span
+          >
+        } @else {
+          {{ field.context.text }}
+        }
+      }
+    </ng-template>
+
+    <ng-template #emptyState let-status>
+      <div data-part="empty">
+        @if (emptyTemplate(); as custom) {
+          <ng-container
+            [ngTemplateOutlet]="custom.template"
+            [ngTemplateOutletContext]="{ $implicit: status }"
+          />
+        } @else {
+          <section slResultState reach="section" tabindex="-1" [status]="status">
+            <div slResultStateContent>
+              <div slResultStateTitle>{{ emptyTitle(status) }}</div>
+            </div>
+            @if (status === 'no-results') {
+              <div slResultStateActions>
+                <button
+                  slButton
+                  size="md"
+                  tone="secondary"
+                  variant="outline"
+                  (click)="clearFilters($event)"
+                >
+                  {{ t('clearFilters') }}
+                </button>
+              </div>
+            } @else if (status === 'error') {
+              <div slResultStateActions>
+                <button
+                  slButton
+                  size="md"
+                  tone="secondary"
+                  variant="outline"
+                  (click)="retry.emit()"
+                >
+                  {{ t('retry') }}
+                </button>
+              </div>
+            }
+          </section>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=data-list][data-part=root]{--_field-min: 9rem;--_field-label-inline: 7.5rem;--_pad-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-border-subtle, ButtonBorder);--_rule-width: var(--slotted-border-width-thin, 1px);--_transition: var(--slotted-duration-short) var(--slotted-easing-standard);color:var(--slotted-text, CanvasText);container:slotted-data-list / inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, sans-serif);min-inline-size:0}[data-ui=data-list][data-size=sm]{--_pad-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=data-list][data-size=lg]{--_pad-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=data-list]>[data-part=header]{align-items:center;box-shadow:0 var(--_rule-width) 0 0 var(--_rule);box-sizing:border-box;column-gap:var(--_gap);display:flex;flex-wrap:wrap;font-size:var(--slotted-control-font-size-sm, 12px);line-height:var(--slotted-line-height-sm, 1.45);min-block-size:var(--slotted-control-height-md, 34px);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_pad-inline);row-gap:var(--slotted-space-1, .125rem)}[data-ui=data-list][data-variant=plain]>[data-part=header]{box-shadow:none}[data-ui=data-list][data-variant=framed]>[data-part=header]{box-shadow:none;padding-inline:calc(var(--_pad-inline) + var(--_rule-width))}[data-ui=data-list] [data-part=select-all]{display:inline-flex;flex:none}[data-ui=data-list] [data-part=count]{color:var(--_muted);flex:1 1 auto;font-variant-numeric:tabular-nums;min-inline-size:0;overflow-wrap:anywhere;text-align:match-parent;unicode-bidi:plaintext}[data-ui=data-list] [data-part=sort]{display:inline-flex;flex:none;margin-inline-start:auto;margin-inline-end:calc(var(--slotted-control-padding-inline-sm, 10px) * -1)}[data-ui=data-list] [data-part=sort] [data-part=end]>[data-ui=icon]{transition:transform var(--_transition)}[data-ui=data-list] [data-part=sort][data-direction=ascending] [data-part=end]>[data-ui=icon]{transform:rotate(180deg)}[data-ui=data-list] [data-ui=list-item]{position:relative}[data-ui=data-list] [data-ui=list-item] :is([data-part=selection],[data-part=more],[data-part=field-value] :is(a,button,input,select,textarea,[tabindex])),[data-ui=data-list] [data-ui=list-item]>[data-part=actions]{position:relative;z-index:1}[data-ui=data-list] [data-part=selection],[data-ui=data-list] [data-part=media]{align-items:center;display:inline-flex;flex:none}[data-ui=data-list] [data-part=selection]+[data-part=media]{margin-inline-start:var(--_gap)}[data-ui=data-list] :is(a,button)[data-part=title]{appearance:none;background:none;border:0;color:inherit;cursor:pointer;font:inherit;margin:0;padding:0;text-align:inherit;text-decoration:none}[data-ui=data-list] :is(a,button)[data-part=title]:after{border-radius:inherit;content:\"\";inset:0;position:absolute}[data-ui=data-list] :is(a,button)[data-part=title]:focus-visible{outline:none}[data-ui=data-list] :is(a,button)[data-part=title]:focus-visible:after{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=data-list] [data-ui=list-item]:not([data-disabled]):not([data-loading]) :is(a[href],button:not(:disabled))[data-part=title]:hover{text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:.2em}[data-ui=data-list] [data-ui=list-item]:not([data-disabled]):not([data-loading]):has([data-part=title]:is(a[href],button:not(:disabled)):hover){--_fill: var(--_hover, ButtonFace)}[data-ui=data-list] [data-ui=list-item]:not([data-disabled]):not([data-loading]):has([data-part=title]:is(a[href],button:not(:disabled)):active){--_fill: var(--_active, ButtonFace)}[data-ui=data-list] [data-ui=list-item]:is([data-disabled],[data-loading]) [data-part=title]{cursor:default}[data-ui=data-list] [data-part=trailing]{color:var(--_text, CanvasText);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);overflow-wrap:anywhere;text-align:end}[data-ui=data-list] [data-ui=list-item]>[data-part=content]>:is([data-part=fields],[data-part=more]){grid-column:2 / -1}@container slotted-list-item (max-inline-size: 22rem){[data-ui=data-list] [data-ui=list-item]>[data-part=content]>:is([data-part=fields],[data-part=more]){grid-column:1 / -1}}[data-ui=data-list] [data-part=fields]{column-gap:var(--slotted-space-4, .5rem);container:slotted-data-list-fields / inline-size;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--_field-min),100%),1fr));margin-block:var(--slotted-space-2, .25rem) 0;margin-inline:0;padding:0;row-gap:var(--slotted-space-2, .25rem)}[data-ui=data-list] [data-part=field]{display:flex;flex-direction:column;margin:0;min-inline-size:0}[data-ui=data-list] [data-part=field-label]{color:var(--_muted, GrayText);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-line-height-xs, 1.4);margin:0;overflow-wrap:break-word}[data-ui=data-list] [data-part=field-value]{color:var(--_text, CanvasText);font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-line-height-md, 1.5);margin:0;min-inline-size:0;overflow-wrap:anywhere;text-align:match-parent;unicode-bidi:plaintext}[data-ui=data-list] [data-part=field-value][data-numeric]{font-variant-numeric:tabular-nums}[data-ui=data-list] [data-part=field-empty]{color:var(--_muted, GrayText)}@container slotted-data-list-fields (min-inline-size: 12rem) and (max-inline-size: 19rem){[data-ui=data-list] [data-part=field]{align-items:baseline;column-gap:var(--slotted-space-3, .375rem);display:grid;grid-template-columns:minmax(0,min(var(--_field-label-inline),35%)) minmax(0,1fr)}}[data-ui=data-list] [data-part=more]{align-items:center;appearance:none;background:none;border:0;border-radius:var(--slotted-radius-sm, 4px);color:var(--slotted-tone-accent-text, LinkText);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--slotted-control-font-size-sm, 12px);font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-space-2, .25rem);justify-self:start;margin-block-start:var(--slotted-space-1, .125rem);min-block-size:var(--slotted-target-min, 24px);padding:0}[data-ui=data-list] [data-part=more]>[data-ui=icon]{transition:transform var(--_transition)}[data-ui=data-list] [data-part=more][aria-expanded=true]>[data-ui=icon]{transform:rotate(180deg)}[data-ui=data-list] [data-part=more]:not(:disabled):hover{text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:.2em}[data-ui=data-list] [data-part=more]: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=data-list] [data-ui=list-item][data-disabled] [data-part=more]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=data-list][aria-busy=true]>[data-ui=list]{opacity:.55;pointer-events:none;transition:opacity var(--_transition)}[data-ui=data-list]>[data-part=empty]{padding-block:var(--slotted-space-8, 1.5rem);padding-inline:var(--_pad-inline)}[data-ui=data-list]>[data-part=loader]{display:block}[data-ui=data-list]>[data-part=loader] [data-part=field-value] [data-ui=skeleton]{vertical-align:middle}[data-ui=data-list]>[data-part=footer]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--_gap);justify-content:center;padding-block:var(--slotted-space-4, .5rem);padding-inline:var(--_pad-inline)}[data-ui=data-list]>[data-part=footer]:empty{display:none}[data-ui=data-list] [data-part=load-more]{display:inline-flex}}\n", "@layer slotted.components{[data-ui=list][data-part=root],[data-ui=list] [data-part=section-list]{counter-reset:slotted-list-item;display:flex;flex-direction:column;list-style:none;margin-block:0;margin-inline:0;min-inline-size:0;padding-inline:0}[data-ui=list][data-part=root]{--_gap: var(--slotted-list-gap, var(--slotted-space-3, .375rem));--_frame-color: var(--slotted-list-border-color, var(--slotted-border-subtle, ButtonBorder));--_frame-width: var(--slotted-list-border-width, var(--slotted-border-width-thin, 1px));--_frame-radius: var(--slotted-list-radius, var(--slotted-radius-md, 6px));--_surface: var(--slotted-list-background, var(--slotted-surface, Canvas));--_section-color: var(--slotted-list-section-color, var(--slotted-text-muted, GrayText));--_section-font-size: var( --slotted-list-section-font-size, var(--slotted-font-size-xs, .75rem) );--_section-weight: var( --slotted-list-section-font-weight, var(--slotted-font-weight-semibold, 600) );--_section-inset-block: var( --slotted-list-section-padding-block, var(--slotted-space-4, .5rem) );--_row-inset-inline: var( --slotted-list-padding-inline, var(--slotted-control-padding-inline-md, 13px) );--_empty-color: var(--slotted-list-empty-color, var(--slotted-text-muted, GrayText));--_empty-inset: var(--slotted-list-empty-padding, var(--slotted-space-8, 1.5rem))}[data-ui=list][data-part=root][data-size=sm]{--_gap: var(--slotted-list-gap-sm, var(--slotted-space-2, .25rem));--_section-inset-block: var( --slotted-list-section-padding-block-sm, var(--slotted-space-3, .375rem) );--_row-inset-inline: var( --slotted-list-padding-inline-sm, var(--slotted-control-padding-inline-sm, 10px) );--_empty-inset: var(--slotted-list-empty-padding-sm, var(--slotted-space-6, 1rem))}[data-ui=list][data-part=root][data-size=lg]{--_gap: var(--slotted-list-gap-lg, var(--slotted-space-4, .5rem));--_section-inset-block: var( --slotted-list-section-padding-block-lg, var(--slotted-space-5, .75rem) );--_row-inset-inline: var( --slotted-list-padding-inline-lg, var(--slotted-control-padding-inline-lg, 16px) );--_empty-inset: var(--slotted-list-empty-padding-lg, var(--slotted-space-9, 2rem))}[data-ui=list][data-part=root][data-variant=framed]{background-color:var(--_surface);border:var(--_frame-width) solid var(--_frame-color);border-radius:var(--_frame-radius);overflow:clip}[data-ui=list][data-part=root][data-variant=separated]{row-gap:var(--_gap)}[data-ui=list] [data-part=section]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=list][data-variant=separated] [data-part=section],[data-ui=list][data-variant=separated] [data-part=section-list]{row-gap:var(--_gap)}[data-ui=list] [data-part=section-label]{color:var(--_section-color);font-size:var(--_section-font-size);font-weight:var(--_section-weight);letter-spacing:var(--slotted-list-section-letter-spacing, 0);line-height:var(--slotted-line-height-sm, 1.45);margin-block:0;min-inline-size:0;padding-block:var(--_section-inset-block);padding-inline:var(--_row-inset-inline)}[data-ui=list][data-inset] [data-part=section-label],[data-ui=list][data-inset] [data-part=empty]{padding-inline:0}[data-ui=list] [data-part=section-label][data-sticky]{background-color:var(--_surface);inset-block-start:0;position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=list] [data-part=empty]{align-items:center;color:var(--_empty-color);display:flex;flex-direction:column;justify-content:center;min-inline-size:0;padding-block:var(--_empty-inset);padding-inline:var(--_row-inset-inline);text-align:center}[data-ui=list][data-part=root][data-loading]{cursor:progress}}\n", "@layer slotted.components{[data-ui=list-item][data-part=root]{--_min-block: var(--slotted-list-item-min-block-size, var(--slotted-control-height-md, 34px));--_font-size: var(--slotted-list-item-font-size, var(--slotted-control-font-size-md, 13px));--_icon-size: var(--slotted-list-item-icon-size, var(--slotted-control-icon-size-md, 16px));--_control-size: var(--slotted-list-item-control-size, var(--slotted-selection-size-md, 16px));--_gap: var(--slotted-list-item-gap, var(--slotted-control-gap-md, 8px));--_pad-inline: var( --slotted-list-item-padding-inline, var(--slotted-control-padding-inline-md, 13px) );--_pad-block: var( --slotted-list-item-padding-block, max( var(--slotted-space-2, .25rem), calc((var(--_min-block) - var(--_font-size) * var(--slotted-line-height-md, 1.5)) / 2) ) );--_radius: var(--slotted-list-item-radius, var(--slotted-radius-md, 6px));--_text: var(--slotted-list-item-color, var(--slotted-text, CanvasText));--_muted: var(--slotted-list-item-color-muted, var(--slotted-text-muted, GrayText));--_subtle-hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_subtle-active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_solid-hover: var(--slotted-tone-secondary-solid-hover, ButtonFace);--_solid-active: var(--slotted-tone-secondary-solid-active, ButtonFace);--_surface: var(--slotted-tone-secondary-surface, Canvas);--_hover: var(--slotted-list-item-background-hover, var(--_subtle-hover));--_active: var(--slotted-list-item-background-active, var(--_subtle-active));--_selected-edge: var(--slotted-tone-accent-border, ButtonBorder);--_selected-surface: var( --slotted-list-item-background-selected, var(--slotted-tone-accent-surface, Canvas) );--_selected-text: var(--slotted-tone-accent-text, CanvasText);--_selected-hover: var(--slotted-tone-accent-subtle-hover, ButtonFace);--_selected-active: var(--slotted-tone-accent-subtle-active, ButtonFace);--_current-surface: var( --slotted-list-item-background-current, var(--slotted-tone-secondary-surface, Canvas) );--_current-edge: var(--slotted-tone-secondary-border, ButtonBorder);--_rule: var(--slotted-list-item-border-color, var(--slotted-border-subtle, ButtonBorder));--_rule-width: var(--slotted-list-item-border-width, var(--slotted-border-width-thin, 1px));--_marker-size: calc(var(--_icon-size) * .75);box-sizing:border-box;--_fill: transparent;--_rule-shadow: 0 0 0 0 transparent;--_edge-shadow: 0 0 0 0 transparent;background-color:var(--_fill);border-radius:var(--_radius);box-shadow:var(--_rule-shadow),var(--_edge-shadow);counter-increment:slotted-list-item;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),box-shadow var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard));container-name:slotted-list-item;container-type:inline-size;display:flex;align-items:stretch;flex-wrap:wrap;list-style:none;min-inline-size:0}[data-ui=list-item][data-size=sm]{--_min-block: var( --slotted-list-item-min-block-size-sm, var(--slotted-control-height-sm, 30px) );--_font-size: var(--slotted-list-item-font-size-sm, var(--slotted-control-font-size-sm, 12px));--_icon-size: var(--slotted-list-item-icon-size-sm, var(--slotted-control-icon-size-sm, 14px));--_control-size: var( --slotted-list-item-control-size-sm, var(--slotted-selection-size-sm, 14px) );--_gap: var(--slotted-list-item-gap-sm, var(--slotted-control-gap-sm, 6px));--_pad-inline: var( --slotted-list-item-padding-inline-sm, var(--slotted-control-padding-inline-sm, 10px) );--_pad-block: var( --slotted-list-item-padding-block-sm, max( var(--slotted-space-2, .25rem), calc((var(--_min-block) - var(--_font-size) * var(--slotted-line-height-md, 1.5)) / 2) ) )}[data-ui=list-item][data-size=lg]{--_min-block: var( --slotted-list-item-min-block-size-lg, var(--slotted-control-height-lg, 38px) );--_font-size: var(--slotted-list-item-font-size-lg, var(--slotted-control-font-size-lg, 14px));--_icon-size: var(--slotted-list-item-icon-size-lg, var(--slotted-control-icon-size-lg, 18px));--_control-size: var( --slotted-list-item-control-size-lg, var(--slotted-selection-size-lg, 18px) );--_gap: var(--slotted-list-item-gap-lg, var(--slotted-control-gap-lg, 8px));--_pad-inline: var( --slotted-list-item-padding-inline-lg, var(--slotted-control-padding-inline-lg, 16px) );--_pad-block: var( --slotted-list-item-padding-block-lg, max( var(--slotted-space-2, .25rem), calc((var(--_min-block) - var(--_font-size) * var(--slotted-line-height-md, 1.5)) / 2) ) )}[data-ui=list-item][data-tone=accent]{--_text: var(--slotted-tone-accent-text, CanvasText);--_subtle-hover: var(--slotted-tone-accent-subtle-hover, ButtonFace);--_subtle-active: var(--slotted-tone-accent-subtle-active, ButtonFace);--_solid-hover: var(--slotted-tone-accent-solid-hover, ButtonFace);--_solid-active: var(--slotted-tone-accent-solid-active, ButtonFace);--_surface: var(--slotted-tone-accent-surface, Canvas);--_selected-edge: var(--slotted-tone-accent-border, ButtonBorder);--_selected-surface: var(--slotted-list-item-background-selected, var(--_surface));--_selected-text: var(--slotted-tone-accent-text, CanvasText);--_selected-hover: var(--_subtle-hover);--_selected-active: var(--_subtle-active)}[data-ui=list-item][data-tone=success]{--_text: var(--slotted-tone-success-text, CanvasText);--_subtle-hover: var(--slotted-tone-success-subtle-hover, ButtonFace);--_subtle-active: var(--slotted-tone-success-subtle-active, ButtonFace);--_solid-hover: var(--slotted-tone-success-solid-hover, ButtonFace);--_solid-active: var(--slotted-tone-success-solid-active, ButtonFace);--_surface: var(--slotted-tone-success-surface, Canvas);--_selected-edge: var(--slotted-tone-success-border, ButtonBorder);--_selected-surface: var(--slotted-list-item-background-selected, var(--_surface));--_selected-text: var(--slotted-tone-success-text, CanvasText);--_selected-hover: var(--_subtle-hover);--_selected-active: var(--_subtle-active)}[data-ui=list-item][data-tone=warning]{--_text: var(--slotted-tone-warning-text, CanvasText);--_subtle-hover: var(--slotted-tone-warning-subtle-hover, ButtonFace);--_subtle-active: var(--slotted-tone-warning-subtle-active, ButtonFace);--_solid-hover: var(--slotted-tone-warning-solid-hover, ButtonFace);--_solid-active: var(--slotted-tone-warning-solid-active, ButtonFace);--_surface: var(--slotted-tone-warning-surface, Canvas);--_selected-edge: var(--slotted-tone-warning-border, ButtonBorder);--_selected-surface: var(--slotted-list-item-background-selected, var(--_surface));--_selected-text: var(--slotted-tone-warning-text, CanvasText);--_selected-hover: var(--_subtle-hover);--_selected-active: var(--_subtle-active)}[data-ui=list-item][data-tone=danger]{--_text: var(--slotted-tone-danger-text, CanvasText);--_subtle-hover: var(--slotted-tone-danger-subtle-hover, ButtonFace);--_subtle-active: var(--slotted-tone-danger-subtle-active, ButtonFace);--_solid-hover: var(--slotted-tone-danger-solid-hover, ButtonFace);--_solid-active: var(--slotted-tone-danger-solid-active, ButtonFace);--_surface: var(--slotted-tone-danger-surface, Canvas);--_selected-edge: var(--slotted-tone-danger-border, ButtonBorder);--_selected-surface: var(--slotted-list-item-background-selected, var(--_surface));--_selected-text: var(--slotted-tone-danger-text, CanvasText);--_selected-hover: var(--_subtle-hover);--_selected-active: var(--_subtle-active)}[data-ui=list-item][data-marker=bullet]>[data-part=marker],[data-ui=list-item][data-marker=number]:before{align-items:start;block-size:calc(var(--_pad-block) * 2 + var(--_font-size) * var(--slotted-line-height-md, 1.5));box-sizing:border-box;color:var(--_text);display:flex;flex:none;font-size:var(--_font-size);font-variant-numeric:tabular-nums;inline-size:var(--_icon-size);line-height:var(--slotted-line-height-md, 1.5);margin-inline-end:var(--_gap);margin-inline-start:var(--_pad-inline);padding-block-start:var(--_pad-block)}[data-ui=list-item][data-marker=bullet]>[data-part=marker]{--slotted-icon-size: var(--_marker-size);justify-content:center}[data-ui=list-item][data-marker=bullet]>[data-part=marker]>[data-ui=icon]{margin-block-start:calc(var(--_font-size) * var(--slotted-line-height-md, 1.5) * .5 - var(--_marker-size) * .5)}[data-ui=list-item][data-marker=number]:before{content:counter(slotted-list-item) \".\";justify-content:end}[data-ui=list-item]:is([data-marker=bullet],[data-marker=number])>[data-part=content]{padding-inline-start:0}[data-ui=list-item][data-inset][data-marker=bullet]>[data-part=marker],[data-ui=list-item][data-inset][data-marker=number]:before{margin-inline-start:0}[data-ui=list-item]>[data-part=content]{appearance:none;background-color:transparent;border:none;border-radius:inherit;box-sizing:border-box;color:var(--_text);display:grid;flex:1 1 0%;font:inherit;font-size:var(--_font-size);grid-template-areas:\"start body end\";grid-template-columns:auto minmax(0,1fr) auto;align-items:center;min-block-size:var(--_min-block);min-inline-size:0;padding-block:var(--_pad-block);padding-inline:var(--_pad-inline);text-align:start;text-decoration:none;transition:color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=list-item]:is([data-variant=ruled],[data-variant=framed]){border-radius:0}[data-ui=list-item]:not([data-disabled])>:is(a,button)[data-part=content]:not(:disabled){cursor:pointer}[data-ui=list-item][data-inset]>[data-part=content]{padding-inline:0}[data-ui=list-item][data-align=start]>[data-part=content]{align-items:start}[data-ui=list-item]>[data-part=content]>[data-part=start]{align-items:center;color:var(--_text);display:flex;flex:none;grid-area:start;margin-inline-end:var(--_gap);min-inline-size:var(--_icon-size)}[data-ui=list-item]>[data-part=content]>[data-part=start]:has(>[data-ui=checkbox]){align-items:start;inline-size:var(--_control-size);min-block-size:calc(var(--_font-size) * var(--slotted-line-height-md, 1.5))}[data-ui=list-item][data-align=start]>[data-part=content]>[data-part=start]{min-block-size:calc(var(--_font-size) * var(--slotted-line-height-md, 1.5))}[data-ui=list-item]>[data-part=content]>[data-part=body]{display:flex;flex-direction:column;grid-area:body;min-inline-size:0;row-gap:var(--slotted-list-item-body-gap, var(--slotted-space-1, .125rem))}[data-ui=list-item]>[data-part=content]>[data-part=body]>[data-part=label]{color:inherit;font-size:var(--_font-size);font-weight:var(--slotted-list-item-font-weight, var(--slotted-font-weight-regular, 400));line-height:var(--slotted-line-height-md, 1.5);margin-block:0;min-inline-size:0;overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=list-item]>[data-part=content]>[data-part=body]>[data-part=description]{color:var(--_muted);font-size:var(--slotted-list-item-description-font-size, var(--slotted-font-size-xs, .75rem));line-height:var(--slotted-line-height-sm, 1.45);margin-block:0;min-inline-size:0;overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=list-item][data-truncate]>[data-part=content]>[data-part=body]>:is([data-part=label],[data-part=description]){overflow:hidden;overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap}[data-ui=list-item]>[data-part=content]>[data-part=end]{align-items:center;color:var(--_muted);display:flex;flex:none;gap:var(--_gap);grid-area:end;margin-inline-start:var(--_gap)}[data-ui=list-item]>[data-part=actions]{align-items:center;box-sizing:border-box;display:flex;flex:none;gap:var(--_gap);padding-inline-end:var(--_pad-inline);position:relative}[data-ui=list-item][data-inset]>[data-part=actions]{padding-inline-end:0}[data-ui=list-item][data-align=start]>[data-part=actions]{align-items:start;padding-block-start:var(--_pad-block)}[data-ui=list-item]:is([data-variant=ruled],[data-variant=framed]):not(:first-child){--_rule-shadow: 0 calc(var(--_rule-width) * -1) 0 0 var(--_rule)}[data-ui=list-item][data-variant=separated]{--_fill: var(--slotted-list-item-background, var(--slotted-surface-raised, Canvas));border:var(--_rule-width) solid var(--_rule)}[data-ui=list-item][data-variant=separated]{overflow:clip}[data-ui=list-item]:not([data-disabled]):not([data-loading]):has(>:is(a,button)[data-part=content]:not(:disabled):hover){--_fill: var(--_hover)}[data-ui=list-item]:not([data-disabled]):not([data-loading]):has(>:is(a,button)[data-part=content]:not(:disabled):active){--_fill: var(--_active)}[data-ui=list-item]>[data-part=content]: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=list-item][data-current]{--_fill: var(--_current-surface);--_edge-shadow: inset 0 0 0 var(--_rule-width) var(--_current-edge)}[data-ui=list-item][data-selected]{--_hover: var(--_selected-hover);--_active: var(--_selected-active)}[data-ui=list-item][data-selected]{--_fill: var(--_selected-surface);--_edge-shadow: inset 0 0 0 var(--_rule-width) var(--_selected-edge)}[data-ui=list-item]:is([data-selected],[data-current]):not(:first-child),[data-ui=list-item]:is([data-selected],[data-current])+[data-ui=list-item]{--_rule-shadow: 0 0 0 0 transparent}[data-ui=list-item][data-selected]+[data-ui=list-item][data-selected]{--_edge-shadow: inset 0 calc(var(--_rule-width) * -1) 0 0 var(--_selected-edge), inset var(--_rule-width) 0 0 0 var(--_selected-edge), inset calc(var(--_rule-width) * -1) 0 0 0 var(--_selected-edge)}[data-ui=list-item][data-selected]>[data-part=content]{color:var(--_selected-text);font-weight:var( --slotted-list-item-font-weight-selected, var(--slotted-font-weight-medium, 500) )}[data-ui=list-item][data-current]>[data-part=content]{font-weight:var( --slotted-list-item-font-weight-current, var(--slotted-font-weight-medium, 500) )}[data-ui=list-item][data-loading]{--_text: var(--_muted)}[data-ui=list-item][data-loading]>[data-part=content]{cursor:progress}[data-ui=list-item][data-disabled]{--_disabled-ink: var( --slotted-list-item-color-disabled, var(--slotted-disabled-foreground, GrayText) );--_text: var(--_disabled-ink);--_muted: var(--_disabled-ink)}[data-ui=list-item][data-disabled]>[data-part=content]{cursor:default}[data-ui=list-item][data-disabled][data-variant=separated]{--_fill: var(--slotted-surface-sunken, Canvas);border-color:var(--slotted-disabled-border, GrayText)}@container slotted-list-item (max-inline-size: 22rem){[data-ui=list-item]>[data-part=content]{grid-template-areas:\"start body\" \"start end\";grid-template-columns:auto minmax(0,1fr)}[data-ui=list-item]>[data-part=content]>[data-part=end]{justify-content:start;margin-block-start:var(--slotted-list-item-body-gap, var(--slotted-space-1, .125rem));margin-inline-start:0}[data-ui=list-item]>[data-part=content]>[data-part=start]{align-self:start;min-block-size:calc(var(--_font-size) * var(--slotted-line-height-md, 1.5))}[data-ui=list-item]>[data-part=actions]{flex-basis:100%;justify-content:flex-end;padding-block-end:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=list-item][data-inset]>[data-part=actions]{padding-inline:0}[data-ui=list-item]>[data-part=actions]:not(:has(>:not([data-shape]))){flex-basis:auto;padding-block-end:0;padding-inline:0 var(--_pad-inline)}[data-ui=list-item][data-inset]>[data-part=actions]:not(:has(>:not([data-shape]))){padding-inline-end:0}}@media(forced-colors:active){[data-ui=list-item][data-selected]{background-color:Highlight}[data-ui=list-item][data-selected]>[data-part=content]{color:HighlightText}[data-ui=list-item][data-current]:not([data-selected]){outline:var(--slotted-border-width-thin, 1px) solid Highlight;outline-offset:calc(-1 * var(--slotted-border-width-thin, 1px))}}}\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"], 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: "component", type: SlButtonEnd, selector: "[slButtonEnd]", exportAs: ["slButtonEnd"] }, { kind: "component", type: SlCheckbox, selector: "[slCheckbox]", inputs: ["checked", "defaultChecked", "indeterminate", "parent", "value", "name", "size", "labelPlacement", "variant", "disabled", "readOnly", "invalid"], outputs: ["checkedChange"], exportAs: ["slCheckbox"] }, { kind: "directive", type: SlDataListPart, selector: "[slDataListPart]", inputs: ["slDataListPart"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlList, selector: "ul[slList], ol[slList]", inputs: ["variant", "size", "marker", "inset", "loading"], exportAs: ["slList"] }, { kind: "component", type: SlListItem, selector: "li[slListItem]", inputs: ["variant", "size", "marker", "align", "tone", "inset", "truncate", "selected", "current", "disabled", "loading", "position", "setSize"], exportAs: ["slListItem"] }, { kind: "directive", type: SlListItemActions, selector: "[slListItemActions]", exportAs: ["slListItemActions"] }, { kind: "directive", type: SlListItemBody, selector: "[slListItemBody]", exportAs: ["slListItemBody"] }, { kind: "directive", type: SlListItemContent, selector: "[slListItemContent]", exportAs: ["slListItemContent"] }, { kind: "directive", type: SlListItemDescription, selector: "[slListItemDescription]", exportAs: ["slListItemDescription"] }, { kind: "directive", type: SlListItemEnd, selector: "[slListItemEnd]", exportAs: ["slListItemEnd"] }, { kind: "directive", type: SlListItemLabel, selector: "[slListItemLabel]", exportAs: ["slListItemLabel"] }, { kind: "directive", type: SlListItemStart, selector: "[slListItemStart]", exportAs: ["slListItemStart"] }, { kind: "directive", type: SlListSection, selector: "li[slListSection]", exportAs: ["slListSection"] }, { kind: "directive", type: SlListSectionLabel, selector: "[slListSectionLabel]", inputs: ["sticky"], exportAs: ["slListSectionLabel"] }, { kind: "directive", type: SlListSectionList, selector: "ul[slListSectionList], ol[slListSectionList]", exportAs: ["slListSectionList"] }, { kind: "component", type: SlMenu, selector: "sl-menu", inputs: ["value", "aria-label", "aria-describedby", "open", "align", "side", "size", "mount", "strategy", "sideOffset", "alignOffset", "collisionPadding", "submenuOpenDelay", "submenuCloseDelay", "typeaheadTimeout", "disabled", "loop", "typeahead", "openOnHover", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "loading"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slMenu"] }, { kind: "component", type: SlMenuItem, selector: "button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem]", inputs: ["disabled", "textValue", "tone", "shortcut", "closeOnSelect", "value", "checked"], outputs: ["checkedChange", "checkedChangeRequest", "select"], exportAs: ["slMenuItem"] }, { kind: "component", type: SlMenuRadioGroup, selector: "sl-menu-radio-group", inputs: ["value"], outputs: ["valueChange", "valueChangeRequest"], exportAs: ["slMenuRadioGroup"] }, { kind: "directive", type: SlMenuSeparator, selector: "hr[slMenuSeparator]" }, { kind: "directive", type: SlMenuTrigger, selector: "[slMenuTriggerFor]", inputs: ["slMenuTriggerFor"], exportAs: ["slMenuTrigger"] }, { kind: "component", type: SlResultState, selector: "[slResultState]", inputs: ["status", "reach", "align", "live", "illustration"], exportAs: ["slResultState"] }, { kind: "directive", type: SlResultStateActions, selector: "[slResultStateActions]", exportAs: ["slResultStateActions"] }, { kind: "directive", type: SlResultStateContent, selector: "[slResultStateContent]", exportAs: ["slResultStateContent"] }, { kind: "component", type: SlResultStateTitle, selector: "[slResultStateTitle]", exportAs: ["slResultStateTitle"] }, { kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }, { kind: "component", type: SlSkeletonRegion, selector: "[slSkeletonRegion]", inputs: ["loading", "animation", "live", "messages", "loadedLabel", "delay", "minDuration"], outputs: ["reveal"], exportAs: ["slSkeletonRegion"] }, { kind: "component", type: SlVisuallyHidden, selector: "[slVisuallyHidden]", inputs: ["focusable"], exportAs: ["slVisuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDataList, decorators: [{
+            type: Component,
+            args: [{ selector: 'sl-data-list', standalone: true, exportAs: 'slDataList', imports: [
+                        NgTemplateOutlet,
+                        SlButton,
+                        SlButtonEnd,
+                        SlCheckbox,
+                        SlDataListPart,
+                        SlGlyph,
+                        SlIcon,
+                        SlList,
+                        SlListItem,
+                        SlListItemActions,
+                        SlListItemBody,
+                        SlListItemContent,
+                        SlListItemDescription,
+                        SlListItemEnd,
+                        SlListItemLabel,
+                        SlListItemStart,
+                        SlListSection,
+                        SlListSectionLabel,
+                        SlListSectionList,
+                        SlMenu,
+                        SlMenuItem,
+                        SlMenuRadioGroup,
+                        SlMenuSeparator,
+                        SlMenuTrigger,
+                        SlResultState,
+                        SlResultStateActions,
+                        SlResultStateContent,
+                        SlResultStateTitle,
+                        SlSkeleton,
+                        SlSkeletonRegion,
+                        SlVisuallyHidden,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'data-list',
+                        'data-part': 'root',
+                        '[attr.data-variant]': 'variantValue()',
+                        '[attr.data-size]': 'sizeValue()',
+                        '[attr.aria-busy]': "refreshing() ? 'true' : null",
+                        '[attr.data-loading]': "refreshing() ? '' : null",
+                        '(focusin)': 'onFocusIn($event)',
+                    }, template: `
+    <div data-part="header">
+      @if (selectionModeValue() === 'multiple' && !showLoader()) {
+        <span data-part="select-all">
+          <span
+            slCheckbox
+            [checked]="allSelected()"
+            [indeterminate]="someSelected() && !allSelected()"
+            [disabled]="allKeys().length === 0"
+            [size]="sizeValue()"
+            (click)="pressAll($event)"
+            ><span slVisuallyHidden>{{ t('selectAll', { count: allKeys().length }) }}</span></span
+          >
+        </span>
+      }
+      <output data-part="count" aria-live="polite">{{ showLoader() ? '' : countText() }}</output>
+      @if (layout().sortable.length > 0) {
+        <span data-part="sort" [attr.data-direction]="firstKey()?.direction ?? null">
+          <button
+            slButton
+            slDataListPart="root"
+            size="sm"
+            tone="secondary"
+            variant="ghost"
+            [disabled]="showLoader()"
+            [attr.aria-label]="sortName()"
+            [slMenuTriggerFor]="sortMenu"
+          >
+            {{ sortText()
+            }}<span slButtonEnd>
+              @if (firstKey()) {
+                <span slIcon size="sm"><svg slGlyph name="chevron-down"></svg></span>
+              }
+            </span>
+          </button>
+          <sl-menu #sortMenu align="end" [aria-label]="t('sort')">
+            <sl-menu-radio-group
+              [attr.aria-labelledby]="id + '-sort-column'"
+              [value]="firstKey()?.column ?? noSort"
+              (valueChangeRequest)="chooseColumn($event)"
+            >
+              <div data-part="group-label" [id]="id + '-sort-column'">
+                {{ t('sortColumn') }}
+              </div>
+              <button slMenuRadioItem [value]="noSort">{{ t('sortNone') }}</button>
+              @for (column of layout().sortable; track column.id) {
+                <button slMenuRadioItem [value]="column.id">{{ column.label }}</button>
+              }
+            </sl-menu-radio-group>
+            <hr slMenuSeparator />
+            <sl-menu-radio-group
+              [attr.aria-labelledby]="id + '-sort-direction'"
+              [value]="firstKey()?.direction ?? ''"
+              (valueChangeRequest)="chooseDirection($event)"
+            >
+              <div data-part="group-label" [id]="id + '-sort-direction'">
+                {{ t('sortDirection') }}
+              </div>
+              <button slMenuRadioItem value="ascending" [disabled]="!firstKey()">
+                {{ t('ascending') }}
+              </button>
+              <button slMenuRadioItem value="descending" [disabled]="!firstKey()">
+                {{ t('descending') }}
+              </button>
+            </sl-menu-radio-group>
+          </sl-menu>
+        </span>
+      }
+    </div>
+
+    @if (errorOverRows()) {
+      <ng-container
+        [ngTemplateOutlet]="emptyState"
+        [ngTemplateOutletContext]="{ $implicit: 'error' }"
+      />
+    }
+
+    @if (showLoader()) {
+      <div data-part="loader">
+        <div
+          slSkeletonRegion
+          [loading]="firstLoad()"
+          [delay]="loadingDelayValue()"
+          [minDuration]="loadingMinDurationValue()"
+          [messages]="{ label: t('loading') }"
+          (reveal)="holding.set(false)"
+        >
+          <ul slList aria-hidden="true" inert [variant]="variantValue()" [size]="sizeValue()">
+            @for (index of skeletonIndexes(); track index) {
+              <li slListItem align="start" [variant]="variantValue()" [size]="sizeValue()">
+                <div slListItemContent>
+                  <div slListItemBody>
+                    <div slListItemLabel><span slSkeleton [inlineSize]="bar(index)"></span></div>
+                    @if (layout().subtitle) {
+                      <div slListItemDescription>
+                        <span slSkeleton [inlineSize]="bar(index + 2)"></span>
+                      </div>
+                    }
+                  </div>
+                  @if (layout().trailing) {
+                    <div slListItemEnd>
+                      <span slSkeleton [inlineSize]="fieldBar(index + 3)"></span>
+                    </div>
+                  }
+                  @if (layout().shown > 0) {
+                    <dl data-part="fields">
+                      @for (column of shownColumns(); track column.id; let field = $index) {
+                        <div data-part="field">
+                          <dt data-part="field-label">{{ column.label }}</dt>
+                          <dd data-part="field-value">
+                            <span slSkeleton [inlineSize]="fieldBar(index + field)"></span>
+                          </dd>
+                        </div>
+                      }
+                    </dl>
+                  }
+                </div>
+              </li>
+            }
+          </ul>
+        </div>
+      </div>
+    } @else if (emptyStatus(); as status) {
+      <ng-container
+        [ngTemplateOutlet]="emptyState"
+        [ngTemplateOutletContext]="{ $implicit: status }"
+      />
+    } @else {
+      <ul
+        slList
+        [variant]="variantValue()"
+        [size]="sizeValue()"
+        [attr.aria-label]="labelledBy() ? null : listLabel()"
+        [attr.aria-labelledby]="labelledBy() ?? null"
+      >
+        <ng-container
+          [ngTemplateOutlet]="nodesTemplate"
+          [ngTemplateOutletContext]="{ $implicit: nodes() }"
+        />
+      </ul>
+    }
+
+    @if (hasMore() || footers().length > 0) {
+      <div data-part="footer">
+        @if (hasMore() && !showLoader()) {
+          <span data-part="load-more">
+            <button
+              slButton
+              size="sm"
+              tone="secondary"
+              variant="outline"
+              [loading]="loadingValue() && loadingMore()"
+              (click)="askForMore()"
+            >
+              {{ t('loadMore') }}
+            </button>
+          </span>
+        }
+        <ng-content select="[slDataListFooter]" />
+      </div>
+    }
+
+    <ng-template #nodesTemplate let-list>
+      @for (node of list; track node.key) {
+        @if (node.kind === 'row') {
+          <ng-container
+            [ngTemplateOutlet]="recordTemplate"
+            [ngTemplateOutletContext]="{ $implicit: record(node.key, node.row) }"
+          />
+        } @else {
+          <li slListSection>
+            <span slListSectionLabel role="heading" [attr.aria-level]="min(node.level + 2, 6)">{{
+              sectionLabel(node)
+            }}</span>
+            <ul slListSectionList>
+              <ng-container
+                [ngTemplateOutlet]="nodesTemplate"
+                [ngTemplateOutletContext]="{ $implicit: node.children }"
+              />
+            </ul>
+          </li>
+        }
+      }
+    </ng-template>
+
+    <ng-template #recordTemplate let-view>
+      <li
+        slListItem
+        align="start"
+        [attr.data-key]="view.key"
+        [attr.data-expanded]="view.expanded ? '' : null"
+        [variant]="variantValue()"
+        [size]="sizeValue()"
+        [selected]="view.selected"
+        [current]="view.current ? (view.href === undefined ? true : 'page') : false"
+        [disabled]="view.disabled"
+        [loading]="view.busy"
+      >
+        <div slListItemContent>
+          @if (selectionModeValue() !== 'none' || mediaTemplate()) {
+            <div slListItemStart>
+              @if (selectionModeValue() !== 'none') {
+                <span data-part="selection">
+                  <span
+                    slCheckbox
+                    [checked]="view.selected"
+                    [disabled]="view.disabled"
+                    [size]="sizeValue()"
+                    (click)="pressRecord(view.key, $event)"
+                    ><span slVisuallyHidden>{{
+                      t('selectRow', { title: view.titleText })
+                    }}</span></span
+                  >
+                </span>
+              }
+              @if (mediaTemplate(); as media) {
+                <span data-part="media">
+                  <ng-container
+                    [ngTemplateOutlet]="media.template"
+                    [ngTemplateOutletContext]="{ $implicit: view.row }"
+                  />
+                </span>
+              }
+            </div>
+          }
+          <div slListItemBody>
+            <div slListItemLabel>
+              @if (view.href !== undefined) {
+                <a
+                  data-part="title"
+                  [attr.href]="view.href"
+                  [attr.aria-disabled]="view.disabled || view.busy ? 'true' : null"
+                  (click)="activateLink(view, $event)"
+                  ><ng-container
+                    [ngTemplateOutlet]="value"
+                    [ngTemplateOutletContext]="{ $implicit: view.title }"
+                /></a>
+              } @else if (activatable()) {
+                <button
+                  data-part="title"
+                  type="button"
+                  [disabled]="view.disabled || view.busy"
+                  (click)="activate(view, $event)"
+                >
+                  <ng-container
+                    [ngTemplateOutlet]="value"
+                    [ngTemplateOutletContext]="{ $implicit: view.title }"
+                  />
+                </button>
+              } @else {
+                <span data-part="title"
+                  ><ng-container
+                    [ngTemplateOutlet]="value"
+                    [ngTemplateOutletContext]="{ $implicit: view.title }"
+                /></span>
+              }
+            </div>
+            @if (view.subtitle) {
+              <div slListItemDescription>
+                <ng-container
+                  [ngTemplateOutlet]="value"
+                  [ngTemplateOutletContext]="{ $implicit: view.subtitle }"
+                />
+              </div>
+            }
+          </div>
+          @if (view.trailing) {
+            <div slListItemEnd>
+              <span data-part="trailing"
+                ><ng-container
+                  [ngTemplateOutlet]="value"
+                  [ngTemplateOutletContext]="{ $implicit: view.trailing }"
+              /></span>
+            </div>
+          }
+          @if (view.fields.length > 0) {
+            <dl data-part="fields" [id]="view.fieldsId">
+              @for (field of view.fields; track field.column.id) {
+                <div data-part="field">
+                  <dt data-part="field-label">{{ field.column.label }}</dt>
+                  <dd data-part="field-value" [attr.data-numeric]="field.numeric ? '' : null">
+                    <ng-container
+                      [ngTemplateOutlet]="value"
+                      [ngTemplateOutletContext]="{ $implicit: field }"
+                    />
+                  </dd>
+                </div>
+              }
+            </dl>
+          }
+          @if (view.hidden > 0) {
+            <button
+              data-part="more"
+              type="button"
+              [attr.aria-controls]="view.fieldsId"
+              [attr.aria-expanded]="view.expanded"
+              (click)="toggleExpanded(view.key, $event)"
+            >
+              {{ view.expanded ? t('less') : t('more', { count: view.hidden }) }}
+              <span slIcon size="sm"><svg slGlyph name="chevron-down"></svg></span>
+            </button>
+          }
+        </div>
+        @if (view.actions.length > 0) {
+          <div slListItemActions>
+            @for (field of view.actions; track field.column.id) {
+              <ng-container
+                [ngTemplateOutlet]="value"
+                [ngTemplateOutletContext]="{ $implicit: field }"
+              />
+            }
+          </div>
+        }
+      </li>
+    </ng-template>
+
+    <ng-template #value let-field>
+      @if (field) {
+        @if (field.template) {
+          <ng-container
+            [ngTemplateOutlet]="field.template"
+            [ngTemplateOutletContext]="field.context"
+          />
+        } @else if (field.context.text === '' && field.context.place !== 'actions') {
+          <span data-part="field-empty"
+            ><span aria-hidden="true">—</span><span slVisuallyHidden>{{ t('empty') }}</span></span
+          >
+        } @else {
+          {{ field.context.text }}
+        }
+      }
+    </ng-template>
+
+    <ng-template #emptyState let-status>
+      <div data-part="empty">
+        @if (emptyTemplate(); as custom) {
+          <ng-container
+            [ngTemplateOutlet]="custom.template"
+            [ngTemplateOutletContext]="{ $implicit: status }"
+          />
+        } @else {
+          <section slResultState reach="section" tabindex="-1" [status]="status">
+            <div slResultStateContent>
+              <div slResultStateTitle>{{ emptyTitle(status) }}</div>
+            </div>
+            @if (status === 'no-results') {
+              <div slResultStateActions>
+                <button
+                  slButton
+                  size="md"
+                  tone="secondary"
+                  variant="outline"
+                  (click)="clearFilters($event)"
+                >
+                  {{ t('clearFilters') }}
+                </button>
+              </div>
+            } @else if (status === 'error') {
+              <div slResultStateActions>
+                <button
+                  slButton
+                  size="md"
+                  tone="secondary"
+                  variant="outline"
+                  (click)="retry.emit()"
+                >
+                  {{ t('retry') }}
+                </button>
+              </div>
+            }
+          </section>
+        }
+      </div>
+    </ng-template>
+  `, styles: ["@layer slotted.components{[data-ui=data-list][data-part=root]{--_field-min: 9rem;--_field-label-inline: 7.5rem;--_pad-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-border-subtle, ButtonBorder);--_rule-width: var(--slotted-border-width-thin, 1px);--_transition: var(--slotted-duration-short) var(--slotted-easing-standard);color:var(--slotted-text, CanvasText);container:slotted-data-list / inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, sans-serif);min-inline-size:0}[data-ui=data-list][data-size=sm]{--_pad-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=data-list][data-size=lg]{--_pad-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=data-list]>[data-part=header]{align-items:center;box-shadow:0 var(--_rule-width) 0 0 var(--_rule);box-sizing:border-box;column-gap:var(--_gap);display:flex;flex-wrap:wrap;font-size:var(--slotted-control-font-size-sm, 12px);line-height:var(--slotted-line-height-sm, 1.45);min-block-size:var(--slotted-control-height-md, 34px);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_pad-inline);row-gap:var(--slotted-space-1, .125rem)}[data-ui=data-list][data-variant=plain]>[data-part=header]{box-shadow:none}[data-ui=data-list][data-variant=framed]>[data-part=header]{box-shadow:none;padding-inline:calc(var(--_pad-inline) + var(--_rule-width))}[data-ui=data-list] [data-part=select-all]{display:inline-flex;flex:none}[data-ui=data-list] [data-part=count]{color:var(--_muted);flex:1 1 auto;font-variant-numeric:tabular-nums;min-inline-size:0;overflow-wrap:anywhere;text-align:match-parent;unicode-bidi:plaintext}[data-ui=data-list] [data-part=sort]{display:inline-flex;flex:none;margin-inline-start:auto;margin-inline-end:calc(var(--slotted-control-padding-inline-sm, 10px) * -1)}[data-ui=data-list] [data-part=sort] [data-part=end]>[data-ui=icon]{transition:transform var(--_transition)}[data-ui=data-list] [data-part=sort][data-direction=ascending] [data-part=end]>[data-ui=icon]{transform:rotate(180deg)}[data-ui=data-list] [data-ui=list-item]{position:relative}[data-ui=data-list] [data-ui=list-item] :is([data-part=selection],[data-part=more],[data-part=field-value] :is(a,button,input,select,textarea,[tabindex])),[data-ui=data-list] [data-ui=list-item]>[data-part=actions]{position:relative;z-index:1}[data-ui=data-list] [data-part=selection],[data-ui=data-list] [data-part=media]{align-items:center;display:inline-flex;flex:none}[data-ui=data-list] [data-part=selection]+[data-part=media]{margin-inline-start:var(--_gap)}[data-ui=data-list] :is(a,button)[data-part=title]{appearance:none;background:none;border:0;color:inherit;cursor:pointer;font:inherit;margin:0;padding:0;text-align:inherit;text-decoration:none}[data-ui=data-list] :is(a,button)[data-part=title]:after{border-radius:inherit;content:\"\";inset:0;position:absolute}[data-ui=data-list] :is(a,button)[data-part=title]:focus-visible{outline:none}[data-ui=data-list] :is(a,button)[data-part=title]:focus-visible:after{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=data-list] [data-ui=list-item]:not([data-disabled]):not([data-loading]) :is(a[href],button:not(:disabled))[data-part=title]:hover{text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:.2em}[data-ui=data-list] [data-ui=list-item]:not([data-disabled]):not([data-loading]):has([data-part=title]:is(a[href],button:not(:disabled)):hover){--_fill: var(--_hover, ButtonFace)}[data-ui=data-list] [data-ui=list-item]:not([data-disabled]):not([data-loading]):has([data-part=title]:is(a[href],button:not(:disabled)):active){--_fill: var(--_active, ButtonFace)}[data-ui=data-list] [data-ui=list-item]:is([data-disabled],[data-loading]) [data-part=title]{cursor:default}[data-ui=data-list] [data-part=trailing]{color:var(--_text, CanvasText);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);overflow-wrap:anywhere;text-align:end}[data-ui=data-list] [data-ui=list-item]>[data-part=content]>:is([data-part=fields],[data-part=more]){grid-column:2 / -1}@container slotted-list-item (max-inline-size: 22rem){[data-ui=data-list] [data-ui=list-item]>[data-part=content]>:is([data-part=fields],[data-part=more]){grid-column:1 / -1}}[data-ui=data-list] [data-part=fields]{column-gap:var(--slotted-space-4, .5rem);container:slotted-data-list-fields / inline-size;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--_field-min),100%),1fr));margin-block:var(--slotted-space-2, .25rem) 0;margin-inline:0;padding:0;row-gap:var(--slotted-space-2, .25rem)}[data-ui=data-list] [data-part=field]{display:flex;flex-direction:column;margin:0;min-inline-size:0}[data-ui=data-list] [data-part=field-label]{color:var(--_muted, GrayText);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-line-height-xs, 1.4);margin:0;overflow-wrap:break-word}[data-ui=data-list] [data-part=field-value]{color:var(--_text, CanvasText);font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-line-height-md, 1.5);margin:0;min-inline-size:0;overflow-wrap:anywhere;text-align:match-parent;unicode-bidi:plaintext}[data-ui=data-list] [data-part=field-value][data-numeric]{font-variant-numeric:tabular-nums}[data-ui=data-list] [data-part=field-empty]{color:var(--_muted, GrayText)}@container slotted-data-list-fields (min-inline-size: 12rem) and (max-inline-size: 19rem){[data-ui=data-list] [data-part=field]{align-items:baseline;column-gap:var(--slotted-space-3, .375rem);display:grid;grid-template-columns:minmax(0,min(var(--_field-label-inline),35%)) minmax(0,1fr)}}[data-ui=data-list] [data-part=more]{align-items:center;appearance:none;background:none;border:0;border-radius:var(--slotted-radius-sm, 4px);color:var(--slotted-tone-accent-text, LinkText);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--slotted-control-font-size-sm, 12px);font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-space-2, .25rem);justify-self:start;margin-block-start:var(--slotted-space-1, .125rem);min-block-size:var(--slotted-target-min, 24px);padding:0}[data-ui=data-list] [data-part=more]>[data-ui=icon]{transition:transform var(--_transition)}[data-ui=data-list] [data-part=more][aria-expanded=true]>[data-ui=icon]{transform:rotate(180deg)}[data-ui=data-list] [data-part=more]:not(:disabled):hover{text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:.2em}[data-ui=data-list] [data-part=more]: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=data-list] [data-ui=list-item][data-disabled] [data-part=more]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=data-list][aria-busy=true]>[data-ui=list]{opacity:.55;pointer-events:none;transition:opacity var(--_transition)}[data-ui=data-list]>[data-part=empty]{padding-block:var(--slotted-space-8, 1.5rem);padding-inline:var(--_pad-inline)}[data-ui=data-list]>[data-part=loader]{display:block}[data-ui=data-list]>[data-part=loader] [data-part=field-value] [data-ui=skeleton]{vertical-align:middle}[data-ui=data-list]>[data-part=footer]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--_gap);justify-content:center;padding-block:var(--slotted-space-4, .5rem);padding-inline:var(--_pad-inline)}[data-ui=data-list]>[data-part=footer]:empty{display:none}[data-ui=data-list] [data-part=load-more]{display:inline-flex}}\n", "@layer slotted.components{[data-ui=list][data-part=root],[data-ui=list] [data-part=section-list]{counter-reset:slotted-list-item;display:flex;flex-direction:column;list-style:none;margin-block:0;margin-inline:0;min-inline-size:0;padding-inline:0}[data-ui=list][data-part=root]{--_gap: var(--slotted-list-gap, var(--slotted-space-3, .375rem));--_frame-color: var(--slotted-list-border-color, var(--slotted-border-subtle, ButtonBorder));--_frame-width: var(--slotted-list-border-width, var(--slotted-border-width-thin, 1px));--_frame-radius: var(--slotted-list-radius, var(--slotted-radius-md, 6px));--_surface: var(--slotted-list-background, var(--slotted-surface, Canvas));--_section-color: var(--slotted-list-section-color, var(--slotted-text-muted, GrayText));--_section-font-size: var( --slotted-list-section-font-size, var(--slotted-font-size-xs, .75rem) );--_section-weight: var( --slotted-list-section-font-weight, var(--slotted-font-weight-semibold, 600) );--_section-inset-block: var( --slotted-list-section-padding-block, var(--slotted-space-4, .5rem) );--_row-inset-inline: var( --slotted-list-padding-inline, var(--slotted-control-padding-inline-md, 13px) );--_empty-color: var(--slotted-list-empty-color, var(--slotted-text-muted, GrayText));--_empty-inset: var(--slotted-list-empty-padding, var(--slotted-space-8, 1.5rem))}[data-ui=list][data-part=root][data-size=sm]{--_gap: var(--slotted-list-gap-sm, var(--slotted-space-2, .25rem));--_section-inset-block: var( --slotted-list-section-padding-block-sm, var(--slotted-space-3, .375rem) );--_row-inset-inline: var( --slotted-list-padding-inline-sm, var(--slotted-control-padding-inline-sm, 10px) );--_empty-inset: var(--slotted-list-empty-padding-sm, var(--slotted-space-6, 1rem))}[data-ui=list][data-part=root][data-size=lg]{--_gap: var(--slotted-list-gap-lg, var(--slotted-space-4, .5rem));--_section-inset-block: var( --slotted-list-section-padding-block-lg, var(--slotted-space-5, .75rem) );--_row-inset-inline: var( --slotted-list-padding-inline-lg, var(--slotted-control-padding-inline-lg, 16px) );--_empty-inset: var(--slotted-list-empty-padding-lg, var(--slotted-space-9, 2rem))}[data-ui=list][data-part=root][data-variant=framed]{background-color:var(--_surface);border:var(--_frame-width) solid var(--_frame-color);border-radius:var(--_frame-radius);overflow:clip}[data-ui=list][data-part=root][data-variant=separated]{row-gap:var(--_gap)}[data-ui=list] [data-part=section]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=list][data-variant=separated] [data-part=section],[data-ui=list][data-variant=separated] [data-part=section-list]{row-gap:var(--_gap)}[data-ui=list] [data-part=section-label]{color:var(--_section-color);font-size:var(--_section-font-size);font-weight:var(--_section-weight);letter-spacing:var(--slotted-list-section-letter-spacing, 0);line-height:var(--slotted-line-height-sm, 1.45);margin-block:0;min-inline-size:0;padding-block:var(--_section-inset-block);padding-inline:var(--_row-inset-inline)}[data-ui=list][data-inset] [data-part=section-label],[data-ui=list][data-inset] [data-part=empty]{padding-inline:0}[data-ui=list] [data-part=section-label][data-sticky]{background-color:var(--_surface);inset-block-start:0;position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=list] [data-part=empty]{align-items:center;color:var(--_empty-color);display:flex;flex-direction:column;justify-content:center;min-inline-size:0;padding-block:var(--_empty-inset);padding-inline:var(--_row-inset-inline);text-align:center}[data-ui=list][data-part=root][data-loading]{cursor:progress}}\n", "@layer slotted.components{[data-ui=list-item][data-part=root]{--_min-block: var(--slotted-list-item-min-block-size, var(--slotted-control-height-md, 34px));--_font-size: var(--slotted-list-item-font-size, var(--slotted-control-font-size-md, 13px));--_icon-size: var(--slotted-list-item-icon-size, var(--slotted-control-icon-size-md, 16px));--_control-size: var(--slotted-list-item-control-size, var(--slotted-selection-size-md, 16px));--_gap: var(--slotted-list-item-gap, var(--slotted-control-gap-md, 8px));--_pad-inline: var( --slotted-list-item-padding-inline, var(--slotted-control-padding-inline-md, 13px) );--_pad-block: var( --slotted-list-item-padding-block, max( var(--slotted-space-2, .25rem), calc((var(--_min-block) - var(--_font-size) * var(--slotted-line-height-md, 1.5)) / 2) ) );--_radius: var(--slotted-list-item-radius, var(--slotted-radius-md, 6px));--_text: var(--slotted-list-item-color, var(--slotted-text, CanvasText));--_muted: var(--slotted-list-item-color-muted, var(--slotted-text-muted, GrayText));--_subtle-hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_subtle-active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_solid-hover: var(--slotted-tone-secondary-solid-hover, ButtonFace);--_solid-active: var(--slotted-tone-secondary-solid-active, ButtonFace);--_surface: var(--slotted-tone-secondary-surface, Canvas);--_hover: var(--slotted-list-item-background-hover, var(--_subtle-hover));--_active: var(--slotted-list-item-background-active, var(--_subtle-active));--_selected-edge: var(--slotted-tone-accent-border, ButtonBorder);--_selected-surface: var( --slotted-list-item-background-selected, var(--slotted-tone-accent-surface, Canvas) );--_selected-text: var(--slotted-tone-accent-text, CanvasText);--_selected-hover: var(--slotted-tone-accent-subtle-hover, ButtonFace);--_selected-active: var(--slotted-tone-accent-subtle-active, ButtonFace);--_current-surface: var( --slotted-list-item-background-current, var(--slotted-tone-secondary-surface, Canvas) );--_current-edge: var(--slotted-tone-secondary-border, ButtonBorder);--_rule: var(--slotted-list-item-border-color, var(--slotted-border-subtle, ButtonBorder));--_rule-width: var(--slotted-list-item-border-width, var(--slotted-border-width-thin, 1px));--_marker-size: calc(var(--_icon-size) * .75);box-sizing:border-box;--_fill: transparent;--_rule-shadow: 0 0 0 0 transparent;--_edge-shadow: 0 0 0 0 transparent;background-color:var(--_fill);border-radius:var(--_radius);box-shadow:var(--_rule-shadow),var(--_edge-shadow);counter-increment:slotted-list-item;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),box-shadow var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard));container-name:slotted-list-item;container-type:inline-size;display:flex;align-items:stretch;flex-wrap:wrap;list-style:none;min-inline-size:0}[data-ui=list-item][data-size=sm]{--_min-block: var( --slotted-list-item-min-block-size-sm, var(--slotted-control-height-sm, 30px) );--_font-size: var(--slotted-list-item-font-size-sm, var(--slotted-control-font-size-sm, 12px));--_icon-size: var(--slotted-list-item-icon-size-sm, var(--slotted-control-icon-size-sm, 14px));--_control-size: var( --slotted-list-item-control-size-sm, var(--slotted-selection-size-sm, 14px) );--_gap: var(--slotted-list-item-gap-sm, var(--slotted-control-gap-sm, 6px));--_pad-inline: var( --slotted-list-item-padding-inline-sm, var(--slotted-control-padding-inline-sm, 10px) );--_pad-block: var( --slotted-list-item-padding-block-sm, max( var(--slotted-space-2, .25rem), calc((var(--_min-block) - var(--_font-size) * var(--slotted-line-height-md, 1.5)) / 2) ) )}[data-ui=list-item][data-size=lg]{--_min-block: var( --slotted-list-item-min-block-size-lg, var(--slotted-control-height-lg, 38px) );--_font-size: var(--slotted-list-item-font-size-lg, var(--slotted-control-font-size-lg, 14px));--_icon-size: var(--slotted-list-item-icon-size-lg, var(--slotted-control-icon-size-lg, 18px));--_control-size: var( --slotted-list-item-control-size-lg, var(--slotted-selection-size-lg, 18px) );--_gap: var(--slotted-list-item-gap-lg, var(--slotted-control-gap-lg, 8px));--_pad-inline: var( --slotted-list-item-padding-inline-lg, var(--slotted-control-padding-inline-lg, 16px) );--_pad-block: var( --slotted-list-item-padding-block-lg, max( var(--slotted-space-2, .25rem), calc((var(--_min-block) - var(--_font-size) * var(--slotted-line-height-md, 1.5)) / 2) ) )}[data-ui=list-item][data-tone=accent]{--_text: var(--slotted-tone-accent-text, CanvasText);--_subtle-hover: var(--slotted-tone-accent-subtle-hover, ButtonFace);--_subtle-active: var(--slotted-tone-accent-subtle-active, ButtonFace);--_solid-hover: var(--slotted-tone-accent-solid-hover, ButtonFace);--_solid-active: var(--slotted-tone-accent-solid-active, ButtonFace);--_surface: var(--slotted-tone-accent-surface, Canvas);--_selected-edge: var(--slotted-tone-accent-border, ButtonBorder);--_selected-surface: var(--slotted-list-item-background-selected, var(--_surface));--_selected-text: var(--slotted-tone-accent-text, CanvasText);--_selected-hover: var(--_subtle-hover);--_selected-active: var(--_subtle-active)}[data-ui=list-item][data-tone=success]{--_text: var(--slotted-tone-success-text, CanvasText);--_subtle-hover: var(--slotted-tone-success-subtle-hover, ButtonFace);--_subtle-active: var(--slotted-tone-success-subtle-active, ButtonFace);--_solid-hover: var(--slotted-tone-success-solid-hover, ButtonFace);--_solid-active: var(--slotted-tone-success-solid-active, ButtonFace);--_surface: var(--slotted-tone-success-surface, Canvas);--_selected-edge: var(--slotted-tone-success-border, ButtonBorder);--_selected-surface: var(--slotted-list-item-background-selected, var(--_surface));--_selected-text: var(--slotted-tone-success-text, CanvasText);--_selected-hover: var(--_subtle-hover);--_selected-active: var(--_subtle-active)}[data-ui=list-item][data-tone=warning]{--_text: var(--slotted-tone-warning-text, CanvasText);--_subtle-hover: var(--slotted-tone-warning-subtle-hover, ButtonFace);--_subtle-active: var(--slotted-tone-warning-subtle-active, ButtonFace);--_solid-hover: var(--slotted-tone-warning-solid-hover, ButtonFace);--_solid-active: var(--slotted-tone-warning-solid-active, ButtonFace);--_surface: var(--slotted-tone-warning-surface, Canvas);--_selected-edge: var(--slotted-tone-warning-border, ButtonBorder);--_selected-surface: var(--slotted-list-item-background-selected, var(--_surface));--_selected-text: var(--slotted-tone-warning-text, CanvasText);--_selected-hover: var(--_subtle-hover);--_selected-active: var(--_subtle-active)}[data-ui=list-item][data-tone=danger]{--_text: var(--slotted-tone-danger-text, CanvasText);--_subtle-hover: var(--slotted-tone-danger-subtle-hover, ButtonFace);--_subtle-active: var(--slotted-tone-danger-subtle-active, ButtonFace);--_solid-hover: var(--slotted-tone-danger-solid-hover, ButtonFace);--_solid-active: var(--slotted-tone-danger-solid-active, ButtonFace);--_surface: var(--slotted-tone-danger-surface, Canvas);--_selected-edge: var(--slotted-tone-danger-border, ButtonBorder);--_selected-surface: var(--slotted-list-item-background-selected, var(--_surface));--_selected-text: var(--slotted-tone-danger-text, CanvasText);--_selected-hover: var(--_subtle-hover);--_selected-active: var(--_subtle-active)}[data-ui=list-item][data-marker=bullet]>[data-part=marker],[data-ui=list-item][data-marker=number]:before{align-items:start;block-size:calc(var(--_pad-block) * 2 + var(--_font-size) * var(--slotted-line-height-md, 1.5));box-sizing:border-box;color:var(--_text);display:flex;flex:none;font-size:var(--_font-size);font-variant-numeric:tabular-nums;inline-size:var(--_icon-size);line-height:var(--slotted-line-height-md, 1.5);margin-inline-end:var(--_gap);margin-inline-start:var(--_pad-inline);padding-block-start:var(--_pad-block)}[data-ui=list-item][data-marker=bullet]>[data-part=marker]{--slotted-icon-size: var(--_marker-size);justify-content:center}[data-ui=list-item][data-marker=bullet]>[data-part=marker]>[data-ui=icon]{margin-block-start:calc(var(--_font-size) * var(--slotted-line-height-md, 1.5) * .5 - var(--_marker-size) * .5)}[data-ui=list-item][data-marker=number]:before{content:counter(slotted-list-item) \".\";justify-content:end}[data-ui=list-item]:is([data-marker=bullet],[data-marker=number])>[data-part=content]{padding-inline-start:0}[data-ui=list-item][data-inset][data-marker=bullet]>[data-part=marker],[data-ui=list-item][data-inset][data-marker=number]:before{margin-inline-start:0}[data-ui=list-item]>[data-part=content]{appearance:none;background-color:transparent;border:none;border-radius:inherit;box-sizing:border-box;color:var(--_text);display:grid;flex:1 1 0%;font:inherit;font-size:var(--_font-size);grid-template-areas:\"start body end\";grid-template-columns:auto minmax(0,1fr) auto;align-items:center;min-block-size:var(--_min-block);min-inline-size:0;padding-block:var(--_pad-block);padding-inline:var(--_pad-inline);text-align:start;text-decoration:none;transition:color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=list-item]:is([data-variant=ruled],[data-variant=framed]){border-radius:0}[data-ui=list-item]:not([data-disabled])>:is(a,button)[data-part=content]:not(:disabled){cursor:pointer}[data-ui=list-item][data-inset]>[data-part=content]{padding-inline:0}[data-ui=list-item][data-align=start]>[data-part=content]{align-items:start}[data-ui=list-item]>[data-part=content]>[data-part=start]{align-items:center;color:var(--_text);display:flex;flex:none;grid-area:start;margin-inline-end:var(--_gap);min-inline-size:var(--_icon-size)}[data-ui=list-item]>[data-part=content]>[data-part=start]:has(>[data-ui=checkbox]){align-items:start;inline-size:var(--_control-size);min-block-size:calc(var(--_font-size) * var(--slotted-line-height-md, 1.5))}[data-ui=list-item][data-align=start]>[data-part=content]>[data-part=start]{min-block-size:calc(var(--_font-size) * var(--slotted-line-height-md, 1.5))}[data-ui=list-item]>[data-part=content]>[data-part=body]{display:flex;flex-direction:column;grid-area:body;min-inline-size:0;row-gap:var(--slotted-list-item-body-gap, var(--slotted-space-1, .125rem))}[data-ui=list-item]>[data-part=content]>[data-part=body]>[data-part=label]{color:inherit;font-size:var(--_font-size);font-weight:var(--slotted-list-item-font-weight, var(--slotted-font-weight-regular, 400));line-height:var(--slotted-line-height-md, 1.5);margin-block:0;min-inline-size:0;overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=list-item]>[data-part=content]>[data-part=body]>[data-part=description]{color:var(--_muted);font-size:var(--slotted-list-item-description-font-size, var(--slotted-font-size-xs, .75rem));line-height:var(--slotted-line-height-sm, 1.45);margin-block:0;min-inline-size:0;overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=list-item][data-truncate]>[data-part=content]>[data-part=body]>:is([data-part=label],[data-part=description]){overflow:hidden;overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap}[data-ui=list-item]>[data-part=content]>[data-part=end]{align-items:center;color:var(--_muted);display:flex;flex:none;gap:var(--_gap);grid-area:end;margin-inline-start:var(--_gap)}[data-ui=list-item]>[data-part=actions]{align-items:center;box-sizing:border-box;display:flex;flex:none;gap:var(--_gap);padding-inline-end:var(--_pad-inline);position:relative}[data-ui=list-item][data-inset]>[data-part=actions]{padding-inline-end:0}[data-ui=list-item][data-align=start]>[data-part=actions]{align-items:start;padding-block-start:var(--_pad-block)}[data-ui=list-item]:is([data-variant=ruled],[data-variant=framed]):not(:first-child){--_rule-shadow: 0 calc(var(--_rule-width) * -1) 0 0 var(--_rule)}[data-ui=list-item][data-variant=separated]{--_fill: var(--slotted-list-item-background, var(--slotted-surface-raised, Canvas));border:var(--_rule-width) solid var(--_rule)}[data-ui=list-item][data-variant=separated]{overflow:clip}[data-ui=list-item]:not([data-disabled]):not([data-loading]):has(>:is(a,button)[data-part=content]:not(:disabled):hover){--_fill: var(--_hover)}[data-ui=list-item]:not([data-disabled]):not([data-loading]):has(>:is(a,button)[data-part=content]:not(:disabled):active){--_fill: var(--_active)}[data-ui=list-item]>[data-part=content]: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=list-item][data-current]{--_fill: var(--_current-surface);--_edge-shadow: inset 0 0 0 var(--_rule-width) var(--_current-edge)}[data-ui=list-item][data-selected]{--_hover: var(--_selected-hover);--_active: var(--_selected-active)}[data-ui=list-item][data-selected]{--_fill: var(--_selected-surface);--_edge-shadow: inset 0 0 0 var(--_rule-width) var(--_selected-edge)}[data-ui=list-item]:is([data-selected],[data-current]):not(:first-child),[data-ui=list-item]:is([data-selected],[data-current])+[data-ui=list-item]{--_rule-shadow: 0 0 0 0 transparent}[data-ui=list-item][data-selected]+[data-ui=list-item][data-selected]{--_edge-shadow: inset 0 calc(var(--_rule-width) * -1) 0 0 var(--_selected-edge), inset var(--_rule-width) 0 0 0 var(--_selected-edge), inset calc(var(--_rule-width) * -1) 0 0 0 var(--_selected-edge)}[data-ui=list-item][data-selected]>[data-part=content]{color:var(--_selected-text);font-weight:var( --slotted-list-item-font-weight-selected, var(--slotted-font-weight-medium, 500) )}[data-ui=list-item][data-current]>[data-part=content]{font-weight:var( --slotted-list-item-font-weight-current, var(--slotted-font-weight-medium, 500) )}[data-ui=list-item][data-loading]{--_text: var(--_muted)}[data-ui=list-item][data-loading]>[data-part=content]{cursor:progress}[data-ui=list-item][data-disabled]{--_disabled-ink: var( --slotted-list-item-color-disabled, var(--slotted-disabled-foreground, GrayText) );--_text: var(--_disabled-ink);--_muted: var(--_disabled-ink)}[data-ui=list-item][data-disabled]>[data-part=content]{cursor:default}[data-ui=list-item][data-disabled][data-variant=separated]{--_fill: var(--slotted-surface-sunken, Canvas);border-color:var(--slotted-disabled-border, GrayText)}@container slotted-list-item (max-inline-size: 22rem){[data-ui=list-item]>[data-part=content]{grid-template-areas:\"start body\" \"start end\";grid-template-columns:auto minmax(0,1fr)}[data-ui=list-item]>[data-part=content]>[data-part=end]{justify-content:start;margin-block-start:var(--slotted-list-item-body-gap, var(--slotted-space-1, .125rem));margin-inline-start:0}[data-ui=list-item]>[data-part=content]>[data-part=start]{align-self:start;min-block-size:calc(var(--_font-size) * var(--slotted-line-height-md, 1.5))}[data-ui=list-item]>[data-part=actions]{flex-basis:100%;justify-content:flex-end;padding-block-end:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=list-item][data-inset]>[data-part=actions]{padding-inline:0}[data-ui=list-item]>[data-part=actions]:not(:has(>:not([data-shape]))){flex-basis:auto;padding-block-end:0;padding-inline:0 var(--_pad-inline)}[data-ui=list-item][data-inset]>[data-part=actions]:not(:has(>:not([data-shape]))){padding-inline-end:0}}@media(forced-colors:active){[data-ui=list-item][data-selected]{background-color:Highlight}[data-ui=list-item][data-selected]>[data-part=content]{color:HighlightText}[data-ui=list-item][data-current]:not([data-selected]){outline:var(--slotted-border-width-thin, 1px) solid Highlight;outline-offset:calc(-1 * var(--slotted-border-width-thin, 1px))}}}\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"] }]
+        }], ctorParameters: () => [], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], trailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailing", required: false }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledBy", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], disabledKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledKeys", required: false }] }], loadingKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingKeys", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], activatable: [{ type: i0.Input, args: [{ isSignal: true, alias: "activatable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], loadingDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingDelay", required: false }] }], loadingMinDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMinDuration", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], 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"] }], queryChangeRequest: [{ type: i0.Output, args: ["queryChangeRequest"] }], valueChangeRequest: [{ type: i0.Output, args: ["valueChangeRequest"] }], expandedChangeRequest: [{ type: i0.Output, args: ["expandedChangeRequest"] }], activate$: [{ type: i0.Output, args: ["activate"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], retry: [{ type: i0.Output, args: ["retry"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SlDataListCellTemplate), { isSignal: true }] }], mediaTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SlDataListMediaTemplate), { isSignal: true }] }], emptyTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SlDataListEmptyTemplate), { isSignal: true }] }], footers: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SlDataListFooter), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATA_LIST_DEFAULTS, SlDataList, SlDataListCellTemplate, SlDataListEmptyTemplate, SlDataListFooter, SlDataListMediaTemplate, SlDataListPart, injectDataListDefaults, provideDataListDefaults };
+//# sourceMappingURL=slotted-angular-data-list.mjs.map