@threadlabs/looma 0.28.11 → 0.28.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.28.11",
+  "version": "0.28.12",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-editor-chip-editor.css

@@ -0,0 +1 @@
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */

package/styles/ui-radio-group.css

@@ -36,6 +36,15 @@
       clear: both;
     }
 
+    legend.sr-only {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+
     :scope:where([data-component~="ui-radio-group"])[data-ui-radio-group-state~="invalid"] legend {
       color: var(--_ui-radio-group-invalid-text);
     }

package/styles/ui-swatch.css

@@ -0,0 +1,76 @@
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-swatch"] { --html-next-scope-owner: "ui-swatch" !important; }
+}
+@scope ([data-component~="ui-swatch"]) to ([data-component], [data-slotted]) {
+@property --ui-swatch-size {
+      syntax: "*";
+      inherits: false;
+    }
+
+    /* A native radio drawn as a round dot. Inside a ui-radio-group the group names it, applies its
+       value, and moves between swatches with the arrow keys. */
+    :scope:where([data-component~="ui-swatch"]) {
+      --_surface: var(--ui-surface-subtle);
+      --_text: var(--ui-text-secondary);
+
+      appearance: none;
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      inline-size: var(--ui-swatch-size, 1.65rem);
+      block-size: var(--ui-swatch-size, 1.65rem);
+      margin: 0;
+      border: var(--ui-border-width) solid color-mix(in srgb, var(--_surface) 75%, var(--_text) 25%);
+      border-radius: 50%;
+      background: var(--_surface);
+      cursor: pointer;
+    }
+
+    :scope:where([data-component~="ui-swatch"])[data-ui-swatch-state~="tone=blue"] {
+      --_surface: var(--ui-info-soft);
+      --_text: var(--ui-info-subtle-text);
+    }
+
+    :scope:where([data-component~="ui-swatch"])[data-ui-swatch-state~="tone=green"] {
+      --_surface: var(--ui-success-soft);
+      --_text: var(--ui-success-subtle-text);
+    }
+
+    :scope:where([data-component~="ui-swatch"])[data-ui-swatch-state~="tone=yellow"] {
+      --_surface: var(--ui-warning-soft);
+      --_text: var(--ui-warning-subtle-text);
+    }
+
+    :scope:where([data-component~="ui-swatch"])[data-ui-swatch-state~="tone=red"] {
+      --_surface: var(--ui-danger-soft);
+      --_text: var(--ui-danger-subtle-text);
+    }
+
+    :scope:where([data-component~="ui-swatch"])[data-ui-swatch-state~="tone=purple"] {
+      --_surface: var(--ui-accent-soft);
+      --_text: var(--ui-accent-subtle-text);
+    }
+
+    /* The chosen swatch and the focused one share one ring at the focus width (2px by default), in
+       the tone or the focus colour. */
+    :scope:where([data-component~="ui-swatch"]):checked {
+      outline: var(--ui-focus-width) solid var(--_text);
+      outline-offset: var(--ui-focus-width);
+    }
+
+    :scope:where([data-component~="ui-swatch"]):focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: var(--ui-focus-width);
+    }
+}
+@scope ([data-component~="ui-swatch"]) to ([data-component]) {
+/* A native radio drawn as a round dot. Inside a ui-radio-group the group names it, applies its
+       value, and moves between swatches with the arrow keys. */
+
+    /* The chosen swatch and the focused one share one ring at the focus width (2px by default), in
+       the tone or the focus colour. */
+}

package/vanilla/UiEditorChipEditor.d.ts

@@ -0,0 +1,18 @@
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+export interface UiEditorChipEditorEventMap {
+  label: CustomEvent<{ readonly label: string }>;
+  color: CustomEvent<{ readonly color: "neutral" | "blue" | "green" | "yellow" | "red" | "purple" }>;
+  done: CustomEvent<Readonly<Record<string, unknown>>>;
+}
+export interface UiEditorChipEditorElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiEditorChipEditorEventMap>(type: K, listener: (this: UiEditorChipEditorElement, event: UiEditorChipEditorEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiEditorChipEditorEventMap>(type: K, listener: (this: UiEditorChipEditorElement, event: UiEditorChipEditorEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiEditorChipEditorProps {
+  color?: "neutral" | "blue" | "green" | "yellow" | "red" | "purple" | null;
+  label?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiEditorChipEditor(props?: UiEditorChipEditorProps): UiEditorChipEditorElement;

package/vanilla/UiEditorChipEditor.js

@@ -0,0 +1,45 @@
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, toAttribute, writeAttribute, dispatchDeclared, detailCheck, formatOf, keywordFormat, acceptProps, manageProps, checkConstrained, checkFormat, checkObject, checkRecord, checkString, checkUnknown } from "@nextwebwg/html-next/generated-runtime";
+import * as controller from "../components/ui-editor-chip-editor/ui-editor-chip-editor.js";
+import "../styles/ui-editor-chip-editor.css";
+
+const T0 = ["",[],["ui-stack",["gap","s"],["ui-input",["data-chip-label","","size","sm","placeholder","Set a label","aria-label","Chip text"]],["ui-radio-group",["label","Chip color","label-visibility","sr-only"],["ui-swatch",["tone","neutral"]],["ui-swatch",["tone","blue"]],["ui-swatch",["tone","green"]],["ui-swatch",["tone","yellow"]],["ui-swatch",["tone","red"]],["ui-swatch",["tone","purple"]]]]];
+let P0;
+const S = { n: [], t: [], f: import.meta.url, g: "ui-editor-chip-editor", d: { "label": [detailCheck(checkObject([["label", checkString, false]], false)), true, true, false], "color": [detailCheck(checkObject([["color", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["neutral","blue","green","yellow","red","purple"]}), false]], false)), true, true, false], "done": [detailCheck(checkRecord(checkUnknown)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "color": { "required":false,"values":["neutral","blue","green","yellow","red","purple"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "label": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
+const C = (host) => controller.default(host);
+
+export function createUiEditorChipEditor(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  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));
+  }
+  if (!element.hasAttribute("role")) element.setAttribute("role", "dialog");
+  if (!element.hasAttribute("aria-label")) element.setAttribute("aria-label", "Edit chip");
+  element.setAttribute("data-component", "ui-editor-chip-editor");
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const p0 = (r, c, d) => {
+    if (c & 2) {
+      const x0 = v[1];
+      const s0 = toAttribute(x0, "value");
+      if (s0 !== r.v0) writeAttribute(r.a0, "value", r.v0 = s0);
+    }
+    if (c & 1073741825) {
+      const x1 = v[0];
+      const s1 = toAttribute(x1, "value");
+      if (s1 !== r.v1) writeAttribute(r.a1, "value", r.v1 = s1);
+    }
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.firstChild;
+  const t2 = t1.nextSibling;
+  const R = { a0: t1, a1: t2, v0: null, v1: null };
+  const I = { B };
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), C, undefined, I);
+  manageProps(I);
+  return element;
+}

package/vanilla/UiRadioGroup.d.ts

@@ -11,6 +11,7 @@ export interface UiRadioGroupProps {
   disabled?: boolean | null;
   invalid?: boolean | null;
   label?: string | null;
+  labelVisibility?: "visible" | "sr-only" | null;
   name?: string | null;
   orientation?: "horizontal" | "vertical" | null;
   required?: boolean | null;

package/vanilla/UiRadioGroup.js

@@ -7,7 +7,7 @@ const T0 = ["",[],["legend",[],0],4];
 const T1 = ["",[]];
 let P0, P1;
 const S = { n: ["internalValue"], t: ["s"], f: import.meta.url, g: "ui-radio-group", d: { "select": [detailCheck(checkObject([["value", checkString, false], ["previousValue", checkString, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "change": [detailCheck(checkObject([["checked", checkBoolean, false], ["value", checkString, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared };
-const D = { props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "invalid": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false,"default":"Options", c: checkString, t: "string", j: 0, m: "s" }, "name": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "orientation": { "required":false,"values":["horizontal","vertical"],"default":"horizontal", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "required": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "value": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
+const D = { props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "invalid": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false,"default":"Options", c: checkString, t: "string", j: 0, m: "s" }, "labelVisibility": { "required":false,"values":["visible","sr-only"],"default":"visible", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "name": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "orientation": { "required":false,"values":["horizontal","vertical"],"default":"horizontal", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "required": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "value": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
 const C = (host) => controller.default(host);
 
 export function createUiRadioGroup(options = {}, html) {
@@ -20,7 +20,7 @@ export function createUiRadioGroup(options = {}, html) {
   if (!element.hasAttribute("role")) element.setAttribute("role", "radiogroup");
   element.setAttribute("data-component", "ui-radio-group");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = ["", null, null, null, null, null, null, null];
+  const v = ["", null, null, null, null, null, null, null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, [], html);
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
@@ -31,8 +31,8 @@ export function createUiRadioGroup(options = {}, html) {
   const p1 = (r, c, d) => {
   };
   const p0 = (r, c, d) => {
-    if (c & 64) {
-      const x0 = v[6];
+    if (c & 128) {
+      const x0 = v[7];
       const s0 = toAttribute(x0, "aria-required");
       if (s0 !== r.v0) writeAttribute(r.n, "aria-required", r.v0 = s0);
     }
@@ -46,24 +46,29 @@ export function createUiRadioGroup(options = {}, html) {
       const s2 = toAttribute(x2, "disabled");
       if (s2 !== r.v2) writeAttribute(r.n, "disabled", r.v2 = s2);
     }
+    if (c & 16) {
+      const x3 = (v[4] === "sr-only");
+      const s3 = x3;
+      if (s3 !== r.v3) r.a1.classList.toggle("sr-only", r.v3 = s3);
+    }
     if (c & 8) {
-      const x3 = v[3];
-      const s3 = toText(x3);
-      if (s3 !== r.v3) r.a1.data = r.v3 = s3;
+      const x4 = v[3];
+      const s4 = toText(x4);
+      if (s4 !== r.v4) r.a2.data = r.v4 = s4;
     }
-    if (c & 36) {
-      const x4 = hostState(["invalid","orientation"], [v[2], v[5]]);
-      const s4 = x4;
-      if (s4 !== r.v4) writeAttribute(r.n, "data-ui-radio-group-state", (r.v4 = s4) === "" ? null : s4);
+    if (c & 68) {
+      const x5 = hostState(["invalid","orientation"], [v[2], v[6]]);
+      const s5 = x5;
+      if (s5 !== r.v5) writeAttribute(r.n, "data-ui-radio-group-state", (r.v5 = s5) === "" ? null : s5);
     }
-    if (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a2, r.e0, "", J, false, undefined, d);
+    if (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a3, r.e0, "", J, false, undefined, d);
       if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b0 = m1(d); at.before(r.b0.n); } }
     else if (r.b0 !== undefined) p1(r.b0, c, d);
   };
   const t0 = element.firstChild;
   const t1 = t0.firstChild;
   const t2 = t0.nextSibling;
-  const R = { n: element, a1: t1, v0: undefined, v1: undefined, v2: undefined, v3: "", v4: undefined, a2: t2, e0: t2.nextSibling, b0: undefined, f0: undefined };
+  const R = { n: element, a1: t0, a2: t1, v0: undefined, v1: undefined, v2: undefined, v3: false, v4: "", v5: undefined, a3: t2, e0: t2.nextSibling, b0: undefined, f0: undefined };
   const I = { B };
   const J = project(I, children, slots);
   I.R = new Set();

package/vanilla/UiSwatch.d.ts

@@ -0,0 +1,14 @@
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+export interface UiSwatchEventMap {
+}
+export interface UiSwatchElement extends HTMLInputElement {
+  addEventListener<K extends keyof UiSwatchEventMap>(type: K, listener: (this: UiSwatchElement, event: UiSwatchEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiSwatchEventMap>(type: K, listener: (this: UiSwatchElement, event: UiSwatchEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiSwatchProps {
+  tone?: "neutral" | "blue" | "green" | "yellow" | "red" | "purple" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiSwatch(props?: UiSwatchProps): UiSwatchElement;

package/vanilla/UiSwatch.js

@@ -0,0 +1,54 @@
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, readIndex, toAttribute, writeAttribute, computedCycle, formatOf, keywordFormat, hostState, acceptProps, manageProps, readonlyView, checkFormat } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-swatch.css";
+
+const S = { n: ["toneName"], t: ["?"], f: import.meta.url, g: "ui-swatch", k: 0, r: readonlyView };
+const D = { props: { "tone": { "required":false,"values":["neutral","blue","green","yellow","red","purple"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+
+export function createUiSwatch(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("input");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  if (!element.hasAttribute("type")) element.setAttribute("type", "radio");
+  element.setAttribute("data-component", "ui-swatch");
+  const v = [undefined, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const X = { e: 0, g: (j) => g(j), w: new Set() };
+  const ke = [];
+  const K = [() => readIndex({ "neutral": "Neutral", "blue": "Blue", "green": "Green", "yellow": "Yellow", "red": "Red", "purple": "Purple" }, v[1])];
+  const g = (j) => {
+    const i = j - 0;
+    if (ke[i] === X.e) return v[j];
+    if (ke[i] === -1) computedCycle();
+    ke[i] = -1;
+    let next;
+    try { next = K[i](); } catch (error) { ke[i] = undefined; throw error; }
+    ke[i] = X.e;
+    const previous = v[j];
+    if (!Object.is(previous, next)) { v[j] = next; X.n?.(j, previous, next); }
+    return next;
+  };
+  const p0 = (r, c, d) => {
+    if (c & 1073741826) {
+      const x0 = v[1];
+      const s0 = toAttribute(x0, "value");
+      if (s0 !== r.v0) writeAttribute(r.n, "value", r.v0 = s0);
+      const x1 = g(0);
+      const s1 = toAttribute(x1, "aria-label");
+      if (s1 !== r.v1) writeAttribute(r.n, "aria-label", r.v1 = s1);
+    }
+    if (c & 2) {
+      const x2 = hostState(["tone"], [v[1]]);
+      const s2 = x2;
+      if (s2 !== r.v2) writeAttribute(r.n, "data-ui-swatch-state", (r.v2 = s2) === "" ? null : s2);
+    }
+  };
+  const R = { n: element, v0: undefined, v1: undefined, v2: undefined };
+  const I = { B };
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, X, I);
+  manageProps(I);
+  return element;
+}

package/vanilla/index.js

@@ -20,6 +20,7 @@ export * from "./UiDialog.js";
 export * from "./UiDisclosure.js";
 export * from "./UiEditable.js";
 export * from "./UiEditorBlockActions.js";
+export * from "./UiEditorChipEditor.js";
 export * from "./UiEditorCodeLanguage.js";
 export * from "./UiEditorImageToolbar.js";
 export * from "./UiEditorInsertTableGrid.js";
@@ -66,6 +67,7 @@ export * from "./UiSidebar.js";
 export * from "./UiSpinner.js";
 export * from "./UiStack.js";
 export * from "./UiStatusMessage.js";
+export * from "./UiSwatch.js";
 export * from "./UiSwitch.js";
 export * from "./UiSwitcher.js";
 export * from "./UiTable.js";

package/vue/UiEditorChipEditor.d.ts

@@ -0,0 +1,45 @@
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    color: {
+        type: PropType<"neutral" | "blue" | "green" | "yellow" | "red" | "purple" | null>;
+        default: string;
+    };
+    label: {
+        type: PropType<string | null>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    done: (event: CustomEvent<Readonly<Record<string, unknown>>>) => any;
+    label: (event: CustomEvent<{
+        readonly label: string;
+    }>) => any;
+    color: (event: CustomEvent<{
+        readonly color: "neutral" | "blue" | "green" | "yellow" | "red" | "purple";
+    }>) => any;
+    "update:color": (value: string) => any;
+    "update:label": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: PropType<"neutral" | "blue" | "green" | "yellow" | "red" | "purple" | null>;
+        default: string;
+    };
+    label: {
+        type: PropType<string | null>;
+        default: string;
+    };
+}>> & Readonly<{
+    onDone?: ((event: CustomEvent<Readonly<Record<string, unknown>>>) => any) | undefined;
+    onLabel?: ((event: CustomEvent<{
+        readonly label: string;
+    }>) => any) | undefined;
+    onColor?: ((event: CustomEvent<{
+        readonly color: "neutral" | "blue" | "green" | "yellow" | "red" | "purple";
+    }>) => any) | undefined;
+    "onUpdate:color"?: ((value: string) => any) | undefined;
+    "onUpdate:label"?: ((value: string) => any) | undefined;
+}>, {
+    label: string | null;
+    color: "blue" | "green" | "purple" | "red" | "yellow" | "neutral" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiEditorChipEditor.js

@@ -0,0 +1,2 @@
+import { t as UiEditorChipEditor_default } from "./chunks/UiEditorChipEditor.js";
+export { UiEditorChipEditor_default as default };

package/vue/UiEditorChipEditor.vue

@@ -0,0 +1,163 @@
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
+import { checkedProp, propValidityState, vPropValidity } from './props'
+import UiInput from './UiInput.vue'
+import UiRadioGroup from './UiRadioGroup.vue'
+import UiStack from './UiStack.vue'
+import UiSwatch from './UiSwatch.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    color: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'value' },
+      description: 'The chip\'s colour, checked among the swatches.',
+      values: ['neutral', 'blue', 'green', 'yellow', 'red', 'purple'],
+      default: 'neutral',
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description: 'The chip\'s text, shown in the field as the reader edits it.',
+      default: '',
+    },
+  },
+} as const
+const props = defineProps({
+  color: {
+    type: null as unknown as PropType<
+      'neutral' | 'blue' | 'green' | 'yellow' | 'red' | 'purple' | null
+    >,
+    default: 'neutral',
+  },
+  label: { type: null as unknown as PropType<string | null>, default: '' },
+})
+const acceptedProps: Record<string, unknown> = { color: 'neutral', label: '' }
+const checkedProps = computed(() => ({
+  color: checkedProp<'neutral' | 'blue' | 'green' | 'yellow' | 'red' | 'purple'>(
+    props['color'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'color',
+    acceptedProps,
+  ) as 'neutral' | 'blue' | 'green' | 'yellow' | 'red' | 'purple',
+  label: checkedProp<string>(
+    props['label'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'label',
+    acceptedProps,
+  ) as string,
+}))
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+const reflectedProp = useReflectedProp()
+const hydrationInstance = getCurrentInstance()
+const emit = defineEmits<{
+  'update:color': [value: string]
+  'update:label': [value: string]
+  label: [event: CustomEvent<{ readonly label: string }>]
+  color: [
+    event: CustomEvent<
+      { readonly color: 'neutral' | 'blue' | 'green' | 'yellow' | 'red' | 'purple' }
+    >,
+  ]
+  done: [event: CustomEvent<Readonly<Record<string, unknown>>>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+checkHydratedRoot('div', 'ui-editor-chip-editor')
+
+const isLabelDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['label'] === 'string'
+  && Object.keys(detail as object).every((key) => ['label'].includes(key)))
+const isColorDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && ((detail as Record<string, unknown>)['color'] === 'neutral'
+    || (detail as Record<string, unknown>)['color'] === 'blue'
+    || (detail as Record<string, unknown>)['color'] === 'green'
+    || (detail as Record<string, unknown>)['color'] === 'yellow'
+    || (detail as Record<string, unknown>)['color'] === 'red'
+    || (detail as Record<string, unknown>)['color'] === 'purple')
+  && Object.keys(detail as object).every((key) => ['color'].includes(key)))
+const isDoneDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Object.values(detail as object).every((item: unknown) => true))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    label: isLabelDetail,
+    color: isColorDetail,
+    done: isDoneDetail,
+  },
+  modeled: ['color', 'label'],
+})
+
+useComponentHost(() => import('../components/ui-editor-chip-editor/ui-editor-chip-editor.js'), {
+  root,
+  dispatch,
+  controllerSource: {
+    specifier: '../components/ui-editor-chip-editor/ui-editor-chip-editor.js',
+    definition: './components/ui-editor-chip-editor/ui-editor-chip-editor.html',
+  },
+  props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['color', 'label'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+})
+</script>
+
+<template>
+  <div
+    role="dialog"
+    aria-label="Edit chip"
+    v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-color="reflectedProp('color', 'color', checkedProps.color, undefined, false)"
+    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    ref="root"
+  >
+    <UiStack gap="s"><UiInput
+        data-chip-label=""
+        size="sm"
+        placeholder="Set a label"
+        aria-label="Chip text"
+        :value="checkedProps.label"
+      />
+      <UiRadioGroup
+        label="Chip color"
+        label-visibility="sr-only"
+        :value="checkedProps.color"
+      ><UiSwatch tone="neutral" />
+        <UiSwatch tone="blue" />
+        <UiSwatch tone="green" />
+        <UiSwatch tone="yellow" />
+        <UiSwatch tone="red" />
+        <UiSwatch tone="purple" /></UiRadioGroup></UiStack>
+  </div>
+</template>

package/vue/UiRadioGroup.d.ts

@@ -16,6 +16,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<string | null>;
         default: string;
     };
+    labelVisibility: {
+        type: PropType<"visible" | "sr-only" | null>;
+        default: string;
+    };
     name: {
         type: PropType<string | null>;
         default: string;
@@ -57,6 +61,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<string | null>;
         default: string;
     };
+    labelVisibility: {
+        type: PropType<"visible" | "sr-only" | null>;
+        default: string;
+    };
     name: {
         type: PropType<string | null>;
         default: string;
@@ -92,6 +100,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     label: string | null;
     invalid: boolean | null;
     disabled: boolean | null;
+    labelVisibility: "visible" | "sr-only" | null;
     orientation: "vertical" | "horizontal" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;