@threadlabs/looma 0.11.3 → 0.11.5

package/package.json

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

package/styles/ui-button.css

@@ -222,6 +222,22 @@
       }
     }
 
+    /* Under touch, every button's press lands within the control minimum: an invisible hit area,
+       centred on it, like IconButton's. A standalone link-style button (a "See all" beside a
+       heading) is a target of its own, not text, so it gets one too. */
+    html[data-ui-input-modality="touch"] :scope {
+      position: relative;
+    }
+
+    html[data-ui-input-modality="touch"] :scope::after {
+      position: absolute;
+      inset: 50% auto auto 50%;
+      inline-size: max(100%, var(--ui-control-min-block-size));
+      block-size: max(100%, var(--ui-control-min-block-size));
+      transform: translate(-50%, -50%);
+      content: "";
+    }
+
     /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
        WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
     :scope[data-ui-button-state~="variant=link"] {
@@ -302,6 +318,10 @@
     @media (pointer: coarse) {
     }
 
+    /* Under touch, every button's press lands within the control minimum: an invisible hit area,
+       centred on it, like IconButton's. A standalone link-style button (a "See all" beside a
+       heading) is a target of its own, not text, so it gets one too. */
+
     /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
        WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
 

package/styles/ui-callout.css

@@ -64,6 +64,8 @@
       --_callout-icon: var(--ui-danger-solid);
     }
 
+    /* A link in the callout's text is underlined, so it reads as a link by more than colour. */
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
@@ -72,5 +74,13 @@
 @scope ([data-component~="ui-callout"]) to ([data-component]) {
 /* One line box tall, so the icon centres on the first line of text. */
 
+    /* A link in the callout's text is underlined, so it reads as a link by more than colour. */
+    .content :where([data-slotted], [data-slotted] *):is(a) {
+      color: var(--ui-accent-active);
+      text-decoration: underline;
+      text-decoration-thickness: 0.06em;
+      text-underline-offset: 0.18em;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-form-field.css

@@ -27,6 +27,8 @@
       line-height: var(--ui-line-height-md);
     }
 
+    /* An error reads in the danger colour, the one the invalid control's border takes. */
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
@@ -40,9 +42,10 @@
       min-block-size: var(--ui-form-field-help-min-block-size, 0);
     }
 
+    /* An error reads in the danger colour, the one the invalid control's border takes. */
     .error,
     :where([data-slotted], [data-slotted] *):is([role="alert"]) {
-      color: var(--ui-accent-active);
+      color: var(--ui-danger);
       font-size: var(--ui-font-size-sm);
     }
 

package/styles/ui-input-group.css

@@ -10,6 +10,8 @@
       --ui-input-border: transparent;
       --ui-input-border-hover: transparent;
       --ui-input-focus-border: transparent;
+      --ui-input-invalid-border: transparent;
+      --ui-input-invalid-focus-shadow: none;
       --ui-input-shadow: none;
       --ui-input-focus-shadow: none;
       --ui-input-radius: 0;

package/styles/ui-input.css

@@ -46,13 +46,15 @@
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
     :scope[aria-invalid="true"],
     :scope:is(:user-invalid, [data-user-invalid]) {
-      border-color: var(--ui-danger-solid);
+      border-color: var(--ui-input-invalid-border, var(--ui-danger-solid));
     }
 
     :scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-      box-shadow:
+      box-shadow: var(
+        --ui-input-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
+      );
     }
 
     :scope:disabled {

package/styles/ui-text.css

@@ -62,6 +62,9 @@
       font-family: var(--ui-font-family-mono);
     }
 
+    /* A link in running text is underlined, so it stands apart from the words around it by more than
+       colour. */
+
     :scope[data-ui-text-state~="truncate"] {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -81,5 +84,14 @@
 /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
        text of its own. The root is a paragraph unless as= names a span, div, small, strong, or label. */
 
+    /* A link in running text is underlined, so it stands apart from the words around it by more than
+       colour. */
+    :scope :where([data-slotted], [data-slotted] *):is(a) {
+      color: var(--ui-accent-active);
+      text-decoration: underline;
+      text-decoration-thickness: 0.06em;
+      text-underline-offset: 0.18em;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/vue/UiButton.vue

@@ -299,6 +299,22 @@ function attribute(value: unknown): any {
   }
 }
 
+/* Under touch, every button's press lands within the control minimum: an invisible hit area,
+   centred on it, like IconButton's. A standalone link-style button (a "See all" beside a
+   heading) is a target of its own, not text, so it gets one too. */
+html[data-ui-input-modality="touch"] [data-component~="ui-button"] {
+  position: relative;
+}
+
+html[data-ui-input-modality="touch"] [data-component~="ui-button"]::after {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  inline-size: max(100%, var(--ui-control-min-block-size));
+  block-size: max(100%, var(--ui-control-min-block-size));
+  transform: translate(-50%, -50%);
+  content: "";
+}
+
 /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
    WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
 [data-component~="ui-button"][data-ui-button-state~="variant=link"] {

package/vue/UiCallout.vue

@@ -164,6 +164,14 @@ const hostState = computed(() =>
   --_callout-icon: var(--ui-danger-solid);
 }
 
+/* A link in the callout's text is underlined, so it reads as a link by more than colour. */
+.content :slotted(a) {
+  color: var(--ui-accent-active);
+  text-decoration: underline;
+  text-decoration-thickness: 0.06em;
+  text-underline-offset: 0.18em;
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-callout"][hidden] {
   display: none;

package/vue/UiFormField.vue

@@ -71,9 +71,10 @@ useComponentHost(controllerModule.default, {
   min-block-size: var(--ui-form-field-help-min-block-size, 0);
 }
 
+/* An error reads in the danger colour, the one the invalid control's border takes. */
 .error,
 :slotted([role="alert"]) {
-  color: var(--ui-accent-active);
+  color: var(--ui-danger);
   font-size: var(--ui-font-size-sm);
 }
 

package/vue/UiInput.vue

@@ -108,13 +108,15 @@ useComponentHost(controllerModule.default, {
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 [data-component~="ui-input"][aria-invalid="true"],
 [data-component~="ui-input"]:is(:user-invalid, [data-user-invalid]) {
-  border-color: var(--ui-danger-solid);
+  border-color: var(--ui-input-invalid-border, var(--ui-danger-solid));
 }
 
 [data-component~="ui-input"]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-  box-shadow:
+  box-shadow: var(
+    --ui-input-invalid-focus-shadow,
     var(--ui-control-inset),
-    0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+    0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
+  );
 }
 
 [data-component~="ui-input"]:disabled {

package/vue/UiInputGroup.vue

@@ -44,6 +44,8 @@ const hostState = computed(() =>
   --ui-input-border: transparent;
   --ui-input-border-hover: transparent;
   --ui-input-focus-border: transparent;
+  --ui-input-invalid-border: transparent;
+  --ui-input-invalid-focus-shadow: none;
   --ui-input-shadow: none;
   --ui-input-focus-shadow: none;
   --ui-input-radius: 0;

package/vue/UiText.vue

@@ -108,6 +108,15 @@ const hostState = computed(() =>
   font-family: var(--ui-font-family-mono);
 }
 
+/* A link in running text is underlined, so it stands apart from the words around it by more than
+   colour. */
+[data-component~="ui-text"] :slotted(a) {
+  color: var(--ui-accent-active);
+  text-decoration: underline;
+  text-decoration-thickness: 0.06em;
+  text-underline-offset: 0.18em;
+}
+
 [data-component~="ui-text"][data-ui-text-state~="truncate"] {
   overflow: hidden;
   text-overflow: ellipsis;

package/vue/chunks/UiButton.js

@@ -83,6 +83,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-0c121308"]]);
+}), [["__scopeId", "data-v-6c8750a9"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCallout.js

@@ -100,9 +100,9 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					createElementVNode("path", { d: "m15 9-6 6" }, null, -1),
 					createElementVNode("path", { d: "m9 9 6 6" }, null, -1)
 				])])) : createCommentVNode("v-if", true)
-			]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
+			]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-2fd6ab30"]]);
+}), [["__scopeId", "data-v-36fb7e55"]]);
 //#endregion
 export { UiCallout_default as t };

package/vue/chunks/UiFormField.js

@@ -46,6 +46,6 @@ var UiFormField_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			], 16);
 		};
 	}
-}), [["__scopeId", "data-v-eba1e76b"]]);
+}), [["__scopeId", "data-v-4df6c2a6"]]);
 //#endregion
 export { UiFormField_default as t };

package/vue/chunks/UiInput.js

@@ -61,6 +61,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}), null, 16, _hoisted_1)), [[vModelDynamic, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-12ffae5a"]]);
+}), [["__scopeId", "data-v-c19f8322"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiInputGroup.js

@@ -26,6 +26,6 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-0a135fc1"]]);
+}), [["__scopeId", "data-v-42ff173c"]]);
 //#endregion
 export { UiInputGroup_default as t };

package/vue/chunks/UiText.js

@@ -30,11 +30,11 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({ "data-component": "ui-text" }, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 16, ["data-ui-text-state"]);
 		};
 	}
-}), [["__scopeId", "data-v-70a75450"]]);
+}), [["__scopeId", "data-v-b83a3ab9"]]);
 //#endregion
 export { UiText_default as t };