@threadlabs/looma 0.1.22 → 0.1.23

package/dist/collection/components/ui-context-menu/ui-context-menu.js

@@ -212,7 +212,7 @@ export class UIContextMenu {
         this.closeMenu('action', 'pointer');
     };
     render() {
-        return (h(Host, { key: '4db0d5b55ead41925aa682b1e383b5735b49bf56', "data-open": this.internalOpen ? '' : undefined, "data-focus-trigger": this.internalOpen ? this.focusTrigger : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: '462925d53db169c13e485789ae91e28b0abd3e40', name: "trigger" }), h("div", { key: 'cac8f3b11c4872d38e976f210ce9a43fd854b335', class: "menu", "data-open": this.internalOpen ? '' : undefined }, h("ui-menu", { key: 'ba50f74e11466da2240f7568479d5d10a614b394', open: this.internalOpen }, h("slot", { key: '1fcb45bf124e2377ac6c7fc236d2babf0d9e3bae' })))));
+        return (h(Host, { key: '641dd3aba6120cf4187f4503c64029eaf307dc4f', "data-open": this.internalOpen ? '' : undefined, "data-focus-trigger": this.internalOpen ? this.focusTrigger : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: '3f550349f9537b951b50a8c291f1951dd5a3b723', name: "trigger" }), h("div", { key: 'a612523f054986122638722340d8135c44a85399', class: "menu", "data-open": this.internalOpen ? '' : undefined }, h("ui-menu", { key: '0711879d09900183e938d8942abb8b9032812a5f', open: this.internalOpen }, h("slot", { key: '8e088dd20a48d8fb81126f2dd020abb886e86e22' })))));
     }
     static get is() { return "ui-context-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class UIDialog {
         }
     };
     render() {
-        return (h(Host, { key: 'c10f9063a1c2677caff3b8d1f26b37bf25978a77', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("dialog", { key: 'a7111bd363cab94f394cca526bf34ea8081e5228', ref: (el) => (this.dialogRef = el), open: this.internalOpen, "aria-label": this.label }, h("slot", { key: 'b0a9699fe0be09e331cfea81b6bbeaec11d48956' }))));
+        return (h(Host, { key: '6e88afd3a595ab0eed3d82a046ffb15e1e167cdb', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("dialog", { key: '420e4d8de66245a5818a1284adb23a536ebcd907', ref: (el) => (this.dialogRef = el), open: this.internalOpen, "aria-label": this.label }, h("slot", { key: '10604688504f013f79b7a6ed5f9ed36bc9c6b48b' }))));
     }
     static get is() { return "ui-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -85,7 +85,7 @@ export class UIDisclosure {
         this.setOpen(!this.internalOpen, { reason: 'action', trigger: 'keyboard' });
     };
     render() {
-        return (h(Host, { key: '7fbc83614f8e988a43d1baac0379a6dc8826b1d5' }, h("slot", { key: '6ef33ca7bce5c4d83ab65642f52a9d17febb794d' })));
+        return (h(Host, { key: '3905d2d78a2d3d4ef36b582ba0f426be8e5e0f5e' }, h("slot", { key: '18547ff56457b73319264bba981f994fb947dffb' })));
     }
     static get is() { return "ui-disclosure"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-floating-action-button/ui-floating-action-button.js

@@ -4,7 +4,7 @@ export class UIFloatingActionButton {
     mobileOnly = false;
     label = '';
     render() {
-        return (h(Host, { key: '6f67f3967cf8883005f6c56747db515db5ebe1d0', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: 'deebb9261221c144b30bc3e41790158fc339cd14', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '3b045b69a4508c84dd5b7c8b3df0e6f3eded1c13' }))));
+        return (h(Host, { key: 'c9a7d8c9b6d6608566b21621a73d939f372c830d', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: '8eddccaf6be2f028bc02df967038843120045b84', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '0ea12efb9cb8ecec06238066827a734fb3b01e1e' }))));
     }
     static get is() { return "ui-floating-action-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-form-field/ui-form-field.css

@@ -1,6 +1,8 @@
 :host {
   display: grid;
   gap: var(--ui-space-2);
+  min-inline-size: 0;
+  align-content: start;
   color: var(--ui-text-primary);
 }
 
@@ -10,8 +12,10 @@
 }
 
 ::slotted([data-slot='help']) {
+  min-block-size: var(--ui-form-field-help-min-block-size, 0);
   color: var(--ui-text-muted);
   font-size: 0.875rem;
+  line-height: var(--ui-line-height-md);
 }
 
 ::slotted([data-slot='error']),

package/dist/collection/components/ui-form-field/ui-form-field.js

@@ -43,7 +43,7 @@ export class UIFormField {
         input.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
     }
     render() {
-        return (h(Host, { key: 'c0a01ac28a7dd0e0b285e4b9f9763ef536a83a2e', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, h("slot", { key: 'b09be4482299d866a0651393e269299dedb0cbf4' })));
+        return (h(Host, { key: 'cdd06c6b16ac56f3547e64e7888d8766243392db', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, h("slot", { key: '7d545673a3485f8beee01b13ab56185b98ba8856' })));
     }
     static get is() { return "ui-form-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-icon-button/ui-icon-button.js

@@ -7,7 +7,7 @@ export class UIIconButton {
     /** Reveals this control through a surrounding ui-affordance-scope. */
     anticipatory = false;
     render() {
-        return (h(Host, { key: 'dd6149d96d534a641eedaf808df5348eef48f31f', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, h("button", { key: '3e1b83a3e01b724cb75ddb7243a1e85bd9eb3420', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: 'd280293841471ad37f556c73d86de3223e1f98e6' }))));
+        return (h(Host, { key: '8616d7e52a03a7a42738b11f4cabed3eb38c8640', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, h("button", { key: 'fae1362a50a0d80e2fcb3ab41f63ff21cf5d939a', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: 'e548fc504e3b26e85263fe3fc8faac0887fee16b' }))));
     }
     static get is() { return "ui-icon-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,14 +1,16 @@
 :host {
   display: inline-flex;
+  min-inline-size: 0;
   color: var(--ui-text-primary);
 }
 
 ::slotted(input) {
   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: var(--ui-surface-default);
+  background: var(--ui-control-surface, var(--ui-surface-default));
   color: inherit;
   font: inherit;
   line-height: var(--ui-line-height-md);
@@ -21,12 +23,12 @@
 }
 
 ::slotted(input:hover:not(:focus):not(:disabled)) {
-  border-color: var(--ui-border-strong);
+  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
 }
 
 ::slotted(input: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(input),
@@ -35,7 +37,7 @@
 }
 
 ::slotted(input: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-input/ui-input.js

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 import { eventToTrigger, dispatchDetail } from "../../utils/events";
 export class UIInput {
     host;
-    value = '';
+    value;
     defaultValue = '';
     disabled = false;
     invalid = false;
@@ -10,14 +10,19 @@ export class UIInput {
     internalValue = '';
     slotRef;
     syncFromProp() {
-        this.internalValue = this.value;
+        if (this.value !== undefined)
+            this.internalValue = this.value;
     }
     syncToInput() {
         const input = this.getInput();
         if (!input)
             return;
         this.host.dataset.invalid = this.invalid ? 'true' : '';
-        input.value = this.internalValue;
+        // When the host has no value prop, the slotted native control is
+        // intentionally uncontrolled. Frameworks such as Vue can then own its
+        // value without Looma resetting it during hydration or unrelated updates.
+        if (this.value !== undefined)
+            input.value = this.internalValue;
         input.defaultValue = this.defaultValue;
         input.disabled = this.disabled;
         input.readOnly = this.readOnly;
@@ -65,7 +70,7 @@ export class UIInput {
         });
     };
     render() {
-        return (h(Host, { key: '2b3b4f6862cf5c5e413aaefb349c53d4e66eb6d0', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '140dc656f13399b8ef05adb6cfa1d9a7e1373c2d', ref: (el) => (this.slotRef = el) })));
+        return (h(Host, { key: 'a2f2c108144a7acae0dfb1bef6ea1f38a4dcca9c', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '04284765a12089a8a1045056d72551a3494f00fc', ref: (el) => (this.slotRef = el) })));
     }
     static get is() { return "ui-input"; }
     static get encapsulation() { return "shadow"; }
@@ -90,7 +95,7 @@ export class UIInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -98,8 +103,7 @@ export class UIInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
-                "defaultValue": "''"
+                "attribute": "value"
             },
             "defaultValue": {
                 "type": "string",

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

@@ -148,7 +148,7 @@ export class UIMenu {
         }
     };
     render() {
-        return (h(Host, { key: '06ad0750df843cb874bd4f257d8567157c855493', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: '50118ac749a2747ca06f4d483499c4cd20125a89' })));
+        return (h(Host, { key: '25ae79e914820dfc470fa03d8c843646c3c060d9', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: 'b3a8b130e55610d948bc3e4603dede59dd560d05' })));
     }
     static get is() { return "ui-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-menu-item/ui-menu-item.js

@@ -3,7 +3,7 @@ export class UIMenuItem {
     disabled = false;
     value = '';
     render() {
-        return (h(Host, { key: 'c0024d4bb84224019121b98a6fec36bfdad00864', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, h("slot", { key: '00eee7c496dfaf71e8ec158606ebc6641e2ef0d8' })));
+        return (h(Host, { key: 'ebd7c5aa5c8fdce2d2349aef7f1a4505b9190852', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, h("slot", { key: '7b55a8545034b055f8cbd047a0f16ea729af097e' })));
     }
     static get is() { return "ui-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -102,7 +102,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: 'cd957cb9fd5d1c05da7729a16d4cb229bc1deffa', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: 'd14960a1471948120f7173e18adae8d86e4fabb7' })));
     }
     static get is() { return "ui-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@ export class UIRadio {
         const input = this.getInput();
         if (!input)
             return;
-        this.host.dataset.disabled = this.disabled ? 'true' : '';
+        this.host.toggleAttribute('data-disabled', this.disabled);
         input.checked = this.checked;
         input.disabled = this.disabled;
         input.name = this.name;
@@ -53,7 +53,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: '898869b84429366e43c075723e884f34da6fc6df', role: "radio", "aria-checked": String(this.checked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: '3f3b881175f25d439807ec9f8f0dd59a1acd6a90', ref: (el) => (this.slotRef = el) })));
     }
     static get is() { return "ui-radio"; }
     static get encapsulation() { return "shadow"; }

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: 'e80e01600d499d1b8e3410060433dac2bb8cf38a', role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: 'e60dcfa1b174b1a4c9092567e6ec4d9f5bcd9ffe' })));
     }
     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: '8ef897782b50f1ecb129a51a25631d3d2bafe1e3' }, h("button", { key: '5b4fb4ac4968551a191e80bde7b991391d931220', class: "search-result-row", type: "button", disabled: this.disabled, part: "button" }, h("span", { key: '5f5988d87bcf754d8a521e19e0e2a490dd868bd2', class: "search-result-row__leading", part: "leading", hidden: !this.hasLeading }, h("slot", { key: 'a7671c75c28d71ab843dcbb1fcdd9f4d0e0f7361', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("span", { key: '4ed60057e10ade9d7771812ad28aa25a017d34d8', class: "search-result-row__content", part: "content" }, h("span", { key: '37fa74ef4980ffd0b576ff824532d1267420461c', class: "search-result-row__title", part: "title" }, h("slot", { key: '187df950b39702723fa456b09e220e2b7587f00a', name: "title" })), h("span", { key: '6d2476c57d7c9c7530c3796a723f47f5f4859d71', class: "search-result-row__meta", part: "meta", hidden: !this.hasMeta }, h("slot", { key: 'd53329dd6865bbda005b0d25a2b9bc7b7a597452', name: "meta", ref: (el) => (this.metaSlot = el), onSlotchange: this.syncSlots })), h("span", { key: '8846c9669c0f65a739b770f41a93ddd4bef3f6bd', class: "search-result-row__excerpt", part: "excerpt", hidden: !this.hasExcerpt }, h("slot", { key: 'b63f70371538901aaff481a9e524bf817883cee6', name: "excerpt", ref: (el) => (this.excerptSlot = el), onSlotchange: this.syncSlots }))), h("span", { key: '1e8f94c3d83c3f649595c2843522b0973590a8d5', class: "search-result-row__trailing", part: "trailing", hidden: !this.hasTrailing }, h("slot", { key: 'cfba9301ad97c1130a01f78c16052fc26e249f4b', 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: '2a09e1ee81d04c0af5420887a9fa0dfb8057040c', class: "search-shell", part: "base" }, h("slot", { key: '9124af2e3e73b686a73b11c7fe8c9d40986e98c1', name: "backdrop" }), h("div", { key: 'cec39a8cbbfe99b7bbeb37ce32655a88cee2bec3', class: "search-shell__panel", part: "panel" }, h("div", { key: '8168eda720e031daf350800ac48dcf445be0c417', class: "search-shell__search", part: "search" }, h("slot", { key: 'b220c9670a6a53cd93fa434dc97dc9d2582bec08', name: "search" })), h("div", { key: '24386da67dd8ab5e865519e5b0b70fe9c8924010', class: "search-shell__status", part: "status", hidden: !this.hasStatus }, h("slot", { key: '7a0dfada13aca3275961667dadc9623729fbf644', name: "status", ref: (el) => (this.statusSlot = el), onSlotchange: this.syncSlots })), h("div", { key: 'e06b7da6219c7a71d69662c5bdcc24e6baa52aa9', class: "search-shell__body", part: "body" }, h("slot", { key: 'fabdea16cf443b57a826fc748b24342ff214b918', name: "body" })), h("div", { key: 'd38662a77f19fd59315b1882cda0a55680cc5a0b', class: "search-shell__footer", part: "footer", hidden: !this.hasFooter }, h("slot", { key: '56eb386e22ae033939cdbdf3c6b6edf68594ceb5', 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: '5ac54353f467b70e94fce0ae661dc86c305befe7', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '1386f3e4912720ab597f4567112e9c8b4166bcc6', 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

@@ -37,14 +37,14 @@ 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) => {
+        return (h(Host, { key: '14205d2856f8fb49b72d69d40f10ac1473a80c04', 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: '974f8e487c8bf9196c05420e1817139dd6b4138c', 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;
                 dispatchDetail(this.host, 'change', {
                     checked: this.internalChecked,
                     value: this.value,
                     trigger: 'pointer',
                 });
-            } }), h("slot", { key: 'f3c2f5758e73f2a81f4a7ea4da734de0cb9a61c6' })));
+            } }), h("slot", { key: 'd1cd89aa2d5312cff8845364cdee64821977cb44' })));
     }
     static get is() { return "ui-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,7 +91,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: 'ca8671f06914de2bd6b412caf11e385d67ae722b', orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: '49beb3783c8f6a330d25164c82933c2bf6345b1e' })));
     }
     static get is() { return "ui-tabs"; }
     static get encapsulation() { return "shadow"; }

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: '9ccc0464bca55b3364645ea90df3890f9ed9d697', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '81c4df31064d4dcd2b2e27dfcf3141cc9f18f54e', 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",

package/dist/collection/components/ui-toast-region/ui-toast-region.js

@@ -59,7 +59,7 @@ export class UIToastRegion {
         }
     };
     render() {
-        return (h(Host, { key: '693e24016ec0881a4d619a489f1b655feee41784', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: 'e666b2a73a5d7eb8dd607df3d1c5135b78cf3775' })));
+        return (h(Host, { key: '9ec1cc51ecc4e7a256be5d89a09a10788e46db53', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: '7b08656f3745a02f8e9f0935e47d6f2cffd88f9b' })));
     }
     static get is() { return "ui-toast-region"; }
     static get encapsulation() { return "shadow"; }