@threadlabs/looma 0.14.3 → 0.14.5

package/package.json

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

package/styles/ui-text.css

@@ -35,11 +35,19 @@
     :scope[data-ui-text-state~="tone=accent"] {
       color: var(--ui-accent-active);
     }
+    /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
+       in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
     :scope[data-ui-text-state~="tone=danger"] {
-      color: var(--ui-danger);
+      color: var(--ui-danger-subtle-text);
     }
     :scope[data-ui-text-state~="tone=success"] {
-      color: var(--ui-success);
+      color: var(--ui-success-subtle-text);
+    }
+    :scope[data-ui-text-state~="tone=info"] {
+      color: var(--ui-info-subtle-text);
+    }
+    :scope[data-ui-text-state~="tone=warning"] {
+      color: var(--ui-warning-subtle-text);
     }
 
     :scope[data-ui-text-state~="weight=normal"] {
@@ -83,6 +91,8 @@
 @scope ([data-component~="ui-text"]) to ([data-component]) {
 /* 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. */
+    /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
+       in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
 
     /* A link in running text is underlined, so it stands apart from the words around it by more than
        colour. */

package/vanilla/UiText.d.ts

@@ -9,7 +9,7 @@ export interface UiTextProps {
   align?: "start" | "center" | null;
   as?: "p" | "span" | "div" | "small" | "strong" | "label" | null;
   size?: "inherit" | "xs" | "sm" | "md" | "lg" | null;
-  tone?: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | null;
+  tone?: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning" | null;
   truncate?: boolean | null;
   variant?: "body" | "eyebrow" | "code" | null;
   weight?: "inherit" | "normal" | "medium" | "semibold" | null;

package/vanilla/UiText.js

@@ -2,7 +2,7 @@
 import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-text.css";
 
-const definition = {...{"contract":{"tag":"ui-text","props":{"align":{"type":{"enum":["start","center"]},"required":false,"target":{"attribute":"align"},"default":"start"},"as":{"type":{"enum":["p","span","div","small","strong","label"]},"required":false,"target":{"attribute":"as"},"default":"p"},"size":{"type":{"enum":["inherit","xs","sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"inherit"},"tone":{"type":{"enum":["default","secondary","muted","accent","danger","success"]},"required":false,"target":{"attribute":"tone"},"default":"default"},"truncate":{"type":"boolean","required":false,"target":{"attribute":"truncate"},"default":false},"variant":{"type":{"enum":["body","eyebrow","code"]},"required":false,"target":{"attribute":"variant"},"default":"body"},"weight":{"type":{"enum":["inherit","normal","medium","semibold"]},"required":false,"target":{"attribute":"weight"},"default":"inherit"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'span'","testPlan":{"source":"as = 'span'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"span"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'div'","testPlan":{"source":"as = 'div'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"div"}},"dependencies":["as"]}}},{"kind":"element","name":"small","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'small'","testPlan":{"source":"as = 'small'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"small"}},"dependencies":["as"]}}},{"kind":"element","name":"strong","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'strong'","testPlan":{"source":"as = 'strong'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"strong"}},"dependencies":["as"]}}},{"kind":"element","name":"label","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'label'","testPlan":{"source":"as = 'label'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"label"}},"dependencies":["as"]}}},{"kind":"element","name":"p","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"p","choices":["span","div","small","strong","label","p"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-text","props":{"align":{"type":{"enum":["start","center"]},"required":false,"target":{"attribute":"align"},"default":"start"},"as":{"type":{"enum":["p","span","div","small","strong","label"]},"required":false,"target":{"attribute":"as"},"default":"p"},"size":{"type":{"enum":["inherit","xs","sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"inherit"},"tone":{"type":{"enum":["default","secondary","muted","accent","danger","success","info","warning"]},"required":false,"target":{"attribute":"tone"},"default":"default"},"truncate":{"type":"boolean","required":false,"target":{"attribute":"truncate"},"default":false},"variant":{"type":{"enum":["body","eyebrow","code"]},"required":false,"target":{"attribute":"variant"},"default":"body"},"weight":{"type":{"enum":["inherit","normal","medium","semibold"]},"required":false,"target":{"attribute":"weight"},"default":"inherit"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'span'","testPlan":{"source":"as = 'span'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"span"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'div'","testPlan":{"source":"as = 'div'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"div"}},"dependencies":["as"]}}},{"kind":"element","name":"small","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'small'","testPlan":{"source":"as = 'small'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"small"}},"dependencies":["as"]}}},{"kind":"element","name":"strong","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'strong'","testPlan":{"source":"as = 'strong'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"strong"}},"dependencies":["as"]}}},{"kind":"element","name":"label","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'label'","testPlan":{"source":"as = 'label'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"label"}},"dependencies":["as"]}}},{"kind":"element","name":"p","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"p","choices":["span","div","small","strong","label","p"]}},source:{file:import.meta.url},css:""};
 
 export function createUiText(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiText.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     align?: 'start' | 'center';
     as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'label';
     size?: 'inherit' | 'xs' | 'sm' | 'md' | 'lg';
-    tone?: 'default' | 'secondary' | 'muted' | 'accent' | 'danger' | 'success';
+    tone?: 'default' | 'secondary' | 'muted' | 'accent' | 'danger' | 'success' | 'info' | 'warning';
     truncate?: boolean;
     variant?: 'body' | 'eyebrow' | 'code';
     weight?: 'inherit' | 'normal' | 'medium' | 'semibold';
@@ -23,7 +23,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: "inherit" | "xs" | "sm" | "md" | "lg";
-    tone: "default" | "secondary" | "muted" | "accent" | "danger" | "success";
+    tone: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning";
     variant: "body" | "eyebrow" | "code";
     align: "start" | "center";
     as: "p" | "span" | "div" | "small" | "strong" | "label";

package/vue/UiText.vue

@@ -9,7 +9,7 @@ const props = withDefaults(
     align?: 'start' | 'center'
     as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'label'
     size?: 'inherit' | 'xs' | 'sm' | 'md' | 'lg'
-    tone?: 'default' | 'secondary' | 'muted' | 'accent' | 'danger' | 'success'
+    tone?: 'default' | 'secondary' | 'muted' | 'accent' | 'danger' | 'success' | 'info' | 'warning'
     truncate?: boolean
     variant?: 'body' | 'eyebrow' | 'code'
     weight?: 'inherit' | 'normal' | 'medium' | 'semibold'
@@ -112,11 +112,19 @@ const hostState = computed(() =>
 [data-component~="ui-text"][data-ui-text-state~="tone=accent"] {
   color: var(--ui-accent-active);
 }
+/* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
+   in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
 [data-component~="ui-text"][data-ui-text-state~="tone=danger"] {
-  color: var(--ui-danger);
+  color: var(--ui-danger-subtle-text);
 }
 [data-component~="ui-text"][data-ui-text-state~="tone=success"] {
-  color: var(--ui-success);
+  color: var(--ui-success-subtle-text);
+}
+[data-component~="ui-text"][data-ui-text-state~="tone=info"] {
+  color: var(--ui-info-subtle-text);
+}
+[data-component~="ui-text"][data-ui-text-state~="tone=warning"] {
+  color: var(--ui-warning-subtle-text);
 }
 
 [data-component~="ui-text"][data-ui-text-state~="weight=normal"] {

package/vue/chunks/UiText.js

@@ -57,6 +57,6 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_6));
 		};
 	}
-}), [["__scopeId", "data-v-ab6bb60b"]]);
+}), [["__scopeId", "data-v-f6cb02e5"]]);
 //#endregion
 export { UiText_default as t };

package/vue/components.css

@@ -6371,81 +6371,89 @@ tbody tr[data-v-9980d203-s]:last-child > * {
 
 /* 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. */
-[data-component~="ui-text"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-v-f6cb02e5] {
   margin: 0;
   min-inline-size: 0;
   color: var(--ui-text-primary);
   text-align: start;
 }
-[data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-f6cb02e5] {
   font-size: var(--ui-font-size-xs);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-f6cb02e5] {
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-f6cb02e5] {
   font-size: var(--ui-font-size-md);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-f6cb02e5] {
   font-size: var(--ui-font-size-lg);
   line-height: var(--ui-line-height-relaxed);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-f6cb02e5] {
   color: var(--ui-text-secondary);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-f6cb02e5] {
   color: var(--ui-text-muted);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-f6cb02e5] {
   color: var(--ui-accent-active);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-ab6bb60b] {
-  color: var(--ui-danger);
+/* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
+   in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
+[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-f6cb02e5] {
+  color: var(--ui-danger-subtle-text);
+}
+[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-f6cb02e5] {
+  color: var(--ui-success-subtle-text);
+}
+[data-component~="ui-text"][data-ui-text-state~="tone=info"][data-v-f6cb02e5] {
+  color: var(--ui-info-subtle-text);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-ab6bb60b] {
-  color: var(--ui-success);
+[data-component~="ui-text"][data-ui-text-state~="tone=warning"][data-v-f6cb02e5] {
+  color: var(--ui-warning-subtle-text);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-f6cb02e5] {
   font-weight: var(--ui-font-normal);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-f6cb02e5] {
   font-weight: var(--ui-font-medium);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-f6cb02e5] {
   font-weight: var(--ui-font-semibold);
 }
-[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-f6cb02e5] {
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
-[data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-f6cb02e5] {
   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"] a[data-v-ab6bb60b-s] {
+[data-component~="ui-text"] a[data-v-f6cb02e5-s] {
   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"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-f6cb02e5] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-f6cb02e5] {
   text-align: center;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-text"][hidden][data-v-ab6bb60b] {
+[data-component~="ui-text"][hidden][data-v-f6cb02e5] {
   display: none;
 }