@threadlabs/looma 0.1.23 → 0.1.24

package/dist/types/components.d.ts

@@ -5,8 +5,10 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { CalloutTone } from "./components/ui-callout/ui-callout";
 import { ComboboxChange, ComboboxConfig, ComboboxOption, ComboboxValidationState } from "./field/combobox";
 import { AnchoredPlacement } from "./overlay/positioning";
+export { CalloutTone } from "./components/ui-callout/ui-callout";
 export { ComboboxChange, ComboboxConfig, ComboboxOption, ComboboxValidationState } from "./field/combobox";
 export { AnchoredPlacement } from "./overlay/positioning";
 export namespace Components {
@@ -60,11 +62,20 @@ export namespace Components {
          */
         "variant": 'outline' | 'solid' | 'destructive' | 'ghost';
     }
+    /**
+     * A static semantic message with a tone-specific icon.
+     */
+    interface UiCallout {
+        /**
+          * @default 'info'
+         */
+        "tone": CalloutTone;
+    }
     interface UiCheckbox {
         /**
-          * @default false
+          * Controlled checked state. Omit it to use defaultChecked and local interaction state.
          */
-        "checked": boolean;
+        "checked"?: boolean;
         /**
           * @default false
          */
@@ -86,6 +97,16 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * A compact, non-interactive metadata label.
+     */
+    interface UiChip {
+        /**
+          * `tag` has a square leading edge and an angled trailing edge; `pill` is fully rounded.
+          * @default 'tag'
+         */
+        "appearance": 'tag' | 'pill';
+    }
     /**
      * A single editable field with contextual suggestions, optional help and field validation.
      */
@@ -189,9 +210,9 @@ export namespace Components {
          */
         "modal": boolean;
         /**
-          * @default false
+          * Controlled open state. Omit it to use defaultOpen and local interaction state.
          */
-        "open": boolean;
+        "open"?: boolean;
     }
     interface UiDisclosure {
         /**
@@ -203,9 +224,9 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * @default false
+          * Controlled open state. Omit it to use defaultOpen and local interaction state.
          */
-        "open": boolean;
+        "open"?: boolean;
     }
     interface UiFloatingActionButton {
         /**
@@ -287,9 +308,9 @@ export namespace Components {
          */
         "for"?: string;
         /**
-          * @default false
+          * Controlled open state. Omit it to use defaultOpen and local interaction state.
          */
-        "open": boolean;
+        "open"?: boolean;
         /**
           * Preferred placement; Looma flips and shifts when space is constrained.
           * @default 'bottom-start'
@@ -316,9 +337,9 @@ export namespace Components {
          */
         "for"?: string;
         /**
-          * @default false
+          * Controlled open state. Omit it to use defaultOpen and local interaction state.
          */
-        "open": boolean;
+        "open"?: boolean;
         /**
           * @default 'bottom-start'
          */
@@ -326,9 +347,9 @@ export namespace Components {
     }
     interface UiRadio {
         /**
-          * @default false
+          * Controlled checked state. Omit it to use defaultChecked and local interaction state.
          */
-        "checked": boolean;
+        "checked"?: boolean;
         /**
           * @default false
          */
@@ -402,9 +423,9 @@ export namespace Components {
     }
     interface UiSwitch {
         /**
-          * @default false
+          * Controlled checked state. Omit it to use defaultChecked and local interaction state.
          */
-        "checked": boolean;
+        "checked"?: boolean;
         /**
           * @default false
          */
@@ -432,9 +453,9 @@ export namespace Components {
          */
         "orientation": 'horizontal' | 'vertical';
         /**
-          * @default ''
+          * Controlled selected tab value. Omit it to use defaultValue and local interaction state.
          */
-        "value": string;
+        "value"?: string;
     }
     interface UiTextarea {
         /**
@@ -480,9 +501,9 @@ export namespace Components {
          */
         "hideDelay": number;
         /**
-          * @default false
+          * Controlled open state. Omit it to use defaultOpen and local interaction state.
          */
-        "open": boolean;
+        "open"?: boolean;
         /**
           * @default 'top-start'
          */
@@ -531,11 +552,6 @@ export namespace Components {
           * @default false
          */
         "defaultExpanded": boolean;
-        /**
-          * One-based visual and semantic nesting level.
-          * @default 1
-         */
-        "depth": number;
         /**
           * @default false
          */
@@ -546,7 +562,7 @@ export namespace Components {
          */
         "dragType": string;
         /**
-          * Application hierarchy depth used for drop constraints. Defaults to visual depth.
+          * Application hierarchy depth override used for drop constraints. Defaults to structural nesting.
          */
         "dropDepth"?: number;
         /**
@@ -555,10 +571,9 @@ export namespace Components {
          */
         "dropScope": string;
         /**
-          * Initial controlled expansion value.
-          * @default false
+          * Controlled expansion value. When omitted, `default-expanded` initializes uncontrolled state.
          */
-        "expanded": boolean;
+        "expanded"?: boolean;
         /**
           * Stable application identifier emitted by tree interaction events.
           * @default ''
@@ -579,7 +594,7 @@ export namespace Components {
          */
         "sortable": boolean;
         /**
-          * Deepest descendant distance, used with the tree's max-depth drop constraint.
+          * Virtualized-tree descendant-depth override for the tree's max-depth drop constraint.
          */
         "subtreeDepth"?: number;
     }
@@ -623,12 +638,30 @@ declare global {
         prototype: HTMLUiButtonElement;
         new (): HTMLUiButtonElement;
     };
+    /**
+     * A static semantic message with a tone-specific icon.
+     */
+    interface HTMLUiCalloutElement extends Components.UiCallout, HTMLStencilElement {
+    }
+    var HTMLUiCalloutElement: {
+        prototype: HTMLUiCalloutElement;
+        new (): HTMLUiCalloutElement;
+    };
     interface HTMLUiCheckboxElement extends Components.UiCheckbox, HTMLStencilElement {
     }
     var HTMLUiCheckboxElement: {
         prototype: HTMLUiCheckboxElement;
         new (): HTMLUiCheckboxElement;
     };
+    /**
+     * A compact, non-interactive metadata label.
+     */
+    interface HTMLUiChipElement extends Components.UiChip, HTMLStencilElement {
+    }
+    var HTMLUiChipElement: {
+        prototype: HTMLUiChipElement;
+        new (): HTMLUiChipElement;
+    };
     interface HTMLUiComboboxElementEventMap {
         "query-change": { query: string; display: string; trigger: 'keyboard' | 'pointer' | 'programmatic' };
         "value-change": ComboboxChange;
@@ -811,7 +844,9 @@ declare global {
         "ui-avatar-group": HTMLUiAvatarGroupElement;
         "ui-badge": HTMLUiBadgeElement;
         "ui-button": HTMLUiButtonElement;
+        "ui-callout": HTMLUiCalloutElement;
         "ui-checkbox": HTMLUiCheckboxElement;
+        "ui-chip": HTMLUiChipElement;
         "ui-combobox": HTMLUiComboboxElement;
         "ui-context-menu": HTMLUiContextMenuElement;
         "ui-dialog": HTMLUiDialogElement;
@@ -889,9 +924,18 @@ declare namespace LocalJSX {
          */
         "variant"?: 'outline' | 'solid' | 'destructive' | 'ghost';
     }
+    /**
+     * A static semantic message with a tone-specific icon.
+     */
+    interface UiCallout {
+        /**
+          * @default 'info'
+         */
+        "tone"?: CalloutTone;
+    }
     interface UiCheckbox {
         /**
-          * @default false
+          * Controlled checked state. Omit it to use defaultChecked and local interaction state.
          */
         "checked"?: boolean;
         /**
@@ -915,6 +959,16 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * A compact, non-interactive metadata label.
+     */
+    interface UiChip {
+        /**
+          * `tag` has a square leading edge and an angled trailing edge; `pill` is fully rounded.
+          * @default 'tag'
+         */
+        "appearance"?: 'tag' | 'pill';
+    }
     /**
      * A single editable field with contextual suggestions, optional help and field validation.
      */
@@ -1024,7 +1078,7 @@ declare namespace LocalJSX {
          */
         "modal"?: boolean;
         /**
-          * @default false
+          * Controlled open state. Omit it to use defaultOpen and local interaction state.
          */
         "open"?: boolean;
     }
@@ -1038,7 +1092,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * @default false
+          * Controlled open state. Omit it to use defaultOpen and local interaction state.
          */
         "open"?: boolean;
     }
@@ -1122,7 +1176,7 @@ declare namespace LocalJSX {
          */
         "for"?: string;
         /**
-          * @default false
+          * Controlled open state. Omit it to use defaultOpen and local interaction state.
          */
         "open"?: boolean;
         /**
@@ -1151,7 +1205,7 @@ declare namespace LocalJSX {
          */
         "for"?: string;
         /**
-          * @default false
+          * Controlled open state. Omit it to use defaultOpen and local interaction state.
          */
         "open"?: boolean;
         /**
@@ -1161,7 +1215,7 @@ declare namespace LocalJSX {
     }
     interface UiRadio {
         /**
-          * @default false
+          * Controlled checked state. Omit it to use defaultChecked and local interaction state.
          */
         "checked"?: boolean;
         /**
@@ -1237,7 +1291,7 @@ declare namespace LocalJSX {
     }
     interface UiSwitch {
         /**
-          * @default false
+          * Controlled checked state. Omit it to use defaultChecked and local interaction state.
          */
         "checked"?: boolean;
         /**
@@ -1267,7 +1321,7 @@ declare namespace LocalJSX {
          */
         "orientation"?: 'horizontal' | 'vertical';
         /**
-          * @default ''
+          * Controlled selected tab value. Omit it to use defaultValue and local interaction state.
          */
         "value"?: string;
     }
@@ -1317,7 +1371,7 @@ declare namespace LocalJSX {
         "onClose"?: (event: UiTooltipCustomEvent<{ open: boolean; reason: string; trigger: string }>) => void;
         "onOpen"?: (event: UiTooltipCustomEvent<{ open: boolean; reason: string; trigger: string }>) => void;
         /**
-          * @default false
+          * Controlled open state. Omit it to use defaultOpen and local interaction state.
          */
         "open"?: boolean;
         /**
@@ -1368,11 +1422,6 @@ declare namespace LocalJSX {
           * @default false
          */
         "defaultExpanded"?: boolean;
-        /**
-          * One-based visual and semantic nesting level.
-          * @default 1
-         */
-        "depth"?: number;
         /**
           * @default false
          */
@@ -1383,7 +1432,7 @@ declare namespace LocalJSX {
          */
         "dragType"?: string;
         /**
-          * Application hierarchy depth used for drop constraints. Defaults to visual depth.
+          * Application hierarchy depth override used for drop constraints. Defaults to structural nesting.
          */
         "dropDepth"?: number;
         /**
@@ -1392,8 +1441,7 @@ declare namespace LocalJSX {
          */
         "dropScope"?: string;
         /**
-          * Initial controlled expansion value.
-          * @default false
+          * Controlled expansion value. When omitted, `default-expanded` initializes uncontrolled state.
          */
         "expanded"?: boolean;
         /**
@@ -1416,7 +1464,7 @@ declare namespace LocalJSX {
          */
         "sortable"?: boolean;
         /**
-          * Deepest descendant distance, used with the tree's max-depth drop constraint.
+          * Virtualized-tree descendant-depth override for the tree's max-depth drop constraint.
          */
         "subtreeDepth"?: number;
     }
@@ -1443,6 +1491,9 @@ declare namespace LocalJSX {
         "size": string;
         "disabled": boolean;
     }
+    interface UiCalloutAttributes {
+        "tone": CalloutTone;
+    }
     interface UiCheckboxAttributes {
         "checked": boolean;
         "defaultChecked": boolean;
@@ -1451,6 +1502,9 @@ declare namespace LocalJSX {
         "required": boolean;
         "value": string;
     }
+    interface UiChipAttributes {
+        "appearance": 'tag' | 'pill';
+    }
     interface UiComboboxAttributes {
         "label": string;
         "placeholder": string;
@@ -1590,7 +1644,6 @@ declare namespace LocalJSX {
     interface UiTreeItemAttributes {
         "itemId": string;
         "label": string;
-        "depth": number;
         "dropDepth": number;
         "subtreeDepth": number;
         "container": boolean;
@@ -1610,7 +1663,9 @@ declare namespace LocalJSX {
         "ui-avatar-group": Omit<UiAvatarGroup, keyof UiAvatarGroupAttributes> & { [K in keyof UiAvatarGroup & keyof UiAvatarGroupAttributes]?: UiAvatarGroup[K] } & { [K in keyof UiAvatarGroup & keyof UiAvatarGroupAttributes as `attr:${K}`]?: UiAvatarGroupAttributes[K] } & { [K in keyof UiAvatarGroup & keyof UiAvatarGroupAttributes as `prop:${K}`]?: UiAvatarGroup[K] };
         "ui-badge": Omit<UiBadge, keyof UiBadgeAttributes> & { [K in keyof UiBadge & keyof UiBadgeAttributes]?: UiBadge[K] } & { [K in keyof UiBadge & keyof UiBadgeAttributes as `attr:${K}`]?: UiBadgeAttributes[K] } & { [K in keyof UiBadge & keyof UiBadgeAttributes as `prop:${K}`]?: UiBadge[K] };
         "ui-button": Omit<UiButton, keyof UiButtonAttributes> & { [K in keyof UiButton & keyof UiButtonAttributes]?: UiButton[K] } & { [K in keyof UiButton & keyof UiButtonAttributes as `attr:${K}`]?: UiButtonAttributes[K] } & { [K in keyof UiButton & keyof UiButtonAttributes as `prop:${K}`]?: UiButton[K] };
+        "ui-callout": Omit<UiCallout, keyof UiCalloutAttributes> & { [K in keyof UiCallout & keyof UiCalloutAttributes]?: UiCallout[K] } & { [K in keyof UiCallout & keyof UiCalloutAttributes as `attr:${K}`]?: UiCalloutAttributes[K] } & { [K in keyof UiCallout & keyof UiCalloutAttributes as `prop:${K}`]?: UiCallout[K] };
         "ui-checkbox": Omit<UiCheckbox, keyof UiCheckboxAttributes> & { [K in keyof UiCheckbox & keyof UiCheckboxAttributes]?: UiCheckbox[K] } & { [K in keyof UiCheckbox & keyof UiCheckboxAttributes as `attr:${K}`]?: UiCheckboxAttributes[K] } & { [K in keyof UiCheckbox & keyof UiCheckboxAttributes as `prop:${K}`]?: UiCheckbox[K] };
+        "ui-chip": Omit<UiChip, keyof UiChipAttributes> & { [K in keyof UiChip & keyof UiChipAttributes]?: UiChip[K] } & { [K in keyof UiChip & keyof UiChipAttributes as `attr:${K}`]?: UiChipAttributes[K] } & { [K in keyof UiChip & keyof UiChipAttributes as `prop:${K}`]?: UiChip[K] };
         "ui-combobox": Omit<UiCombobox, keyof UiComboboxAttributes> & { [K in keyof UiCombobox & keyof UiComboboxAttributes]?: UiCombobox[K] } & { [K in keyof UiCombobox & keyof UiComboboxAttributes as `attr:${K}`]?: UiComboboxAttributes[K] } & { [K in keyof UiCombobox & keyof UiComboboxAttributes as `prop:${K}`]?: UiCombobox[K] };
         "ui-context-menu": Omit<UiContextMenu, keyof UiContextMenuAttributes> & { [K in keyof UiContextMenu & keyof UiContextMenuAttributes]?: UiContextMenu[K] } & { [K in keyof UiContextMenu & keyof UiContextMenuAttributes as `attr:${K}`]?: UiContextMenuAttributes[K] } & { [K in keyof UiContextMenu & keyof UiContextMenuAttributes as `prop:${K}`]?: UiContextMenu[K] };
         "ui-dialog": Omit<UiDialog, keyof UiDialogAttributes> & { [K in keyof UiDialog & keyof UiDialogAttributes]?: UiDialog[K] } & { [K in keyof UiDialog & keyof UiDialogAttributes as `attr:${K}`]?: UiDialogAttributes[K] } & { [K in keyof UiDialog & keyof UiDialogAttributes as `prop:${K}`]?: UiDialog[K] };
@@ -1646,7 +1701,15 @@ declare module "@stencil/core" {
             "ui-avatar-group": LocalJSX.IntrinsicElements["ui-avatar-group"] & JSXBase.HTMLAttributes<HTMLUiAvatarGroupElement>;
             "ui-badge": LocalJSX.IntrinsicElements["ui-badge"] & JSXBase.HTMLAttributes<HTMLUiBadgeElement>;
             "ui-button": LocalJSX.IntrinsicElements["ui-button"] & JSXBase.HTMLAttributes<HTMLUiButtonElement>;
+            /**
+             * A static semantic message with a tone-specific icon.
+             */
+            "ui-callout": LocalJSX.IntrinsicElements["ui-callout"] & JSXBase.HTMLAttributes<HTMLUiCalloutElement>;
             "ui-checkbox": LocalJSX.IntrinsicElements["ui-checkbox"] & JSXBase.HTMLAttributes<HTMLUiCheckboxElement>;
+            /**
+             * A compact, non-interactive metadata label.
+             */
+            "ui-chip": LocalJSX.IntrinsicElements["ui-chip"] & JSXBase.HTMLAttributes<HTMLUiChipElement>;
             /**
              * A single editable field with contextual suggestions, optional help and field validation.
              */

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-3TUZ6GLW.js}

@@ -7,7 +7,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.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-XGJKN25W.js

@@ -0,0 +1,51 @@
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-IMHSPETJ.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-SN3G44HW.js}

@@ -2,7 +2,7 @@ import {
   Host,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.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-B6WDCWJX.js

@@ -0,0 +1,22 @@
+import {
+  Host,
+  h,
+  registerInstance
+} from "./chunk-IMHSPETJ.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-AZYUELLV.js}

@@ -6,7 +6,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.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-QRPWRMPC.js

@@ -0,0 +1,32 @@
+import {
+  loomaIconMarkup
+} from "./chunk-NB6DBRXQ.js";
+import {
+  Host,
+  h,
+  registerInstance
+} from "./chunk-IMHSPETJ.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
+};