@threadlabs/looma 0.37.5 → 0.38.0

package/vue/components.css

@@ -1123,8 +1123,6 @@ svg,.arc {
 /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
    is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
 
-/* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
-
 /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
 
 /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
@@ -1134,9 +1132,6 @@ svg,.arc {
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 
-/* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
-   edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-
 /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 
 /* A loading action stays visually active; only an explicitly disabled action takes the
@@ -1334,6 +1329,11 @@ svg,.arc {
 :scope[data-appearance="card"][data-tone="neutral"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     border-color: var(--ui-button-hover-border, var(--ui-border-strong));
 }
+:scope[data-appearance="card"][aria-pressed="true"]:where([data-hn-ui-button]) {
+    background-color: var(--ui-selection-surface);
+    border-color: var(--ui-selection-border);
+    color: var(--ui-selection-text);
+}
 :scope:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     scale: var(--ui-press-scale, 1);
     background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
@@ -1373,6 +1373,24 @@ svg,.arc {
     background-color: var(--ui-button-surface, var(--ui-neutral-surface));
     color: var(--ui-button-text, var(--ui-text));
 }
+:scope[data-tone="neutral"][data-appearance="outline"]:where([data-hn-ui-button]) {
+    border-color: var(--ui-button-border, var(--ui-control-border));
+    background-color: var(--ui-button-surface, transparent);
+}
+:scope[data-tone="neutral"][data-appearance="outline"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+    border-color: var(
+      --ui-button-hover-border,
+      var(--ui-control-border-hover, var(--ui-control-border))
+    );
+    background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
+}
+:scope[data-tone="neutral"][data-appearance="outline"]:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+    border-color: var(
+      --ui-button-hover-border,
+      var(--ui-control-border-hover, var(--ui-control-border))
+    );
+    background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
+}
 :scope[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
 }
@@ -1457,10 +1475,7 @@ svg,.arc {
     border-color: transparent;
 }
 :scope[data-appearance="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
-    background-color: var(
-      --ui-button-ghost-active-surface,
-      color-mix(in oklch, var(--ui-surface), var(--_tone) 3%)
-    );
+    background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 18%));
     border-color: transparent;
     box-shadow:
       inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%),
@@ -2917,6 +2932,21 @@ label:where([data-hn-ui-combobox]) {
     flex: 1 1 auto;
     min-inline-size: 0;
 }
+.start:where([data-hn-ui-combobox]) {
+    display: flex !important;
+    align-items: center !important;
+    flex: none;
+    padding-inline-start: var(--ui-space-3) !important;
+}
+.start:empty:where([data-hn-ui-combobox]) {
+    display: none !important;
+}
+:scope[data-ui-combobox-state~="size=sm"] .start:where([data-hn-ui-combobox]) {
+    padding-inline-start: var(--ui-space-2) !important;
+}
+:scope[data-ui-combobox-state~="size=lg"] .start:where([data-hn-ui-combobox]) {
+    padding-inline-start: var(--ui-space-4) !important;
+}
 .help:where([data-hn-ui-combobox]) {
     flex: none;
     display: inline-flex !important;
@@ -2950,6 +2980,10 @@ label:where([data-hn-ui-combobox]) {
     inline-size: var(--ui-icon-size-sm);
     block-size: var(--ui-icon-size-sm);
 }
+:scope[data-ui-combobox-state~="muted"]
+    input:not(:disabled):where([data-hn-ui-combobox]) {
+    color: var(--ui-text-secondary);
+}
 input:where([data-hn-ui-combobox])::selection {
     background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
     color: inherit;
@@ -3041,7 +3075,7 @@ input:disabled:where([data-hn-ui-combobox]),button:disabled:where([data-hn-ui-co
     border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
     background: var(
       --_ui-combobox-popup-surface,
-      var(--ui-overlay-surface, var(--ui-surface-elevated))
+      var(--ui-material-content, var(--ui-surface-elevated))
     );
     color: var(--ui-text-primary);
     box-shadow: var(
@@ -3237,6 +3271,23 @@ label:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     flex: 1 1 auto;
     min-inline-size: 0;
 }
+.start:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    display: flex !important;
+    align-items: center !important;
+    flex: none;
+    padding-inline-start: var(--ui-space-3) !important;
+}
+.start:empty:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    display: none !important;
+}
+:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
+    .start:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    padding-inline-start: var(--ui-space-2) !important;
+}
+:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]
+    .start:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    padding-inline-start: var(--ui-space-4) !important;
+}
 .help:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     flex: none;
     display: inline-flex !important;
@@ -3270,6 +3321,10 @@ label:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     inline-size: var(--ui-icon-size-sm);
     block-size: var(--ui-icon-size-sm);
 }
+:where(.ui-combobox)[data-ui-combobox-state~="muted"]
+    input:not(:disabled):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    color: var(--ui-text-secondary);
+}
 input:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where(:scope, :scope
     *):where([data-hn-ui-combobox])::selection {
     background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
@@ -3365,7 +3420,7 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
     border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
     background: var(
       --_ui-combobox-popup-surface,
-      var(--ui-overlay-surface, var(--ui-surface-elevated))
+      var(--ui-material-content, var(--ui-surface-elevated))
     );
     color: var(--ui-text-primary);
     box-shadow: var(
@@ -3752,7 +3807,7 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
   inherits: false;
 }
 
-/* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+/* Neutral actions share the same quiet surface and border roles as fields. */
 
 /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
    proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
@@ -3879,6 +3934,10 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
 :scope[data-tone="neutral"]:where([data-hn-ui-icon-button]) {
     --_tone-highlight: var(--ui-neutral-highlight, none);
     --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
+    --_icon-button-outline-surface: transparent;
+    --_icon-button-border: var(--ui-control-border);
+    --_icon-button-hover-border: var(--ui-control-border-hover, var(--ui-control-border));
+    --_icon-button-text: var(--ui-text);
     --_icon-button-solid-surface: var(--ui-neutral-surface);
     --_icon-button-solid-hover-surface: var(--ui-neutral-hover);
     --_icon-button-solid-text: var(--ui-text);
@@ -4058,6 +4117,12 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
       var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
     );
 }
+:scope[data-tone="neutral"][data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
+    background-color: var(--ui-icon-button-hover-surface, var(--ui-neutral-hover));
+}
+:scope[data-tone="neutral"][data-appearance="outline"]:active:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
+    background-color: var(--ui-icon-button-active-surface, var(--ui-neutral-active));
+}
 :scope[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
     background-color: var(
       --ui-icon-button-solid-hover-surface,
@@ -5777,7 +5842,11 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
 }
 }
 :scope:is(:hover, :focus-visible):not([aria-disabled="true"]):where([data-hn-ui-menu-item]) {
-    background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
+    background: var(--ui-menu-item-hover-surface, var(--ui-accent-subtle));
+}
+:scope[aria-checked="true"]:not([aria-disabled="true"]):where([data-hn-ui-menu-item]) {
+    background: var(--ui-selection-surface);
+    color: var(--ui-selection-text);
 }
 :scope:focus-visible:where([data-hn-ui-menu-item]) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
@@ -10077,6 +10146,13 @@ dialog:where([data-hn-ui-search-shell]) {
     background-position: right var(--ui-space-3) center, center;
     background-size: 1.125rem 1.125rem, 100% 100%;
 }
+:scope[data-ui-select-state~="muted"]:where([data-hn-ui-select]) {
+    color: var(--ui-text-secondary);
+}
+:scope[data-ui-select-state~="muted"] :where(:not([data-hn-ui-select])):is(option),:scope[data-ui-select-state~="muted"] :where(:not([data-hn-ui-select])):is(optgroup) {
+    color: var(--ui-text-primary);
+    background-color: var(--ui-control-surface);
+}
 :scope:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])):where([data-hn-ui-select]) {
     border-color: var(
       --ui-select-border-hover,
@@ -10401,6 +10477,77 @@ dialog:where([data-hn-ui-search-shell]) {
 }
 }
 
+/* Dimensions belong to this placeholder, never a nested or neighbouring one. */
+@property --ui-skeleton-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-skeleton-height {
+  syntax: "*";
+  inherits: false;
+}
+@keyframes ui-skeleton-pulse-ee40410c {
+50% {
+    opacity: 0.45;
+}
+}
+@scope (.ui-skeleton) to ([data-hn]) {
+:scope {
+    display: block !important;
+    position: relative;
+    box-sizing: border-box !important;
+    flex: none;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    inline-size: var(--ui-skeleton-width, 100%);
+    block-size: var(--ui-skeleton-height, 1lh);
+    margin: 0 !important;
+    font: inherit;
+}
+:scope::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: var(--ui-radius-sm);
+    background: color-mix(in srgb, var(--ui-text-primary) 16%, transparent);
+}
+:scope[data-ui-skeleton-state~="shape=text"]::before {
+    inset-block: 22%;
+}
+:scope[data-ui-skeleton-state~="shape=circle"] {
+    inline-size: var(--ui-skeleton-width, calc(2.5rem + 2 * var(--ui-border-width)));
+    block-size: var(--ui-skeleton-height, auto);
+    aspect-ratio: 1;
+}
+:scope[data-ui-skeleton-state~="shape=circle"]::before {
+    border-radius: var(--ui-radius-round);
+}
+:scope[data-ui-skeleton-state~="shape=rectangle"] {
+    block-size: var(--ui-skeleton-height, 8rem);
+}
+:scope[data-ui-skeleton-state~="shape=rectangle"]::before {
+    border-radius: var(--ui-radius-md);
+}
+:scope[data-ui-skeleton-state~="animated"]::before {
+    animation: ui-skeleton-pulse-ee40410c 1.6s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+:scope[data-ui-skeleton-state~="animated"]::before {
+      animation: none;
+}
+}
+@media (forced-colors: active) {
+:scope::before {
+      background: CanvasText;
+      opacity: 0.2;
+      animation: none;
+}
+}
+:scope[hidden] {
+    display: none !important;
+}
+}
+
 @scope (.ui-slider) to ([data-hn]) {
 :scope {
     display: grid !important;
@@ -13679,7 +13826,6 @@ html[data-ui-input-modality="touch"]
       background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
     }
 
-    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
     :scope:where([data-component~="ui-button"])[data-appearance="card"][data-tone="neutral"] {
       border-color: var(--ui-button-border, var(--ui-border));
     }
@@ -13688,6 +13834,12 @@ html[data-ui-input-modality="touch"]
       border-color: var(--ui-button-hover-border, var(--ui-border-strong));
     }
 
+    :scope:where([data-component~="ui-button"])[data-appearance="card"][aria-pressed="true"] {
+      background-color: var(--ui-selection-surface);
+      border-color: var(--ui-selection-border);
+      color: var(--ui-selection-text);
+    }
+
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
     :scope:where([data-component~="ui-button"]):active:not(:disabled, [aria-disabled="true"]) {
       scale: var(--ui-press-scale, 1);
@@ -13735,6 +13887,18 @@ html[data-ui-input-modality="touch"]
       background-color: var(--ui-button-surface, var(--ui-neutral-surface));
       color: var(--ui-button-text, var(--ui-text));
     }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="outline"] {
+      border-color: var(--ui-button-border, var(--ui-control-border));
+      background-color: var(--ui-button-surface, transparent);
+    }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="outline"]:hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)));
+      background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
+    }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="outline"]:active:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)));
+      background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
+    }
     :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
     }
@@ -13822,10 +13986,8 @@ html[data-ui-input-modality="touch"]
       border-color: transparent;
     }
 
-    /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
-       edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
     :scope:where([data-component~="ui-button"])[data-appearance="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
-      background-color: var(--ui-button-ghost-active-surface, color-mix(in oklch, var(--ui-surface), var(--_tone) 3%));
+      background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 18%));
       border-color: transparent;
       box-shadow: inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%), inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
     }
@@ -13959,8 +14121,6 @@ html[data-ui-input-modality="touch"]
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
        is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
 
-    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
-
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
 
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
@@ -13970,9 +14130,6 @@ html[data-ui-input-modality="touch"]
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 
-    /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
-       edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 
     /* A loading action stays visually active; only an explicitly disabled action takes the
@@ -14486,10 +14643,14 @@ html[data-ui-input-modality="touch"]
       color: var(--_icon-button-text);
     }
 
-    /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+    /* Neutral actions share the same quiet surface and border roles as fields. */
     :scope:where([data-component~="ui-icon-button"])[data-tone="neutral"] {
       --_tone-highlight: var(--ui-neutral-highlight, none);
       --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
+      --_icon-button-outline-surface: transparent;
+      --_icon-button-border: var(--ui-control-border);
+      --_icon-button-hover-border: var(--ui-control-border-hover, var(--ui-control-border));
+      --_icon-button-text: var(--ui-text);
       --_icon-button-solid-surface: var(--ui-neutral-surface);
       --_icon-button-solid-hover-surface: var(--ui-neutral-hover);
       --_icon-button-solid-text: var(--ui-text);
@@ -14677,6 +14838,12 @@ html[data-ui-input-modality="touch"]
     :scope:where([data-component~="ui-icon-button"])[data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]) {
       border-color: var(--ui-icon-button-hover-border, var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border))));
     }
+    :scope:where([data-component~="ui-icon-button"])[data-tone="neutral"][data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-hover-surface, var(--ui-neutral-hover));
+    }
+    :scope:where([data-component~="ui-icon-button"])[data-tone="neutral"][data-appearance="outline"]:active:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-active-surface, var(--ui-neutral-active));
+    }
 
     :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]) {
       background-color: var(--ui-icon-button-solid-hover-surface, var(--_icon-button-solid-hover-surface, var(--ui-accent-hover)));
@@ -14801,7 +14968,7 @@ html[data-ui-input-modality="touch"]
 @scope ([data-component~="ui-icon-button"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
-    /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+    /* Neutral actions share the same quiet surface and border roles as fields. */
 
     /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
        proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
@@ -15307,7 +15474,12 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-menu-item"]):is(:hover, :focus-visible):not([aria-disabled="true"]) {
-      background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
+      background: var(--ui-menu-item-hover-surface, var(--ui-accent-subtle));
+    }
+
+    :scope:where([data-component~="ui-menu-item"])[aria-checked="true"]:not([aria-disabled="true"]) {
+      background: var(--ui-selection-surface);
+      color: var(--ui-selection-text);
     }
 
     :scope:where([data-component~="ui-menu-item"]):focus-visible {

package/vue/editor/index.js

@@ -3756,7 +3756,7 @@ var D$18 = {
 				"warning",
 				"info"
 			],
-			"default": "accent",
+			"default": "neutral",
 			c: checkFormat("keyword", keywordFormat),
 			t: "keyword",
 			j: 0,
@@ -7666,7 +7666,6 @@ var D$13 = {
 		"tone": {
 			"required": false,
 			"values": [
-				"auto",
 				"accent",
 				"neutral",
 				"danger",
@@ -7674,7 +7673,7 @@ var D$13 = {
 				"warning",
 				"info"
 			],
-			"default": "auto",
+			"default": "neutral",
 			c: checkFormat("keyword", keywordFormat),
 			t: "keyword",
 			j: 0,

package/vue/index.d.ts

@@ -71,6 +71,7 @@ export { default as Section } from "./UiSection.js";
 export { default as Select } from "./UiSelect.js";
 export { default as Separator } from "./UiSeparator.js";
 export { default as Sidebar } from "./UiSidebar.js";
+export { default as Skeleton } from "./UiSkeleton.js";
 export { default as Slider } from "./UiSlider.js";
 export { default as Spinner } from "./UiSpinner.js";
 export { default as Stack } from "./UiStack.js";

package/vue/index.js

@@ -77,6 +77,7 @@ import { t as UiSection_default } from "./chunks/UiSection.js";
 import { t as UiSelect_default } from "./chunks/UiSelect.js";
 import { t as UiSeparator_default } from "./chunks/UiSeparator.js";
 import { t as UiSidebar_default } from "./chunks/UiSidebar.js";
+import { t as UiSkeleton_default } from "./chunks/UiSkeleton.js";
 import { t as UiSlider_default } from "./chunks/UiSlider.js";
 import { t as UiStatusMessage_default } from "./chunks/UiStatusMessage.js";
 import { t as UiSwitch_default } from "./chunks/UiSwitch.js";
@@ -89,4 +90,4 @@ import { t as UiTopBar_default } from "./chunks/UiTopBar.js";
 import { t as UiTree_default } from "./chunks/UiTree.js";
 import { t as UiTreeItem_default } from "./chunks/UiTreeItem.js";
 import { trackInputModality } from "@threadlabs/looma/components/shared/input-modality.js";
-export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiColorPicker_default as ColorPicker, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiCurveEditor_default as CurveEditor, UiCycleButton_default as CycleButton, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorChipEditor_default as EditorChipEditor, UiEditorCodeLanguage_default as EditorCodeLanguage, UiEditorFootnoteEditor_default as EditorFootnoteEditor, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiLightEditor_default as LightEditor, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiNumberInput_default as NumberInput, UiPageHeader_default as PageHeader, UiPagination_default as Pagination, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSlider_default as Slider, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwatch_default as Swatch, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };
+export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiColorPicker_default as ColorPicker, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiCurveEditor_default as CurveEditor, UiCycleButton_default as CycleButton, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorChipEditor_default as EditorChipEditor, UiEditorCodeLanguage_default as EditorCodeLanguage, UiEditorFootnoteEditor_default as EditorFootnoteEditor, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiLightEditor_default as LightEditor, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiNumberInput_default as NumberInput, UiPageHeader_default as PageHeader, UiPagination_default as Pagination, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSkeleton_default as Skeleton, UiSlider_default as Slider, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwatch_default as Swatch, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };