@universal-material/web 3.7.2 → 3.9.0

package/scaffold/pane.d.ts

@@ -0,0 +1,127 @@
+import { HTMLTemplateResult, LitElement, PropertyValues } from 'lit';
+export type PaneMode = 'fixed' | 'collapsible' | 'sidebar' | 'fullscreen';
+export type PaneVariant = 'transparent' | 'filled';
+export type PaneQueryContext = 'media' | 'container';
+export type PaneAnimation = 'none' | 'exit' | 'exit-start' | 'exit-end' | 'fade';
+/**
+ * A region declared as a light-DOM child of `u-scaffold`. The pane is a
+ * flex item in the scaffold's body row; its behaviour is driven by `mode`:
+ *
+ * - `fixed` (default): always visible as a flex item. `open` is ignored.
+ * - `collapsible`: a flex item while `open=true`; removed from the flow
+ *   when `open=false` (animated via `transition-behavior: allow-discrete`).
+ * - `sidebar`: a modal drawer overlay anchored to the scaffold. Slides in
+ *   from the leading or trailing edge (the scaffold tags each pane with
+ *   `data-align="start|end"` based on its DOM position relative to the
+ *   body content) and shows a scrim. Closed by default.
+ * - `fullscreen`: same overlay semantics as `sidebar` but full-width,
+ *   sits above the top app bar, no scrim. Closed by default.
+ *
+ * Modes can vary per Material 3 breakpoint via the `mode-sm`, `mode-md`,
+ * `mode-lg` and `mode-xl` attributes — the larger breakpoint wins via
+ * source order in the stylesheet. The `query-context` attribute switches
+ * the breakpoint source between the viewport (`media`, default) and the
+ * scaffold's container (`container`). All breakpoint handling is CSS —
+ * the pane does not subscribe to any `matchMedia`/`ResizeObserver`.
+ *
+ * The `open` property defaults to `true` for `fixed` / `collapsible`
+ * panes and `false` for `sidebar` / `fullscreen` panes. The default is
+ * recomputed whenever `mode` changes — until the consumer writes to
+ * `open` explicitly, the default tracks the active `mode`.
+ *
+ * @slot header - Title row / actions. Sticks to the top of the pane.
+ * @slot - The pane content. Scrolls if it overflows.
+ *
+ * @csspart container - The visual surface.
+ * @csspart header
+ * @csspart content
+ * @csspart scrim - The modal scrim (sidebar mode only).
+ *
+ * @fires open - When the pane opens. Bubbles, composed.
+ * @fires close - When the pane closes. Bubbles, composed.
+ */
+export declare class Pane extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Background treatment. `filled` gives the pane its own card chrome
+     * (`surface-container-low` + `--u-pane-filled-shape-corner`, default
+     * `medium` / 12dp). `transparent` blends with the scaffold background.
+     * Override the surface tone via `--u-pane-filled-bg-color`.
+     */
+    variant: PaneVariant;
+    /**
+     * Behaviour at the base (no-breakpoint-qualifier) level. `fixed` keeps
+     * the pane in the scaffold flex row at all times; `collapsible` makes
+     * it disappear from the row when `open=false`; `sidebar` and
+     * `fullscreen` render the pane as a modal overlay against the
+     * scaffold when `open=true`.
+     */
+    mode: PaneMode;
+    /**
+     * Mode override applied from the `sm` breakpoint (≥ 600px) upward.
+     * Falls back to `mode` when unset. Resolved purely in CSS.
+     */
+    modeSm?: PaneMode;
+    /** Mode override applied from `md` (≥ 840px) upward. */
+    modeMd?: PaneMode;
+    /** Mode override applied from `lg` (≥ 1200px) upward. */
+    modeLg?: PaneMode;
+    /** Mode override applied from `xl` (≥ 1600px) upward. */
+    modeXl?: PaneMode;
+    /**
+     * Whether the breakpoint overrides query the viewport (`media`,
+     * default) or the nearest container with `container-type` set
+     * (`container`). Switching to `container` lets the pane react to its
+     * scaffold's own size when the scaffold lives in a constrained layout
+     * — see `u-scaffold` which sets `container-type: inline-size`.
+     */
+    queryContext: PaneQueryContext;
+    /**
+     * How the pane animates in/out when `open` toggles (modal modes) or
+     * when it enters/leaves the flex flow (`collapsible`). `none` disables
+     * the transition entirely; `exit` (default) slides the modal off-screen
+     * and infers the direction from the scaffold-assigned `data-align`
+     * (`start` → leading edge, `end` → trailing edge); `exit-start` and
+     * `exit-end` force a side regardless of `data-align`; `fade` swaps
+     * the slide for an opacity transition (modal stays in place and fades
+     * through).
+     */
+    animation: PaneAnimation;
+    /**
+     * Animation override applied from the `sm` breakpoint (≥ 600px) upward.
+     * Falls back to `animation` when unset. Resolved purely in CSS.
+     */
+    animationSm?: PaneAnimation;
+    /** Animation override applied from `md` (≥ 840px) upward. */
+    animationMd?: PaneAnimation;
+    /** Animation override applied from `lg` (≥ 1200px) upward. */
+    animationLg?: PaneAnimation;
+    /** Animation override applied from `xl` (≥ 1600px) upward. */
+    animationXl?: PaneAnimation;
+    /**
+     * Programmatic open state. Default is computed from `mode`:
+     * `true` for `fixed` / `collapsible`, `false` for `sidebar` /
+     * `fullscreen`. Once the consumer sets this explicitly (attribute,
+     * property or `show()` / `close()`), the explicit value sticks.
+     *
+     * In `fixed` mode the pane is visible regardless of `open`.
+     */
+    get open(): boolean;
+    set open(value: boolean);
+    /** Opens the pane. Equivalent to `open = true`. */
+    show(): void;
+    /** Closes the pane. Equivalent to `open = false`. */
+    close(): void;
+    /** Toggles `open`. */
+    toggle(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-pane': Pane;
+    }
+}
+//# sourceMappingURL=pane.d.ts.map

package/scaffold/pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pane.d.ts","sourceRoot":"","sources":["../../src/scaffold/pane.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM3E,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,YAAY,CAAC;AAC1E,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,QAAQ,CAAC;AACnD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,WAAW,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAIjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,IAAK,SAAQ,UAAU;;IAClC,OAAgB,MAAM,4BAAwB;IAE9C;;;;;OAKG;IAEH,OAAO,EAAE,WAAW,CAAiB;IAErC;;;;;;OAMG;IAEH,IAAI,EAAE,QAAQ,CAAW;IAEzB;;;OAGG;IAEH,MAAM,CAAC,EAAE,QAAQ,CAAC;IAElB,wDAAwD;IAExD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAElB,yDAAyD;IAEzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAElB,yDAAyD;IAEzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAElB;;;;;;OAMG;IAEH,YAAY,EAAE,gBAAgB,CAAW;IAEzC;;;;;;;;;OASG;IAEH,SAAS,EAAE,aAAa,CAAU;IAElC;;;OAGG;IAEH,WAAW,CAAC,EAAE,aAAa,CAAC;IAE5B,6DAA6D;IAE7D,WAAW,CAAC,EAAE,aAAa,CAAC;IAE5B,8DAA8D;IAE9D,WAAW,CAAC,EAAE,aAAa,CAAC;IAE5B,8DAA8D;IAE9D,WAAW,CAAC,EAAE,aAAa,CAAC;IAE5B;;;;;;;OAOG;IACH,IACI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAWtB;IAMD,mDAAmD;IACnD,IAAI,IAAI,IAAI;IAIZ,qDAAqD;IACrD,KAAK,IAAI,IAAI;IAIb,sBAAsB;IACtB,MAAM,IAAI,IAAI;IAIL,oBAAoB,IAAI,IAAI;cAQlB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAyB5C,MAAM,IAAI,kBAAkB;CAuBhD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,IAAI,CAAC;KAChB;CACF"}

package/scaffold/pane.js

@@ -0,0 +1,220 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './pane.styles.js';
+const MODAL_MODES = new Set(['sidebar', 'fullscreen']);
+/**
+ * A region declared as a light-DOM child of `u-scaffold`. The pane is a
+ * flex item in the scaffold's body row; its behaviour is driven by `mode`:
+ *
+ * - `fixed` (default): always visible as a flex item. `open` is ignored.
+ * - `collapsible`: a flex item while `open=true`; removed from the flow
+ *   when `open=false` (animated via `transition-behavior: allow-discrete`).
+ * - `sidebar`: a modal drawer overlay anchored to the scaffold. Slides in
+ *   from the leading or trailing edge (the scaffold tags each pane with
+ *   `data-align="start|end"` based on its DOM position relative to the
+ *   body content) and shows a scrim. Closed by default.
+ * - `fullscreen`: same overlay semantics as `sidebar` but full-width,
+ *   sits above the top app bar, no scrim. Closed by default.
+ *
+ * Modes can vary per Material 3 breakpoint via the `mode-sm`, `mode-md`,
+ * `mode-lg` and `mode-xl` attributes — the larger breakpoint wins via
+ * source order in the stylesheet. The `query-context` attribute switches
+ * the breakpoint source between the viewport (`media`, default) and the
+ * scaffold's container (`container`). All breakpoint handling is CSS —
+ * the pane does not subscribe to any `matchMedia`/`ResizeObserver`.
+ *
+ * The `open` property defaults to `true` for `fixed` / `collapsible`
+ * panes and `false` for `sidebar` / `fullscreen` panes. The default is
+ * recomputed whenever `mode` changes — until the consumer writes to
+ * `open` explicitly, the default tracks the active `mode`.
+ *
+ * @slot header - Title row / actions. Sticks to the top of the pane.
+ * @slot - The pane content. Scrolls if it overflows.
+ *
+ * @csspart container - The visual surface.
+ * @csspart header
+ * @csspart content
+ * @csspart scrim - The modal scrim (sidebar mode only).
+ *
+ * @fires open - When the pane opens. Bubbles, composed.
+ * @fires close - When the pane closes. Bubbles, composed.
+ */
+let Pane = class Pane extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Background treatment. `filled` gives the pane its own card chrome
+         * (`surface-container-low` + `--u-pane-filled-shape-corner`, default
+         * `medium` / 12dp). `transparent` blends with the scaffold background.
+         * Override the surface tone via `--u-pane-filled-bg-color`.
+         */
+        this.variant = 'transparent';
+        /**
+         * Behaviour at the base (no-breakpoint-qualifier) level. `fixed` keeps
+         * the pane in the scaffold flex row at all times; `collapsible` makes
+         * it disappear from the row when `open=false`; `sidebar` and
+         * `fullscreen` render the pane as a modal overlay against the
+         * scaffold when `open=true`.
+         */
+        this.mode = 'fixed';
+        /**
+         * Whether the breakpoint overrides query the viewport (`media`,
+         * default) or the nearest container with `container-type` set
+         * (`container`). Switching to `container` lets the pane react to its
+         * scaffold's own size when the scaffold lives in a constrained layout
+         * — see `u-scaffold` which sets `container-type: inline-size`.
+         */
+        this.queryContext = 'media';
+        /**
+         * How the pane animates in/out when `open` toggles (modal modes) or
+         * when it enters/leaves the flex flow (`collapsible`). `none` disables
+         * the transition entirely; `exit` (default) slides the modal off-screen
+         * and infers the direction from the scaffold-assigned `data-align`
+         * (`start` → leading edge, `end` → trailing edge); `exit-start` and
+         * `exit-end` force a side regardless of `data-align`; `fade` swaps
+         * the slide for an opacity transition (modal stays in place and fades
+         * through).
+         */
+        this.animation = 'exit';
+        this.#explicitOpen = null;
+        this.#lastReflectedOpen = null;
+        this.#keydownAttached = false;
+        this.#onScrimClick = () => {
+            this.close();
+        };
+        this.#onKeydown = (event) => {
+            if (event.key === 'Escape' && this.open && MODAL_MODES.has(this.mode)) {
+                this.close();
+            }
+        };
+    }
+    static { this.styles = [baseStyles, styles]; }
+    /**
+     * Programmatic open state. Default is computed from `mode`:
+     * `true` for `fixed` / `collapsible`, `false` for `sidebar` /
+     * `fullscreen`. Once the consumer sets this explicitly (attribute,
+     * property or `show()` / `close()`), the explicit value sticks.
+     *
+     * In `fixed` mode the pane is visible regardless of `open`.
+     */
+    get open() {
+        return this.#explicitOpen ?? !MODAL_MODES.has(this.mode);
+    }
+    set open(value) {
+        const wasOpen = this.open;
+        this.#explicitOpen = value;
+        if (wasOpen !== value) {
+            this.requestUpdate('open', wasOpen);
+            this.dispatchEvent(new Event(value ? 'open' : 'close', {
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    #explicitOpen;
+    #lastReflectedOpen;
+    #keydownAttached;
+    /** Opens the pane. Equivalent to `open = true`. */
+    show() {
+        this.open = true;
+    }
+    /** Closes the pane. Equivalent to `open = false`. */
+    close() {
+        this.open = false;
+    }
+    /** Toggles `open`. */
+    toggle() {
+        this.open = !this.open;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.#keydownAttached) {
+            document.removeEventListener('keydown', this.#onKeydown);
+            this.#keydownAttached = false;
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        // Manual attribute reflection for `open`: since the default is
+        // derived from `mode`, we can't use `reflect: true` directly (Lit
+        // would never see "open" change on a pure mode flip). Toggle the
+        // attribute ourselves whenever the effective value drifts.
+        const isOpen = this.open;
+        if (this.#lastReflectedOpen !== isOpen) {
+            this.toggleAttribute('open', isOpen);
+            this.#lastReflectedOpen = isOpen;
+        }
+        // Escape key closes any modal-mode pane while open. We attach the
+        // listener lazily so non-modal panes never touch `document`.
+        const wantsKeydown = isOpen && MODAL_MODES.has(this.mode);
+        if (wantsKeydown && !this.#keydownAttached) {
+            document.addEventListener('keydown', this.#onKeydown);
+            this.#keydownAttached = true;
+        }
+        else if (!wantsKeydown && this.#keydownAttached) {
+            document.removeEventListener('keydown', this.#onKeydown);
+            this.#keydownAttached = false;
+        }
+    }
+    render() {
+        return html `
+      <div class="scrim" part="scrim" @click=${this.#onScrimClick}></div>
+      <aside class="container" part="container">
+        <header class="header" part="header">
+          <slot name="header"></slot>
+        </header>
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+      </aside>
+    `;
+    }
+    #onScrimClick;
+    #onKeydown;
+};
+__decorate([
+    property({ type: String, reflect: true })
+], Pane.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Pane.prototype, "mode", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'mode-sm' })
+], Pane.prototype, "modeSm", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'mode-md' })
+], Pane.prototype, "modeMd", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'mode-lg' })
+], Pane.prototype, "modeLg", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'mode-xl' })
+], Pane.prototype, "modeXl", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'query-context' })
+], Pane.prototype, "queryContext", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Pane.prototype, "animation", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'animation-sm' })
+], Pane.prototype, "animationSm", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'animation-md' })
+], Pane.prototype, "animationMd", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'animation-lg' })
+], Pane.prototype, "animationLg", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'animation-xl' })
+], Pane.prototype, "animationXl", void 0);
+__decorate([
+    property({ type: Boolean })
+], Pane.prototype, "open", null);
+Pane = __decorate([
+    customElement('u-pane')
+], Pane);
+export { Pane };
+//# sourceMappingURL=pane.js.map

package/scaffold/pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pane.js","sourceRoot":"","sources":["../../src/scaffold/pane.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './pane.styles.js';\n\nexport type PaneMode = 'fixed' | 'collapsible' | 'sidebar' | 'fullscreen';\nexport type PaneVariant = 'transparent' | 'filled';\nexport type PaneQueryContext = 'media' | 'container';\nexport type PaneAnimation = 'none' | 'exit' | 'exit-start' | 'exit-end' | 'fade';\n\nconst MODAL_MODES: ReadonlySet<PaneMode> = new Set<PaneMode>(['sidebar', 'fullscreen']);\n\n/**\n * A region declared as a light-DOM child of `u-scaffold`. The pane is a\n * flex item in the scaffold's body row; its behaviour is driven by `mode`:\n *\n * - `fixed` (default): always visible as a flex item. `open` is ignored.\n * - `collapsible`: a flex item while `open=true`; removed from the flow\n *   when `open=false` (animated via `transition-behavior: allow-discrete`).\n * - `sidebar`: a modal drawer overlay anchored to the scaffold. Slides in\n *   from the leading or trailing edge (the scaffold tags each pane with\n *   `data-align=\"start|end\"` based on its DOM position relative to the\n *   body content) and shows a scrim. Closed by default.\n * - `fullscreen`: same overlay semantics as `sidebar` but full-width,\n *   sits above the top app bar, no scrim. Closed by default.\n *\n * Modes can vary per Material 3 breakpoint via the `mode-sm`, `mode-md`,\n * `mode-lg` and `mode-xl` attributes — the larger breakpoint wins via\n * source order in the stylesheet. The `query-context` attribute switches\n * the breakpoint source between the viewport (`media`, default) and the\n * scaffold's container (`container`). All breakpoint handling is CSS —\n * the pane does not subscribe to any `matchMedia`/`ResizeObserver`.\n *\n * The `open` property defaults to `true` for `fixed` / `collapsible`\n * panes and `false` for `sidebar` / `fullscreen` panes. The default is\n * recomputed whenever `mode` changes — until the consumer writes to\n * `open` explicitly, the default tracks the active `mode`.\n *\n * @slot header - Title row / actions. Sticks to the top of the pane.\n * @slot - The pane content. Scrolls if it overflows.\n *\n * @csspart container - The visual surface.\n * @csspart header\n * @csspart content\n * @csspart scrim - The modal scrim (sidebar mode only).\n *\n * @fires open - When the pane opens. Bubbles, composed.\n * @fires close - When the pane closes. Bubbles, composed.\n */\n@customElement('u-pane')\nexport class Pane extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  /**\n   * Background treatment. `filled` gives the pane its own card chrome\n   * (`surface-container-low` + `--u-pane-filled-shape-corner`, default\n   * `medium` / 12dp). `transparent` blends with the scaffold background.\n   * Override the surface tone via `--u-pane-filled-bg-color`.\n   */\n  @property({ type: String, reflect: true })\n  variant: PaneVariant = 'transparent';\n\n  /**\n   * Behaviour at the base (no-breakpoint-qualifier) level. `fixed` keeps\n   * the pane in the scaffold flex row at all times; `collapsible` makes\n   * it disappear from the row when `open=false`; `sidebar` and\n   * `fullscreen` render the pane as a modal overlay against the\n   * scaffold when `open=true`.\n   */\n  @property({ type: String, reflect: true })\n  mode: PaneMode = 'fixed';\n\n  /**\n   * Mode override applied from the `sm` breakpoint (≥ 600px) upward.\n   * Falls back to `mode` when unset. Resolved purely in CSS.\n   */\n  @property({ type: String, reflect: true, attribute: 'mode-sm' })\n  modeSm?: PaneMode;\n\n  /** Mode override applied from `md` (≥ 840px) upward. */\n  @property({ type: String, reflect: true, attribute: 'mode-md' })\n  modeMd?: PaneMode;\n\n  /** Mode override applied from `lg` (≥ 1200px) upward. */\n  @property({ type: String, reflect: true, attribute: 'mode-lg' })\n  modeLg?: PaneMode;\n\n  /** Mode override applied from `xl` (≥ 1600px) upward. */\n  @property({ type: String, reflect: true, attribute: 'mode-xl' })\n  modeXl?: PaneMode;\n\n  /**\n   * Whether the breakpoint overrides query the viewport (`media`,\n   * default) or the nearest container with `container-type` set\n   * (`container`). Switching to `container` lets the pane react to its\n   * scaffold's own size when the scaffold lives in a constrained layout\n   * — see `u-scaffold` which sets `container-type: inline-size`.\n   */\n  @property({ type: String, reflect: true, attribute: 'query-context' })\n  queryContext: PaneQueryContext = 'media';\n\n  /**\n   * How the pane animates in/out when `open` toggles (modal modes) or\n   * when it enters/leaves the flex flow (`collapsible`). `none` disables\n   * the transition entirely; `exit` (default) slides the modal off-screen\n   * and infers the direction from the scaffold-assigned `data-align`\n   * (`start` → leading edge, `end` → trailing edge); `exit-start` and\n   * `exit-end` force a side regardless of `data-align`; `fade` swaps\n   * the slide for an opacity transition (modal stays in place and fades\n   * through).\n   */\n  @property({ type: String, reflect: true })\n  animation: PaneAnimation = 'exit';\n\n  /**\n   * Animation override applied from the `sm` breakpoint (≥ 600px) upward.\n   * Falls back to `animation` when unset. Resolved purely in CSS.\n   */\n  @property({ type: String, reflect: true, attribute: 'animation-sm' })\n  animationSm?: PaneAnimation;\n\n  /** Animation override applied from `md` (≥ 840px) upward. */\n  @property({ type: String, reflect: true, attribute: 'animation-md' })\n  animationMd?: PaneAnimation;\n\n  /** Animation override applied from `lg` (≥ 1200px) upward. */\n  @property({ type: String, reflect: true, attribute: 'animation-lg' })\n  animationLg?: PaneAnimation;\n\n  /** Animation override applied from `xl` (≥ 1600px) upward. */\n  @property({ type: String, reflect: true, attribute: 'animation-xl' })\n  animationXl?: PaneAnimation;\n\n  /**\n   * Programmatic open state. Default is computed from `mode`:\n   * `true` for `fixed` / `collapsible`, `false` for `sidebar` /\n   * `fullscreen`. Once the consumer sets this explicitly (attribute,\n   * property or `show()` / `close()`), the explicit value sticks.\n   *\n   * In `fixed` mode the pane is visible regardless of `open`.\n   */\n  @property({ type: Boolean })\n  get open(): boolean {\n    return this.#explicitOpen ?? !MODAL_MODES.has(this.mode);\n  }\n\n  set open(value: boolean) {\n    const wasOpen = this.open;\n    this.#explicitOpen = value;\n\n    if (wasOpen !== value) {\n      this.requestUpdate('open', wasOpen);\n      this.dispatchEvent(new Event(value ? 'open' : 'close', {\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  #explicitOpen: boolean | null = null;\n  #lastReflectedOpen: boolean | null = null;\n  #keydownAttached = false;\n\n  /** Opens the pane. Equivalent to `open = true`. */\n  show(): void {\n    this.open = true;\n  }\n\n  /** Closes the pane. Equivalent to `open = false`. */\n  close(): void {\n    this.open = false;\n  }\n\n  /** Toggles `open`. */\n  toggle(): void {\n    this.open = !this.open;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.#keydownAttached) {\n      document.removeEventListener('keydown', this.#onKeydown);\n      this.#keydownAttached = false;\n    }\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    super.updated(changed);\n\n    // Manual attribute reflection for `open`: since the default is\n    // derived from `mode`, we can't use `reflect: true` directly (Lit\n    // would never see \"open\" change on a pure mode flip). Toggle the\n    // attribute ourselves whenever the effective value drifts.\n    const isOpen = this.open;\n    if (this.#lastReflectedOpen !== isOpen) {\n      this.toggleAttribute('open', isOpen);\n      this.#lastReflectedOpen = isOpen;\n    }\n\n    // Escape key closes any modal-mode pane while open. We attach the\n    // listener lazily so non-modal panes never touch `document`.\n    const wantsKeydown = isOpen && MODAL_MODES.has(this.mode);\n    if (wantsKeydown && !this.#keydownAttached) {\n      document.addEventListener('keydown', this.#onKeydown);\n      this.#keydownAttached = true;\n    } else if (!wantsKeydown && this.#keydownAttached) {\n      document.removeEventListener('keydown', this.#onKeydown);\n      this.#keydownAttached = false;\n    }\n  }\n\n  protected override render(): HTMLTemplateResult {\n    return html`\n      <div class=\"scrim\" part=\"scrim\" @click=${this.#onScrimClick}></div>\n      <aside class=\"container\" part=\"container\">\n        <header class=\"header\" part=\"header\">\n          <slot name=\"header\"></slot>\n        </header>\n        <div class=\"content\" part=\"content\">\n          <slot></slot>\n        </div>\n      </aside>\n    `;\n  }\n\n  readonly #onScrimClick = (): void => {\n    this.close();\n  };\n\n  readonly #onKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape' && this.open && MODAL_MODES.has(this.mode)) {\n      this.close();\n    }\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-pane': Pane;\n  }\n}\n"]}

package/scaffold/pane.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=pane.styles.d.ts.map

package/scaffold/pane.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pane.styles.d.ts","sourceRoot":"","sources":["../../src/scaffold/pane.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAk3DlB,CAAC"}