@threadlabs/looma 0.28.10 → 0.28.12

package/vue/UiRadioGroup.vue

@@ -40,6 +40,15 @@ const propValidityContract = {
         'The group\'s legend, shown above the radios and announced as the group\'s name. Phrase it as the question the radios answer.',
       default: 'Options',
     },
+    labelVisibility: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'labelvisibility' },
+      description:
+        'visible shows the legend; sr-only hides it visually but keeps it as the group\'s accessible name. Use sr-only only when the surrounding layout already makes\n      the choice clear, as with a row of colour swatches.',
+      values: ['visible', 'sr-only'],
+      default: 'visible',
+    },
     name: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
@@ -79,6 +88,10 @@ const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   invalid: { type: null as unknown as PropType<boolean | null>, default: false },
   label: { type: null as unknown as PropType<string | null>, default: 'Options' },
+  labelVisibility: {
+    type: null as unknown as PropType<'visible' | 'sr-only' | null>,
+    default: 'visible',
+  },
   name: { type: null as unknown as PropType<string | null>, default: '' },
   orientation: {
     type: null as unknown as PropType<'horizontal' | 'vertical' | null>,
@@ -91,6 +104,7 @@ const acceptedProps: Record<string, unknown> = {
   disabled: false,
   invalid: false,
   label: 'Options',
+  labelVisibility: 'visible',
   name: '',
   orientation: 'horizontal',
   required: false,
@@ -118,6 +132,13 @@ const checkedProps = computed(() => ({
     'label',
     acceptedProps,
   ) as string,
+  labelVisibility: checkedProp<'visible' | 'sr-only'>(
+    props['labelVisibility'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'labelVisibility',
+    acceptedProps,
+  ) as 'visible' | 'sr-only',
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
@@ -239,7 +260,16 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['disabled', 'invalid', 'label', 'name', 'orientation', 'required', 'value'],
+  propNames: [
+    'disabled',
+    'invalid',
+    'label',
+    'labelVisibility',
+    'name',
+    'orientation',
+    'required',
+    'value',
+  ],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { internalValue },
@@ -258,6 +288,7 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-label-visibility="reflectedProp('labelVisibility', 'label-visibility', checkedProps.labelVisibility, undefined, false)"
     :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
     :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
     :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
@@ -265,7 +296,9 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
     :data-ui-radio-group-state="hostState || undefined"
     ref="root"
   >
-    <legend>{{ checkedProps.label }}</legend>
+    <legend :class="{ 'sr-only': checkedProps.labelVisibility === 'sr-only' }">
+      {{ checkedProps.label }}
+    </legend>
     <slot />
   </fieldset>
 </template>
@@ -306,6 +339,15 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
     clear: both;
   }
 
+  legend.sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
   :scope[data-ui-radio-group-state~="invalid"] legend {
     color: var(--_ui-radio-group-invalid-text);
   }

package/vue/UiSwatch.d.ts

@@ -0,0 +1,16 @@
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    tone: {
+        type: PropType<"neutral" | "blue" | "green" | "yellow" | "red" | "purple" | null>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tone: {
+        type: PropType<"neutral" | "blue" | "green" | "yellow" | "red" | "purple" | null>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    tone: "blue" | "green" | "purple" | "red" | "yellow" | "neutral" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiSwatch.js

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

package/vue/UiSwatch.vue

@@ -0,0 +1,150 @@
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import {
+  attribute,
+  checkHydratedRoot,
+  cycleCheckedComputed,
+  nativeAttrs,
+  useReflectedProp,
+} from './host'
+import { checkedProp, vPropValidity } from './props'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'value' },
+      description:
+        'The swatch\'s colour, on the same tokens as editor chips. It is also the radio\'s value and, by name, its label.',
+      values: ['neutral', 'blue', 'green', 'yellow', 'red', 'purple'],
+      default: 'neutral',
+    },
+  },
+} as const
+const props = defineProps({
+  tone: {
+    type: null as unknown as PropType<
+      'neutral' | 'blue' | 'green' | 'yellow' | 'red' | 'purple' | null
+    >,
+    default: 'neutral',
+  },
+})
+const acceptedProps: Record<string, unknown> = { tone: 'neutral' }
+const checkedProps = computed(() => ({
+  tone: checkedProp<'neutral' | 'blue' | 'green' | 'yellow' | 'red' | 'purple'>(
+    props['tone'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'tone',
+    acceptedProps,
+  ) as 'neutral' | 'blue' | 'green' | 'yellow' | 'red' | 'purple',
+}))
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+const reflectedProp = useReflectedProp()
+
+const toneName = cycleCheckedComputed(() =>
+  (({
+    neutral: 'Neutral',
+    blue: 'Blue',
+    green: 'Green',
+    yellow: 'Yellow',
+    red: 'Red',
+    purple: 'Purple',
+  }) as Record<string, any>)[checkedProps.value.tone]
+)
+checkHydratedRoot('input', 'ui-swatch')
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    checkedProps.value.tone && 'tone',
+    checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <input
+    class="ui-swatch"
+    type="radio"
+    v-bind="nativeAttrs($attrs)"
+    :value.attr="checkedProps.tone ?? undefined"
+    :aria-label="typeof toneName === 'boolean' ? String(toneName) : attribute(toneName)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-swatch-state="hostState || undefined"
+  >
+</template>
+
+<style scoped>
+@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. */
+
+/* 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 (.ui-swatch) {
+  :scope:where(:scope) {
+    --_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(:scope):is([data-ui-swatch-state~="tone=blue"]) {
+    --_surface: var(--ui-info-soft);
+    --_text: var(--ui-info-subtle-text);
+  }
+
+  :scope:where(:scope):is([data-ui-swatch-state~="tone=green"]) {
+    --_surface: var(--ui-success-soft);
+    --_text: var(--ui-success-subtle-text);
+  }
+
+  :scope:where(:scope):is([data-ui-swatch-state~="tone=yellow"]) {
+    --_surface: var(--ui-warning-soft);
+    --_text: var(--ui-warning-subtle-text);
+  }
+
+  :scope:where(:scope):is([data-ui-swatch-state~="tone=red"]) {
+    --_surface: var(--ui-danger-soft);
+    --_text: var(--ui-danger-subtle-text);
+  }
+
+  :scope:where(:scope):is([data-ui-swatch-state~="tone=purple"]) {
+    --_surface: var(--ui-accent-soft);
+    --_text: var(--ui-accent-subtle-text);
+  }
+  :scope:where(:scope):is(:checked) {
+    outline: var(--ui-focus-width) solid var(--_text);
+    outline-offset: var(--ui-focus-width);
+  }
+
+  :scope:where(:scope):is(:focus-visible) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+    outline-offset: var(--ui-focus-width);
+  }
+}
+</style>

package/vue/chunks/UiEditorChipEditor.js

@@ -0,0 +1,157 @@
+import { i as checkHydratedRoot, o as createDispatch, p as nativeAttrs, v as useComponentHost, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
+import { a as vPropValidity, n as checkedProp, r as propValidityState } from "./props.js";
+import { t as UiInput_default } from "./UiInput.js";
+import { t as UiRadioGroup_default } from "./UiRadioGroup.js";
+import { t as UiStack_default } from "./UiStack.js";
+import { t as UiSwatch_default } from "./UiSwatch.js";
+import { computed, createElementBlock, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, unref, watchSyncEffect, withCtx, withDirectives } from "vue";
+//#region .build/vue/UiEditorChipEditor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-color", "data-label"];
+//#endregion
+//#region .build/vue/UiEditorChipEditor.vue
+var UiEditorChipEditor_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiEditorChipEditor",
+	props: {
+		color: {
+			type: null,
+			default: "neutral"
+		},
+		label: {
+			type: null,
+			default: ""
+		}
+	},
+	emits: [
+		"update:color",
+		"update:label",
+		"label",
+		"color",
+		"done"
+	],
+	setup(__props, { emit: __emit }) {
+		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: ""
+			}
+		} };
+		const props = __props;
+		const acceptedProps = {
+			color: "neutral",
+			label: ""
+		};
+		const checkedProps = computed(() => ({
+			color: checkedProp(props["color"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "color", acceptedProps),
+			label: checkedProp(props["label"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "label", acceptedProps)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		const reflectedProp = useReflectedProp();
+		const hydrationInstance = getCurrentInstance();
+		const emit = __emit;
+		const root = ref(null);
+		checkHydratedRoot("div", "ui-editor-chip-editor");
+		const isLabelDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["label"] === "string" && Object.keys(detail).every((key) => ["label"].includes(key));
+		const isColorDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["color"] === "neutral" || detail["color"] === "blue" || detail["color"] === "green" || detail["color"] === "yellow" || detail["color"] === "red" || detail["color"] === "purple") && Object.keys(detail).every((key) => ["color"].includes(key));
+		const isDoneDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Object.values(detail).every((item) => true);
+		const dispatch = createDispatch(root, emit, {
+			checks: {
+				label: isLabelDetail,
+				color: isColorDetail,
+				done: isDoneDetail
+			},
+			modeled: ["color", "label"]
+		});
+		useComponentHost(() => import("@threadlabs/looma/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) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: ["color", "label"],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name)
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({
+				role: "dialog",
+				"aria-label": "Edit chip"
+			}, unref(nativeAttrs)(_ctx.$attrs), {
+				"data-color": unref(reflectedProp)("color", "color", checkedProps.value.color, void 0, false),
+				"data-label": unref(reflectedProp)("label", "label", checkedProps.value.label, void 0, false),
+				ref_key: "root",
+				ref: root
+			}), [createVNode(UiStack_default, { gap: "s" }, {
+				default: withCtx(() => [createVNode(UiInput_default, {
+					"data-chip-label": "",
+					size: "sm",
+					placeholder: "Set a label",
+					"aria-label": "Chip text",
+					value: checkedProps.value.label
+				}, null, 8, ["value"]), createVNode(UiRadioGroup_default, {
+					label: "Chip color",
+					"label-visibility": "sr-only",
+					value: checkedProps.value.color
+				}, {
+					default: withCtx(() => [
+						createVNode(UiSwatch_default, { tone: "neutral" }),
+						createVNode(UiSwatch_default, { tone: "blue" }),
+						createVNode(UiSwatch_default, { tone: "green" }),
+						createVNode(UiSwatch_default, { tone: "yellow" }),
+						createVNode(UiSwatch_default, { tone: "red" }),
+						createVNode(UiSwatch_default, { tone: "purple" })
+					]),
+					_: 1
+				}, 8, ["value"])]),
+				_: 1
+			})], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]);
+		};
+	}
+});
+//#endregion
+export { UiEditorChipEditor_default as t };

package/vue/chunks/UiEditorImageToolbar.js

@@ -4,12 +4,12 @@ import { t as UiIcon_default } from "./UiIcon.js";
 import { t as UiButton_default } from "./UiButton.js";
 import { t as UiCluster_default } from "./UiCluster.js";
 import { t as UiTooltip_default } from "./UiTooltip.js";
+import { t as UiInput_default } from "./UiInput.js";
+import { t as UiStack_default } from "./UiStack.js";
 import { t as UiEditorToolbar_default } from "./UiEditorToolbar.js";
 import { t as UiFormField_default } from "./UiFormField.js";
 import { t as UiIconButton_default } from "./UiIconButton.js";
-import { t as UiInput_default } from "./UiInput.js";
 import { t as UiPopover_default } from "./UiPopover.js";
-import { t as UiStack_default } from "./UiStack.js";
 import { t as UiText_default } from "./UiText.js";
 import { computed, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, unref, watchSyncEffect, withCtx, withDirectives } from "vue";
 //#region .build/vue/UiEditorImageToolbar.vue?vue&type=script&setup=true&lang.ts

package/vue/chunks/UiEditorLinkCard.js

@@ -5,8 +5,8 @@ import { t as UiButton_default } from "./UiButton.js";
 import { t as UiCard_default } from "./UiCard.js";
 import { t as UiCluster_default } from "./UiCluster.js";
 import { t as UiTooltip_default } from "./UiTooltip.js";
-import { t as UiIconButton_default } from "./UiIconButton.js";
 import { t as UiStack_default } from "./UiStack.js";
+import { t as UiIconButton_default } from "./UiIconButton.js";
 import { t as UiText_default } from "./UiText.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, toDisplayString, unref, watchSyncEffect, withCtx, withDirectives } from "vue";
 //#region .build/vue/UiEditorLinkCard.vue?vue&type=script&setup=true&lang.ts

package/vue/chunks/UiEditorLinkForm.js

@@ -3,10 +3,10 @@ import { a as vPropValidity, n as checkedProp, r as propValidityState, t as acce
 import { t as UiIcon_default } from "./UiIcon.js";
 import { t as UiCheckbox_default } from "./UiCheckbox.js";
 import { t as UiScrollArea_default } from "./UiScrollArea.js";
-import { t as UiFormField_default } from "./UiFormField.js";
-import { t as UiIconButton_default } from "./UiIconButton.js";
 import { t as UiInput_default } from "./UiInput.js";
 import { t as UiStack_default } from "./UiStack.js";
+import { t as UiFormField_default } from "./UiFormField.js";
+import { t as UiIconButton_default } from "./UiIconButton.js";
 import { t as UiText_default } from "./UiText.js";
 import { t as UiInputGroup_default } from "./UiInputGroup.js";
 import { t as UiSearchResultRow_default } from "./UiSearchResultRow.js";

package/vue/chunks/UiRadioGroup.js

@@ -1,6 +1,6 @@
 import { i as checkHydratedRoot, o as createDispatch, p as nativeAttrs, t as _plugin_vue_export_helper_default, v as useComponentHost, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
 import { a as vPropValidity, n as checkedProp, r as propValidityState, t as acceptsControllerWrite } from "./props.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, watchSyncEffect, withDirectives } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, normalizeClass, openBlock, provide, ref, renderSlot, toDisplayString, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiRadioGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-required",
@@ -9,6 +9,7 @@ var _hoisted_1 = [
 	"data-disabled",
 	"data-invalid",
 	"data-label",
+	"data-label-visibility",
 	"data-name",
 	"data-orientation",
 	"data-required",
@@ -33,6 +34,10 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: null,
 			default: "Options"
 		},
+		labelVisibility: {
+			type: null,
+			default: "visible"
+		},
 		name: {
 			type: null,
 			default: ""
@@ -87,6 +92,17 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				description: "The group's legend, shown above the radios and announced as the group's name. Phrase it as the question the radios answer.",
 				default: "Options"
 			},
+			labelVisibility: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "labelvisibility" },
+				description: "visible shows the legend; sr-only hides it visually but keeps it as the group's accessible name. Use sr-only only when the surrounding layout already makes\n      the choice clear, as with a row of colour swatches.",
+				values: ["visible", "sr-only"],
+				default: "visible"
+			},
 			name: {
 				type: {
 					kind: "terminal",
@@ -134,6 +150,7 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			disabled: false,
 			invalid: false,
 			label: "Options",
+			labelVisibility: "visible",
 			name: "",
 			orientation: "horizontal",
 			required: false,
@@ -152,6 +169,10 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				kind: "terminal",
 				name: "string"
 			}, false, "label", acceptedProps),
+			labelVisibility: checkedProp(props["labelVisibility"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "labelVisibility", acceptedProps),
 			name: checkedProp(props["name"], {
 				kind: "terminal",
 				name: "string"
@@ -224,6 +245,7 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"disabled",
 				"invalid",
 				"label",
+				"labelVisibility",
 				"name",
 				"orientation",
 				"required",
@@ -246,6 +268,7 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"data-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
 				"data-invalid": unref(reflectedProp)("invalid", "invalid", checkedProps.value.invalid, void 0, false),
 				"data-label": unref(reflectedProp)("label", "label", checkedProps.value.label, void 0, false),
+				"data-label-visibility": unref(reflectedProp)("labelVisibility", "label-visibility", checkedProps.value.labelVisibility, void 0, false),
 				"data-name": unref(reflectedProp)("name", "name", checkedProps.value.name, void 0, false),
 				"data-orientation": unref(reflectedProp)("orientation", "orientation", checkedProps.value.orientation, void 0, false),
 				"data-required": unref(reflectedProp)("required", "required", checkedProps.value.required, void 0, false),
@@ -253,12 +276,12 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"data-ui-radio-group-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [createElementVNode("legend", null, toDisplayString(checkedProps.value.label), 1), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}), [createElementVNode("legend", { class: normalizeClass({ "sr-only": checkedProps.value.labelVisibility === "sr-only" }) }, toDisplayString(checkedProps.value.label), 3), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-49ebfb5d"]]);
+}), [["__scopeId", "data-v-b26d4760"]]);
 //#endregion
 export { UiRadioGroup_default as t };

package/vue/chunks/UiSwatch.js

@@ -0,0 +1,78 @@
+import { i as checkHydratedRoot, p as nativeAttrs, r as attribute, s as cycleCheckedComputed, t as _plugin_vue_export_helper_default, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
+import { a as vPropValidity, n as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, unref, watchSyncEffect, withDirectives } from "vue";
+//#region .build/vue/UiSwatch.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"^value",
+	"aria-label",
+	"data-tone",
+	"data-ui-swatch-state"
+];
+//#endregion
+//#region .build/vue/UiSwatch.vue
+var UiSwatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiSwatch",
+	props: { tone: {
+		type: null,
+		default: "neutral"
+	} },
+	setup(__props) {
+		const propValidityContract = { props: { tone: {
+			type: {
+				kind: "terminal",
+				name: "keyword"
+			},
+			required: false,
+			target: { attribute: "value" },
+			description: "The swatch's colour, on the same tokens as editor chips. It is also the radio's value and, by name, its label.",
+			values: [
+				"neutral",
+				"blue",
+				"green",
+				"yellow",
+				"red",
+				"purple"
+			],
+			default: "neutral"
+		} } };
+		const props = __props;
+		const acceptedProps = { tone: "neutral" };
+		const checkedProps = computed(() => ({ tone: checkedProp(props["tone"], {
+			kind: "terminal",
+			name: "keyword"
+		}, false, "tone", acceptedProps) }));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		const reflectedProp = useReflectedProp();
+		const toneName = cycleCheckedComputed(() => ({
+			neutral: "Neutral",
+			blue: "Blue",
+			green: "Green",
+			yellow: "Yellow",
+			red: "Red",
+			purple: "Purple"
+		})[checkedProps.value.tone]);
+		checkHydratedRoot("input", "ui-swatch");
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [checkedProps.value.tone && "tone", checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("input", mergeProps({
+				class: "ui-swatch",
+				type: "radio"
+			}, unref(nativeAttrs)(_ctx.$attrs), {
+				"^value": checkedProps.value.tone ?? void 0,
+				"aria-label": typeof unref(toneName) === "boolean" ? String(unref(toneName)) : unref(attribute)(unref(toneName)),
+				"data-tone": unref(reflectedProp)("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-ui-swatch-state": hostState.value || void 0
+			}), null, 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]);
+		};
+	}
+}), [["__scopeId", "data-v-42e76006"]]);
+//#endregion
+export { UiSwatch_default as t };