@jolly-pixel/ui 1.0.1

package/dist/theme/styles/fallbacks.js

@@ -0,0 +1,56 @@
+// Import Third-party Dependencies
+import { unsafeCSS } from "lit";
+/**
+ * Usage-site fallbacks for essential theme tokens.
+ *
+ * These only apply when no scope host declared the tokens at all, which is
+ * already a degraded state, so `controlBg` is a mode-agnostic translucent grey
+ * rather than a value tuned for either scheme.
+ */
+export const kFallback = {
+    /**
+     * --jolly-neutral-900
+     */
+    text: unsafeCSS("#1b2027"),
+    /**
+     * --jolly-control-bg
+     */
+    controlBg: unsafeCSS("rgb(128 128 128 / 0.15)"),
+    /**
+     * --jolly-folder-header-bg
+     */
+    folderHeaderBg: unsafeCSS("rgb(47 111 216 / 0.12)"),
+    /**
+     * --jolly-folder-header-bg-hover
+     */
+    folderHeaderBgHover: unsafeCSS("rgb(47 111 216 / 0.18)"),
+    /**
+     * --jolly-folder-action-fg
+     */
+    folderActionFg: unsafeCSS("#f4f6f8"),
+    /**
+     * --jolly-folder-action-bg
+     */
+    folderActionBg: unsafeCSS("#1b2027"),
+    /**
+     * --jolly-folder-action-danger-fg
+     */
+    folderActionDangerFg: unsafeCSS("#ffffff"),
+    /**
+     * --jolly-folder-action-danger-bg
+     */
+    folderActionDangerBg: unsafeCSS("#c0362c"),
+    /**
+     * --jolly-pane-header-bg
+     */
+    paneHeaderBg: unsafeCSS("#2f6fd8"),
+    /**
+     * --jolly-neutral-500
+     */
+    borderStrong: unsafeCSS("#7b828c"),
+    /**
+     * --jolly-accent-600
+     */
+    focusRing: unsafeCSS("#2f6fd8")
+};
+//# sourceMappingURL=fallbacks.js.map

package/dist/theme/styles/fallbacks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fallbacks.js","sourceRoot":"","sources":["../../../src/theme/styles/fallbacks.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAEhC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC,yBAAyB,CAAC;IAC/C;;OAEG;IACH,cAAc,EAAE,SAAS,CAAC,wBAAwB,CAAC;IACnD;;OAEG;IACH,mBAAmB,EAAE,SAAS,CAAC,wBAAwB,CAAC;IACxD;;OAEG;IACH,cAAc,EAAE,SAAS,CAAC,SAAS,CAAC;IACpC;;OAEG;IACH,cAAc,EAAE,SAAS,CAAC,SAAS,CAAC;IACpC;;OAEG;IACH,oBAAoB,EAAE,SAAS,CAAC,SAAS,CAAC;IAC1C;;OAEG;IACH,oBAAoB,EAAE,SAAS,CAAC,SAAS,CAAC;IAC1C;;OAEG;IACH,YAAY,EAAE,SAAS,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,SAAS,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC;CACvB,CAAC"}

package/dist/theme/styles/hiddenStyles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The UA stylesheet's `[hidden] { display: none }` carries no `!important`,
+ * so it loses to a component's own unconditional `:host { display: ... }`
+ * rule: author styles beat UA styles at equal specificity. Every element
+ * that sets `.hidden` (the facade does, on Binding/Monitor/Button/Separator
+ * and their containers) needs this to actually disappear.
+ */
+export declare const hiddenStyles: import("lit").CSSResult;
+//# sourceMappingURL=hiddenStyles.d.ts.map

package/dist/theme/styles/hiddenStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hiddenStyles.d.ts","sourceRoot":"","sources":["../../../src/theme/styles/hiddenStyles.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,yBAIxB,CAAC"}

package/dist/theme/styles/hiddenStyles.js

@@ -0,0 +1,15 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+/**
+ * The UA stylesheet's `[hidden] { display: none }` carries no `!important`,
+ * so it loses to a component's own unconditional `:host { display: ... }`
+ * rule: author styles beat UA styles at equal specificity. Every element
+ * that sets `.hidden` (the facade does, on Binding/Monitor/Button/Separator
+ * and their containers) needs this to actually disappear.
+ */
+export const hiddenStyles = css `
+  :host([hidden]) {
+    display: none !important;
+  }
+`;
+//# sourceMappingURL=hiddenStyles.js.map

package/dist/theme/styles/hiddenStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hiddenStyles.js","sourceRoot":"","sources":["../../../src/theme/styles/hiddenStyles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;CAI9B,CAAC"}

package/dist/theme/styles/mixins.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Single-line text that ellipsizes instead of wrapping. The element still needs
+ * a constrained inline size: a flex or grid child will not shrink on its own.
+ */
+export declare const truncate: import("lit").CSSResult;
+/**
+ * The focus indicator, minus its offset. Offset stays at the site because its
+ * sign carries intent: handles inset the ring, controls outset it.
+ */
+export declare const focusRing: import("lit").CSSResult;
+/**
+ * Fill transition for controls that show state through background. Which token
+ * supplies the fill, and the hover and focus rules, stay per component.
+ */
+export declare const fillTransition: import("lit").CSSResult;
+/**
+ * Hides an element while keeping it in the accessibility tree, for live regions
+ * and for labels whose text is hidden but still names the control.
+ */
+export declare const visuallyHidden: import("lit").CSSResult;
+//# sourceMappingURL=mixins.d.ts.map

package/dist/theme/styles/mixins.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixins.d.ts","sourceRoot":"","sources":["../../../src/theme/styles/mixins.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,QAAQ,yBAIpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,yBAErB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,yBAG1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,yBAO1B,CAAC"}

package/dist/theme/styles/mixins.js

@@ -0,0 +1,41 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { kFallback } from "./fallbacks.js";
+/**
+ * Single-line text that ellipsizes instead of wrapping. The element still needs
+ * a constrained inline size: a flex or grid child will not shrink on its own.
+ */
+export const truncate = css `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+/**
+ * The focus indicator, minus its offset. Offset stays at the site because its
+ * sign carries intent: handles inset the ring, controls outset it.
+ */
+export const focusRing = css `
+  outline: 2px solid var(--jolly-focus-ring, ${kFallback.focusRing});
+`;
+/**
+ * Fill transition for controls that show state through background. Which token
+ * supplies the fill, and the hover and focus rules, stay per component.
+ */
+export const fillTransition = css `
+  transition: background-color var(--jolly-duration-fast, 100ms)
+    var(--jolly-easing, ease);
+`;
+/**
+ * Hides an element while keeping it in the accessibility tree, for live regions
+ * and for labels whose text is hidden but still names the control.
+ */
+export const visuallyHidden = css `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+`;
+//# sourceMappingURL=mixins.js.map

package/dist/theme/styles/mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixins.js","sourceRoot":"","sources":["../../../src/theme/styles/mixins.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+BAA+B;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;CAI1B,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;+CACmB,SAAS,CAAC,SAAS;CACjE,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;CAGhC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;CAOhC,CAAC"}

package/dist/theme/styles/themeStyles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Theme, density, and scale styles for scope hosts.
+ */
+export declare const themeStyles: import("lit").CSSResult;
+//# sourceMappingURL=themeStyles.d.ts.map

package/dist/theme/styles/themeStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeStyles.d.ts","sourceRoot":"","sources":["../../../src/theme/styles/themeStyles.ts"],"names":[],"mappings":"AAiBA;;GAEG;AACH,eAAO,MAAM,WAAW,yBAIvB,CAAC"}

package/dist/theme/styles/themeStyles.js

@@ -0,0 +1,23 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { themeTokens } from "../tokens/semantic.js";
+import { densityTokens } from "../tokens/density.js";
+import { scaleTokens } from "../tokens/scales.js";
+import { ensureFontFace } from "../font.js";
+/*
+ * A scope host is the thing that declares the theme, and the bundled face is
+ * part of that theme, so importing this module registers it. The face has to
+ * live on the document because a shadow root ignores "at font-face", and when
+ * registration is skipped the family token falls back to the system mono stack.
+ */
+ensureFontFace();
+/**
+ * Theme, density, and scale styles for scope hosts.
+ */
+export const themeStyles = css `
+  ${themeTokens}
+  ${densityTokens}
+  ${scaleTokens}
+`;
+//# sourceMappingURL=themeStyles.js.map

package/dist/theme/styles/themeStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeStyles.js","sourceRoot":"","sources":["../../../src/theme/styles/themeStyles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+BAA+B;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C;;;;;GAKG;AACH,cAAc,EAAE,CAAC;AAEjB;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;IAC1B,WAAW;IACX,aAAa;IACb,WAAW;CACd,CAAC"}

package/dist/theme/tokens/density.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Inherited density tokens with fixed 32px icon targets.
+ *
+ * Row heights lost the 1px control border they used to include, so each preset
+ * is 2px shorter than it was. With the container gap the default pitch is 24px.
+ */
+export declare const densityTokens: import("lit").CSSResult;
+//# sourceMappingURL=density.d.ts.map

package/dist/theme/tokens/density.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"density.d.ts","sourceRoot":"","sources":["../../../src/theme/tokens/density.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,aAAa,yBAmBzB,CAAC"}

package/dist/theme/tokens/density.js

@@ -0,0 +1,29 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+/**
+ * Inherited density tokens with fixed 32px icon targets.
+ *
+ * Row heights lost the 1px control border they used to include, so each preset
+ * is 2px shorter than it was. With the container gap the default pitch is 24px.
+ */
+export const densityTokens = css `
+  :host {
+    --jolly-row-height: 20px;
+    --jolly-font-size: 11px;
+    --jolly-control-height: 20px;
+    --jolly-icon-button-size: 32px;
+  }
+
+  :host([density="compact"]) {
+    --jolly-row-height: 16px;
+    --jolly-font-size: 10px;
+    --jolly-control-height: 16px;
+  }
+
+  :host([density="comfortable"]) {
+    --jolly-row-height: 26px;
+    --jolly-font-size: 12px;
+    --jolly-control-height: 26px;
+  }
+`;
+//# sourceMappingURL=density.js.map

package/dist/theme/tokens/density.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"density.js","sourceRoot":"","sources":["../../../src/theme/tokens/density.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmB/B,CAAC"}

package/dist/theme/tokens/ramps.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Internal OKLCH color ramps.
+ */
+export declare const rampTokens: import("lit").CSSResult;
+//# sourceMappingURL=ramps.d.ts.map

package/dist/theme/tokens/ramps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ramps.d.ts","sourceRoot":"","sources":["../../../src/theme/tokens/ramps.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,UAAU,yBAwCtB,CAAC"}

package/dist/theme/tokens/ramps.js

@@ -0,0 +1,47 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+/**
+ * Internal OKLCH color ramps.
+ */
+export const rampTokens = css `
+  --jolly-neutral-0: oklch(100% 0 250);
+  --jolly-neutral-50: oklch(98% 0.006 250);
+  --jolly-neutral-100: oklch(96% 0.014 250);
+  --jolly-neutral-200: oklch(91% 0.022 250);
+  --jolly-neutral-300: oklch(84% 0.032 250);
+  --jolly-neutral-400: oklch(72% 0.042 250);
+  --jolly-neutral-500: oklch(59% 0.045 250);
+  --jolly-neutral-600: oklch(49% 0.042 250);
+  --jolly-neutral-700: oklch(39% 0.038 250);
+  --jolly-neutral-800: oklch(29% 0.032 250);
+  --jolly-neutral-900: oklch(21% 0.028 250);
+  --jolly-neutral-950: oklch(16% 0.024 250);
+
+  --jolly-accent-100: oklch(95% 0.020 260.7);
+  --jolly-accent-200: oklch(89% 0.050 260.7);
+  --jolly-accent-300: oklch(82% 0.085 260.7);
+  --jolly-accent-400: oklch(73% 0.130 260.7);
+  --jolly-accent-500: oklch(64.5% 0.190 260.7);
+  --jolly-accent-600: oklch(56% 0.175 260.7);
+  --jolly-accent-700: oklch(47% 0.150 260.7);
+  --jolly-accent-800: oklch(38% 0.115 260.7);
+  --jolly-accent-900: oklch(29% 0.080 260.7);
+
+  --jolly-danger-300: oklch(80% 0.090 26.4);
+  --jolly-danger-500: oklch(58% 0.190 26.4);
+  --jolly-danger-700: oklch(45% 0.160 26.4);
+
+  --jolly-warning-300: oklch(85% 0.085 75);
+  --jolly-warning-500: oklch(70% 0.125 75);
+  --jolly-warning-700: oklch(52% 0.105 75);
+
+  --jolly-success-300: oklch(82% 0.100 149);
+  --jolly-success-500: oklch(62% 0.150 149);
+  --jolly-success-700: oklch(48% 0.130 149);
+
+  --jolly-axis-x: oklch(45.2% 0.159 26.4);
+  --jolly-axis-y: oklch(51.2% 0.129 149.1);
+  --jolly-axis-z: oklch(41.9% 0.099 250.1);
+  --jolly-axis-w: oklch(45% 0.140 320);
+`;
+//# sourceMappingURL=ramps.js.map

package/dist/theme/tokens/ramps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ramps.js","sourceRoot":"","sources":["../../../src/theme/tokens/ramps.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC5B,CAAC"}

package/dist/theme/tokens/scales.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Shared spacing, motion, and numeric-font tokens.
+ */
+export declare const scaleTokens: import("lit").CSSResult;
+//# sourceMappingURL=scales.d.ts.map

package/dist/theme/tokens/scales.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scales.d.ts","sourceRoot":"","sources":["../../../src/theme/tokens/scales.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,WAAW,yBAwDvB,CAAC"}

package/dist/theme/tokens/scales.js

@@ -0,0 +1,63 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+/**
+ * Shared spacing, motion, and numeric-font tokens.
+ */
+export const scaleTokens = css `
+  :host {
+    --jolly-space-1: 4px;
+    --jolly-space-2: 8px;
+    --jolly-space-3: 12px;
+    --jolly-space-4: 16px;
+    --jolly-space-5: 20px;
+    --jolly-space-6: 24px;
+
+    /*
+     * Two radii with clearly different jobs: controls are nearly square, planes
+     * are visibly rounded, so the two never read as the same role.
+     */
+    --jolly-radius-sm: 2px;
+    --jolly-radius-md: 6px;
+
+    /*
+     * Rows own no outer spacing. The container that stacks them applies this gap,
+     * so consumers can stack fields flush when they want to.
+     */
+    --jolly-row-gap: var(--jolly-space-1);
+
+    /* Extra separation after folder groups, including reordered folders. */
+    --jolly-folder-gap: calc(var(--jolly-space-1) / 2);
+
+    /*
+     * Reserved leading space for the lock affordance. Zero by default; a
+     * collaborative container opts its subtree in, which buys the fixed inset
+     * that keeps lock state from shifting the row.
+     */
+    --jolly-gutter-width: 0px;
+
+    /* Optional shared column for trailing revert and presence chrome. */
+    --jolly-field-trailing-width: auto;
+
+    /*
+     * Trailing inset of a field row. Set it to 0 on a subtree whose fields sit
+     * beside folder headers, where the bar paints past the value otherwise.
+     */
+    --jolly-field-inset-end: var(--jolly-space-1);
+
+    --jolly-duration-fast: 100ms;
+    --jolly-duration-base: 160ms;
+    --jolly-easing: cubic-bezier(0.2, 0, 0.2, 1);
+
+    --jolly-font-family: "Roboto Mono", ui-monospace, sfmono-regular, "Cascadia Code",
+      consolas, monospace;
+    --jolly-font-numeric: "tabular-nums";
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --jolly-duration-fast: 0ms;
+      --jolly-duration-base: 0ms;
+    }
+  }
+`;
+//# sourceMappingURL=scales.js.map

package/dist/theme/tokens/scales.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scales.js","sourceRoot":"","sources":["../../../src/theme/tokens/scales.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwD7B,CAAC"}

package/dist/theme/tokens/semantic.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Scope-host theme tokens with light and dark variants.
+ */
+export declare const themeTokens: import("lit").CSSResult;
+//# sourceMappingURL=semantic.d.ts.map

package/dist/theme/tokens/semantic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic.d.ts","sourceRoot":"","sources":["../../../src/theme/tokens/semantic.ts"],"names":[],"mappings":"AAgKA;;GAEG;AACH,eAAO,MAAM,WAAW,yBAgDvB,CAAC"}

package/dist/theme/tokens/semantic.js

@@ -0,0 +1,208 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { rampTokens } from "./ramps.js";
+/**
+ * Planes are opaque and painted only by window level containers.
+ * Leaves tint instead, so a control composites over whichever plane it lands on.
+ */
+const surfaceTokens = css `
+  --jolly-surface: light-dark(var(--jolly-neutral-100), var(--jolly-neutral-900));
+  --jolly-surface-sunken: light-dark(var(--jolly-neutral-200), var(--jolly-neutral-950));
+  --jolly-surface-raised: light-dark(var(--jolly-neutral-0), var(--jolly-neutral-800));
+`;
+/**
+ * The single interactive colour. Every control background is this ink at an
+ * alpha stop, which is what keeps nested containers coherent without each
+ * depth picking its own opaque ramp index.
+ */
+const inkTokens = css `
+  --jolly-ink: light-dark(var(--jolly-neutral-900), var(--jolly-neutral-50));
+  --jolly-ink-danger: var(--jolly-danger-500);
+
+  --jolly-control-bg: color-mix(in oklab, var(--jolly-ink) 8%, transparent);
+  --jolly-control-bg-hover: color-mix(in oklab, var(--jolly-ink) 12%, transparent);
+  --jolly-control-bg-focus: color-mix(in oklab, var(--jolly-ink) 20%, transparent);
+  --jolly-control-bg-active: color-mix(in oklab, var(--jolly-ink) 26%, transparent);
+
+  /* Blue chrome separates container hierarchy from neutral leaf controls. */
+  --jolly-folder-header-bg: color-mix(
+    in oklab,
+    var(--jolly-accent-fill) 12%,
+    transparent
+  );
+  --jolly-folder-header-bg-hover: color-mix(
+    in oklab,
+    var(--jolly-accent-fill) 18%,
+    transparent
+  );
+  /* Inverted, so an action stays legible over the header pattern. */
+  --jolly-folder-action-fg: var(--jolly-surface);
+  --jolly-folder-action-bg: color-mix(
+    in oklab,
+    var(--jolly-ink) 84%,
+    var(--jolly-surface)
+  );
+  --jolly-folder-action-bg-hover: color-mix(
+    in oklab,
+    var(--jolly-ink) 92%,
+    var(--jolly-surface)
+  );
+  --jolly-folder-action-bg-focus: var(--jolly-ink);
+  --jolly-folder-action-bg-active: var(--jolly-ink);
+  /*
+   * Filled with danger ink, so a destructive action keeps that same weight.
+   * Its glyph is white in both themes, since the ground stays red in both.
+   */
+  --jolly-folder-action-danger-fg: var(--jolly-neutral-0);
+  --jolly-folder-action-danger-bg: var(--jolly-ink-danger);
+  --jolly-folder-action-danger-bg-hover: color-mix(
+    in oklab,
+    var(--jolly-ink-danger) 86%,
+    var(--jolly-ink)
+  );
+  --jolly-folder-action-danger-bg-focus: color-mix(
+    in oklab,
+    var(--jolly-ink-danger) 72%,
+    var(--jolly-ink)
+  );
+
+  --jolly-pane-header-bg: var(--jolly-accent-fill);
+  --jolly-dock-resize-bg: color-mix(
+    in oklab,
+    var(--jolly-accent-fill) 12%,
+    transparent
+  );
+  --jolly-dock-resize-bg-hover: color-mix(
+    in oklab,
+    var(--jolly-accent-fill) 18%,
+    transparent
+  );
+
+  /*
+   * A drop zone covers a whole dock rather than a handle, so it sits well below
+   * the resize wash: the same tint over that much area would read as a filled
+   * panel instead of as a place something can land.
+   */
+  --jolly-dock-zone-bg: color-mix(
+    in oklab,
+    var(--jolly-accent-fill) 6%,
+    transparent
+  );
+  --jolly-dock-zone-bg-armed: color-mix(
+    in oklab,
+    var(--jolly-accent-fill) 10%,
+    transparent
+  );
+
+  /* Below the rest stop, so a readonly control reads as inert rather than idle. */
+  --jolly-control-bg-muted: color-mix(in oklab, var(--jolly-ink) 4%, transparent);
+
+  /* Faint enough to locate the active row without competing with the control. */
+  --jolly-row-bg-focus: color-mix(in oklab, var(--jolly-ink) 5%, transparent);
+
+  /* Error re-tints the same mechanism, and starts above the hover stop so it
+     never reads as "the pointer is here". */
+  --jolly-invalid-bg: color-mix(in oklab, var(--jolly-ink-danger) 15%, transparent);
+  --jolly-invalid-bg-hover: color-mix(in oklab, var(--jolly-ink-danger) 20%, transparent);
+  --jolly-invalid-bg-focus: color-mix(in oklab, var(--jolly-ink-danger) 28%, transparent);
+
+  /* Slider and scrub tracks read as a recess rather than a filled control. */
+  --jolly-groove: color-mix(in oklab, var(--jolly-ink) 20%, transparent);
+
+  /* Dividers sit below the control fill, so they separate without ruling. */
+  --jolly-divider: color-mix(in oklab, var(--jolly-ink) 10%, transparent);
+
+  /*
+   * A control already filled with the accent has no room left to tint, so its
+   * hover and focus steps lighten the fill instead.
+   */
+  --jolly-accent-fill-hover: color-mix(in oklab, var(--jolly-accent-fill) 88%, white);
+  --jolly-accent-fill-focus: color-mix(in oklab, var(--jolly-accent-fill) 76%, white);
+`;
+/**
+ * Public semantic tokens built from the internal ramps.
+ */
+const semanticTokens = css `
+  --jolly-border: light-dark(var(--jolly-neutral-300), var(--jolly-neutral-700));
+  --jolly-border-strong: light-dark(var(--jolly-neutral-500), var(--jolly-neutral-500));
+
+  --jolly-text: light-dark(var(--jolly-neutral-900), var(--jolly-neutral-50));
+  --jolly-text-muted: light-dark(var(--jolly-neutral-600), var(--jolly-neutral-400));
+  --jolly-text-on-fill: var(--jolly-neutral-0);
+
+  --jolly-accent-fill: var(--jolly-accent-600);
+  --jolly-accent-text: light-dark(var(--jolly-accent-700), var(--jolly-accent-300));
+  --jolly-separator-label: var(--jolly-accent-text);
+  --jolly-separator-rule: color-mix(
+    in oklab,
+    var(--jolly-accent-text) 28%,
+    transparent
+  );
+
+  --jolly-focus-ring: light-dark(var(--jolly-accent-600), var(--jolly-accent-400));
+  --jolly-danger: light-dark(var(--jolly-danger-700), var(--jolly-danger-300));
+  --jolly-danger-border: light-dark(var(--jolly-danger-500), var(--jolly-danger-300));
+  --jolly-warning: light-dark(var(--jolly-warning-700), var(--jolly-warning-300));
+  --jolly-success: light-dark(var(--jolly-success-700), var(--jolly-success-300));
+
+  --jolly-modified: light-dark(var(--jolly-accent-600), var(--jolly-accent-400));
+  --jolly-locked: light-dark(var(--jolly-accent-600), var(--jolly-accent-400));
+
+  --jolly-shadow-overlay: 0 2px 8px light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.44));
+  --jolly-shadow-floating: 0 4px 16px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.5));
+  --jolly-shadow-modal: 0 12px 40px light-dark(rgb(0 0 0 / 0.24), rgb(0 0 0 / 0.6));
+`;
+/**
+ * Scope-host theme tokens with light and dark variants.
+ */
+export const themeTokens = css `
+  :host {
+    color-scheme: light dark;
+    ${rampTokens}
+    ${surfaceTokens}
+    ${inkTokens}
+    ${semanticTokens}
+  }
+
+  :host([theme="light"]) {
+    color-scheme: light;
+  }
+
+  :host([theme="dark"]) {
+    color-scheme: dark;
+  }
+
+  /*
+   * The design carries control boundaries with fill rather than an outline, which
+   * the forced-colors palette flattens away. Restoring a system border here keeps
+   * the controls operable without affecting the default design.
+   */
+  @media (forced-colors: active) {
+    :host {
+      --jolly-control-bg: ButtonFace;
+      --jolly-control-bg-hover: ButtonFace;
+      --jolly-control-bg-focus: ButtonFace;
+      --jolly-control-bg-active: ButtonFace;
+      --jolly-folder-header-bg: ButtonFace;
+      --jolly-folder-header-bg-hover: ButtonFace;
+      --jolly-folder-action-fg: ButtonText;
+      --jolly-folder-action-bg: ButtonFace;
+      --jolly-folder-action-bg-hover: ButtonFace;
+      --jolly-folder-action-bg-focus: ButtonFace;
+      --jolly-folder-action-bg-active: ButtonFace;
+      --jolly-folder-action-danger-fg: ButtonText;
+      --jolly-folder-action-danger-bg: ButtonFace;
+      --jolly-folder-action-danger-bg-hover: ButtonFace;
+      --jolly-folder-action-danger-bg-focus: ButtonFace;
+      --jolly-pane-header-bg: ButtonFace;
+      --jolly-dock-resize-bg: ButtonFace;
+      --jolly-dock-resize-bg-hover: Highlight;
+      --jolly-separator-label: CanvasText;
+      --jolly-separator-rule: ButtonBorder;
+      --jolly-row-bg-focus: transparent;
+      --jolly-groove: ButtonBorder;
+    }
+  }
+`;
+//# sourceMappingURL=semantic.js.map

package/dist/theme/tokens/semantic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic.js","sourceRoot":"","sources":["../../../src/theme/tokens/semantic.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+BAA+B;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC;;;GAGG;AACH,MAAM,aAAa,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AAEF;;;;GAIG;AACH,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuGpB,CAAC;AAEF;;GAEG;AACH,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BzB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;MAGxB,UAAU;MACV,aAAa;MACb,SAAS;MACT,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CnB,CAAC"}

package/dist/theme/types.d.ts

@@ -0,0 +1,6 @@
+/**
+ * `auto` omits the `theme` attribute.
+ */
+export type ThemeMode = "light" | "dark" | "auto";
+export type Density = "compact" | "default" | "comfortable";
+//# sourceMappingURL=types.d.ts.map

package/dist/theme/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAElD,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC"}

package/dist/theme/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/theme/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":""}