@threadlabs/looma 0.23.12 → 0.23.13

package/package.json

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

package/styles/ui-badge.css

@@ -97,9 +97,8 @@
       text-overflow: ellipsis;
     }
 
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
-     * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
-     * replaces, still sizes to its label rather than filling its container. */
+    /* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
+       would crop glyphs where the label clips horizontal overflow for ellipsis. */
     @supports (text-box-trim: trim-both) {
       :scope {
         display: inline-block;
@@ -107,7 +106,7 @@
         text-align: center;
         align-content: center;
         text-box-trim: trim-both;
-        text-box-edge: cap alphabetic;
+        text-box-edge: text;
       }
     }
 
@@ -333,9 +332,8 @@
     /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
        text stays in the DOM for accessible names and consumers' selected values. */
 
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
-     * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
-     * replaces, still sizes to its label rather than filling its container. */
+    /* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
+       would crop glyphs where the label clips horizontal overflow for ellipsis. */
     @supports (text-box-trim: trim-both) {
     }
 

package/vue/UiBadge.vue

@@ -287,9 +287,8 @@ const hostState = computed(() =>
   text-overflow: ellipsis;
 }
 
-/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
- * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
- * replaces, still sizes to its label rather than filling its container. */
+/* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
+   would crop glyphs where the label clips horizontal overflow for ellipsis. */
 @supports (text-box-trim: trim-both) {
   [data-component~="ui-badge"] {
     display: inline-block;
@@ -297,7 +296,7 @@ const hostState = computed(() =>
     text-align: center;
     align-content: center;
     text-box-trim: trim-both;
-    text-box-edge: cap alphabetic;
+    text-box-edge: text;
   }
 }
 

package/vue/chunks/UiBadge.js

@@ -169,6 +169,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-18b6e16a"]]);
+}), [["__scopeId", "data-v-83521ab0"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/components.css

@@ -349,7 +349,7 @@ svg[data-v-47b12d9e] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-badge"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-v-83521ab0] {
   --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
   --_badge-text: var(--ui-text-secondary);
   /* Sit between the soft fill and its stronger theme ink. */
@@ -394,27 +394,26 @@ svg[data-v-47b12d9e] {
 
 /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
    text stays in the DOM for accessible names and consumers' selected values. */
-.label[data-v-18b6e16a] {
+.label[data-v-83521ab0] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
- * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
- * replaces, still sizes to its label rather than filling its container. */
+/* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
+   would crop glyphs where the label clips horizontal overflow for ellipsis. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-badge"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-v-83521ab0] {
     display: inline-block;
     min-block-size: var(--ui-badge-min-block-size, 1.5rem);
     text-align: center;
     align-content: center;
     text-box-trim: trim-both;
-    text-box-edge: cap alphabetic;
+    text-box-edge: text;
 }
 }
-[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-83521ab0] {
   box-sizing: border-box;
   min-inline-size: 1rem;
   min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -422,52 +421,52 @@ svg[data-v-47b12d9e] {
   font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
   line-height: var(--ui-badge-line-height, 1);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-83521ab0] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-83521ab0] {
   --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-83521ab0] {
   --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-83521ab0] {
   --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-83521ab0] {
   --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-83521ab0] {
   --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-83521ab0] {
   --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-83521ab0] {
   --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-83521ab0] {
   --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-83521ab0] {
   --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -475,12 +474,12 @@ svg[data-v-47b12d9e] {
 
 /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
    invalid while the hook is unset. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-83521ab0] {
   --_badge-color-surface: var(--_badge-color-ink);
   --_badge-color-border: var(--_badge-color-ink);
   --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-83521ab0] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
   --_badge-text: var(--ui-text-secondary);
@@ -488,29 +487,29 @@ svg[data-v-47b12d9e] {
   --_badge-color-surface: initial;
   --_badge-color-border: var(--_badge-color-ink);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-83521ab0] {
   --_badge-border: var(--ui-accent-solid);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-83521ab0] {
   --_badge-border: var(--ui-danger-solid);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-83521ab0] {
   --_badge-border: var(--ui-success-solid);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-83521ab0] {
   --_badge-border: var(--ui-warning-solid);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-83521ab0] {
   --_badge-border: var(--ui-info-solid);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
 /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-83521ab0] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
   display: inline-flex;
   box-sizing: border-box;
@@ -523,17 +522,17 @@ svg[data-v-47b12d9e] {
   border-radius: var(--ui-radius-md);
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-83521ab0] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-83521ab0] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
 /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-83521ab0] {
   position: relative;
   box-sizing: border-box;
   flex: none;
@@ -545,7 +544,7 @@ svg[data-v-47b12d9e] {
   border-radius: var(--ui-radius-round);
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-83521ab0] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -556,7 +555,7 @@ svg[data-v-47b12d9e] {
 
 /* The clipped point needs an inset surface over an outer border-colour shape: a native border
    has no diagonal edge to follow. Keep this edge for every tag variant. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
   position: relative;
@@ -573,7 +572,7 @@ svg[data-v-47b12d9e] {
     0 100%
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0]::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -588,34 +587,34 @@ svg[data-v-47b12d9e] {
   );
   pointer-events: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a]:dir(rtl) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0]:dir(rtl) {
   padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
   padding-inline-start: calc(
     var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
   );
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0]:dir(rtl)::before {
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
 @media (forced-colors: active) {
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-83521ab0] {
     forced-color-adjust: none;
     border-color: CanvasText;
     background: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0] {
     forced-color-adjust: none;
     background: CanvasText;
     color: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0]::before {
     background: Canvas;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-18b6e16a] {
+[data-component~="ui-badge"][hidden][data-v-83521ab0] {
   display: none;
 }