@jolly-pixel/ui 1.0.1

package/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2025 JollyPixel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+This package embeds the following third-party font.
+
+Roboto Mono
+Copyright 2015 The Roboto Mono Project Authors
+https://github.com/googlefonts/robotomono
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed
+under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. See the License for the
+specific language governing permissions and limitations under the License.
+
+The embedded copy is version 31, weight 400, latin subset only, encoded as a
+base64 data URI in "src/theme/font.ts". It is unmodified apart from the subset
+selection performed by Google Fonts.

package/README.md

@@ -0,0 +1,194 @@
+<h1 align="center">
+  ui
+</h1>
+
+<p align="center">
+  Common and System's UI for JollyPixel's editors
+</p>
+
+## 📌 About
+
+Browser-based Lit components for JollyPixel editor interfaces: controlled fields, actions, icons,
+theming and collaboration-aware field state.
+
+## 💡 Features
+
+- **Form controls**: text, number, slider, range, checkbox, select, flags, color and button groups
+- **Containers and chrome**: panes, folders, tabs, docks, floating panes, dialogs, toolbars and rails
+- **Actions and layout**: buttons, separators and property rows
+- **Controlled fields**: shared values, events, drafts, validation, mixed values and defaults
+- **Collaboration state**: peer presence, field locking and peer colors
+- **Feedback**: determinate and indeterminate progress plus the runtime loading screen
+- **Theming**: light/dark themes, density presets and semantic custom-property tokens
+- **Icons**: built-in glyphs and an open registry for custom icons
+
+## 💃 Getting Started
+
+This package is available in the Node Package Repository and can be easily installed with [npm][npm] or [yarn][yarn].
+
+```bash
+$ npm i @jolly-pixel/ui
+# or
+$ yarn add @jolly-pixel/ui
+```
+
+> [!IMPORTANT]
+> `lit` is a peer dependency. Use one compatible copy in the application.
+
+## 👀 Usage Example
+
+Import the package to register its custom elements. Apply `themeStyles` to a shadow-root scope
+host, then bind field values and change events:
+
+```ts
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { themeStyles } from "@jolly-pixel/ui";
+
+@customElement("settings-pane")
+export class SettingsPane extends LitElement {
+  static override styles = [themeStyles, css`:host { display: block; }`];
+
+  #opacity = 1;
+
+  override render() {
+    return html`
+      <jolly-text
+        label="Name"
+        .value=${"Player"}
+      ></jolly-text>
+
+      <jolly-number
+        label="Opacity"
+        .step=${0.01}
+        .min=${0}
+        .max=${1}
+        .value=${this.#opacity}
+        .default=${1}
+        @jolly-change=${this.#setOpacity}
+      ></jolly-number>
+
+      <jolly-button variant="accent" @click=${this.#resetOpacity}>
+        Reset opacity
+      </jolly-button>
+    `;
+  }
+
+  #setOpacity = (event: CustomEvent<{ value: number }>) => {
+    this.#opacity = event.detail.value;
+    this.requestUpdate();
+  };
+
+  #resetOpacity = () => {
+    this.#opacity = 1;
+    this.requestUpdate();
+  };
+}
+```
+
+`jolly-text`, `jolly-number` and `jolly-button` are components provided by this package. Fields are
+controlled: they render the supplied `value` and emit changes, so the handler writes the new value
+back into the component's state.
+
+Set `density` on the scope host when needed:
+
+```html
+<settings-pane density="compact"></settings-pane>
+```
+
+## 📚 API
+
+The installation and first component example above are the starting point.
+These guides cover cross-component behavior:
+
+- [Choosing controls](./docs/guides/choosing-controls.md)
+- [Controlled fields](./docs/guides/controlled-fields.md)
+- [Composing containers](./docs/guides/composing-containers.md)
+- [Docking and persistence](./docs/guides/docking-and-persistence.md)
+- [Theming and density](./docs/guides/theming-and-density.md)
+- [Using the facade](./docs/guides/using-the-facade.md)
+
+The API reference follows the implementation folders. Each registered custom
+element has one page with its usage, properties, events, methods, slots, and
+styling surface where applicable.
+
+- [Controls](./docs/api/controls/README.md)
+- [Containers](./docs/api/containers/README.md)
+- [Data](./docs/api/data/README.md)
+- [Feedback](./docs/api/feedback/README.md)
+- [Icons](./docs/api/icon/README.md)
+- [Math](./docs/api/math/README.md)
+- [Monitors](./docs/api/monitors/README.md)
+- [Peer presence](./docs/api/peer/README.md)
+- [Stats](./docs/api/stats/README.md)
+- [Theme components](./docs/api/theme/README.md)
+- [Facade](./docs/api/facade/README.md)
+- [Storage](./docs/api/storage/README.md)
+- [Interaction helpers](./docs/api/interaction/README.md)
+- [Color utilities](./docs/api/color/README.md)
+
+## 🖼️ Examples Gallery
+
+Every component has a gallery entry, which is also its only end to end fixture.
+
+```bash
+npm run dev
+```
+
+The gallery exercises the shared field states. Deep-link a control with or without the surrounding
+shell:
+
+```
+/?example=controls/number
+/?example=controls/number&chrome=off
+```
+
+## Contributors Guide
+
+Read the [contributing guide][contributing] before making changes.
+
+Run the package checks with:
+
+```bash
+npm run test
+npm run test:e2e
+npm run lint
+```
+
+Unit tests use `node:test`; end-to-end tests use Playwright against the gallery.
+
+End-to-end tests follow the production ownership model under `test/e2e/`:
+
+- `controls/`, `containers/`, and `field/` hold component and field contracts.
+- `gallery/` verifies the gallery harness and manifest.
+- `scenarios/` holds multi-component workflows that do not belong to one source
+  module.
+- `support/` owns navigation, event capture, locator, pointer, and computed-style
+  helpers. Do not duplicate these helpers in a spec.
+
+Keep a test with the component that owns the observed contract. Put only
+deliberately cross-component user workflows in `scenarios/`.
+
+> [!IMPORTANT]
+> Keep unit-test assertions in plain modules. Component decorators are not erasable syntax and
+> cannot be imported directly by `node --test` with type stripping.
+
+> [!CAUTION]
+> Include tests for new features and bug fixes.
+
+## License
+
+MIT
+
+This package embeds Roboto Mono (weight 400, latin subset), licensed under the
+[Apache License 2.0][roboto-mono]. See [NOTICE](./NOTICE) for the full attribution. The face is
+registered against the document on first import of `themeStyles`; call `ensureFontFace()` yourself
+if you declare theme tokens by hand. Without it, `--jolly-font-family` falls back to the system
+mono stack.
+
+<!-- Reference-style links for DRYness -->
+
+[npm]: https://docs.npmjs.com/getting-started/what-is-npm
+[yarn]: https://yarnpkg.com
+[contributing]: ../../CONTRIBUTING.md
+[roboto-mono]: https://github.com/googlefonts/robotomono

package/dist/color/area.d.ts

@@ -0,0 +1,24 @@
+export interface PointerPosition {
+    x: number;
+    y: number;
+}
+export interface AreaRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export interface SaturationValue {
+    s: number;
+    v: number;
+}
+/**
+ * Returns top-left-relative pointer ratios clamped to the rectangle.
+ * Zero-sized axes return 0.
+ */
+export declare function ratioFromPointer(pointer: PointerPosition, rect: AreaRect): PointerPosition;
+/**
+ * Maps x to saturation and inverted y to value.
+ */
+export declare function saturationValueFromPointer(pointer: PointerPosition, rect: AreaRect): SaturationValue;
+//# sourceMappingURL=area.d.ts.map

package/dist/color/area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"area.d.ts","sourceRoot":"","sources":["../../src/color/area.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,eAAe,EACxB,IAAI,EAAE,QAAQ,GACb,eAAe,CAWjB;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,eAAe,EACxB,IAAI,EAAE,QAAQ,GACb,eAAe,CAUjB"}

package/dist/color/area.js

@@ -0,0 +1,27 @@
+/**
+ * Returns top-left-relative pointer ratios clamped to the rectangle.
+ * Zero-sized axes return 0.
+ */
+export function ratioFromPointer(pointer, rect) {
+    return {
+        x: ratio(pointer.x - rect.left, rect.width),
+        y: ratio(pointer.y - rect.top, rect.height)
+    };
+}
+/**
+ * Maps x to saturation and inverted y to value.
+ */
+export function saturationValueFromPointer(pointer, rect) {
+    const { x, y } = ratioFromPointer(pointer, rect);
+    return {
+        s: x,
+        v: 1 - y
+    };
+}
+function ratio(offset, size) {
+    if (size <= 0) {
+        return 0;
+    }
+    return Math.min(1, Math.max(0, offset / size));
+}
+//# sourceMappingURL=area.js.map

package/dist/color/area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area.js","sourceRoot":"","sources":["../../src/color/area.ts"],"names":[],"mappings":"AAiBA;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAC9B,OAAwB,EACxB,IAAc;IAEd,OAAO;QACL,CAAC,EAAE,KAAK,CACN,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EACrB,IAAI,CAAC,KAAK,CACX;QACD,CAAC,EAAE,KAAK,CACN,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,EACpB,IAAI,CAAC,MAAM,CACZ;KACF,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,0BAA0B,CACxC,OAAwB,EACxB,IAAc;IAEd,MAAM,EACJ,CAAC,EACD,CAAC,EACF,GAAG,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAEpC,OAAO;QACL,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC,GAAG,CAAC;KACT,CAAC;AACJ,CAAC;AAED,SAAS,KAAK,CACZ,MAAc,EACd,IAAY;IAEZ,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC;QACd,OAAO,CAAC,CAAC;IACX,CAAC;IAED,OAAO,IAAI,CAAC,GAAG,CACb,CAAC,EACD,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC,CAC3B,CAAC;AACJ,CAAC"}

package/dist/color/draft.d.ts

@@ -0,0 +1,10 @@
+import { type RGBA } from "@jolly-pixel/color";
+/**
+ * Parses what a user has typed into a colour field.
+ *
+ * Stricter than `parseColor` on one point: four digit `#rgba` is refused
+ * because "#ff66" is what typing "#ff6600" looks like halfway through, and
+ * committing it would silently replace the colour being typed.
+ */
+export declare function parseFieldColor(draft: string): RGBA | null;
+//# sourceMappingURL=draft.d.ts.map

package/dist/color/draft.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"draft.d.ts","sourceRoot":"","sources":["../../src/color/draft.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,IAAI,EACV,MAAM,oBAAoB,CAAC;AAK5B;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,GACZ,IAAI,GAAG,IAAI,CAMb"}

package/dist/color/draft.js

@@ -0,0 +1,18 @@
+// Import Third-party Dependencies
+import { parseColor } from "@jolly-pixel/color";
+// CONSTANTS
+const kAmbiguousHex = /^#?[0-9a-f]{4}$/i;
+/**
+ * Parses what a user has typed into a colour field.
+ *
+ * Stricter than `parseColor` on one point: four digit `#rgba` is refused
+ * because "#ff66" is what typing "#ff6600" looks like halfway through, and
+ * committing it would silently replace the colour being typed.
+ */
+export function parseFieldColor(draft) {
+    if (kAmbiguousHex.test(draft.trim())) {
+        return null;
+    }
+    return parseColor(draft);
+}
+//# sourceMappingURL=draft.js.map

package/dist/color/draft.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draft.js","sourceRoot":"","sources":["../../src/color/draft.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EACL,UAAU,EAEX,MAAM,oBAAoB,CAAC;AAE5B,YAAY;AACZ,MAAM,aAAa,GAAG,kBAAkB,CAAC;AAEzC;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAC7B,KAAa;IAEb,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;QACrC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;AAC3B,CAAC"}

package/dist/containers/Dialog.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, type TemplateResult } from "lit";
+export declare class Dialog extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    heading: string;
+    dismissible: boolean;
+    _dialog: HTMLDialogElement;
+    _actions: HTMLSlotElement;
+    constructor();
+    get open(): boolean;
+    render(): TemplateResult;
+    showModal(): Promise<void>;
+    close(returnValue?: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-dialog": Dialog;
+    }
+}
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/containers/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/containers/Dialog.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EAGV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAmBb,qBACa,MAAO,SAAQ,UAAU;;IACpC,OAAgB,MAAM,4BAGpB;IAGM,OAAO,EAAE,MAAM,CAAC;IAGhB,WAAW,EAAE,OAAO,CAAC;IAGrB,OAAO,EAAE,iBAAiB,CAAC;IAG3B,QAAQ,EAAE,eAAe,CAAC;;IAWlC,IAAI,IAAI,IAAI,OAAO,CAElB;IAEQ,MAAM,IAAI,cAAc;IAe3B,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC;IAQhC,KAAK,CACH,WAAW,SAAK,GACf,IAAI;CA6GR;AAuBD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,MAAM,CAAC;KACxB;CACF"}

package/dist/containers/Dialog.js

@@ -0,0 +1,162 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+// Import Third-party Dependencies
+import { LitElement, html, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+// Import Internal Dependencies
+import { dialogStyles } from "./Dialog.styles.js";
+import { emitContainerEvent } from "./events.js";
+import { themeStyles } from "../theme/styles/themeStyles.js";
+import { ambientThemeMode } from "../theme/ambientTheme.js";
+// CONSTANTS
+const kDefaultVariants = new Set(["accent", "danger"]);
+let Dialog = class Dialog extends LitElement {
+    static styles = [
+        themeStyles,
+        dialogStyles
+    ];
+    #inheritedTheme = null;
+    constructor() {
+        super();
+        this.heading = "";
+        this.dismissible = true;
+    }
+    get open() {
+        return this._dialog?.open ?? false;
+    }
+    render() {
+        return html `
+      <dialog
+        @cancel=${this.#onCancel}
+        @click=${this.#onBackdropClick}
+        @close=${this.#onClose}
+        @keydown=${this.#onKeyDown}
+      >
+        ${this.heading === "" ? nothing : html `<header>${this.heading}</header>`}
+        <div class="body"><slot></slot></div>
+        <footer><slot name="actions"></slot></footer>
+      </dialog>
+    `;
+    }
+    async showModal() {
+        this.#syncInheritedTheme();
+        await this.updateComplete;
+        if (!this._dialog.open) {
+            this._dialog.showModal();
+        }
+    }
+    close(returnValue = "") {
+        if (this._dialog?.open) {
+            this._dialog.close(returnValue);
+        }
+    }
+    #syncInheritedTheme() {
+        const configured = this.getAttribute("theme");
+        if (configured !== null &&
+            configured !== this.#inheritedTheme) {
+            return;
+        }
+        const inherited = ambientThemeMode(this);
+        if (inherited === null) {
+            return;
+        }
+        this.#inheritedTheme = inherited;
+        this.setAttribute("theme", inherited);
+    }
+    #defaultAction() {
+        const actions = (this._actions?.assignedElements() ?? [])
+            .filter((element) => element instanceof HTMLElement);
+        const candidate = actions.find((element) => element.hasAttribute("data-default")) ?? actions.findLast((element) => kDefaultVariants.has(element.getAttribute("variant") ?? ""));
+        if (candidate === undefined || isDisabled(candidate)) {
+            return null;
+        }
+        return candidate;
+    }
+    #onKeyDown = (event) => {
+        if (event.key !== "Enter" ||
+            event.defaultPrevented ||
+            event.shiftKey ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey ||
+            consumesEnter(event)) {
+            return;
+        }
+        const action = this.#defaultAction();
+        if (action === null) {
+            return;
+        }
+        event.preventDefault();
+        action.click();
+    };
+    #onCancel = (event) => {
+        if (!this.dismissible) {
+            event.preventDefault();
+            return;
+        }
+        emitContainerEvent(this, "jolly-cancel", undefined);
+    };
+    #onBackdropClick = (event) => {
+        if (!this.dismissible ||
+            event.target !== this._dialog) {
+            return;
+        }
+        const rect = this._dialog.getBoundingClientRect();
+        const inside = event.clientX >= rect.left &&
+            event.clientX <= rect.right &&
+            event.clientY >= rect.top &&
+            event.clientY <= rect.bottom;
+        if (!inside) {
+            emitContainerEvent(this, "jolly-cancel", undefined);
+            this.close();
+        }
+    };
+    #onClose = () => {
+        emitContainerEvent(this, "jolly-close", {
+            returnValue: this._dialog.returnValue
+        });
+    };
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Dialog.prototype, "heading", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], Dialog.prototype, "dismissible", void 0);
+__decorate([
+    query("dialog"),
+    __metadata("design:type", HTMLDialogElement)
+], Dialog.prototype, "_dialog", void 0);
+__decorate([
+    query("slot[name=actions]"),
+    __metadata("design:type", HTMLSlotElement)
+], Dialog.prototype, "_actions", void 0);
+Dialog = __decorate([
+    customElement("jolly-dialog"),
+    __metadata("design:paramtypes", [])
+], Dialog);
+export { Dialog };
+function consumesEnter(event) {
+    const [source] = event.composedPath();
+    if (!(source instanceof HTMLElement)) {
+        return false;
+    }
+    return source instanceof HTMLButtonElement ||
+        source instanceof HTMLTextAreaElement ||
+        source instanceof HTMLAnchorElement ||
+        source.isContentEditable;
+}
+function isDisabled(element) {
+    return element.hasAttribute("disabled") ||
+        element.getAttribute("aria-disabled") === "true";
+}
+//# sourceMappingURL=Dialog.js.map

package/dist/containers/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/containers/Dialog.ts"],"names":[],"mappings":"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"}

package/dist/containers/Dialog.styles.d.ts

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

package/dist/containers/Dialog.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../src/containers/Dialog.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,yBAgDxB,CAAC"}

package/dist/containers/Dialog.styles.js

@@ -0,0 +1,54 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { kFallback } from "../theme/styles/fallbacks.js";
+export const dialogStyles = css `
+  :host {
+    font-family: var(--jolly-font-family, ui-monospace, monospace);
+    font-size: var(--jolly-font-size, 11px);
+  }
+
+  /*
+   * A dialog is a plane and a detached one, so it keeps its shadow. The border
+   * is gone: elevation and the surface step already separate it from the page.
+   */
+  dialog {
+    min-width: min(320px, calc(100vw - 32px));
+    max-width: min(560px, calc(100vw - 32px));
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--jolly-radius-md, 6px);
+    background: var(--jolly-surface-raised, ${kFallback.controlBg});
+    box-shadow: var(--jolly-shadow-modal, 0 12px 40px rgb(0 0 0 / 0.4));
+    color: var(--jolly-text, ${kFallback.text});
+    font: inherit;
+  }
+
+  dialog::backdrop {
+    background: rgb(5 10 18 / 0.55);
+    backdrop-filter: blur(2px);
+  }
+
+  /*
+   * Group level structure keeps a divider, unlike the rows inside it.
+   */
+  header {
+    padding: var(--jolly-space-3, 12px) var(--jolly-space-4, 16px);
+    border-bottom: 1px solid var(--jolly-divider);
+    letter-spacing: 0.05em;
+  }
+
+  .body {
+    padding: var(--jolly-space-4, 16px);
+  }
+
+  footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--jolly-space-2, 8px);
+    padding: var(--jolly-space-3, 12px) var(--jolly-space-4, 16px);
+    border-top: 1px solid var(--jolly-divider);
+  }
+`;
+//# sourceMappingURL=Dialog.styles.js.map

package/dist/containers/Dialog.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../src/containers/Dialog.styles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+BAA+B;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;8CAiBe,SAAS,CAAC,SAAS;;+BAElC,SAAS,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B5C,CAAC"}