@threadlabs/looma 0.11.2 → 0.11.4

package/package.json

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

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/styles/ui-tree-item.css

@@ -201,7 +201,7 @@
     /* A hovered row reads its whole name: the label slides far enough to show the end, waits
        there, and comes back. Only when it actually overflows — the controller measures by how
        much — after the controls have taken their place over its end — and hands over the distance
-       and a duration from it, so a longer name travels no faster. */
+       and a duration from it, so every name moves at the same speed. */
     .row[data-ui-marquee] > .label > .label-text {
       /* Once, and it stays at the end while the pointer is there: a name that keeps sliding back
          and forth under the pointer is harder to read than one that arrives and holds. */
@@ -424,7 +424,7 @@
     /* A hovered row reads its whole name: the label slides far enough to show the end, waits
        there, and comes back. Only when it actually overflows — the controller measures by how
        much — after the controls have taken their place over its end — and hands over the distance
-       and a duration from it, so a longer name travels no faster. */
+       and a duration from it, so every name moves at the same speed. */
 
     /* This comes after the hover fade, which it replaces at the same specificity. While the name
        slides, the label reaches back under the icon (the controller measures how far) with its text

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/UiTreeItem.vue

@@ -378,7 +378,7 @@ useComponentHost(controllerModule.default, {
 /* A hovered row reads its whole name: the label slides far enough to show the end, waits
    there, and comes back. Only when it actually overflows — the controller measures by how
    much — after the controls have taken their place over its end — and hands over the distance
-   and a duration from it, so a longer name travels no faster. */
+   and a duration from it, so every name moves at the same speed. */
 .row[data-ui-marquee] > .label > .label-text {
   /* Once, and it stays at the end while the pointer is there: a name that keeps sliding back
      and forth under the pointer is harder to read than one that arrives and holds. */

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 };

package/vue/chunks/UiTreeItem.js

@@ -234,6 +234,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-3778b642"]]);
+}), [["__scopeId", "data-v-dab96891"]]);
 //#endregion
 export { UiTreeItem_default as t };