@threadlabs/looma 0.11.6 → 0.12.1

package/vue/UiIconButton.vue

@@ -221,22 +221,12 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 }
 
 /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
+/* Disabled washes the button out the way Button does: the same shape, one filter. */
 [data-component~="ui-icon-button"]:disabled {
+  filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
   opacity: var(--ui-icon-button-disabled-opacity, 1);
-  color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
   cursor: not-allowed;
-}
-
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:disabled {
-  border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
-  background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
-  color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
-}
-
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:disabled {
-  border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
-  background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
-  color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
+  box-shadow: none;
 }
 
 [data-component~="ui-icon-button"] {

package/vue/UiInputGroup.d.ts

@@ -1,13 +1,15 @@
 type __VLS_Props = {
     disabled?: boolean;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
     prefix?: (props: typeof __VLS_1) => any;
 } & {
     default?: (props: typeof __VLS_3) => any;
 } & {
     suffix?: (props: typeof __VLS_5) => any;
+} & {
+    action?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;

package/vue/UiInputGroup.vue

@@ -30,6 +30,7 @@ const hostState = computed(() =>
     <span class="affix"><slot name="prefix" /></span>
     <span class="field"><slot /></span>
     <span class="affix"><slot name="suffix" /></span>
+    <span class="action"><slot name="action" /></span>
   </div>
 </template>
 
@@ -39,7 +40,9 @@ const hostState = computed(() =>
        focus ring around the input and its affixes together; the input inside drops its own through
        its custom properties, so it is still the one ui-input, with its form behaviour intact. The
        affixes are plain text beside the input, so name the input with a label that says what the
-       whole value is. */
+       whole value is. The action slot takes one button at the end, inside the border, for the one
+       thing the field is for ("Continue" after a site's address), so it reads as the field's action
+       and not the form's. */
 [data-component~="ui-input-group"] {
   --ui-input-border: transparent;
   --ui-input-border-hover: transparent;
@@ -71,7 +74,8 @@ const hostState = computed(() =>
   border-color: var(--ui-text-secondary);
 }
 
-[data-component~="ui-input-group"]:focus-within {
+/* The field's focus, not the action's: a focused button draws its own ring. */
+[data-component~="ui-input-group"]:has(.field :focus) {
   border-color: var(--ui-accent-solid);
   box-shadow:
     var(--ui-control-inset),
@@ -104,7 +108,15 @@ const hostState = computed(() =>
   white-space: nowrap;
 }
 
-.affix:empty {
+.action {
+  display: flex;
+  flex: none;
+  align-items: stretch;
+  padding: var(--ui-space-1);
+}
+
+.affix:empty,
+.action:empty {
   display: none;
 }
 

package/vue/UiRadio.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/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/UiInputGroup.js

@@ -5,6 +5,7 @@ var _hoisted_1 = ["data-ui-input-group-state"];
 var _hoisted_2 = { class: "affix" };
 var _hoisted_3 = { class: "field" };
 var _hoisted_4 = { class: "affix" };
+var _hoisted_5 = { class: "action" };
 //#endregion
 //#region .build/vue/UiInputGroup.vue
 var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -22,10 +23,11 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-input-group" }, _ctx.$attrs, { "data-ui-input-group-state": hostState.value || void 0 }), [
 				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "prefix", {}, void 0, true)]),
 				createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
-				createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "suffix", {}, void 0, true)])
+				createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "suffix", {}, void 0, true)]),
+				createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "action", {}, void 0, true)])
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-42ff173c"]]);
+}), [["__scopeId", "data-v-ac7159ba"]]);
 //#endregion
 export { UiInputGroup_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 };