@threadlabs/looma 0.17.4 → 0.18.0

package/vanilla/UiSpinner.js

@@ -2,7 +2,7 @@
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-spinner.css";
 
-const definition = {...{"contract":{"tag":"ui-spinner","props":{"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"ring"},{"kind":"attribute","name":"role","expression":"{ true: 'status', false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: 'status', false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"status"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-label","expression":"{ true: label, false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: label, false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"label"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-hidden","expression":"{ true: null, false: 'true' }[format('%s', label != '')]","expressionPlan":{"source":"{ true: null, false: 'true' }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"literal","value":"true"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}}],"children":[]},"declarations":[],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-spinner","props":{"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"ring"},{"kind":"attribute","name":"role","expression":"{ true: 'status', false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: 'status', false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"status"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-label","expression":"{ true: label, false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: label, false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"label"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-live","expression":"{ true: 'polite', false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: 'polite', false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"polite"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-hidden","expression":"{ true: null, false: 'true' }[format('%s', label != '')]","expressionPlan":{"source":"{ true: null, false: 'true' }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"literal","value":"true"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 50 50"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"focusable","value":"false"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"class","value":"track"},{"kind":"literal","name":"cx","value":"25"},{"kind":"literal","name":"cy","value":"25"},{"kind":"literal","name":"r","value":"20"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"class","value":"arc"},{"kind":"literal","name":"cx","value":"25"},{"kind":"literal","name":"cy","value":"25"},{"kind":"literal","name":"r","value":"20"}],"children":[]}]}]},"declarations":[],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiSpinner(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -14,6 +14,24 @@ export function createUiSpinner(options = {}) {
   }
   element.setAttribute("class", ["ring", element.getAttribute("class")].filter(Boolean).join(" "));
   element.setAttribute("data-component", "ui-spinner");
+  const element0 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  element0.setAttribute("viewBox", "0 0 50 50");
+  element0.setAttribute("fill", "none");
+  element0.setAttribute("aria-hidden", "true");
+  element0.setAttribute("focusable", "false");
+  const element1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  element1.setAttribute("class", "track");
+  element1.setAttribute("cx", "25");
+  element1.setAttribute("cy", "25");
+  element1.setAttribute("r", "20");
+  element0.append(element1);
+  const element2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  element2.setAttribute("class", "arc");
+  element2.setAttribute("cx", "25");
+  element2.setAttribute("cy", "25");
+  element2.setAttribute("r", "20");
+  element0.append(element2);
+  element.append(element0);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
   });
   return element;

package/vue/UiAvatar.vue

@@ -40,6 +40,7 @@ const showGlyph = ref(false)
 const hostState = computed(() =>
   [
     props.size && `size size=${props.size}`,
+    hasImage.value && 'hasImage',
     props.shape && `shape shape=${props.shape}`,
     props.active && 'active',
   ].filter(Boolean).join(' ')
@@ -108,7 +109,11 @@ useComponentHost(controllerModule.default, {
   inline-size: 2.5rem;
   block-size: 2.5rem;
   border-radius: var(--ui-avatar-radius, var(--ui-radius-round));
-  border: 1px solid var(--ui-avatar-border, var(--ui-border-strong));
+  border: 1px solid
+    var(
+      --ui-avatar-border,
+      color-mix(in srgb, var(--ui-accent-solid) 35%, var(--ui-surface-default))
+    );
   background: var(--ui-avatar-surface, var(--ui-accent-soft));
   color: var(--ui-avatar-text, var(--ui-accent-subtle-text, var(--ui-accent-solid)));
   font: inherit;
@@ -124,6 +129,10 @@ useComponentHost(controllerModule.default, {
   font-size: var(--ui-font-size-xs);
 }
 
+[data-component~="ui-avatar"][data-ui-avatar-state~="hasImage"] {
+  border-color: var(--ui-avatar-border, var(--ui-border-strong));
+}
+
 [data-component~="ui-avatar"][data-ui-avatar-state~="shape=square"] {
   border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
 }
@@ -131,7 +140,7 @@ useComponentHost(controllerModule.default, {
 /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
    outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
 [data-component~="ui-avatar"][data-ui-avatar-state~="active"] {
-  outline: 2px solid var(--ui-avatar-active-ring, var(--ui-success));
+  outline: 1px solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
   outline-offset: 1px;
 }
 

package/vue/UiBadge.vue

@@ -83,7 +83,7 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-badge"] {
-  --_badge-surface: var(--ui-surface-subtle);
+  --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
   --_badge-text: var(--ui-text-secondary);
   /* Sit between the soft fill and its stronger theme ink. */
   --_badge-border: color-mix(in srgb, var(--_badge-surface) 75%, var(--_badge-text) 25%);
@@ -91,7 +91,7 @@ const hostState = computed(() =>
      surface, text, and border hooks. Each value is invalid, so the tone shows, while it is unset. The
      mixes keep 4.5:1 text contrast for any colour, in a light theme or a dark one. */
   --_ui-badge-color: var(--ui-badge-color);
-  --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 15%, var(--ui-surface-default));
+  --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 13%, var(--ui-surface-default));
   --_badge-color-ink: color-mix(in oklab, var(--_ui-badge-color) 35%, var(--ui-text-primary));
   --_badge-color-surface: var(--_badge-color-wash);
   --_badge-color-border: color-mix(
@@ -167,32 +167,32 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"] {
-  --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 22%, var(--ui-surface-default));
-  --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 28%, var(--ui-surface-default));
+  --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
+  --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
 
 [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"] {
-  --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 22%, var(--ui-surface-default));
-  --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 28%, var(--ui-surface-default));
+  --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
+  --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
 
 [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"] {
-  --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 22%, var(--ui-surface-default));
-  --_badge-border: color-mix(in srgb, var(--ui-success-solid) 28%, var(--ui-surface-default));
+  --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
+  --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
 
 [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"] {
-  --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 22%, var(--ui-surface-default));
-  --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 28%, var(--ui-surface-default));
+  --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
+  --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
 
 [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"] {
-  --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 22%, var(--ui-surface-default));
-  --_badge-border: color-mix(in srgb, var(--ui-info-solid) 28%, var(--ui-surface-default));
+  --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
+  --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
@@ -238,14 +238,16 @@ const hostState = computed(() =>
   --_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. */
+/* The clipped point needs an inset surface over an outer border-colour shape: a native border
+   has no diagonal edge to follow. Keep this edge for every tag variant. */
 [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
+  position: relative;
+  isolation: isolate;
   border-color: transparent;
   border-radius: 0;
+  background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
   padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
   clip-path: polygon(
     0 0,
@@ -256,26 +258,10 @@ const hostState = computed(() =>
   );
 }
 
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"]:dir(rtl) {
-  padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
-  padding-inline-start: calc(
-    var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
-  );
-  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-color-border, var(--_badge-border)));
-}
-
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"]::before {
   content: "";
   position: absolute;
-  inset: 1px;
+  inset: 0;
   z-index: -1;
   background: var(--_badge-outline-surface);
   clip-path: polygon(
@@ -288,18 +274,26 @@ const hostState = computed(() =>
   pointer-events: none;
 }
 
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"]:dir(rtl) {
+  padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
+  padding-inline-start: calc(
+    var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
+  );
+  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
+}
+
+[data-component~="ui-badge"][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"] {
+  [data-component~="ui-badge"][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 {
+  [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"]::before {
     background: Canvas;
   }
 }

package/vue/UiCombobox.vue

@@ -937,6 +937,8 @@ defineExpose({
             :key="row.id"
             class="option"
             role="option"
+            data-ui-choice-option=""
+            :data-multiple="multiple ? '' : undefined"
             :id="`${uid}-option-${row.index}`"
             :aria-selected="row.selected"
             :aria-disabled="row.disabled"
@@ -969,7 +971,9 @@ defineExpose({
           v-if="creatable"
           class="option"
           role="option"
+          data-ui-choice-option=""
           aria-selected="false"
+          :data-multiple="multiple ? '' : undefined"
           :id="`${uid}-option-${createIndex}`"
           :data-index="createIndex"
           :class="{ active: createIndex === active }"
@@ -1260,21 +1264,6 @@ input:disabled, button:disabled {
 [hidden] {
   display: none;
 }
-.option {
-  padding: var(--ui-space-2) var(--ui-space-3);
-  border-radius: var(--ui-radius-sm);
-  cursor: pointer;
-  overflow-wrap: anywhere;
-}
-.option:hover, .option.active {
-  background: var(--ui-surface-muted);
-  outline: 1px solid var(--ui-focus-ring);
-  outline-offset: -1px;
-}
-.option[aria-disabled="true"] {
-  color: var(--ui-disabled-text);
-  cursor: not-allowed;
-}
 .option[aria-disabled="true"] .primary,
 .option[aria-disabled="true"] .secondary {
   color: var(--ui-disabled-text);
@@ -1342,40 +1331,6 @@ input:disabled, button:disabled {
   }
 }
 
-/* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
-   before anything is picked. aria-selected is the state; this draws it.
-   Longhands, not shorthands: lowering drops a shorthand that omits a component. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option {
-  display: flex;
-  gap: var(--ui-space-2);
-  align-items: center;
-}
-
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option::before {
-  content: "";
-  flex: none;
-  inline-size: 1.125rem;
-  block-size: 1.125rem;
-  border-style: solid;
-  border-width: 1px;
-  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
-  border-radius: var(--ui-radius-sm);
-  background-color: var(--ui-control-surface, var(--ui-surface-default));
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 0.7rem;
-}
-
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"]
-  .option[aria-selected="true"]::before {
-  border-color: var(--ui-accent-solid);
-  background-color: var(--ui-accent-solid);
-  background-image: var(
-    --_ui-combobox-option-check,
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E")
-  );
-}
-
 /* Multiple mode keeps one control height. Chips and the input scroll within the entry,
    while the clear and disclosure controls remain fixed at the end of the field. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field {

package/vue/UiInput.vue

@@ -197,7 +197,7 @@ useComponentHost(controllerModule.default, {
   opacity: 1;
 }
 
-[data-component~="ui-input"]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-input"]:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
   border-color: var(
     --ui-input-border-hover,
     var(--_ui-default-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)))

package/vue/UiInputGroup.vue

@@ -118,7 +118,7 @@ useComponentHost(controllerModule.default, {
   }
 }
 
-[data-component~="ui-input-group"]:hover:not(:has(input:focus, input:disabled)) {
+[data-component~="ui-input-group"]:hover:not(:has(input:focus, input:disabled, input:read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
 

package/vue/UiListbox.d.ts

@@ -2,21 +2,34 @@ type __VLS_Props = {
     disabled?: boolean;
     invalid?: boolean;
     multiple?: boolean;
+    name?: string;
     required?: boolean;
     rows?: number;
     value?: string;
     values?: readonly (string)[];
-    modelValue?: string | null;
 };
-declare var __VLS_1: {};
+declare var __VLS_9: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
+    change: (detail: {
+        readonly value: string | null;
+        readonly values: readonly (string)[];
+        readonly trigger: "keyboard" | "pointer";
+    }) => any;
+    "update:value": (value: string) => any;
+    "update:values": (value: readonly string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onChange?: ((detail: {
+        readonly value: string | null;
+        readonly values: readonly (string)[];
+        readonly trigger: "keyboard" | "pointer";
+    }) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    "onUpdate:values"?: ((value: readonly string[]) => any) | undefined;
 }>, {
+    name: string;
     invalid: boolean;
     disabled: boolean;
     required: boolean;

package/vue/UiListbox.vue

@@ -1,8 +1,9 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 import * as controllerModule from '../components/ui-listbox/ui-listbox.js'
 import { createDispatch, useComponentHost } from './host'
+import UiScrollArea from './UiScrollArea.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -11,53 +12,144 @@ const props = withDefaults(
     disabled?: boolean
     invalid?: boolean
     multiple?: boolean
+    name?: string
     required?: boolean
     rows?: number
     value?: string
     values?: readonly (string)[]
-    modelValue?: string | null
   }>(),
   {
     disabled: false,
     invalid: false,
     multiple: false,
+    name: '',
     required: false,
     rows: 5,
   },
 )
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
+  'update:value': [value: string]
+  'update:values': [value: readonly (string)[]]
+  change: [
+    detail: {
+      readonly value: string | null
+      readonly values: readonly (string)[]
+      readonly trigger: 'keyboard' | 'pointer'
+    },
+  ]
 }>()
-const model = computed({
-  get: () => props.modelValue ?? props.value ?? undefined,
-  set: (value) => emit('update:modelValue', value as string),
-})
 
 const root = ref<HTMLElement | null>(null)
+const choicesElement = useTemplateRef<HTMLElement>('choices')
+const optionsElement = useTemplateRef<HTMLElement>('options')
+const validityElement = useTemplateRef<HTMLElement>('validity')
+const choices = ref<
+  { value: string; label: string; disabled: boolean; selected: boolean; index: number }[]
+>([])
+const selection = ref<string[]>([])
+const hasSelection = ref(false)
+const active = ref(-1)
+const uid = ref('')
+const validationError = ref(false)
 
-const dispatch = createDispatch(root)
+const isChangeDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && (typeof (detail as Record<string, unknown>)['value'] === 'string'
+    || (detail as Record<string, unknown>)['value'] === null)
+  && (Array.isArray((detail as Record<string, unknown>)['values'])
+    && ((detail as Record<string, unknown>)['values'] as unknown[]).every((item: unknown) =>
+      typeof item === 'string'
+    ))
+  && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+    || (detail as Record<string, unknown>)['trigger'] === 'pointer')
+  && Object.keys(detail as object).every((key) => ['value', 'values', 'trigger'].includes(key))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    change: isChangeDetail,
+  },
+  modeled: ['value', 'values'],
+})
 
 useComponentHost(controllerModule.default, {
   root,
   dispatch,
   props,
+  refs: { choices: choicesElement, options: optionsElement, validity: validityElement },
+  state: { choices, selection, hasSelection, active, uid, validationError },
 })
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
 </script>
 
 <template>
-  <select
+  <div
     data-component="ui-listbox"
+    role="listbox"
     v-bind="$attrs"
-    :size="rows"
-    :multiple="multiple"
-    :disabled="disabled"
-    :required="required"
-    :aria-invalid="invalid"
-    v-model="model"
+    :tabindex="attribute(({ true: '-1', false: '0' })[`${disabled}`])"
+    :aria-multiselectable="multiple"
+    :aria-disabled="disabled"
+    :aria-required="required"
+    :aria-invalid="invalid || validationError"
+    :style="{ '--_rows': rows }"
     ref="root"
   >
-    <slot />
-  </select>
+    <UiScrollArea class="choices" ref="choices"><div
+        v-for="choice in choices"
+        :key="choice.index"
+        class="option"
+        role="option"
+        data-ui-choice-option=""
+        :data-multiple="multiple ? '' : undefined"
+        :id="`${uid}-option-${choice.index}`"
+        :data-index="choice.index"
+        :aria-selected="choice.selected"
+        :aria-disabled="choice.disabled"
+        :class="{ active: choice.index === active }"
+      >
+        <span>{{ choice.label }}</span>
+      </div></UiScrollArea>
+    <select
+      class="fallback"
+      aria-label="Choices"
+      :size="rows"
+      :multiple="multiple"
+      :disabled="disabled"
+      :required="required"
+      :name="name"
+      ref="options"
+    >
+      <slot />
+    </select>
+    <template v-if="name && !disabled"><input
+        v-for="(selected, index) in selection"
+        :key="index"
+        type="hidden"
+        :name="name"
+        :value="selected"
+      ></template>
+    <input
+      class="validity"
+      type="checkbox"
+      aria-hidden="true"
+      tabindex="-1"
+      :required="required && !hasSelection && !disabled"
+      :checked="hasSelection"
+      :disabled="disabled"
+      ref="validity"
+    >
+  </div>
 </template>
 
 <style scoped>
@@ -83,29 +175,55 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-listbox"] {
+  position: relative;
   box-sizing: border-box;
   display: block;
   inline-size: 100%;
   min-inline-size: 0;
-  min-block-size: var(--ui-control-min-block-size);
   margin: 0;
   padding: var(--ui-space-1);
   border: 1px solid var(--ui-listbox-border, var(--ui-control-border));
   border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background: var(--ui-listbox-surface, var(--ui-control-surface));
   color: var(--ui-text-primary);
-  color-scheme: light dark;
   font: inherit;
   line-height: var(--ui-line-height-md);
   box-shadow: var(--ui-control-inset);
+  outline: none;
 }
 
-[data-component~="ui-listbox"] option,
-[data-component~="ui-listbox"] optgroup {
-  padding: var(--ui-space-2);
+.choices {
+  max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
+}
+
+[data-component~="ui-listbox"]:not([data-enhanced]) {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+[data-component~="ui-listbox"]:not([data-enhanced]) .choices,
+[data-component~="ui-listbox"][data-enhanced] .fallback {
+  display: none;
+}
+
+.fallback {
+  box-sizing: border-box;
+  inline-size: 100%;
   font: inherit;
 }
 
+.validity {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  opacity: 0;
+  pointer-events: none;
+}
+
 [data-component~="ui-listbox"]:focus-visible {
   border-color: var(--ui-control-focus);
   outline: 2px solid var(--ui-focus-ring);
@@ -113,12 +231,11 @@ useComponentHost(controllerModule.default, {
   box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
 }
 
-[data-component~="ui-listbox"][aria-invalid="true"],
-[data-component~="ui-listbox"]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-listbox"][aria-invalid="true"] {
   border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
 }
 
-[data-component~="ui-listbox"]:disabled {
+[data-component~="ui-listbox"][aria-disabled="true"] {
   background: var(--ui-control-surface-disabled);
   color: var(--ui-disabled-text);
   box-shadow: none;

package/vue/UiSelect.vue

@@ -142,7 +142,7 @@ useComponentHost(controllerModule.default, {
   background-size: 1.125rem 1.125rem;
 }
 
-[data-component~="ui-select"]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-select"]:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
   border-color: var(
     --ui-select-border-hover,
     var(--ui-control-border-hover, var(--ui-text-secondary))