@threadlabs/looma 0.25.0 → 0.25.2

package/vue/UiTextarea.vue

@@ -282,6 +282,30 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
 
 <style scoped>
 /* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-textarea-border-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-border-hover {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-focus-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-focus-outline {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-surface {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-textarea-focus-shadow {
   syntax: "*";
   inherits: false;
@@ -302,6 +326,10 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
   syntax: "*";
   inherits: false;
 }
+@property --ui-textarea-padding-inline-end {
+  syntax: "*";
+  inherits: false;
+}
 
 [data-component~="ui-textarea"] {
   box-sizing: border-box;
@@ -312,15 +340,35 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
   margin: 0;
   --_padding-block: var(--ui-space-2);
   padding: var(--ui-space-2) var(--ui-space-3);
+  padding-inline-end: var(
+    --ui-textarea-padding-inline-end,
+    var(--_ui-default-textarea-padding-inline-end, var(--ui-space-3))
+  );
   appearance: none;
   resize: vertical;
-  border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
-  border-radius: var(--ui-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)));
-  background: var(--ui-control-surface, var(--ui-surface-elevated));
+  border: var(
+    --ui-textarea-border-width,
+    var(--_ui-default-textarea-border-width, var(--ui-border-width))
+  ) solid
+    var(
+      --ui-textarea-border,
+      var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong)))
+    );
+  border-radius: var(
+    --ui-textarea-radius,
+    var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)))
+  );
+  background: var(
+    --ui-textarea-surface,
+    var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
+  );
   color: var(--ui-text-primary);
   font: inherit;
   line-height: var(--ui-line-height-md);
-  box-shadow: var(--ui-textarea-shadow, var(--ui-control-inset));
+  box-shadow: var(
+    --ui-textarea-shadow,
+    var(--_ui-default-textarea-shadow, var(--ui-control-inset))
+  );
   transition:
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
@@ -339,33 +387,54 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
 }
 
 [data-component~="ui-textarea"]:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
-  border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+  border-color: var(
+    --ui-textarea-border-hover,
+    var(
+      --_ui-default-textarea-border-hover,
+      var(--ui-control-border-hover, var(--ui-text-secondary))
+    )
+  );
 }
 
 [data-component~="ui-textarea"]:focus-visible {
-  border-color: var(--ui-control-focus, var(--ui-accent-solid));
-  outline: none;
+  border-color: var(
+    --ui-textarea-focus-border,
+    var(--_ui-default-textarea-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
+  );
+  outline: var(--ui-textarea-focus-outline, var(--_ui-default-textarea-focus-outline, none));
   box-shadow: var(
     --ui-textarea-focus-shadow,
-    var(--ui-control-inset),
-    var(--ui-control-focus-halo-shadow)
+    var(
+      --_ui-default-textarea-focus-shadow,
+      var(--ui-control-inset),
+      var(--ui-control-focus-halo-shadow)
+    )
   );
 }
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 [data-component~="ui-textarea"][aria-invalid="true"],
 [data-component~="ui-textarea"]:is(:user-invalid, [data-user-invalid]) {
-  border-color: var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
+  border-color: var(
+    --ui-textarea-invalid-border,
+    var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
+  );
 }
 
 [data-component~="ui-textarea"]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow: var(
     --ui-textarea-invalid-focus-shadow,
-    var(--ui-control-inset),
-    0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-      in srgb,
-      var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
-      transparent
+    var(
+      --_ui-default-textarea-invalid-focus-shadow,
+      var(--ui-control-inset),
+      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+        in srgb,
+        var(
+          --ui-textarea-invalid-border,
+          var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
+        ) 22%,
+        transparent
+      )
     )
   );
 }
@@ -380,12 +449,20 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
 [data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"] {
   --_padding-block: var(--ui-space-1);
   padding: var(--ui-space-1) var(--ui-space-2);
+  padding-inline-end: var(
+    --ui-textarea-padding-inline-end,
+    var(--_ui-default-textarea-padding-inline-end, var(--ui-space-2))
+  );
   font-size: var(--ui-font-size-sm);
 }
 
 [data-component~="ui-textarea"][data-ui-textarea-state~="size=lg"] {
   --_padding-block: var(--ui-space-3);
   padding: var(--ui-space-3) var(--ui-space-4);
+  padding-inline-end: var(
+    --ui-textarea-padding-inline-end,
+    var(--_ui-default-textarea-padding-inline-end, var(--ui-space-4))
+  );
   font-size: var(--ui-font-size-md);
 }
 

package/vue/chunks/UiInputGroup.js

@@ -4,7 +4,9 @@ import { a as vPropValidity, n as checkedProp, r as propValidityState } from "./
 import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiInputGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
+	"data-action-position",
 	"data-disabled",
+	"data-multiline",
 	"data-prefix-kind",
 	"data-ui-input-group-state"
 ];
@@ -18,10 +20,18 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	inheritAttrs: false,
 	__name: "UiInputGroup",
 	props: {
+		actionPosition: {
+			type: null,
+			default: "below"
+		},
 		disabled: {
 			type: null,
 			default: false
 		},
+		multiline: {
+			type: null,
+			default: false
+		},
 		prefixKind: {
 			type: null,
 			default: "text"
@@ -29,6 +39,17 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	},
 	setup(__props) {
 		const propValidityContract = { props: {
+			actionPosition: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "actionposition" },
+				description: "In a multiline group, below keeps the action under the text. top-end places it inside the textarea at its upper end and reserves text padding for its\n      measured width.",
+				values: ["below", "top-end"],
+				default: "below"
+			},
 			disabled: {
 				type: {
 					kind: "terminal",
@@ -39,6 +60,16 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				description: "Fades the group's framing to match a disabled input inside it. Disable the input itself too.",
 				default: false
 			},
+			multiline: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "multiline" },
+				description: "Groups a Textarea with an action below its text inside the shared frame.",
+				default: false
+			},
 			prefixKind: {
 				type: {
 					kind: "terminal",
@@ -53,14 +84,24 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		} };
 		const props = __props;
 		const acceptedProps = {
+			actionPosition: "below",
 			disabled: false,
+			multiline: false,
 			prefixKind: "text"
 		};
 		const checkedProps = computed(() => ({
+			actionPosition: checkedProp(props["actionPosition"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "actionPosition", acceptedProps),
 			disabled: checkedProp(props["disabled"], {
 				kind: "terminal",
 				name: "boolean"
 			}, false, "disabled", acceptedProps),
+			multiline: checkedProp(props["multiline"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "multiline", acceptedProps),
 			prefixKind: checkedProp(props["prefixKind"], {
 				kind: "terminal",
 				name: "keyword"
@@ -96,7 +137,10 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const hostState = computed(() => [
 			checkedProps.value.disabled && "disabled",
 			checkedProps.value.prefixKind && "prefixKind",
-			checkedProps.value.prefixKind != null && `prefixKind=${encodeURIComponent(checkedProps.value.prefixKind)}`
+			checkedProps.value.prefixKind != null && `prefixKind=${encodeURIComponent(checkedProps.value.prefixKind)}`,
+			checkedProps.value.multiline && "multiline",
+			checkedProps.value.actionPosition && "actionPosition",
+			checkedProps.value.actionPosition != null && `actionPosition=${encodeURIComponent(checkedProps.value.actionPosition)}`
 		].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
 		useComponentHost(() => import("@threadlabs/looma/components/ui-input-group/ui-input-group.js"), {
@@ -112,7 +156,12 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
 				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
 			},
-			propNames: ["disabled", "prefixKind"],
+			propNames: [
+				"actionPosition",
+				"disabled",
+				"multiline",
+				"prefixKind"
+			],
 			propValidity: (name) => propValidityState({
 				contract: propValidityContract,
 				values: { ...props }
@@ -120,7 +169,9 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		});
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-input-group" }, nativeAttrs(_ctx.$attrs), {
+				"data-action-position": reflectedProp("actionPosition", "action-position", checkedProps.value.actionPosition, void 0, false),
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-multiline": reflectedProp("multiline", "multiline", checkedProps.value.multiline, void 0, false),
 				"data-prefix-kind": reflectedProp("prefixKind", "prefix-kind", checkedProps.value.prefixKind, void 0, false),
 				"data-ui-input-group-state": hostState.value || void 0,
 				ref_key: "root",
@@ -136,6 +187,6 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-45a11c70"]]);
+}), [["__scopeId", "data-v-57e02424"]]);
 //#endregion
 export { UiInputGroup_default as t };

package/vue/chunks/UiTextarea.js

@@ -295,6 +295,6 @@ var UiTextarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ce29cce2"]]);
+}), [["__scopeId", "data-v-f5b6ae17"]]);
 //#endregion
 export { UiTextarea_default as t };