@deepfuture/dui-components 0.0.1

package/checkbox/checkbox.d.ts

@@ -0,0 +1,46 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/checkbox */
+import { LitElement, type TemplateResult } from "lit";
+export declare const checkedChangeEvent: (detail: {
+    checked: boolean;
+    indeterminate: boolean;
+}) => CustomEvent<{
+    checked: boolean;
+    indeterminate: boolean;
+}>;
+/**
+ * `<dui-checkbox>` — A checkbox input with optional indeterminate state.
+ *
+ * Supports controlled and uncontrolled usage, group context integration,
+ * and field context for form validation states.
+ *
+ * @csspart root - The checkbox box element.
+ * @csspart indicator - The check/indeterminate indicator.
+ *
+ * @fires checked-change - Fired when checked state changes. Detail: { checked, indeterminate }
+ */
+export declare class DuiCheckbox extends LitElement {
+    #private;
+    static tagName: "dui-checkbox";
+    static styles: import("lit").CSSResult[];
+    /** Whether the checkbox is checked (controlled). */
+    accessor checked: boolean | undefined;
+    /** Initial checked state for uncontrolled usage. */
+    accessor defaultChecked: boolean;
+    /** Whether the checkbox is in an indeterminate (mixed) state. */
+    accessor indeterminate: boolean;
+    /** Whether the checkbox is disabled. */
+    accessor disabled: boolean;
+    /** Whether the checkbox is read-only. */
+    accessor readOnly: boolean;
+    /** Whether the checkbox is required for form submission. */
+    accessor required: boolean;
+    /** The name attribute for form submission. */
+    accessor name: string | undefined;
+    /** The value attribute for form submission. */
+    accessor value: string | undefined;
+    /** When true, acts as a parent (select-all) checkbox within a group. */
+    accessor parent: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}

package/checkbox/checkbox.js

@@ -0,0 +1,314 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/checkbox */
+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;
+};
+import { css, html, LitElement, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { ContextConsumer } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+import { checkboxGroupContext } from "./checkbox-group-context.js";
+export const checkedChangeEvent = customEvent("checked-change", { bubbles: true, composed: true });
+/** Structural styles only — layout and behavioral CSS. */
+const styles = css `
+  :host {
+    display: inline-flex;
+    align-items: start;
+    cursor: pointer;
+    text-align: start;
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  [part="root"] {
+    box-sizing: border-box;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin-block-end: 0;
+    margin-inline: 0;
+    border: none;
+    outline: 0;
+    cursor: pointer;
+    transition-property: background, border-color, box-shadow, filter, transform;
+  }
+
+  [part="root"][data-disabled] {
+    cursor: not-allowed;
+  }
+
+  [part="root"][data-readonly] {
+    cursor: default;
+  }
+
+  [part="indicator"] {
+    display: flex;
+  }
+
+  [part="indicator"][data-unchecked] {
+    display: none;
+  }
+
+  .HiddenInput {
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+    margin: 0;
+    width: 0;
+    height: 0;
+  }
+`;
+const checkIcon = html `
+  <svg
+    class="Icon"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <polyline points="20 6 9 17 4 12"></polyline>
+  </svg>
+`;
+const indeterminateIcon = html `
+  <svg
+    class="Icon"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <line x1="5" y1="12" x2="19" y2="12"></line>
+  </svg>
+`;
+/**
+ * `<dui-checkbox>` — A checkbox input with optional indeterminate state.
+ *
+ * Supports controlled and uncontrolled usage, group context integration,
+ * and field context for form validation states.
+ *
+ * @csspart root - The checkbox box element.
+ * @csspart indicator - The check/indeterminate indicator.
+ *
+ * @fires checked-change - Fired when checked state changes. Detail: { checked, indeterminate }
+ */
+export class DuiCheckbox extends LitElement {
+    static { this.tagName = "dui-checkbox"; }
+    static { this.styles = [base, styles]; }
+    #checked_accessor_storage = undefined;
+    /** Whether the checkbox is checked (controlled). */
+    get checked() { return this.#checked_accessor_storage; }
+    set checked(value) { this.#checked_accessor_storage = value; }
+    #defaultChecked_accessor_storage = false;
+    /** Initial checked state for uncontrolled usage. */
+    get defaultChecked() { return this.#defaultChecked_accessor_storage; }
+    set defaultChecked(value) { this.#defaultChecked_accessor_storage = value; }
+    #indeterminate_accessor_storage = false;
+    /** Whether the checkbox is in an indeterminate (mixed) state. */
+    get indeterminate() { return this.#indeterminate_accessor_storage; }
+    set indeterminate(value) { this.#indeterminate_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    /** Whether the checkbox is disabled. */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #readOnly_accessor_storage = false;
+    /** Whether the checkbox is read-only. */
+    get readOnly() { return this.#readOnly_accessor_storage; }
+    set readOnly(value) { this.#readOnly_accessor_storage = value; }
+    #required_accessor_storage = false;
+    /** Whether the checkbox is required for form submission. */
+    get required() { return this.#required_accessor_storage; }
+    set required(value) { this.#required_accessor_storage = value; }
+    #name_accessor_storage = undefined;
+    /** The name attribute for form submission. */
+    get name() { return this.#name_accessor_storage; }
+    set name(value) { this.#name_accessor_storage = value; }
+    #value_accessor_storage = undefined;
+    /** The value attribute for form submission. */
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #parent_accessor_storage = false;
+    /** When true, acts as a parent (select-all) checkbox within a group. */
+    get parent() { return this.#parent_accessor_storage; }
+    set parent(value) { this.#parent_accessor_storage = value; }
+    #internalChecked_accessor_storage = false;
+    get #internalChecked() { return this.#internalChecked_accessor_storage; }
+    set #internalChecked(value) { this.#internalChecked_accessor_storage = value; }
+    #groupCtx = new ContextConsumer(this, {
+        context: checkboxGroupContext,
+        subscribe: true,
+    });
+    #fieldCtx_accessor_storage;
+    get #fieldCtx() { return this.#fieldCtx_accessor_storage; }
+    set #fieldCtx(value) { this.#fieldCtx_accessor_storage = value; }
+    get #isChecked() {
+        const ctx = this.#groupCtx.value;
+        if (ctx && this.value !== undefined) {
+            if (this.parent) {
+                return (ctx.allValues.length > 0 &&
+                    ctx.allValues.every((v) => ctx.checkedValues.includes(v)));
+            }
+            return ctx.checkedValues.includes(this.value);
+        }
+        return this.checked ?? this.#internalChecked;
+    }
+    get #isIndeterminate() {
+        const ctx = this.#groupCtx.value;
+        if (ctx && this.parent && this.value !== undefined) {
+            const count = ctx.allValues.filter((v) => ctx.checkedValues.includes(v)).length;
+            return count > 0 && count < ctx.allValues.length;
+        }
+        return this.indeterminate;
+    }
+    get #isDisabled() {
+        return (this.disabled ||
+            (this.#groupCtx.value?.disabled ?? false) ||
+            (this.#fieldCtx?.disabled ?? false));
+    }
+    get #isInvalid() {
+        return this.#fieldCtx?.invalid ?? false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.checked === undefined && this.defaultChecked) {
+            this.#internalChecked = true;
+        }
+        this.addEventListener("click", this.#handleHostClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("click", this.#handleHostClick);
+    }
+    #handleHostClick = (_e) => {
+        this.#handleClick();
+    };
+    #handleClick = () => {
+        if (this.#isDisabled || this.readOnly)
+            return;
+        const ctx = this.#groupCtx.value;
+        // Within a group: delegate to context
+        if (ctx && this.value !== undefined) {
+            if (this.parent) {
+                ctx.toggleAll(!this.#isChecked);
+            }
+            else {
+                ctx.toggle(this.value);
+            }
+            this.#fieldCtx?.markDirty();
+            this.#fieldCtx?.markTouched();
+            return;
+        }
+        // Standalone behavior
+        const newChecked = !this.#isChecked;
+        if (this.checked === undefined) {
+            this.#internalChecked = newChecked;
+            this.indeterminate = false;
+        }
+        this.#fieldCtx?.markDirty();
+        this.#fieldCtx?.markTouched();
+        this.dispatchEvent(checkedChangeEvent({
+            checked: newChecked,
+            indeterminate: false,
+        }));
+    };
+    #handleKeyDown = (e) => {
+        if (e.key === " ") {
+            e.preventDefault();
+            this.#handleClick();
+        }
+    };
+    render() {
+        const isChecked = this.#isChecked;
+        const isIndeterminate = this.#isIndeterminate;
+        const isDisabled = this.#isDisabled;
+        const isInvalid = this.#isInvalid;
+        const showIndicator = isChecked || isIndeterminate;
+        const controlId = this.#fieldCtx?.controlId ?? "";
+        return html `
+      <span
+        part="root"
+        role="checkbox"
+        id="${controlId || nothing}"
+        aria-checked="${isIndeterminate ? "mixed" : String(isChecked)}"
+        aria-disabled="${isDisabled ? "true" : nothing}"
+        aria-readonly="${this.readOnly ? "true" : nothing}"
+        aria-required="${this.required ? "true" : nothing}"
+        aria-invalid="${isInvalid ? "true" : nothing}"
+        tabindex="${isDisabled ? nothing : "0"}"
+        ?data-checked="${isChecked && !isIndeterminate}"
+        ?data-unchecked="${!isChecked && !isIndeterminate}"
+        ?data-indeterminate="${isIndeterminate}"
+        ?data-disabled="${isDisabled}"
+        ?data-readonly="${this.readOnly}"
+        ?data-required="${this.required}"
+        ?data-invalid="${isInvalid}"
+        @keydown="${this.#handleKeyDown}"
+      >
+        <span
+          part="indicator"
+          ?data-checked="${isChecked && !isIndeterminate}"
+          ?data-unchecked="${!isChecked && !isIndeterminate}"
+          ?data-indeterminate="${isIndeterminate}"
+        >
+          ${showIndicator
+            ? isIndeterminate
+                ? indeterminateIcon
+                : checkIcon
+            : nothing}
+        </span>
+        <input
+          type="checkbox"
+          name="${this.name ?? nothing}"
+          value="${this.value ?? nothing}"
+          .checked="${isChecked}"
+          .indeterminate="${isIndeterminate}"
+          ?disabled="${isDisabled}"
+          ?required="${this.required}"
+          class="HiddenInput"
+          aria-hidden="true"
+          tabindex="-1"
+        />
+      </span>
+      <slot></slot>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiCheckbox.prototype, "checked", null);
+__decorate([
+    property({ type: Boolean, attribute: "default-checked" })
+], DuiCheckbox.prototype, "defaultChecked", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiCheckbox.prototype, "indeterminate", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiCheckbox.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "read-only" })
+], DuiCheckbox.prototype, "readOnly", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiCheckbox.prototype, "required", null);
+__decorate([
+    property()
+], DuiCheckbox.prototype, "name", null);
+__decorate([
+    property()
+], DuiCheckbox.prototype, "value", null);
+__decorate([
+    property({ type: Boolean })
+], DuiCheckbox.prototype, "parent", null);

package/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { DuiCheckbox, checkedChangeEvent } from "./checkbox.js";
+export { DuiCheckboxGroup, valueChangeEvent } from "./checkbox-group.js";
+export type { CheckboxGroupContext } from "./checkbox-group-context.js";

package/checkbox/index.js

@@ -0,0 +1,2 @@
+export { DuiCheckbox, checkedChangeEvent } from "./checkbox.js";
+export { DuiCheckboxGroup, valueChangeEvent } from "./checkbox-group.js";

package/checkbox/register.d.ts

@@ -0,0 +1 @@
+export {};

package/checkbox/register.js

@@ -0,0 +1,8 @@
+import { DuiCheckbox } from "./checkbox.js";
+import { DuiCheckboxGroup } from "./checkbox-group.js";
+if (!customElements.get(DuiCheckbox.tagName)) {
+    customElements.define(DuiCheckbox.tagName, DuiCheckbox);
+}
+if (!customElements.get(DuiCheckboxGroup.tagName)) {
+    customElements.define(DuiCheckboxGroup.tagName, DuiCheckboxGroup);
+}

package/collapsible/collapsible.d.ts

@@ -0,0 +1,22 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/collapsible */
+import { LitElement, type TemplateResult } from "lit";
+export declare const openChangeEvent: (detail: {
+    open: boolean;
+}) => CustomEvent<{
+    open: boolean;
+}>;
+export declare class DuiCollapsible extends LitElement {
+    #private;
+    static tagName: "dui-collapsible";
+    static styles: import("lit").CSSResult[];
+    /** Controlled open state. When set, the component is fully controlled. */
+    accessor open: boolean;
+    /** Uncontrolled initial open state. Only used on first render. */
+    accessor defaultOpen: boolean;
+    accessor disabled: boolean;
+    /** Keep panel content mounted when closed. */
+    accessor keepMounted: boolean;
+    connectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
+    render(): TemplateResult;
+}

package/collapsible/collapsible.js

@@ -0,0 +1,227 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/collapsible */
+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;
+};
+import { css, html, LitElement, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+export const openChangeEvent = customEvent("open-change", { bubbles: true, composed: true });
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="trigger"] {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    user-select: none;
+    border: none;
+    background: none;
+    text-align: left;
+    outline: none;
+    box-sizing: border-box;
+    transition-property: background, box-shadow, filter, transform;
+  }
+
+  [part="trigger"][data-disabled] {
+    cursor: default;
+  }
+
+  [part="indicator"] {
+    flex-shrink: 0;
+    transition-property: transform;
+  }
+
+  [part="panel"] {
+    overflow: hidden;
+    transition-property: height;
+  }
+`;
+// Inline chevron-down SVG to avoid icon component dependency
+const chevronSvg = html `<svg
+  part="indicator"
+  width="16"
+  height="16"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m6 9 6 6 6-6" />
+</svg>`;
+export class DuiCollapsible extends LitElement {
+    static { this.tagName = "dui-collapsible"; }
+    static { this.styles = [base, styles]; }
+    #open_accessor_storage = false;
+    /** Controlled open state. When set, the component is fully controlled. */
+    get open() { return this.#open_accessor_storage; }
+    set open(value) { this.#open_accessor_storage = value; }
+    #defaultOpen_accessor_storage = false;
+    /** Uncontrolled initial open state. Only used on first render. */
+    get defaultOpen() { return this.#defaultOpen_accessor_storage; }
+    set defaultOpen(value) { this.#defaultOpen_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #keepMounted_accessor_storage = false;
+    /** Keep panel content mounted when closed. */
+    get keepMounted() { return this.#keepMounted_accessor_storage; }
+    set keepMounted(value) { this.#keepMounted_accessor_storage = value; }
+    #starting_accessor_storage = false;
+    get #starting() { return this.#starting_accessor_storage; }
+    set #starting(value) { this.#starting_accessor_storage = value; }
+    #ending_accessor_storage = false;
+    get #ending() { return this.#ending_accessor_storage; }
+    set #ending(value) { this.#ending_accessor_storage = value; }
+    #panelHeight_accessor_storage = "0";
+    get #panelHeight() { return this.#panelHeight_accessor_storage; }
+    set #panelHeight(value) { this.#panelHeight_accessor_storage = value; }
+    #visible_accessor_storage = false;
+    get #visible() { return this.#visible_accessor_storage; }
+    set #visible(value) { this.#visible_accessor_storage = value; }
+    #internalOpen_accessor_storage = false;
+    get #internalOpen() { return this.#internalOpen_accessor_storage; }
+    set #internalOpen(value) { this.#internalOpen_accessor_storage = value; }
+    #prevOpen = undefined;
+    #animGen = 0;
+    #controlled = false;
+    get #isOpen() {
+        return this.#controlled ? this.open : this.#internalOpen;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Check if `open` attribute was explicitly set (controlled mode)
+        this.#controlled = this.hasAttribute("open");
+        if (!this.#controlled && this.defaultOpen) {
+            this.#internalOpen = true;
+        }
+    }
+    willUpdate(changed) {
+        // If `open` property is set after initial render, switch to controlled mode
+        if (changed.has("open") && this.#prevOpen !== undefined) {
+            this.#controlled = true;
+        }
+        const isOpen = this.#isOpen;
+        if (this.#prevOpen === undefined) {
+            this.#visible = isOpen;
+            this.#panelHeight = isOpen ? "auto" : "0";
+        }
+        else if (this.#prevOpen !== isOpen) {
+            if (isOpen) {
+                this.#startOpenAnimation();
+            }
+            else {
+                this.#startCloseAnimation();
+            }
+        }
+        this.#prevOpen = isOpen;
+    }
+    #startOpenAnimation() {
+        const gen = ++this.#animGen;
+        this.#ending = false;
+        this.#visible = true;
+        this.#starting = true;
+        this.#panelHeight = "0";
+        requestAnimationFrame(() => {
+            if (this.#animGen !== gen)
+                return;
+            const panel = this.shadowRoot?.querySelector("[part='panel']");
+            if (panel) {
+                this.#panelHeight = `${panel.scrollHeight}px`;
+            }
+            this.#starting = false;
+        });
+    }
+    #startCloseAnimation() {
+        const gen = ++this.#animGen;
+        this.#starting = false;
+        const panel = this.shadowRoot?.querySelector("[part='panel']");
+        if (panel) {
+            this.#panelHeight = `${panel.scrollHeight}px`;
+        }
+        requestAnimationFrame(() => {
+            if (this.#animGen !== gen)
+                return;
+            this.#ending = true;
+            this.#panelHeight = "0";
+        });
+    }
+    #onTransitionEnd = (event) => {
+        if (event.propertyName !== "height")
+            return;
+        if (this.#ending) {
+            this.#ending = false;
+            if (!this.keepMounted) {
+                this.#visible = false;
+            }
+        }
+        else if (this.#isOpen) {
+            this.#panelHeight = "auto";
+        }
+    };
+    #onClick = () => {
+        if (this.disabled)
+            return;
+        const nextOpen = !this.#isOpen;
+        if (!this.#controlled) {
+            this.#internalOpen = nextOpen;
+        }
+        this.dispatchEvent(openChangeEvent({ open: nextOpen }));
+    };
+    render() {
+        const isOpen = this.#isOpen;
+        const shouldRender = this.#visible || this.keepMounted;
+        return html `
+      <button
+        part="trigger"
+        aria-expanded=${isOpen}
+        ?data-open=${isOpen}
+        ?data-disabled=${this.disabled}
+        ?disabled=${this.disabled}
+        @click=${this.#onClick}
+      >
+        <slot name="trigger"></slot>
+        ${chevronSvg}
+      </button>
+      ${shouldRender
+            ? html `
+            <div
+              part="panel"
+              role="region"
+              style="height: ${this.#panelHeight}"
+              ?data-open=${isOpen && !this.#starting}
+              ?data-starting-style=${this.#starting}
+              ?data-ending-style=${this.#ending}
+              ?hidden=${!this.#visible && !this.#ending}
+              @transitionend=${this.#onTransitionEnd}
+            >
+              <div part="content">
+                <slot></slot>
+              </div>
+            </div>
+          `
+            : nothing}
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiCollapsible.prototype, "open", null);
+__decorate([
+    property({ type: Boolean, attribute: "default-open" })
+], DuiCollapsible.prototype, "defaultOpen", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiCollapsible.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean, attribute: "keep-mounted" })
+], DuiCollapsible.prototype, "keepMounted", null);

package/collapsible/index.d.ts

@@ -0,0 +1 @@
+export { DuiCollapsible, openChangeEvent } from "./collapsible.js";

package/collapsible/index.js

@@ -0,0 +1 @@
+export { DuiCollapsible, openChangeEvent } from "./collapsible.js";

package/collapsible/register.d.ts

@@ -0,0 +1 @@
+export {};

package/collapsible/register.js

@@ -0,0 +1,4 @@
+import { DuiCollapsible } from "./collapsible.js";
+if (!customElements.get(DuiCollapsible.tagName)) {
+    customElements.define(DuiCollapsible.tagName, DuiCollapsible);
+}