@threadlabs/looma 0.15.0 → 0.15.2

package/package.json

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

package/styles/ui-cluster.css

@@ -50,6 +50,9 @@
     :scope[data-ui-cluster-state~="justify=between"] {
       justify-content: space-between;
     }
+    :scope[data-ui-cluster-state~="wrap=nowrap"] {
+      flex-wrap: nowrap;
+    }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {

package/styles/ui-form-field.css

@@ -35,6 +35,25 @@
       font-size: var(--ui-font-size-sm);
     }
 
+    /* A label action, such as a small help button, sits after the label text in a box one line
+       tall, centred on the first line and overflowing it. A button taller than a line of label
+       text then never makes this field's label row taller than its neighbours' in a grid row. */
+    .label:has(> .label-action > *) {
+      display: flex;
+      align-items: start;
+      gap: var(--ui-space-1);
+    }
+
+    .label-action {
+      display: flex;
+      align-items: unsafe center;
+      block-size: 1lh;
+    }
+
+    .label-action:not(:has(> *)) {
+      display: none;
+    }
+
     .help {
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);
@@ -62,6 +81,10 @@
     /* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
        in Vue), and generates no box of its own, so an empty region adds no gap. */
 
+    /* A label action, such as a small help button, sits after the label text in a box one line
+       tall, centred on the first line and overflowing it. A button taller than a line of label
+       text then never makes this field's label row taller than its neighbours' in a grid row. */
+
     .help > :where([data-slotted], [data-slotted] *):is(*) {
       min-block-size: var(--_ui-form-field-help-min-block-size, 0);
     }

package/tokens.css

@@ -271,3 +271,15 @@
   from { --_ui-scroll-fade-end: var(--_ui-scroll-fade-size, 24px); }
   to { --_ui-scroll-fade-end: 0px; }
 }
+
+/* Focus moved by script to a non-interactive target, such as a page's <h1 tabindex="-1"> after
+   navigation so a screen reader announces the new page, draws no focus ring: tabindex="-1" keeps
+   the target out of the Tab order, so there is no keyboard focus position to show, and the ring
+   around a wrapped heading is a jagged, notched box. Controls, links, editable regions, and any
+   element with a role (menu items, options, tabs, and other roving-focus widgets) keep their ring.
+   Layered, so any page or component focus style still wins. */
+@layer base {
+  [tabindex="-1"]:not(a[href], area[href], audio, button, iframe, input, select, summary, textarea, video, [contenteditable], [role]):focus-visible {
+    outline: none;
+  }
+}

package/vanilla/UiCluster.d.ts

@@ -9,6 +9,7 @@ export interface UiClusterProps {
   align?: "start" | "center" | "end" | "stretch" | null;
   gap?: "xs" | "s" | "m" | "l" | "xl" | null;
   justify?: "start" | "center" | "end" | "between" | null;
+  wrap?: "wrap" | "nowrap" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiCluster.js

@@ -8,6 +8,7 @@ export function createUiCluster(options = {}) {
   const prop0 = componentProps["align"] === undefined ? undefined : componentProps["align"];
   const prop1 = componentProps["gap"] === undefined ? undefined : componentProps["gap"];
   const prop2 = componentProps["justify"] === undefined ? undefined : componentProps["justify"];
+  const prop3 = componentProps["wrap"] === undefined ? undefined : componentProps["wrap"];
   const element = document.createElement("div");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -26,6 +27,7 @@ export function createUiCluster(options = {}) {
     { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch"], required: false },
     { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs","s","m","l","xl"], required: false },
     { name: "justify", attribute: "data-justify", value: componentProps["justify"], type: ["start","center","end","between"], required: false },
+    { name: "wrap", attribute: "data-wrap", value: componentProps["wrap"], type: ["wrap","nowrap"], required: false },
   ]);
   return element;
 }

package/vanilla/UiFormField.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-form-field/ui-form-field.js";
 import "../styles/ui-form-field.css";
 
-const definition = {...{"contract":{"tag":"ui-form-field","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"invalid"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot","fallback":[],"name":"label"}]},{"kind":"slot"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"help"}],"children":[{"kind":"slot","fallback":[],"name":"help"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"error"}],"children":[{"kind":"slot","fallback":[],"name":"error"}]}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-form-field","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"invalid"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot","fallback":[],"name":"label"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label-action"}],"children":[{"kind":"slot","fallback":[],"name":"label-action"}]}]},{"kind":"slot"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"help"}],"children":[{"kind":"slot","fallback":[],"name":"help"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"error"}],"children":[{"kind":"slot","fallback":[],"name":"error"}]}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiFormField(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -24,6 +24,17 @@ export function createUiFormField(options = {}) {
     }
   } else {
   }
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "label-action");
+  if (slots["label-action"] ?? [].length > 0) {
+    for (const child of slots["label-action"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "label-action"]);
+      element1.append(node);
+    }
+  } else {
+  }
+  element0.append(element1);
   element.append(element0);
   if (children.length > 0) {
     for (const child of children) {
@@ -33,28 +44,28 @@ export function createUiFormField(options = {}) {
     }
   } else {
   }
-  const element1 = document.createElement("div");
-  element1.setAttribute("class", "help");
+  const element2 = document.createElement("div");
+  element2.setAttribute("class", "help");
   if (slots["help"] ?? [].length > 0) {
     for (const child of slots["help"] ?? []) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       projected.push([node, "help"]);
-      element1.append(node);
+      element2.append(node);
     }
   } else {
   }
-  element.append(element1);
-  const element2 = document.createElement("div");
-  element2.setAttribute("class", "error");
+  element.append(element2);
+  const element3 = document.createElement("div");
+  element3.setAttribute("class", "error");
   if (slots["error"] ?? [].length > 0) {
     for (const child of slots["error"] ?? []) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       projected.push([node, "error"]);
-      element2.append(node);
+      element3.append(node);
     }
   } else {
   }
-  element.append(element2);
+  element.append(element3);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,
   });

package/vue/UiCluster.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     align?: 'start' | 'center' | 'end' | 'stretch';
     gap?: 'xs' | 's' | 'm' | 'l' | 'xl';
     justify?: 'start' | 'center' | 'end' | 'between';
+    wrap?: 'wrap' | 'nowrap';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/vue/UiCluster.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
   align?: 'start' | 'center' | 'end' | 'stretch'
   gap?: 'xs' | 's' | 'm' | 'l' | 'xl'
   justify?: 'start' | 'center' | 'end' | 'between'
+  wrap?: 'wrap' | 'nowrap'
 }>()
 
 /** The values the styles' :host-state() rules test. */
@@ -16,6 +17,7 @@ const hostState = computed(() =>
     props.gap && `gap gap=${props.gap}`,
     props.align && `align align=${props.align}`,
     props.justify && `justify justify=${props.justify}`,
+    props.wrap && `wrap wrap=${props.wrap}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -77,6 +79,9 @@ const hostState = computed(() =>
 [data-component~="ui-cluster"][data-ui-cluster-state~="justify=between"] {
   justify-content: space-between;
 }
+[data-component~="ui-cluster"][data-ui-cluster-state~="wrap=nowrap"] {
+  flex-wrap: nowrap;
+}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-cluster"][hidden] {

package/vue/UiFormField.d.ts

@@ -3,15 +3,17 @@ type __VLS_Props = {
     invalid?: boolean;
     required?: boolean;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    'label-action'?: (props: typeof __VLS_3) => any;
 } & {
-    help?: (props: typeof __VLS_5) => any;
+    default?: (props: typeof __VLS_5) => any;
 } & {
-    error?: (props: typeof __VLS_7) => any;
+    help?: (props: typeof __VLS_7) => any;
+} & {
+    error?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     invalid: boolean;

package/vue/UiFormField.vue

@@ -44,7 +44,10 @@ useComponentHost(controllerModule.default, {
     :data-ui-form-field-state="hostState || undefined"
     ref="root"
   >
-    <div class="label"><slot name="label" /></div>
+    <div class="label">
+      <slot name="label" />
+      <span class="label-action"><slot name="label-action" /></span>
+    </div>
     <slot />
     <div class="help"><slot name="help" /></div>
     <div class="error"><slot name="error" /></div>
@@ -87,6 +90,25 @@ useComponentHost(controllerModule.default, {
   font-size: var(--ui-font-size-sm);
 }
 
+/* A label action, such as a small help button, sits after the label text in a box one line
+   tall, centred on the first line and overflowing it. A button taller than a line of label
+   text then never makes this field's label row taller than its neighbours' in a grid row. */
+.label:has(> .label-action > *) {
+  display: flex;
+  align-items: start;
+  gap: var(--ui-space-1);
+}
+
+.label-action {
+  display: flex;
+  align-items: unsafe center;
+  block-size: 1lh;
+}
+
+.label-action:not(:has(> *)) {
+  display: none;
+}
+
 .help {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);

package/vue/chunks/UiCluster.js

@@ -10,7 +10,8 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	props: {
 		align: {},
 		gap: {},
-		justify: {}
+		justify: {},
+		wrap: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -18,12 +19,13 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const hostState = computed(() => [
 			props.gap && `gap gap=${props.gap}`,
 			props.align && `align align=${props.align}`,
-			props.justify && `justify justify=${props.justify}`
+			props.justify && `justify justify=${props.justify}`,
+			props.wrap && `wrap wrap=${props.wrap}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-cluster" }, _ctx.$attrs, { "data-ui-cluster-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-81b18ffc"]]);
+}), [["__scopeId", "data-v-b98d575c"]]);
 //#endregion
 export { UiCluster_default as t };

package/vue/chunks/UiFormField.js

@@ -5,8 +5,9 @@ import * as controllerModule from "@threadlabs/looma/components/ui-form-field/ui
 //#region .build/vue/UiFormField.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-form-field-state"];
 var _hoisted_2 = { class: "label" };
-var _hoisted_3 = { class: "help" };
-var _hoisted_4 = { class: "error" };
+var _hoisted_3 = { class: "label-action" };
+var _hoisted_4 = { class: "help" };
+var _hoisted_5 = { class: "error" };
 //#endregion
 //#region .build/vue/UiFormField.vue
 var UiFormField_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -43,13 +44,13 @@ var UiFormField_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 				ref_key: "root",
 				ref: root
 			}), [
-				createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "label")]),
+				createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "label"), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "label-action")])]),
 				renderSlot(_ctx.$slots, "default"),
-				createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "help")]),
-				createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "error")])
+				createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "help")]),
+				createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "error")])
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-27bff7f1"]]);
+}), [["__scopeId", "data-v-453329c8"]]);
 //#endregion
 export { UiFormField_default as t };

package/vue/components.css

@@ -1240,7 +1240,7 @@ input[data-v-5e151d99]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-cluster"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-v-b98d575c] {
   --_layout-gap: var(--ui-space-3);
   display: flex;
   flex-wrap: wrap;
@@ -1250,42 +1250,45 @@ input[data-v-5e151d99]:focus-visible {
   max-inline-size: 100%;
   margin: 0;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-b98d575c] {
   --_layout-gap: var(--ui-space-2);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-b98d575c] {
   --_layout-gap: var(--ui-space-3);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-b98d575c] {
   --_layout-gap: var(--ui-space-4);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-b98d575c] {
   --_layout-gap: var(--ui-space-5);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-b98d575c] {
   --_layout-gap: var(--ui-space-6);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-b98d575c] {
   align-items: flex-start;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-b98d575c] {
   align-items: flex-end;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-b98d575c] {
   align-items: stretch;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="justify=center"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=center"][data-v-b98d575c] {
   justify-content: center;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="justify=end"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=end"][data-v-b98d575c] {
   justify-content: flex-end;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="justify=between"][data-v-81b18ffc] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=between"][data-v-b98d575c] {
   justify-content: space-between;
 }
+[data-component~="ui-cluster"][data-ui-cluster-state~="wrap=nowrap"][data-v-b98d575c] {
+  flex-wrap: nowrap;
+}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-cluster"][hidden][data-v-81b18ffc] {
+[data-component~="ui-cluster"][hidden][data-v-b98d575c] {
   display: none;
 }
 
@@ -3875,7 +3878,7 @@ svg[data-v-70304a1a-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-form-field"][data-v-27bff7f1] {
+[data-component~="ui-form-field"][data-v-453329c8] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-form-field-danger: var(--ui-form-field-danger);
   --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
@@ -3889,38 +3892,55 @@ svg[data-v-70304a1a-s] {
 
 /* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
    in Vue), and generates no box of its own, so an empty region adds no gap. */
-.label[data-v-27bff7f1],
-.help[data-v-27bff7f1],
-.error[data-v-27bff7f1] {
+.label[data-v-453329c8],
+.help[data-v-453329c8],
+.error[data-v-453329c8] {
   display: contents;
 }
-.label[data-v-27bff7f1] {
+.label[data-v-453329c8] {
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
 }
-.help[data-v-27bff7f1] {
+
+/* A label action, such as a small help button, sits after the label text in a box one line
+   tall, centred on the first line and overflowing it. A button taller than a line of label
+   text then never makes this field's label row taller than its neighbours' in a grid row. */
+.label[data-v-453329c8]:has(> .label-action > *) {
+  display: flex;
+  align-items: start;
+  gap: var(--ui-space-1);
+}
+.label-action[data-v-453329c8] {
+  display: flex;
+  align-items: unsafe center;
+  block-size: 1lh;
+}
+.label-action[data-v-453329c8]:not(:has(> *)) {
+  display: none;
+}
+.help[data-v-453329c8] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
 }
-.help > [data-v-27bff7f1-s] {
+.help > [data-v-453329c8-s] {
   min-block-size: var(--_ui-form-field-help-min-block-size, 0);
 }
-.error[data-v-27bff7f1] {
+.error[data-v-453329c8] {
   display: none;
 }
-[data-component~="ui-form-field"][data-ui-form-field-state~="invalid"] .error[data-v-27bff7f1] {
+[data-component~="ui-form-field"][data-ui-form-field-state~="invalid"] .error[data-v-453329c8] {
   display: contents;
 }
 
 /* An error reads in the danger colour, the one the invalid control's border takes. */
-.error[data-v-27bff7f1],[role="alert"][data-v-27bff7f1-s] {
+.error[data-v-453329c8],[role="alert"][data-v-453329c8-s] {
   color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
   font-size: var(--ui-font-size-sm);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-form-field"][hidden][data-v-27bff7f1] {
+[data-component~="ui-form-field"][hidden][data-v-453329c8] {
   display: none;
 }