@threadlabs/looma 0.15.1 → 0.15.2

package/package.json

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

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/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/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/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

@@ -3878,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);
@@ -3892,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;
 }