@threadlabs/looma 0.11.6 → 0.12.0

package/vue/UiRadio.vue

@@ -36,6 +36,7 @@ const emit = defineEmits<{
 
 const root = ref<HTMLElement | null>(null)
 const inputElement = useTemplateRef<HTMLElement>('input')
+const descriptionElement = useTemplateRef<HTMLElement>('description')
 const internalChecked = ref(false)
 
 /** The values the styles' :host-state() rules test. */
@@ -64,7 +65,7 @@ useComponentHost(controllerModule.default, {
   root,
   dispatch,
   props,
-  refs: { input: inputElement },
+  refs: { input: inputElement, description: descriptionElement },
   state: { internalChecked },
 })
 </script>
@@ -84,7 +85,10 @@ useComponentHost(controllerModule.default, {
       :name="name"
       ref="input"
     >
-    <span class="label"><slot /></span></label>
+    <span class="text"><span class="label"><slot /></span>
+      <span class="description" aria-hidden="true" ref="description"><slot
+          name="description"
+        /></span></span></label>
 </template>
 
 <style scoped>
@@ -97,11 +101,29 @@ useComponentHost(controllerModule.default, {
   cursor: pointer;
 }
 
+/* The label, and under it an optional line saying what the choice means. */
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+  min-inline-size: 0;
+}
+
 .label {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
 
+.description {
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+}
+
+.description:empty {
+  display: none;
+}
+
 input {
   flex: 0 0 auto;
   inline-size: var(--ui-radio-size, 1.125rem);

package/vue/UiSwitch.d.ts

@@ -5,9 +5,11 @@ type __VLS_Props = {
     required?: boolean;
     value?: string;
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    description?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (detail: {

package/vue/UiSwitch.vue

@@ -36,6 +36,7 @@ const emit = defineEmits<{
 
 const root = ref<HTMLElement | null>(null)
 const inputElement = useTemplateRef<HTMLElement>('input')
+const descriptionElement = useTemplateRef<HTMLElement>('description')
 const internalChecked = ref(false)
 
 /** The values the styles' :host-state() rules test. */
@@ -64,7 +65,7 @@ useComponentHost(controllerModule.default, {
   root,
   dispatch,
   props,
-  refs: { input: inputElement },
+  refs: { input: inputElement, description: descriptionElement },
   state: { internalChecked },
 })
 </script>
@@ -85,7 +86,10 @@ useComponentHost(controllerModule.default, {
       :value="value"
       ref="input"
     >
-    <span class="label"><slot /></span></label>
+    <span class="text"><span class="label"><slot /></span>
+      <span class="description" aria-hidden="true" ref="description"><slot
+          name="description"
+        /></span></span></label>
 </template>
 
 <style scoped>
@@ -98,11 +102,29 @@ useComponentHost(controllerModule.default, {
   cursor: pointer;
 }
 
+/* The label, and under it an optional line saying what the choice means. */
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+  min-inline-size: 0;
+}
+
 .label {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
 
+.description {
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+}
+
+.description:empty {
+  display: none;
+}
+
 input {
   appearance: none;
   -webkit-appearance: none;

package/vue/chunks/UiButton.js

@@ -83,6 +83,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-97872575"]]);
+}), [["__scopeId", "data-v-75541d8a"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCheckbox.js

@@ -12,7 +12,13 @@ var _hoisted_2 = [
 	"name",
 	"value"
 ];
-var _hoisted_3 = { class: "label" };
+var _hoisted_3 = { class: "text" };
+var _hoisted_4 = { class: "label" };
+var _hoisted_5 = {
+	class: "description",
+	"aria-hidden": "true",
+	ref: "description"
+};
 //#endregion
 //#region .build/vue/UiCheckbox.vue
 var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -48,6 +54,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const emit = __emit;
 		const root = ref(null);
 		const inputElement = useTemplateRef("input");
+		const descriptionElement = useTemplateRef("description");
 		const internalChecked = ref(false);
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [props.disabled && "disabled"].filter(Boolean).join(" "));
@@ -64,7 +71,10 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			root,
 			dispatch,
 			props,
-			refs: { input: inputElement },
+			refs: {
+				input: inputElement,
+				description: descriptionElement
+			},
 			state: { internalChecked }
 		});
 		return (_ctx, _cache) => {
@@ -81,9 +91,9 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				name: __props.name,
 				value: __props.value,
 				ref: "input"
-			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
+			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-9c9d1eaa"]]);
+}), [["__scopeId", "data-v-4d65c3b0"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiIconButton.js

@@ -59,6 +59,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-bcedd63e"]]);
+}), [["__scopeId", "data-v-c322b7ed"]]);
 //#endregion
 export { UiIconButton_default as t };

package/vue/chunks/UiRadio.js

@@ -11,7 +11,13 @@ var _hoisted_2 = [
 	"value",
 	"name"
 ];
-var _hoisted_3 = { class: "label" };
+var _hoisted_3 = { class: "text" };
+var _hoisted_4 = { class: "label" };
+var _hoisted_5 = {
+	class: "description",
+	"aria-hidden": "true",
+	ref: "description"
+};
 //#endregion
 //#region .build/vue/UiRadio.vue
 var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -43,6 +49,7 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		const emit = __emit;
 		const root = ref(null);
 		const inputElement = useTemplateRef("input");
+		const descriptionElement = useTemplateRef("description");
 		const internalChecked = ref(false);
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [props.disabled && "disabled"].filter(Boolean).join(" "));
@@ -59,7 +66,10 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			root,
 			dispatch,
 			props,
-			refs: { input: inputElement },
+			refs: {
+				input: inputElement,
+				description: descriptionElement
+			},
 			state: { internalChecked }
 		});
 		return (_ctx, _cache) => {
@@ -75,9 +85,9 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				value: __props.value,
 				name: __props.name,
 				ref: "input"
-			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
+			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-e31949a7"]]);
+}), [["__scopeId", "data-v-f9c61d50"]]);
 //#endregion
 export { UiRadio_default as t };

package/vue/chunks/UiSwitch.js

@@ -11,7 +11,13 @@ var _hoisted_2 = [
 	"name",
 	"value"
 ];
-var _hoisted_3 = { class: "label" };
+var _hoisted_3 = { class: "text" };
+var _hoisted_4 = { class: "label" };
+var _hoisted_5 = {
+	class: "description",
+	"aria-hidden": "true",
+	ref: "description"
+};
 //#endregion
 //#region .build/vue/UiSwitch.vue
 var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -43,6 +49,7 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const emit = __emit;
 		const root = ref(null);
 		const inputElement = useTemplateRef("input");
+		const descriptionElement = useTemplateRef("description");
 		const internalChecked = ref(false);
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [props.disabled && "disabled"].filter(Boolean).join(" "));
@@ -59,7 +66,10 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			root,
 			dispatch,
 			props,
-			refs: { input: inputElement },
+			refs: {
+				input: inputElement,
+				description: descriptionElement
+			},
 			state: { internalChecked }
 		});
 		return (_ctx, _cache) => {
@@ -76,9 +86,9 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				name: __props.name,
 				value: __props.value,
 				ref: "input"
-			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
+			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-26ab3add"]]);
+}), [["__scopeId", "data-v-85cb3260"]]);
 //#endregion
 export { UiSwitch_default as t };