@threadlabs/looma 0.14.8 → 0.15.0

package/vue/UiAvatarGroup.vue

@@ -10,11 +10,14 @@ const props = withDefaults(
   defineProps<{
     label?: string
     max?: number
+    overflowLabel?: string
     size?: 'sm' | 'md'
+    total?: number
   }>(),
   {
     label: 'People',
     max: 5,
+    overflowLabel: '{count} more',
     size: 'md',
   },
 )
@@ -22,6 +25,7 @@ const props = withDefaults(
 const root = ref<HTMLElement | null>(null)
 const overflowElement = useTemplateRef<HTMLElement>('overflow')
 const overflowCount = ref(0)
+const overflowAnnouncement = ref('')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -37,7 +41,7 @@ useComponentHost(controllerModule.default, {
   dispatch,
   props,
   refs: { overflow: overflowElement },
-  state: { overflowCount },
+  state: { overflowCount, overflowAnnouncement },
 })
 </script>
 
@@ -55,7 +59,7 @@ useComponentHost(controllerModule.default, {
       class="overflow"
       role="img"
       :hidden="!overflowCount"
-      :aria-label="`${overflowCount} more`"
+      :aria-label="overflowAnnouncement"
       ref="overflow"
     >{{ `+${overflowCount}` }}</span>
   </div>
@@ -93,7 +97,6 @@ useComponentHost(controllerModule.default, {
 :slotted(*) {
   margin-inline-start: -0.5rem;
   flex-shrink: 0;
-  border-radius: 999px;
 }
 
 :slotted(*:first-child) {
@@ -107,7 +110,7 @@ useComponentHost(controllerModule.default, {
   justify-content: center;
   inline-size: 2.5rem;
   block-size: 2.5rem;
-  border-radius: 999px;
+  border-radius: var(--ui-radius-round);
   border: 1px solid var(--ui-border-strong);
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);

package/vue/UiBadge.d.ts

@@ -1,7 +1,7 @@
 type __VLS_Props = {
     shape?: 'pill' | 'tag';
     tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
-    variant?: 'solid' | 'subtle';
+    variant?: 'solid' | 'subtle' | 'outline';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -10,7 +10,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     shape: "pill" | "tag";
     tone: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
-    variant: "solid" | "subtle";
+    variant: "solid" | "subtle" | "outline";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiBadge.vue

@@ -8,7 +8,7 @@ const props = withDefaults(
   defineProps<{
     shape?: 'pill' | 'tag'
     tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-    variant?: 'solid' | 'subtle'
+    variant?: 'solid' | 'subtle' | 'outline'
   }>(),
   {
     shape: 'pill',
@@ -83,6 +83,7 @@ const hostState = computed(() =>
   --_badge-text: var(--ui-text-secondary);
   /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
   --_badge-border: var(--ui-surface-subtle);
+  --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-surface));
 
   display: inline-flex;
   align-items: center;
@@ -92,7 +93,7 @@ const hostState = computed(() =>
     var(--ui-badge-padding-inline, var(--ui-space-2));
   border: 1px solid var(--ui-badge-border, var(--_badge-border));
   border-radius: var(--ui-radius-round);
-  background: var(--ui-badge-surface, var(--_badge-surface));
+  background: var(--_badge-outline-surface);
   color: var(--ui-badge-text, var(--_badge-text));
   font-family: var(--ui-font-family-sans);
   font-size: var(--ui-badge-font-size, var(--ui-font-size-sm));
@@ -175,6 +176,37 @@ const hostState = computed(() =>
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"] {
+  --_badge-surface: var(--ui-surface-default);
+  --_badge-border: var(--ui-border-strong);
+  --_badge-text: var(--ui-text-secondary);
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"] {
+  --_badge-border: var(--ui-accent-solid);
+  --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"] {
+  --_badge-border: var(--ui-danger-solid);
+  --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"] {
+  --_badge-border: var(--ui-success-solid);
+  --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"] {
+  --_badge-border: var(--ui-warning-solid);
+  --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"] {
+  --_badge-border: var(--ui-info-solid);
+  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
+}
+
 /* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
    outline to follow: the edge is the fill. The end padding grows by the point's depth so the
    label never runs into it. */
@@ -201,6 +233,46 @@ const hostState = computed(() =>
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
 
+/* The tag clips its point, including the native border. Draw the outer shape in the border
+   colour and an inset inner shape in the surface colour to keep a visible diagonal edge. */
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"] {
+  position: relative;
+  isolation: isolate;
+  background: var(--ui-badge-border, var(--_badge-border));
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"]::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  z-index: -1;
+  background: var(--_badge-outline-surface);
+  clip-path: polygon(
+    0 0,
+    calc(100% - var(--_badge-point)) 0,
+    100% 50%,
+    calc(100% - var(--_badge-point)) 100%,
+    0 100%
+  );
+  pointer-events: none;
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"]:dir(rtl)::before {
+  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
+}
+
+@media (forced-colors: active) {
+  [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"] {
+    forced-color-adjust: none;
+    background: CanvasText;
+    color: CanvasText;
+  }
+
+  [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"]::before {
+    background: Canvas;
+  }
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-badge"][hidden] {
   display: none;

package/vue/UiButton.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     as?: 'button' | 'a';
     disabled?: boolean;
     href?: string;
+    pending?: boolean;
     rel?: string;
     size?: 'sm' | 'md' | 'lg';
     stretch?: boolean;
@@ -11,11 +12,11 @@ type __VLS_Props = {
     type?: 'button' | 'submit' | 'reset';
     variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link';
 };
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_6: {}, __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_6) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     type: "button" | "submit" | "reset";
@@ -25,6 +26,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     align: "center" | "start";
     as: "button" | "a";
     disabled: boolean;
+    pending: boolean;
     stretch: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiButton.vue

@@ -1,6 +1,9 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import * as controllerModule from '../components/ui-button/ui-button.js'
+import { createDispatch, useComponentHost } from './host'
+import UiSpinner from './UiSpinner.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -10,6 +13,7 @@ const props = withDefaults(
     as?: 'button' | 'a'
     disabled?: boolean
     href?: string
+    pending?: boolean
     rel?: string
     size?: 'sm' | 'md' | 'lg'
     stretch?: boolean
@@ -22,6 +26,7 @@ const props = withDefaults(
     align: 'center',
     as: 'button',
     disabled: false,
+    pending: false,
     size: 'md',
     stretch: false,
     tone: 'accent',
@@ -30,6 +35,8 @@ const props = withDefaults(
   },
 )
 
+const root = ref<HTMLElement | null>(null)
+
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
@@ -38,9 +45,18 @@ const hostState = computed(() =>
     props.size && `size size=${props.size}`,
     props.variant && `variant variant=${props.variant}`,
     props.tone && `tone tone=${props.tone}`,
+    props.pending && 'pending',
   ].filter(Boolean).join(' ')
 )
 
+const dispatch = createDispatch(root)
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+})
+
 function text(value: unknown): string {
   if (Array.isArray(value)) return value.map(text).join(' ')
   return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
@@ -60,22 +76,32 @@ function attribute(value: unknown): any {
     v-if="as === 'a'"
     data-component="ui-button"
     v-bind="$attrs"
-    :href="attribute(({ true: null, false: href })[`${disabled}`])"
+    :href="attribute(({ true: null, false: href })[`${disabled || pending}`])"
     :target="target"
     :rel="rel"
-    :aria-disabled="typeof (({ true: 'true', false: null })[`${Boolean(disabled && href)}`]) === 'boolean'
-    ? String(({ true: 'true', false: null })[`${Boolean(disabled && href)}`])
-    : attribute(({ true: 'true', false: null })[`${Boolean(disabled && href)}`])"
+    :aria-disabled="typeof (({ true: 'true', false: null })[`${disabled || pending}`]) === 'boolean'
+    ? String(({ true: 'true', false: null })[`${disabled || pending}`])
+    : attribute(({ true: 'true', false: null })[`${disabled || pending}`])"
+    :aria-busy="pending"
+    :tabindex="attribute(({ true: '0', false: null })[`${pending && !disabled}`])"
     :data-ui-button-state="hostState || undefined"
-  ><slot /></a>
+    ref="root"
+  ><UiSpinner v-if="pending" size="sm" class="pending-spinner" />
+    <slot /></a>
   <button
     v-else
     data-component="ui-button"
     v-bind="$attrs"
     :type="type"
     :disabled="disabled"
+    :aria-disabled="typeof (({ true: 'true', false: null })[`${pending}`]) === 'boolean'
+    ? String(({ true: 'true', false: null })[`${pending}`])
+    : attribute(({ true: 'true', false: null })[`${pending}`])"
+    :aria-busy="pending"
     :data-ui-button-state="hostState || undefined"
+    ref="root"
   >
+    <UiSpinner v-if="pending" size="sm" class="pending-spinner" />
     <slot />
   </button>
 </template>
@@ -187,7 +213,7 @@ function attribute(value: unknown): any {
   border-style: solid;
   border-width: 1px;
   border-color: var(--ui-button-border, var(--_tone));
-  border-radius: var(--ui-button-radius, var(--ui-radius-md));
+  border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
   background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
   color: var(--ui-button-text, var(--_tone-text));
   font: inherit;
@@ -206,6 +232,10 @@ function attribute(value: unknown): any {
   margin: 0;
 }
 
+.pending-spinner {
+  margin-inline-end: var(--ui-space-2);
+}
+
 @supports (text-box-trim: trim-both) {
   [data-component~="ui-button"] {
     text-box-trim: trim-both;
@@ -348,6 +378,10 @@ function attribute(value: unknown): any {
   box-shadow: none;
 }
 
+[data-component~="ui-button"][data-ui-button-state~="pending"]:focus-visible {
+  box-shadow: var(--ui-focus-halo);
+}
+
 /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
    it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
    the way hover washes the live one, so it stays light in every tone. An opaque mix toward the

package/vue/UiCallout.d.ts

@@ -1,12 +1,12 @@
 type __VLS_Props = {
-    tone?: 'info' | 'note' | 'warning' | 'success' | 'danger';
+    tone?: 'info' | 'neutral' | 'note' | 'warning' | 'success' | 'danger';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    tone: "info" | "note" | "warning" | "success" | "danger";
+    tone: "info" | "neutral" | "note" | "warning" | "success" | "danger";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiCallout.vue

@@ -6,7 +6,7 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
-    tone?: 'info' | 'note' | 'warning' | 'success' | 'danger'
+    tone?: 'info' | 'neutral' | 'note' | 'warning' | 'success' | 'danger'
   }>(),
   {
     tone: 'info',
@@ -42,7 +42,7 @@ const hostState = computed(() =>
         <path d="M12 8h.01"></path>
       </svg>
       <svg
-        v-if="tone === 'note'"
+        v-if="tone === 'neutral' || tone === 'note'"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -191,6 +191,7 @@ const hostState = computed(() =>
   min-inline-size: 0;
 }
 
+[data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"],
 [data-component~="ui-callout"][data-ui-callout-state~="tone=note"] {
   --_callout-surface: var(--ui-surface-muted);
   --_callout-border: var(--ui-border-strong);

package/vue/UiCheckbox.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     checked?: boolean;
     disabled?: boolean;
     indeterminate?: boolean;
+    invalid?: boolean;
     name?: string;
     required?: boolean;
     size?: 'sm' | 'md' | 'lg';
@@ -31,6 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     name: string;
+    invalid: boolean;
     size: "sm" | "md" | "lg";
     value: string;
     disabled: boolean;

package/vue/UiCheckbox.vue

@@ -11,6 +11,7 @@ const props = withDefaults(
     checked?: boolean
     disabled?: boolean
     indeterminate?: boolean
+    invalid?: boolean
     name?: string
     required?: boolean
     size?: 'sm' | 'md' | 'lg'
@@ -20,6 +21,7 @@ const props = withDefaults(
     checked: false,
     disabled: false,
     indeterminate: false,
+    invalid: false,
     name: '',
     required: false,
     size: 'md',
@@ -46,6 +48,7 @@ const internalChecked = ref(false)
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    props.invalid && 'invalid',
     props.disabled && 'disabled',
     props.size && `size size=${props.size}`,
   ].filter(Boolean).join(' ')
@@ -86,6 +89,7 @@ useComponentHost(controllerModule.default, {
       :checked.prop="internalChecked"
       :indeterminate.prop="indeterminate"
       :disabled="disabled"
+      :aria-invalid="invalid"
       :required="required"
       :name="name"
       :value="value"
@@ -103,6 +107,10 @@ useComponentHost(controllerModule.default, {
   syntax: "*";
   inherits: false;
 }
+@property --ui-checkbox-invalid-border {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-checkbox-size {
   syntax: "*";
   inherits: false;
@@ -111,6 +119,10 @@ useComponentHost(controllerModule.default, {
 [data-component~="ui-checkbox"] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-checkbox-size: var(--ui-checkbox-size);
+  --_ui-checkbox-invalid-border: var(
+    --ui-checkbox-invalid-border,
+    var(--ui-field-danger, var(--ui-danger-solid))
+  );
 
   display: inline-flex;
   align-items: flex-start;
@@ -208,6 +220,10 @@ input:focus-visible {
   outline-offset: 2px;
 }
 
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="invalid"] input {
+  border-color: var(--_ui-checkbox-invalid-border);
+}
+
 [data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] {
   color: var(--ui-disabled-text);
   cursor: not-allowed;

package/vue/UiCombobox.d.ts

@@ -6,6 +6,7 @@ type __VLS_Props = {
     disclosure?: boolean;
     filter?: 'label' | 'none';
     help?: string;
+    invalid?: boolean;
     items?: readonly ({
         readonly id: string;
         readonly value: string;
@@ -20,8 +21,10 @@ type __VLS_Props = {
     })[];
     label?: string;
     labelVisibility?: 'visible' | 'sr-only';
+    loading?: boolean;
     multiple?: boolean;
     name?: string;
+    openOnFocus?: boolean;
     placeholder?: string;
     query?: string;
     readonly?: boolean;
@@ -31,7 +34,7 @@ type __VLS_Props = {
     tokenSeparators?: readonly (string)[];
     value?: string | null;
 };
-declare var __VLS_1: {}, __VLS_4: `item-${string}`, __VLS_5: {}, __VLS_20: `option-${string}`, __VLS_21: {}, __VLS_29: {}, __VLS_31: {};
+declare var __VLS_1: {}, __VLS_4: `item-${string}`, __VLS_5: {}, __VLS_20: `option-${string}`, __VLS_21: {}, __VLS_29: {}, __VLS_31: {}, __VLS_33: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_4>]?: (props: typeof __VLS_5) => any;
 } & {
@@ -39,9 +42,11 @@ type __VLS_Slots = {} & {
 } & {
     start?: (props: typeof __VLS_1) => any;
 } & {
-    footer?: (props: typeof __VLS_29) => any;
+    empty?: (props: typeof __VLS_29) => any;
 } & {
-    default?: (props: typeof __VLS_31) => any;
+    footer?: (props: typeof __VLS_31) => any;
+} & {
+    default?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     validate: (...args: unknown[]) => Promise<unknown>;
@@ -324,6 +329,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     filter: "label" | "none";
     label: string;
     name: string;
+    invalid: boolean;
     size: "sm" | "md" | "lg";
     disabled: boolean;
     required: boolean;
@@ -333,7 +339,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     disclosure: boolean;
     help: string;
     labelVisibility: "visible" | "sr-only";
+    loading: boolean;
     multiple: boolean;
+    openOnFocus: boolean;
     placeholder: string;
     readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/vue/UiCombobox.vue

@@ -17,6 +17,7 @@ const props = withDefaults(
     disclosure?: boolean
     filter?: 'label' | 'none'
     help?: string
+    invalid?: boolean
     items?:
       readonly ({
         readonly id: string
@@ -32,8 +33,10 @@ const props = withDefaults(
       })[]
     label?: string
     labelVisibility?: 'visible' | 'sr-only'
+    loading?: boolean
     multiple?: boolean
     name?: string
+    openOnFocus?: boolean
     placeholder?: string
     query?: string
     readonly?: boolean
@@ -51,10 +54,13 @@ const props = withDefaults(
     disclosure: false,
     filter: 'label',
     help: '',
+    invalid: false,
     label: '',
     labelVisibility: 'visible',
+    loading: false,
     multiple: false,
     name: '',
+    openOnFocus: false,
     placeholder: '',
     readonly: false,
     required: false,
@@ -255,7 +261,6 @@ const rows = ref<
   }[]
 >([])
 const active = ref<number | null>(-1)
-const loading = ref(false)
 const helpOpen = ref(false)
 const lookupError = ref('')
 const validation = ref<
@@ -304,6 +309,7 @@ const hostState = computed(() =>
     props.size && `size size=${props.size}`,
     validationStatus.value && 'validationStatus',
     `validationStatus=${encodeURIComponent(validationStatus.value)}`,
+    props.invalid && 'invalid',
     props.multiple && 'multiple',
   ].filter(Boolean).join(' ')
 )
@@ -709,7 +715,6 @@ const { host, ready } = useComponentHost(controllerModule.default, {
     expanded,
     rows,
     active,
-    loading,
     helpOpen,
     lookupError,
     validation,
@@ -774,8 +779,8 @@ defineExpose({
           :id="`${uid}-input`"
           :aria-controls="`${uid}-listbox`"
           :aria-expanded="expanded"
-          :aria-invalid="validationStatus === 'error'"
-          :aria-busy="validationStatus === 'pending'"
+          :aria-invalid="invalid || validationStatus === 'error'"
+          :aria-busy="loading || validationStatus === 'pending'"
           :value.prop="display"
           :placeholder="placeholder"
           :disabled="disabled"
@@ -923,6 +928,9 @@ defineExpose({
           {{ `Create “${raw}”` }}
         </div>
         <div v-if="message" class="message">{{ message }}</div>
+        <div v-if="!loading && !(rows[0]) && !creatable && !lookupError" class="message">
+          <slot name="empty">No suggestions.</slot>
+        </div>
       </div>
       <slot name="footer" />
     </div>
@@ -976,6 +984,30 @@ defineExpose({
   syntax: "*";
   inherits: false;
 }
+@property --ui-combobox-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-invalid-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-popup-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-popup-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-popup-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-popup-shadow {
+  syntax: "*";
+  inherits: false;
+}
 
 [data-component~="ui-combobox"] {
   /* Hooks do not inherit, so the parts below read them from the root. */
@@ -989,6 +1021,12 @@ defineExpose({
   --_ui-combobox-item-min-block-size: var(--ui-combobox-item-min-block-size);
   --_ui-combobox-item-input-min-inline-size: var(--ui-combobox-item-input-min-inline-size);
   --_ui-combobox-item-item-max-inline-size: var(--ui-combobox-item-item-max-inline-size);
+  --_ui-combobox-radius: var(--ui-combobox-radius);
+  --_ui-combobox-invalid-border: var(--ui-combobox-invalid-border);
+  --_ui-combobox-popup-surface: var(--ui-combobox-popup-surface);
+  --_ui-combobox-popup-border: var(--ui-combobox-popup-border);
+  --_ui-combobox-popup-radius: var(--ui-combobox-popup-radius);
+  --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
 
   display: grid;
   gap: var(--ui-space-1);
@@ -1015,7 +1053,7 @@ label {
   display: flex;
   min-inline-size: 0;
   border: 1px solid var(--ui-control-border, var(--ui-border-default));
-  border-radius: var(--ui-radius-md);
+  border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background: var(--ui-control-surface, var(--ui-surface-default));
   box-shadow: var(--ui-control-inset);
   transition:
@@ -1137,8 +1175,12 @@ input:disabled, button:disabled {
 .field:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field {
-  border-color: var(--ui-danger-solid, var(--ui-accent-active));
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field,
+[data-component~="ui-combobox"][data-ui-combobox-state~="invalid"] .field {
+  border-color: var(
+    --_ui-combobox-invalid-border,
+    var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active)))
+  );
 }
 .popup {
   box-sizing: border-box;
@@ -1148,11 +1190,18 @@ input:disabled, button:disabled {
   overflow: auto;
   margin: 0;
   padding: var(--ui-space-1);
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-md);
-  background: var(--ui-surface-elevated);
+  border: 1px solid
+    var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-default)));
+  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))
+  );
   color: var(--ui-text-primary);
-  box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+  box-shadow: var(
+    --_ui-combobox-popup-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+  );
 }
 [hidden] {
   display: none;