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

package/fesm2022/slotted-angular-dashboard-grid.mjs

@@ -0,0 +1,1928 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, numberAttribute, booleanAttribute, Directive, input, ElementRef, afterNextRender, output, viewChild, contentChild, signal, effect, untracked, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component, model, contentChildren, computed, afterEveryRender } from '@angular/core';
+import { SlButton, SlButtonStart, SlIconButton } from '@slotted/angular/button';
+import { SlCard, SlCardActions, SlCardBody, SlCardFooter, SlCardHeader } from '@slotted/angular/card';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlMenu, SlMenuItem, SlMenuSeparator, SlMenuTrigger } from '@slotted/angular/menu';
+import { SlResultState, SlResultStateActions, SlResultStateContent, SlResultStateDescription, SlResultStateTitle } from '@slotted/angular/result-state';
+import { injectSkeletonDefaults, SlSkeleton } from '@slotted/angular/skeleton';
+import { sizeClassOf, handleShortcuts, resolveColumns, resolveTiles, materializeLayout, layoutsEqual, moveTileBy, resizeTileBy, tileStyle, measureTiles, setTileHidden, dashboardKeyIntent, spanFromTravel, resizeTileInClass, swapTiles, moveTile, cellAt, parseDuration, playFlip, playResize, parseDashboardLayout, serializeDashboardLayout } from '@slotted/core/dashboard-grid';
+import { createDragController } from '@slotted/core/drag';
+import { dashboardGridMessages, dragMessages } from '@slotted/core/i18n';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+import { initialLoadingVisibility, nextLoadingVisibility } from '@slotted/core/loading';
+
+const FALLBACK = {
+    columns: 12,
+    editBar: true,
+    headingLevel: 3,
+};
+const DASHBOARD_GRID_DEFAULTS = new InjectionToken('slotted dashboard-grid defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once how many columns its dashboards have, whether
+ * the family draws the edit bar and the level of a widget's title. A grid that
+ * states any of it itself still wins. Its words come from the language in force
+ * (`provideSlotted`).
+ */
+function provideDashboardGridDefaults(defaults) {
+    return {
+        provide: DASHBOARD_GRID_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+function injectDashboardGridDefaults() {
+    return inject(DASHBOARD_GRID_DEFAULTS);
+}
+class SlDashboardGridIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-dashboard-grid-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardGridIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardGridIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardGridIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const optionalNumber = (given) => given === undefined ? undefined : numberAttribute(given);
+const optionalBoolean = (given) => given === undefined ? undefined : booleanAttribute(given);
+/** Controls in the header's corner, before the detail action: `<button slDashboardWidgetActions>`. */
+class SlDashboardWidgetActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardWidgetActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDashboardWidgetActions, isStandalone: true, selector: "[slDashboardWidgetActions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardWidgetActions, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slDashboardWidgetActions]', standalone: true }]
+        }] });
+/** The skeleton of the body's own anatomy, shown while the widget loads. */
+class SlDashboardWidgetSkeleton {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardWidgetSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDashboardWidgetSkeleton, isStandalone: true, selector: "[slDashboardWidgetSkeleton]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardWidgetSkeleton, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slDashboardWidgetSkeleton]', standalone: true }]
+        }] });
+/** The action under the empty message: the one that creates the first entry. */
+class SlDashboardWidgetEmptyAction {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardWidgetEmptyAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDashboardWidgetEmptyAction, isStandalone: true, selector: "[slDashboardWidgetEmptyAction]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardWidgetEmptyAction, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slDashboardWidgetEmptyAction]', standalone: true }]
+        }] });
+/** Content under the body. */
+class SlDashboardWidgetFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardWidgetFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDashboardWidgetFooter, isStandalone: true, selector: "[slDashboardWidgetFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardWidgetFooter, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slDashboardWidgetFooter]', standalone: true }]
+        }] });
+/**
+ * Writes this family's part name on a control of another family. `slButton`
+ * and `slIconButton` write `data-part="root"` as a static host attribute, and
+ * `slMenuTriggerFor` binds the attribute to `null` on a lone trigger; both
+ * erase the part the template wrote, so it is written back after the first
+ * render. The erasing expressions are constants, so nothing writes over it
+ * again.
+ */
+class SlDashboardPart {
+    part = input.required({ ...(ngDevMode ? { debugName: "part" } : /* istanbul ignore next */ {}), alias: 'slDashboardPart' });
+    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: SlDashboardPart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlDashboardPart, isStandalone: true, selector: "[slDashboardPart]", inputs: { part: { classPropertyName: "part", publicName: "slDashboardPart", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardPart, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slDashboardPart]', standalone: true }]
+        }], ctorParameters: () => [], propDecorators: { part: [{ type: i0.Input, args: [{ isSignal: true, alias: "slDashboardPart", required: true }] }] } });
+/**
+ * One widget, declared. It draws nothing where it is written: its content is
+ * kept in templates the grid renders inside its own `li` and card, in the
+ * order the layout says — the way `mat-tab` hands its content to the tab
+ * group. `value` is the widget's key in the layout.
+ */
+class SlDashboardWidget {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The widget's name: its heading, its accessible name and its entry in Add widget. */
+    title = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    headingLevel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
+    defaultColumns = input(undefined, { ...(ngDevMode ? { debugName: "defaultColumns" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    defaultRows = input(undefined, { ...(ngDevMode ? { debugName: "defaultRows" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    minColumns = input(undefined, { ...(ngDevMode ? { debugName: "minColumns" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    maxColumns = input(undefined, { ...(ngDevMode ? { debugName: "maxColumns" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    minRows = input(undefined, { ...(ngDevMode ? { debugName: "minRows" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    maxRows = input(undefined, { ...(ngDevMode ? { debugName: "maxRows" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    movable = input(undefined, { ...(ngDevMode ? { debugName: "movable" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    resizable = input(undefined, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    removable = input(undefined, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** The first answer has not arrived: the body shows a skeleton. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A refresh of data already shown: the content stays and the region is busy. */
+    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    status = input('ready', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    emptyTitle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []));
+    emptyDescription = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyDescription" }] : /* istanbul ignore next */ []));
+    errorTitle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorTitle" }] : /* istanbul ignore next */ []));
+    errorDescription = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorDescription" }] : /* istanbul ignore next */ []));
+    /** Draws Try again under the error message; `retry` fires when it is pressed. */
+    retryable = input(false, { ...(ngDevMode ? { debugName: "retryable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The widget's own page. */
+    detailHref = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "detailHref" }] : /* istanbul ignore next */ []));
+    /** Draws the detail action as a button; `detail` fires when it is pressed. */
+    detailable = input(false, { ...(ngDevMode ? { debugName: "detailable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    fill = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    retry = output();
+    detail = output();
+    bodyTemplate = viewChild.required('body', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyTemplate" }] : /* istanbul ignore next */ []));
+    actionsTemplate = viewChild.required('actions', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsTemplate" }] : /* istanbul ignore next */ []));
+    skeletonTemplate = viewChild.required('skeleton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonTemplate" }] : /* istanbul ignore next */ []));
+    emptyActionTemplate = viewChild.required('emptyAction', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyActionTemplate" }] : /* istanbul ignore next */ []));
+    footerTemplate = viewChild.required('footer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+    hasActions = contentChild(SlDashboardWidgetActions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
+    hasSkeleton = contentChild(SlDashboardWidgetSkeleton, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSkeleton" }] : /* istanbul ignore next */ []));
+    hasEmptyAction = contentChild(SlDashboardWidgetEmptyAction, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasEmptyAction" }] : /* istanbul ignore next */ []));
+    hasFooter = contentChild(SlDashboardWidgetFooter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+    /** Whether the skeleton is on screen: `loading` held back by the skeleton family's timing. */
+    painted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "painted" }] : /* istanbul ignore next */ []));
+    skeletonDefaults = injectSkeletonDefaults();
+    visibility = initialLoadingVisibility;
+    timer;
+    constructor() {
+        effect(() => {
+            const loading = this.loading();
+            untracked(() => this.tick(loading));
+        });
+        inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));
+    }
+    /** What the grid's layout arithmetic reads. */
+    spec() {
+        const given = {
+            defaultColumns: this.defaultColumns(),
+            defaultRows: this.defaultRows(),
+            minColumns: this.minColumns(),
+            maxColumns: this.maxColumns(),
+            minRows: this.minRows(),
+            maxRows: this.maxRows(),
+            movable: this.movable(),
+            resizable: this.resizable(),
+            removable: this.removable(),
+        };
+        return {
+            key: this.value(),
+            ...Object.fromEntries(Object.entries(given).filter(([, value]) => value !== undefined)),
+        };
+    }
+    tick(loading) {
+        const answer = nextLoadingVisibility({
+            delay: this.skeletonDefaults.delay ?? 0,
+            loading,
+            minDuration: this.skeletonDefaults.minDuration ?? 0,
+            now: Date.now(),
+            state: this.visibility,
+        });
+        this.visibility = answer.state;
+        this.painted.set(answer.state.visible);
+        clearTimeout(this.timer);
+        if (answer.wait !== null) {
+            this.timer = setTimeout(() => this.tick(this.loading()), answer.wait);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SlDashboardWidget, isStandalone: true, selector: "sl-dashboard-widget", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, defaultColumns: { classPropertyName: "defaultColumns", publicName: "defaultColumns", isSignal: true, isRequired: false, transformFunction: null }, defaultRows: { classPropertyName: "defaultRows", publicName: "defaultRows", isSignal: true, isRequired: false, transformFunction: null }, minColumns: { classPropertyName: "minColumns", publicName: "minColumns", isSignal: true, isRequired: false, transformFunction: null }, maxColumns: { classPropertyName: "maxColumns", publicName: "maxColumns", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, errorTitle: { classPropertyName: "errorTitle", publicName: "errorTitle", isSignal: true, isRequired: false, transformFunction: null }, errorDescription: { classPropertyName: "errorDescription", publicName: "errorDescription", isSignal: true, isRequired: false, transformFunction: null }, retryable: { classPropertyName: "retryable", publicName: "retryable", isSignal: true, isRequired: false, transformFunction: null }, detailHref: { classPropertyName: "detailHref", publicName: "detailHref", isSignal: true, isRequired: false, transformFunction: null }, detailable: { classPropertyName: "detailable", publicName: "detailable", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry", detail: "detail" }, host: { styleAttribute: "display: none" }, queries: [{ propertyName: "hasActions", first: true, predicate: SlDashboardWidgetActions, descendants: true, isSignal: true }, { propertyName: "hasSkeleton", first: true, predicate: SlDashboardWidgetSkeleton, descendants: true, isSignal: true }, { propertyName: "hasEmptyAction", first: true, predicate: SlDashboardWidgetEmptyAction, descendants: true, isSignal: true }, { propertyName: "hasFooter", first: true, predicate: SlDashboardWidgetFooter, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actions"], descendants: true, isSignal: true }, { propertyName: "skeletonTemplate", first: true, predicate: ["skeleton"], descendants: true, isSignal: true }, { propertyName: "emptyActionTemplate", first: true, predicate: ["emptyAction"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, isSignal: true }], exportAs: ["slDashboardWidget"], ngImport: i0, template: `
+    <ng-template #body><ng-content /></ng-template>
+    <ng-template #actions><ng-content select="[slDashboardWidgetActions]" /></ng-template>
+    <ng-template #skeleton><ng-content select="[slDashboardWidgetSkeleton]" /></ng-template>
+    <ng-template #emptyAction><ng-content select="[slDashboardWidgetEmptyAction]" /></ng-template>
+    <ng-template #footer><ng-content select="[slDashboardWidgetFooter]" /></ng-template>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardWidget, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sl-dashboard-widget',
+                    standalone: true,
+                    exportAs: 'slDashboardWidget',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { style: 'display: none' },
+                    template: `
+    <ng-template #body><ng-content /></ng-template>
+    <ng-template #actions><ng-content select="[slDashboardWidgetActions]" /></ng-template>
+    <ng-template #skeleton><ng-content select="[slDashboardWidgetSkeleton]" /></ng-template>
+    <ng-template #emptyAction><ng-content select="[slDashboardWidgetEmptyAction]" /></ng-template>
+    <ng-template #footer><ng-content select="[slDashboardWidgetFooter]" /></ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], defaultColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultColumns", required: false }] }], defaultRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultRows", required: false }] }], minColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumns", required: false }] }], maxColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxColumns", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], movable: [{ type: i0.Input, args: [{ isSignal: true, alias: "movable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], errorTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTitle", required: false }] }], errorDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDescription", required: false }] }], retryable: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryable", required: false }] }], detailHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailHref", required: false }] }], detailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailable", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], retry: [{ type: i0.Output, args: ["retry"] }], detail: [{ type: i0.Output, args: ["detail"] }], bodyTemplate: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }], actionsTemplate: [{ type: i0.ViewChild, args: ['actions', { isSignal: true }] }], skeletonTemplate: [{ type: i0.ViewChild, args: ['skeleton', { isSignal: true }] }], emptyActionTemplate: [{ type: i0.ViewChild, args: ['emptyAction', { isSignal: true }] }], footerTemplate: [{ type: i0.ViewChild, args: ['footer', { isSignal: true }] }], hasActions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlDashboardWidgetActions), { isSignal: true }] }], hasSkeleton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlDashboardWidgetSkeleton), { isSignal: true }] }], hasEmptyAction: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlDashboardWidgetEmptyAction), { isSignal: true }] }], hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlDashboardWidgetFooter), { isSignal: true }] }] } });
+
+const EMPTY_LAYOUT = [];
+const GRID = 'dashboard-grid';
+const ADD = `${GRID}:add`;
+const PLACEHOLDER = '\u0000placeholder';
+const EDGES = ['start', 'end', 'bottom', 'bottom-start', 'bottom-end'];
+/** A click with no coordinates is a key. */
+function pressReason(event) {
+    return event.detail === 0 ? 'keyboard' : 'pointer';
+}
+function directionOf(element) {
+    return getComputedStyle(element).direction === 'rtl' ? 'rtl' : 'ltr';
+}
+/** A grid not laid out yet — hidden, or in a test — is drawn in its stored class. */
+function classOf(root) {
+    return root.clientWidth > 0 ? sizeClassOf(root.clientWidth) : 'expanded';
+}
+function makeRequest(value, previous, reason, source, extra) {
+    let cancelled = false;
+    return {
+        value,
+        previous,
+        reason,
+        source,
+        ...extra,
+        get cancelled() {
+            return cancelled;
+        },
+        cancel() {
+            cancelled = true;
+        },
+    };
+}
+function tracksOf(list, columns) {
+    const styles = getComputedStyle(list);
+    const columnGap = parseFloat(styles.columnGap) || 0;
+    const rowGap = parseFloat(styles.rowGap) || 0;
+    const track = (list.clientWidth - columnGap * (columns - 1)) / Math.max(1, columns);
+    return { columns, track, columnGap, row: parseFloat(styles.gridAutoRows) || 0, rowGap };
+}
+function originOf(element, list, rtl) {
+    const box = element.getBoundingClientRect();
+    const frame = list.getBoundingClientRect();
+    return {
+        inlineStart: rtl ? frame.right - box.right : box.left - frame.left,
+        blockStart: box.top - frame.top,
+        inlineSize: box.width,
+        blockSize: box.height,
+    };
+}
+function writeOrigin(element, origin) {
+    element.style.setProperty('--_dg-origin-inline-start', `${origin.inlineStart}px`);
+    element.style.setProperty('--_dg-origin-block-start', `${origin.blockStart}px`);
+    element.style.setProperty('--_dg-origin-inline-size', `${origin.inlineSize}px`);
+    element.style.setProperty('--_dg-origin-block-size', `${origin.blockSize}px`);
+}
+function clearLift(element) {
+    if (element === undefined)
+        return;
+    for (const name of [
+        '--_dg-origin-inline-start',
+        '--_dg-origin-block-start',
+        '--_dg-origin-inline-size',
+        '--_dg-origin-block-size',
+        '--_dg-lift-x',
+        '--_dg-lift-y',
+    ]) {
+        element.style.removeProperty(name);
+    }
+}
+function boxOf(element) {
+    const { left, top, width, height } = element.getBoundingClientRect();
+    return { left, top, width, height };
+}
+/**
+ * A surface of widgets the reader places and sizes. The widgets are
+ * `sl-dashboard-widget` children, each with its own `value`; the grid draws
+ * them where the layout puts them, by row and then column, which is the
+ * reading order, the focus order and the picture at every width.
+ *
+ * The host is the root. `aria-label` and `aria-labelledby` written on it name
+ * the list inside, which is what a reader meets.
+ */
+class SlDashboardGrid {
+    /**
+     * Where each widget stands and how big it is: `[{ key, x, y, w, h, hidden? }]`
+     * in cells of the expanded class. Bound at all, it is the value; unbound,
+     * the grid keeps its own.
+     */
+    layout = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** The layout an unbound grid starts from. Default: every widget at its defaults. */
+    defaultLayout = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultLayout" }] : /* istanbul ignore next */ []));
+    editing = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+    defaultEditing = input(false, { ...(ngDevMode ? { debugName: "defaultEditing" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Columns of the expanded class, or one count per class. Default 12, 6, 1. */
+    columns = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    editBar = input(undefined, { ...(ngDevMode ? { debugName: "editBar" } : /* istanbul ignore next */ {}), transform: (given) => (given === undefined ? undefined : booleanAttribute(given)) });
+    headingLevel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* 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 */ []));
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledBy = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    layoutChangeRequest = output();
+    editingChangeRequest = output();
+    /* ── State ────────────────────────────────────────────────────────── */
+    defaults = injectDashboardGridDefaults();
+    base = inject(SlDashboardGridIdFactory).next();
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    list = viewChild('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+    widgets = contentChildren(SlDashboardWidget, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgets" }] : /* istanbul ignore next */ []));
+    statusId = `${this.base}-edit-status`;
+    edges = EDGES;
+    pressReason = pressReason;
+    shortcuts = handleShortcuts;
+    /** The family's words in the language in force, with this grid's `messages` laid over them. */
+    t = injectMessages(dashboardGridMessages, this.messages);
+    /** What a drag of a widget says when no position is left, in the language in force. */
+    dragT = injectMessages(dragMessages);
+    grid = computed(() => resolveColumns(this.columns() ?? this.defaults.columns), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+    resolvedEditBar = computed(() => this.editBar() ?? this.defaults.editBar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedEditBar" }] : /* istanbul ignore next */ []));
+    currentLayout = computed(() => this.layout() ?? this.defaultLayout() ?? EMPTY_LAYOUT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentLayout" }] : /* istanbul ignore next */ []));
+    isEditing = computed(() => this.editing() ?? this.defaultEditing(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
+    specs = computed(() => this.widgets().map((widget) => widget.spec()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "specs" }] : /* istanbul ignore next */ []));
+    byKey = computed(() => new Map(this.widgets().map((widget) => [widget.value(), widget])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "byKey" }] : /* istanbul ignore next */ []));
+    tiles = computed(() => resolveTiles(this.currentLayout(), this.specs(), this.grid()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tiles" }] : /* istanbul ignore next */ []));
+    visible = computed(() => this.tiles().filter((tile) => !tile.hidden), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    hiddenTiles = computed(() => this.tiles().filter((tile) => tile.hidden), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenTiles" }] : /* istanbul ignore next */ []));
+    gesture = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gesture" }] : /* istanbul ignore next */ []));
+    /* The class the grid is drawn in, observed after the first render, so a
+       server render and the first client render agree on `expanded`. */
+    drawnClass = signal('expanded', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawnClass" }] : /* istanbul ignore next */ []));
+    flows = computed(() => this.drawnClass() !== 'expanded', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flows" }] : /* istanbul ignore next */ []));
+    /** What is drawn: the committed layout, or the one a gesture previews. */
+    drawn = computed(() => {
+        const gesture = this.gesture();
+        return gesture === null
+            ? this.tiles()
+            : resolveTiles(gesture.preview, this.specs(), this.grid());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawn" }] : /* istanbul ignore next */ []));
+    drawnVisible = computed(() => this.drawn().filter((tile) => !tile.hidden), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawnVisible" }] : /* istanbul ignore next */ []));
+    slots = computed(() => {
+        const gesture = this.gesture();
+        const drawn = this.drawn();
+        const order = new Map(this.drawnVisible().map((tile, index) => [tile.key, index]));
+        const widgets = this.byKey();
+        const editing = this.isEditing();
+        const drawnClass = this.drawnClass();
+        const layout = this.currentLayout();
+        const specs = this.specs();
+        const grid = this.grid();
+        const committed = materializeLayout(layout, specs, grid);
+        const differs = (next) => !layoutsEqual(materializeLayout(next, specs, grid), committed);
+        const slots = [];
+        for (const tile of this.visible()) {
+            const widget = widgets.get(tile.key);
+            if (widget === undefined)
+                continue;
+            const shown = drawn.find((each) => each.key === tile.key) ?? tile;
+            const inHand = gesture !== null && gesture.key === tile.key;
+            const resizing = inHand && gesture.kind === 'resize';
+            const sizable = tile.resizable && drawnClass !== 'compact';
+            const at = (direction) => editing && differs(moveTileBy(layout, specs, grid, tile.key, direction, drawnClass));
+            const by = (columns, rows) => editing &&
+                differs(resizeTileBy(layout, specs, grid, tile.key, { columns, rows }, drawnClass));
+            const style = tileStyle(shown);
+            if (gesture !== null)
+                style['order'] = String(order.get(tile.key) ?? 0);
+            slots.push({
+                widget,
+                tile: shown,
+                style,
+                dragging: inHand && gesture.kind === 'move',
+                resizing,
+                edge: resizing ? gesture.edge : null,
+                readout: resizing
+                    ? this.t('size', {
+                        columns: gesture.sizeClass === 'medium' ? shown.medium : shown.w,
+                        rows: shown.h,
+                    })
+                    : null,
+                sizable,
+                handle: editing && (tile.movable || sizable || tile.removable),
+                can: {
+                    up: at('up'),
+                    down: at('down'),
+                    left: at('left'),
+                    right: at('right'),
+                    wider: by(1, 0),
+                    narrower: by(-1, 0),
+                    taller: by(0, 1),
+                    shorter: by(0, -1),
+                },
+            });
+        }
+        return slots;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
+    /** The cells the widget in hand will land in, while a gesture lasts. */
+    placeholder = computed(() => {
+        const gesture = this.gesture();
+        if (gesture === null)
+            return null;
+        const visible = this.drawnVisible();
+        const index = visible.findIndex((tile) => tile.key === gesture.key);
+        const tile = visible[index];
+        return tile === undefined ? null : { ...tileStyle(tile), order: String(index) };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Measured before a change of what is drawn, played after it lands. */
+    flipFrom = null;
+    settleFrom = null;
+    focusAfter = null;
+    snapshot = null;
+    returnFocus = null;
+    wasEditing = false;
+    resizeTeardown = null;
+    dragTeardown = null;
+    dragKeys = '';
+    constructor() {
+        const onKeyDown = (event) => this.onHandleKeyDown(event);
+        afterNextRender(() => {
+            this.host.nativeElement.addEventListener('keydown', onKeyDown, true);
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const root = this.host.nativeElement;
+            const observer = new ResizeObserver(() => this.drawnClass.set(classOf(root)));
+            observer.observe(root);
+            this.drawnClass.set(classOf(root));
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
+        this.destroyRef.onDestroy(() => {
+            this.host.nativeElement.removeEventListener('keydown', onKeyDown, true);
+            this.resizeTeardown?.();
+            this.dragTeardown?.();
+        });
+        afterEveryRender(() => {
+            this.syncEditing();
+            this.syncDrag();
+            this.settle();
+        });
+    }
+    /* ── Reading ──────────────────────────────────────────────────────── */
+    titleId(key) {
+        return `${this.base}-${key}-title`;
+    }
+    titleOf(key) {
+        return this.byKey().get(key)?.title() ?? key;
+    }
+    levelOf(widget) {
+        return widget.headingLevel() ?? this.headingLevel() ?? this.defaults.headingLevel;
+    }
+    reasonOf(event) {
+        return event.reason === 'keyboard' ? 'keyboard' : 'pointer';
+    }
+    sizeClass() {
+        return classOf(this.host.nativeElement);
+    }
+    widgetNodes() {
+        const nodes = new Map();
+        for (const node of this.list()?.nativeElement.querySelectorAll(':scope > [data-part="widget"]') ?? []) {
+            const key = node.dataset['key'];
+            if (key !== undefined)
+                nodes.set(key, node);
+        }
+        return nodes;
+    }
+    placeholderNode() {
+        return (this.list()?.nativeElement.querySelector(':scope > [data-part="placeholder"]') ??
+            null);
+    }
+    handleOf(key) {
+        return (this.widgetNodes().get(key)?.querySelector(':scope > [data-handle]') ?? null);
+    }
+    cardOf(key) {
+        return (this.widgetNodes().get(key)?.querySelector(':scope > [data-ui="card"]') ?? null);
+    }
+    /** The widgets that glide, and the placeholder; not the one in hand. */
+    flipNodes() {
+        const nodes = this.widgetNodes();
+        const key = this.gesture()?.key;
+        if (key !== undefined)
+            nodes.delete(key);
+        const placeholder = this.placeholderNode();
+        if (placeholder !== null)
+            nodes.set(PLACEHOLDER, placeholder);
+        return nodes;
+    }
+    measureAll() {
+        this.flipFrom = measureTiles(this.flipNodes());
+    }
+    setGesture(next) {
+        this.measureAll();
+        this.gesture.set(next);
+    }
+    /* ── Requests ─────────────────────────────────────────────────────── */
+    announce(message) {
+        if (message !== '')
+            getLiveAnnouncer(this.host.nativeElement.ownerDocument).announce(message);
+    }
+    full(layout) {
+        return materializeLayout(layout, this.specs(), this.grid());
+    }
+    change(next, reason, change, source, message) {
+        const full = this.full(next);
+        const previous = this.full(this.currentLayout());
+        if (layoutsEqual(full, previous))
+            return false;
+        if (this.flipFrom === null)
+            this.measureAll();
+        const request = makeRequest(full, previous, reason, source, { change });
+        this.layoutChangeRequest.emit(request);
+        if (request.cancelled) {
+            this.flipFrom = null;
+            return false;
+        }
+        this.layout.set(full);
+        this.announce(message(full));
+        return true;
+    }
+    requestEditing(next, reason, source) {
+        const previous = this.isEditing();
+        if (previous === next)
+            return;
+        const request = makeRequest(next, previous, reason, source, {});
+        this.editingChangeRequest.emit(request);
+        if (request.cancelled)
+            return;
+        this.editing.set(next);
+    }
+    movedMessage(key, drawnIn) {
+        return (layout) => {
+            const placed = resolveTiles(layout, this.specs(), this.grid()).filter((tile) => !tile.hidden);
+            const index = placed.findIndex((tile) => tile.key === key);
+            const tile = placed[index];
+            if (tile === undefined)
+                return '';
+            return drawnIn === 'expanded'
+                ? this.t('moved', {
+                    title: this.titleOf(key),
+                    row: tile.y + 1,
+                    column: tile.x + 1,
+                })
+                : this.t('movedInOrder', {
+                    title: this.titleOf(key),
+                    position: index + 1,
+                    total: placed.length,
+                });
+        };
+    }
+    resizedMessage(key, drawnIn) {
+        return (layout) => {
+            const tile = resolveTiles(layout, this.specs(), this.grid()).find((each) => each.key === key);
+            return tile === undefined
+                ? ''
+                : this.t('resized', {
+                    title: this.titleOf(key),
+                    columns: drawnIn === 'medium' ? tile.medium : tile.w,
+                    rows: tile.h,
+                });
+        };
+    }
+    move(key, direction, reason, source) {
+        const drawnIn = this.sizeClass();
+        const next = moveTileBy(this.currentLayout(), this.specs(), this.grid(), key, direction, drawnIn);
+        this.focusAfter = key;
+        if (!this.change(next, reason, { kind: 'move', key }, source, this.movedMessage(key, drawnIn))) {
+            this.focusAfter = null;
+        }
+    }
+    resize(key, columns, rows, reason, source) {
+        const drawnIn = this.sizeClass();
+        const next = resizeTileBy(this.currentLayout(), this.specs(), this.grid(), key, { columns, rows }, drawnIn);
+        this.focusAfter = key;
+        const message = this.resizedMessage(key, drawnIn);
+        if (!this.change(next, reason, { kind: 'resize', key }, source, message)) {
+            this.focusAfter = null;
+        }
+    }
+    hide(key, reason, source) {
+        const visible = this.visible();
+        const at = visible.findIndex((tile) => tile.key === key);
+        const tile = visible[at];
+        if (tile === undefined || !tile.removable)
+            return;
+        this.focusAfter = (visible[at + 1] ?? visible[at - 1])?.key ?? ADD;
+        const next = setTileHidden(this.currentLayout(), this.specs(), this.grid(), key, true);
+        const done = this.change(next, reason, { kind: 'hide', key }, source, () => this.t('hidden', { title: this.titleOf(key) }));
+        if (!done)
+            this.focusAfter = null;
+    }
+    show(key, reason, source) {
+        this.focusAfter = key;
+        const next = setTileHidden(this.currentLayout(), this.specs(), this.grid(), key, false);
+        this.change(next, reason, { kind: 'show', key }, source, () => this.t('shown', { title: this.titleOf(key) }));
+    }
+    reset(reason, source) {
+        this.change(EMPTY_LAYOUT, reason, { kind: 'reset', key: null }, source, () => this.t('resetDone'));
+    }
+    /** Leaves editing, as Done does. */
+    commitEditing(reason = 'programmatic', source) {
+        this.requestEditing(false, reason, source);
+    }
+    /** Asks for the layout editing began from, then leaves, as Cancel does. */
+    cancelEditing(reason = 'programmatic', source) {
+        const back = this.snapshot;
+        if (back !== null) {
+            this.change(back, 'dismiss', { kind: 'cancel', key: null }, source, () => this.t('cancelled'));
+        }
+        this.requestEditing(false, reason, source);
+    }
+    /** Focuses a widget's handle while editing, or the widget's first control. */
+    focusWidget(key) {
+        const target = (this.isEditing() ? this.handleOf(key) : null) ??
+            this.widgetNodes()
+                .get(key)
+                ?.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])');
+        target?.focus();
+    }
+    /* ── Keyboard ─────────────────────────────────────────────────────── */
+    /**
+     * Taken in the capture phase, before the handle's menu trigger reads
+     * ArrowDown and ArrowUp: `Alt` and `Shift` with an arrow belong to the
+     * layout, and the trigger does not look at modifiers.
+     */
+    onHandleKeyDown(event) {
+        const handle = event.target?.closest('[data-handle]');
+        const key = handle?.getAttribute('data-handle');
+        if (!handle || !key || !this.isEditing())
+            return;
+        const intent = dashboardKeyIntent(event, directionOf(handle));
+        if (intent === null)
+            return;
+        const tile = this.visible().find((each) => each.key === key);
+        if (tile === undefined)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (intent.kind === 'move' && tile.movable)
+            this.move(key, intent.direction, 'keyboard', event);
+        if (intent.kind === 'resize' && tile.resizable) {
+            this.resize(key, intent.columns, intent.rows, 'keyboard', event);
+        }
+        if (intent.kind === 'hide')
+            this.hide(key, 'remove', event);
+    }
+    /* ── Pointer: resize ──────────────────────────────────────────────── */
+    onResizePointerDown(key, edge, event) {
+        if (event.button !== 0 || this.resizeTeardown !== null)
+            return;
+        const tile = this.visible().find((each) => each.key === key);
+        const list = this.list()?.nativeElement;
+        const element = this.widgetNodes().get(key);
+        if (tile === undefined || !tile.resizable || list === undefined || element === undefined) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const drawnIn = this.sizeClass();
+        if (drawnIn === 'compact')
+            return;
+        const handle = event.currentTarget;
+        const rtl = directionOf(list) === 'rtl';
+        const tracks = tracksOf(list, this.grid()[drawnIn]);
+        const origin = originOf(element, list, rtl);
+        const start = { x: event.clientX, y: event.clientY };
+        const span = drawnIn === 'medium' ? tile.medium : tile.w;
+        const pullsStart = edge === 'start' || edge === 'bottom-start';
+        const pullsEnd = edge === 'end' || edge === 'bottom-end';
+        const pullsBottom = edge !== 'start' && edge !== 'end';
+        let snapped = { x: tile.x, y: tile.y, w: span, h: tile.h };
+        let preview = this.full(this.currentLayout());
+        writeOrigin(element, origin);
+        this.setGesture({ kind: 'resize', key, edge, preview, sizeClass: drawnIn });
+        const onMove = (moved) => {
+            const dx = moved.clientX - start.x;
+            const dy = moved.clientY - start.y;
+            /* Travel toward the inline end, whichever way the document reads. */
+            const along = rtl ? -dx : dx;
+            const floor = tracks.track;
+            const inlineSize = pullsEnd
+                ? Math.max(floor, origin.inlineSize + along)
+                : pullsStart
+                    ? Math.max(floor, origin.inlineSize - along)
+                    : origin.inlineSize;
+            const blockSize = pullsBottom
+                ? Math.max(tracks.row, origin.blockSize + dy)
+                : origin.blockSize;
+            element.style.setProperty('--_dg-origin-inline-size', `${inlineSize}px`);
+            element.style.setProperty('--_dg-origin-block-size', `${blockSize}px`);
+            /* Pulled by its start, the widget keeps its end still: the element is
+               anchored at its start, so it moves by what it grew. */
+            const shift = pullsStart ? origin.inlineSize - inlineSize : 0;
+            element.style.setProperty('--_dg-lift-x', `${rtl ? -shift : shift}px`);
+            const w = spanFromTravel({
+                span,
+                track: tracks.track,
+                gap: tracks.columnGap,
+                travel: inlineSize - origin.inlineSize,
+            });
+            const h = pullsBottom
+                ? spanFromTravel({
+                    span: tile.h,
+                    track: tracks.row,
+                    gap: tracks.rowGap,
+                    travel: blockSize - origin.blockSize,
+                })
+                : tile.h;
+            const x = pullsStart ? tile.x + tile.w - w : tile.x;
+            if (w === snapped.w && h === snapped.h && x === snapped.x)
+                return;
+            snapped = { x, y: tile.y, w, h };
+            preview = resizeTileInClass(this.currentLayout(), this.specs(), this.grid(), key, snapped, drawnIn);
+            this.setGesture({ kind: 'resize', key, edge, preview, sizeClass: drawnIn });
+        };
+        const finish = (commit, source) => {
+            this.resizeTeardown?.();
+            this.settleFrom = { key, box: boxOf(element) };
+            clearLift(element);
+            this.setGesture(null);
+            if (!commit)
+                return;
+            this.change(preview, 'pointer', { kind: 'resize', key }, source, this.resizedMessage(key, drawnIn));
+        };
+        const onUp = (up) => finish(true, up);
+        const onCancel = () => finish(false);
+        const onKey = (down) => {
+            if (down.key !== 'Escape')
+                return;
+            down.preventDefault();
+            down.stopPropagation();
+            finish(false);
+        };
+        const document = handle.ownerDocument;
+        handle.setPointerCapture?.(event.pointerId);
+        handle.addEventListener('pointermove', onMove);
+        handle.addEventListener('pointerup', onUp);
+        handle.addEventListener('pointercancel', onCancel);
+        document.addEventListener('keydown', onKey, true);
+        this.resizeTeardown = () => {
+            this.resizeTeardown = null;
+            handle.removeEventListener('pointermove', onMove);
+            handle.removeEventListener('pointerup', onUp);
+            handle.removeEventListener('pointercancel', onCancel);
+            document.removeEventListener('keydown', onKey, true);
+            if (handle.hasPointerCapture?.(event.pointerId)) {
+                handle.releasePointerCapture(event.pointerId);
+            }
+        };
+    }
+    /* ── Pointer: move ────────────────────────────────────────────────── */
+    /**
+     * One drag controller while editing, rebuilt when the set of widgets that
+     * can be picked up changes, and never while one is carried. A widget is
+     * picked up by its card, by a mouse or a pen — a finger on a card scrolls
+     * the page — and by its handle, by anything.
+     */
+    syncDrag() {
+        const list = this.list()?.nativeElement;
+        const keys = this.isEditing()
+            ? this.visible()
+                .filter((tile) => tile.movable)
+                .map((tile) => tile.key)
+                .sort()
+                .join('\n')
+            : '';
+        if (keys === this.dragKeys && (keys === '' || this.dragTeardown !== null))
+            return;
+        if (this.gesture()?.kind === 'move')
+            return;
+        this.dragTeardown?.();
+        this.dragTeardown = null;
+        this.dragKeys = keys;
+        if (keys === '' || list === undefined)
+            return;
+        const root = this.host.nativeElement;
+        const document = root.ownerDocument;
+        /** Where the press landed, and where in the widget. */
+        let press = null;
+        let target = null;
+        let drawnIn = 'expanded';
+        let rtl = false;
+        let tracks = null;
+        const onPress = (event) => {
+            const element = event.target?.closest('[data-part="widget"]');
+            if (!element || element.parentElement !== list)
+                return;
+            const box = element.getBoundingClientRect();
+            press = {
+                x: event.clientX,
+                y: event.clientY,
+                grabX: event.clientX - box.left,
+                grabY: event.clientY - box.top,
+            };
+        };
+        list.addEventListener('pointerdown', onPress, true);
+        /** The preview a target stands for. */
+        const previewOf = (key, at) => {
+            if (at.startsWith('swap:')) {
+                return swapTiles(this.currentLayout(), this.specs(), this.grid(), key, at.slice(5));
+            }
+            const [x, y] = at.split(',').map(Number);
+            return moveTile(this.currentLayout(), this.specs(), this.grid(), key, {
+                x: x ?? 0,
+                y: y ?? 0,
+            });
+        };
+        const controller = createDragController({
+            document,
+            restoreFocus: false,
+            preview: false,
+            autoScroll: { axis: 'y' },
+            t: this.dragT,
+            /* The move says what happened once, in the family's own words. */
+            silent: ['pickedUp', 'moved', 'dropped', 'cancelled'],
+            /**
+             * In the expanded class the target is a cell: the one the card's leading
+             * corner is nearest, so a widget lands where it is drawn under the
+             * pointer. In the classes that flow the target is the widget under the
+             * pointer, which the carried one exchanges places with.
+             */
+            resolveTarget: (point) => {
+                const carried = controller.state.items[0];
+                if (carried === undefined || press === null || tracks === null)
+                    return null;
+                const frame = list.getBoundingClientRect();
+                if (drawnIn === 'expanded') {
+                    const left = point.x - press.grabX;
+                    const top = point.y - press.grabY;
+                    const tile = this.visible().find((each) => each.key === carried);
+                    const width = tile ? tile.w * tracks.track + (tile.w - 1) * tracks.columnGap : 0;
+                    const lead = rtl ? left + width - tracks.track / 2 : left + tracks.track / 2;
+                    const cell = cellAt({ x: lead, y: top + tracks.row / 2 }, { left: frame.left, top: frame.top, width: frame.width }, { columns: tracks.columns, row: tracks.row, gap: tracks.columnGap }, rtl ? 'rtl' : 'ltr');
+                    target = `${cell.x},${cell.y}`;
+                }
+                else {
+                    for (const [key, element] of this.widgetNodes()) {
+                        if (key === carried)
+                            continue;
+                        const rect = element.getBoundingClientRect();
+                        if (point.x >= rect.left &&
+                            point.x <= rect.right &&
+                            point.y >= rect.top &&
+                            point.y <= rect.bottom) {
+                            target = `swap:${key}`;
+                            break;
+                        }
+                    }
+                }
+                return target === null
+                    ? null
+                    : { kind: 'on', container: GRID, key: target };
+            },
+            onTargetChange: ({ state }) => {
+                const key = state.items[0];
+                if (key === undefined || state.target?.kind !== 'on')
+                    return;
+                this.setGesture({ kind: 'move', key, preview: previewOf(key, state.target.key) });
+            },
+            onDrop: ({ items, target: dropped, reason, event }) => {
+                const key = items[0];
+                if (key === undefined || dropped.kind !== 'on')
+                    return;
+                this.focusAfter = null;
+                this.change(previewOf(key, dropped.key), reason === 'keyboard' ? 'keyboard' : 'pointer', { kind: 'move', key }, event, this.movedMessage(key, drawnIn));
+            },
+        });
+        const unregister = controller.registerContainer({
+            key: GRID,
+            items: () => this.visible().map((tile) => tile.key),
+            orientation: 'grid',
+            targets: ['on'],
+            element: () => list,
+            itemElement: (key) => this.widgetNodes().get(key) ?? null,
+            label: () => this.t('editBar'),
+            itemLabel: (key) => this.titleOf(key),
+        });
+        /* The click the browser fires after a pointer drag belongs to the drag,
+           not to the handle it started on, which would open the handle's menu. */
+        let swallow = false;
+        let dragging = null;
+        const onClick = (event) => {
+            if (!swallow)
+                return;
+            swallow = false;
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        root.addEventListener('click', onClick, true);
+        const unsubscribe = controller.subscribe((state) => {
+            if (state.status !== 'dragging') {
+                if (dragging !== null) {
+                    const element = this.widgetNodes().get(dragging);
+                    if (element)
+                        this.settleFrom = { key: dragging, box: boxOf(element) };
+                    clearLift(element);
+                    swallow = state.reason === 'pointer' || state.reason === null;
+                    setTimeout(() => (swallow = false), 0);
+                    dragging = null;
+                    target = null;
+                    if (this.gesture()?.kind === 'move')
+                        this.setGesture(null);
+                }
+                return;
+            }
+            const key = state.items[0];
+            if (key === undefined || press === null)
+                return;
+            const element = this.widgetNodes().get(key);
+            if (element === undefined)
+                return;
+            if (dragging === null) {
+                dragging = key;
+                drawnIn = classOf(root);
+                rtl = directionOf(list) === 'rtl';
+                tracks = tracksOf(list, this.grid()[drawnIn]);
+                writeOrigin(element, originOf(element, list, rtl));
+                this.setGesture({ kind: 'move', key, preview: this.full(this.currentLayout()) });
+            }
+            if (state.point !== null) {
+                element.style.setProperty('--_dg-lift-x', `${state.point.x - press.x}px`);
+                element.style.setProperty('--_dg-lift-y', `${state.point.y - press.y}px`);
+            }
+        });
+        const detachments = [];
+        const nodes = this.widgetNodes();
+        for (const tile of this.visible()) {
+            if (!tile.movable)
+                continue;
+            const element = nodes.get(tile.key);
+            if (element === undefined)
+                continue;
+            const card = this.cardOf(tile.key);
+            const handle = this.handleOf(tile.key);
+            if (card !== null) {
+                detachments.push(controller.attachDraggable(element, {
+                    container: GRID,
+                    key: tile.key,
+                    handle: () => card,
+                    canDrag: (event) => event.pointerType !== 'touch',
+                }));
+            }
+            if (handle !== null) {
+                detachments.push(controller.attachDraggable(element, {
+                    container: GRID,
+                    key: tile.key,
+                    handle: () => handle,
+                    delay: { touch: 0 },
+                }));
+            }
+        }
+        this.dragTeardown = () => {
+            for (const detach of detachments)
+                detach();
+            list.removeEventListener('pointerdown', onPress, true);
+            root.removeEventListener('click', onClick, true);
+            unsubscribe();
+            unregister();
+            controller.destroy();
+        };
+    }
+    /* ── After a render ───────────────────────────────────────────────── */
+    syncEditing() {
+        const editing = this.isEditing();
+        const document = this.host.nativeElement.ownerDocument;
+        if (editing && !this.wasEditing) {
+            this.snapshot = this.full(this.currentLayout());
+            this.returnFocus = document.activeElement;
+        }
+        if (!editing && this.wasEditing) {
+            const active = document.activeElement;
+            const lost = active === null || active === document.body || !active.isConnected;
+            const back = this.returnFocus;
+            if (lost && back instanceof HTMLElement && back.isConnected)
+                back.focus();
+            this.snapshot = null;
+            this.returnFocus = null;
+        }
+        this.wasEditing = editing;
+    }
+    timing() {
+        const styles = getComputedStyle(this.host.nativeElement);
+        return {
+            duration: parseDuration(styles.getPropertyValue('--slotted-duration-medium')),
+            easing: styles.getPropertyValue('--slotted-easing-standard').trim() || 'ease',
+        };
+    }
+    settle() {
+        const root = this.host.nativeElement;
+        const before = this.flipFrom;
+        if (before !== null) {
+            this.flipFrom = null;
+            playFlip(this.flipNodes(), before, this.timing());
+        }
+        const settling = this.settleFrom;
+        if (settling !== null && this.gesture() === null) {
+            this.settleFrom = null;
+            const element = this.widgetNodes().get(settling.key);
+            if (element)
+                playResize(element, settling.box, this.timing());
+        }
+        const key = this.focusAfter;
+        if (key === null)
+            return;
+        this.focusAfter = null;
+        const target = key === ADD
+            ? root.querySelector('[data-dashboard-add]')
+            : this.isEditing()
+                ? this.handleOf(key)
+                : null;
+        if (target && target !== root.ownerDocument.activeElement)
+            target.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDashboardGrid, isStandalone: true, selector: "[slDashboardGrid]", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, defaultLayout: { classPropertyName: "defaultLayout", publicName: "defaultLayout", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, defaultEditing: { classPropertyName: "defaultEditing", publicName: "defaultEditing", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, editBar: { classPropertyName: "editBar", publicName: "editBar", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layout: "layoutChange", editing: "editingChange", layoutChangeRequest: "layoutChangeRequest", editingChangeRequest: "editingChangeRequest" }, host: { attributes: { "data-ui": "dashboard-grid", "data-part": "root" }, properties: { "attr.data-editing": "isEditing() ? \"\" : null", "attr.data-gesture": "gesture() === null ? null : \"\"", "attr.aria-label": "null", "attr.aria-labelledby": "null", "style.--_dg-columns-expanded": "grid().expanded", "style.--_dg-columns-medium": "grid().medium", "style.--_dg-columns-compact": "grid().compact" } }, queries: [{ propertyName: "widgets", predicate: SlDashboardWidget, isSignal: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], exportAs: ["slDashboardGrid"], ngImport: i0, template: `
+    @if (isEditing() && resolvedEditBar()) {
+      <div data-part="edit-bar" role="group" [attr.aria-label]="t('editBar')">
+        <p data-part="edit-status" [id]="statusId">{{ t('editStatus') }}</p>
+        <div data-part="edit-actions">
+          @if (hiddenTiles().length > 0) {
+            <button
+              slButton
+              slDashboardPart="add"
+              data-dashboard-add
+              size="sm"
+              tone="secondary"
+              variant="outline"
+              [slMenuTriggerFor]="addMenu"
+            >
+              <span slButtonStart
+                ><span slIcon><svg slGlyph name="plus"></svg></span></span
+              >{{ t('add') }}
+            </button>
+            <sl-menu #addMenu>
+              @for (tile of hiddenTiles(); track tile.key) {
+                <button slMenuItem (select)="show(tile.key, reasonOf($event), $event.source)">
+                  {{ titleOf(tile.key) }}
+                </button>
+              }
+            </sl-menu>
+          }
+          <button
+            slButton
+            slDashboardPart="reset"
+            size="sm"
+            tone="secondary"
+            variant="ghost"
+            (click)="reset(pressReason($event), $event)"
+          >
+            {{ t('reset') }}
+          </button>
+          <button
+            slButton
+            slDashboardPart="cancel"
+            size="sm"
+            tone="secondary"
+            variant="outline"
+            (click)="cancelEditing(pressReason($event), $event)"
+          >
+            {{ t('cancel') }}
+          </button>
+          <button
+            slButton
+            slDashboardPart="done"
+            size="sm"
+            tone="accent"
+            variant="solid"
+            (click)="commitEditing('submit', $event)"
+          >
+            {{ t('done') }}
+          </button>
+        </div>
+      </div>
+    }
+    @if (isEditing() && !resolvedEditBar()) {
+      <p data-part="edit-status" data-ui="visually-hidden" [id]="statusId">
+        {{ t('editStatus') }}
+      </p>
+    }
+    <ul
+      #list
+      data-part="grid"
+      role="list"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-labelledby]="ariaLabelledBy() ?? null"
+      [hidden]="slots().length === 0"
+    >
+      @for (slot of slots(); track slot.tile.key) {
+        <li
+          data-part="widget"
+          [attr.data-key]="slot.tile.key"
+          [attr.data-status]="slot.widget.status()"
+          [attr.data-loading]="slot.widget.painted() ? '' : null"
+          [attr.data-movable]="slot.tile.movable ? '' : null"
+          [attr.data-resizable]="slot.tile.resizable ? '' : null"
+          [attr.data-dragging]="slot.dragging ? '' : null"
+          [attr.data-resizing]="slot.resizing ? '' : null"
+          [style]="slot.style"
+        >
+          <article
+            slCard
+            [fill]="slot.widget.fill()"
+            [size]="slot.widget.size()"
+            [attr.aria-labelledby]="titleId(slot.tile.key)"
+            [attr.aria-describedby]="
+              slot.widget.description() === undefined
+                ? null
+                : titleId(slot.tile.key) + '-description'
+            "
+            [attr.aria-busy]="slot.widget.painted() || slot.widget.busy() ? true : null"
+          >
+            <div slCardHeader>
+              @switch (levelOf(slot.widget)) {
+                @case (2) {
+                  <h2 data-part="title" [id]="titleId(slot.tile.key)">{{ slot.widget.title() }}</h2>
+                }
+                @case (4) {
+                  <h4 data-part="title" [id]="titleId(slot.tile.key)">{{ slot.widget.title() }}</h4>
+                }
+                @case (5) {
+                  <h5 data-part="title" [id]="titleId(slot.tile.key)">{{ slot.widget.title() }}</h5>
+                }
+                @case (6) {
+                  <h6 data-part="title" [id]="titleId(slot.tile.key)">{{ slot.widget.title() }}</h6>
+                }
+                @default {
+                  <h3 data-part="title" [id]="titleId(slot.tile.key)">{{ slot.widget.title() }}</h3>
+                }
+              }
+              @if (slot.widget.description(); as description) {
+                <p data-part="description" [id]="titleId(slot.tile.key) + '-description'">
+                  {{ description }}
+                </p>
+              }
+              @if (
+                slot.widget.hasActions() ||
+                slot.widget.detailHref() !== undefined ||
+                slot.widget.detailable()
+              ) {
+                <div slCardActions>
+                  <ng-container [ngTemplateOutlet]="slot.widget.actionsTemplate()" />
+                  @if (slot.widget.detailHref(); as href) {
+                    <a
+                      data-ui="button"
+                      data-part="detail"
+                      data-tone="secondary"
+                      data-variant="ghost"
+                      data-size="sm"
+                      data-shape="square"
+                      [attr.href]="href"
+                      [attr.aria-label]="t('detail', { title: slot.widget.title() })"
+                      (click)="slot.widget.detail.emit($event)"
+                      ><span data-part="icon" aria-hidden="true"
+                        ><span slIcon directional><svg slGlyph name="external"></svg></span></span
+                    ></a>
+                  } @else if (slot.widget.detailable()) {
+                    <button
+                      slIconButton
+                      slDashboardPart="detail"
+                      size="sm"
+                      tone="secondary"
+                      variant="ghost"
+                      [attr.aria-label]="t('detail', { title: slot.widget.title() })"
+                      (click)="slot.widget.detail.emit($event)"
+                    >
+                      <span slIcon directional><svg slGlyph name="external"></svg></span>
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+            <div slCardBody>
+              @if (slot.widget.busy() && !slot.widget.painted()) {
+                <span data-part="busy-indicator" aria-hidden="true"></span>
+              }
+              @if (slot.widget.painted()) {
+                <div data-part="skeleton">
+                  @if (slot.widget.hasSkeleton()) {
+                    <ng-container [ngTemplateOutlet]="slot.widget.skeletonTemplate()" />
+                  } @else {
+                    <span slSkeleton shape="block"></span>
+                  }
+                </div>
+              } @else if (slot.widget.status() === 'empty') {
+                <div data-part="message">
+                  <section slResultState status="empty" reach="section" align="center" live="off">
+                    <div slResultStateContent>
+                      <div slResultStateTitle>
+                        {{ slot.widget.emptyTitle() ?? t('emptyTitle') }}
+                      </div>
+                      @if (slot.widget.emptyDescription(); as description) {
+                        <p slResultStateDescription>{{ description }}</p>
+                      }
+                    </div>
+                    @if (slot.widget.hasEmptyAction()) {
+                      <div slResultStateActions>
+                        <ng-container [ngTemplateOutlet]="slot.widget.emptyActionTemplate()" />
+                      </div>
+                    }
+                  </section>
+                </div>
+              } @else if (slot.widget.status() === 'error') {
+                <div data-part="message">
+                  <section
+                    slResultState
+                    status="error"
+                    reach="section"
+                    align="center"
+                    live="polite"
+                  >
+                    <div slResultStateContent>
+                      <div slResultStateTitle>
+                        {{ slot.widget.errorTitle() ?? t('errorTitle') }}
+                      </div>
+                      @if (slot.widget.errorDescription(); as description) {
+                        <p slResultStateDescription>{{ description }}</p>
+                      }
+                    </div>
+                    @if (slot.widget.retryable()) {
+                      <div slResultStateActions>
+                        <button
+                          slButton
+                          slDashboardPart="retry"
+                          size="sm"
+                          tone="secondary"
+                          variant="outline"
+                          (click)="slot.widget.retry.emit($event)"
+                        >
+                          <span slButtonStart
+                            ><span slIcon><svg slGlyph name="rotate-ccw"></svg></span></span
+                          >{{ t('retry') }}
+                        </button>
+                      </div>
+                    }
+                  </section>
+                </div>
+              } @else {
+                <ng-container [ngTemplateOutlet]="slot.widget.bodyTemplate()" />
+              }
+            </div>
+            @if (slot.widget.hasFooter()) {
+              <div slCardFooter>
+                <ng-container [ngTemplateOutlet]="slot.widget.footerTemplate()" />
+              </div>
+            }
+          </article>
+          @if (slot.handle) {
+            <button
+              slDashboardPart="handle"
+              [attr.data-handle]="slot.tile.key"
+              [attr.aria-label]="t('handle', { title: slot.widget.title() })"
+              [attr.aria-describedby]="statusId"
+              [attr.aria-keyshortcuts]="shortcuts(slot.tile.removable)"
+              [slMenuTriggerFor]="handleMenu"
+            >
+              <span slIcon><svg slGlyph name="grip-horizontal"></svg></span>
+            </button>
+            <sl-menu #handleMenu>
+              @if (slot.tile.movable) {
+                <button
+                  slMenuItem
+                  shortcut="Alt+ArrowUp"
+                  [disabled]="!slot.can.up"
+                  (select)="move(slot.tile.key, 'up', reasonOf($event), $event.source)"
+                >
+                  {{ t('moveUp') }}
+                </button>
+                <button
+                  slMenuItem
+                  shortcut="Alt+ArrowDown"
+                  [disabled]="!slot.can.down"
+                  (select)="move(slot.tile.key, 'down', reasonOf($event), $event.source)"
+                >
+                  {{ t('moveDown') }}
+                </button>
+                @if (!flows()) {
+                  <button
+                    slMenuItem
+                    shortcut="Alt+ArrowLeft"
+                    [disabled]="!slot.can.left"
+                    (select)="move(slot.tile.key, 'left', reasonOf($event), $event.source)"
+                  >
+                    {{ t('moveStart') }}
+                  </button>
+                  <button
+                    slMenuItem
+                    shortcut="Alt+ArrowRight"
+                    [disabled]="!slot.can.right"
+                    (select)="move(slot.tile.key, 'right', reasonOf($event), $event.source)"
+                  >
+                    {{ t('moveEnd') }}
+                  </button>
+                }
+              }
+              @if (slot.tile.movable && slot.sizable) {
+                <hr slMenuSeparator />
+              }
+              @if (slot.sizable) {
+                <button
+                  slMenuItem
+                  shortcut="Shift+ArrowRight"
+                  [disabled]="!slot.can.wider"
+                  (select)="resize(slot.tile.key, 1, 0, reasonOf($event), $event.source)"
+                >
+                  {{ t('wider') }}
+                </button>
+                <button
+                  slMenuItem
+                  shortcut="Shift+ArrowLeft"
+                  [disabled]="!slot.can.narrower"
+                  (select)="resize(slot.tile.key, -1, 0, reasonOf($event), $event.source)"
+                >
+                  {{ t('narrower') }}
+                </button>
+                <button
+                  slMenuItem
+                  shortcut="Shift+ArrowDown"
+                  [disabled]="!slot.can.taller"
+                  (select)="resize(slot.tile.key, 0, 1, reasonOf($event), $event.source)"
+                >
+                  {{ t('taller') }}
+                </button>
+                <button
+                  slMenuItem
+                  shortcut="Shift+ArrowUp"
+                  [disabled]="!slot.can.shorter"
+                  (select)="resize(slot.tile.key, 0, -1, reasonOf($event), $event.source)"
+                >
+                  {{ t('shorter') }}
+                </button>
+              }
+              @if (slot.tile.removable) {
+                @if (slot.tile.movable || slot.sizable) {
+                  <hr slMenuSeparator />
+                }
+                <button
+                  slMenuItem
+                  tone="danger"
+                  shortcut="Delete"
+                  (select)="hide(slot.tile.key, 'remove', $event.source)"
+                >
+                  {{ t('hide') }}
+                </button>
+              }
+            </sl-menu>
+          }
+          @if (isEditing() && slot.sizable) {
+            @for (edge of edges; track edge) {
+              <span
+                data-part="resize-handle"
+                aria-hidden="true"
+                [attr.data-edge]="edge"
+                [attr.data-active]="slot.edge === edge ? '' : null"
+                (pointerdown)="onResizePointerDown(slot.tile.key, edge, $event)"
+              ></span>
+            }
+          }
+          @if (slot.readout !== null) {
+            <span data-part="size-readout" aria-hidden="true" [attr.data-edge]="slot.edge">{{
+              slot.readout
+            }}</span>
+          }
+        </li>
+      }
+      @if (placeholder(); as style) {
+        <li data-part="placeholder" aria-hidden="true" [style]="style"></li>
+      }
+    </ul>
+    @if (slots().length === 0) {
+      <div data-part="empty">
+        <section slResultState status="empty" reach="section" live="polite">
+          <div slResultStateContent>
+            <div slResultStateTitle>{{ t('empty') }}</div>
+            @if (isEditing()) {
+              <p slResultStateDescription>{{ t('emptyEditing') }}</p>
+            }
+          </div>
+        </section>
+      </div>
+    }
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=dashboard-grid]{--_gap: var(--slotted-dashboard-grid-gap, var(--slotted-space-6, 1rem));--_row: var(--slotted-dashboard-grid-row-size, 4.5rem);--_cols: var(--_dg-columns-expanded, 12);--_radius: var(--slotted-card-radius, var(--slotted-radius-lg, 8px));--_accent: var(--slotted-dashboard-grid-accent, var(--slotted-tone-accent-solid, Highlight));container:dashboard-grid / inline-size;display:flex;flex-direction:column;gap:var(--_gap);min-inline-size:0}[data-ui=dashboard-grid]>[data-part=grid]{display:grid;gap:var(--_gap);grid-auto-rows:var(--_row);grid-template-columns:repeat(var(--_cols),minmax(0,1fr));list-style:none;margin:0;min-inline-size:0;padding:0;position:relative}[data-ui=dashboard-grid] [data-part=grid][hidden],[data-ui=dashboard-grid] [data-part=widget][hidden]{display:none}[data-ui=dashboard-grid] :is([data-part=widget],[data-part=placeholder]){grid-column:var(--_dg-x, auto) / span var(--_dg-w, 4);grid-row:var(--_dg-y, auto) / span var(--_dg-h, 2);min-block-size:0;min-inline-size:0}[data-ui=dashboard-grid] [data-part=widget]{display:flex;position:relative}@container dashboard-grid (width < 1024px){[data-ui=dashboard-grid]>[data-part=grid]{--_cols: var(--_dg-columns-medium, 6)}[data-ui=dashboard-grid] :is([data-part=widget],[data-part=placeholder]){grid-column:auto / span var(--_dg-span-medium, 3);grid-row:auto / span var(--_dg-h, 2)}}@container dashboard-grid (width < 600px){[data-ui=dashboard-grid]>[data-part=grid]{--_cols: var(--_dg-columns-compact, 1);grid-auto-rows:auto}[data-ui=dashboard-grid] :is([data-part=widget],[data-part=placeholder]){grid-column:1 / -1;grid-row:auto}[data-ui=dashboard-grid] [data-part=placeholder]{min-block-size:calc(var(--_row) * 2)}}[data-ui=dashboard-grid] [data-part=widget]>[data-ui=card]{flex:1 1 auto;min-block-size:0;min-inline-size:0;transition:box-shadow var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=dashboard-grid] [data-part=widget]>[data-ui=card]>[data-part=body]{--slotted-chart-plot-block-size: calc(var(--_row) * 1.5);display:flex;flex-direction:column;overflow:auto;position:relative}[data-ui=dashboard-grid] [data-part=widget]>[data-ui=card]>[data-part=body]>:not([data-part=busy-indicator]){flex:1 0 auto}[data-ui=dashboard-grid] [data-part=widget] [data-part=title]{-webkit-box-orient:vertical;color:var(--slotted-dashboard-grid-title-color, var(--slotted-text, CanvasText));display:-webkit-box;font-family:var( --slotted-dashboard-grid-title-font-family, var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) ) );font-size:var( --slotted-dashboard-grid-title-font-size, var(--slotted-font-size-md, .8125rem) );font-weight:var(--slotted-font-weight-semibold, 600);-webkit-line-clamp:2;line-clamp:2;line-height:var(--slotted-line-height-md, 1.5);margin:0;overflow:hidden;overflow-wrap:anywhere}[data-ui=dashboard-grid] [data-part=widget] [data-part=description]{color:var(--slotted-dashboard-grid-description-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-sm, .75rem);line-height:var(--slotted-line-height-sm, 1.5);margin:0;overflow-wrap:anywhere}[data-ui=dashboard-grid] [data-part=widget] [data-part=actions]{flex-wrap:nowrap;gap:var(--slotted-space-1, .125rem);margin-block:calc((var(--slotted-control-height-sm, 1.75rem) - var(--slotted-font-size-md, .8125rem) * var(--slotted-line-height-md, 1.5)) / -2)}[data-ui=dashboard-grid] [data-part=widget] [data-part=skeleton]{display:flex;flex-direction:column;min-block-size:var(--slotted-space-12, 4rem)}[data-ui=dashboard-grid] [data-part=widget] [data-part=skeleton]>[data-ui=skeleton]{block-size:auto;flex:1 1 auto;inline-size:100%}[data-ui=dashboard-grid] [data-part=widget] [data-part=message]{align-content:center;display:grid;justify-items:center}[data-ui=dashboard-grid] [data-part=widget] [data-part=busy-indicator]{background-color:var(--_accent);block-size:var(--slotted-border-width-medium, 2px);inset-block-start:0;inset-inline:0;opacity:.35;pointer-events:none;position:absolute}@media(prefers-reduced-motion:no-preference){[data-ui=dashboard-grid] [data-part=widget] [data-part=busy-indicator]{animation:slotted-dashboard-grid-busy var(--slotted-duration-loop-slow) linear infinite;background-color:transparent;background-image:linear-gradient(to right,transparent,var(--_accent) 50%,transparent);background-repeat:no-repeat;background-size:40% 100%;opacity:1}}@media(prefers-reduced-motion:reduce){[data-ui=dashboard-grid] [data-part=widget] [data-part=busy-indicator]{animation:none}}@keyframes slotted-dashboard-grid-busy{0%{background-position:-40% 0}to{background-position:140% 0}}[data-ui=dashboard-grid]>[data-part=edit-bar]{align-items:center;background-color:var( --slotted-dashboard-grid-edit-bar-background, var(--slotted-surface-raised, Canvas) );border:var(--slotted-border-width-thin, 1px) solid var(--slotted-dashboard-grid-edit-bar-border, var(--slotted-border-subtle, CanvasText));border-radius:var(--_radius);box-shadow:var(--slotted-shadow-xs);display:flex;flex-wrap:wrap;gap:var(--slotted-space-4, .5rem) var(--slotted-space-6, 1rem);padding-block:var(--slotted-space-4, .5rem);padding-inline:var(--slotted-space-6, 1rem) var(--slotted-space-4, .5rem)}@starting-style{[data-ui=dashboard-grid]>[data-part=edit-bar]{opacity:0;translate:0 calc(var(--slotted-space-4, .5rem) * -1)}}[data-ui=dashboard-grid]>[data-part=edit-bar]{transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=dashboard-grid]>[data-part=edit-bar]>[data-part=edit-status]{color:var(--slotted-text-muted, GrayText);flex:1 1 20rem;font-size:var(--slotted-font-size-sm, .75rem);line-height:var(--slotted-line-height-sm, 1.5);margin:0;min-inline-size:0}[data-ui=dashboard-grid]>[data-part=edit-bar]>[data-part=edit-actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-space-3, .375rem);justify-content:flex-end;margin-inline-start:auto}[data-ui=dashboard-grid]>[data-part=grid]:before{background-image:radial-gradient(circle at calc((100% - var(--_gap)) / 2) calc((100% - var(--_gap)) / 2),var(--slotted-dashboard-grid-lattice-color, var(--slotted-border-strong, currentColor)) var(--slotted-dashboard-grid-lattice-dot, 1.5px),transparent calc(var(--slotted-dashboard-grid-lattice-dot, 1.5px) + .75px));background-size:calc((100% + var(--_gap)) / var(--_cols)) calc(var(--_row) + var(--_gap));content:\"\";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=dashboard-grid][data-editing]>[data-part=grid]{min-block-size:calc(var(--_row) * 2 + var(--_gap))}[data-ui=dashboard-grid][data-editing]>[data-part=grid]:before{opacity:.7}[data-ui=dashboard-grid][data-gesture]>[data-part=grid]:before{opacity:1}@container dashboard-grid (width < 1024px){[data-ui=dashboard-grid]>[data-part=grid]:before{display:none}}[data-ui=dashboard-grid][data-editing] [data-part=widget][data-movable]>[data-ui=card]{cursor:grab}[data-ui=dashboard-grid][data-editing] [data-part=widget][data-movable]>[data-ui=card] :is(a,button,input,select,textarea,[tabindex]){cursor:auto}[data-ui=dashboard-grid][data-editing] [data-part=widget]:not([data-loading]):hover>[data-ui=card]{box-shadow:var(--slotted-shadow-sm)}[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle]{--_pill-inline: var(--slotted-dashboard-grid-handle-inline-size, 2.25rem);--_pill-block: var(--slotted-dashboard-grid-handle-block-size, 1rem);align-items:center;appearance:none;background-color:var(--slotted-control-surface, Canvas);block-size:var(--_pill-block);border:var(--slotted-border-width-thin, 1px) solid var(--slotted-control-border-color, ButtonBorder);border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-control-shadow);box-sizing:border-box;color:var(--slotted-text-muted, GrayText);cursor:grab;display:flex;font:inherit;inline-size:var(--_pill-inline);inset-block-start:calc(var(--_pill-block) / -2);inset-inline:0;justify-content:center;margin:0 auto;padding:0;position:absolute;touch-action:none;transition:background-color var(--slotted-duration-short) var(--slotted-easing-standard),border-color var(--slotted-duration-short) var(--slotted-easing-standard),color var(--slotted-duration-short) var(--slotted-easing-standard),opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter);z-index:2}@starting-style{[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle]{opacity:0;translate:0 var(--slotted-space-3, .375rem)}}[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle]:before{content:\"\";inset:calc((var(--slotted-target-min, 24px) - var(--_pill-block)) / -2) calc(var(--slotted-space-4, .5rem) * -1);position:absolute}[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle]>[data-ui=icon]{--slotted-icon-size: var(--slotted-dashboard-grid-handle-glyph-size, .875rem)}[data-ui=dashboard-grid][data-editing] [data-part=widget]:not([data-loading]):hover>[data-part=handle]{border-color:var(--slotted-border-strong, ButtonBorder);color:var(--slotted-text, CanvasText)}[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle]: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=dashboard-grid] [data-part=widget]:is([data-dragging],[data-resizing])>[data-part=handle],[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle][aria-expanded=true]{background-color:var(--_accent);border-color:var(--_accent);color:var(--slotted-tone-accent-on-solid, HighlightText)}[data-ui=dashboard-grid] [data-part=widget]>[data-part=resize-handle]{--_hit: var(--slotted-dashboard-grid-resize-hit, .75rem);--_mark: var(--slotted-border-strong, currentColor);opacity:0;position:absolute;touch-action:none;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard);z-index:2}[data-ui=dashboard-grid][data-editing] [data-part=widget]:not([data-loading]):hover>[data-part=resize-handle],[data-ui=dashboard-grid][data-editing] [data-part=widget]:focus-within>[data-part=resize-handle],[data-ui=dashboard-grid] [data-part=widget][data-resizing]>[data-part=resize-handle]{opacity:1}@media(pointer:coarse){[data-ui=dashboard-grid] [data-part=widget]>[data-part=resize-handle]{--_hit: var(--slotted-target-comfortable, 44px);opacity:1}[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle]{--_pill-inline: var(--slotted-dashboard-grid-handle-inline-size-coarse, 2.75rem);--_pill-block: var(--slotted-dashboard-grid-handle-block-size-coarse, 1.25rem)}}[data-ui=dashboard-grid] [data-part=resize-handle]:before{background-color:var(--_mark);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inset:0;margin:auto;position:absolute;transition:background-color var(--slotted-duration-short) var(--slotted-easing-standard),block-size var(--slotted-duration-short) var(--slotted-easing-standard),inline-size var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=dashboard-grid] [data-part=resize-handle]:is([data-edge=start],[data-edge=end]){cursor:ew-resize;inline-size:var(--_hit);inset-block:calc(var(--_radius) + var(--_hit) / 2)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=start]{inset-inline-start:calc(var(--_hit) / -2)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=end]{inset-inline-end:calc(var(--_hit) / -2)}[data-ui=dashboard-grid] [data-part=resize-handle]:is([data-edge=start],[data-edge=end]):before{block-size:var(--slotted-dashboard-grid-resize-pill, 1.75rem);inline-size:var(--slotted-border-width-thick, 3px)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom]{block-size:var(--_hit);cursor:ns-resize;inset-block-end:calc(var(--_hit) / -2);inset-inline:calc(var(--_radius) + var(--_hit) / 2)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom]:before{block-size:var(--slotted-border-width-thick, 3px);inline-size:var(--slotted-dashboard-grid-resize-pill, 1.75rem)}[data-ui=dashboard-grid] [data-part=resize-handle]:is([data-edge=bottom-start],[data-edge=bottom-end]){block-size:calc(var(--_hit) * 1.5);inline-size:calc(var(--_hit) * 1.5);inset-block-end:calc(var(--_hit) / -2)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom-end]{cursor:nwse-resize;inset-inline-end:calc(var(--_hit) / -2)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom-start]{cursor:nesw-resize;inset-inline-start:calc(var(--_hit) / -2)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom-end]:dir(rtl){cursor:nesw-resize}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom-start]:dir(rtl){cursor:nwse-resize}[data-ui=dashboard-grid] [data-part=resize-handle]:is([data-edge=bottom-start],[data-edge=bottom-end]):before{background-color:transparent;block-size:var(--_radius);border-block-end:var(--slotted-border-width-thick, 3px) solid var(--_mark);border-radius:0;inline-size:var(--_radius);inset:auto;inset-block-end:calc(var(--_hit) / 2 - var(--slotted-border-width-thin, 1px));margin:0}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom-end]:before{border-end-end-radius:var(--_radius);border-inline-end:var(--slotted-border-width-thick, 3px) solid var(--_mark);inset-inline-end:calc(var(--_hit) / 2 - var(--slotted-border-width-thin, 1px))}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom-start]:before{border-end-start-radius:var(--_radius);border-inline-start:var(--slotted-border-width-thick, 3px) solid var(--_mark);inset-inline-start:calc(var(--_hit) / 2 - var(--slotted-border-width-thin, 1px))}[data-ui=dashboard-grid] [data-part=resize-handle]:not([data-disabled]):hover,[data-ui=dashboard-grid] [data-part=resize-handle][data-active]{--_mark: var(--_accent)}[data-ui=dashboard-grid] [data-part=resize-handle]:is([data-edge=start],[data-edge=end]):is(:not([data-disabled]):hover,[data-active]):before{block-size:var(--slotted-dashboard-grid-resize-pill-active, 2.75rem)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom]:is(:not([data-disabled]):hover,[data-active]):before{inline-size:var(--slotted-dashboard-grid-resize-pill-active, 2.75rem)}@container dashboard-grid (width < 1024px){[data-ui=dashboard-grid] [data-part=widget]>[data-part=resize-handle]:is([data-edge=start],[data-edge=bottom-start]){display:none}}@container dashboard-grid (width < 600px){[data-ui=dashboard-grid] [data-part=widget]>[data-part=resize-handle]{display:none}}[data-ui=dashboard-grid] [data-part=widget]:is([data-dragging],[data-resizing]){block-size:var(--_dg-origin-block-size);grid-column:auto;grid-row:auto;inline-size:var(--_dg-origin-inline-size);inset-block-start:var(--_dg-origin-block-start);inset-inline-start:var(--_dg-origin-inline-start);position:absolute;translate:var(--_dg-lift-x, 0) var(--_dg-lift-y, 0);z-index:3}[data-ui=dashboard-grid] [data-part=widget][data-dragging]{cursor:grabbing}[data-ui=dashboard-grid] [data-part=widget][data-dragging]>[data-ui=card]{box-shadow:var(--slotted-shadow-lg),0 0 0 var(--slotted-border-width-thin, 1px) color-mix(in oklab,var(--_accent) 60%,transparent)}[data-ui=dashboard-grid] [data-part=widget][data-resizing]>[data-ui=card]{box-shadow:var(--slotted-shadow-md),0 0 0 var(--slotted-border-width-thin, 1px) color-mix(in oklab,var(--_accent) 60%,transparent)}[data-ui=dashboard-grid]>[data-part=grid]>[data-part=placeholder]{background-color:color-mix(in oklab,var(--_accent) 10%,transparent);border:var(--slotted-border-width-thin, 1px) solid color-mix(in oklab,var(--_accent) 55%,transparent);border-radius:var(--_radius);box-sizing:border-box;pointer-events:none}[data-ui=dashboard-grid] [data-part=widget]>[data-part=size-readout]{background-color:var(--_accent);border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-shadow-sm);color:var(--slotted-tone-accent-on-solid, HighlightText);font-size:var(--slotted-font-size-xs, .6875rem);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);inset-block-end:var(--slotted-space-5, .75rem);inset-inline-end:var(--slotted-space-5, .75rem);line-height:var(--slotted-line-height-xs, 1.4);padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-4, .5rem);pointer-events:none;position:absolute;white-space:nowrap;z-index:4}[data-ui=dashboard-grid] [data-part=widget]>[data-part=size-readout][data-edge=start],[data-ui=dashboard-grid] [data-part=widget]>[data-part=size-readout][data-edge=bottom-start]{inset-inline:var(--slotted-space-5, .75rem) auto}[data-ui=dashboard-grid]>[data-part=empty]{min-block-size:calc(var(--_row) * 2 + var(--_gap))}}\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: SlButtonStart, selector: "[slButtonStart]", exportAs: ["slButtonStart"] }, { kind: "component", type: SlCard, selector: "[slCard]", inputs: ["orientation", "fill", "size", "selected", "disabled"], exportAs: ["slCard"] }, { kind: "directive", type: SlCardActions, selector: "[slCardActions]", exportAs: ["slCardActions"] }, { kind: "directive", type: SlCardBody, selector: "[slCardBody]", exportAs: ["slCardBody"] }, { kind: "directive", type: SlCardFooter, selector: "[slCardFooter]", exportAs: ["slCardFooter"] }, { kind: "directive", type: SlCardHeader, selector: "[slCardHeader]", exportAs: ["slCardHeader"] }, { kind: "directive", type: SlDashboardPart, selector: "[slDashboardPart]", inputs: ["slDashboardPart"] }, { 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: SlIconButton, selector: "button[slIconButton]", inputs: ["disabled", "focusableWhenDisabled", "loading", "loadingDelay", "messages", "shape", "size", "tone", "type", "variant", "pressed", "defaultPressed"], outputs: ["pressedChange"], exportAs: ["slIconButton"] }, { 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: "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: "directive", type: SlResultStateDescription, selector: "[slResultStateDescription]", exportAs: ["slResultStateDescription"] }, { kind: "component", type: SlResultStateTitle, selector: "[slResultStateTitle]", exportAs: ["slResultStateTitle"] }, { kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDashboardGrid, decorators: [{
+            type: Component,
+            args: [{ selector: '[slDashboardGrid]', standalone: true, exportAs: 'slDashboardGrid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        NgTemplateOutlet,
+                        SlButton,
+                        SlButtonStart,
+                        SlCard,
+                        SlCardActions,
+                        SlCardBody,
+                        SlCardFooter,
+                        SlCardHeader,
+                        SlDashboardPart,
+                        SlGlyph,
+                        SlIcon,
+                        SlIconButton,
+                        SlMenu,
+                        SlMenuItem,
+                        SlMenuSeparator,
+                        SlMenuTrigger,
+                        SlResultState,
+                        SlResultStateActions,
+                        SlResultStateContent,
+                        SlResultStateDescription,
+                        SlResultStateTitle,
+                        SlSkeleton,
+                    ], host: {
+                        'data-ui': 'dashboard-grid',
+                        'data-part': 'root',
+                        '[attr.data-editing]': 'isEditing() ? "" : null',
+                        '[attr.data-gesture]': 'gesture() === null ? null : ""',
+                        '[attr.aria-label]': 'null',
+                        '[attr.aria-labelledby]': 'null',
+                        '[style.--_dg-columns-expanded]': 'grid().expanded',
+                        '[style.--_dg-columns-medium]': 'grid().medium',
+                        '[style.--_dg-columns-compact]': 'grid().compact',
+                    }, template: `
+    @if (isEditing() && resolvedEditBar()) {
+      <div data-part="edit-bar" role="group" [attr.aria-label]="t('editBar')">
+        <p data-part="edit-status" [id]="statusId">{{ t('editStatus') }}</p>
+        <div data-part="edit-actions">
+          @if (hiddenTiles().length > 0) {
+            <button
+              slButton
+              slDashboardPart="add"
+              data-dashboard-add
+              size="sm"
+              tone="secondary"
+              variant="outline"
+              [slMenuTriggerFor]="addMenu"
+            >
+              <span slButtonStart
+                ><span slIcon><svg slGlyph name="plus"></svg></span></span
+              >{{ t('add') }}
+            </button>
+            <sl-menu #addMenu>
+              @for (tile of hiddenTiles(); track tile.key) {
+                <button slMenuItem (select)="show(tile.key, reasonOf($event), $event.source)">
+                  {{ titleOf(tile.key) }}
+                </button>
+              }
+            </sl-menu>
+          }
+          <button
+            slButton
+            slDashboardPart="reset"
+            size="sm"
+            tone="secondary"
+            variant="ghost"
+            (click)="reset(pressReason($event), $event)"
+          >
+            {{ t('reset') }}
+          </button>
+          <button
+            slButton
+            slDashboardPart="cancel"
+            size="sm"
+            tone="secondary"
+            variant="outline"
+            (click)="cancelEditing(pressReason($event), $event)"
+          >
+            {{ t('cancel') }}
+          </button>
+          <button
+            slButton
+            slDashboardPart="done"
+            size="sm"
+            tone="accent"
+            variant="solid"
+            (click)="commitEditing('submit', $event)"
+          >
+            {{ t('done') }}
+          </button>
+        </div>
+      </div>
+    }
+    @if (isEditing() && !resolvedEditBar()) {
+      <p data-part="edit-status" data-ui="visually-hidden" [id]="statusId">
+        {{ t('editStatus') }}
+      </p>
+    }
+    <ul
+      #list
+      data-part="grid"
+      role="list"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-labelledby]="ariaLabelledBy() ?? null"
+      [hidden]="slots().length === 0"
+    >
+      @for (slot of slots(); track slot.tile.key) {
+        <li
+          data-part="widget"
+          [attr.data-key]="slot.tile.key"
+          [attr.data-status]="slot.widget.status()"
+          [attr.data-loading]="slot.widget.painted() ? '' : null"
+          [attr.data-movable]="slot.tile.movable ? '' : null"
+          [attr.data-resizable]="slot.tile.resizable ? '' : null"
+          [attr.data-dragging]="slot.dragging ? '' : null"
+          [attr.data-resizing]="slot.resizing ? '' : null"
+          [style]="slot.style"
+        >
+          <article
+            slCard
+            [fill]="slot.widget.fill()"
+            [size]="slot.widget.size()"
+            [attr.aria-labelledby]="titleId(slot.tile.key)"
+            [attr.aria-describedby]="
+              slot.widget.description() === undefined
+                ? null
+                : titleId(slot.tile.key) + '-description'
+            "
+            [attr.aria-busy]="slot.widget.painted() || slot.widget.busy() ? true : null"
+          >
+            <div slCardHeader>
+              @switch (levelOf(slot.widget)) {
+                @case (2) {
+                  <h2 data-part="title" [id]="titleId(slot.tile.key)">{{ slot.widget.title() }}</h2>
+                }
+                @case (4) {
+                  <h4 data-part="title" [id]="titleId(slot.tile.key)">{{ slot.widget.title() }}</h4>
+                }
+                @case (5) {
+                  <h5 data-part="title" [id]="titleId(slot.tile.key)">{{ slot.widget.title() }}</h5>
+                }
+                @case (6) {
+                  <h6 data-part="title" [id]="titleId(slot.tile.key)">{{ slot.widget.title() }}</h6>
+                }
+                @default {
+                  <h3 data-part="title" [id]="titleId(slot.tile.key)">{{ slot.widget.title() }}</h3>
+                }
+              }
+              @if (slot.widget.description(); as description) {
+                <p data-part="description" [id]="titleId(slot.tile.key) + '-description'">
+                  {{ description }}
+                </p>
+              }
+              @if (
+                slot.widget.hasActions() ||
+                slot.widget.detailHref() !== undefined ||
+                slot.widget.detailable()
+              ) {
+                <div slCardActions>
+                  <ng-container [ngTemplateOutlet]="slot.widget.actionsTemplate()" />
+                  @if (slot.widget.detailHref(); as href) {
+                    <a
+                      data-ui="button"
+                      data-part="detail"
+                      data-tone="secondary"
+                      data-variant="ghost"
+                      data-size="sm"
+                      data-shape="square"
+                      [attr.href]="href"
+                      [attr.aria-label]="t('detail', { title: slot.widget.title() })"
+                      (click)="slot.widget.detail.emit($event)"
+                      ><span data-part="icon" aria-hidden="true"
+                        ><span slIcon directional><svg slGlyph name="external"></svg></span></span
+                    ></a>
+                  } @else if (slot.widget.detailable()) {
+                    <button
+                      slIconButton
+                      slDashboardPart="detail"
+                      size="sm"
+                      tone="secondary"
+                      variant="ghost"
+                      [attr.aria-label]="t('detail', { title: slot.widget.title() })"
+                      (click)="slot.widget.detail.emit($event)"
+                    >
+                      <span slIcon directional><svg slGlyph name="external"></svg></span>
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+            <div slCardBody>
+              @if (slot.widget.busy() && !slot.widget.painted()) {
+                <span data-part="busy-indicator" aria-hidden="true"></span>
+              }
+              @if (slot.widget.painted()) {
+                <div data-part="skeleton">
+                  @if (slot.widget.hasSkeleton()) {
+                    <ng-container [ngTemplateOutlet]="slot.widget.skeletonTemplate()" />
+                  } @else {
+                    <span slSkeleton shape="block"></span>
+                  }
+                </div>
+              } @else if (slot.widget.status() === 'empty') {
+                <div data-part="message">
+                  <section slResultState status="empty" reach="section" align="center" live="off">
+                    <div slResultStateContent>
+                      <div slResultStateTitle>
+                        {{ slot.widget.emptyTitle() ?? t('emptyTitle') }}
+                      </div>
+                      @if (slot.widget.emptyDescription(); as description) {
+                        <p slResultStateDescription>{{ description }}</p>
+                      }
+                    </div>
+                    @if (slot.widget.hasEmptyAction()) {
+                      <div slResultStateActions>
+                        <ng-container [ngTemplateOutlet]="slot.widget.emptyActionTemplate()" />
+                      </div>
+                    }
+                  </section>
+                </div>
+              } @else if (slot.widget.status() === 'error') {
+                <div data-part="message">
+                  <section
+                    slResultState
+                    status="error"
+                    reach="section"
+                    align="center"
+                    live="polite"
+                  >
+                    <div slResultStateContent>
+                      <div slResultStateTitle>
+                        {{ slot.widget.errorTitle() ?? t('errorTitle') }}
+                      </div>
+                      @if (slot.widget.errorDescription(); as description) {
+                        <p slResultStateDescription>{{ description }}</p>
+                      }
+                    </div>
+                    @if (slot.widget.retryable()) {
+                      <div slResultStateActions>
+                        <button
+                          slButton
+                          slDashboardPart="retry"
+                          size="sm"
+                          tone="secondary"
+                          variant="outline"
+                          (click)="slot.widget.retry.emit($event)"
+                        >
+                          <span slButtonStart
+                            ><span slIcon><svg slGlyph name="rotate-ccw"></svg></span></span
+                          >{{ t('retry') }}
+                        </button>
+                      </div>
+                    }
+                  </section>
+                </div>
+              } @else {
+                <ng-container [ngTemplateOutlet]="slot.widget.bodyTemplate()" />
+              }
+            </div>
+            @if (slot.widget.hasFooter()) {
+              <div slCardFooter>
+                <ng-container [ngTemplateOutlet]="slot.widget.footerTemplate()" />
+              </div>
+            }
+          </article>
+          @if (slot.handle) {
+            <button
+              slDashboardPart="handle"
+              [attr.data-handle]="slot.tile.key"
+              [attr.aria-label]="t('handle', { title: slot.widget.title() })"
+              [attr.aria-describedby]="statusId"
+              [attr.aria-keyshortcuts]="shortcuts(slot.tile.removable)"
+              [slMenuTriggerFor]="handleMenu"
+            >
+              <span slIcon><svg slGlyph name="grip-horizontal"></svg></span>
+            </button>
+            <sl-menu #handleMenu>
+              @if (slot.tile.movable) {
+                <button
+                  slMenuItem
+                  shortcut="Alt+ArrowUp"
+                  [disabled]="!slot.can.up"
+                  (select)="move(slot.tile.key, 'up', reasonOf($event), $event.source)"
+                >
+                  {{ t('moveUp') }}
+                </button>
+                <button
+                  slMenuItem
+                  shortcut="Alt+ArrowDown"
+                  [disabled]="!slot.can.down"
+                  (select)="move(slot.tile.key, 'down', reasonOf($event), $event.source)"
+                >
+                  {{ t('moveDown') }}
+                </button>
+                @if (!flows()) {
+                  <button
+                    slMenuItem
+                    shortcut="Alt+ArrowLeft"
+                    [disabled]="!slot.can.left"
+                    (select)="move(slot.tile.key, 'left', reasonOf($event), $event.source)"
+                  >
+                    {{ t('moveStart') }}
+                  </button>
+                  <button
+                    slMenuItem
+                    shortcut="Alt+ArrowRight"
+                    [disabled]="!slot.can.right"
+                    (select)="move(slot.tile.key, 'right', reasonOf($event), $event.source)"
+                  >
+                    {{ t('moveEnd') }}
+                  </button>
+                }
+              }
+              @if (slot.tile.movable && slot.sizable) {
+                <hr slMenuSeparator />
+              }
+              @if (slot.sizable) {
+                <button
+                  slMenuItem
+                  shortcut="Shift+ArrowRight"
+                  [disabled]="!slot.can.wider"
+                  (select)="resize(slot.tile.key, 1, 0, reasonOf($event), $event.source)"
+                >
+                  {{ t('wider') }}
+                </button>
+                <button
+                  slMenuItem
+                  shortcut="Shift+ArrowLeft"
+                  [disabled]="!slot.can.narrower"
+                  (select)="resize(slot.tile.key, -1, 0, reasonOf($event), $event.source)"
+                >
+                  {{ t('narrower') }}
+                </button>
+                <button
+                  slMenuItem
+                  shortcut="Shift+ArrowDown"
+                  [disabled]="!slot.can.taller"
+                  (select)="resize(slot.tile.key, 0, 1, reasonOf($event), $event.source)"
+                >
+                  {{ t('taller') }}
+                </button>
+                <button
+                  slMenuItem
+                  shortcut="Shift+ArrowUp"
+                  [disabled]="!slot.can.shorter"
+                  (select)="resize(slot.tile.key, 0, -1, reasonOf($event), $event.source)"
+                >
+                  {{ t('shorter') }}
+                </button>
+              }
+              @if (slot.tile.removable) {
+                @if (slot.tile.movable || slot.sizable) {
+                  <hr slMenuSeparator />
+                }
+                <button
+                  slMenuItem
+                  tone="danger"
+                  shortcut="Delete"
+                  (select)="hide(slot.tile.key, 'remove', $event.source)"
+                >
+                  {{ t('hide') }}
+                </button>
+              }
+            </sl-menu>
+          }
+          @if (isEditing() && slot.sizable) {
+            @for (edge of edges; track edge) {
+              <span
+                data-part="resize-handle"
+                aria-hidden="true"
+                [attr.data-edge]="edge"
+                [attr.data-active]="slot.edge === edge ? '' : null"
+                (pointerdown)="onResizePointerDown(slot.tile.key, edge, $event)"
+              ></span>
+            }
+          }
+          @if (slot.readout !== null) {
+            <span data-part="size-readout" aria-hidden="true" [attr.data-edge]="slot.edge">{{
+              slot.readout
+            }}</span>
+          }
+        </li>
+      }
+      @if (placeholder(); as style) {
+        <li data-part="placeholder" aria-hidden="true" [style]="style"></li>
+      }
+    </ul>
+    @if (slots().length === 0) {
+      <div data-part="empty">
+        <section slResultState status="empty" reach="section" live="polite">
+          <div slResultStateContent>
+            <div slResultStateTitle>{{ t('empty') }}</div>
+            @if (isEditing()) {
+              <p slResultStateDescription>{{ t('emptyEditing') }}</p>
+            }
+          </div>
+        </section>
+      </div>
+    }
+  `, styles: ["@layer slotted.components{[data-ui=dashboard-grid]{--_gap: var(--slotted-dashboard-grid-gap, var(--slotted-space-6, 1rem));--_row: var(--slotted-dashboard-grid-row-size, 4.5rem);--_cols: var(--_dg-columns-expanded, 12);--_radius: var(--slotted-card-radius, var(--slotted-radius-lg, 8px));--_accent: var(--slotted-dashboard-grid-accent, var(--slotted-tone-accent-solid, Highlight));container:dashboard-grid / inline-size;display:flex;flex-direction:column;gap:var(--_gap);min-inline-size:0}[data-ui=dashboard-grid]>[data-part=grid]{display:grid;gap:var(--_gap);grid-auto-rows:var(--_row);grid-template-columns:repeat(var(--_cols),minmax(0,1fr));list-style:none;margin:0;min-inline-size:0;padding:0;position:relative}[data-ui=dashboard-grid] [data-part=grid][hidden],[data-ui=dashboard-grid] [data-part=widget][hidden]{display:none}[data-ui=dashboard-grid] :is([data-part=widget],[data-part=placeholder]){grid-column:var(--_dg-x, auto) / span var(--_dg-w, 4);grid-row:var(--_dg-y, auto) / span var(--_dg-h, 2);min-block-size:0;min-inline-size:0}[data-ui=dashboard-grid] [data-part=widget]{display:flex;position:relative}@container dashboard-grid (width < 1024px){[data-ui=dashboard-grid]>[data-part=grid]{--_cols: var(--_dg-columns-medium, 6)}[data-ui=dashboard-grid] :is([data-part=widget],[data-part=placeholder]){grid-column:auto / span var(--_dg-span-medium, 3);grid-row:auto / span var(--_dg-h, 2)}}@container dashboard-grid (width < 600px){[data-ui=dashboard-grid]>[data-part=grid]{--_cols: var(--_dg-columns-compact, 1);grid-auto-rows:auto}[data-ui=dashboard-grid] :is([data-part=widget],[data-part=placeholder]){grid-column:1 / -1;grid-row:auto}[data-ui=dashboard-grid] [data-part=placeholder]{min-block-size:calc(var(--_row) * 2)}}[data-ui=dashboard-grid] [data-part=widget]>[data-ui=card]{flex:1 1 auto;min-block-size:0;min-inline-size:0;transition:box-shadow var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=dashboard-grid] [data-part=widget]>[data-ui=card]>[data-part=body]{--slotted-chart-plot-block-size: calc(var(--_row) * 1.5);display:flex;flex-direction:column;overflow:auto;position:relative}[data-ui=dashboard-grid] [data-part=widget]>[data-ui=card]>[data-part=body]>:not([data-part=busy-indicator]){flex:1 0 auto}[data-ui=dashboard-grid] [data-part=widget] [data-part=title]{-webkit-box-orient:vertical;color:var(--slotted-dashboard-grid-title-color, var(--slotted-text, CanvasText));display:-webkit-box;font-family:var( --slotted-dashboard-grid-title-font-family, var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) ) );font-size:var( --slotted-dashboard-grid-title-font-size, var(--slotted-font-size-md, .8125rem) );font-weight:var(--slotted-font-weight-semibold, 600);-webkit-line-clamp:2;line-clamp:2;line-height:var(--slotted-line-height-md, 1.5);margin:0;overflow:hidden;overflow-wrap:anywhere}[data-ui=dashboard-grid] [data-part=widget] [data-part=description]{color:var(--slotted-dashboard-grid-description-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-sm, .75rem);line-height:var(--slotted-line-height-sm, 1.5);margin:0;overflow-wrap:anywhere}[data-ui=dashboard-grid] [data-part=widget] [data-part=actions]{flex-wrap:nowrap;gap:var(--slotted-space-1, .125rem);margin-block:calc((var(--slotted-control-height-sm, 1.75rem) - var(--slotted-font-size-md, .8125rem) * var(--slotted-line-height-md, 1.5)) / -2)}[data-ui=dashboard-grid] [data-part=widget] [data-part=skeleton]{display:flex;flex-direction:column;min-block-size:var(--slotted-space-12, 4rem)}[data-ui=dashboard-grid] [data-part=widget] [data-part=skeleton]>[data-ui=skeleton]{block-size:auto;flex:1 1 auto;inline-size:100%}[data-ui=dashboard-grid] [data-part=widget] [data-part=message]{align-content:center;display:grid;justify-items:center}[data-ui=dashboard-grid] [data-part=widget] [data-part=busy-indicator]{background-color:var(--_accent);block-size:var(--slotted-border-width-medium, 2px);inset-block-start:0;inset-inline:0;opacity:.35;pointer-events:none;position:absolute}@media(prefers-reduced-motion:no-preference){[data-ui=dashboard-grid] [data-part=widget] [data-part=busy-indicator]{animation:slotted-dashboard-grid-busy var(--slotted-duration-loop-slow) linear infinite;background-color:transparent;background-image:linear-gradient(to right,transparent,var(--_accent) 50%,transparent);background-repeat:no-repeat;background-size:40% 100%;opacity:1}}@media(prefers-reduced-motion:reduce){[data-ui=dashboard-grid] [data-part=widget] [data-part=busy-indicator]{animation:none}}@keyframes slotted-dashboard-grid-busy{0%{background-position:-40% 0}to{background-position:140% 0}}[data-ui=dashboard-grid]>[data-part=edit-bar]{align-items:center;background-color:var( --slotted-dashboard-grid-edit-bar-background, var(--slotted-surface-raised, Canvas) );border:var(--slotted-border-width-thin, 1px) solid var(--slotted-dashboard-grid-edit-bar-border, var(--slotted-border-subtle, CanvasText));border-radius:var(--_radius);box-shadow:var(--slotted-shadow-xs);display:flex;flex-wrap:wrap;gap:var(--slotted-space-4, .5rem) var(--slotted-space-6, 1rem);padding-block:var(--slotted-space-4, .5rem);padding-inline:var(--slotted-space-6, 1rem) var(--slotted-space-4, .5rem)}@starting-style{[data-ui=dashboard-grid]>[data-part=edit-bar]{opacity:0;translate:0 calc(var(--slotted-space-4, .5rem) * -1)}}[data-ui=dashboard-grid]>[data-part=edit-bar]{transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=dashboard-grid]>[data-part=edit-bar]>[data-part=edit-status]{color:var(--slotted-text-muted, GrayText);flex:1 1 20rem;font-size:var(--slotted-font-size-sm, .75rem);line-height:var(--slotted-line-height-sm, 1.5);margin:0;min-inline-size:0}[data-ui=dashboard-grid]>[data-part=edit-bar]>[data-part=edit-actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-space-3, .375rem);justify-content:flex-end;margin-inline-start:auto}[data-ui=dashboard-grid]>[data-part=grid]:before{background-image:radial-gradient(circle at calc((100% - var(--_gap)) / 2) calc((100% - var(--_gap)) / 2),var(--slotted-dashboard-grid-lattice-color, var(--slotted-border-strong, currentColor)) var(--slotted-dashboard-grid-lattice-dot, 1.5px),transparent calc(var(--slotted-dashboard-grid-lattice-dot, 1.5px) + .75px));background-size:calc((100% + var(--_gap)) / var(--_cols)) calc(var(--_row) + var(--_gap));content:\"\";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=dashboard-grid][data-editing]>[data-part=grid]{min-block-size:calc(var(--_row) * 2 + var(--_gap))}[data-ui=dashboard-grid][data-editing]>[data-part=grid]:before{opacity:.7}[data-ui=dashboard-grid][data-gesture]>[data-part=grid]:before{opacity:1}@container dashboard-grid (width < 1024px){[data-ui=dashboard-grid]>[data-part=grid]:before{display:none}}[data-ui=dashboard-grid][data-editing] [data-part=widget][data-movable]>[data-ui=card]{cursor:grab}[data-ui=dashboard-grid][data-editing] [data-part=widget][data-movable]>[data-ui=card] :is(a,button,input,select,textarea,[tabindex]){cursor:auto}[data-ui=dashboard-grid][data-editing] [data-part=widget]:not([data-loading]):hover>[data-ui=card]{box-shadow:var(--slotted-shadow-sm)}[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle]{--_pill-inline: var(--slotted-dashboard-grid-handle-inline-size, 2.25rem);--_pill-block: var(--slotted-dashboard-grid-handle-block-size, 1rem);align-items:center;appearance:none;background-color:var(--slotted-control-surface, Canvas);block-size:var(--_pill-block);border:var(--slotted-border-width-thin, 1px) solid var(--slotted-control-border-color, ButtonBorder);border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-control-shadow);box-sizing:border-box;color:var(--slotted-text-muted, GrayText);cursor:grab;display:flex;font:inherit;inline-size:var(--_pill-inline);inset-block-start:calc(var(--_pill-block) / -2);inset-inline:0;justify-content:center;margin:0 auto;padding:0;position:absolute;touch-action:none;transition:background-color var(--slotted-duration-short) var(--slotted-easing-standard),border-color var(--slotted-duration-short) var(--slotted-easing-standard),color var(--slotted-duration-short) var(--slotted-easing-standard),opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter);z-index:2}@starting-style{[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle]{opacity:0;translate:0 var(--slotted-space-3, .375rem)}}[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle]:before{content:\"\";inset:calc((var(--slotted-target-min, 24px) - var(--_pill-block)) / -2) calc(var(--slotted-space-4, .5rem) * -1);position:absolute}[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle]>[data-ui=icon]{--slotted-icon-size: var(--slotted-dashboard-grid-handle-glyph-size, .875rem)}[data-ui=dashboard-grid][data-editing] [data-part=widget]:not([data-loading]):hover>[data-part=handle]{border-color:var(--slotted-border-strong, ButtonBorder);color:var(--slotted-text, CanvasText)}[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle]: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=dashboard-grid] [data-part=widget]:is([data-dragging],[data-resizing])>[data-part=handle],[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle][aria-expanded=true]{background-color:var(--_accent);border-color:var(--_accent);color:var(--slotted-tone-accent-on-solid, HighlightText)}[data-ui=dashboard-grid] [data-part=widget]>[data-part=resize-handle]{--_hit: var(--slotted-dashboard-grid-resize-hit, .75rem);--_mark: var(--slotted-border-strong, currentColor);opacity:0;position:absolute;touch-action:none;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard);z-index:2}[data-ui=dashboard-grid][data-editing] [data-part=widget]:not([data-loading]):hover>[data-part=resize-handle],[data-ui=dashboard-grid][data-editing] [data-part=widget]:focus-within>[data-part=resize-handle],[data-ui=dashboard-grid] [data-part=widget][data-resizing]>[data-part=resize-handle]{opacity:1}@media(pointer:coarse){[data-ui=dashboard-grid] [data-part=widget]>[data-part=resize-handle]{--_hit: var(--slotted-target-comfortable, 44px);opacity:1}[data-ui=dashboard-grid] [data-part=widget]>[data-part=handle]{--_pill-inline: var(--slotted-dashboard-grid-handle-inline-size-coarse, 2.75rem);--_pill-block: var(--slotted-dashboard-grid-handle-block-size-coarse, 1.25rem)}}[data-ui=dashboard-grid] [data-part=resize-handle]:before{background-color:var(--_mark);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inset:0;margin:auto;position:absolute;transition:background-color var(--slotted-duration-short) var(--slotted-easing-standard),block-size var(--slotted-duration-short) var(--slotted-easing-standard),inline-size var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=dashboard-grid] [data-part=resize-handle]:is([data-edge=start],[data-edge=end]){cursor:ew-resize;inline-size:var(--_hit);inset-block:calc(var(--_radius) + var(--_hit) / 2)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=start]{inset-inline-start:calc(var(--_hit) / -2)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=end]{inset-inline-end:calc(var(--_hit) / -2)}[data-ui=dashboard-grid] [data-part=resize-handle]:is([data-edge=start],[data-edge=end]):before{block-size:var(--slotted-dashboard-grid-resize-pill, 1.75rem);inline-size:var(--slotted-border-width-thick, 3px)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom]{block-size:var(--_hit);cursor:ns-resize;inset-block-end:calc(var(--_hit) / -2);inset-inline:calc(var(--_radius) + var(--_hit) / 2)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom]:before{block-size:var(--slotted-border-width-thick, 3px);inline-size:var(--slotted-dashboard-grid-resize-pill, 1.75rem)}[data-ui=dashboard-grid] [data-part=resize-handle]:is([data-edge=bottom-start],[data-edge=bottom-end]){block-size:calc(var(--_hit) * 1.5);inline-size:calc(var(--_hit) * 1.5);inset-block-end:calc(var(--_hit) / -2)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom-end]{cursor:nwse-resize;inset-inline-end:calc(var(--_hit) / -2)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom-start]{cursor:nesw-resize;inset-inline-start:calc(var(--_hit) / -2)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom-end]:dir(rtl){cursor:nesw-resize}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom-start]:dir(rtl){cursor:nwse-resize}[data-ui=dashboard-grid] [data-part=resize-handle]:is([data-edge=bottom-start],[data-edge=bottom-end]):before{background-color:transparent;block-size:var(--_radius);border-block-end:var(--slotted-border-width-thick, 3px) solid var(--_mark);border-radius:0;inline-size:var(--_radius);inset:auto;inset-block-end:calc(var(--_hit) / 2 - var(--slotted-border-width-thin, 1px));margin:0}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom-end]:before{border-end-end-radius:var(--_radius);border-inline-end:var(--slotted-border-width-thick, 3px) solid var(--_mark);inset-inline-end:calc(var(--_hit) / 2 - var(--slotted-border-width-thin, 1px))}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom-start]:before{border-end-start-radius:var(--_radius);border-inline-start:var(--slotted-border-width-thick, 3px) solid var(--_mark);inset-inline-start:calc(var(--_hit) / 2 - var(--slotted-border-width-thin, 1px))}[data-ui=dashboard-grid] [data-part=resize-handle]:not([data-disabled]):hover,[data-ui=dashboard-grid] [data-part=resize-handle][data-active]{--_mark: var(--_accent)}[data-ui=dashboard-grid] [data-part=resize-handle]:is([data-edge=start],[data-edge=end]):is(:not([data-disabled]):hover,[data-active]):before{block-size:var(--slotted-dashboard-grid-resize-pill-active, 2.75rem)}[data-ui=dashboard-grid] [data-part=resize-handle][data-edge=bottom]:is(:not([data-disabled]):hover,[data-active]):before{inline-size:var(--slotted-dashboard-grid-resize-pill-active, 2.75rem)}@container dashboard-grid (width < 1024px){[data-ui=dashboard-grid] [data-part=widget]>[data-part=resize-handle]:is([data-edge=start],[data-edge=bottom-start]){display:none}}@container dashboard-grid (width < 600px){[data-ui=dashboard-grid] [data-part=widget]>[data-part=resize-handle]{display:none}}[data-ui=dashboard-grid] [data-part=widget]:is([data-dragging],[data-resizing]){block-size:var(--_dg-origin-block-size);grid-column:auto;grid-row:auto;inline-size:var(--_dg-origin-inline-size);inset-block-start:var(--_dg-origin-block-start);inset-inline-start:var(--_dg-origin-inline-start);position:absolute;translate:var(--_dg-lift-x, 0) var(--_dg-lift-y, 0);z-index:3}[data-ui=dashboard-grid] [data-part=widget][data-dragging]{cursor:grabbing}[data-ui=dashboard-grid] [data-part=widget][data-dragging]>[data-ui=card]{box-shadow:var(--slotted-shadow-lg),0 0 0 var(--slotted-border-width-thin, 1px) color-mix(in oklab,var(--_accent) 60%,transparent)}[data-ui=dashboard-grid] [data-part=widget][data-resizing]>[data-ui=card]{box-shadow:var(--slotted-shadow-md),0 0 0 var(--slotted-border-width-thin, 1px) color-mix(in oklab,var(--_accent) 60%,transparent)}[data-ui=dashboard-grid]>[data-part=grid]>[data-part=placeholder]{background-color:color-mix(in oklab,var(--_accent) 10%,transparent);border:var(--slotted-border-width-thin, 1px) solid color-mix(in oklab,var(--_accent) 55%,transparent);border-radius:var(--_radius);box-sizing:border-box;pointer-events:none}[data-ui=dashboard-grid] [data-part=widget]>[data-part=size-readout]{background-color:var(--_accent);border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-shadow-sm);color:var(--slotted-tone-accent-on-solid, HighlightText);font-size:var(--slotted-font-size-xs, .6875rem);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);inset-block-end:var(--slotted-space-5, .75rem);inset-inline-end:var(--slotted-space-5, .75rem);line-height:var(--slotted-line-height-xs, 1.4);padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-4, .5rem);pointer-events:none;position:absolute;white-space:nowrap;z-index:4}[data-ui=dashboard-grid] [data-part=widget]>[data-part=size-readout][data-edge=start],[data-ui=dashboard-grid] [data-part=widget]>[data-part=size-readout][data-edge=bottom-start]{inset-inline:var(--slotted-space-5, .75rem) auto}[data-ui=dashboard-grid]>[data-part=empty]{min-block-size:calc(var(--_row) * 2 + var(--_gap))}}\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: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }, { type: i0.Output, args: ["layoutChange"] }], defaultLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultLayout", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }, { type: i0.Output, args: ["editingChange"] }], defaultEditing: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultEditing", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], editBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "editBar", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], layoutChangeRequest: [{ type: i0.Output, args: ["layoutChangeRequest"] }], editingChangeRequest: [{ type: i0.Output, args: ["editingChangeRequest"] }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], widgets: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SlDashboardWidget), { isSignal: true }] }] } });
+
+/** What the store holds under the key; a store that throws holds nothing. */
+function readStored(store, key) {
+    try {
+        return store?.getItem(key) ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+function defaultStorage() {
+    try {
+        return typeof window === 'undefined' ? null : window.localStorage;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * The reader's layout, kept across visits. The store is reached inside `try`
+ * both ways — a private window, a full quota or a blocked origin reads as
+ * nothing stored and writes nothing. The component itself never writes; the
+ * store and its key are the application's to name.
+ */
+function persistedDashboardLayout({ key, storage, defaultLayout = [], injector, }) {
+    const store = storage === undefined ? defaultStorage() : storage;
+    const text = readStored(store, key);
+    const layout = signal((text === null ? null : parseDashboardLayout(text)) ?? defaultLayout, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /* What the store already holds: the value just read is not written back,
+       so a reader who never changed anything stores nothing. An effect's first
+       run is deferred, so this compares values rather than counting runs. */
+    let held = layout();
+    effect(() => {
+        const next = layout();
+        untracked(() => {
+            if (next === held)
+                return;
+            held = next;
+            try {
+                store?.setItem(key, serializeDashboardLayout(next));
+            }
+            catch {
+                /* Nothing stored: the next visit starts from the default. */
+            }
+        });
+    }, injector === undefined ? {} : { injector });
+    return {
+        layout,
+        clear() {
+            try {
+                store?.removeItem(key);
+            }
+            catch {
+                /* Nothing to forget. */
+            }
+            held = defaultLayout;
+            layout.set(defaultLayout);
+        },
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DASHBOARD_GRID_DEFAULTS, SlDashboardGrid, SlDashboardGridIdFactory, SlDashboardPart, SlDashboardWidget, SlDashboardWidgetActions, SlDashboardWidgetEmptyAction, SlDashboardWidgetFooter, SlDashboardWidgetSkeleton, injectDashboardGridDefaults, persistedDashboardLayout, provideDashboardGridDefaults };
+//# sourceMappingURL=slotted-angular-dashboard-grid.mjs.map