@threadlabs/looma 0.1.22 → 0.1.24

package/dist/{ui-dialog.entry-I2XI3ZTZ.js → ui-dialog.entry-QSYWYHLY.js}

@@ -2,7 +2,11 @@ import {
   closeOverlay,
   openOverlay,
   requestTopOverlayClose
-} from "./chunk-SZJQ3NPX.js";
+} from "./chunk-TL4FIE7X.js";
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
 import {
   dispatchDetail
 } from "./chunk-UL7UIUJZ.js";
@@ -11,7 +15,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-dialog.entry.js
 var uiDialogCss = () => `:host{display:block}:host:not([data-open]){display:none}:host dialog{--ui-dialog-duration:var(--ui-motion-base);--ui-dialog-viewport-gap:var(--ui-space-4, 1rem);position:fixed;inset:0;inline-size:min(     calc(100% - (var(--ui-dialog-viewport-gap) * 2)),     var(--ui-dialog-max-width, 440px)   );max-inline-size:none;max-block-size:calc(100dvh - (var(--ui-dialog-viewport-gap) * 2));margin:auto;padding:var(--ui-space-4);overflow:auto;background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-dialog);box-shadow:var(--ui-shadow-dialog);visibility:hidden;pointer-events:none;opacity:0;transform:scale(0.96);transition:opacity var(--ui-dialog-duration) var(--ui-motion-ease),     transform var(--ui-dialog-duration) var(--ui-motion-ease),     visibility var(--ui-dialog-duration),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]{visibility:visible;pointer-events:auto;opacity:1;transform:scale(1);animation:ui-dialog-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-enter{from{opacity:0;transform:scale(0.96)}}:host dialog::backdrop{background-color:transparent;transition:background-color var(--ui-dialog-duration) var(--ui-motion-ease),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]::backdrop{background-color:var(--ui-overlay-backdrop);animation:ui-dialog-backdrop-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-backdrop-enter{from{background-color:transparent}}`;
@@ -22,17 +26,27 @@ var UIDialog = class {
   get host() {
     return getElement(this);
   }
-  open = false;
+  /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+  open;
   defaultOpen = false;
   modal = true;
   dismissible = true;
   /** Accessible name forwarded to the native dialog surface. */
   label;
   internalOpen = false;
+  accessibleLabel = "Dialog";
   overlayId = `ui-dialog-${Math.random().toString(36).slice(2, 11)}`;
   dialogRef;
+  contentObserver = null;
   syncFromProp() {
-    this.internalOpen = this.open;
+    if (isControlled(this.open))
+      this.internalOpen = this.open;
+  }
+  syncLabelFromProp() {
+    this.syncAccessibleLabel();
+  }
+  componentWillLoad() {
+    this.syncAccessibleLabel();
   }
   syncOpen() {
     if (this.dialogRef) {
@@ -52,20 +66,29 @@ var UIDialog = class {
     }
   }
   componentDidLoad() {
-    this.syncFromProp();
-    this.internalOpen = this.internalOpen || this.defaultOpen;
+    this.contentObserver = new MutationObserver(this.syncAccessibleLabel);
+    this.contentObserver.observe(this.host, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
     this.dialogRef?.addEventListener("close", this.onDialogClose);
+    this.syncAccessibleLabel();
     this.syncOpen();
   }
   disconnectedCallback() {
     this.dialogRef?.removeEventListener("close", this.onDialogClose);
+    this.contentObserver?.disconnect();
+    this.contentObserver = null;
     closeOverlay(this.overlayId);
   }
   componentDidUpdate() {
     this.syncOpen();
   }
   handleRequestClose(reason, trigger) {
-    this.internalOpen = false;
+    if (!isControlled(this.open))
+      this.internalOpen = false;
     dispatchDetail(this.host, "close", {
       open: false,
       reason,
@@ -74,8 +97,12 @@ var UIDialog = class {
   }
   onDialogClose = () => {
     if (this.internalOpen) {
-      this.internalOpen = false;
-      closeOverlay(this.overlayId);
+      if (!isControlled(this.open)) {
+        this.internalOpen = false;
+        closeOverlay(this.overlayId);
+      } else {
+        requestAnimationFrame(() => this.syncOpen());
+      }
       dispatchDetail(this.host, "close", {
         open: false,
         reason: "programmatic",
@@ -88,14 +115,25 @@ var UIDialog = class {
       requestTopOverlayClose("escape", "keyboard");
     }
   };
+  syncAccessibleLabel = () => {
+    const explicitLabel = this.label?.trim();
+    const heading = this.host.querySelector('[slot="heading"], [data-ui-dialog-title], h1, h2, h3, h4, h5, h6');
+    const headingLabel = heading?.textContent?.trim();
+    const nextLabel = explicitLabel || headingLabel || "Dialog";
+    if (this.accessibleLabel !== nextLabel)
+      this.accessibleLabel = nextLabel;
+  };
   render() {
-    return h(Host, { key: "c10f9063a1c2677caff3b8d1f26b37bf25978a77", "data-open": this.internalOpen ? "" : void 0, 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: "b7aa33e24a74527a58718b3fa2218f5a09e9e439", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("dialog", { key: "f24455edc404581b5040c9c0090bf64141f9e296", ref: (el) => this.dialogRef = el, open: this.internalOpen, "aria-label": this.accessibleLabel }, h("slot", { key: "bad318e44b9c80dc0aae04ea5cdbb7b2ab472c35" })));
   }
   static get watchers() {
     return {
       "open": [{
         "syncFromProp": 0
       }],
+      "label": [{
+        "syncLabelFromProp": 0
+      }],
       "internalOpen": [{
         "syncOpen": 0
       }]

package/dist/{ui-disclosure.entry-5LY2BT7B.js → ui-disclosure.entry-3BJEYU3U.js}

@@ -1,6 +1,10 @@
 import {
   createId
 } from "./chunk-OF57X5AR.js";
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
 import {
   dispatchDetail,
   eventToTrigger,
@@ -11,7 +15,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-disclosure.entry.js
 var uiDisclosureCss = () => `:host{display:block}::slotted([hidden]){display:none !important}`;
@@ -22,7 +26,8 @@ var UIDisclosure = class {
   get host() {
     return getElement(this);
   }
-  open = false;
+  /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+  open;
   defaultOpen = false;
   disabled = false;
   internalOpen = false;
@@ -30,7 +35,8 @@ var UIDisclosure = class {
   trigger = null;
   content = null;
   syncFromProp() {
-    this.internalOpen = this.open;
+    if (isControlled(this.open))
+      this.internalOpen = this.open;
   }
   syncState() {
     if (this.trigger) {
@@ -42,8 +48,7 @@ var UIDisclosure = class {
   }
   componentDidLoad() {
     this.resolveParts();
-    this.syncFromProp();
-    this.internalOpen = this.internalOpen || this.defaultOpen;
+    this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
     this.syncState();
     this.trigger?.addEventListener("click", this.onTriggerClick);
     this.trigger?.addEventListener("keydown", this.onTriggerKeydown);
@@ -80,7 +85,8 @@ var UIDisclosure = class {
   setOpen(next, action) {
     if (this.internalOpen === next)
       return;
-    this.internalOpen = next;
+    if (!isControlled(this.open))
+      this.internalOpen = next;
     dispatchDetail(this.host, next ? "open" : "close", {
       open: next,
       reason: action.reason,
@@ -101,7 +107,7 @@ var UIDisclosure = class {
     this.setOpen(!this.internalOpen, { reason: "action", trigger: "keyboard" });
   };
   render() {
-    return h(Host, { key: "7fbc83614f8e988a43d1baac0379a6dc8826b1d5" }, h("slot", { key: "6ef33ca7bce5c4d83ab65642f52a9d17febb794d" }));
+    return h(Host, { key: "55a6fd71965104b96b55fd53870becce748a4116" }, h("slot", { key: "542727e10d335ff44fc7cf8250e80f045f89b8f2" }));
   }
   static get watchers() {
     return {

package/dist/{ui-floating-action-button.entry-EJAMR5AM.js → ui-floating-action-button.entry-JEVNV6FI.js}

@@ -2,7 +2,7 @@ import {
   Host,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-floating-action-button.entry.js
 var uiFloatingActionButtonCss = () => `:host{position:fixed;inset-block-end:calc(     var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom)   );inset-inline-end:max(     var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem)),     env(safe-area-inset-right)   );inline-size:var(--ui-floating-action-button-size, 56px);block-size:var(--ui-floating-action-button-size, 56px);display:inline-flex;z-index:var(--ui-floating-action-button-z-index, 100)}button{appearance:none;inline-size:100%;block-size:100%;border:none;border-radius:999px;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--ui-floating-action-button-bg, var(--ui-accent-solid));color:var(--ui-floating-action-button-color, var(--ui-text-on-accent));box-shadow:var(     --ui-floating-action-button-shadow,     0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)   );cursor:pointer;transition:background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),     transform var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),     box-shadow var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease)}button:hover:enabled{background:var(--ui-floating-action-button-hover-bg, var(--ui-accent-hover));box-shadow:var(     --ui-floating-action-button-hover-shadow,     0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)   )}button:active:enabled{transform:scale(var(--ui-floating-action-button-active-scale, 0.94))}button:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:2px}button:disabled,:host([disabled]){opacity:0.6;cursor:not-allowed}::slotted(svg){inline-size:var(--ui-floating-action-button-icon-size, 24px);block-size:var(--ui-floating-action-button-icon-size, 24px);flex-shrink:0}@media (min-width: 768px){:host([mobile-only]){display:none}}`;
@@ -14,7 +14,7 @@ var UIFloatingActionButton = class {
   mobileOnly = false;
   label = "";
   render() {
-    return h(Host, { key: "6f67f3967cf8883005f6c56747db515db5ebe1d0", "data-disabled": this.disabled ? "" : void 0 }, h("button", { key: "deebb9261221c144b30bc3e41790158fc339cd14", type: "button", "aria-label": this.label || void 0, disabled: this.disabled }, h("slot", { key: "3b045b69a4508c84dd5b7c8b3df0e6f3eded1c13" })));
+    return h(Host, { key: "b41f0aaabbcd23cb79ac06245e69fd8ecb9c9912", "data-disabled": this.disabled ? "" : void 0 }, h("button", { key: "36a023bd66d38845f1116874380d7a28bb46b5a2", type: "button", "aria-label": this.label || void 0, disabled: this.disabled }, h("slot", { key: "412c41e4732cc230f84e7758bfc7faab7e0802e2" })));
   }
 };
 UIFloatingActionButton.style = uiFloatingActionButtonCss();

package/dist/ui-form-field.entry-PKSY7UU4.js

@@ -0,0 +1,120 @@
+import {
+  createId
+} from "./chunk-OF57X5AR.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-IMHSPETJ.js";
+
+// dist/esm/ui-form-field.entry.js
+var uiFormFieldCss = () => `:host{display:grid;gap:var(--ui-space-2);min-inline-size:0;align-content:start;color:var(--ui-text-primary)}::slotted(label){color:var(--ui-text-secondary);font-size:0.95rem}::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']),::slotted([role='alert']){color:var(--ui-accent-active);font-size:0.875rem}`;
+var UIFormField = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  invalid = false;
+  disabled = false;
+  required = false;
+  observer = null;
+  activeInput = null;
+  ownedDescriptionIds = /* @__PURE__ */ new Set();
+  wireQueued = false;
+  componentDidLoad() {
+    this.observer = new MutationObserver(this.scheduleWire);
+    this.observer.observe(this.host, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["aria-describedby", "data-slot", "id", "role"]
+    });
+    this.wire();
+  }
+  componentDidUpdate() {
+    this.scheduleWire();
+  }
+  disconnectedCallback() {
+    this.observer?.disconnect();
+    this.observer = null;
+    this.removeOwnedDescriptions(this.activeInput);
+    this.activeInput = null;
+    this.ownedDescriptionIds.clear();
+  }
+  descriptionIds(input) {
+    return Array.from(new Set((input.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean)));
+  }
+  removeOwnedDescriptions(input) {
+    if (!input || this.ownedDescriptionIds.size === 0)
+      return;
+    const remaining = this.descriptionIds(input).filter((id) => !this.ownedDescriptionIds.has(id));
+    if (remaining.length > 0)
+      input.setAttribute("aria-describedby", remaining.join(" "));
+    else
+      input.removeAttribute("aria-describedby");
+  }
+  scheduleWire = () => {
+    if (this.wireQueued)
+      return;
+    this.wireQueued = true;
+    queueMicrotask(() => {
+      this.wireQueued = false;
+      this.wire();
+    });
+  };
+  wire() {
+    const label = this.host.querySelector("label");
+    const input = this.host.querySelector("input, textarea, select");
+    const help = this.host.querySelector('[data-slot="help"]');
+    const error = this.host.querySelector('[data-slot="error"], [role="alert"]');
+    if (input !== this.activeInput) {
+      this.removeOwnedDescriptions(this.activeInput);
+      this.activeInput = input;
+      this.ownedDescriptionIds.clear();
+    }
+    if (!input)
+      return;
+    if (!input.id) {
+      input.id = createId("form-field-input");
+    }
+    if (label && !label.getAttribute("for")) {
+      label.setAttribute("for", input.id);
+    }
+    const previousOwnedIds = this.ownedDescriptionIds;
+    const externalIds = this.descriptionIds(input).filter((id) => !previousOwnedIds.has(id));
+    const describedIds = [];
+    if (help) {
+      if (!help.id)
+        help.id = createId("form-field-help");
+      describedIds.push(help.id);
+    }
+    if (error) {
+      if (!error.id)
+        error.id = createId("form-field-error");
+      describedIds.push(error.id);
+    }
+    const nextOwnedIds = describedIds.filter((id) => !externalIds.includes(id));
+    const nextDescribedIds = Array.from(/* @__PURE__ */ new Set([...externalIds, ...describedIds]));
+    const nextDescribedBy = nextDescribedIds.join(" ");
+    if (input.getAttribute("aria-describedby") !== nextDescribedBy) {
+      if (nextDescribedBy)
+        input.setAttribute("aria-describedby", nextDescribedBy);
+      else
+        input.removeAttribute("aria-describedby");
+    }
+    this.ownedDescriptionIds = new Set(nextOwnedIds);
+    input.disabled = this.disabled;
+    input.required = this.required;
+    input.setAttribute("aria-invalid", this.invalid ? "true" : "false");
+  }
+  render() {
+    return h(Host, { key: "0b8fd5608631b5f9159fdf99d6eba918cc6587e4", "data-invalid": this.invalid ? "" : void 0, "data-disabled": this.disabled ? "" : void 0, "data-required": this.required ? "" : void 0 }, h("slot", { key: "4ed78782bcc8b6699a40d8402994b486d71d730a", onSlotchange: this.scheduleWire }));
+  }
+};
+UIFormField.style = uiFormFieldCss();
+export {
+  UIFormField as ui_form_field
+};

package/dist/{ui-icon-button.entry-7SD2LVXE.js → ui-icon-button.entry-TPX7BE7R.js}

@@ -2,7 +2,7 @@ import {
   Host,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-icon-button.entry.js
 var uiIconButtonCss = () => `:host{display:inline-flex;color:var(--ui-text-secondary)}:host([anticipatory]){position:relative}:host([anticipatory])::before{content:'';position:absolute;inset:50% auto auto 50%;z-index:1;inline-size:var(--ui-affordance-guide-size, 0.25rem);block-size:var(--ui-affordance-guide-size, 0.25rem);border-radius:var(--ui-radius-round, 999px);background:var(--ui-affordance-guide-color, var(--ui-border-strong));opacity:var(--ui-affordance-guide-opacity, 0.42);transform:translate(-50%, -50%);transition:opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);pointer-events:none}:host([anticipatory]) button{opacity:0;transform:scale(0.72);pointer-events:none}:host([anticipatory][data-ui-proximity='near'])::before,:host([anticipatory]:focus-within)::before,:host([anticipatory]:hover)::before,:host([anticipatory][variant='solid'])::before{opacity:0}:host([anticipatory][data-ui-proximity='near']) button,:host([anticipatory]:focus-within) button,:host([anticipatory]:hover) button,:host([anticipatory][variant='solid']) button{opacity:1;transform:scale(1);pointer-events:auto}button{appearance:none;inline-size:var(--ui-icon-button-size, 2.5rem);block-size:var(--ui-icon-button-size, 2.5rem);min-inline-size:var(--ui-icon-button-size, 2.5rem);min-block-size:var(--ui-icon-button-size, 2.5rem);padding:0;margin:0;border:1px solid transparent;border-radius:var(--ui-icon-button-radius, var(--ui-radius-2));background:var(--ui-icon-button-bg, transparent);color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     border-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease)}@media (hover: none), (pointer: coarse){:host([anticipatory])::before{opacity:0}:host([anticipatory]) button{opacity:1;transform:none;pointer-events:auto}}:host([size='sm']) button{inline-size:var(--ui-icon-button-size-sm, 2rem);block-size:var(--ui-icon-button-size-sm, 2rem);min-inline-size:var(--ui-icon-button-size-sm, 2rem);min-block-size:var(--ui-icon-button-size-sm, 2rem)}:host([size='lg']) button{inline-size:var(--ui-icon-button-size-lg, 2.75rem);block-size:var(--ui-icon-button-size-lg, 2.75rem);min-inline-size:var(--ui-icon-button-size-lg, 2.75rem);min-block-size:var(--ui-icon-button-size-lg, 2.75rem)}:host([variant='outline']) button{border-color:var(--ui-icon-button-border, var(--ui-border-default));background:var(--ui-icon-button-outline-bg, var(--ui-surface-default));color:var(--ui-icon-button-outline-color, var(--ui-text-primary))}:host([variant='solid']) button{background:var(--ui-icon-button-solid-bg, var(--ui-accent-solid));color:var(--ui-icon-button-solid-color, var(--ui-text-on-accent));box-shadow:var(     --ui-icon-button-solid-shadow,     0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)   )}button:hover:enabled{background:var(--ui-icon-button-hover-bg, var(--ui-surface-muted));color:var(--ui-icon-button-hover-color, var(--ui-text-primary))}:host([variant='outline']) button:hover:enabled{border-color:var(--ui-icon-button-hover-border, var(--ui-border-strong))}:host([variant='solid']) button:hover:enabled{background:var(--ui-icon-button-solid-hover-bg, var(--ui-accent-hover))}button:active:enabled{transform:scale(var(--ui-icon-button-active-scale, 0.96))}button:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:2px}button:disabled,:host([disabled]){opacity:0.6;cursor:not-allowed}::slotted(svg){inline-size:var(--ui-icon-button-icon-size, 1.125rem);block-size:var(--ui-icon-button-icon-size, 1.125rem);flex-shrink:0;stroke-width:var(--ui-icon-button-icon-stroke-width, 1.75)}`;
@@ -17,7 +17,7 @@ var UIIconButton = class {
   /** Reveals this control through a surrounding ui-affordance-scope. */
   anticipatory = false;
   render() {
-    return h(Host, { key: "dd6149d96d534a641eedaf808df5348eef48f31f", "data-disabled": this.disabled ? "" : void 0, "data-ui-affordance": this.anticipatory ? "button" : void 0 }, h("button", { key: "3e1b83a3e01b724cb75ddb7243a1e85bd9eb3420", type: "button", "aria-label": this.label || void 0, disabled: this.disabled }, h("slot", { key: "d280293841471ad37f556c73d86de3223e1f98e6" })));
+    return h(Host, { key: "fb4534d977b4812f402855f78176b8316ebace61", "data-disabled": this.disabled ? "" : void 0, "data-ui-affordance": this.anticipatory ? "button" : void 0 }, h("button", { key: "b90d290870ad76ba18de88a6b6947a15040ff12a", type: "button", "aria-label": this.label || void 0, disabled: this.disabled }, h("slot", { key: "88ded6ad90a4cfeffcd687990e5ba8b0c7d3bd30" })));
   }
 };
 UIIconButton.style = uiIconButtonCss();

package/dist/{ui-input.entry-7MM7GEQW.js → ui-input.entry-6NCLNW4E.js}

@@ -7,10 +7,10 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-input.entry.js
-var uiInputCss = () => `:host{display:inline-flex;color:var(--ui-text-primary)}::slotted(input){width:100%;appearance:none;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-default);color:inherit;font:inherit;line-height:var(--ui-line-height-md);padding:var(--ui-space-2) var(--ui-space-3);margin:0;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(input:hover:not(:focus):not(:disabled)){border-color:var(--ui-border-strong)}::slotted(input:focus){border-color:var(--ui-focus-ring);box-shadow:0 0 0 3px var(--ui-accent-soft)}:host([data-invalid='true'])::slotted(input),::slotted(input[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(input:disabled){background:var(--ui-surface-muted);color:var(--ui-text-muted);cursor:not-allowed}::slotted(input:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}`;
+var uiInputCss = () => `:host{display:inline-flex;min-inline-size:0;color:var(--ui-text-primary)}::slotted(input){width:100%;appearance:none;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-control-surface, var(--ui-surface-default));color:inherit;font:inherit;line-height:var(--ui-line-height-md);padding:var(--ui-space-2) var(--ui-space-3);margin:0;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(input:hover:not(:focus):not(:disabled)){border-color:var(--ui-control-border-hover, var(--ui-border-strong))}::slotted(input:focus){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),::slotted(input[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(input:disabled){background:var(--ui-control-surface-disabled, var(--ui-surface-muted));color:var(--ui-text-muted);cursor:not-allowed}::slotted(input:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}`;
 var UIInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -18,7 +18,7 @@ var UIInput = class {
   get host() {
     return getElement(this);
   }
-  value = "";
+  value;
   defaultValue = "";
   disabled = false;
   invalid = false;
@@ -26,14 +26,16 @@ var UIInput = class {
   internalValue = "";
   slotRef;
   syncFromProp() {
-    this.internalValue = this.value;
+    if (this.value !== void 0)
+      this.internalValue = this.value;
   }
   syncToInput() {
     const input = this.getInput();
     if (!input)
       return;
     this.host.dataset.invalid = this.invalid ? "true" : "";
-    input.value = this.internalValue;
+    if (this.value !== void 0)
+      input.value = this.internalValue;
     input.defaultValue = this.defaultValue;
     input.disabled = this.disabled;
     input.readOnly = this.readOnly;
@@ -81,7 +83,7 @@ var UIInput = class {
     });
   };
   render() {
-    return h(Host, { key: "2b3b4f6862cf5c5e413aaefb349c53d4e66eb6d0", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "140dc656f13399b8ef05adb6cfa1d9a7e1373c2d", ref: (el) => this.slotRef = el }));
+    return h(Host, { key: "fe125b4e8ec35e9ac0b0ca0434aa8439f515c51b", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "ec0609f9143435cf0436abb98488b9f30b71530b", ref: (el) => this.slotRef = el }));
   }
   static get watchers() {
     return {

package/dist/ui-menu-item.entry-KA2K3PKV.js

@@ -0,0 +1,22 @@
+import {
+  Host,
+  h,
+  registerInstance
+} from "./chunk-IMHSPETJ.js";
+
+// dist/esm/ui-menu-item.entry.js
+var uiMenuItemCss = () => `:host{display:block;width:100%}.menu-item__surface{display:block;box-sizing:border-box;width:100%;padding:var(--ui-space-2) var(--ui-space-3);text-align:left;background:none;border:none;border-radius:var(--ui-radius-2);color:var(--ui-text-primary);font-size:var(--ui-font-size-md);font-weight:var(--ui-font-medium, 500);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease)}:host(:hover:not([aria-disabled='true']):not([disabled])) .menu-item__surface{background:var(--ui-surface-subtle)}:host([aria-disabled='true']) .menu-item__surface,:host([disabled]) .menu-item__surface{opacity:0.6;cursor:not-allowed}`;
+var UIMenuItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  disabled = false;
+  value = "";
+  render() {
+    return h(Host, { key: "f8a1721f8e516af04f901b53c3a66ce1de932608", role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? "true" : void 0, "data-value": this.value || void 0 }, h("span", { key: "6483d0b3ce1be06aed214f626b2d6a2963a44ade", class: "menu-item__surface" }, h("slot", { key: "db470b1cbb54d56a14d05c0d7f72c43e37f4263e" })));
+  }
+};
+UIMenuItem.style = uiMenuItemCss();
+export {
+  UIMenuItem as ui_menu_item
+};

package/dist/{ui-menu.entry-R4WK5QSX.js → ui-menu.entry-7GDO5L2T.js}

@@ -2,10 +2,14 @@ import {
   closeOverlay,
   openOverlay,
   requestTopOverlayClose
-} from "./chunk-SZJQ3NPX.js";
+} from "./chunk-TL4FIE7X.js";
 import {
   createAnchoredSurface
 } from "./chunk-YHXJC5M5.js";
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
 import {
   dispatchDetail,
   eventToTrigger
@@ -15,10 +19,10 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-menu.entry.js
-var uiMenuCss = () => `:host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;inline-size:max-content;min-inline-size:min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));max-inline-size:calc(100vw - (var(--ui-menu-viewport-gap) * 2));padding:var(--ui-space-1);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg)}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;overflow:auto;max-block-size:calc(100dvh - (var(--ui-menu-viewport-gap) * 2));opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}::slotted(ui-menu-item){display:block;width:100%;padding:var(--ui-space-2) var(--ui-space-3);text-align:left;background:none;border:none;border-radius:var(--ui-radius-2);color:var(--ui-text-primary);font-size:var(--ui-font-size-md);font-weight:var(--ui-font-medium, 500);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(ui-menu-item:hover:not([aria-disabled='true']):not([disabled])){background:var(--ui-surface-subtle)}::slotted(ui-menu-item[aria-disabled='true']),::slotted(ui-menu-item[disabled]){opacity:0.6;cursor:not-allowed}`;
+var uiMenuCss = () => `:host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;box-sizing:border-box;inline-size:max-content;min-inline-size:min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));max-inline-size:calc(100vw - (var(--ui-menu-viewport-gap) * 2));padding:0;border:0;border-radius:0;background:transparent;box-shadow:var(--ui-shadow-lg)}.menu__surface{display:flex;flex-direction:column;box-sizing:border-box;padding:var(--ui-space-1);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3)}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;overflow:auto;max-block-size:calc(100dvh - (var(--ui-menu-viewport-gap) * 2));opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}::slotted(ui-menu-item){display:block;width:100%}`;
 var UIMenu = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -26,7 +30,8 @@ var UIMenu = class {
   get host() {
     return getElement(this);
   }
-  open = false;
+  /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+  open;
   defaultOpen = false;
   /** Id of the control that anchors this menu in the top layer. */
   for;
@@ -37,7 +42,8 @@ var UIMenu = class {
   anchor = null;
   surface = null;
   syncFromProp() {
-    this.internalOpen = this.open;
+    if (isControlled(this.open))
+      this.internalOpen = this.open;
   }
   resetSurface() {
     this.setupSurface();
@@ -63,8 +69,7 @@ var UIMenu = class {
     }
   }
   componentDidLoad() {
-    this.syncFromProp();
-    this.internalOpen = this.internalOpen || this.defaultOpen;
+    this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
     this.host.addEventListener("click", this.onItemClick);
     this.host.addEventListener("keydown", this.onKeydown);
     this.setupSurface();
@@ -97,7 +102,8 @@ var UIMenu = class {
   closeMenu(reason, trigger) {
     if (!this.internalOpen)
       return;
-    this.internalOpen = false;
+    if (!isControlled(this.open))
+      this.internalOpen = false;
     dispatchDetail(this.host, "close", {
       open: false,
       reason,
@@ -125,7 +131,8 @@ var UIMenu = class {
       reason: "action",
       trigger: eventToTrigger(e)
     });
-    this.internalOpen = false;
+    if (!isControlled(this.open))
+      this.internalOpen = false;
   };
   onKeydown = (e) => {
     if (e.key === "Escape") {
@@ -148,7 +155,8 @@ var UIMenu = class {
           reason: "action",
           trigger: "keyboard"
         });
-        this.internalOpen = false;
+        if (!isControlled(this.open))
+          this.internalOpen = false;
       }
       return;
     }
@@ -159,7 +167,7 @@ var UIMenu = class {
     }
   };
   render() {
-    return h(Host, { key: "06ad0750df843cb874bd4f257d8567157c855493", role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "50118ac749a2747ca06f4d483499c4cd20125a89" }));
+    return h(Host, { key: "c5af7acaf41b75165e9f7cf47d65b7a1dcd4d1c0", role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? "" : void 0 }, h("div", { key: "058fff9a00a1dcba26f6db425096e7a96d889896", class: "menu__surface" }, h("slot", { key: "dbbf9eb4ba2a348b6d85049e229ed0562ee17318" })));
   }
   static get watchers() {
     return {

package/dist/{ui-popover.entry-ZRJRTXA7.js → ui-popover.entry-FR6YRNK6.js}

@@ -2,10 +2,14 @@ import {
   closeOverlay,
   openOverlay,
   requestTopOverlayClose
-} from "./chunk-SZJQ3NPX.js";
+} from "./chunk-TL4FIE7X.js";
 import {
   createAnchoredSurface
 } from "./chunk-YHXJC5M5.js";
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
 import {
   dispatchDetail
 } from "./chunk-UL7UIUJZ.js";
@@ -14,10 +18,10 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-popover.entry.js
-var uiPopoverCss = () => `: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);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}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}`;
+var uiPopoverCss = () => `:host{--ui-popover-viewport-gap:var(--ui-space-2, 0.5rem);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])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}`;
 var UIPopover = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -25,7 +29,8 @@ var UIPopover = class {
   get host() {
     return getElement(this);
   }
-  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;
@@ -35,7 +40,8 @@ var UIPopover = class {
   anchor = null;
   surface = null;
   syncFromProp() {
-    this.internalOpen = this.open;
+    if (isControlled(this.open))
+      this.internalOpen = this.open;
   }
   onOpenChange() {
     this.syncOverlay();
@@ -92,8 +98,7 @@ var UIPopover = class {
     }
   }
   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();
@@ -108,7 +113,8 @@ var UIPopover = class {
     this.syncOverlay();
   }
   handleRequestClose(reason, trigger) {
-    this.internalOpen = false;
+    if (!isControlled(this.open))
+      this.internalOpen = false;
     dispatchDetail(this.host, "close", {
       open: false,
       reason,
@@ -121,7 +127,7 @@ var UIPopover = class {
     }
   };
   render() {
-    return h(Host, { key: "8e45be54147ff8f76a0d5e7fd875c3f4cf5ac40a", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "3141729cd32c8dcdaec1fbd763eb034242563c8f" }));
+    return h(Host, { key: "6a38873f2e4d085f733fa116057b1f55418e23ed", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("div", { key: "6fef6e37921e8c52994617719f1ebb6d9bd54ee2", class: "popover__surface" }, h("slot", { key: "5ee4269592219035a3185f8f06fd71ecb12e4e71" })));
   }
   static get watchers() {
     return {

package/dist/{ui-radio-group.entry-S6RXHFSN.js → ui-radio-group.entry-7QHXQSNO.js}

@@ -7,7 +7,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-radio-group.entry.js
 var uiRadioGroupCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2)}:host([data-orientation='vertical']){display:inline-grid;justify-items:start}`;
@@ -114,7 +114,7 @@ var UIRadioGroup = class {
     }
   };
   render() {
-    return h(Host, { key: "5410f4adb5d4ca888287150f57de38ab59cc791d", role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? "" : void 0 }, h("slot", { key: "d3988acaf5456e89f26d449ccaadaf237c223bbd" }));
+    return h(Host, { key: "28c6eb6cc9520b570f40d2193d0c64a7a6c7db01", role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? "" : void 0 }, h("slot", { key: "97814378181be78bfac6090ff173459e1f539728" }));
   }
   static get watchers() {
     return {