@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-tile.mjs

@@ -0,0 +1,1404 @@
+import * as i0 from '@angular/core';
+import { Directive, InjectionToken, model, input, output, signal, contentChild, inject, computed, DestroyRef, ElementRef, NgZone, PLATFORM_ID, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, Renderer2, effect } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import { LucideGripVertical } from '@lucide/angular';
+import { MlvButtonClose, MlvButtonIcon } from '@malva-ui/core/button';
+import * as i1 from '@malva-ui/cdk/density';
+import { MLV_DENSITY_ELEMENT, provideMlvDensityContext, MlvDensityDirective } from '@malva-ui/cdk/density';
+import { MlvStructural, MlvRtlService } from '@malva-ui/cdk/utils';
+import { MLV_TILE_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import { RIGHT_ARROW, LEFT_ARROW, DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
+import Sortable from 'sortablejs';
+
+/** Marks a template as the action area rendered in a tile header. */
+class MlvTileActions extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTileActions, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvTileActions, isStandalone: true, selector: "[mlvTileActions]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTileActions, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvTileActions]' }]
+        }] });
+
+class MlvTileHeader extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTileHeader, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvTileHeader, isStandalone: true, selector: "[mlvTileHeader]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTileHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvTileHeader]',
+                }]
+        }] });
+
+/** Marks a template as the trailing action area rendered in a tile header. */
+class MlvTileTrailingActions extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTileTrailingActions, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvTileTrailingActions, isStandalone: true, selector: "[mlvTileTrailingActions]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTileTrailingActions, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvTileTrailingActions]' }]
+        }] });
+
+/** @internal Task 4 makes `MlvTile` provide this item context. */
+const MLV_TILE_ITEM_CONTEXT = new InjectionToken('MLV_TILE_ITEM_CONTEXT');
+
+/**
+ * @internal Cascading structural lock published by `MlvTiles` and `MlvTile`.
+ *
+ * Every compound level provides its own resolved signal, so a descendant reads
+ * the closest enclosing state with `skipSelf` and combines it with its own
+ * `locked` input. Deliberately absent from the public barrel, mirroring
+ * `MLV_TILE_ITEM_CONTEXT`.
+ */
+const MLV_TILE_LOCKED = new InjectionToken('MLV_TILE_LOCKED');
+
+const NO_LOCKED_TARGET_IDS = new Set();
+function createMlvTileDragSession(root, draggedTileId, accepts, lockedTargetIds = NO_LOCKED_TARGET_IDS) {
+    const nodeById = new Map();
+    const parentById = new Map();
+    const containers = [];
+    const excludedTargetIds = new Set();
+    const indexNode = (node, parentId, isDraggedOrDescendant) => {
+        if (nodeById.has(node.id))
+            return false;
+        const isExcluded = isDraggedOrDescendant || node.id === draggedTileId;
+        nodeById.set(node.id, node);
+        if (parentId !== undefined)
+            parentById.set(node.id, parentId);
+        if (isExcluded)
+            excludedTargetIds.add(node.id);
+        if (!node.acceptsChildren)
+            return true;
+        containers.push(node);
+        return node.children.every((child) => indexNode(child, node.id, isExcluded));
+    };
+    if (!indexNode(root, undefined, false))
+        return null;
+    const draggedTile = nodeById.get(draggedTileId);
+    if (!draggedTile || draggedTile === root)
+        return null;
+    // Locked targets are excluded structurally, before any policy runs, so an
+    // `accepts` callback returning `true` can never re-open a frozen subtree.
+    for (const lockedTargetId of lockedTargetIds) {
+        excludedTargetIds.add(lockedTargetId);
+    }
+    const allowedTargetIds = new Set();
+    for (const target of containers) {
+        if (!excludedTargetIds.has(target.id) &&
+            accepts(draggedTile, target, target.children)) {
+            allowedTargetIds.add(target.id);
+        }
+    }
+    return {
+        root,
+        draggedTile,
+        allowedTargetIds,
+        nodeById,
+        parentById,
+    };
+}
+function canEnterMlvTileTarget(session, targetTileId) {
+    return session?.allowedTargetIds.has(targetTileId) ?? false;
+}
+
+function moveMlvTileNode(root, request) {
+    if (request.sourceContainerId === request.targetContainerId &&
+        request.previousIndex === request.currentIndex) {
+        return root;
+    }
+    const index = createMlvTileTreeIndex(root);
+    if (!index || request.tileId === root.id)
+        return root;
+    const tile = index.nodeById.get(request.tileId);
+    const source = index.containerById.get(request.sourceContainerId);
+    const target = index.containerById.get(request.targetContainerId);
+    if (!tile ||
+        !source ||
+        !target ||
+        source.children[request.previousIndex] !== tile ||
+        isSameOrDescendant(index.parentById, tile.id, target.id) ||
+        !hasValidTargetIndex(source, target, request.currentIndex)) {
+        return root;
+    }
+    const changedChildrenById = new Map();
+    if (source.id === target.id) {
+        changedChildrenById.set(source.id, moveInContainer(source.children, request.previousIndex, request.currentIndex));
+    }
+    else {
+        changedChildrenById.set(source.id, removeFromContainer(source.children, request.previousIndex));
+        changedChildrenById.set(target.id, insertIntoContainer(target.children, request.currentIndex, tile));
+    }
+    return rebuildAffectedTree(root, changedChildrenById, collectAffectedContainerIds(index.parentById, source.id, target.id));
+}
+function insertMlvTileNode(root, request) {
+    const index = createMlvTileTreeIndex(root);
+    if (!index)
+        return root;
+    const target = index.containerById.get(request.targetContainerId);
+    if (!target)
+        return root;
+    const targetIndex = request.index ?? target.children.length;
+    if (!Number.isInteger(targetIndex) ||
+        targetIndex < 0 ||
+        targetIndex > target.children.length ||
+        !hasUnusedSubtreeIds(request.tile, index.nodeById)) {
+        return root;
+    }
+    return rebuildAffectedTree(root, new Map([
+        [
+            target.id,
+            insertIntoContainer(target.children, targetIndex, request.tile),
+        ],
+    ]), collectAffectedContainerIds(index.parentById, target.id));
+}
+function removeMlvTileNode(root, tileId) {
+    if (tileId === root.id)
+        return root;
+    const index = createMlvTileTreeIndex(root);
+    const tile = index?.nodeById.get(tileId);
+    if (!index || !tile)
+        return root;
+    const parentId = index.parentById.get(tile.id);
+    const parent = parentId !== undefined ? index.containerById.get(parentId) : undefined;
+    if (!parent)
+        return root;
+    const tileIndex = parent.children.indexOf(tile);
+    if (tileIndex < 0)
+        return root;
+    return rebuildAffectedTree(root, new Map([[parent.id, removeFromContainer(parent.children, tileIndex)]]), collectAffectedContainerIds(index.parentById, parent.id));
+}
+function updateMlvTileNodeProps(root, tileId, update) {
+    if (tileId === root.id)
+        return root;
+    const index = createMlvTileTreeIndex(root);
+    const tile = index?.nodeById.get(tileId);
+    if (!index || !tile)
+        return root;
+    const nextProps = update(tile.props);
+    if (nextProps === tile.props)
+        return root;
+    const parentId = index.parentById.get(tile.id);
+    const parent = parentId !== undefined ? index.containerById.get(parentId) : undefined;
+    if (!parent)
+        return root;
+    const tileIndex = parent.children.indexOf(tile);
+    if (tileIndex < 0)
+        return root;
+    const children = [...parent.children];
+    children[tileIndex] = {
+        ...tile,
+        props: nextProps,
+    };
+    return rebuildAffectedTree(root, new Map([[parent.id, children]]), collectAffectedContainerIds(index.parentById, parent.id));
+}
+function createMlvTileTreeIndex(root) {
+    const nodeById = new Map();
+    const containerById = new Map();
+    const parentById = new Map();
+    const indexNode = (node, parentId) => {
+        if (nodeById.has(node.id))
+            return false;
+        nodeById.set(node.id, node);
+        if (parentId !== undefined)
+            parentById.set(node.id, parentId);
+        if (!node.acceptsChildren)
+            return true;
+        containerById.set(node.id, node);
+        return node.children.every((child) => indexNode(child, node.id));
+    };
+    return indexNode(root, undefined)
+        ? { nodeById, containerById, parentById }
+        : null;
+}
+function hasUnusedSubtreeIds(node, existingNodeById) {
+    const insertedIds = new Set();
+    const visit = (current) => {
+        if (existingNodeById.has(current.id) || insertedIds.has(current.id)) {
+            return false;
+        }
+        insertedIds.add(current.id);
+        return current.acceptsChildren ? current.children.every(visit) : true;
+    };
+    return visit(node);
+}
+function hasValidTargetIndex(source, target, currentIndex) {
+    const maximumIndex = source.id === target.id
+        ? target.children.length - 1
+        : target.children.length;
+    return (Number.isInteger(currentIndex) &&
+        currentIndex >= 0 &&
+        currentIndex <= maximumIndex);
+}
+function isSameOrDescendant(parentById, tileId, targetId) {
+    let currentId = targetId;
+    while (currentId !== undefined) {
+        if (currentId === tileId)
+            return true;
+        currentId = parentById.get(currentId);
+    }
+    return false;
+}
+function moveInContainer(items, previousIndex, currentIndex) {
+    const result = [...items];
+    const [item] = result.splice(previousIndex, 1);
+    result.splice(currentIndex, 0, item);
+    return result;
+}
+function removeFromContainer(items, index) {
+    return [...items.slice(0, index), ...items.slice(index + 1)];
+}
+function insertIntoContainer(items, index, item) {
+    return [...items.slice(0, index), item, ...items.slice(index)];
+}
+function collectAffectedContainerIds(parentById, ...containerIds) {
+    const affectedIds = new Set();
+    for (const containerId of containerIds) {
+        let currentId = containerId;
+        while (currentId !== undefined) {
+            affectedIds.add(currentId);
+            currentId = parentById.get(currentId);
+        }
+    }
+    return affectedIds;
+}
+function rebuildAffectedTree(node, changedChildrenById, affectedContainerIds) {
+    if (!affectedContainerIds.has(node.id))
+        return node;
+    const originalChildren = changedChildrenById.get(node.id) ?? node.children;
+    let children = originalChildren;
+    for (let childIndex = 0; childIndex < originalChildren.length; childIndex += 1) {
+        const child = originalChildren[childIndex];
+        if (!child.acceptsChildren || !affectedContainerIds.has(child.id))
+            continue;
+        const rebuiltChild = rebuildAffectedTree(child, changedChildrenById, affectedContainerIds);
+        if (rebuiltChild === child)
+            continue;
+        if (children === originalChildren)
+            children = [...originalChildren];
+        children[childIndex] = rebuiltChild;
+    }
+    return children === node.children ? node : { ...node, children };
+}
+
+const acceptEveryTile = () => true;
+function createKeyboardMoveRequest(session, direction) {
+    if (!session)
+        return null;
+    const tileId = session.draggedTile.id;
+    const sourceContainerId = session.parentById.get(tileId);
+    if (sourceContainerId === undefined)
+        return null;
+    const source = session.nodeById.get(sourceContainerId);
+    if (!source?.acceptsChildren)
+        return null;
+    const previousIndex = source.children.findIndex(({ id }) => id === tileId);
+    if (previousIndex < 0)
+        return null;
+    if (direction === 'up' || direction === 'down') {
+        const currentIndex = previousIndex + (direction === 'up' ? -1 : 1);
+        if (currentIndex < 0 ||
+            currentIndex >= source.children.length ||
+            !session.allowedTargetIds.has(sourceContainerId)) {
+            return null;
+        }
+        return {
+            tileId,
+            sourceContainerId,
+            targetContainerId: sourceContainerId,
+            previousIndex,
+            currentIndex,
+        };
+    }
+    if (direction === 'left') {
+        const targetContainerId = session.parentById.get(sourceContainerId);
+        if (targetContainerId === undefined)
+            return null;
+        const target = session.nodeById.get(targetContainerId);
+        if (!target?.acceptsChildren ||
+            !session.allowedTargetIds.has(targetContainerId)) {
+            return null;
+        }
+        const sourceIndex = target.children.findIndex(({ id }) => id === sourceContainerId);
+        if (sourceIndex < 0)
+            return null;
+        return {
+            tileId,
+            sourceContainerId,
+            targetContainerId,
+            previousIndex,
+            currentIndex: sourceIndex + 1,
+        };
+    }
+    // Prefer the nearest preceding eligible sibling container, then fall back to
+    // the nearest following one so the first tile in a list can still indent.
+    for (let index = previousIndex - 1; index >= 0; index -= 1) {
+        const request = createIndentRequest(session, source.children[index], tileId, sourceContainerId, previousIndex);
+        if (request)
+            return request;
+    }
+    for (let index = previousIndex + 1; index < source.children.length; index += 1) {
+        const request = createIndentRequest(session, source.children[index], tileId, sourceContainerId, previousIndex);
+        if (request)
+            return request;
+    }
+    return null;
+}
+function createIndentRequest(session, target, tileId, sourceContainerId, previousIndex) {
+    if (!target.acceptsChildren || !session.allowedTargetIds.has(target.id)) {
+        return null;
+    }
+    return {
+        tileId,
+        sourceContainerId,
+        targetContainerId: target.id,
+        previousIndex,
+        currentIndex: target.children.length,
+    };
+}
+function findParentContainerId(root, tileId) {
+    const visit = (container) => {
+        for (const child of container.children) {
+            if (child.id === tileId)
+                return container.id;
+            if (!child.acceptsChildren)
+                continue;
+            const match = visit(child);
+            if (match !== undefined)
+                return match;
+        }
+        return undefined;
+    };
+    return visit(root);
+}
+class MlvTileTreeCoordinator {
+    _options;
+    _containers = new Map();
+    _items = new Map();
+    _activeSession = null;
+    _registrationOrder = 0;
+    constructor(_options) {
+        this._options = _options;
+    }
+    bindTree(root) {
+        if (!this._options.isRoot) {
+            throw new Error('Nested mlv-tiles must inherit the root tree.');
+        }
+        this._options.setRoot(root);
+    }
+    start() {
+        const root = this._options.readRoot();
+        if (!root && this._options.isRoot) {
+            throw new Error('Root mlv-tiles requires [(tree)].');
+        }
+        if (!root) {
+            throw new Error('Nested mlv-tiles must inherit the root tree.');
+        }
+        return root;
+    }
+    registerContainer(registration) {
+        const isNewRegistration = !this._containers.has(registration);
+        this._retain(this._containers, registration);
+        if (isNewRegistration && this._activeSession) {
+            registration.canEnter(canEnterMlvTileTarget(this._activeSession, registration.id));
+        }
+        let registered = true;
+        return () => {
+            if (!registered)
+                return;
+            registered = false;
+            this._release(this._containers, registration);
+        };
+    }
+    registerItem(registration) {
+        this._retain(this._items, registration);
+        let registered = true;
+        return () => {
+            if (!registered)
+                return;
+            registered = false;
+            this._release(this._items, registration);
+        };
+    }
+    targets() {
+        return [...this._containers.entries()]
+            .sort(([firstRegistration, firstEntry], [secondRegistration, secondEntry]) => secondRegistration.depth - firstRegistration.depth ||
+            firstEntry.order - secondEntry.order)
+            .map(([registration]) => registration);
+    }
+    item(id) {
+        return [...this._items.keys()].find((registration) => registration.id === id);
+    }
+    activeSession() {
+        return this._activeSession;
+    }
+    startDrag(tileId) {
+        const root = this.start();
+        const { policyByContainerId, lockedContainerIds } = this._createPolicyIndex(root);
+        const session = createMlvTileDragSession(root, tileId, (_draggedTile, targetTile, innerTiles) => (policyByContainerId.get(targetTile.id) ?? acceptEveryTile)(_draggedTile, targetTile, innerTiles), lockedContainerIds);
+        this._activeSession = session;
+        for (const target of this._containers.keys()) {
+            target.canEnter(canEnterMlvTileTarget(session, target.id));
+        }
+        return session;
+    }
+    endDrag() {
+        this._activeSession = null;
+        for (const target of this._containers.keys())
+            target.canEnter(false);
+    }
+    moveByKeyboard(tileId, direction) {
+        const session = this.startDrag(tileId);
+        try {
+            const request = createKeyboardMoveRequest(session, direction);
+            return request && this.move(request) ? request : null;
+        }
+        finally {
+            this.endDrag();
+        }
+    }
+    move(request) {
+        const root = this.start();
+        if (this._activeSession &&
+            (this._activeSession.draggedTile.id !== request.tileId ||
+                !canEnterMlvTileTarget(this._activeSession, request.targetContainerId))) {
+            return false;
+        }
+        const nextRoot = moveMlvTileNode(root, request);
+        if (nextRoot === root)
+            return false;
+        this._options.setRoot(nextRoot);
+        this._options.moved(request);
+        return true;
+    }
+    insert(request) {
+        const root = this.start();
+        if (this._createPolicyIndex(root).lockedContainerIds.has(request.targetContainerId)) {
+            return false;
+        }
+        const nextRoot = insertMlvTileNode(root, request);
+        if (nextRoot === root)
+            return false;
+        this._options.setRoot(nextRoot);
+        return true;
+    }
+    remove(tileId) {
+        const root = this.start();
+        if (this._isLockedNode(root, tileId))
+            return false;
+        const nextRoot = removeMlvTileNode(root, tileId);
+        if (nextRoot === root)
+            return false;
+        this._options.setRoot(nextRoot);
+        return true;
+    }
+    /**
+     * @internal Whether a node is structurally frozen: it is itself a locked
+     * container, or it sits directly inside one. Reads the same locked set the
+     * drag session uses, so an unlocked container cannot reach into a locked
+     * subtree by ID.
+     */
+    isLocked(tileId) {
+        let root;
+        try {
+            root = this.start();
+        }
+        catch {
+            return false;
+        }
+        return this._isLockedNode(root, tileId);
+    }
+    updateProps(tileId, update) {
+        const root = this.start();
+        const nextRoot = updateMlvTileNodeProps(root, tileId, update);
+        if (nextRoot === root)
+            return false;
+        this._options.setRoot(nextRoot);
+        return true;
+    }
+    /** @private Resolves the structural lock for one node against the cached set. */
+    _isLockedNode(root, tileId) {
+        const { lockedContainerIds } = this._createPolicyIndex(root);
+        if (lockedContainerIds.has(tileId))
+            return true;
+        const parentContainerId = findParentContainerId(root, tileId);
+        return (parentContainerId !== undefined &&
+            lockedContainerIds.has(parentContainerId));
+    }
+    _createPolicyIndex(root) {
+        const registrationById = new Map();
+        for (const registration of this._containers.keys()) {
+            if (!registrationById.has(registration.id)) {
+                registrationById.set(registration.id, registration);
+            }
+        }
+        const policyByContainerId = new Map();
+        const lockedContainerIds = new Set();
+        const index = (node, inherited, inheritedLocked) => {
+            if (!node.acceptsChildren)
+                return;
+            const registration = registrationById.get(node.id);
+            const policy = registration?.accepts ?? inherited;
+            const locked = inheritedLocked || registration?.locked() === true;
+            policyByContainerId.set(node.id, policy);
+            if (locked)
+                lockedContainerIds.add(node.id);
+            for (const child of node.children)
+                index(child, policy, locked);
+        };
+        index(root, acceptEveryTile, false);
+        return { policyByContainerId, lockedContainerIds };
+    }
+    _retain(registrations, registration) {
+        const current = registrations.get(registration);
+        if (current) {
+            current.references += 1;
+            return;
+        }
+        registrations.set(registration, {
+            order: this._registrationOrder,
+            references: 1,
+        });
+        this._registrationOrder += 1;
+    }
+    _release(registrations, registration) {
+        const current = registrations.get(registration);
+        if (!current)
+            return;
+        current.references -= 1;
+        if (current.references === 0)
+            registrations.delete(registration);
+    }
+}
+
+/** Marks a template as the empty-target prompt rendered by `mlv-tiles`. */
+class MlvTilesEmpty extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTilesEmpty, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvTilesEmpty, isStandalone: true, selector: "[mlvTilesEmpty]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTilesEmpty, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvTilesEmpty]' }]
+        }] });
+
+const ITEM_ROOT_CLASS = 'mlv-tiles__item-root';
+const ITEM_ID_ATTRIBUTE = 'data-mlv-tile-id';
+const ITEM_DISABLED_ATTRIBUTE = 'data-mlv-tile-drag-disabled';
+const SORTABLE_CHOSEN_CLASS = 'mlv-tiles__sortable-chosen';
+const SORTABLE_DRAG_CLASS = 'mlv-tiles__sortable-drag';
+const SORTABLE_FALLBACK_CLASS = 'mlv-tiles__sortable-fallback';
+const SORTABLE_GHOST_CLASS = 'mlv-tiles__sortable-ghost';
+const SORTABLE_ANIMATION_MS = 200;
+let nextGroupId = 0;
+const tilesByHost = new WeakMap();
+class MlvTiles {
+    /** Root-owned immutable tree. Nested containers inherit this binding. */
+    tree = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tree" }] : /* istanbul ignore next */ []));
+    /** Controls the projected tile layout. */
+    layout = input('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Optionally overrides the inherited acceptance policy for this subtree. */
+    accepts = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accepts" }] : /* istanbul ignore next */ []));
+    /**
+     * Freezes this container and its entire subtree: no tile can be dropped in,
+     * no descendant tile can be picked up, and built-in structural affordances
+     * are withdrawn. Cascades to nested `mlv-tiles` and `mlv-tile`. Evaluated
+     * before `accepts`, so an acceptance policy cannot re-open a locked target.
+     */
+    locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Overrides the localized empty-target prompt with a plain string. A
+     * projected `[mlvTilesEmpty]` template takes precedence over this input.
+     */
+    emptyLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyLabel" }] : /* istanbul ignore next */ []));
+    /** Emits after the root tree has been replaced by a successful move. */
+    moved = output();
+    /** Current cached acceptance state for this rendered target. */
+    dropState = signal('idle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropState" }] : /* istanbul ignore next */ []));
+    /** @protected Consumer-owned empty state projected via `[mlvTilesEmpty]`. */
+    emptyRef = contentChild(MlvTilesEmpty, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyRef" }] : /* istanbul ignore next */ []));
+    _parentTiles = inject(MlvTiles, {
+        optional: true,
+        skipSelf: true,
+    });
+    /** @private Closest enclosing lock, published by a tile or outer container. */
+    _inheritedLocked = inject(MLV_TILE_LOCKED, {
+        optional: true,
+        skipSelf: true,
+    });
+    /**
+     * @internal Resolved lock for this level, inherited state included. Published
+     * through `MLV_TILE_LOCKED` so every descendant container and tile sees it.
+     */
+    lockedState = computed(() => this._inheritedLocked?.() === true || this.locked(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lockedState" }] : /* istanbul ignore next */ []));
+    _itemContext = inject(MLV_TILE_ITEM_CONTEXT, {
+        optional: true,
+    });
+    _destroyRef = inject(DestroyRef);
+    _elementRef = inject((ElementRef));
+    _ngZone = inject(NgZone);
+    _platformId = inject(PLATFORM_ID);
+    /** @protected Localized keyboard instructions rendered by the root list. */
+    _i18n = inject(MLV_TILE_I18N);
+    _i18nResolver = inject(MlvI18nResolverService);
+    _rootTiles = this._parentTiles?._rootTiles ?? this;
+    _groupName = this._parentTiles?._groupName ?? `mlv-tiles-${nextGroupId++}`;
+    /** @protected Root-only assistive text is projected once per compound tree. */
+    _isRoot = this._parentTiles === null;
+    /** @protected Polite keyboard movement feedback shared by nested lists. */
+    _keyboardAnnouncement = this._parentTiles?._keyboardAnnouncement ?? signal('');
+    _announcementSequence = 0;
+    _sortable = null;
+    _activeDrag = null;
+    /** @private Current container node represented by this rendered list. */
+    _target = computed(() => {
+        const target = this._parentTiles ? this._itemContext?.tile() : this.tree();
+        return target?.acceptsChildren ? target : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_target" }] : /* istanbul ignore next */ []));
+    /** @internal Shared root coordinator used by all nested containers. */
+    coordinator = this._parentTiles?.coordinator ??
+        new MlvTileTreeCoordinator({
+            isRoot: true,
+            readRoot: () => this.tree(),
+            setRoot: (root) => this.tree.set(root),
+            moved: (event) => this.moved.emit(event),
+        });
+    /** @internal Compound nesting depth used for target registration order. */
+    depth = (this._parentTiles?.depth ?? -1) + 1;
+    /** Stable target ID derived from the root or the enclosing item context. */
+    targetId = computed(() => this._target()?.id, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetId" }] : /* istanbul ignore next */ []));
+    /** Whether this target currently has no direct child tiles. */
+    isEmpty = computed(() => {
+        const target = this._target();
+        return target ? target.children.length === 0 : false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    ngOnChanges(changes) {
+        if (this._parentTiles && changes['tree']) {
+            throw new Error('Nested mlv-tiles must inherit the root tree.');
+        }
+    }
+    ngOnInit() {
+        if (!this._parentTiles)
+            this.coordinator.start();
+        const id = this.targetId();
+        if (id === undefined) {
+            throw new Error(this._parentTiles
+                ? 'Nested mlv-tiles requires an enclosing tile item.'
+                : 'Root mlv-tiles requires [(tree)].');
+        }
+        const readAccepts = () => this.accepts();
+        const registration = {
+            id,
+            depth: this.depth,
+            get accepts() {
+                return readAccepts();
+            },
+            locked: () => this.lockedState(),
+            canEnter: (allowed) => {
+                this.dropState.set(this.coordinator.activeSession()
+                    ? allowed
+                        ? 'valid'
+                        : 'invalid'
+                    : 'idle');
+            },
+        };
+        const unregister = this.coordinator.registerContainer(registration);
+        this._destroyRef.onDestroy(unregister);
+    }
+    ngAfterViewInit() {
+        if (!isPlatformBrowser(this._platformId))
+            return;
+        const host = this._elementRef.nativeElement;
+        tilesByHost.set(host, this);
+        this._ngZone.runOutsideAngular(() => {
+            this._sortable = Sortable.create(host, this._sortableOptions());
+        });
+        this._destroyRef.onDestroy(() => {
+            this._rootTiles._cancelActiveDrag();
+            this._sortable?.destroy();
+            this._sortable = null;
+            tilesByHost.delete(host);
+        });
+    }
+    /** @internal Resolves the direct consumer wrapper Sortable may animate. */
+    resolveItemRoot(tileHost) {
+        const listHost = this._elementRef.nativeElement;
+        let itemRoot = tileHost;
+        while (itemRoot.parentElement && itemRoot.parentElement !== listHost) {
+            itemRoot = itemRoot.parentElement;
+        }
+        return itemRoot.parentElement === listHost ? itemRoot : tileHost;
+    }
+    /**
+     * Inserts a node into this container through the root-owned immutable tree.
+     *
+     * @param tile - Node to insert. Neither it nor any node in its subtree may
+     *   reuse an ID that already exists in the tree.
+     * @param index - Position among this container's direct children. Omitted
+     *   appends; a non-integer, negative, or out-of-range index is rejected
+     *   rather than clamped.
+     * @returns `true` when the root tree was replaced, `false` on any rejection.
+     *   Always `false` while this container is locked.
+     */
+    insert(tile, index) {
+        const targetContainerId = this.targetId();
+        if (targetContainerId === undefined)
+            return false;
+        if (this.lockedState()) {
+            this._warnDev('MlvTiles.insert() is disabled while the container is locked.');
+            return false;
+        }
+        return this.coordinator.insert({ targetContainerId, tile, index });
+    }
+    /**
+     * Removes a registered item from this compound tree through the root-owned
+     * immutable tree.
+     *
+     * @param tileId - Stable ID of the node to remove.
+     * @returns `true` when the root tree was replaced, `false` on any rejection.
+     *   Always `false` when the node — or the container holding it — is locked,
+     *   so an unlocked container cannot reach into a locked subtree by ID.
+     */
+    remove(tileId) {
+        if (this.coordinator.isLocked(tileId)) {
+            this._warnDev('MlvTiles.remove() is disabled while the target subtree is locked.');
+            return false;
+        }
+        return this.coordinator.remove(tileId);
+    }
+    /** @internal Updates a registered item's props through the root immutable tree. */
+    updateProps(tileId, update) {
+        this.coordinator.updateProps(tileId, update);
+    }
+    /** @internal Associates every tree handle with one discoverable instruction. */
+    keyboardInstructionsId() {
+        return `${this._groupName}-keyboard-instructions`;
+    }
+    /** @internal Executes and announces a stable-ID keyboard tree operation. */
+    moveByKeyboard(tileId, direction, label) {
+        const request = this.coordinator.moveByKeyboard(tileId, direction);
+        const announcementKey = request
+            ? direction === 'up'
+                ? 'movedUp'
+                : direction === 'down'
+                    ? 'movedDown'
+                    : direction === 'left'
+                        ? 'movedOut'
+                        : 'movedInto'
+            : 'moveRejected';
+        const announcement = this._i18nResolver.resolve(this._i18n(), announcementKey, { label });
+        this._rootTiles._announceKeyboardMove(announcement);
+        this._rootTiles._restoreKeyboardFocus(tileId);
+    }
+    _sortableOptions() {
+        return {
+            animation: this._prefersReducedMotion() ? 0 : SORTABLE_ANIMATION_MS,
+            chosenClass: SORTABLE_CHOSEN_CLASS,
+            dragClass: SORTABLE_DRAG_CLASS,
+            draggable: `.${ITEM_ROOT_CLASS}`,
+            dragoverBubble: false,
+            easing: 'var(--mlv-ease-in-out-strong)',
+            fallbackClass: SORTABLE_FALLBACK_CLASS,
+            fallbackOnBody: true,
+            // Dragging is already gated to the dedicated `.mlv-tile__drag-handle`
+            // grip (see `handle` below), which has no competing click action of its
+            // own (grab-only; keyboard users move tiles with Alt+Arrow instead), so
+            // there is no click-vs-drag ambiguity left for a movement tolerance to
+            // resolve. `touch-action: none` on the handle (tile.scss) already stops
+            // the browser treating a handle touch as a page scroll. A non-zero
+            // tolerance here only added a dead-feeling few-pixel delay before every
+            // drag start, so it drops to 0 — SortableJS's own library default.
+            fallbackTolerance: 0,
+            filter: `[${ITEM_DISABLED_ATTRIBUTE}="true"]`,
+            preventOnFilter: false,
+            forceFallback: true,
+            ghostClass: SORTABLE_GHOST_CLASS,
+            group: {
+                name: this._groupName,
+                pull: true,
+                put: (_to, _from, item) => this._canReceive(item),
+            },
+            handle: '.mlv-tile__drag-handle',
+            scroll: true,
+            onClone: (event) => this._sanitizeClone(event.clone),
+            onStart: (event) => this._startSortableDrag(event),
+            onMove: (event, originalEvent) => this._canMove(event, originalEvent),
+            onEnd: (event) => this._rootTiles._endSortableDrag(event),
+        };
+    }
+    _sanitizeClone(clone) {
+        clone.setAttribute('aria-hidden', 'true');
+        clone.setAttribute('inert', '');
+        clone.removeAttribute('id');
+        clone.querySelectorAll('[id]').forEach((element) => {
+            element.removeAttribute('id');
+        });
+        // A CSS animation outranks an inline declaration, so any consumer entrance
+        // animation on the item root would own `transform` on this clone and defeat
+        // the inline transform the engine writes on every pointer move — the clone
+        // would read its own offset back as identity and never follow the pointer.
+        // The clone is a transient engine artifact; it never replays consumer
+        // motion. Set inline so it also wins over a stylesheet `animation`.
+        clone.style.animation = 'none';
+    }
+    _startSortableDrag(event) {
+        const item = event.item;
+        const tileId = item.getAttribute(ITEM_ID_ATTRIBUTE);
+        if (tileId === null ||
+            item.getAttribute(ITEM_DISABLED_ATTRIBUTE) === 'true') {
+            return;
+        }
+        const fallbackClone = Sortable.ghost;
+        if (fallbackClone && fallbackClone !== item) {
+            this._sanitizeClone(fallbackClone);
+        }
+        this._rootTiles._cancelActiveDrag();
+        const session = this._ngZone.run(() => this.coordinator.startDrag(tileId));
+        const registration = this.coordinator.item(tileId);
+        const sourceContainerId = session?.parentById.get(tileId);
+        const previousIndex = event.oldDraggableIndex ?? this._draggableIndex(item, event.from);
+        if (!session ||
+            !registration ||
+            sourceContainerId !== this.targetId() ||
+            previousIndex < 0) {
+            this._ngZone.run(() => this.coordinator.endDrag());
+            return;
+        }
+        this._rootTiles._activeDrag = {
+            tileId,
+            source: this,
+            sourceElement: event.from,
+            item,
+            nextSibling: item.nextSibling,
+            previousIndex,
+            originalStyle: item.getAttribute('style'),
+            originalDraggable: item.getAttribute('draggable'),
+            registration,
+            sessionRoot: session.root,
+        };
+    }
+    _endSortableDrag(event) {
+        const active = this._activeDrag;
+        if (!active)
+            return;
+        if (active.item !== event.item) {
+            this._cancelActiveDrag();
+            return;
+        }
+        this._activeDrag = null;
+        const canRestoreItem = this._canRestoreSortableItem(active);
+        const isFresh = canRestoreItem && this._isActiveDragFresh(active);
+        const target = tilesByHost.get(event.to);
+        const targetContainerId = target?.targetId();
+        const currentIndex = event.newDraggableIndex ?? this._draggableIndex(event.item, event.to);
+        const session = this.coordinator.activeSession();
+        const sourceContainerId = active.source.targetId();
+        const request = isFresh &&
+            target &&
+            target.coordinator === this.coordinator &&
+            sourceContainerId !== undefined &&
+            targetContainerId !== undefined &&
+            currentIndex >= 0 &&
+            session?.draggedTile.id === active.tileId &&
+            session.allowedTargetIds.has(targetContainerId)
+            ? {
+                tileId: active.tileId,
+                sourceContainerId,
+                targetContainerId,
+                previousIndex: active.previousIndex,
+                currentIndex,
+            }
+            : null;
+        if (canRestoreItem) {
+            this._restoreSortableItem(active);
+        }
+        else {
+            this._cleanupSortableItem(active);
+        }
+        this._ngZone.run(() => {
+            try {
+                if (request)
+                    this.coordinator.move(request);
+            }
+            finally {
+                this.coordinator.endDrag();
+            }
+        });
+    }
+    _cancelActiveDrag() {
+        const active = this._activeDrag;
+        if (!active)
+            return;
+        this._activeDrag = null;
+        if (this._canRestoreSortableItem(active)) {
+            this._restoreSortableItem(active);
+        }
+        else {
+            this._cleanupSortableItem(active);
+        }
+        active.source._ngZone.run(() => this.coordinator.endDrag());
+    }
+    _restoreSortableItem(active) {
+        const { item, sourceElement, nextSibling } = active;
+        if (nextSibling?.parentNode === sourceElement) {
+            sourceElement.insertBefore(item, nextSibling);
+        }
+        else {
+            sourceElement.appendChild(item);
+        }
+        this._cleanupSortableItem(active);
+    }
+    _cleanupSortableItem(active) {
+        const { item } = active;
+        item.classList.remove(SORTABLE_CHOSEN_CLASS, SORTABLE_DRAG_CLASS, SORTABLE_FALLBACK_CLASS, SORTABLE_GHOST_CLASS);
+        this._restoreAttribute(item, 'style', active.originalStyle);
+        this._restoreAttribute(item, 'draggable', active.originalDraggable);
+    }
+    _canRestoreSortableItem(active) {
+        return (active.item.isConnected &&
+            active.sourceElement.isConnected &&
+            this.coordinator.item(active.tileId) === active.registration);
+    }
+    _isActiveDragFresh(active) {
+        const session = this.coordinator.activeSession();
+        let currentRoot;
+        try {
+            currentRoot = this.coordinator.start();
+        }
+        catch {
+            return false;
+        }
+        return (session?.root === active.sessionRoot &&
+            currentRoot === active.sessionRoot &&
+            session.draggedTile.id === active.tileId);
+    }
+    _announceKeyboardMove(message) {
+        const sequence = ++this._announcementSequence;
+        this._keyboardAnnouncement.set('');
+        queueMicrotask(() => {
+            if (this._destroyRef.destroyed ||
+                sequence !== this._announcementSequence) {
+                return;
+            }
+            this._keyboardAnnouncement.set(message);
+        });
+    }
+    _restoreKeyboardFocus(tileId) {
+        queueMicrotask(() => {
+            if (this._destroyRef.destroyed)
+                return;
+            const rootElement = this._elementRef.nativeElement;
+            const item = Array.from(rootElement.querySelectorAll(`.${ITEM_ROOT_CLASS}[${ITEM_ID_ATTRIBUTE}]`)).find((candidate) => candidate.getAttribute(ITEM_ID_ATTRIBUTE) === tileId);
+            item?.querySelector('.mlv-tile__drag-handle')?.focus();
+        });
+    }
+    _restoreAttribute(element, name, value) {
+        if (value === null)
+            element.removeAttribute(name);
+        else
+            element.setAttribute(name, value);
+    }
+    _canReceive(item) {
+        const session = this.coordinator.activeSession();
+        const targetId = this.targetId();
+        return (session !== null &&
+            session.draggedTile.id === item.getAttribute(ITEM_ID_ATTRIBUTE) &&
+            targetId !== undefined &&
+            session.allowedTargetIds.has(targetId));
+    }
+    _canMove(event, originalEvent) {
+        const target = tilesByHost.get(event.to);
+        if (!target || target.coordinator !== this.coordinator)
+            return false;
+        const deepestTarget = this._eventTargetTiles(originalEvent);
+        if (deepestTarget && deepestTarget !== target)
+            return false;
+        return target._canReceive(event.dragged);
+    }
+    _eventTargetTiles(event) {
+        const path = event.composedPath?.() ?? [];
+        const firstElement = path.find((entry) => entry instanceof HTMLElement);
+        let element = firstElement ??
+            (event.target instanceof HTMLElement ? event.target : null);
+        while (element) {
+            const tiles = tilesByHost.get(element);
+            if (tiles?.coordinator === this.coordinator)
+                return tiles;
+            element = element.parentElement;
+        }
+        return null;
+    }
+    _draggableIndex(item, container) {
+        return Array.from(container.children)
+            .filter((candidate) => candidate instanceof HTMLElement &&
+            candidate.classList.contains(ITEM_ROOT_CLASS))
+            .indexOf(item);
+    }
+    /** @private Single development-only channel for rejected tree operations. */
+    _warnDev(message) {
+        if (typeof ngDevMode === 'undefined' || ngDevMode)
+            console.warn(message);
+    }
+    _prefersReducedMotion() {
+        return (typeof matchMedia === 'function' &&
+            matchMedia('(prefers-reduced-motion: reduce)').matches);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTiles, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvTiles, isStandalone: true, selector: "mlv-tiles", inputs: { tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, accepts: { classPropertyName: "accepts", publicName: "accepts", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tree: "treeChange", moved: "moved" }, host: { properties: { "class.mlv-tiles--layout-list": "layout() === \"list\"", "class.mlv-tiles--grid": "layout() === \"grid\"", "class.mlv-tiles--valid": "dropState() === \"valid\"", "class.mlv-tiles--invalid": "dropState() === \"invalid\"", "class.mlv-tiles--sorting": "dropState() !== \"idle\"", "class.mlv-tiles--locked": "lockedState()", "class.mlv-tiles--nested": "depth > 0", "style.--mlv-tiles-depth": "depth", "attr.data-mlv-tiles-id": "targetId()" }, classAttribute: "mlv-tiles" }, providers: [
+            {
+                provide: MLV_TILE_LOCKED,
+                useFactory: (tiles) => tiles.lockedState,
+                deps: [forwardRef(() => MlvTiles)],
+            },
+        ], queries: [{ propertyName: "emptyRef", first: true, predicate: MlvTilesEmpty, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content />\n@if (_isRoot) {\n<span class=\"cdk-visually-hidden\" [id]=\"keyboardInstructionsId()\"\n  >{{ _i18n().keyboardInstructions }}</span\n>\n<span\n  class=\"cdk-visually-hidden mlv-tiles__keyboard-status\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n  >{{ _keyboardAnnouncement() }}</span\n>\n}\n<span\n  class=\"mlv-tiles__restriction\"\n  [class.mlv-tiles__restriction--visible]=\"dropState() === 'invalid'\"\n  [attr.aria-hidden]=\"dropState() === 'invalid' ? null : 'true'\"\n  >{{ _i18n().restrictedTarget }}</span\n>\n@if (isEmpty() && !lockedState()) {\n<div\n  class=\"mlv-tiles__empty\"\n  [class.mlv-tiles__empty--projected]=\"emptyRef() !== undefined\"\n>\n  @if (emptyRef(); as emptyTpl) {\n  <ng-container [ngTemplateOutlet]=\"emptyTpl.templateRef\" />\n  } @else { {{ emptyLabel() ?? _i18n().emptyTarget }} }\n</div>\n}\n", styles: ["@layer mlv.components{@media(prefers-reduced-motion:reduce){.mlv-tiles,.mlv-tiles *,.mlv-tiles:before,.mlv-tiles:after,[class^=mlv-tiles__],[class*=\" mlv-tiles__\"],[class^=mlv-tiles--],[class*=\" mlv-tiles--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}.mlv-tiles{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-tiles *{box-sizing:border-box}.mlv-tiles{container-type:inline-size;position:relative;min-inline-size:0;inline-size:100%;border:var(--mlv-stroke-width) dashed transparent;border-radius:var(--mlv-radius-l)}.mlv-tiles--layout-list{display:flex;flex-direction:column;gap:max(var(--mlv-spacing-1),var(--mlv-spacing-3) - var(--mlv-tiles-depth, 0) * var(--mlv-spacing-0-5))}.mlv-tiles--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--mlv-tiles-min-column, 20rem)),1fr));align-items:start;gap:var(--mlv-spacing-3)}.mlv-tiles--valid{border-color:var(--mlv-border-focus)}.mlv-tiles--invalid{border-color:var(--mlv-border-error)}.mlv-tiles--locked.mlv-tiles--valid,.mlv-tiles--locked.mlv-tiles--invalid{border-color:transparent}.mlv-tiles__restriction{position:absolute;inset-block-start:0;inset-inline-start:0;visibility:hidden;pointer-events:none;color:var(--mlv-text-error);font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-tiles__restriction--visible{visibility:visible}.mlv-tiles__empty{display:grid;grid-column:1/-1;place-items:center;min-block-size:max(var(--mlv-height-l),var(--mlv-spacing-16) - var(--mlv-tiles-depth, 0) * var(--mlv-spacing-4));padding:var(--mlv-padding-m);color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);text-align:center}.mlv-tiles__empty--projected{padding:0;color:inherit;font-size:inherit;text-align:inherit}.mlv-tiles__item-root{min-inline-size:0}.mlv-tiles__sortable-ghost{opacity:.5;transition:opacity var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-tiles__sortable-fallback{z-index:var(--mlv-z-overlay);pointer-events:none;opacity:.9;box-shadow:var(--mlv-shadow-overlay);transition:opacity var(--mlv-duration-fast) var(--mlv-ease-default),box-shadow var(--mlv-duration-normal) var(--mlv-ease-in-out-strong)}.mlv-tiles__sortable-fallback.mlv-tiles__item-root>.mlv-tile,.mlv-tiles__sortable-fallback.mlv-tiles__item-root.mlv-tile{background-color:var(--mlv-elevation-bg-2);border-color:var(--mlv-border-strong);box-shadow:var(--mlv-shadow-overlay);cursor:grabbing}.mlv-tiles--nested{padding-inline-start:var(--mlv-spacing-4);border-inline-start:var(--mlv-stroke-width) solid var(--mlv-border-subtle)}.mlv-tiles--nested>.mlv-tiles__item-root>.mlv-tile,.mlv-tiles--nested>.mlv-tiles__item-root.mlv-tile{background-color:transparent;border-color:transparent;border-radius:0;box-shadow:none}.mlv-tiles--nested>.mlv-tiles__item-root.mlv-tiles__sortable-chosen>.mlv-tile,.mlv-tiles--nested>.mlv-tiles__item-root.mlv-tile.mlv-tiles__sortable-chosen{box-shadow:var(--mlv-shadow-overlay)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTiles, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-tiles', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: MLV_TILE_LOCKED,
+                            useFactory: (tiles) => tiles.lockedState,
+                            deps: [forwardRef(() => MlvTiles)],
+                        },
+                    ], host: {
+                        class: 'mlv-tiles',
+                        '[class.mlv-tiles--layout-list]': 'layout() === "list"',
+                        '[class.mlv-tiles--grid]': 'layout() === "grid"',
+                        '[class.mlv-tiles--valid]': 'dropState() === "valid"',
+                        '[class.mlv-tiles--invalid]': 'dropState() === "invalid"',
+                        '[class.mlv-tiles--sorting]': 'dropState() !== "idle"',
+                        '[class.mlv-tiles--locked]': 'lockedState()',
+                        '[class.mlv-tiles--nested]': 'depth > 0',
+                        '[style.--mlv-tiles-depth]': 'depth',
+                        '[attr.data-mlv-tiles-id]': 'targetId()',
+                    }, template: "<ng-content />\n@if (_isRoot) {\n<span class=\"cdk-visually-hidden\" [id]=\"keyboardInstructionsId()\"\n  >{{ _i18n().keyboardInstructions }}</span\n>\n<span\n  class=\"cdk-visually-hidden mlv-tiles__keyboard-status\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n  >{{ _keyboardAnnouncement() }}</span\n>\n}\n<span\n  class=\"mlv-tiles__restriction\"\n  [class.mlv-tiles__restriction--visible]=\"dropState() === 'invalid'\"\n  [attr.aria-hidden]=\"dropState() === 'invalid' ? null : 'true'\"\n  >{{ _i18n().restrictedTarget }}</span\n>\n@if (isEmpty() && !lockedState()) {\n<div\n  class=\"mlv-tiles__empty\"\n  [class.mlv-tiles__empty--projected]=\"emptyRef() !== undefined\"\n>\n  @if (emptyRef(); as emptyTpl) {\n  <ng-container [ngTemplateOutlet]=\"emptyTpl.templateRef\" />\n  } @else { {{ emptyLabel() ?? _i18n().emptyTarget }} }\n</div>\n}\n", styles: ["@layer mlv.components{@media(prefers-reduced-motion:reduce){.mlv-tiles,.mlv-tiles *,.mlv-tiles:before,.mlv-tiles:after,[class^=mlv-tiles__],[class*=\" mlv-tiles__\"],[class^=mlv-tiles--],[class*=\" mlv-tiles--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}.mlv-tiles{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-tiles *{box-sizing:border-box}.mlv-tiles{container-type:inline-size;position:relative;min-inline-size:0;inline-size:100%;border:var(--mlv-stroke-width) dashed transparent;border-radius:var(--mlv-radius-l)}.mlv-tiles--layout-list{display:flex;flex-direction:column;gap:max(var(--mlv-spacing-1),var(--mlv-spacing-3) - var(--mlv-tiles-depth, 0) * var(--mlv-spacing-0-5))}.mlv-tiles--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--mlv-tiles-min-column, 20rem)),1fr));align-items:start;gap:var(--mlv-spacing-3)}.mlv-tiles--valid{border-color:var(--mlv-border-focus)}.mlv-tiles--invalid{border-color:var(--mlv-border-error)}.mlv-tiles--locked.mlv-tiles--valid,.mlv-tiles--locked.mlv-tiles--invalid{border-color:transparent}.mlv-tiles__restriction{position:absolute;inset-block-start:0;inset-inline-start:0;visibility:hidden;pointer-events:none;color:var(--mlv-text-error);font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-tiles__restriction--visible{visibility:visible}.mlv-tiles__empty{display:grid;grid-column:1/-1;place-items:center;min-block-size:max(var(--mlv-height-l),var(--mlv-spacing-16) - var(--mlv-tiles-depth, 0) * var(--mlv-spacing-4));padding:var(--mlv-padding-m);color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);text-align:center}.mlv-tiles__empty--projected{padding:0;color:inherit;font-size:inherit;text-align:inherit}.mlv-tiles__item-root{min-inline-size:0}.mlv-tiles__sortable-ghost{opacity:.5;transition:opacity var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-tiles__sortable-fallback{z-index:var(--mlv-z-overlay);pointer-events:none;opacity:.9;box-shadow:var(--mlv-shadow-overlay);transition:opacity var(--mlv-duration-fast) var(--mlv-ease-default),box-shadow var(--mlv-duration-normal) var(--mlv-ease-in-out-strong)}.mlv-tiles__sortable-fallback.mlv-tiles__item-root>.mlv-tile,.mlv-tiles__sortable-fallback.mlv-tiles__item-root.mlv-tile{background-color:var(--mlv-elevation-bg-2);border-color:var(--mlv-border-strong);box-shadow:var(--mlv-shadow-overlay);cursor:grabbing}.mlv-tiles--nested{padding-inline-start:var(--mlv-spacing-4);border-inline-start:var(--mlv-stroke-width) solid var(--mlv-border-subtle)}.mlv-tiles--nested>.mlv-tiles__item-root>.mlv-tile,.mlv-tiles--nested>.mlv-tiles__item-root.mlv-tile{background-color:transparent;border-color:transparent;border-radius:0;box-shadow:none}.mlv-tiles--nested>.mlv-tiles__item-root.mlv-tiles__sortable-chosen>.mlv-tile,.mlv-tiles--nested>.mlv-tiles__item-root.mlv-tile.mlv-tiles__sortable-chosen{box-shadow:var(--mlv-shadow-overlay)}}\n"] }]
+        }], propDecorators: { tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }, { type: i0.Output, args: ["treeChange"] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], accepts: [{ type: i0.Input, args: [{ isSignal: true, alias: "accepts", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], moved: [{ type: i0.Output, args: ["moved"] }], emptyRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvTilesEmpty), { isSignal: true }] }] } });
+
+const MLV_TILE_ITEM_ROOT_CLASS = 'mlv-tiles__item-root';
+class MlvTile {
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_TILE_I18N);
+    /** @private Resolves parameterized accessible names. */
+    _i18nResolver = inject(MlvI18nResolverService);
+    _rtlService = inject(MlvRtlService);
+    /** Human-readable tile name used by the drag handle and move announcements. */
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Colors the tile outline with an optional semantic tone. */
+    tone = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Typed immutable tree item represented by this tile when nested in `mlv-tiles`. */
+    tile = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tile" }] : /* istanbul ignore next */ []));
+    /** Adds the standard close action to the tile header. */
+    closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Adds the built-in drag handle to the tile header. */
+    draggable = input(false, { ...(ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Disables the built-in drag handle without dimming the tile content. */
+    dragDisabled = input(false, { ...(ngDevMode ? { debugName: "dragDisabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Freezes this tile: withdraws the drag handle and the standard close action,
+     * makes `remove()` a no-op, and locks any nested `mlv-tiles`. Inherited from
+     * an enclosing locked container; an explicit `false` does not unlock a locked
+     * ancestor. `setProps` and `updateProps` keep working — `locked` is
+     * structural, not data-read-only.
+     */
+    locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * De-emphasises the projected body while leaving the header controls at full
+     * contrast. Presentational only: it does not cascade to nested tiles and adds
+     * no ARIA state, because the tile region stays fully interactive.
+     */
+    inactive = input(false, { ...(ngDevMode ? { debugName: "inactive" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Emits when the user activates the tile's close action. */
+    closed = output();
+    /** @protected Header slot template projected via `[mlvTileHeader]`. */
+    headerRef = contentChild(MlvTileHeader, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerRef" }] : /* istanbul ignore next */ []));
+    /** @protected Consumer-owned actions projected via `[mlvTileActions]`. */
+    actionsRef = contentChild(MlvTileActions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsRef" }] : /* istanbul ignore next */ []));
+    /** @protected Consumer-owned trailing actions projected via `[mlvTileTrailingActions]`. */
+    trailingActionsRef = contentChild(MlvTileTrailingActions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trailingActionsRef" }] : /* istanbul ignore next */ []));
+    /** @private Closest enclosing lock, published by a container or outer tile. */
+    _inheritedLocked = inject(MLV_TILE_LOCKED, {
+        optional: true,
+        skipSelf: true,
+    });
+    /**
+     * @internal Resolved lock for this tile, inherited state included. Published
+     * through `MLV_TILE_LOCKED` so nested containers and tiles inherit it.
+     */
+    lockedState = computed(() => this._inheritedLocked?.() === true || this.locked(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lockedState" }] : /* istanbul ignore next */ []));
+    /** @protected Whether this tile renders the standard close action. */
+    _hasCloseAction = computed(() => this.closable() && !this.lockedState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasCloseAction" }] : /* istanbul ignore next */ []));
+    /** @protected Whether this tile renders its built-in drag handle. */
+    _hasDragHandle = computed(() => !this.lockedState() && (this.draggable() || this.tile() !== undefined), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasDragHandle" }] : /* istanbul ignore next */ []));
+    /** @protected Only registered compound handles expose keyboard operations. */
+    _hasInteractiveDragHandle = computed(() => this.tile() !== undefined && this._container !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasInteractiveDragHandle" }] : /* istanbul ignore next */ []));
+    /** @private Consumer name or localized generic fallback for assistive text. */
+    _accessibleLabel = computed(() => this.ariaLabel()?.trim() || this._i18n().tileLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_accessibleLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Localized accessible drag handle label. */
+    _dragHandleLabel = computed(() => this._i18nResolver.resolve(this._i18n(), 'moveTile', { label: this._accessibleLabel() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dragHandleLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Root-owned keyboard instructions associated with tree handles. */
+    _keyboardInstructionsId = computed(() => this._tileId() === undefined
+        ? null
+        : (this._container?.keyboardInstructionsId() ?? null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_keyboardInstructionsId" }] : /* istanbul ignore next */ []));
+    /** @private Closest compound container, absent for standalone tiles. */
+    _container = inject(MlvTiles, {
+        optional: true,
+    });
+    /** @private Component-scoped cleanup for the marked Sortable wrapper. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Rendered tile host used to resolve the direct list child. */
+    _elementRef = inject((ElementRef));
+    /** @private Renderer used to mark and clean a consumer-owned wrapper root. */
+    _renderer = inject(Renderer2);
+    /** @private Stable item ID so immutable prop replacement does not re-register it. */
+    _tileId = computed(() => this.tile()?.id, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tileId" }] : /* istanbul ignore next */ []));
+    /** @private Direct list child exposed to Sortable without public markup. */
+    _itemRoot = null;
+    constructor() {
+        effect(() => {
+            const tile = this.tile();
+            const disabled = this.dragDisabled() || this.lockedState();
+            if (!this._container || tile === undefined) {
+                this._releaseItemRoot();
+            }
+            else {
+                this._configureItemRoot(tile.id, disabled);
+            }
+        });
+        effect((onCleanup) => {
+            const tileId = this._tileId();
+            if (!this._container || tileId === undefined)
+                return;
+            const registration = {
+                id: tileId,
+                tile: () => {
+                    const tile = this.tile();
+                    if (!tile) {
+                        throw new Error('Registered mlv-tile requires [tile].');
+                    }
+                    return tile;
+                },
+            };
+            onCleanup(this._container.coordinator.registerItem(registration));
+        });
+        this._destroyRef.onDestroy(() => this._releaseItemRoot());
+    }
+    /**
+     * Removes this item through the root-owned immutable tree. A locked tile is
+     * structurally frozen, so the call is a no-op that warns in development.
+     */
+    remove() {
+        if (this.lockedState()) {
+            this._warnDev('MlvTile.remove() is disabled while the tile is locked.');
+            return;
+        }
+        const tileId = this._registeredTileId('remove');
+        if (tileId !== undefined)
+            this._container?.remove(tileId);
+    }
+    /**
+     * Inserts a node into this tile's container node through the root-owned
+     * immutable tree. Valid only on a tree-bound tile whose node accepts
+     * children.
+     *
+     * @param tile - Node to insert. Neither it nor any node in its subtree may
+     *   reuse an ID that already exists in the tree.
+     * @param index - Position among this node's direct children. Omitted appends;
+     *   a non-integer, negative, or out-of-range index is rejected rather than
+     *   clamped.
+     * @returns `true` when the root tree was replaced, `false` on any rejection.
+     *   Always `false` while the tile is locked.
+     */
+    insertChild(tile, index) {
+        if (this.lockedState()) {
+            this._warnDev('MlvTile.insertChild() is disabled while the tile is locked.');
+            return false;
+        }
+        const targetContainerId = this._registeredTileId('insertChild');
+        if (targetContainerId === undefined)
+            return false;
+        if (this.tile()?.acceptsChildren !== true) {
+            this._warnDev('MlvTile.insertChild() requires a container [tile] node.');
+            return false;
+        }
+        return (this._container?.coordinator.insert({
+            targetContainerId,
+            tile,
+            index,
+        }) ?? false);
+    }
+    /** Replaces this item's props through the root-owned immutable tree. */
+    setProps(props) {
+        const tileId = this._registeredTileId('setProps');
+        if (tileId !== undefined) {
+            this._container?.updateProps(tileId, () => props);
+        }
+    }
+    /** Updates this item's props through the root-owned immutable tree. */
+    updateProps(update) {
+        const tileId = this._registeredTileId('updateProps');
+        if (tileId !== undefined)
+            this._container?.updateProps(tileId, update);
+    }
+    /** @protected Delegates the documented Alt+Arrow commands to the root tree. */
+    _onDragHandleKeydown(event) {
+        if (!event.altKey ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.shiftKey ||
+            this.dragDisabled()) {
+            return;
+        }
+        let direction;
+        switch (this._rtlService.normalizeArrowKey(event)) {
+            case UP_ARROW:
+                direction = 'up';
+                break;
+            case DOWN_ARROW:
+                direction = 'down';
+                break;
+            case LEFT_ARROW:
+                direction = 'left';
+                break;
+            case RIGHT_ARROW:
+                direction = 'right';
+                break;
+        }
+        const tileId = this._tileId();
+        if (!direction || tileId === undefined || !this._container)
+            return;
+        event.preventDefault();
+        this._container.moveByKeyboard(tileId, direction, this._accessibleLabel());
+    }
+    /** @private Marks the direct list child Sortable owns during interaction. */
+    _configureItemRoot(tileId, disabled) {
+        const tileHost = this._elementRef.nativeElement;
+        const root = this._container?.resolveItemRoot(tileHost) ?? tileHost;
+        if (this._itemRoot !== root) {
+            this._releaseItemRoot();
+            this._renderer.addClass(root, MLV_TILE_ITEM_ROOT_CLASS);
+            this._itemRoot = root;
+        }
+        this._renderer.setAttribute(root, 'data-mlv-tile-id', tileId);
+        if (disabled) {
+            this._renderer.setAttribute(root, 'data-mlv-tile-drag-disabled', 'true');
+        }
+        else {
+            this._renderer.removeAttribute(root, 'data-mlv-tile-drag-disabled');
+        }
+        return root;
+    }
+    /** @private Removes the internal class from a prior direct-child wrapper. */
+    _releaseItemRoot() {
+        const root = this._itemRoot;
+        if (!root)
+            return;
+        this._renderer.removeClass(root, MLV_TILE_ITEM_ROOT_CLASS);
+        this._renderer.removeAttribute(root, 'data-mlv-tile-id');
+        this._renderer.removeAttribute(root, 'data-mlv-tile-drag-disabled');
+        this._itemRoot = null;
+    }
+    /** @private Returns a live registered ID or warns only for requested tree work. */
+    _registeredTileId(operation) {
+        const tileId = this._tileId();
+        if (tileId !== undefined &&
+            this._container?.coordinator.item(tileId) !== undefined) {
+            return tileId;
+        }
+        this._warnDev(`MlvTile.${operation}() requires [tile] inside mlv-tiles.`);
+        return undefined;
+    }
+    /** @private Single development-only channel for rejected tree operations. */
+    _warnDev(message) {
+        if (typeof ngDevMode === 'undefined' || ngDevMode)
+            console.warn(message);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvTile, isStandalone: true, selector: "mlv-tile", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, tile: { classPropertyName: "tile", publicName: "tile", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, dragDisabled: { classPropertyName: "dragDisabled", publicName: "dragDisabled", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, inactive: { classPropertyName: "inactive", publicName: "inactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class.mlv-tile--tone-info": "tone() === \"info\"", "class.mlv-tile--tone-success": "tone() === \"success\"", "class.mlv-tile--tone-warning": "tone() === \"warning\"", "class.mlv-tile--tone-danger": "tone() === \"danger\"", "class.mlv-tile--draggable": "_hasDragHandle()", "class.mlv-tile--drag-disabled": "dragDisabled()", "class.mlv-tile--locked": "lockedState()", "class.mlv-tile--inactive": "inactive()" }, classAttribute: "mlv-tile" }, providers: [
+            { provide: MLV_DENSITY_ELEMENT, useValue: 'tile' },
+            provideMlvDensityContext(MlvDensityDirective),
+            {
+                provide: MLV_TILE_ITEM_CONTEXT,
+                useExisting: forwardRef(() => MlvTile),
+            },
+            {
+                provide: MLV_TILE_LOCKED,
+                useFactory: (tile) => tile.lockedState,
+                deps: [forwardRef(() => MlvTile)],
+            },
+        ], queries: [{ propertyName: "headerRef", first: true, predicate: MlvTileHeader, descendants: true, isSignal: true }, { propertyName: "actionsRef", first: true, predicate: MlvTileActions, descendants: true, isSignal: true }, { propertyName: "trailingActionsRef", first: true, predicate: MlvTileTrailingActions, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.MlvDensityDirective, inputs: ["mlvDensity", "mlvDensity"] }], ngImport: i0, template: "@if (headerRef() || actionsRef() || trailingActionsRef() || _hasCloseAction() ||\n_hasDragHandle()) {\n<div class=\"mlv-tile__header\">\n  @if (_hasDragHandle()) { @if (_hasInteractiveDragHandle()) {\n  <button\n    class=\"mlv-tile__drag-handle\"\n    type=\"button\"\n    mlvDensity=\"compact\"\n    [disabled]=\"dragDisabled()\"\n    [attr.aria-disabled]=\"dragDisabled() ? 'true' : null\"\n    [attr.aria-label]=\"_dragHandleLabel()\"\n    [attr.aria-describedby]=\"_keyboardInstructionsId()\"\n    aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown Alt+ArrowLeft Alt+ArrowRight\"\n    (keydown)=\"_onDragHandleKeydown($event)\"\n  >\n    <svg lucideGripVertical size=\"20\" />\n  </button>\n  } @else {\n  <span class=\"mlv-tile__drag-handle\" aria-hidden=\"true\">\n    <svg lucideGripVertical size=\"16\" />\n  </span>\n  } } @if (headerRef(); as headerTpl) {\n  <div class=\"mlv-tile__title\">\n    <ng-container [ngTemplateOutlet]=\"headerTpl.templateRef\" />\n  </div>\n  } @if (actionsRef() || trailingActionsRef() || _hasCloseAction()) {\n  <div\n    class=\"mlv-tile__controls\"\n    [class.mlv-tile__controls--crowded]=\"actionsRef() || trailingActionsRef()\"\n  >\n    @if (actionsRef(); as actionsTpl) {\n    <div class=\"mlv-tile__actions\">\n      <ng-container [ngTemplateOutlet]=\"actionsTpl.templateRef\" />\n    </div>\n    } @if (trailingActionsRef(); as trailingActionsTpl) {\n    <div class=\"mlv-tile__trailing-actions\">\n      <ng-container [ngTemplateOutlet]=\"trailingActionsTpl.templateRef\" />\n    </div>\n    } @if (_hasCloseAction()) {\n    <mlv-button-close\n      class=\"mlv-tile__close\"\n      mlvDensity=\"compact\"\n      [ariaLabel]=\"_i18n().close\"\n      (click)=\"closed.emit()\"\n    />\n    }\n  </div>\n  }\n</div>\n}\n\n<div class=\"mlv-tile__body\">\n  <ng-content />\n</div>\n", styles: ["@layer mlv.components{@media(prefers-reduced-motion:reduce){.mlv-tile,.mlv-tile *,.mlv-tile:before,.mlv-tile:after,[class^=mlv-tile__],[class*=\" mlv-tile__\"],[class^=mlv-tile--],[class*=\" mlv-tile--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}@keyframes tile-leave-fade{0%{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px) scale(.98)}}.mlv-tile{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-tile *{box-sizing:border-box}.mlv-tile{--mlv-tile-padding: var(--mlv-padding-m);--mlv-tile-radius: var(--mlv-radius-card);--mlv-tile-gap: var(--mlv-spacing-2);--mlv-tile-controls-gap: var(--mlv-spacing-1);--mlv-tile-control-size: var(--mlv-height-m);--mlv-tile-handle-icon-size: calc( max(var(--mlv-tile-control-size), var(--mlv-height-m)) * var(--mlv-icon-in-container-ratio) );--mlv-tile-title-size: var(--mlv-typography-ui-m-size);--mlv-tile-title-line-height: var(--mlv-typography-ui-m-line-height);--mlv-tile-body-size: var(--mlv-typography-body-m-size);--mlv-tile-body-line-height: var(--mlv-typography-body-m-line-height);container-name:mlv-tile;container-type:inline-size;position:relative;display:flex;flex-direction:column;background-color:var(--mlv-elevation-bg-2);color:var(--mlv-text-primary);box-shadow:var(--mlv-shadow-flat);border:var(--mlv-stroke-width) solid var(--mlv-border-normal);padding:var(--mlv-tile-padding);border-radius:var(--mlv-tile-radius);gap:var(--mlv-tile-gap);overflow:hidden;transition-property:background-color,border-color,box-shadow;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-default)}[class*=--tight] .mlv-tile:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-tile[class*=--tight]{--mlv-tile-padding: var(--mlv-padding-xs);--mlv-tile-gap: var(--mlv-spacing-1);--mlv-tile-controls-gap: var(--mlv-spacing-1);--mlv-tile-control-size: var(--mlv-height-xs);--mlv-tile-title-size: var(--mlv-font-size-xs);--mlv-tile-title-line-height: var(--mlv-line-height-tight);--mlv-tile-body-size: var(--mlv-font-size-xs);--mlv-tile-body-line-height: var(--mlv-line-height-tight)}[class*=--compact] .mlv-tile:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-tile[class*=--compact]{--mlv-tile-padding: var(--mlv-padding-s);--mlv-tile-gap: var(--mlv-spacing-1-5);--mlv-tile-controls-gap: var(--mlv-spacing-1);--mlv-tile-control-size: var(--mlv-height-s);--mlv-tile-title-size: var(--mlv-typography-ui-s-size);--mlv-tile-title-line-height: var(--mlv-typography-ui-s-line-height);--mlv-tile-body-size: var(--mlv-typography-body-s-size);--mlv-tile-body-line-height: var(--mlv-typography-body-s-line-height)}[class*=--comfortable] .mlv-tile:not([class*=--tight],[class*=--compact],[class*=--spacious],[class*=--airy]),.mlv-tile[class*=--comfortable]{--mlv-tile-padding: var(--mlv-padding-m);--mlv-tile-gap: var(--mlv-spacing-2);--mlv-tile-controls-gap: var(--mlv-spacing-1);--mlv-tile-control-size: var(--mlv-height-m);--mlv-tile-title-size: var(--mlv-typography-ui-m-size);--mlv-tile-title-line-height: var(--mlv-typography-ui-m-line-height);--mlv-tile-body-size: var(--mlv-typography-body-m-size);--mlv-tile-body-line-height: var(--mlv-typography-body-m-line-height)}[class*=--spacious] .mlv-tile:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-tile[class*=--spacious]{--mlv-tile-padding: var(--mlv-padding-l);--mlv-tile-gap: var(--mlv-spacing-2-5);--mlv-tile-controls-gap: var(--mlv-spacing-1-5);--mlv-tile-control-size: var(--mlv-height-l);--mlv-tile-title-size: var(--mlv-typography-ui-l-size);--mlv-tile-title-line-height: var(--mlv-typography-ui-l-line-height);--mlv-tile-body-size: var(--mlv-typography-body-l-size);--mlv-tile-body-line-height: var(--mlv-typography-body-l-line-height)}[class*=--airy] .mlv-tile:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-tile[class*=--airy]{--mlv-tile-padding: var(--mlv-spacing-4) var(--mlv-spacing-8);--mlv-tile-gap: var(--mlv-spacing-3);--mlv-tile-controls-gap: var(--mlv-spacing-2);--mlv-tile-control-size: var(--mlv-height-xl);--mlv-tile-title-size: var(--mlv-font-size-xl);--mlv-tile-title-line-height: var(--mlv-line-height-normal);--mlv-tile-body-size: var(--mlv-font-size-l);--mlv-tile-body-line-height: var(--mlv-line-height-relaxed)}.mlv-tile--tone-info{border-color:var(--mlv-border-info)}.mlv-tile--tone-success{border-color:var(--mlv-border-success)}.mlv-tile--tone-warning{border-color:var(--mlv-border-warning)}.mlv-tile--tone-danger{border-color:var(--mlv-border-error)}.mlv-tile--locked{border-color:var(--mlv-border-subtle)}.mlv-tile--locked .mlv-tile__title{color:var(--mlv-text-secondary)}.mlv-tile--inactive>.mlv-tile__body{opacity:var(--mlv-disabled-opacity)}.mlv-tile--inactive>.mlv-tile__header>.mlv-tile__title{color:var(--mlv-text-secondary)}.mlv-tile--leaving{overflow:hidden;pointer-events:none;animation:tile-leave-fade var(--mlv-duration-normal) var(--mlv-ease-out) forwards}.mlv-tile--drag-disabled .mlv-tile__drag-handle{color:var(--mlv-text-disabled);cursor:not-allowed}.mlv-tiles__sortable-chosen>.mlv-tile,.mlv-tile.mlv-tiles__sortable-chosen{box-shadow:var(--mlv-shadow-overlay)}.mlv-tile__drag-handle{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;--mlv-tile-handle-visible-size: calc( var(--mlv-tile-handle-icon-size) + var(--mlv-spacing-1) * 2 );width:var(--mlv-tile-handle-visible-size);height:var(--mlv-tile-handle-visible-size);appearance:none;padding:0;border:0;background-color:transparent;font:inherit;opacity:1;cursor:grab;color:var(--mlv-text-secondary);touch-action:none;border-radius:var(--mlv-radius-s);transition-property:opacity,color;transition-duration:var(--mlv-duration-normal);transition-timing-function:var(--mlv-ease-out)}.mlv-tile__drag-handle:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-tile__drag-handle:before{content:\"\";position:absolute;--mlv-tile-handle-hit-size: var(--mlv-height-m);--mlv-tile-handle-hit-expand: calc( ( var(--mlv-tile-handle-hit-size) - var( --mlv-tile-handle-visible-size ) ) / 2 );--mlv-tile-handle-hit-expand-end: min( var(--mlv-tile-handle-hit-expand), var(--mlv-tile-gap) / 2 );inset-block:calc(-1 * var(--mlv-tile-handle-hit-expand));inset-inline-end:calc(-1 * var(--mlv-tile-handle-hit-expand-end));inset-inline-start:calc(-1 * (var(--mlv-tile-handle-hit-expand) * 2 - var(--mlv-tile-handle-hit-expand-end)))}.mlv-tile__drag-handle svg{width:var(--mlv-tile-handle-icon-size);height:var(--mlv-tile-handle-icon-size)}.mlv-tiles__sortable-chosen>.mlv-tile .mlv-tile__drag-handle,.mlv-tiles__sortable-fallback>.mlv-tile .mlv-tile__drag-handle,.mlv-tile.mlv-tiles__sortable-chosen .mlv-tile__drag-handle,.mlv-tile.mlv-tiles__sortable-fallback .mlv-tile__drag-handle{opacity:1;color:var(--mlv-text-primary);cursor:grabbing}@media(hover:hover)and (pointer:fine){.mlv-tile--draggable>.mlv-tile__header>.mlv-tile__drag-handle{opacity:.5}.mlv-tile--draggable:hover:not(:has(.mlv-tile:hover))>.mlv-tile__header>.mlv-tile__drag-handle,.mlv-tile--draggable:focus-within:not(:has(.mlv-tile:focus-within))>.mlv-tile__header>.mlv-tile__drag-handle,.mlv-tiles__sortable-chosen>.mlv-tile>.mlv-tile__header>.mlv-tile__drag-handle,.mlv-tiles__sortable-fallback>.mlv-tile>.mlv-tile__header>.mlv-tile__drag-handle,.mlv-tile.mlv-tiles__sortable-chosen>.mlv-tile__header>.mlv-tile__drag-handle,.mlv-tile.mlv-tiles__sortable-fallback>.mlv-tile__header>.mlv-tile__drag-handle{opacity:1}.mlv-tile:not(.mlv-tile--drag-disabled):hover:not(:has(.mlv-tile:hover))>.mlv-tile__header>.mlv-tile__drag-handle{color:var(--mlv-text-primary)}}.mlv-tile__header{display:flex;align-items:center;justify-content:flex-start;gap:var(--mlv-tile-gap);min-height:0}.mlv-tile__title{flex:1 1 auto;min-width:0;font-size:var(--mlv-tile-title-size);line-height:var(--mlv-tile-title-line-height)}.mlv-tile__controls{display:flex;align-items:center;flex:0 0 auto;gap:var(--mlv-tile-controls-gap);margin-inline-start:auto}.mlv-tile__actions,.mlv-tile__trailing-actions{display:flex;align-items:center;gap:var(--mlv-tile-controls-gap);flex-shrink:0}.mlv-tile__close{flex-shrink:0}.mlv-tile__close .mlv-button--close{margin-inline-end:calc(var(--mlv-btn-height) * -.25)}.mlv-tile__body{flex:1 1 auto;min-height:0;font-size:var(--mlv-tile-body-size);line-height:var(--mlv-tile-body-line-height)}@container mlv-tile (max-width: 18rem){.mlv-tile__header:has(>.mlv-tile__controls--crowded){flex-wrap:wrap}.mlv-tile__controls--crowded{flex-basis:100%;width:100%;justify-content:flex-end}}.mlv-tiles.mlv-tiles--nested .mlv-tile{--mlv-tile-control-size: var(--mlv-height-xs)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideGripVertical, selector: "svg[lucideGripVertical]" }, { kind: "component", type: MlvButtonClose, selector: "mlv-button-close", inputs: ["variant", "shape", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTile, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-tile', imports: [
+                        NgTemplateOutlet,
+                        LucideGripVertical,
+                        MlvButtonClose,
+                        MlvTileActions,
+                        MlvTileTrailingActions,
+                        MlvButtonIcon,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: MLV_DENSITY_ELEMENT, useValue: 'tile' },
+                        provideMlvDensityContext(MlvDensityDirective),
+                        {
+                            provide: MLV_TILE_ITEM_CONTEXT,
+                            useExisting: forwardRef(() => MlvTile),
+                        },
+                        {
+                            provide: MLV_TILE_LOCKED,
+                            useFactory: (tile) => tile.lockedState,
+                            deps: [forwardRef(() => MlvTile)],
+                        },
+                    ], hostDirectives: [{ directive: MlvDensityDirective, inputs: ['mlvDensity'] }], host: {
+                        class: 'mlv-tile',
+                        '[class.mlv-tile--tone-info]': 'tone() === "info"',
+                        '[class.mlv-tile--tone-success]': 'tone() === "success"',
+                        '[class.mlv-tile--tone-warning]': 'tone() === "warning"',
+                        '[class.mlv-tile--tone-danger]': 'tone() === "danger"',
+                        '[class.mlv-tile--draggable]': '_hasDragHandle()',
+                        '[class.mlv-tile--drag-disabled]': 'dragDisabled()',
+                        '[class.mlv-tile--locked]': 'lockedState()',
+                        '[class.mlv-tile--inactive]': 'inactive()',
+                    }, template: "@if (headerRef() || actionsRef() || trailingActionsRef() || _hasCloseAction() ||\n_hasDragHandle()) {\n<div class=\"mlv-tile__header\">\n  @if (_hasDragHandle()) { @if (_hasInteractiveDragHandle()) {\n  <button\n    class=\"mlv-tile__drag-handle\"\n    type=\"button\"\n    mlvDensity=\"compact\"\n    [disabled]=\"dragDisabled()\"\n    [attr.aria-disabled]=\"dragDisabled() ? 'true' : null\"\n    [attr.aria-label]=\"_dragHandleLabel()\"\n    [attr.aria-describedby]=\"_keyboardInstructionsId()\"\n    aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown Alt+ArrowLeft Alt+ArrowRight\"\n    (keydown)=\"_onDragHandleKeydown($event)\"\n  >\n    <svg lucideGripVertical size=\"20\" />\n  </button>\n  } @else {\n  <span class=\"mlv-tile__drag-handle\" aria-hidden=\"true\">\n    <svg lucideGripVertical size=\"16\" />\n  </span>\n  } } @if (headerRef(); as headerTpl) {\n  <div class=\"mlv-tile__title\">\n    <ng-container [ngTemplateOutlet]=\"headerTpl.templateRef\" />\n  </div>\n  } @if (actionsRef() || trailingActionsRef() || _hasCloseAction()) {\n  <div\n    class=\"mlv-tile__controls\"\n    [class.mlv-tile__controls--crowded]=\"actionsRef() || trailingActionsRef()\"\n  >\n    @if (actionsRef(); as actionsTpl) {\n    <div class=\"mlv-tile__actions\">\n      <ng-container [ngTemplateOutlet]=\"actionsTpl.templateRef\" />\n    </div>\n    } @if (trailingActionsRef(); as trailingActionsTpl) {\n    <div class=\"mlv-tile__trailing-actions\">\n      <ng-container [ngTemplateOutlet]=\"trailingActionsTpl.templateRef\" />\n    </div>\n    } @if (_hasCloseAction()) {\n    <mlv-button-close\n      class=\"mlv-tile__close\"\n      mlvDensity=\"compact\"\n      [ariaLabel]=\"_i18n().close\"\n      (click)=\"closed.emit()\"\n    />\n    }\n  </div>\n  }\n</div>\n}\n\n<div class=\"mlv-tile__body\">\n  <ng-content />\n</div>\n", styles: ["@layer mlv.components{@media(prefers-reduced-motion:reduce){.mlv-tile,.mlv-tile *,.mlv-tile:before,.mlv-tile:after,[class^=mlv-tile__],[class*=\" mlv-tile__\"],[class^=mlv-tile--],[class*=\" mlv-tile--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}@keyframes tile-leave-fade{0%{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px) scale(.98)}}.mlv-tile{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-tile *{box-sizing:border-box}.mlv-tile{--mlv-tile-padding: var(--mlv-padding-m);--mlv-tile-radius: var(--mlv-radius-card);--mlv-tile-gap: var(--mlv-spacing-2);--mlv-tile-controls-gap: var(--mlv-spacing-1);--mlv-tile-control-size: var(--mlv-height-m);--mlv-tile-handle-icon-size: calc( max(var(--mlv-tile-control-size), var(--mlv-height-m)) * var(--mlv-icon-in-container-ratio) );--mlv-tile-title-size: var(--mlv-typography-ui-m-size);--mlv-tile-title-line-height: var(--mlv-typography-ui-m-line-height);--mlv-tile-body-size: var(--mlv-typography-body-m-size);--mlv-tile-body-line-height: var(--mlv-typography-body-m-line-height);container-name:mlv-tile;container-type:inline-size;position:relative;display:flex;flex-direction:column;background-color:var(--mlv-elevation-bg-2);color:var(--mlv-text-primary);box-shadow:var(--mlv-shadow-flat);border:var(--mlv-stroke-width) solid var(--mlv-border-normal);padding:var(--mlv-tile-padding);border-radius:var(--mlv-tile-radius);gap:var(--mlv-tile-gap);overflow:hidden;transition-property:background-color,border-color,box-shadow;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-default)}[class*=--tight] .mlv-tile:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-tile[class*=--tight]{--mlv-tile-padding: var(--mlv-padding-xs);--mlv-tile-gap: var(--mlv-spacing-1);--mlv-tile-controls-gap: var(--mlv-spacing-1);--mlv-tile-control-size: var(--mlv-height-xs);--mlv-tile-title-size: var(--mlv-font-size-xs);--mlv-tile-title-line-height: var(--mlv-line-height-tight);--mlv-tile-body-size: var(--mlv-font-size-xs);--mlv-tile-body-line-height: var(--mlv-line-height-tight)}[class*=--compact] .mlv-tile:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-tile[class*=--compact]{--mlv-tile-padding: var(--mlv-padding-s);--mlv-tile-gap: var(--mlv-spacing-1-5);--mlv-tile-controls-gap: var(--mlv-spacing-1);--mlv-tile-control-size: var(--mlv-height-s);--mlv-tile-title-size: var(--mlv-typography-ui-s-size);--mlv-tile-title-line-height: var(--mlv-typography-ui-s-line-height);--mlv-tile-body-size: var(--mlv-typography-body-s-size);--mlv-tile-body-line-height: var(--mlv-typography-body-s-line-height)}[class*=--comfortable] .mlv-tile:not([class*=--tight],[class*=--compact],[class*=--spacious],[class*=--airy]),.mlv-tile[class*=--comfortable]{--mlv-tile-padding: var(--mlv-padding-m);--mlv-tile-gap: var(--mlv-spacing-2);--mlv-tile-controls-gap: var(--mlv-spacing-1);--mlv-tile-control-size: var(--mlv-height-m);--mlv-tile-title-size: var(--mlv-typography-ui-m-size);--mlv-tile-title-line-height: var(--mlv-typography-ui-m-line-height);--mlv-tile-body-size: var(--mlv-typography-body-m-size);--mlv-tile-body-line-height: var(--mlv-typography-body-m-line-height)}[class*=--spacious] .mlv-tile:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-tile[class*=--spacious]{--mlv-tile-padding: var(--mlv-padding-l);--mlv-tile-gap: var(--mlv-spacing-2-5);--mlv-tile-controls-gap: var(--mlv-spacing-1-5);--mlv-tile-control-size: var(--mlv-height-l);--mlv-tile-title-size: var(--mlv-typography-ui-l-size);--mlv-tile-title-line-height: var(--mlv-typography-ui-l-line-height);--mlv-tile-body-size: var(--mlv-typography-body-l-size);--mlv-tile-body-line-height: var(--mlv-typography-body-l-line-height)}[class*=--airy] .mlv-tile:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-tile[class*=--airy]{--mlv-tile-padding: var(--mlv-spacing-4) var(--mlv-spacing-8);--mlv-tile-gap: var(--mlv-spacing-3);--mlv-tile-controls-gap: var(--mlv-spacing-2);--mlv-tile-control-size: var(--mlv-height-xl);--mlv-tile-title-size: var(--mlv-font-size-xl);--mlv-tile-title-line-height: var(--mlv-line-height-normal);--mlv-tile-body-size: var(--mlv-font-size-l);--mlv-tile-body-line-height: var(--mlv-line-height-relaxed)}.mlv-tile--tone-info{border-color:var(--mlv-border-info)}.mlv-tile--tone-success{border-color:var(--mlv-border-success)}.mlv-tile--tone-warning{border-color:var(--mlv-border-warning)}.mlv-tile--tone-danger{border-color:var(--mlv-border-error)}.mlv-tile--locked{border-color:var(--mlv-border-subtle)}.mlv-tile--locked .mlv-tile__title{color:var(--mlv-text-secondary)}.mlv-tile--inactive>.mlv-tile__body{opacity:var(--mlv-disabled-opacity)}.mlv-tile--inactive>.mlv-tile__header>.mlv-tile__title{color:var(--mlv-text-secondary)}.mlv-tile--leaving{overflow:hidden;pointer-events:none;animation:tile-leave-fade var(--mlv-duration-normal) var(--mlv-ease-out) forwards}.mlv-tile--drag-disabled .mlv-tile__drag-handle{color:var(--mlv-text-disabled);cursor:not-allowed}.mlv-tiles__sortable-chosen>.mlv-tile,.mlv-tile.mlv-tiles__sortable-chosen{box-shadow:var(--mlv-shadow-overlay)}.mlv-tile__drag-handle{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;--mlv-tile-handle-visible-size: calc( var(--mlv-tile-handle-icon-size) + var(--mlv-spacing-1) * 2 );width:var(--mlv-tile-handle-visible-size);height:var(--mlv-tile-handle-visible-size);appearance:none;padding:0;border:0;background-color:transparent;font:inherit;opacity:1;cursor:grab;color:var(--mlv-text-secondary);touch-action:none;border-radius:var(--mlv-radius-s);transition-property:opacity,color;transition-duration:var(--mlv-duration-normal);transition-timing-function:var(--mlv-ease-out)}.mlv-tile__drag-handle:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-tile__drag-handle:before{content:\"\";position:absolute;--mlv-tile-handle-hit-size: var(--mlv-height-m);--mlv-tile-handle-hit-expand: calc( ( var(--mlv-tile-handle-hit-size) - var( --mlv-tile-handle-visible-size ) ) / 2 );--mlv-tile-handle-hit-expand-end: min( var(--mlv-tile-handle-hit-expand), var(--mlv-tile-gap) / 2 );inset-block:calc(-1 * var(--mlv-tile-handle-hit-expand));inset-inline-end:calc(-1 * var(--mlv-tile-handle-hit-expand-end));inset-inline-start:calc(-1 * (var(--mlv-tile-handle-hit-expand) * 2 - var(--mlv-tile-handle-hit-expand-end)))}.mlv-tile__drag-handle svg{width:var(--mlv-tile-handle-icon-size);height:var(--mlv-tile-handle-icon-size)}.mlv-tiles__sortable-chosen>.mlv-tile .mlv-tile__drag-handle,.mlv-tiles__sortable-fallback>.mlv-tile .mlv-tile__drag-handle,.mlv-tile.mlv-tiles__sortable-chosen .mlv-tile__drag-handle,.mlv-tile.mlv-tiles__sortable-fallback .mlv-tile__drag-handle{opacity:1;color:var(--mlv-text-primary);cursor:grabbing}@media(hover:hover)and (pointer:fine){.mlv-tile--draggable>.mlv-tile__header>.mlv-tile__drag-handle{opacity:.5}.mlv-tile--draggable:hover:not(:has(.mlv-tile:hover))>.mlv-tile__header>.mlv-tile__drag-handle,.mlv-tile--draggable:focus-within:not(:has(.mlv-tile:focus-within))>.mlv-tile__header>.mlv-tile__drag-handle,.mlv-tiles__sortable-chosen>.mlv-tile>.mlv-tile__header>.mlv-tile__drag-handle,.mlv-tiles__sortable-fallback>.mlv-tile>.mlv-tile__header>.mlv-tile__drag-handle,.mlv-tile.mlv-tiles__sortable-chosen>.mlv-tile__header>.mlv-tile__drag-handle,.mlv-tile.mlv-tiles__sortable-fallback>.mlv-tile__header>.mlv-tile__drag-handle{opacity:1}.mlv-tile:not(.mlv-tile--drag-disabled):hover:not(:has(.mlv-tile:hover))>.mlv-tile__header>.mlv-tile__drag-handle{color:var(--mlv-text-primary)}}.mlv-tile__header{display:flex;align-items:center;justify-content:flex-start;gap:var(--mlv-tile-gap);min-height:0}.mlv-tile__title{flex:1 1 auto;min-width:0;font-size:var(--mlv-tile-title-size);line-height:var(--mlv-tile-title-line-height)}.mlv-tile__controls{display:flex;align-items:center;flex:0 0 auto;gap:var(--mlv-tile-controls-gap);margin-inline-start:auto}.mlv-tile__actions,.mlv-tile__trailing-actions{display:flex;align-items:center;gap:var(--mlv-tile-controls-gap);flex-shrink:0}.mlv-tile__close{flex-shrink:0}.mlv-tile__close .mlv-button--close{margin-inline-end:calc(var(--mlv-btn-height) * -.25)}.mlv-tile__body{flex:1 1 auto;min-height:0;font-size:var(--mlv-tile-body-size);line-height:var(--mlv-tile-body-line-height)}@container mlv-tile (max-width: 18rem){.mlv-tile__header:has(>.mlv-tile__controls--crowded){flex-wrap:wrap}.mlv-tile__controls--crowded{flex-basis:100%;width:100%;justify-content:flex-end}}.mlv-tiles.mlv-tiles--nested .mlv-tile{--mlv-tile-control-size: var(--mlv-height-xs)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], tile: [{ type: i0.Input, args: [{ isSignal: true, alias: "tile", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], dragDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDisabled", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], inactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "inactive", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], headerRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvTileHeader), { isSignal: true }] }], actionsRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvTileActions), { isSignal: true }] }], trailingActionsRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvTileTrailingActions), { isSignal: true }] }] } });
+
+/**
+ * Narrows a tree node to its container form.
+ *
+ * @param node - Any node of a Tile tree.
+ * @returns `true` when the node accepts children, narrowing it to `MlvTileNodeWithChildren`.
+ */
+function isMlvTileContainer(node) {
+    return node.acceptsChildren;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvTile, MlvTileActions, MlvTileHeader, MlvTileTrailingActions, MlvTiles, MlvTilesEmpty, canEnterMlvTileTarget, createMlvTileDragSession, insertMlvTileNode, isMlvTileContainer, moveMlvTileNode, removeMlvTileNode, updateMlvTileNodeProps };
+//# sourceMappingURL=malva-ui-core-tile.mjs.map