@threadlabs/looma 0.1.22 → 0.1.24

package/dist/collection/components/ui-popover/ui-popover.css

@@ -1,16 +1,25 @@
 :host {
   --ui-popover-viewport-gap: var(--ui-space-2, 0.5rem);
-  padding: var(--ui-space-3);
-  background: var(--ui-surface-elevated);
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-3);
-  box-shadow: var(--ui-shadow-lg);
+  box-sizing: border-box;
   max-inline-size: min(
     20rem,
     calc(100vw - (var(--ui-popover-viewport-gap) * 2))
   );
   max-block-size: calc(100dvh - (var(--ui-popover-viewport-gap) * 2));
   overflow: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: var(--ui-shadow-lg);
+}
+
+.popover__surface {
+  box-sizing: border-box;
+  padding: var(--ui-space-3);
+  background: var(--ui-surface-elevated);
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-3);
 }
 
 :host(:not([data-open])) {

package/dist/collection/components/ui-popover/ui-popover.js

@@ -1,10 +1,12 @@
 import { Host, h } from "@stencil/core";
 import { openOverlay, closeOverlay, requestTopOverlayClose } from "../../overlay/manager";
 import { dispatchDetail } from "../../utils/events";
+import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
 import { createAnchoredSurface, } from "../../overlay/positioning";
 export class UIPopover {
     host;
-    open = false;
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
     defaultOpen = false;
     /** Optional id of the element this popover follows in the top layer. */
     for;
@@ -14,7 +16,8 @@ export class UIPopover {
     anchor = null;
     surface = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        if (isControlled(this.open))
+            this.internalOpen = this.open;
     }
     onOpenChange() {
         this.syncOverlay();
@@ -73,8 +76,7 @@ export class UIPopover {
         }
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
         this.host.addEventListener('keydown', this.onKeydown);
         this.setupSurface();
         this.syncOverlay();
@@ -89,7 +91,8 @@ export class UIPopover {
         this.syncOverlay();
     }
     handleRequestClose(reason, trigger) {
-        this.internalOpen = false;
+        if (!isControlled(this.open))
+            this.internalOpen = false;
         dispatchDetail(this.host, 'close', {
             open: false,
             reason: reason,
@@ -102,7 +105,7 @@ export class UIPopover {
         }
     };
     render() {
-        return (h(Host, { key: '8e45be54147ff8f76a0d5e7fd875c3f4cf5ac40a', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: '3141729cd32c8dcdaec1fbd763eb034242563c8f' })));
+        return (h(Host, { key: '6a38873f2e4d085f733fa116057b1f55418e23ed', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("div", { key: '6fef6e37921e8c52994617719f1ebb6d9bd54ee2', class: "popover__surface" }, h("slot", { key: '5ee4269592219035a3185f8f06fd71ecb12e4e71' }))));
     }
     static get is() { return "ui-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -127,16 +130,15 @@ export class UIPopover {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controlled open state. Omit it to use defaultOpen and local interaction state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "open",
-                "defaultValue": "false"
+                "attribute": "open"
             },
             "defaultOpen": {
                 "type": "boolean",

package/dist/collection/components/ui-radio/ui-radio.js

@@ -1,30 +1,35 @@
 import { Host, h } from "@stencil/core";
 import { eventToTrigger } from "../../utils/events";
 import { dispatchDetail } from "../../utils/events";
+import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
 export class UIRadio {
     host;
-    checked = false;
+    /** Controlled checked state. Omit it to use defaultChecked and local interaction state. */
+    checked;
     defaultChecked = false;
     disabled = false;
     name = '';
     required = false;
     value = 'on';
+    internalChecked = false;
     slotRef;
+    syncFromProp() {
+        if (isControlled(this.checked))
+            this.internalChecked = this.checked;
+    }
     syncToInput() {
         const input = this.getInput();
         if (!input)
             return;
-        this.host.dataset.disabled = this.disabled ? 'true' : '';
-        input.checked = this.checked;
+        this.host.toggleAttribute('data-disabled', this.disabled);
+        input.checked = this.internalChecked;
         input.disabled = this.disabled;
         input.name = this.name;
         input.required = this.required;
         input.value = this.value;
     }
     componentDidLoad() {
-        if (!this.checked && this.defaultChecked) {
-            this.checked = true;
-        }
+        this.internalChecked = controlledOrDefault(this.checked, this.defaultChecked);
         this.slotRef?.addEventListener('slotchange', () => this.syncToInput());
         this.syncToInput();
         const input = this.getInput();
@@ -46,6 +51,10 @@ export class UIRadio {
         const input = e.target;
         if (!input || !input.checked)
             return;
+        if (!isControlled(this.checked))
+            this.internalChecked = true;
+        else
+            this.syncToInput();
         dispatchDetail(this.host, 'change', {
             checked: true,
             value: this.value,
@@ -53,7 +62,7 @@ export class UIRadio {
         });
     };
     render() {
-        return (h(Host, { key: 'e3025fa3ee89c684ab27e7780f11399e1e455eff', role: "radio", "aria-checked": String(this.checked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: '279fd849b1ea8f2f84e34043a01da710008aba51', ref: (el) => (this.slotRef = el) })));
+        return (h(Host, { key: 'a5220e72dbf1b55ca73a3e6234f31c99d806433a', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: '687e94b2036107c807e0319c3620bca7c06cbb26', ref: (el) => (this.slotRef = el) })));
     }
     static get is() { return "ui-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -78,16 +87,15 @@ export class UIRadio {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controlled checked state. Omit it to use defaultChecked and local interaction state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "checked",
-                "defaultValue": "false"
+                "attribute": "checked"
             },
             "defaultChecked": {
                 "type": "boolean",
@@ -191,11 +199,16 @@ export class UIRadio {
             }
         };
     }
+    static get states() {
+        return {
+            "internalChecked": {}
+        };
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "checked",
-                "methodName": "syncToInput"
+                "methodName": "syncFromProp"
             }, {
                 "propName": "disabled",
                 "methodName": "syncToInput"

package/dist/collection/components/ui-radio-group/ui-radio-group.js

@@ -102,7 +102,7 @@ export class UIRadioGroup {
         }
     };
     render() {
-        return (h(Host, { key: '5410f4adb5d4ca888287150f57de38ab59cc791d', role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: 'd3988acaf5456e89f26d449ccaadaf237c223bbd' })));
+        return (h(Host, { key: '28c6eb6cc9520b570f40d2193d0c64a7a6c7db01', role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: '97814378181be78bfac6090ff173459e1f539728' })));
     }
     static get is() { return "ui-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-search-result-row/ui-search-result-row.js

@@ -31,7 +31,7 @@ export class UISearchResultRow {
         this.hasTrailing = slotHasContent(this.trailingSlot);
     };
     render() {
-        return (h(Host, { key: '4fb3b963d73890850b58d03f225f125066412350' }, h("button", { key: '55332d2d06d279e5c6d39d044cfb89256cffdf69', class: "search-result-row", type: "button", disabled: this.disabled, part: "button" }, h("span", { key: '1c9178595fb6f54ffc4e55b3a7cb5fe7dea94b40', class: "search-result-row__leading", part: "leading", hidden: !this.hasLeading }, h("slot", { key: '239d0a74e80e58f1b25d6b328293d9692a4483b6', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("span", { key: 'f80e39d4002bfa1ae7665857e27d184004654c03', class: "search-result-row__content", part: "content" }, h("span", { key: 'b1a1e7f378eee6db5a01949d8a299583556c79c1', class: "search-result-row__title", part: "title" }, h("slot", { key: '4d94ed22c472309e0ece5f7a2a744f400589c87e', name: "title" })), h("span", { key: '3dbc540f67e11cca515208597b7b6bb75e2772f5', class: "search-result-row__meta", part: "meta", hidden: !this.hasMeta }, h("slot", { key: '3ed5c8fd300a19801ac332d2e9516aadb19f664e', name: "meta", ref: (el) => (this.metaSlot = el), onSlotchange: this.syncSlots })), h("span", { key: '8403a7e6adc3b1fae04d659bfbf7ff5676ac113a', class: "search-result-row__excerpt", part: "excerpt", hidden: !this.hasExcerpt }, h("slot", { key: 'f0b0b07df739f780320394dae9b318f6676e9a94', name: "excerpt", ref: (el) => (this.excerptSlot = el), onSlotchange: this.syncSlots }))), h("span", { key: '2ebdf8d2ed7fefd31118052495503659c957d317', class: "search-result-row__trailing", part: "trailing", hidden: !this.hasTrailing }, h("slot", { key: '60dfc20a47fff6aac28755bedb80e9a4b3fd93e0', name: "trailing", ref: (el) => (this.trailingSlot = el), onSlotchange: this.syncSlots })))));
+        return (h(Host, { key: '01e795d1c723c4e56f5648c429b40fc7841ff9b5' }, h("button", { key: '7bdde5075c5a3112d14741aa87937e69a8f5fea9', class: "search-result-row", type: "button", disabled: this.disabled, part: "button" }, h("span", { key: '39ba47af68a23875eebdbdf8f87ca7d94d42ec43', class: "search-result-row__leading", part: "leading", hidden: !this.hasLeading }, h("slot", { key: 'f108b1c5d284057d5979bf4897f056543a1ff092', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("span", { key: '0daeb171b7010f37d959c91f2a87c1ae7e96a56f', class: "search-result-row__content", part: "content" }, h("span", { key: 'd7ec1b67a15fa9c79ea0fd23db73bd7bca40a8ce', class: "search-result-row__title", part: "title" }, h("slot", { key: '8c4a45511580a655e0593c8c57fd98838f2cb896', name: "title" })), h("span", { key: '0d30a58a7079ea0c8992c9b0b02b516a65350425', class: "search-result-row__meta", part: "meta", hidden: !this.hasMeta }, h("slot", { key: '8de66e3b6adf89ed765ccc1c341ccac1b5513a6f', name: "meta", ref: (el) => (this.metaSlot = el), onSlotchange: this.syncSlots })), h("span", { key: '7c24542b9bb634a55530952c329242a351e813c3', class: "search-result-row__excerpt", part: "excerpt", hidden: !this.hasExcerpt }, h("slot", { key: 'a5bfc4fd17b8535aa996e792498b33f25dd30ecd', name: "excerpt", ref: (el) => (this.excerptSlot = el), onSlotchange: this.syncSlots }))), h("span", { key: '25c74d8508a0b3b527ef5529a02e54e407cae5ae', class: "search-result-row__trailing", part: "trailing", hidden: !this.hasTrailing }, h("slot", { key: 'cba6f957de902b9ed3dc05c8b20794c9b69c85c6', name: "trailing", ref: (el) => (this.trailingSlot = el), onSlotchange: this.syncSlots })))));
     }
     static get is() { return "ui-search-result-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-search-shell/ui-search-shell.js

@@ -23,7 +23,7 @@ export class UISearchShell {
         this.hasFooter = slotHasContent(this.footerSlot);
     };
     render() {
-        return (h("div", { key: '946e3575a3b48f83315a5299d144a10647c31189', class: "search-shell", part: "base" }, h("slot", { key: '6146d441648a9cafca12b764e94373252b3940be', name: "backdrop" }), h("div", { key: 'e4389c8f39994209e1f8dc4dbf913e3728295545', class: "search-shell__panel", part: "panel" }, h("div", { key: '8c660767d3ac12e1d94086bb80bb459e2f45d173', class: "search-shell__search", part: "search" }, h("slot", { key: 'c870a4266f689654c76a1fc9e2bc23bf690a931c', name: "search" })), h("div", { key: 'b5a68d509a92fec24603008514e938ba27655f4d', class: "search-shell__status", part: "status", hidden: !this.hasStatus }, h("slot", { key: 'bc3233c23289cb56ca8d4217c9b3c37df9570abc', name: "status", ref: (el) => (this.statusSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '291b357ed1c7949001952813c950fbaab24cd0fc', class: "search-shell__body", part: "body" }, h("slot", { key: '72ecf55e7267cef21e612c1aff840fef67442fb5', name: "body" })), h("div", { key: 'e393d0cc4bd0bbbf349a135d9f352ec08bd523cb', class: "search-shell__footer", part: "footer", hidden: !this.hasFooter }, h("slot", { key: '2468bdafc67f01094a4461a1a1e2fd474a88ffcf', name: "footer", ref: (el) => (this.footerSlot = el), onSlotchange: this.syncSlots })))));
+        return (h("div", { key: 'c3a4366e1f22b249233e42fdc83f1620613cce52', class: "search-shell", part: "base" }, h("slot", { key: '4f22e4a44fe7ae190a80a6e5cd695c15eb4f029d', name: "backdrop" }), h("div", { key: 'bf452dae29f0ab31266d848a4dd4b794997b34a7', class: "search-shell__panel", part: "panel" }, h("div", { key: 'c0ef7d1d8ea95853404d39ddac1bff566d38d18e', class: "search-shell__search", part: "search" }, h("slot", { key: '462532250d8ba36aad1d31fe10da642d79e59faf', name: "search" })), h("div", { key: '4f7d91272d15f6e37df6fba4ae563efae5701b93', class: "search-shell__status", part: "status", hidden: !this.hasStatus }, h("slot", { key: 'd761691c1dd2c3012075163bb7eb9ce7e5bf3ef4', name: "status", ref: (el) => (this.statusSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '1427a10b3f43ea31c2a482beb17f78d70b5fb2cf', class: "search-shell__body", part: "body" }, h("slot", { key: '6d6e8c2b4ee4833b5476795d4c7e184dda07f81e', name: "body" })), h("div", { key: '8f7d36040f7d21489c703b53581e392a2616963b', class: "search-shell__footer", part: "footer", hidden: !this.hasFooter }, h("slot", { key: '08b84f01091d95895ee8693e9b322511bf614342', name: "footer", ref: (el) => (this.footerSlot = el), onSlotchange: this.syncSlots })))));
     }
     static get is() { return "ui-search-shell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-select/ui-select.css

@@ -1,14 +1,16 @@
 :host {
   display: inline-flex;
+  min-inline-size: 0;
   color: var(--ui-text-primary);
 }
 
 ::slotted(select) {
   width: 100%;
   appearance: none;
-  border: 1px solid var(--ui-border-default);
+  min-block-size: var(--ui-control-min-block-size, 2.75rem);
+  border: 1px solid var(--ui-control-border, var(--ui-border-default));
   border-radius: var(--ui-radius-2);
-  background-color: var(--ui-surface-default);
+  background-color: var(--ui-control-surface, var(--ui-surface-default));
   color: inherit;
   font: inherit;
   line-height: var(--ui-line-height-md);
@@ -31,12 +33,12 @@
 }
 
 ::slotted(select:hover:not(:focus):not(:disabled)) {
-  border-color: var(--ui-border-strong);
+  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
 }
 
 ::slotted(select:focus) {
-  border-color: var(--ui-focus-ring);
-  box-shadow: 0 0 0 3px var(--ui-accent-soft);
+  border-color: var(--ui-control-focus, var(--ui-focus-ring));
+  box-shadow: 0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft));
 }
 
 :host([data-invalid='true'])::slotted(select),
@@ -45,7 +47,7 @@
 }
 
 ::slotted(select:disabled) {
-  background-color: var(--ui-surface-muted);
+  background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }

package/dist/collection/components/ui-select/ui-select.js

@@ -2,22 +2,30 @@ import { Host, h } from "@stencil/core";
 import { dispatchDetail, eventToTrigger } from "../../utils/events";
 export class UISelect {
     host;
-    value = '';
-    defaultValue = '';
+    value;
+    defaultValue;
     disabled = false;
     invalid = false;
     required = false;
     internalValue = '';
     slotRef;
+    initialized = false;
     syncFromProp() {
-        this.internalValue = this.value;
+        if (this.value !== undefined)
+            this.internalValue = this.value;
     }
     syncToSelect() {
         const select = this.getSelect();
         if (!select)
             return;
         this.host.dataset.invalid = this.invalid ? 'true' : '';
-        select.value = this.internalValue || this.defaultValue;
+        // A native select automatically selects its first option. Apply the host
+        // default once regardless, then leave subsequent native/framework edits alone.
+        if (this.value !== undefined)
+            select.value = this.internalValue;
+        else if (!this.initialized && this.defaultValue !== undefined)
+            select.value = this.defaultValue;
+        this.initialized = true;
         select.disabled = this.disabled;
         select.required = this.required;
         select.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
@@ -64,7 +72,7 @@ export class UISelect {
         });
     };
     render() {
-        return (h(Host, { key: '65420b700d6a80e3575efa25d72ccbf4b0398805', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'fa6b175770fcbf9ec904a528f0d41aa04f4e9c01', ref: (el) => (this.slotRef = el) })));
+        return (h(Host, { key: '9a83a040bbad98355999c8099a78c6eba3ffc995', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '4a70aa44651132899e283e45c32213cf3f00be24', ref: (el) => (this.slotRef = el) })));
     }
     static get is() { return "ui-select"; }
     static get encapsulation() { return "shadow"; }
@@ -89,7 +97,7 @@ export class UISelect {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -97,8 +105,7 @@ export class UISelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
-                "defaultValue": "''"
+                "attribute": "value"
             },
             "defaultValue": {
                 "type": "string",
@@ -109,7 +116,7 @@ export class UISelect {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -117,8 +124,7 @@ export class UISelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "default-value",
-                "defaultValue": "''"
+                "attribute": "default-value"
             },
             "disabled": {
                 "type": "boolean",

package/dist/collection/components/ui-switch/ui-switch.js

@@ -1,26 +1,30 @@
 import { Host, h } from "@stencil/core";
 import { dispatchDetail } from "../../utils/events";
+import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
 export class UISwitch {
     host;
-    checked = false;
+    /** Controlled checked state. Omit it to use defaultChecked and local interaction state. */
+    checked;
     defaultChecked = false;
     disabled = false;
     required = false;
     value = 'on';
     internalChecked = false;
     syncFromProp() {
-        this.internalChecked = this.checked;
+        if (isControlled(this.checked))
+            this.internalChecked = this.checked;
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalChecked = this.internalChecked || this.defaultChecked;
+        this.internalChecked = controlledOrDefault(this.checked, this.defaultChecked);
     }
     toggle = (trigger) => {
         if (this.disabled)
             return;
-        this.internalChecked = !this.internalChecked;
+        const checked = !this.internalChecked;
+        if (!isControlled(this.checked))
+            this.internalChecked = checked;
         dispatchDetail(this.host, 'change', {
-            checked: this.internalChecked,
+            checked,
             value: this.value,
             trigger,
         });
@@ -37,14 +41,19 @@ export class UISwitch {
         this.toggle('pointer');
     };
     render() {
-        return (h(Host, { key: '7dccbc5d5b97f5659decd5feda31b37e42e6f83e', role: "switch", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.onKeydown, onClick: this.onClick }, h("input", { key: '7841f4d20a50d1899c27ab232a9a34411a0c2d67', type: "checkbox", checked: this.internalChecked, disabled: this.disabled, required: this.required, value: this.value, "aria-hidden": "true", tabIndex: -1, onChange: (e) => {
-                this.internalChecked = e.target.checked;
+        return (h(Host, { key: 'e11500e37da6a52c0cb4e143254363f85911aac1', role: "switch", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.onKeydown, onClick: this.onClick }, h("input", { key: '777310a90b66f67e6a8eb0f77da5274e32f10db0', type: "checkbox", checked: this.internalChecked, disabled: this.disabled, required: this.required, value: this.value, "aria-hidden": "true", tabIndex: -1, onChange: (e) => {
+                const input = e.target;
+                const checked = input.checked;
+                if (!isControlled(this.checked))
+                    this.internalChecked = checked;
                 dispatchDetail(this.host, 'change', {
-                    checked: this.internalChecked,
+                    checked,
                     value: this.value,
                     trigger: 'pointer',
                 });
-            } }), h("slot", { key: 'f3c2f5758e73f2a81f4a7ea4da734de0cb9a61c6' })));
+                if (isControlled(this.checked))
+                    input.checked = this.internalChecked;
+            } }), h("slot", { key: '7d72db5b720c0af0c4561b485ca558de61e1ce6e' })));
     }
     static get is() { return "ui-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -69,16 +78,15 @@ export class UISwitch {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controlled checked state. Omit it to use defaultChecked and local interaction state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "checked",
-                "defaultValue": "false"
+                "attribute": "checked"
             },
             "defaultChecked": {
                 "type": "boolean",

package/dist/collection/components/ui-tabs/ui-tabs.js

@@ -1,14 +1,17 @@
 import { Host, h } from "@stencil/core";
 import { eventToTrigger } from "../../utils/events";
 import { dispatchDetail } from "../../utils/events";
+import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
 export class UITabs {
     host;
-    value = '';
+    /** Controlled selected tab value. Omit it to use defaultValue and local interaction state. */
+    value;
     defaultValue = '';
     orientation = 'horizontal';
     internalValue = '';
     syncFromProp() {
-        this.internalValue = this.value;
+        if (isControlled(this.value))
+            this.internalValue = this.value;
     }
     syncState() {
         const tabs = this.getTabs();
@@ -29,11 +32,8 @@ export class UITabs {
         });
     }
     componentDidLoad() {
-        this.syncFromProp();
-        if (!this.internalValue && this.defaultValue) {
-            this.internalValue = this.defaultValue;
-        }
-        if (!this.internalValue) {
+        this.internalValue = controlledOrDefault(this.value, this.defaultValue);
+        if (!isControlled(this.value) && !this.internalValue) {
             const tabs = this.getTabs();
             if (tabs.length > 0) {
                 this.internalValue = tabs[0]?.id ?? tabs[0]?.getAttribute('aria-controls') ?? '';
@@ -58,7 +58,8 @@ export class UITabs {
         if (!newValue)
             return;
         const prev = this.internalValue;
-        this.internalValue = newValue;
+        if (!isControlled(this.value))
+            this.internalValue = newValue;
         this.syncState();
         dispatchDetail(this.host, 'select', { value: newValue, previousValue: prev || undefined, trigger });
     }
@@ -91,7 +92,7 @@ export class UITabs {
         }
     };
     render() {
-        return (h(Host, { key: '99cd907204f73b1cbb1c8f2a182743c6554d5b0a', orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: 'a8158e593a3708e8819761d86356a58535a53e40' })));
+        return (h(Host, { key: '8681e699c6afdbafd59ed986b8bf3c815b32cd1c', orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: '673f4db2ae0aded3bd40934c1fff518cf6f83837' })));
     }
     static get is() { return "ui-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -116,16 +117,15 @@ export class UITabs {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controlled selected tab value. Omit it to use defaultValue and local interaction state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
-                "defaultValue": "''"
+                "attribute": "value"
             },
             "defaultValue": {
                 "type": "string",

package/dist/collection/components/ui-textarea/ui-textarea.css

@@ -1,14 +1,15 @@
 :host {
   display: inline-flex;
+  min-inline-size: 0;
   color: var(--ui-text-primary);
 }
 
 ::slotted(textarea) {
   width: 100%;
   appearance: none;
-  border: 1px solid var(--ui-border-default);
+  border: 1px solid var(--ui-control-border, var(--ui-border-default));
   border-radius: var(--ui-radius-2);
-  background: var(--ui-surface-default);
+  background: var(--ui-control-surface, var(--ui-surface-default));
   color: inherit;
   font: inherit;
   line-height: var(--ui-line-height-md);
@@ -23,12 +24,12 @@
 }
 
 ::slotted(textarea:hover:not(:focus):not(:disabled)) {
-  border-color: var(--ui-border-strong);
+  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
 }
 
 ::slotted(textarea:focus) {
-  border-color: var(--ui-focus-ring);
-  box-shadow: 0 0 0 3px var(--ui-accent-soft);
+  border-color: var(--ui-control-focus, var(--ui-focus-ring));
+  box-shadow: 0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft));
 }
 
 :host([data-invalid='true'])::slotted(textarea),
@@ -37,7 +38,7 @@
 }
 
 ::slotted(textarea:disabled) {
-  background: var(--ui-surface-muted);
+  background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }

package/dist/collection/components/ui-textarea/ui-textarea.js

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 import { dispatchDetail, eventToTrigger } from "../../utils/events";
 export class UITextarea {
     host;
-    value = '';
+    value;
     defaultValue = '';
     disabled = false;
     invalid = false;
@@ -11,14 +11,18 @@ export class UITextarea {
     internalValue = '';
     slotRef;
     syncFromProp() {
-        this.internalValue = this.value;
+        if (this.value !== undefined)
+            this.internalValue = this.value;
     }
     syncToTextarea() {
         const textarea = this.getTextarea();
         if (!textarea)
             return;
         this.host.dataset.invalid = this.invalid ? 'true' : '';
-        textarea.value = this.internalValue;
+        // An omitted host value leaves the slotted textarea under framework or
+        // native-form control instead of resetting it during component updates.
+        if (this.value !== undefined)
+            textarea.value = this.internalValue;
         textarea.defaultValue = this.defaultValue;
         textarea.disabled = this.disabled;
         textarea.readOnly = this.readOnly;
@@ -67,7 +71,7 @@ export class UITextarea {
         });
     };
     render() {
-        return (h(Host, { key: '697c98bf66c016b21b28c7805eee2223bb9d275a', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'bd95bd79b1fe4e4103510a3cb036419c55976611', ref: (el) => (this.slotRef = el) })));
+        return (h(Host, { key: '6ce80349ca316f7a44d08e83862125f6b4d736a6', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '2c1ce87c9019d8346673ae5e7dd8a543d1bcb91c', ref: (el) => (this.slotRef = el) })));
     }
     static get is() { return "ui-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -92,7 +96,7 @@ export class UITextarea {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -100,8 +104,7 @@ export class UITextarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
-                "defaultValue": "''"
+                "attribute": "value"
             },
             "defaultValue": {
                 "type": "string",