@threadlabs/looma 0.17.3 → 0.18.0

package/vanilla/UiListbox.js

@@ -3,40 +3,87 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-listbox/ui-listbox.js";
 import "../styles/ui-listbox.css";
 
-const definition = {...{"contract":{"tag":"ui-listbox","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"multiple":{"type":"boolean","required":false,"target":{"attribute":"multiple"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"rows":{"type":"number","required":false,"target":{"attribute":"size"},"default":5},"value":{"type":"string","required":false,"target":{"attribute":"value"}},"values":{"type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"required":false,"target":{"attribute":"values"}}}},"template":{"kind":"element","name":"select","attributes":[{"kind":"attribute","name":"size","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}},{"kind":"attribute","name":"multiple","expression":"multiple","expressionPlan":{"source":"multiple","ast":{"kind":"id","name":"multiple"},"dependencies":["multiple"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"select","choices":["select"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-listbox","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"invalid"},"default":false},"multiple":{"type":"boolean","required":false,"target":{"attribute":"aria-multiselectable"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"aria-required"},"default":false},"rows":{"type":"number","required":false,"target":{"attribute":"size"},"default":5},"value":{"type":"string","required":false,"target":{"attribute":"value"}},"values":{"type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"required":false,"target":{"attribute":"values"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"listbox"},{"kind":"attribute","name":"tabindex","expression":"{ true: '-1', false: '0' }[format('%s', disabled)]","expressionPlan":{"source":"{ true: '-1', false: '0' }[format('%s', disabled)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"-1"}},{"key":"false","value":{"kind":"literal","value":"0"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"disabled"}]}},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-multiselectable","expression":"multiple","expressionPlan":{"source":"multiple","ast":{"kind":"id","name":"multiple"},"dependencies":["multiple"]}},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid or validationError","expressionPlan":{"source":"invalid or validationError","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"invalid"},"right":{"kind":"id","name":"validationError"}},"dependencies":["invalid","validationError"]}},{"kind":"attribute","name":"--_rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"target":"style"}],"children":[{"kind":"element","name":"ui-scroll-area","attributes":[{"kind":"literal","name":"class","value":"choices"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"option"},{"kind":"attribute","name":"active","expression":"choice.index = active","expressionPlan":{"source":"choice.index = active","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"choice"},"key":"index"},"right":{"kind":"id","name":"active"}},"dependencies":["active","choice.index"]},"target":"class"},{"kind":"literal","name":"role","value":"option"},{"kind":"literal","name":"data-ui-choice-option","value":""},{"kind":"attribute","name":"data-multiple","expression":"multiple","expressionPlan":{"source":"multiple","ast":{"kind":"id","name":"multiple"},"dependencies":["multiple"]}},{"kind":"attribute","name":"id","expression":"format('%s-option-%s', uid, choice.index)","expressionPlan":{"source":"format('%s-option-%s', uid, choice.index)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s"},{"kind":"id","name":"uid"},{"kind":"member","object":{"kind":"id","name":"choice"},"key":"index"}]},"dependencies":["choice.index","uid"]}},{"kind":"attribute","name":"data-index","expression":"choice.index","expressionPlan":{"source":"choice.index","ast":{"kind":"member","object":{"kind":"id","name":"choice"},"key":"index"},"dependencies":["choice.index"]}},{"kind":"attribute","name":"aria-selected","expression":"choice.selected","expressionPlan":{"source":"choice.selected","ast":{"kind":"member","object":{"kind":"id","name":"choice"},"key":"selected"},"dependencies":["choice.selected"]}},{"kind":"attribute","name":"aria-disabled","expression":"choice.disabled","expressionPlan":{"source":"choice.disabled","ast":{"kind":"member","object":{"kind":"id","name":"choice"},"key":"disabled"},"dependencies":["choice.disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"choice.label","expressionPlan":{"source":"choice.label","ast":{"kind":"member","object":{"kind":"id","name":"choice"},"key":"label"},"dependencies":["choice.label"]}}],"children":[]}],"flow":{"kind":"each","item":"choice","list":"choices","listPlan":{"source":"choices","ast":{"kind":"id","name":"choices"},"dependencies":["choices"]},"key":"choice.index","keyPlan":{"source":"choice.index","ast":{"kind":"member","object":{"kind":"id","name":"choice"},"key":"index"},"dependencies":["choice.index"]}}}],"ref":"choices"},{"kind":"element","name":"select","attributes":[{"kind":"literal","name":"class","value":"fallback"},{"kind":"attribute","name":"size","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}},{"kind":"attribute","name":"multiple","expression":"multiple","expressionPlan":{"source":"multiple","ast":{"kind":"id","name":"multiple"},"dependencies":["multiple"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"literal","name":"aria-label","value":"Choices"}],"children":[{"kind":"slot"}],"ref":"options"},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"hidden"},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}}],"children":[],"flow":{"kind":"each","item":"selected","list":"selection","listPlan":{"source":"selection","ast":{"kind":"id","name":"selection"},"dependencies":["selection"]}}}],"flow":{"kind":"if","test":"name and not disabled","testPlan":{"source":"name and not disabled","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"name"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}},"dependencies":["disabled","name"]}}},{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"class","value":"validity"},{"kind":"literal","name":"type","value":"checkbox"},{"kind":"attribute","name":"required","expression":"required and not hasSelection and not disabled","expressionPlan":{"source":"required and not hasSelection and not disabled","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"and","left":{"kind":"id","name":"required"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"hasSelection"}}},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}},"dependencies":["disabled","hasSelection","required"]}},{"kind":"attribute","name":"checked","expression":"hasSelection","expressionPlan":{"source":"hasSelection","ast":{"kind":"id","name":"hasSelection"},"dependencies":["hasSelection"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"tabindex","value":"-1"}],"children":[],"ref":"validity"}]},"declarations":[{"kind":"state","name":"choices","type":"list(object({ value: string, label: string, disabled: boolean, selected: boolean, index: integer }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"selection","type":"list(string)","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"hasSelection","type":"boolean","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"active","type":"integer","expression":{"source":"-1","ast":{"kind":"unary","op":"-","operand":{"kind":"literal","value":1}},"dependencies":[]}},{"kind":"state","name":"uid","type":"string","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"validationError","type":"boolean","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ value: string | null, values: list(string), trigger: keyboard | pointer })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiListbox(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
-  const element = document.createElement("select");
+  const element = document.createElement("div");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
     element.setAttribute(name, value === true ? "" : String(value));
   }
-  const value0 = componentProps["rows"] === undefined ? 5 : componentProps["rows"];
-  if (value0 === null || value0 === undefined) element.removeAttribute("size");
-  else element.setAttribute("size", String(value0));
-  const value1 = componentProps["multiple"] === undefined ? false : componentProps["multiple"];
-  if (value1 === true) element.setAttribute("multiple", "");
-  else element.removeAttribute("multiple");
-  const value2 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value2 === true) element.setAttribute("disabled", "");
-  else element.removeAttribute("disabled");
-  const value3 = componentProps["required"] === undefined ? false : componentProps["required"];
-  if (value3 === true) element.setAttribute("required", "");
-  else element.removeAttribute("required");
-  const value4 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
-  if (typeof value4 === "boolean") element.setAttribute("aria-invalid", String(value4));
-  else element.removeAttribute("aria-invalid");
+  if (!element.hasAttribute("role")) element.setAttribute("role", "listbox");
+  const value0 = componentProps["multiple"] === undefined ? false : componentProps["multiple"];
+  if (typeof value0 === "boolean") element.setAttribute("aria-multiselectable", String(value0));
+  else element.removeAttribute("aria-multiselectable");
+  const value1 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (typeof value1 === "boolean") element.setAttribute("aria-disabled", String(value1));
+  else element.removeAttribute("aria-disabled");
+  const value2 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (typeof value2 === "boolean") element.setAttribute("aria-required", String(value2));
+  else element.removeAttribute("aria-required");
+  const value3 = componentProps["rows"] === undefined ? 5 : componentProps["rows"];
+  if (value3 === null || value3 === undefined) element.removeAttribute("--_rows");
+  else element.setAttribute("--_rows", String(value3));
   element.setAttribute("data-component", "ui-listbox");
+  const element0 = document.createElement("ui-scroll-area");
+  element0.setAttribute("class", "choices");
+  const element1 = document.createElement("div");
+  element1.setAttribute("class", "option");
+  element1.setAttribute("role", "option");
+  element1.setAttribute("data-ui-choice-option", "");
+  const value4 = componentProps["multiple"] === undefined ? false : componentProps["multiple"];
+  if (value4 === true) element1.setAttribute("data-multiple", "");
+  else element1.removeAttribute("data-multiple");
+  const element2 = document.createElement("span");
+  element1.append(element2);
+  element0.append(element1);
+  element.append(element0);
+  const element3 = document.createElement("select");
+  element3.setAttribute("class", "fallback");
+  const value5 = componentProps["rows"] === undefined ? 5 : componentProps["rows"];
+  if (value5 === null || value5 === undefined) element3.removeAttribute("size");
+  else element3.setAttribute("size", String(value5));
+  const value6 = componentProps["multiple"] === undefined ? false : componentProps["multiple"];
+  if (value6 === true) element3.setAttribute("multiple", "");
+  else element3.removeAttribute("multiple");
+  const value7 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value7 === true) element3.setAttribute("disabled", "");
+  else element3.removeAttribute("disabled");
+  const value8 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (value8 === true) element3.setAttribute("required", "");
+  else element3.removeAttribute("required");
+  const value9 = componentProps["name"] === undefined ? "" : componentProps["name"];
+  if (value9 === null || value9 === undefined) element3.removeAttribute("name");
+  else element3.setAttribute("name", String(value9));
+  element3.setAttribute("aria-label", "Choices");
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       projected.push([node, ""]);
-      element.append(node);
+      element3.append(node);
     }
   } else {
   }
+  element.append(element3);
+  const element4 = document.createElement("template");
+  const element5 = document.createElement("input");
+  element5.setAttribute("type", "hidden");
+  const value10 = componentProps["name"] === undefined ? "" : componentProps["name"];
+  if (value10 === null || value10 === undefined) element5.removeAttribute("name");
+  else element5.setAttribute("name", String(value10));
+  element4.append(element5);
+  element.append(element4);
+  const element6 = document.createElement("input");
+  element6.setAttribute("class", "validity");
+  element6.setAttribute("type", "checkbox");
+  const value11 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value11 === true) element6.setAttribute("disabled", "");
+  else element6.removeAttribute("disabled");
+  element6.setAttribute("aria-hidden", "true");
+  element6.setAttribute("tabindex", "-1");
+  element.append(element6);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,
   });

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/UiButton.vue

@@ -241,6 +241,11 @@ function attribute(value: unknown): any {
   margin: 0;
 }
 
+/* An anchor keeps the boxed button look even when an app styles ordinary links. */
+[data-component~="ui-button"]:is(a) {
+  text-decoration: none;
+}
+
 .spinner-wrap {
   display: inline-flex;
   flex: none;

package/vue/UiCheckbox.vue

@@ -188,7 +188,7 @@ input:indeterminate {
   box-shadow: var(--ui-control-inset);
 }
 
-/* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
+/* Centre the tick's box and lift it slightly for the rotated check shape. */
 input:checked::after {
   inset: 0;
   margin: auto;
@@ -200,7 +200,7 @@ input:checked::after {
   border-color: var(--ui-text-on-accent);
   border-width: 0 0.125rem 0.125rem 0;
   opacity: 1;
-  transform: translate(0.07rem, -0.09rem) rotate(45deg);
+  transform: translateY(-0.09rem) rotate(45deg);
   animation: ui-checkbox-check 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 
@@ -216,15 +216,15 @@ input:indeterminate::after {
 @keyframes ui-checkbox-check {
   from {
     opacity: 0;
-    transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(0.55);
+    transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
   }
   65% {
     opacity: 1;
-    transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1.12);
+    transform: translateY(-0.09rem) rotate(45deg) scale(1.12);
   }
   to {
     opacity: 1;
-    transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1);
+    transform: translateY(-0.09rem) rotate(45deg) scale(1);
   }
 }
 

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/UiIconButton.vue

@@ -204,7 +204,7 @@ function attribute(value: unknown): any {
 @media (hover: hover) and (pointer: fine) {
   [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
     border-color: transparent;
-    background: transparent;
+    background-color: transparent;
     box-shadow: none;
   }
 
@@ -232,7 +232,7 @@ function attribute(value: unknown): any {
   margin: 0;
   border: 1px solid transparent;
   border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
-  background: var(--ui-icon-button-surface, transparent);
+  background-color: var(--ui-icon-button-surface, transparent);
   color: inherit;
   display: inline-flex;
   align-items: center;
@@ -304,14 +304,14 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"] {
   border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
-  background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+  background-color: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
   background-image: var(--ui-raised-highlight);
   color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
   box-shadow: var(--ui-raised);
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"] {
-  background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+  background-color: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
   background-image: var(--ui-raised-highlight);
   color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
   box-shadow: var(
@@ -322,7 +322,10 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 
 [data-component~="ui-icon-button"]:hover:enabled:not([aria-disabled="true"]) {
   /* Derived from the text colour so the ghost hover shows on any background. */
-  background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
+  background-color: var(
+    --ui-icon-button-hover-surface,
+    color-mix(in srgb, currentColor 8%, transparent)
+  );
   color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
 }
 
@@ -334,7 +337,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
-  background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
+  background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
 }
 
 [data-component~="ui-icon-button"]:active:enabled:not([aria-disabled="true"]) {
@@ -370,7 +373,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 /* Disabled is a flat neutral control, independent of the active variant's tone. */
 [data-component~="ui-icon-button"]:disabled {
   border-color: var(--ui-disabled-border);
-  background: var(--ui-disabled-surface);
+  background-color: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
   filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
   opacity: var(--ui-icon-button-disabled-opacity, 1);

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));
 }
 
@@ -176,7 +176,7 @@ useComponentHost(controllerModule.default, {
   flex: none;
   align-items: center;
   padding-inline: var(--ui-space-2);
-  color: var(--ui-text-secondary);
+  color: var(--ui-text-muted);
   font-family: var(--ui-font-family-mono);
   font-size: var(--ui-font-size-sm);
   white-space: nowrap;