@threadlabs/looma 0.13.5 → 0.14.0

package/vue/UiSelect.vue

@@ -11,6 +11,7 @@ const props = withDefaults(
     disabled?: boolean
     invalid?: boolean
     required?: boolean
+    size?: 'sm' | 'md' | 'lg'
     value?: string
     modelValue?: string | null
   }>(),
@@ -18,6 +19,7 @@ const props = withDefaults(
     disabled: false,
     invalid: false,
     required: false,
+    size: 'md',
   },
 )
 const emit = defineEmits<{
@@ -30,6 +32,13 @@ const model = computed({
 
 const root = ref<HTMLElement | null>(null)
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+  ].filter(Boolean).join(' ')
+)
+
 const dispatch = createDispatch(root)
 
 useComponentHost(controllerModule.default, {
@@ -47,6 +56,7 @@ useComponentHost(controllerModule.default, {
     :required="required"
     :aria-invalid="invalid"
     v-model="model"
+    :data-ui-select-state="hostState || undefined"
     ref="root"
   >
     <slot />
@@ -137,9 +147,30 @@ useComponentHost(controllerModule.default, {
   cursor: not-allowed;
 }
 
-[data-component~="ui-select"][size]:not([size="1"]) {
-  min-block-size: 7rem;
-  padding: var(--ui-space-2);
+[data-component~="ui-select"][data-ui-select-state~="size=sm"] {
+  min-block-size: var(--ui-control-size-sm);
+  padding: var(--ui-space-1) var(--ui-space-2);
+  padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1));
+  background-position: right var(--ui-space-2) center;
+  background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm);
+  font-size: var(--ui-font-size-sm);
+}
+
+[data-component~="ui-select"][data-ui-select-state~="size=lg"] {
+  min-block-size: var(--ui-control-size-lg);
+  padding: var(--ui-space-3) var(--ui-space-4);
+  padding-inline-end: calc(var(--ui-space-4) + 1.5rem);
+  background-position: right var(--ui-space-4) center;
+  font-size: var(--ui-font-size-md);
+}
+
+/* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+   body-size text: below 16px, iOS zooms the page into the focused field. */
+@media (pointer: coarse) {
+  [data-component~="ui-select"][data-ui-select-state~="size=sm"] {
+    min-block-size: var(--ui-control-min-block-size);
+    font-size: inherit;
+  }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiSwitch.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     disabled?: boolean;
     name?: string;
     required?: boolean;
+    size?: 'sm' | 'md' | 'lg';
     value?: string;
 };
 declare var __VLS_1: {}, __VLS_3: {};
@@ -29,6 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     name: string;
+    size: "sm" | "md" | "lg";
     value: string;
     disabled: boolean;
     checked: boolean;

package/vue/UiSwitch.vue

@@ -12,6 +12,7 @@ const props = withDefaults(
     disabled?: boolean
     name?: string
     required?: boolean
+    size?: 'sm' | 'md' | 'lg'
     value?: string
   }>(),
   {
@@ -19,6 +20,7 @@ const props = withDefaults(
     disabled: false,
     name: '',
     required: false,
+    size: 'md',
     value: 'on',
   },
 )
@@ -43,6 +45,7 @@ const internalChecked = ref(false)
 const hostState = computed(() =>
   [
     props.disabled && 'disabled',
+    props.size && `size size=${props.size}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -206,6 +209,38 @@ input:focus-visible {
   }
 }
 
+/* A sized switch keeps its track and aligns instead: the label takes that size's field type size,
+   and the first line centres in that control height, so the label shares a row's baseline.
+   Multi-line labels and descriptions still grow downward from that first line. */
+[data-component~="ui-switch"][data-ui-switch-state~="size=sm"] {
+  --_font: var(--ui-font-size-sm);
+  --_row: var(--ui-control-size-sm);
+}
+
+[data-component~="ui-switch"][data-ui-switch-state~="size=lg"] {
+  --_font: var(--ui-font-size-md);
+  --_row: var(--ui-control-size-lg);
+}
+
+[data-component~="ui-switch"][data-ui-switch-state~="size=sm"],
+[data-component~="ui-switch"][data-ui-switch-state~="size=lg"] {
+  --_line: calc(var(--_font) * var(--ui-line-height-md));
+  font-size: var(--_font);
+  padding-block: calc((var(--_row) - var(--ui-switch-track-height, 1.5rem)) / 2);
+}
+
+/* The label centres on the track. */
+[data-component~="ui-switch"][data-ui-switch-state~="size=sm"] .text,
+[data-component~="ui-switch"][data-ui-switch-state~="size=lg"] .text {
+  margin-top: calc((var(--_ui-switch-track-height, 1.5rem) - var(--_line)) / 2);
+}
+
+@media (pointer: coarse) {
+  [data-component~="ui-switch"][data-ui-switch-state~="size=sm"] {
+    --_row: var(--ui-control-min-block-size);
+  }
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-switch"][hidden] {
   display: none;

package/vue/UiTextarea.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     readonly?: boolean;
     required?: boolean;
     rows?: number;
+    size?: 'sm' | 'md' | 'lg';
     value?: string;
     modelValue?: string | null;
 };
@@ -13,6 +14,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     invalid: boolean;
+    size: "sm" | "md" | "lg";
     disabled: boolean;
     required: boolean;
     readonly: boolean;

package/vue/UiTextarea.vue

@@ -13,6 +13,7 @@ const props = withDefaults(
     readonly?: boolean
     required?: boolean
     rows?: number
+    size?: 'sm' | 'md' | 'lg'
     value?: string
     modelValue?: string | null
   }>(),
@@ -22,6 +23,7 @@ const props = withDefaults(
     readonly: false,
     required: false,
     rows: 4,
+    size: 'md',
   },
 )
 const emit = defineEmits<{
@@ -34,6 +36,13 @@ const model = computed({
 
 const root = ref<HTMLElement | null>(null)
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+  ].filter(Boolean).join(' ')
+)
+
 const dispatch = createDispatch(root)
 
 useComponentHost(controllerModule.default, {
@@ -53,6 +62,7 @@ useComponentHost(controllerModule.default, {
     :aria-invalid="invalid"
     :rows="rows"
     v-model="model"
+    :data-ui-textarea-state="hostState || undefined"
     ref="root"
   ></textarea>
 </template>
@@ -139,6 +149,23 @@ useComponentHost(controllerModule.default, {
   cursor: not-allowed;
 }
 
+[data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"] {
+  padding: var(--ui-space-1) var(--ui-space-2);
+  font-size: var(--ui-font-size-sm);
+}
+
+[data-component~="ui-textarea"][data-ui-textarea-state~="size=lg"] {
+  padding: var(--ui-space-3) var(--ui-space-4);
+  font-size: var(--ui-font-size-md);
+}
+
+/* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
+@media (pointer: coarse) {
+  [data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"] {
+    font-size: inherit;
+  }
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-textarea"][hidden] {
   display: none;

package/vue/chunks/UiButton.js

@@ -87,6 +87,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_2));
 		};
 	}
-}), [["__scopeId", "data-v-a45835c7"]]);
+}), [["__scopeId", "data-v-bd32a08d"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCheckbox.js

@@ -42,6 +42,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: Boolean,
 			default: false
 		},
+		size: { default: "md" },
 		value: { default: "on" }
 	},
 	emits: [
@@ -57,7 +58,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		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(" "));
+		const hostState = computed(() => [props.disabled && "disabled", props.size && `size size=${props.size}`].filter(Boolean).join(" "));
 		const isChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["checked"] === "boolean" && typeof detail["value"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"checked",
 			"value",
@@ -94,6 +95,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}, 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-e122df08"]]);
+}), [["__scopeId", "data-v-bfcc98e1"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCombobox.js

@@ -488,6 +488,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-1482f333"]]);
+}), [["__scopeId", "data-v-fd4a871f"]]);
 //#endregion
 export { UiCombobox_default as t };