@deepfuture/dui-components 0.0.18 → 0.0.20

package/switch/switch.js

@@ -38,10 +38,8 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
 };
 import { css, html, LitElement, nothing } 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 { fieldContext } from "../field/field-context.js";
 export const checkedChangeEvent = customEvent("checked-change", { bubbles: true, composed: true });
 /** Structural styles only — layout and behavioral CSS. */
 const styles = css `
@@ -66,6 +64,7 @@ const styles = css `
     margin-inline: 0;
     border: none;
     cursor: pointer;
+    user-select: none;
   }
 
   [part="thumb"] {
@@ -77,14 +76,6 @@ const styles = css `
     transform: translateX(var(--switch-checked-offset, 0));
   }
 
-  .HiddenInput {
-    position: absolute;
-    pointer-events: none;
-    opacity: 0;
-    margin: 0;
-    width: 0;
-    height: 0;
-  }
 `;
 /**
  * `<dui-switch>` — A toggle switch for binary on/off settings.
@@ -123,9 +114,6 @@ let DuiSwitch = (() => {
     let _private_internalChecked_initializers = [];
     let _private_internalChecked_extraInitializers = [];
     let _private_internalChecked_descriptor;
-    let __fieldCtx_decorators;
-    let __fieldCtx_initializers = [];
-    let __fieldCtx_extraInitializers = [];
     return class DuiSwitch extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -138,7 +126,6 @@ let DuiSwitch = (() => {
             _value_decorators = [property()];
             _uncheckedValue_decorators = [property({ attribute: "unchecked-value" })];
             _private_internalChecked_decorators = [state()];
-            __fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
             __esDecorate(this, null, _checked_decorators, { kind: "accessor", name: "checked", static: false, private: false, access: { has: obj => "checked" in obj, get: obj => obj.checked, set: (obj, value) => { obj.checked = value; } }, metadata: _metadata }, _checked_initializers, _checked_extraInitializers);
             __esDecorate(this, null, _defaultChecked_decorators, { kind: "accessor", name: "defaultChecked", static: false, private: false, access: { has: obj => "defaultChecked" in obj, get: obj => obj.defaultChecked, set: (obj, value) => { obj.defaultChecked = value; } }, metadata: _metadata }, _defaultChecked_initializers, _defaultChecked_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);
@@ -148,11 +135,16 @@ let DuiSwitch = (() => {
             __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, null, _uncheckedValue_decorators, { kind: "accessor", name: "uncheckedValue", static: false, private: false, access: { has: obj => "uncheckedValue" in obj, get: obj => obj.uncheckedValue, set: (obj, value) => { obj.uncheckedValue = value; } }, metadata: _metadata }, _uncheckedValue_initializers, _uncheckedValue_extraInitializers);
             __esDecorate(this, _private_internalChecked_descriptor = { get: __setFunctionName(function () { return this.#internalChecked_accessor_storage; }, "#internalChecked", "get"), set: __setFunctionName(function (value) { this.#internalChecked_accessor_storage = value; }, "#internalChecked", "set") }, _private_internalChecked_decorators, { kind: "accessor", name: "#internalChecked", static: false, private: true, access: { has: obj => #internalChecked in obj, get: obj => obj.#internalChecked, set: (obj, value) => { obj.#internalChecked = value; } }, metadata: _metadata }, _private_internalChecked_initializers, _private_internalChecked_extraInitializers);
-            __esDecorate(this, null, __fieldCtx_decorators, { kind: "accessor", name: "_fieldCtx", static: false, private: false, access: { has: obj => "_fieldCtx" in obj, get: obj => obj._fieldCtx, set: (obj, value) => { obj._fieldCtx = value; } }, metadata: _metadata }, __fieldCtx_initializers, __fieldCtx_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static tagName = "dui-switch";
+        static formAssociated = true;
         static styles = [base, styles];
+        #internals;
+        constructor() {
+            super();
+            this.#internals = this.attachInternals();
+        }
         #checked_accessor_storage = __runInitializers(this, _checked_initializers, undefined);
         get checked() { return this.#checked_accessor_storage; }
         set checked(value) { this.#checked_accessor_storage = value; }
@@ -180,17 +172,11 @@ let DuiSwitch = (() => {
         #internalChecked_accessor_storage = (__runInitializers(this, _uncheckedValue_extraInitializers), __runInitializers(this, _private_internalChecked_initializers, false));
         get #internalChecked() { return _private_internalChecked_descriptor.get.call(this); }
         set #internalChecked(value) { return _private_internalChecked_descriptor.set.call(this, value); }
-        #_fieldCtx_accessor_storage = (__runInitializers(this, _private_internalChecked_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
-        get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
-        set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
         get #isChecked() {
             return this.checked ?? this.#internalChecked;
         }
         get #isDisabled() {
-            return this.disabled || (this._fieldCtx?.disabled ?? false);
-        }
-        get #isInvalid() {
-            return this._fieldCtx?.invalid ?? false;
+            return this.disabled;
         }
         connectedCallback() {
             super.connectedCallback();
@@ -199,11 +185,18 @@ let DuiSwitch = (() => {
             }
             this.addEventListener("click", this.#handleHostClick);
         }
+        willUpdate() {
+            this.#syncFormValue();
+        }
+        #syncFormValue() {
+            const formValue = this.#isChecked ? this.value : this.uncheckedValue;
+            this.#internals.setFormValue(formValue || null);
+        }
         disconnectedCallback() {
             super.disconnectedCallback();
             this.removeEventListener("click", this.#handleHostClick);
         }
-        #handleHostClick = (__runInitializers(this, __fieldCtx_extraInitializers), (_e) => {
+        #handleHostClick = (__runInitializers(this, _private_internalChecked_extraInitializers), (_e) => {
             this.#handleClick();
         });
         #handleClick = () => {
@@ -213,8 +206,6 @@ let DuiSwitch = (() => {
             if (this.checked === undefined) {
                 this.#internalChecked = newChecked;
             }
-            this._fieldCtx?.markDirty();
-            this._fieldCtx?.markTouched();
             this.dispatchEvent(checkedChangeEvent({ checked: newChecked }));
         };
         #handleKeyDown = (e) => {
@@ -226,39 +217,23 @@ let DuiSwitch = (() => {
         render() {
             const isChecked = this.#isChecked;
             const isDisabled = this.#isDisabled;
-            const isInvalid = this.#isInvalid;
-            const controlId = this._fieldCtx?.controlId ?? "";
             return html `
       <span
         part="root"
         role="switch"
-        id="${controlId || nothing}"
         aria-checked="${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}"
         ?data-unchecked="${!isChecked}"
         ?data-disabled="${isDisabled}"
         ?data-readonly="${this.readOnly}"
         ?data-required="${this.required}"
-        ?data-invalid="${isInvalid}"
         @keydown="${this.#handleKeyDown}"
       >
         <span part="thumb"></span>
-        <input
-          type="checkbox"
-          name="${this.name ?? nothing}"
-          value="${isChecked ? this.value : this.uncheckedValue}"
-          .checked="${isChecked}"
-          ?disabled="${isDisabled}"
-          ?required="${this.required}"
-          class="HiddenInput"
-          aria-hidden="true"
-          tabindex="-1"
-        />
       </span>
       <slot></slot>
     `;

package/textarea/textarea.d.ts

@@ -12,8 +12,10 @@ export declare const textareaChangeEvent: (detail: {
 export declare class DuiTextarea extends LitElement {
     #private;
     static tagName: "dui-textarea";
+    static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    constructor();
     /** Current textarea value. */
     accessor value: string;
     /** Placeholder text. */
@@ -30,5 +32,7 @@ export declare class DuiTextarea extends LitElement {
     accessor resize: TextareaResize;
     /** Maximum height (CSS value). Textarea scrolls when content exceeds this. */
     accessor maxHeight: string | undefined;
+    willUpdate(): void;
+    updated(): void;
     render(): TemplateResult;
 }

package/textarea/textarea.js

@@ -46,6 +46,7 @@ const styles = css `
   }
 
   [part="textarea"] {
+    display: block;
     box-sizing: border-box;
     width: 100%;
     font-family: inherit;
@@ -144,11 +145,17 @@ let DuiTextarea = (() => {
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static tagName = "dui-textarea";
+        static formAssociated = true;
         static shadowRootOptions = {
             ...LitElement.shadowRootOptions,
             delegatesFocus: true,
         };
         static styles = [base, styles];
+        #internals;
+        constructor() {
+            super();
+            this.#internals = this.attachInternals();
+        }
         #value_accessor_storage = __runInitializers(this, _value_initializers, "");
         /** Current textarea value. */
         get value() { return this.#value_accessor_storage; }
@@ -187,9 +194,22 @@ let DuiTextarea = (() => {
         /** Maximum height (CSS value). Textarea scrolls when content exceeds this. */
         get maxHeight() { return this.#maxHeight_accessor_storage; }
         set maxHeight(value) { this.#maxHeight_accessor_storage = value; }
+        willUpdate() {
+            this.#internals.setFormValue(this.value);
+        }
+        #syncValidity() {
+            const textarea = this.shadowRoot?.querySelector("textarea");
+            if (textarea) {
+                this.#internals.setValidity(textarea.validity, textarea.validationMessage, textarea);
+            }
+        }
+        updated() {
+            this.#syncValidity();
+        }
         #onInput = (__runInitializers(this, _maxHeight_extraInitializers), (event) => {
             const target = event.target;
             this.value = target.value;
+            this.#internals.setFormValue(this.value);
             this.dispatchEvent(textareaChangeEvent({ value: this.value }));
         });
         render() {

package/field/field-context.d.ts

@@ -1,20 +0,0 @@
-export type FieldContext = {
-    readonly fieldId: string;
-    readonly labelId: string;
-    readonly controlId: string;
-    readonly descriptionId: string;
-    readonly errorId: string;
-    readonly disabled: boolean;
-    readonly invalid: boolean;
-    readonly dirty: boolean;
-    readonly touched: boolean;
-    readonly filled: boolean;
-    readonly focused: boolean;
-    readonly markTouched: () => void;
-    readonly markDirty: () => void;
-    readonly setFocused: (focused: boolean) => void;
-    readonly setFilled: (filled: boolean) => void;
-};
-export declare const fieldContext: {
-    __context__: FieldContext;
-};

package/field/field-context.js

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

package/link/index.d.ts

@@ -1,3 +0,0 @@
-import { DuiLink, spaNavigateEvent } from "./link.js";
-export { DuiLink, spaNavigateEvent };
-export declare const linkFamily: (typeof DuiLink)[];

package/link/index.js

@@ -1,3 +0,0 @@
-import { DuiLink, spaNavigateEvent } from "./link.js";
-export { DuiLink, spaNavigateEvent };
-export const linkFamily = [DuiLink];

package/link/link.d.ts

@@ -1,27 +0,0 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/link */
-import { LitElement, type TemplateResult } from "lit";
-export declare const spaNavigateEvent: (detail: {
-    href: string;
-}) => CustomEvent<{
-    href: string;
-}>;
-/**
- * `<dui-link>` — A layout-transparent SPA link.
- *
- * Renders a real `<a href>` inside shadow DOM for native link behaviors
- * (right-click menu, URL preview on hover, accessibility). On plain
- * left-click, dispatches a bubbling `spa-navigate` event instead of
- * performing a full page navigation. Modifier-clicks (cmd/ctrl/shift/middle)
- * fall through to the browser for new-tab behavior.
- *
- * @slot - Link content.
- * @fires spa-navigate - Fired on plain left-click. Detail: { href }.
- */
-export declare class DuiLink extends LitElement {
-    #private;
-    static tagName: "dui-link";
-    static styles: import("lit").CSSResult[];
-    /** The URL to navigate to. */
-    accessor href: string;
-    render(): TemplateResult;
-}

package/link/link.js

@@ -1,95 +0,0 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/link */
-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;
-};
-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 spaNavigateEvent = customEvent("spa-navigate", { bubbles: true, composed: true });
-/** Structural styles only — layout CSS. */
-const styles = css `
-  :host {
-    display: contents;
-  }
-
-  a {
-    display: contents;
-    color: inherit;
-    text-decoration: none;
-  }
-`;
-/**
- * `<dui-link>` — A layout-transparent SPA link.
- *
- * Renders a real `<a href>` inside shadow DOM for native link behaviors
- * (right-click menu, URL preview on hover, accessibility). On plain
- * left-click, dispatches a bubbling `spa-navigate` event instead of
- * performing a full page navigation. Modifier-clicks (cmd/ctrl/shift/middle)
- * fall through to the browser for new-tab behavior.
- *
- * @slot - Link content.
- * @fires spa-navigate - Fired on plain left-click. Detail: { href }.
- */
-let DuiLink = (() => {
-    let _classSuper = LitElement;
-    let _href_decorators;
-    let _href_initializers = [];
-    let _href_extraInitializers = [];
-    return class DuiLink extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _href_decorators = [property()];
-            __esDecorate(this, null, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        static tagName = "dui-link";
-        static styles = [base, styles];
-        #href_accessor_storage = __runInitializers(this, _href_initializers, "");
-        /** The URL to navigate to. */
-        get href() { return this.#href_accessor_storage; }
-        set href(value) { this.#href_accessor_storage = value; }
-        #onClick = (__runInitializers(this, _href_extraInitializers), (event) => {
-            if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) {
-                return;
-            }
-            event.preventDefault();
-            this.dispatchEvent(spaNavigateEvent({ href: this.href }));
-        });
-        render() {
-            return html `<a href="${this.href}" @click="${this.#onClick}"><slot></slot></a>`;
-        }
-    };
-})();
-export { DuiLink };