@deepfuture/dui-components 0.0.1

package/progress/progress.js

@@ -0,0 +1,94 @@
+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";
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="track"] {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  [part="indicator"] {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: var(--progress-value, 0%);
+    height: 100%;
+  }
+`;
+/**
+ * `<dui-progress>` — A progress bar indicating completion status.
+ *
+ * Set `value` to a number for determinate progress, or leave `null` for indeterminate.
+ *
+ * @csspart root - The outer container.
+ * @csspart track - The progress track.
+ * @csspart indicator - The filled indicator.
+ */
+export class DuiProgress extends LitElement {
+    static { this.tagName = "dui-progress"; }
+    static { this.styles = [base, styles]; }
+    #value_accessor_storage = null;
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #min_accessor_storage = 0;
+    get min() { return this.#min_accessor_storage; }
+    set min(value) { this.#min_accessor_storage = value; }
+    #max_accessor_storage = 100;
+    get max() { return this.#max_accessor_storage; }
+    set max(value) { this.#max_accessor_storage = value; }
+    get #percent() {
+        if (this.value === null)
+            return 0;
+        const range = this.max - this.min;
+        if (range <= 0)
+            return 0;
+        return Math.max(0, Math.min(100, ((this.value - this.min) / range) * 100));
+    }
+    get #isIndeterminate() {
+        return this.value === null;
+    }
+    get #isComplete() {
+        return this.value !== null && this.value >= this.max;
+    }
+    render() {
+        const percent = this.#percent;
+        return html `
+      <div
+        part="root"
+        role="progressbar"
+        aria-valuenow="${this.value ?? nothing}"
+        aria-valuemin="${this.min}"
+        aria-valuemax="${this.max}"
+        ?data-complete="${this.#isComplete}"
+        ?data-progressing="${!this.#isIndeterminate && !this.#isComplete}"
+        ?data-indeterminate="${this.#isIndeterminate}"
+        style="--progress-value: ${percent}%"
+      >
+        <div part="track">
+          <div part="indicator"></div>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Number })
+], DuiProgress.prototype, "value", null);
+__decorate([
+    property({ type: Number })
+], DuiProgress.prototype, "min", null);
+__decorate([
+    property({ type: Number })
+], DuiProgress.prototype, "max", null);

package/progress/register.d.ts

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

package/progress/register.js

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

package/radio/index.d.ts

@@ -0,0 +1,3 @@
+export { DuiRadio } from "./radio.js";
+export { DuiRadioGroup, valueChangeEvent } from "./radio-group.js";
+export type { RadioGroupContext } from "./radio-group-context.js";

package/radio/index.js

@@ -0,0 +1,2 @@
+export { DuiRadio } from "./radio.js";
+export { DuiRadioGroup, valueChangeEvent } from "./radio-group.js";

package/radio/radio-group-context.d.ts

@@ -0,0 +1,11 @@
+export type RadioGroupContext = {
+    readonly name: string | undefined;
+    readonly value: string | undefined;
+    readonly disabled: boolean;
+    readonly readOnly: boolean;
+    readonly required: boolean;
+    readonly select: (value: string) => void;
+};
+export declare const radioGroupContext: {
+    __context__: RadioGroupContext;
+};

package/radio/radio-group-context.js

@@ -0,0 +1,2 @@
+import { createContext } from "@lit/context";
+export const radioGroupContext = createContext(Symbol("dui-radio-group"));

package/radio/radio-group.d.ts

@@ -0,0 +1,37 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/radio */
+import { LitElement, type TemplateResult } from "lit";
+export declare const valueChangeEvent: (detail: {
+    value: string;
+}) => CustomEvent<{
+    value: string;
+}>;
+/**
+ * `<dui-radio-group>` — Groups multiple radio buttons with shared state.
+ *
+ * Only one radio can be selected at a time within a group. Supports
+ * controlled and uncontrolled usage.
+ *
+ * @slot - Default slot for `<dui-radio>` children.
+ * @csspart root - The group container element.
+ * @fires value-change - Fired when the selected value changes. Detail: { value: string }
+ */
+export declare class DuiRadioGroup extends LitElement {
+    #private;
+    static tagName: "dui-radio-group";
+    static styles: import("lit").CSSResult[];
+    /** The name attribute for form submission. */
+    accessor name: string | undefined;
+    /** Selected value (controlled). */
+    accessor value: string | undefined;
+    /** Initial selected value for uncontrolled usage. */
+    accessor defaultValue: string | undefined;
+    /** Whether all radios in the group are disabled. */
+    accessor disabled: boolean;
+    /** Whether all radios in the group are read-only. */
+    accessor readOnly: boolean;
+    /** Whether a selection is required. */
+    accessor required: boolean;
+    connectedCallback(): void;
+    willUpdate(): void;
+    render(): TemplateResult;
+}

package/radio/radio-group.js

@@ -0,0 +1,135 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/radio */
+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 } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+export const valueChangeEvent = customEvent("value-change", {
+    bubbles: true,
+    composed: true,
+});
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="root"] {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+  }
+
+  [part="root"][data-disabled] {
+    opacity: 0.5;
+  }
+`;
+/**
+ * `<dui-radio-group>` — Groups multiple radio buttons with shared state.
+ *
+ * Only one radio can be selected at a time within a group. Supports
+ * controlled and uncontrolled usage.
+ *
+ * @slot - Default slot for `<dui-radio>` children.
+ * @csspart root - The group container element.
+ * @fires value-change - Fired when the selected value changes. Detail: { value: string }
+ */
+export class DuiRadioGroup extends LitElement {
+    static { this.tagName = "dui-radio-group"; }
+    static { this.styles = [base, styles]; }
+    #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;
+    /** Selected value (controlled). */
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #defaultValue_accessor_storage = undefined;
+    /** Initial selected value for uncontrolled usage. */
+    get defaultValue() { return this.#defaultValue_accessor_storage; }
+    set defaultValue(value) { this.#defaultValue_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    /** Whether all radios in the group are disabled. */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #readOnly_accessor_storage = false;
+    /** Whether all radios in the group are read-only. */
+    get readOnly() { return this.#readOnly_accessor_storage; }
+    set readOnly(value) { this.#readOnly_accessor_storage = value; }
+    #required_accessor_storage = false;
+    /** Whether a selection is required. */
+    get required() { return this.#required_accessor_storage; }
+    set required(value) { this.#required_accessor_storage = value; }
+    #internalValue_accessor_storage = undefined;
+    get #internalValue() { return this.#internalValue_accessor_storage; }
+    set #internalValue(value) { this.#internalValue_accessor_storage = value; }
+    #getSelectedValue = () => this.value ?? this.#internalValue;
+    #select = (val) => {
+        if (this.disabled || this.readOnly)
+            return;
+        if (this.value === undefined) {
+            this.#internalValue = val;
+        }
+        this.dispatchEvent(valueChangeEvent({ value: val }));
+    };
+    #ctx_accessor_storage = this.#buildContext();
+    get #ctx() { return this.#ctx_accessor_storage; }
+    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    #buildContext() {
+        return {
+            name: this.name,
+            value: this.#getSelectedValue(),
+            disabled: this.disabled,
+            readOnly: this.readOnly,
+            required: this.required,
+            select: this.#select,
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.value === undefined && this.defaultValue !== undefined) {
+            this.#internalValue = this.defaultValue;
+        }
+        this.#ctx = this.#buildContext();
+    }
+    willUpdate() {
+        this.#ctx = this.#buildContext();
+    }
+    render() {
+        return html `
+      <div
+        part="root"
+        role="radiogroup"
+        ?data-disabled="${this.disabled}"
+        ?data-readonly="${this.readOnly}"
+        ?data-required="${this.required}"
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], DuiRadioGroup.prototype, "name", null);
+__decorate([
+    property()
+], DuiRadioGroup.prototype, "value", null);
+__decorate([
+    property({ attribute: "default-value" })
+], DuiRadioGroup.prototype, "defaultValue", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiRadioGroup.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "read-only" })
+], DuiRadioGroup.prototype, "readOnly", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiRadioGroup.prototype, "required", null);

package/radio/radio.d.ts

@@ -0,0 +1,27 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/radio */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-radio>` — A radio button input.
+ *
+ * Must be used within a `<dui-radio-group>`. Only one radio can be
+ * selected at a time within a group.
+ *
+ * @slot - Label content.
+ * @csspart root - The radio container.
+ * @csspart indicator - The selected state indicator.
+ * @cssprop --radio-size - Size of the radio button.
+ */
+export declare class DuiRadio extends LitElement {
+    #private;
+    static tagName: "dui-radio";
+    static styles: import("lit").CSSResult[];
+    /** The value attribute for this radio option. */
+    accessor value: string;
+    /** Whether the radio is disabled. */
+    accessor disabled: boolean;
+    /** Whether the radio is read-only. */
+    accessor readOnly: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}

package/radio/radio.js

@@ -0,0 +1,204 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/radio */
+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 { radioGroupContext } from "./radio-group-context.js";
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  [part="root"] {
+    box-sizing: border-box;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    outline: 0;
+    padding: 0;
+    margin: 0;
+    border: none;
+    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;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  [part="indicator"][data-unchecked] {
+    display: none;
+  }
+
+  .hidden-input {
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+    margin: 0;
+    width: 0;
+    height: 0;
+  }
+`;
+/**
+ * `<dui-radio>` — A radio button input.
+ *
+ * Must be used within a `<dui-radio-group>`. Only one radio can be
+ * selected at a time within a group.
+ *
+ * @slot - Label content.
+ * @csspart root - The radio container.
+ * @csspart indicator - The selected state indicator.
+ * @cssprop --radio-size - Size of the radio button.
+ */
+export class DuiRadio extends LitElement {
+    static { this.tagName = "dui-radio"; }
+    static { this.styles = [base, styles]; }
+    #value_accessor_storage = "";
+    /** The value attribute for this radio option. */
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    /** Whether the radio is disabled. */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #readOnly_accessor_storage = false;
+    /** Whether the radio is read-only. */
+    get readOnly() { return this.#readOnly_accessor_storage; }
+    set readOnly(value) { this.#readOnly_accessor_storage = value; }
+    #groupCtx = new ContextConsumer(this, {
+        context: radioGroupContext,
+        subscribe: true,
+    });
+    #fieldCtx_accessor_storage;
+    get #fieldCtx() { return this.#fieldCtx_accessor_storage; }
+    set #fieldCtx(value) { this.#fieldCtx_accessor_storage = value; }
+    get #isChecked() {
+        return this.#groupCtx.value?.value === this.value;
+    }
+    get #isDisabled() {
+        return (this.disabled ||
+            (this.#groupCtx.value?.disabled ?? false) ||
+            (this.#fieldCtx?.disabled ?? false));
+    }
+    get #isReadOnly() {
+        return this.readOnly || (this.#groupCtx.value?.readOnly ?? false);
+    }
+    get #isRequired() {
+        return this.#groupCtx.value?.required ?? false;
+    }
+    get #isInvalid() {
+        return this.#fieldCtx?.invalid ?? false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this.#handleHostClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("click", this.#handleHostClick);
+    }
+    #handleHostClick = (e) => {
+        if (e.target.closest("[part='root']"))
+            return;
+        this.#handleClick(e);
+    };
+    #handleClick = (_e) => {
+        if (this.#isDisabled || this.#isReadOnly)
+            return;
+        const ctx = this.#groupCtx.value;
+        if (ctx) {
+            ctx.select(this.value);
+            this.#fieldCtx?.markDirty();
+            this.#fieldCtx?.markTouched();
+        }
+    };
+    #handleKeyDown = (e) => {
+        if (e.key === " ") {
+            e.preventDefault();
+            this.#handleClick(e);
+        }
+    };
+    render() {
+        const isChecked = this.#isChecked;
+        const isDisabled = this.#isDisabled;
+        const isReadOnly = this.#isReadOnly;
+        const isRequired = this.#isRequired;
+        const isInvalid = this.#isInvalid;
+        const controlId = this.#fieldCtx?.controlId ?? "";
+        return html `
+      <span
+        part="root"
+        role="radio"
+        id="${controlId || nothing}"
+        aria-checked="${String(isChecked)}"
+        aria-disabled="${isDisabled ? "true" : nothing}"
+        aria-readonly="${isReadOnly ? "true" : nothing}"
+        aria-required="${isRequired ? "true" : nothing}"
+        aria-invalid="${isInvalid ? "true" : nothing}"
+        tabindex="${isDisabled ? nothing : "0"}"
+        ?data-checked="${isChecked}"
+        ?data-unchecked="${!isChecked}"
+        ?data-disabled="${isDisabled}"
+        ?data-readonly="${isReadOnly}"
+        ?data-required="${isRequired}"
+        ?data-invalid="${isInvalid}"
+        @click="${this.#handleClick}"
+        @keydown="${this.#handleKeyDown}"
+      >
+        <span
+          part="indicator"
+          ?data-checked="${isChecked}"
+          ?data-unchecked="${!isChecked}"
+        >
+          ${isChecked ? html `<span part="dot"></span>` : nothing}
+        </span>
+        <input
+          type="radio"
+          name="${this.#groupCtx.value?.name ?? nothing}"
+          value="${this.value}"
+          .checked="${isChecked}"
+          ?disabled="${isDisabled}"
+          ?required="${isRequired}"
+          class="hidden-input"
+          aria-hidden="true"
+          tabindex="-1"
+        />
+      </span>
+      <slot></slot>
+    `;
+    }
+}
+__decorate([
+    property()
+], DuiRadio.prototype, "value", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiRadio.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "read-only" })
+], DuiRadio.prototype, "readOnly", null);

package/radio/register.d.ts

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

package/radio/register.js

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

package/scroll-area/index.d.ts

@@ -0,0 +1 @@
+export { DuiScrollArea } from "./scroll-area.js";

package/scroll-area/index.js

@@ -0,0 +1 @@
+export { DuiScrollArea } from "./scroll-area.js";

package/scroll-area/register.d.ts

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

package/scroll-area/register.js

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

package/scroll-area/scroll-area.d.ts

@@ -0,0 +1,38 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/scroll-area */
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+/**
+ * `<dui-scroll-area>` — A scroll container with custom styled scrollbar.
+ *
+ * Hides the native scrollbar and renders a custom track + thumb with
+ * auto-hide behavior. Supports vertical, horizontal, or both orientations.
+ *
+ * @slot - Default slot for scrollable content.
+ *
+ * @cssprop [--scroll-area-max-height] - Max-height constraint.
+ * @cssprop [--scroll-area-thumb-color] - Scrollbar thumb color.
+ * @cssprop [--scroll-fade-color] - Fade overlay color.
+ */
+export declare class DuiScrollArea extends LitElement {
+    #private;
+    static tagName: "dui-scroll-area";
+    static styles: import("lit").CSSResult[];
+    /** Scroll direction(s). */
+    accessor orientation: ScrollAreaOrientation;
+    /** Show a fade overlay at the top when scrolled. */
+    accessor fade: boolean;
+    /** Optional max-height constraint (CSS value). */
+    accessor maxHeight: string | undefined;
+    protected willUpdate(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    /** Scroll the viewport to the bottom. */
+    scrollToBottom(): Promise<void>;
+    /** Whether the viewport is scrolled to the top. */
+    get isAtTop(): boolean;
+    /** Whether the viewport is scrolled to the bottom. */
+    get isAtBottom(): boolean;
+    render(): TemplateResult;
+}
+export {};