@deepfuture/dui-components 0.0.20 → 1.0.0

package/toggle/toggle.js

@@ -1,188 +1,104 @@
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
-    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
-    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
-};
-import { css, html, LitElement } from "lit";
-import { property, state } from "lit/decorators.js";
-import { consume } from "@lit/context";
-import { base } from "@deepfuture/dui-core/base";
-import { customEvent } from "@deepfuture/dui-core/event";
-import { toggleGroupContext, } from "./toggle-group-context.js";
-export const pressedChangeEvent = customEvent("pressed-change", { bubbles: true, composed: true });
-/** Structural styles only — layout CSS. */
+import { css } from "lit";
+import { DuiTogglePrimitive } from "@deepfuture/dui-primitives/toggle";
+import "../_install.js";
 const styles = css `
+  /* ---------------------------------------------------------------
+   * Sizes (swap dimensions)
+   * --------------------------------------------------------------- */
+
   :host {
-    display: inline-block;
+    --toggle-height: var(--component-height-md);
+    --toggle-padding-y: var(--space-2);
+    --toggle-padding-x: var(--space-2_5);
+    --toggle-gap: var(--space-1_5);
+    --toggle-radius: var(--radius-md);
+    --toggle-font-size: var(--text-sm);
+    --toggle-icon-size: var(--space-4_5);
+  }
+
+  :host([size="xs"]) {
+    --toggle-height: var(--component-height-xs);
+    --toggle-padding-y: var(--space-1);
+    --toggle-padding-x: var(--space-1_5);
+    --toggle-gap: var(--space-1);
+    --toggle-font-size: var(--text-xs);
+    --toggle-icon-size: var(--space-3_5);
   }
 
+  :host([size="sm"]) {
+    --toggle-height: var(--component-height-sm);
+    --toggle-padding-y: var(--space-1_5);
+    --toggle-padding-x: var(--space-2);
+    --toggle-gap: var(--space-1);
+    --toggle-font-size: var(--text-xs);
+    --toggle-icon-size: var(--space-4);
+  }
+
+  :host([size="lg"]) {
+    --toggle-height: var(--component-height-lg);
+    --toggle-padding-y: var(--space-2_5);
+    --toggle-padding-x: var(--space-3);
+    --toggle-gap: var(--space-1_5);
+    --toggle-font-size: var(--text-sm);
+    --toggle-icon-size: var(--space-4_5);
+  }
+
+  /* ---------------------------------------------------------------
+   * Base appearance — --_select / --_interact alpha overlay pattern
+   * --------------------------------------------------------------- */
+
   [part="root"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--toggle-gap, 0);
-    border: none;
-    background: none;
-    cursor: pointer;
-    padding: 0;
-    margin: 0;
-    font: inherit;
-    color: inherit;
+    --_select: 0;
+    --_interact: 0;
+    --icon-size: var(--toggle-icon-size);
+    --icon-color: currentColor;
+    gap: var(--toggle-gap);
+    padding: var(--toggle-padding-y) var(--toggle-padding-x);
+    height: var(--toggle-height);
+    border-radius: var(--toggle-radius);
+    border: var(--border-width-thin) solid var(--border);
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--toggle-font-size);
+    letter-spacing: var(--letter-spacing-tight);
+    line-height: var(--line-height-snug);
+    text-box: trim-both cap alphabetic;
+    white-space: nowrap;
+    color: var(--text-2);
+    background: oklch(from var(--foreground) l c h / calc(var(--_select) + var(--_interact)));
+    transition-property: background, color, box-shadow;
+    transition-duration: var(--duration-fast);
+    min-width: var(--toggle-height);
+  }
+
+  @media (hover: hover) {
+    [part="root"]:hover:not(:disabled):not([data-pressed]) {
+      --_interact: 0.05;
+      color: var(--text-1);
+    }
+  }
+
+  [part="root"][data-pressed] {
+    --_select: 0.10;
+    color: var(--text-1);
+  }
+
+  [part="root"]:active:not(:disabled) {
+    --_interact: 0.10;
+  }
+
+  [part="root"]:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 var(--focus-ring-offset) var(--background),
+      0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
   }
 
   [part="root"]:disabled {
-    cursor: not-allowed;
+    opacity: 0.4;
   }
 `;
-/**
- * `<dui-toggle>` — A two-state toggle button. Works standalone or inside a toggle group.
- *
- * @slot - Toggle content (text and/or icons).
- * @slot icon - Optional leading icon.
- * @csspart root - The button element.
- * @fires pressed-change - Fired when toggled. Detail: { pressed: boolean }
- */
-let DuiToggle = (() => {
-    let _classSuper = LitElement;
-    let _pressed_decorators;
-    let _pressed_initializers = [];
-    let _pressed_extraInitializers = [];
-    let _defaultPressed_decorators;
-    let _defaultPressed_initializers = [];
-    let _defaultPressed_extraInitializers = [];
-    let _disabled_decorators;
-    let _disabled_initializers = [];
-    let _disabled_extraInitializers = [];
-    let _value_decorators;
-    let _value_initializers = [];
-    let _value_extraInitializers = [];
-    let _private_internalPressed_decorators;
-    let _private_internalPressed_initializers = [];
-    let _private_internalPressed_extraInitializers = [];
-    let _private_internalPressed_descriptor;
-    let __groupCtx_decorators;
-    let __groupCtx_initializers = [];
-    let __groupCtx_extraInitializers = [];
-    return class DuiToggle extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _pressed_decorators = [property({ type: Boolean })];
-            _defaultPressed_decorators = [property({ type: Boolean, attribute: "default-pressed" })];
-            _disabled_decorators = [property({ type: Boolean, reflect: true })];
-            _value_decorators = [property()];
-            _private_internalPressed_decorators = [state()];
-            __groupCtx_decorators = [consume({ context: toggleGroupContext, subscribe: true }), state()];
-            __esDecorate(this, null, _pressed_decorators, { kind: "accessor", name: "pressed", static: false, private: false, access: { has: obj => "pressed" in obj, get: obj => obj.pressed, set: (obj, value) => { obj.pressed = value; } }, metadata: _metadata }, _pressed_initializers, _pressed_extraInitializers);
-            __esDecorate(this, null, _defaultPressed_decorators, { kind: "accessor", name: "defaultPressed", static: false, private: false, access: { has: obj => "defaultPressed" in obj, get: obj => obj.defaultPressed, set: (obj, value) => { obj.defaultPressed = value; } }, metadata: _metadata }, _defaultPressed_initializers, _defaultPressed_extraInitializers);
-            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
-            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
-            __esDecorate(this, _private_internalPressed_descriptor = { get: __setFunctionName(function () { return this.#internalPressed_accessor_storage; }, "#internalPressed", "get"), set: __setFunctionName(function (value) { this.#internalPressed_accessor_storage = value; }, "#internalPressed", "set") }, _private_internalPressed_decorators, { kind: "accessor", name: "#internalPressed", static: false, private: true, access: { has: obj => #internalPressed in obj, get: obj => obj.#internalPressed, set: (obj, value) => { obj.#internalPressed = value; } }, metadata: _metadata }, _private_internalPressed_initializers, _private_internalPressed_extraInitializers);
-            __esDecorate(this, null, __groupCtx_decorators, { kind: "accessor", name: "_groupCtx", static: false, private: false, access: { has: obj => "_groupCtx" in obj, get: obj => obj._groupCtx, set: (obj, value) => { obj._groupCtx = value; } }, metadata: _metadata }, __groupCtx_initializers, __groupCtx_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        static tagName = "dui-toggle";
-        static shadowRootOptions = {
-            ...LitElement.shadowRootOptions,
-            delegatesFocus: true,
-        };
-        static styles = [base, styles];
-        #pressed_accessor_storage = __runInitializers(this, _pressed_initializers, undefined);
-        get pressed() { return this.#pressed_accessor_storage; }
-        set pressed(value) { this.#pressed_accessor_storage = value; }
-        #defaultPressed_accessor_storage = (__runInitializers(this, _pressed_extraInitializers), __runInitializers(this, _defaultPressed_initializers, false));
-        get defaultPressed() { return this.#defaultPressed_accessor_storage; }
-        set defaultPressed(value) { this.#defaultPressed_accessor_storage = value; }
-        #disabled_accessor_storage = (__runInitializers(this, _defaultPressed_extraInitializers), __runInitializers(this, _disabled_initializers, false));
-        get disabled() { return this.#disabled_accessor_storage; }
-        set disabled(value) { this.#disabled_accessor_storage = value; }
-        #value_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _value_initializers, undefined));
-        get value() { return this.#value_accessor_storage; }
-        set value(value) { this.#value_accessor_storage = value; }
-        #internalPressed_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _private_internalPressed_initializers, false));
-        get #internalPressed() { return _private_internalPressed_descriptor.get.call(this); }
-        set #internalPressed(value) { return _private_internalPressed_descriptor.set.call(this, value); }
-        #_groupCtx_accessor_storage = (__runInitializers(this, _private_internalPressed_extraInitializers), __runInitializers(this, __groupCtx_initializers, void 0));
-        get _groupCtx() { return this.#_groupCtx_accessor_storage; }
-        set _groupCtx(value) { this.#_groupCtx_accessor_storage = value; }
-        get #isPressed() {
-            if (this._groupCtx && this.value !== undefined) {
-                return this._groupCtx.value.includes(this.value);
-            }
-            return this.pressed ?? this.#internalPressed;
-        }
-        get #isDisabled() {
-            return this.disabled || (this._groupCtx?.disabled ?? false);
-        }
-        connectedCallback() {
-            super.connectedCallback();
-            if (this.pressed === undefined && this.defaultPressed) {
-                this.#internalPressed = true;
-            }
-        }
-        #handleClick = (__runInitializers(this, __groupCtx_extraInitializers), () => {
-            if (this.#isDisabled)
-                return;
-            if (this._groupCtx && this.value !== undefined) {
-                this._groupCtx.toggle(this.value);
-                return;
-            }
-            const newPressed = !this.#isPressed;
-            if (this.pressed === undefined) {
-                this.#internalPressed = newPressed;
-            }
-            this.dispatchEvent(pressedChangeEvent({ pressed: newPressed }));
-        });
-        render() {
-            const isPressed = this.#isPressed;
-            const isDisabled = this.#isDisabled;
-            return html `
-      <button
-        part="root"
-        type="button"
-        aria-pressed="${String(isPressed)}"
-        ?disabled="${isDisabled}"
-        ?data-pressed="${isPressed}"
-        ?data-disabled="${isDisabled}"
-        @click="${this.#handleClick}"
-      >
-        <slot name="icon"></slot>
-        <slot></slot>
-      </button>
-    `;
-        }
-    };
-})();
-export { DuiToggle };
+export class DuiToggle extends DuiTogglePrimitive {
+    static styles = [...DuiTogglePrimitive.styles, styles];
+}
+customElements.define(DuiToggle.tagName, DuiToggle);

package/tokens/properties.css

@@ -0,0 +1,361 @@
+/* =================================================================
+ * CSS @property Declarations
+ * =================================================================
+ * Typed API surface for theme-default's component-level CSS custom
+ * properties. These provide:
+ *
+ *   1. Type safety — browser rejects invalid values, falls back to
+ *      initial-value rather than inheriting garbage.
+ *   2. Smooth transitions — registered properties with known syntax
+ *      can be interpolated, enabling animated variant changes.
+ *   3. Self-documenting API — @property blocks are the machine-
+ *      readable schema and human-readable reference.
+ *   4. DevTools integration — Chrome shows registered properties
+ *      with syntax and initial-value in computed styles.
+ *
+ * Only consumer-facing properties are declared here. Internal tokens
+ * (--space-*, --primary, etc.) are implementation details.
+ *
+ * initial-value uses resolved values (no var() allowed). These match
+ * the light-theme defaults and serve as the ultimate fallback when
+ * no theme is applied.
+ *
+ * CONSTRAINT: @property registrations are global — two themes on
+ * the same page could conflict. This is acceptable for DUI's model
+ * where one theme is active at a time.
+ * ================================================================= */
+
+/* -----------------------------------------------------------
+ * Button
+ * ----------------------------------------------------------- */
+@property --button-bg {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --button-fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.97 0 0);
+}
+
+@property --button-border {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --button-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 2rem;
+}
+
+@property --button-width {
+  syntax: "<length-percentage> | auto";
+  inherits: true;
+  initial-value: auto;
+}
+
+@property --button-padding-y {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.5rem;
+}
+
+@property --button-padding-x {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.625rem;
+}
+
+@property --button-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.375rem;
+}
+
+@property --button-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.5rem;
+}
+
+@property --button-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.875rem;
+}
+
+@property --button-icon-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1.125rem;
+}
+
+/* -----------------------------------------------------------
+ * Badge
+ * ----------------------------------------------------------- */
+@property --badge-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.24 0.005 265);
+}
+
+@property --badge-fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.985 0 0);
+}
+
+@property --badge-border {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --badge-icon-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.75rem;
+}
+
+/* -----------------------------------------------------------
+ * Spinner
+ * ----------------------------------------------------------- */
+@property --spinner-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1.25rem;
+}
+
+@property --spinner-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: currentColor;
+}
+
+/* -----------------------------------------------------------
+ * Checkbox
+ * ----------------------------------------------------------- */
+@property --checkbox-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1.125rem;
+}
+
+/* -----------------------------------------------------------
+ * Radio
+ * ----------------------------------------------------------- */
+@property --radio-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1.125rem;
+}
+
+/* -----------------------------------------------------------
+ * Slider
+ * ----------------------------------------------------------- */
+@property --slider-track-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.375rem;
+}
+
+@property --slider-thumb-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1.125rem;
+}
+
+/* -----------------------------------------------------------
+ * Switch
+ * ----------------------------------------------------------- */
+@property --switch-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 2.25rem;
+}
+
+@property --switch-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1.25rem;
+}
+
+@property --switch-thumb-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --switch-thumb-offset {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.125rem;
+}
+
+/* -----------------------------------------------------------
+ * Toggle
+ * ----------------------------------------------------------- */
+@property --toggle-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.375rem;
+}
+
+/* -----------------------------------------------------------
+ * Progress
+ * ----------------------------------------------------------- */
+@property --progress-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.5rem;
+}
+
+/* -----------------------------------------------------------
+ * Avatar
+ * ----------------------------------------------------------- */
+@property --avatar-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.99 0 0);
+}
+
+@property --avatar-fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.15 0 0 / 0.63);
+}
+
+/* -----------------------------------------------------------
+ * Sidebar
+ * ----------------------------------------------------------- */
+@property --sidebar-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 16rem;
+}
+
+@property --sidebar-width-mobile {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 18rem;
+}
+
+@property --sidebar-width-icon {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 3rem;
+}
+
+@property --sidebar-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.99 0 0);
+}
+
+@property --sidebar-fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.15 0 0 / 0.90);
+}
+
+@property --sidebar-border {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.15 0 0 / 0.15);
+}
+
+@property --sidebar-button-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0 0 0 / 0);
+}
+
+@property --sidebar-button-fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.15 0 0 / 0.90);
+}
+
+@property --sidebar-muted-fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.15 0 0 / 0.63);
+}
+
+@property --sidebar-ring {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.55 0.25 260);
+}
+
+@property --sidebar-separator {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.15 0 0 / 0.15);
+}
+
+@property --sidebar-group-padding-y {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --sidebar-group-label-inset {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1.5rem;
+}
+
+@property --sidebar-button-inset {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --sidebar-header-content-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1rem;
+}
+
+/* -----------------------------------------------------------
+ * Sidebar Menu Button
+ * ----------------------------------------------------------- */
+@property --smb-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 2rem;
+}
+
+@property --smb-padding-x {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --smb-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.5rem;
+}
+
+@property --smb-icon-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --smb-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.875rem;
+}
+
+@property --smb-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.5rem;
+}