@threadlabs/looma 0.1.23 → 0.1.25

package/dist/types/field/editable.d.ts

@@ -0,0 +1,5 @@
+export interface EditableChange {
+    edit: boolean;
+    reason: 'activate' | 'light-dismiss' | 'escape' | 'programmatic';
+    trigger: 'keyboard' | 'pointer' | 'programmatic';
+}

package/dist/types/field/multi-combobox.d.ts

@@ -0,0 +1,11 @@
+import type { ComboboxOption } from './combobox';
+export type MultiComboboxItem = ComboboxOption;
+export interface MultiComboboxItemChange {
+    item: MultiComboboxItem;
+    index: number;
+    trigger: 'keyboard' | 'pointer' | 'programmatic';
+}
+export interface MultiComboboxCreate {
+    query: string;
+    trigger: 'keyboard' | 'pointer' | 'programmatic';
+}

package/dist/types/icons.d.ts

@@ -6,6 +6,8 @@ export declare const LOOMA_ICONS: {
     'align-right': IconNode;
     bold: IconNode;
     braces: IconNode;
+    'circle-check': IconNode;
+    'circle-x': IconNode;
     'chevron-down': IconNode;
     'chevron-left': IconNode;
     'code-xml': IconNode;
@@ -19,11 +21,13 @@ export declare const LOOMA_ICONS: {
     'heading-3': IconNode;
     highlighter: IconNode;
     image: IconNode;
+    info: IconNode;
     italic: IconNode;
     list: IconNode;
     'list-ordered': IconNode;
     'list-todo': IconNode;
     merge: IconNode;
+    'notebook-pen': IconNode;
     minus: IconNode;
     'paint-bucket': IconNode;
     'panel-bottom': IconNode;
@@ -39,6 +43,7 @@ export declare const LOOMA_ICONS: {
     strikethrough: IconNode;
     table: IconNode;
     trash: IconNode;
+    'triangle-alert': IconNode;
     underline: IconNode;
     undo: IconNode;
 };

package/dist/types/utils/controlled-state.d.ts

@@ -0,0 +1,4 @@
+/** A state prop is controlled only when the consumer supplies a value. */
+export declare const isControlled: <T>(value: T | undefined) => value is T;
+/** Defaults apply only when a corresponding controlled prop is omitted. */
+export declare const controlledOrDefault: <T>(value: T | undefined, defaultValue: T) => T;

package/dist/{ui-affordance-scope.entry-VO4C2MZX.js → ui-affordance-scope.entry-VSSP52ZP.js}

@@ -7,7 +7,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-affordance-scope.entry.js
 var uiAffordanceScopeCss = () => `:host{display:contents;--ui-affordance-scope-engaged:0}:host([data-ui-interaction='engaged']){--ui-affordance-scope-engaged:1}`;
@@ -38,7 +38,7 @@ var UIAffordanceScope = class {
     this.coordinator?.refresh();
   };
   render() {
-    return h(Host, { key: "184b0a908494d480ed23aa14b75d4f7b94e5275b" }, h("slot", { key: "570e810db588c1514c6fd85985c9bc4532993a2b", onSlotchange: this.onSlotChange }));
+    return h(Host, { key: "f500fa48554ed6224efd2dbe9632880bf0a15a19" }, h("slot", { key: "37c5c5b7925b260ff8f9edd411ee6c90a12a4909", onSlotchange: this.onSlotChange }));
   }
   static get watchers() {
     return {

package/dist/ui-avatar-group.entry-JMCLL6FW.js

@@ -0,0 +1,51 @@
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-UY423IKN.js";
+
+// dist/esm/ui-avatar-group.entry.js
+var uiAvatarGroupCss = () => `:host{display:flex;align-items:center;flex-direction:row-reverse;gap:0}::slotted(*){margin-inline-end:-0.5rem;flex-shrink:0}::slotted(*:last-of-type){margin-inline-end:0}.overflow{margin-inline-end:-0.5rem;display:inline-flex;align-items:center;justify-content:center;inline-size:2.5rem;block-size:2.5rem;border-radius:999px;border:1px solid var(--ui-border-default);background:var(--ui-surface-muted);color:var(--ui-text-secondary);font:inherit;font-size:0.75rem;font-weight:600;flex-shrink:0}`;
+var UIAvatarGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  max = 5;
+  label = "People";
+  overflowCount = 0;
+  syncOverflow() {
+    this.updateOverflow();
+  }
+  componentDidLoad() {
+    this.updateOverflow();
+  }
+  visibleLimit() {
+    return Number.isFinite(this.max) ? Math.max(0, Math.floor(this.max)) : 0;
+  }
+  updateOverflow() {
+    const children = Array.from(this.host.children);
+    const total = children.length;
+    const visibleLimit = this.visibleLimit();
+    const overflowCount = total > visibleLimit ? total - visibleLimit : 0;
+    if (this.overflowCount !== overflowCount)
+      this.overflowCount = overflowCount;
+  }
+  render() {
+    return h(Host, { key: "9ba6693cabc379bbbe6f5698160481f27fe02f31", role: "group", "aria-label": this.label || void 0 }, h("style", { key: "ed231fe96c16a3cdd5a66d4828664c75c6959a9e" }, `::slotted(:nth-child(n + ${this.visibleLimit() + 1})) { display: none !important; }`), h("slot", { key: "463005a7f3c498c80c768151ab32c873ff1abf86", onSlotchange: () => this.updateOverflow() }), this.overflowCount > 0 && h("span", { key: "dc1ba88fd97ca461e6518d223f00a93416e6d0f0", class: "overflow", role: "img", "aria-label": `${this.overflowCount} more ${this.overflowCount === 1 ? "person" : "people"}`, "data-ui-avatar-group-overflow": true }, "+", this.overflowCount));
+  }
+  static get watchers() {
+    return {
+      "max": [{
+        "syncOverflow": 0
+      }]
+    };
+  }
+};
+UIAvatarGroup.style = uiAvatarGroupCss();
+export {
+  UIAvatarGroup as ui_avatar_group
+};

package/dist/{ui-avatar.entry-T6FU6ZYM.js → ui-avatar.entry-X2YQ3QPG.js}

@@ -2,7 +2,7 @@ import {
   Host,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-avatar.entry.js
 function toInitials(value) {
@@ -13,7 +13,7 @@ function toInitials(value) {
     return tokens[0].slice(0, 2).toUpperCase();
   return `${tokens[0][0] ?? ""}${tokens[1][0] ?? ""}`.toUpperCase();
 }
-var uiAvatarCss = () => `:host{display:inline-grid;place-items:center;overflow:hidden;inline-size:2.5rem;block-size:2.5rem;border-radius:999px;border:1px solid var(--ui-border-default);background:var(--ui-surface-muted);color:var(--ui-text-secondary);font:inherit;font-size:0.875rem;font-weight:600;text-transform:uppercase}.avatar{display:contents}.avatar img{grid-area:1 / 1;inline-size:100%;block-size:100%;object-fit:cover}.avatar .fallback{grid-area:1 / 1;display:inline-flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%}`;
+var uiAvatarCss = () => `:host{display:inline-flex}.avatar{display:inline-grid;place-items:center;overflow:hidden;inline-size:2.5rem;block-size:2.5rem;border-radius:999px;border:1px solid var(--ui-border-default);background:var(--ui-surface-muted);color:var(--ui-text-secondary);font:inherit;font-size:0.875rem;font-weight:600;text-transform:uppercase}.avatar img{grid-area:1 / 1;inline-size:100%;block-size:100%;object-fit:cover}.avatar .fallback{grid-area:1 / 1;display:inline-flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%}`;
 var UIAvatar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -35,7 +35,7 @@ var UIAvatar = class {
   render() {
     const fallbackText = this.fallback || toInitials(this.name || this.alt);
     const label = this.alt || this.name || "Avatar";
-    return h(Host, { key: "18214960ad2f1a0370907c0281102af924739de9", role: "img", "aria-label": label, "data-has-image": this.hasImage ? "" : void 0 }, h("div", { key: "c6d0a00de56b756f0e24fdc4b306d89cdae2a44f", class: "avatar" }, h("img", { key: "c5bfecb9d18797bc934ff087ce7ed8a4616ab347", src: this.src, alt: label, onLoad: this.onImageLoad, onError: this.onImageError, hidden: !this.hasImage, "aria-hidden": this.hasImage ? "false" : "true" }), h("span", { key: "1875a45a9c21de3e3a52924ef25b3f8429a788c4", class: "fallback", hidden: this.hasImage, "aria-hidden": this.hasImage ? "true" : "false" }, fallbackText)));
+    return h(Host, { key: "bbe6c3a775702022a19d819a6cc9d81d798cb3e1", role: "img", "aria-label": label, "data-has-image": this.hasImage ? "" : void 0 }, h("div", { key: "63402327ba5bde122bf5deaea09baf965ee9b047", class: "avatar" }, h("img", { key: "e52b86773684b80d76efa459cb03ae40881f959b", src: this.src, alt: label, onLoad: this.onImageLoad, onError: this.onImageError, hidden: !this.hasImage, "aria-hidden": this.hasImage ? "false" : "true" }), h("span", { key: "82a6d8f0d0c69ca52f81d092a2292fc80238265b", class: "fallback", hidden: this.hasImage, "aria-hidden": this.hasImage ? "true" : "false" }, fallbackText)));
   }
   static get watchers() {
     return {

package/dist/ui-badge.entry-OJ6FJJKL.js

@@ -0,0 +1,22 @@
+import {
+  Host,
+  h,
+  registerInstance
+} from "./chunk-UY423IKN.js";
+
+// dist/esm/ui-badge.entry.js
+var uiBadgeCss = () => `:host{--ui-badge-surface:var(--ui-surface-muted);--ui-badge-text:var(--ui-text-secondary);--ui-badge-border:var(--ui-border-default);--ui-badge-font-size:var(--ui-font-size-xs);--ui-badge-font-weight:var(--ui-font-normal);--ui-badge-line-height:var(--ui-line-height-tight);--ui-badge-padding-block:var(--ui-space-0-5);--ui-badge-padding-inline:var(--ui-space-2);display:inline-flex;max-width:100%}.badge__surface{display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:var(--ui-badge-padding-block) var(--ui-badge-padding-inline);border:1px solid var(--ui-badge-border);border-radius:var(--ui-radius-round);background:var(--ui-badge-surface);color:var(--ui-badge-text);font-family:var(--ui-font-family-sans);font-size:var(--ui-badge-font-size);font-weight:var(--ui-badge-font-weight);line-height:var(--ui-badge-line-height);white-space:nowrap}:host([data-tone='accent']) .badge__surface{--ui-badge-surface:var(--ui-accent-solid);--ui-badge-border:var(--ui-accent-solid);--ui-badge-text:var(--ui-text-on-accent)}:host([data-tone='danger']) .badge__surface{--ui-badge-surface:var(--ui-danger-solid);--ui-badge-border:var(--ui-danger-solid);--ui-badge-text:var(--ui-text-on-accent)}:host([data-tone='success']) .badge__surface{--ui-badge-surface:var(--ui-success-solid);--ui-badge-border:var(--ui-success-solid);--ui-badge-text:var(--ui-text-on-accent)}:host([data-tone='warning']) .badge__surface{--ui-badge-surface:var(--ui-warning-solid);--ui-badge-border:var(--ui-warning-solid);--ui-badge-text:var(--ui-text-primary)}:host([data-tone='info']) .badge__surface{--ui-badge-surface:var(--ui-info-solid);--ui-badge-border:var(--ui-info-solid);--ui-badge-text:var(--ui-text-on-accent)}:host([data-variant='subtle'][data-tone='accent']) .badge__surface{--ui-badge-surface:var(--ui-accent-soft);--ui-badge-border:var(--ui-accent-soft);--ui-badge-text:var(--ui-accent-solid)}:host([data-variant='subtle'][data-tone='danger']) .badge__surface{--ui-badge-surface:var(--ui-danger-soft);--ui-badge-border:var(--ui-danger-soft);--ui-badge-text:var(--ui-danger-solid)}:host([data-variant='subtle'][data-tone='success']) .badge__surface{--ui-badge-surface:var(--ui-success-soft);--ui-badge-border:var(--ui-success-soft);--ui-badge-text:var(--ui-success-solid)}:host([data-variant='subtle'][data-tone='warning']) .badge__surface{--ui-badge-surface:var(--ui-warning-soft);--ui-badge-border:var(--ui-warning-soft);--ui-badge-text:var(--ui-warning-solid)}:host([data-variant='subtle'][data-tone='info']) .badge__surface{--ui-badge-surface:var(--ui-info-soft);--ui-badge-border:var(--ui-info-soft);--ui-badge-text:var(--ui-info-solid)}`;
+var UIBadge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  variant;
+  tone;
+  render() {
+    return h(Host, { key: "ba96ade6d037a7ed9958e7eed540e62782f846f0", "data-variant": this.variant || void 0, "data-tone": this.tone || void 0 }, h("span", { key: "a1e9587f59de479c19b9ea7aec8c8e932b998369", class: "badge__surface" }, h("slot", { key: "5835ddcea5cda472e700557528fd3cbc9d572616" })));
+  }
+};
+UIBadge.style = uiBadgeCss();
+export {
+  UIBadge as ui_badge
+};

package/dist/{ui-button.entry-7UXMUGHN.js → ui-button.entry-ZN6JLND7.js}

@@ -6,7 +6,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-button.entry.js
 var uiButtonCss = () => `:host{display:inline-flex;vertical-align:middle;color:var(--ui-action-secondary-text, var(--ui-text-primary))}:host([data-variant='solid']){color:var(--ui-action-primary-text, var(--ui-text-on-accent))}:host([data-variant='outline']) ::slotted(button),::slotted(button){appearance:none;min-block-size:var(--ui-button-min-block-size, 2.5rem);border:1px solid var(--ui-control-border, var(--ui-border-default));border-radius:var(--ui-button-radius, var(--ui-radius-2));background:var(--ui-action-secondary-surface, var(--ui-surface-default));color:inherit;font:inherit;font-weight:var(--ui-font-medium, 500);line-height:var(--ui-line-height-tight);padding:var(--ui-space-2) var(--ui-space-3);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);margin:0}:host([data-size='sm']) ::slotted(button){padding:var(--ui-space-1) var(--ui-space-2);font-size:0.875rem}:host([data-size='lg']) ::slotted(button){min-block-size:var(--ui-control-min-block-size, 2.75rem);padding:var(--ui-space-3) var(--ui-space-4);font-size:1rem}::slotted(button:hover:enabled){background:var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));border-color:var(--ui-control-border-hover, var(--ui-border-strong))}::slotted(button:active:enabled){background:var(--ui-surface-subtle)}:host([data-variant='solid']) ::slotted(button){border-color:var(--ui-action-primary-surface, var(--ui-accent-solid));background:var(--ui-action-primary-surface, var(--ui-accent-solid));color:var(--ui-action-primary-text, var(--ui-text-on-accent));box-shadow:var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs))}:host([data-variant='solid']) ::slotted(button:hover:enabled){background:var(--ui-action-primary-surface-hover, var(--ui-accent-hover));border-color:var(--ui-action-primary-surface-hover, var(--ui-accent-hover));box-shadow:var(--ui-shadow-sm);transform:translateY(-1px)}:host([data-variant='solid']) ::slotted(button:active:enabled){background:var(--ui-action-primary-surface-active, var(--ui-accent-active));border-color:var(--ui-action-primary-surface-active, var(--ui-accent-active));box-shadow:none;transform:translateY(0)}:host([data-variant='destructive']) ::slotted(button){border-color:var(--ui-danger-solid);background:var(--ui-danger-solid);color:var(--ui-text-on-accent);box-shadow:var(--ui-button-destructive-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs))}:host([data-variant='destructive']) ::slotted(button:hover:enabled){background:var(--ui-danger-hover);border-color:var(--ui-danger-hover);box-shadow:var(--ui-shadow-sm);transform:translateY(-1px)}:host([data-variant='destructive']) ::slotted(button:active:enabled){box-shadow:none;transform:translateY(0)}:host([data-variant='ghost']) ::slotted(button){border-color:transparent;background:transparent}:host([data-variant='ghost']) ::slotted(button:hover:enabled){background:var(--ui-surface-muted);border-color:transparent}:host([data-variant='ghost']) ::slotted(button:active:enabled){background:var(--ui-surface-subtle);border-color:transparent}::slotted(button:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}:host([data-disabled='true']),:host([disabled]){opacity:0.6;cursor:not-allowed}::slotted(button:disabled){cursor:not-allowed}`;
@@ -58,7 +58,7 @@ var UIButton = class {
     this.host.click();
   };
   render() {
-    return h(Host, { key: "9c8d479fe7f1873a447048944513648bac132d52", "data-size": this.size || void 0, "data-variant": this.variant, "data-disabled": this.disabled ? "true" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "741f48e7efd42262834992c07c4685d3e929d91c", ref: (el) => this.slotRef = el }));
+    return h(Host, { key: "58a90293e2ac169c8bc3c6cb3d15428cc73629b7", "data-size": this.size || void 0, "data-variant": this.variant, "data-disabled": this.disabled ? "true" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "05439bdc2af81bcabe9da11b4baf13f880e0a75f", ref: (el) => this.slotRef = el }));
   }
   static get watchers() {
     return {

package/dist/ui-callout.entry-7K6NXQ7U.js

@@ -0,0 +1,32 @@
+import {
+  loomaIconMarkup
+} from "./chunk-NB6DBRXQ.js";
+import {
+  Host,
+  h,
+  registerInstance
+} from "./chunk-UY423IKN.js";
+
+// dist/esm/ui-callout.entry.js
+var uiCalloutCss = () => `:host{--ui-callout-surface:var(--ui-info-soft);--ui-callout-text:var(--ui-text-primary);--ui-callout-border:var(--ui-info-solid);--ui-callout-icon:var(--ui-info-solid);--ui-callout-padding-block:var(--ui-space-2);--ui-callout-padding-inline:var(--ui-space-3);--ui-callout-icon-column:1rem;--ui-callout-gap:var(--ui-space-2);--ui-callout-icon-size:1rem;--ui-callout-border-width:1px;--ui-callout-leading-border-width:4px;display:block;max-width:100%}.callout__surface{display:grid;grid-template-columns:var(--ui-callout-icon-column) minmax(0, 1fr);gap:var(--ui-callout-gap);align-items:start;padding:var(--ui-callout-padding-block) var(--ui-callout-padding-inline);border:var(--ui-callout-border-width) solid color-mix(in srgb, var(--ui-callout-border) 35%, transparent);border-inline-start:var(--ui-callout-leading-border-width) solid var(--ui-callout-border);border-radius:var(--ui-radius-2);background:var(--ui-callout-surface);color:var(--ui-callout-text);font-family:var(--ui-font-family-sans);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-normal);line-height:var(--ui-line-height-md)}.icon{display:grid;place-items:center;inline-size:var(--ui-callout-icon-column);block-size:var(--ui-callout-icon-column);color:var(--ui-callout-icon)}.icon svg{inline-size:var(--ui-callout-icon-size);block-size:var(--ui-callout-icon-size)}.content{min-inline-size:0}:host([data-tone='note']){--ui-callout-surface:var(--ui-surface-muted);--ui-callout-border:var(--ui-border-strong);--ui-callout-icon:var(--ui-text-secondary)}:host([data-tone='warning']){--ui-callout-surface:var(--ui-warning-soft);--ui-callout-border:var(--ui-warning-solid);--ui-callout-icon:var(--ui-warning-solid)}:host([data-tone='success']){--ui-callout-surface:var(--ui-success-soft);--ui-callout-border:var(--ui-success-solid);--ui-callout-icon:var(--ui-success-solid)}:host([data-tone='error']){--ui-callout-surface:var(--ui-danger-soft);--ui-callout-border:var(--ui-danger-solid);--ui-callout-icon:var(--ui-danger-solid)}`;
+var toneIcons = {
+  info: "info",
+  note: "notebook-pen",
+  warning: "triangle-alert",
+  success: "circle-check",
+  error: "circle-x"
+};
+var UICallout = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  tone = "info";
+  render() {
+    const icon = toneIcons[this.tone] ?? toneIcons.info;
+    return h(Host, { key: "94bae6fbb688e5c8da979a3bebc12c51b8689c8a", role: "note", "data-tone": this.tone }, h("div", { key: "8fe1a3dae5b7cd3679d187cef018fa0cd810fb76", class: "callout__surface" }, h("span", { key: "ed62ad8e29c30489e075631d83f1732d7a53a378", class: "icon", "aria-hidden": "true", innerHTML: loomaIconMarkup(icon) }), h("div", { key: "97638d28e3979f71913c17b2501a90e3a9251f0f", class: "content" }, h("slot", { key: "6a91a0d3f189eae28aabbe278924ba7f89015f34" }))));
+  }
+};
+UICallout.style = uiCalloutCss();
+export {
+  UICallout as ui_callout
+};

package/dist/{ui-checkbox.entry-DMZJB3RE.js → ui-checkbox.entry-GUYRVU6O.js}

@@ -1,3 +1,7 @@
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
 import {
   dispatchDetail,
   eventToTrigger
@@ -7,7 +11,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-checkbox.entry.js
 var uiCheckboxCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2);color:var(--ui-text-primary)}:host([aria-disabled='true']),:host([data-disabled='true']){opacity:0.6;cursor:not-allowed}::slotted(input[type='checkbox']){accent-color:var(--ui-accent-solid);width:1.125em;height:1.125em;cursor:pointer}::slotted(input[type='checkbox']:focus-visible){outline:2px solid var(--ui-accent-solid);outline-offset:2px}`;
@@ -18,7 +22,8 @@ var UICheckbox = class {
   get host() {
     return getElement(this);
   }
-  checked = false;
+  /** Controlled checked state. Omit it to use defaultChecked and local interaction state. */
+  checked;
   defaultChecked = false;
   disabled = false;
   indeterminate = false;
@@ -27,7 +32,8 @@ var UICheckbox = class {
   internalChecked = false;
   slotRef;
   syncFromProp() {
-    this.internalChecked = this.checked;
+    if (isControlled(this.checked))
+      this.internalChecked = this.checked;
   }
   syncToInput() {
     const input = this.getInput();
@@ -42,8 +48,7 @@ var UICheckbox = class {
     input.value = this.value;
   }
   componentDidLoad() {
-    this.syncFromProp();
-    this.internalChecked = this.internalChecked || this.defaultChecked;
+    this.internalChecked = controlledOrDefault(this.checked, this.defaultChecked);
     this.slotRef?.addEventListener("slotchange", () => this.syncToInput());
     this.syncToInput();
     const input = this.getInput();
@@ -65,16 +70,20 @@ var UICheckbox = class {
     const input = e.target;
     if (!input)
       return;
-    this.internalChecked = input.checked;
+    const checked = input.checked;
+    if (!isControlled(this.checked))
+      this.internalChecked = checked;
+    else
+      this.syncToInput();
     this.indeterminate = input.indeterminate;
     dispatchDetail(this.host, "change", {
-      checked: this.internalChecked,
+      checked,
       value: this.value,
       trigger: eventToTrigger(e)
     });
   };
   render() {
-    return h(Host, { key: "66b6708ae71c9eca6c03c63891b590bd050c2506", role: "checkbox", "aria-checked": this.indeterminate ? "mixed" : String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? "" : void 0 }, h("slot", { key: "b5e168a9ff0c6e5e747fff6c6264c59744f10a56", ref: (el) => this.slotRef = el }));
+    return h(Host, { key: "eb46eb41a5ab871058960bd2aa1163a03144bc0f", role: "checkbox", "aria-checked": this.indeterminate ? "mixed" : String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? "" : void 0 }, h("slot", { key: "ce18b1f1b63efebf048cd67b87064641cf4d915c", ref: (el) => this.slotRef = el }));
   }
   static get watchers() {
     return {

package/dist/{ui-combobox.entry-ZCTPXEES.js → ui-chip_2.entry-M2DOTIGY.js}

@@ -11,9 +11,23 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-UY423IKN.js";
 
-// dist/esm/ui-combobox.entry.js
+// dist/esm/ui-chip_2.entry.js
+var uiChipCss = () => `:host{--ui-chip-surface:var(--ui-surface-subtle);--ui-chip-text:var(--ui-text-secondary);--ui-chip-border:var(--ui-border-default);--ui-chip-font-size:var(--ui-font-size-xs);--ui-chip-font-weight:var(--ui-font-normal);--ui-chip-line-height:var(--ui-line-height-tight);--ui-chip-padding-block:var(--ui-space-0-5);--ui-chip-padding-inline:var(--ui-space-2);--ui-chip-notch:var(--ui-space-1);display:inline-flex;max-width:100%}:host([data-size='sm']){--ui-chip-font-size:var(--ui-font-size-sm)}.chip__surface{display:inline-flex;align-items:center;max-width:100%;padding:var(--ui-chip-padding-block) var(--ui-chip-padding-inline);border:1px solid var(--ui-chip-border);background:var(--ui-chip-surface);color:var(--ui-chip-text) !important;font-family:var(--ui-font-family-sans) !important;font-size:var(--ui-chip-font-size) !important;font-weight:var(--ui-chip-font-weight) !important;line-height:var(--ui-chip-line-height) !important;white-space:nowrap}:host([data-appearance='pill']) .chip__surface{border-radius:var(--ui-radius-round)}:host([data-appearance='tag']) .chip__surface{border:0;padding-inline-end:calc(var(--ui-chip-padding-inline) + var(--ui-chip-notch));clip-path:polygon(0 0, calc(100% - var(--ui-chip-notch)) 0, 100% 50%, calc(100% - var(--ui-chip-notch)) 100%, 0 100%)}`;
+var UIChip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  /** `tag` has a square leading edge and an angled trailing edge; `pill` is fully rounded. */
+  appearance = "tag";
+  /** Compact typography size. */
+  size = "xs";
+  render() {
+    return h(Host, { key: "970cb48cf8d70c47feaab90fe428c09f0d052a03", "data-appearance": this.appearance, "data-size": this.size }, h("span", { key: "6d8c6104d2869520097a2a61bd2a887b363b4912", class: "chip__surface" }, h("slot", { key: "b61c50a8060d8a2684aed6f87dc859b1c9e99858" })));
+  }
+};
+UIChip.style = uiChipCss();
 function formatEditingValue(raw, selection, format) {
   const unchanged = { display: raw, selection };
   if (!format)
@@ -102,6 +116,8 @@ var UICombobox = class {
   readOnly = false;
   required = false;
   size = "md";
+  /** Keep the native label accessible while allowing compact composed controls. */
+  labelVisibility = "visible";
   disclosure = false;
   clearable = false;
   /** Optional description shown by the connected question-mark button. */
@@ -328,7 +344,8 @@ var UICombobox = class {
     }, reason === "disclosure" ? 0 : Math.max(0, config.debounce ?? 200));
   }
   get canCreate() {
-    return Boolean(this.config.allowCreate && this.raw.trim() && !this.loading && !this.lookupError && !this.rows.some((row) => row.label.toLocaleLowerCase() === this.raw.toLocaleLowerCase()));
+    const candidates = this.config.options ? [...this.config.options, ...this.rows] : this.rows;
+    return Boolean(this.config.allowCreate && this.raw.trim() && !this.loading && !this.lookupError && !candidates.some((row) => row.label.toLocaleLowerCase() === this.raw.toLocaleLowerCase()));
   }
   format(timing) {
     if ((this.config.formatOn ?? "blur") !== timing || !this.input)
@@ -508,24 +525,31 @@ var UICombobox = class {
     }
     return this.validation;
   }
+  /** Focus the native editing input from a composed control. */
+  async focusInput() {
+    this.input?.focus();
+  }
   render() {
     const description = [this.helpOpen ? "help-text" : "", this.validation.issues.length ? "validation" : ""].filter(Boolean).join(" ") || void 0;
     const status = this.loading ? "Loading suggestions\u2026" : this.lookupError || (this.expanded ? `${this.rows.length} suggestions available.` : "");
     const groups = [...new Set(this.rows.map((row) => row.group ?? ""))];
-    return h(Host, { key: "2378bfd8473852642fef21898f4a756eb3b092ba", "data-size": this.size, "data-validation": this.validation.status, onFocusout: this.onFocusOut }, h("label", { key: "7aba65aeb336d490ddeaf5db9bba9db8ab8b9dbb", htmlFor: "input", part: "label" }, this.label, this.required ? " *" : ""), h("div", { key: "ee87156259d0fe1e2e56c4b36667e8daf5e1e2c1", class: "field", part: "field", ref: (element) => this.field = element }, h("input", { key: "35c5b85ff9a4bcba9bddaf85ff1f118a94aa077b", id: "input", ref: (element) => this.input = element, role: "combobox", "aria-autocomplete": "list", "aria-expanded": String(this.expanded), "aria-controls": "listbox", "aria-activedescendant": this.expanded && this.active >= 0 ? `option-${this.active}` : void 0, "aria-describedby": description, "aria-invalid": String(this.validation.status === "error"), "aria-busy": String(this.validation.status === "pending"), value: this.display, placeholder: this.placeholder, name: this.name || void 0, disabled: this.disabled, readOnly: this.readOnly, required: this.required, autoComplete: "off", part: "input", onInput: this.onInput, onKeyDown: this.onKeydown, onCompositionstart: () => this.composing = true, onCompositionend: () => {
+    return h(Host, { key: "a33890c2824f29dfea5e22edddca4480a6d1d032", "data-size": this.size, "data-validation": this.validation.status, onFocusout: this.onFocusOut }, h("label", { key: "c936530cf696c1d14245fd83895e9c58c908df12", htmlFor: "input", part: "label", class: this.labelVisibility === "sr-only" ? "sr-only" : void 0 }, this.label, this.required ? " *" : ""), h("div", { key: "0fe0ed9b15a3e256867e071ca7e4fa3abc66f27c", class: "field", part: "field", ref: (element) => this.field = element, onClick: (event) => {
+      if (!event.composedPath().some((node) => node instanceof HTMLButtonElement))
+        this.input?.focus();
+    } }, h("slot", { key: "9cc4c22eb7776e415792fbdf3c17c962c7107f70", name: "start" }), h("input", { key: "0898e8ec5af57c7ba8ad227164f7955ef4011729", id: "input", ref: (element) => this.input = element, role: "combobox", "aria-autocomplete": "list", "aria-expanded": String(this.expanded), "aria-controls": "listbox", "aria-activedescendant": this.expanded && this.active >= 0 ? `option-${this.active}` : void 0, "aria-describedby": description, "aria-invalid": String(this.validation.status === "error"), "aria-busy": String(this.validation.status === "pending"), value: this.display, placeholder: this.placeholder, name: this.name || void 0, disabled: this.disabled, readOnly: this.readOnly, required: this.required, autoComplete: "off", part: "input", onInput: this.onInput, onKeyDown: this.onKeydown, onCompositionstart: () => this.composing = true, onCompositionend: () => {
       this.composing = false;
       this.onInput(new InputEvent("input"));
-    } }), this.clearable && h("button", { key: "74e4f44836b751ab5e9f794a39b480602e0c106d", type: "button", part: "affordance", "aria-label": `Clear ${this.label}`, disabled: this.disabled || this.readOnly, onClick: () => {
+    } }), this.clearable && h("button", { key: "f9a49484ae9bcc4ace72a46d0c59202040ff39d8", type: "button", part: "affordance", "aria-label": `Clear ${this.label}`, disabled: this.disabled || this.readOnly, onClick: () => {
       this.commit(null, "", null, "clear", "pointer");
       this.close();
       this.input?.focus();
-    } }, "\xD7"), this.help && h("button", { key: "c870ced139fb22baa50a1795ab78f14c38647d34", id: "help", type: "button", part: "affordance", "aria-label": `Help for ${this.label}`, disabled: this.disabled }, h("span", { key: "ba3dc5128c1941b21b53a5ba78a27017b3df5ec8", "aria-hidden": "true" }, "?")), this.disclosure && h("button", { key: "eced588e3fa7958dd6185173faaef01219c30243", type: "button", part: "affordance", "aria-label": `Suggestions for ${this.label}`, "aria-controls": "listbox", "aria-expanded": String(this.expanded), disabled: this.disabled || this.readOnly, onClick: () => {
+    } }, "\xD7"), this.help && h("button", { key: "597106eda4dcc68aa9fb2eaa99c1edad0d68a892", id: "help", type: "button", part: "affordance", "aria-label": `Help for ${this.label}`, disabled: this.disabled }, h("span", { key: "d26085a52b16d65e26dc20ef8afacb5defec5f7b", "aria-hidden": "true" }, "?")), this.disclosure && h("button", { key: "391d1c987eb8e868b2846eafd0627cfc78ab7478", type: "button", part: "affordance", "aria-label": `Suggestions for ${this.label}`, "aria-controls": "listbox", "aria-expanded": String(this.expanded), disabled: this.disabled || this.readOnly, onClick: () => {
       if (this.expanded)
         this.close();
       else
         this.open("disclosure");
       this.input?.focus();
-    } }, h("span", { key: "7cb9f7f2bb15246dcdd2348ea0ca656d1d0c8c33", "aria-hidden": "true" }, "\u2304"))), this.help && h("ui-tooltip", { key: "b1b5d42ca457f9b951758bb5e816c8dbbcd1087d", id: "help-text", for: "help", toggleOnClick: true, onOpen: () => this.helpOpen = true, onClose: () => this.helpOpen = false }, this.help), h("div", { key: "9eca2df66c72917e6bfda21205c2a4ef97dd91d5", class: "popup", part: "popup", hidden: !this.expanded, ref: (element) => this.popup = element }, h("div", { key: "641e1f137c9cfef5d08ec99f6178e59487a20bf1", id: "listbox", role: "listbox", "aria-label": `${this.label} suggestions`, "aria-busy": String(this.loading) }, groups.map((group) => h("div", { role: group ? "group" : "presentation", "aria-label": group || void 0 }, group && h("div", { class: "group", part: "group" }, group), this.rows.map((row, index) => (row.group ?? "") !== group ? null : h("div", { id: `option-${index}`, role: "option", "aria-selected": String(this.selected === row.value), "aria-disabled": String(Boolean(row.disabled)), "data-active": this.active === index ? "" : void 0, part: "option", class: "option", onPointerDown: (event) => event.preventDefault(), onClick: () => this.choose(index, "pointer") }, h("slot", { name: `option-${row.id}` }, h("span", { class: "primary", part: "option-primary" }, row.label), row.description && h("span", { class: "secondary", part: "option-secondary" }, row.description)))))), this.canCreate && h("div", { key: "38a3aa6b2ffae30e6f81e1f89d10c9966dd31b10", id: `option-${this.rows.length}`, role: "option", "aria-selected": "false", class: "option", part: "option", "data-active": this.active === this.rows.length ? "" : void 0, onPointerDown: (event) => event.preventDefault(), onClick: () => this.choose(this.rows.length, "pointer") }, h("slot", { key: "dd3e895ef363f6d30a0c25e4b5092a8feacc63e5", name: "create" }, "Create \u201C", this.raw, "\u201D"))), this.loading ? h("div", { class: "message" }, h("slot", { name: "loading" }, "Loading suggestions\u2026")) : this.lookupError ? h("div", { class: "message" }, h("slot", { name: "error" }, this.lookupError)) : !this.rows.length && !this.canCreate ? h("div", { class: "message" }, h("slot", { name: "empty" }, "No suggestions.")) : null), h("div", { key: "9cf12a8fde7d9cfb9e2d2a77669ac4708c7fded6", id: "validation", class: "message", part: "validation", hidden: !this.validation.issues.length }, this.validation.issues.map((issue) => h("div", null, issue.message))), h("div", { key: "1c7b1d3f658e500cbf5f5004a76a39511cc79c49", class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, status, " ", this.validation.status === "pending" ? "Checking value\u2026" : this.validation.issues.map((issue) => issue.message).join(" ")));
+    } }, h("span", { key: "45678ce468fd7944306d4542e3c6af0fe211af14", "aria-hidden": "true" }, "\u2304"))), this.help && h("ui-tooltip", { key: "a8dc037639a60aff5a12b4651ffa10fc5ccd33eb", id: "help-text", for: "help", toggleOnClick: true, onOpen: () => this.helpOpen = true, onClose: () => this.helpOpen = false }, this.help), h("div", { key: "f13fc7a11c3d22995035b6701ea24637a048a5b8", class: "popup", part: "popup", hidden: !this.expanded, ref: (element) => this.popup = element }, h("div", { key: "9d2bdfcc558f8e7de87f2915ea5607a8f32c1762", id: "listbox", role: "listbox", "aria-label": `${this.label} suggestions`, "aria-busy": String(this.loading) }, groups.map((group) => h("div", { role: group ? "group" : "presentation", "aria-label": group || void 0 }, group && h("div", { class: "group", part: "group" }, group), this.rows.map((row, index) => (row.group ?? "") !== group ? null : h("div", { id: `option-${index}`, role: "option", "aria-selected": String(this.selected === row.value), "aria-disabled": String(Boolean(row.disabled)), "data-active": this.active === index ? "" : void 0, part: "option", class: "option", onPointerDown: (event) => event.preventDefault(), onClick: () => this.choose(index, "pointer") }, h("slot", { name: `option-${row.id}` }, h("span", { class: "primary", part: "option-primary" }, row.label), row.description && h("span", { class: "secondary", part: "option-secondary" }, row.description)))))), this.canCreate && h("div", { key: "9495fd43a721c84621b8083cb8eac776f843ab59", id: `option-${this.rows.length}`, role: "option", "aria-selected": "false", class: "option", part: "option", "data-active": this.active === this.rows.length ? "" : void 0, onPointerDown: (event) => event.preventDefault(), onClick: () => this.choose(this.rows.length, "pointer") }, h("slot", { key: "f0407c5622dcf3b325985c136657f8b9ac8a4ab5", name: "create" }, "Create \u201C", this.raw, "\u201D"))), this.loading ? h("div", { class: "message" }, h("slot", { name: "loading" }, "Loading suggestions\u2026")) : this.lookupError ? h("div", { class: "message" }, h("slot", { name: "error" }, this.lookupError)) : !this.rows.length && !this.canCreate ? h("div", { class: "message" }, h("slot", { name: "empty" }, "No suggestions.")) : null, h("slot", { key: "efcaee3efb029a9e0bb4e033ab61b251331c1c93", name: "footer" })), h("div", { key: "b44ccb319f94ebc9e6ac3204a8c1771d49485a58", id: "validation", class: "message", part: "validation", hidden: !this.validation.issues.length }, this.validation.issues.map((issue) => h("div", null, issue.message))), h("div", { key: "c3cb51dd4603734af4c7a02d8fe0bb42ac69083a", class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, status, " ", this.validation.status === "pending" ? "Checking value\u2026" : this.validation.issues.map((issue) => issue.message).join(" ")));
   }
   static get watchers() {
     return {
@@ -549,5 +573,6 @@ var UICombobox = class {
 };
 UICombobox.style = uiComboboxCss();
 export {
+  UIChip as ui_chip,
   UICombobox as ui_combobox
 };

package/dist/{ui-context-menu.entry-2WMCBGCP.js → ui-context-menu.entry-BM7FHOUJ.js}

@@ -1,6 +1,3 @@
-import {
-  dispatchDetail
-} from "./chunk-UL7UIUJZ.js";
 import {
   closeOverlay,
   openOverlay,
@@ -9,12 +6,15 @@ import {
 import {
   createAnchoredSurface
 } from "./chunk-YHXJC5M5.js";
+import {
+  dispatchDetail
+} from "./chunk-UL7UIUJZ.js";
 import {
   Host,
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-context-menu.entry.js
 var uiContextMenuCss = () => `:host{display:contents}:host([data-focus-trigger='pointer']) ::slotted(ui-menu-item:focus){outline:none}.menu{position:fixed;inset:auto;margin:0;z-index:var(--ui-z-overlay, 1000);min-width:12rem;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}.menu:popover-open{opacity:1;transform:translateY(0) scale(1)}@starting-style{.menu:popover-open{opacity:0;transform:translateY(-4px) scale(0.99)}}.menu[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){.menu{transition:none}}`;
@@ -226,7 +226,7 @@ var UIContextMenu = class {
     this.closeMenu("action", "pointer");
   };
   render() {
-    return h(Host, { key: "641dd3aba6120cf4187f4503c64029eaf307dc4f", "data-open": this.internalOpen ? "" : void 0, "data-focus-trigger": this.internalOpen ? this.focusTrigger : void 0, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: "3f550349f9537b951b50a8c291f1951dd5a3b723", name: "trigger" }), h("div", { key: "a612523f054986122638722340d8135c44a85399", class: "menu", "data-open": this.internalOpen ? "" : void 0 }, h("ui-menu", { key: "0711879d09900183e938d8942abb8b9032812a5f", open: this.internalOpen }, h("slot", { key: "8e088dd20a48d8fb81126f2dd020abb886e86e22" }))));
+    return h(Host, { key: "171e647667bab4a9f905f2b531aa2db182fc426f", "data-open": this.internalOpen ? "" : void 0, "data-focus-trigger": this.internalOpen ? this.focusTrigger : void 0, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: "f1a15e54ab3b14515553e05b4b3cf60ed7a99f8b", name: "trigger" }), h("div", { key: "450aaacf3f75a71ecce86300c0d824452ceec4a0", class: "menu", "data-open": this.internalOpen ? "" : void 0 }, h("ui-menu", { key: "667003b7c6ab3ccbaa888b25cb87d921036ab827", open: this.internalOpen }, h("slot", { key: "c0731115bc3dbd02c4125ef8208269dd97e124bf" }))));
   }
   static get watchers() {
     return {

package/dist/{ui-dialog.entry-WO23XOSW.js → ui-dialog.entry-AZAD37CG.js}

@@ -1,17 +1,21 @@
-import {
-  dispatchDetail
-} from "./chunk-UL7UIUJZ.js";
 import {
   closeOverlay,
   openOverlay,
   requestTopOverlayClose
 } from "./chunk-TL4FIE7X.js";
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
+import {
+  dispatchDetail
+} from "./chunk-UL7UIUJZ.js";
 import {
   Host,
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-UY423IKN.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: "6e88afd3a595ab0eed3d82a046ffb15e1e167cdb", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("dialog", { key: "420e4d8de66245a5818a1284adb23a536ebcd907", ref: (el) => this.dialogRef = el, open: this.internalOpen, "aria-label": this.label }, h("slot", { key: "10604688504f013f79b7a6ed5f9ed36bc9c6b48b" })));
+    return h(Host, { key: "6e12a287866c76305c791c0ae538dcde63da3044", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("dialog", { key: "99ba3815e8a8c70ce50ff08d9a8b162aa9c1011f", ref: (el) => this.dialogRef = el, open: this.internalOpen, "aria-label": this.accessibleLabel }, h("slot", { key: "e72b001877d2dfad1bcee9af87167c66d77fc952" })));
   }
   static get watchers() {
     return {
       "open": [{
         "syncFromProp": 0
       }],
+      "label": [{
+        "syncLabelFromProp": 0
+      }],
       "internalOpen": [{
         "syncOpen": 0
       }]