@threadlabs/looma 0.25.1 → 0.25.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.25.1",
+  "version": "0.25.2",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-input-group.css

@@ -189,6 +189,24 @@
       padding-block-start: 0;
     }
 
+    /* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
+       so a translated label or pending indicator cannot cover what the person types. */
+    :scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"] {
+      --_ui-default-textarea-padding-inline-end: calc(var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3));
+    }
+
+    :scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"] .field {
+      grid-row: 1;
+    }
+
+    :scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"] .action {
+      grid-column: 2;
+      grid-row: 1;
+      align-self: start;
+      justify-self: end;
+      padding: var(--ui-space-2);
+    }
+
     .affix:empty,
     .action:empty {
       display: none;
@@ -228,5 +246,8 @@
 
     /* Multiline text owns the first row; its action remains inside the same frame below it. */
 
+    /* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
+       so a translated label or pending indicator cannot cover what the person types. */
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-textarea.css

@@ -43,6 +43,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-textarea-padding-inline-end {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-textarea"]) to ([data-component], [data-slotted]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
@@ -55,6 +59,7 @@
       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-textarea-border-width, var(--_ui-default-textarea-border-width, var(--ui-border-width))) solid
@@ -123,12 +128,14 @@
     :scope[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);
     }
 
     :scope[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/vanilla/UiInputGroup.d.ts

@@ -6,6 +6,7 @@ export interface UiInputGroupElement extends HTMLDivElement {
   removeEventListener<K extends keyof UiInputGroupEventMap>(type: K, listener: (this: UiInputGroupElement, event: UiInputGroupEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiInputGroupProps {
+  actionPosition?: "below" | "top-end" | null;
   disabled?: boolean | null;
   multiline?: boolean | null;
   prefixKind?: "text" | "icon" | null;

package/vanilla/UiInputGroup.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-input-group/ui-input-group.js";
 import "../styles/ui-input-group.css";
 
-const definition = {...{"contract":{"tag":"ui-input-group","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"multiline":{"type":"boolean","required":false,"target":{"attribute":"multiline"},"default":false},"prefixKind":{"type":{"kind":"terminal","name":"keyword"},"values":["text","icon"],"required":false,"target":{"attribute":"prefixkind"},"default":"text"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"affix"}],"children":[{"kind":"slot","fallback":[],"name":"prefix"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"field"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"affix"}],"children":[{"kind":"slot","fallback":[],"name":"suffix"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"action"}],"children":[{"kind":"slot","fallback":[],"name":"action"}]}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-input-group","props":{"actionPosition":{"type":{"kind":"terminal","name":"keyword"},"values":["below","top-end"],"required":false,"target":{"attribute":"actionposition"},"default":"below"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"multiline":{"type":"boolean","required":false,"target":{"attribute":"multiline"},"default":false},"prefixKind":{"type":{"kind":"terminal","name":"keyword"},"values":["text","icon"],"required":false,"target":{"attribute":"prefixkind"},"default":"text"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"affix"}],"children":[{"kind":"slot","fallback":[],"name":"prefix"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"field"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"affix"}],"children":[{"kind":"slot","fallback":[],"name":"suffix"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"action"}],"children":[{"kind":"slot","fallback":[],"name":"action"}]}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiInputGroup(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiInputGroup.d.ts

@@ -10,6 +10,10 @@ type __VLS_Slots = {} & {
     action?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    actionPosition: {
+        type: PropType<"below" | "top-end" | null>;
+        default: string;
+    };
     disabled: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -23,6 +27,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    actionPosition: {
+        type: PropType<"below" | "top-end" | null>;
+        default: string;
+    };
     disabled: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -38,6 +46,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     disabled: boolean | null;
     multiline: boolean | null;
+    actionPosition: "top-end" | "below" | null;
     prefixKind: "text" | "icon" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiInputGroup.vue

@@ -9,6 +9,15 @@ defineOptions({ inheritAttrs: false })
 
 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', name: 'boolean' },
       required: false,
@@ -36,16 +45,28 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
+  actionPosition: {
+    type: null as unknown as PropType<'below' | 'top-end' | null>,
+    default: 'below',
+  },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   multiline: { type: null as unknown as PropType<boolean | null>, default: false },
   prefixKind: { type: null as unknown as PropType<'text' | 'icon' | null>, default: 'text' },
 })
 const acceptedProps: Record<string, unknown> = {
+  actionPosition: 'below',
   disabled: false,
   multiline: false,
   prefixKind: 'text',
 }
 const checkedProps = computed(() => ({
+  actionPosition: checkedProp<'below' | 'top-end'>(
+    props['actionPosition'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'actionPosition',
+    acceptedProps,
+  ) as 'below' | 'top-end',
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
@@ -132,6 +153,9 @@ const hostState = computed(() =>
     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(' ')
 )
 
@@ -152,7 +176,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['disabled', 'multiline', 'prefixKind'],
+  propNames: ['actionPosition', 'disabled', 'multiline', 'prefixKind'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
@@ -163,6 +187,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     data-component="ui-input-group"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-action-position="reflectedProp('actionPosition', 'action-position', checkedProps.actionPosition, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-multiline="reflectedProp('multiline', 'multiline', checkedProps.multiline, undefined, false)"
     :data-prefix-kind="reflectedProp('prefixKind', 'prefix-kind', checkedProps.prefixKind, undefined, false)"
@@ -372,6 +397,28 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   padding-block-start: 0;
 }
 
+/* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
+   so a translated label or pending indicator cannot cover what the person types. */
+[data-component~="ui-input-group"][data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"] {
+  --_ui-default-textarea-padding-inline-end: calc(
+    var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3)
+  );
+}
+
+[data-component~="ui-input-group"][data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+  .field {
+  grid-row: 1;
+}
+
+[data-component~="ui-input-group"][data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+  .action {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: start;
+  justify-self: end;
+  padding: var(--ui-space-2);
+}
+
 .affix:empty,
 .action:empty {
   display: none;

package/vue/UiTextarea.vue

@@ -326,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;
@@ -336,6 +340,10 @@ 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(
@@ -441,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,6 +4,7 @@ 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",
@@ -19,6 +20,10 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	inheritAttrs: false,
 	__name: "UiInputGroup",
 	props: {
+		actionPosition: {
+			type: null,
+			default: "below"
+		},
 		disabled: {
 			type: null,
 			default: false
@@ -34,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",
@@ -68,11 +84,16 @@ 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"
@@ -117,7 +138,9 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			checkedProps.value.disabled && "disabled",
 			checkedProps.value.prefixKind && "prefixKind",
 			checkedProps.value.prefixKind != null && `prefixKind=${encodeURIComponent(checkedProps.value.prefixKind)}`,
-			checkedProps.value.multiline && "multiline"
+			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"), {
@@ -134,6 +157,7 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
 			},
 			propNames: [
+				"actionPosition",
 				"disabled",
 				"multiline",
 				"prefixKind"
@@ -145,6 +169,7 @@ 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),
@@ -162,6 +187,6 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-875c0c72"]]);
+}), [["__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-cb05f253"]]);
+}), [["__scopeId", "data-v-f5b6ae17"]]);
 //#endregion
 export { UiTextarea_default as t };