@threadlabs/looma 0.25.3 → 0.25.4

package/package.json

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

package/styles/ui-badge.css

@@ -73,6 +73,7 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      gap: var(--ui-space-1);
       box-sizing: border-box;
       min-inline-size: 0;
       max-inline-size: 100%;
@@ -97,8 +98,30 @@
       text-overflow: ellipsis;
     }
 
-    /* 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. */
+    .label:empty {
+      display: none;
+    }
+
+    /* Icon content has its own flex item so label ellipsis never clips its strokes. */
+    .icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+    }
+
+    .icon:empty {
+      display: none;
+    }
+
+    /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
+
+    .label:has(svg) {
+      text-box-trim: none;
+    }
+
+    /* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
+       trimming its label separately keeps the glyph centered without changing adjacent lines. */
     @supports (text-box-trim: trim-both) {
       :scope {
         display: inline-block;
@@ -108,6 +131,15 @@
         text-box-trim: trim-both;
         text-box-edge: text;
       }
+      :scope:has(.icon:not(:empty)),
+      :scope:has(.label svg) {
+        display: inline-flex;
+        text-box-trim: none;
+      }
+      :scope:has(.icon:not(:empty)) .label {
+        text-box-trim: trim-both;
+        text-box-edge: text;
+      }
     }
 
     :scope[data-ui-badge-state~="size=xs"] {
@@ -246,6 +278,10 @@
       justify-content: center;
     }
 
+    :scope[data-ui-badge-state~="shape=square"] .label:empty {
+      display: none;
+    }
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
     :scope[data-ui-badge-state~="shape=dot"] {
       position: relative;
@@ -332,8 +368,25 @@
     /* 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. */
 
-    /* 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. */
+    /* Icon content has its own flex item so label ellipsis never clips its strokes. */
+
+    .icon :where([data-slotted], [data-slotted] *):is(svg) {
+      display: block;
+      inline-size: 1em;
+      block-size: 1em;
+      flex: none;
+    }
+
+    /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
+    .label :where([data-slotted], [data-slotted] *):is(svg) {
+      inline-size: 1em;
+      block-size: 1em;
+      vertical-align: middle;
+      margin-inline-end: var(--ui-space-1);
+    }
+
+    /* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
+       trimming its label separately keeps the glyph centered without changing adjacent lines. */
     @supports (text-box-trim: trim-both) {
     }
 
@@ -342,6 +395,10 @@
 
     /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
 
+    :scope[data-ui-badge-state~="shape=square"] .label :where([data-slotted], [data-slotted] *):is(svg) {
+      margin-inline-end: 0;
+    }
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
 
     /* The clipped point needs an inset surface over an outer border-colour shape: a native border

package/styles/ui-button.css

@@ -90,6 +90,7 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      column-gap: var(--ui-space-2);
       vertical-align: middle;
       color: var(--_tone-text);
     }
@@ -139,7 +140,6 @@
     .spinner-wrap {
       display: inline-flex;
       flex: none;
-      margin-inline-end: var(--ui-space-2);
       vertical-align: middle;
     }
 

package/vanilla/UiBadge.js

@@ -16,17 +16,30 @@ export function createUiBadge(options = {}) {
   }
   element.setAttribute("data-component", "ui-badge");
   const element0 = document.createElement("span");
-  element0.setAttribute("class", "label");
+  element0.setAttribute("class", "icon");
+  element0.setAttribute("aria-hidden", "true");
+  if (slots["icon"] ?? [].length > 0) {
+    for (const child of slots["icon"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+      projected.push([node, "icon"]);
+      element0.append(node);
+    }
+  } else {
+  }
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "label");
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
-      element0.append(node);
+      element1.append(node);
     }
   } else {
   }
-  element.append(element0);
+  element.append(element1);
   manageGeneratedProps(element, [
     { name: "shape", attribute: "data-shape", value: componentProps["shape"], default: "pill", type: ["pill","tag","dot","square"], required: false },
     { name: "size", attribute: "data-size", value: componentProps["size"], default: "md", type: ["xs","md"], required: false },

package/vue/UiBadge.d.ts

@@ -1,7 +1,9 @@
 import type { PropType } from 'vue';
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     shape: {

package/vue/UiBadge.vue

@@ -177,7 +177,8 @@ const hostState = computed(() =>
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-badge-state="hostState || undefined"
-  ><span class="label"><slot /></span></span>
+  ><span class="icon" aria-hidden="true"><slot name="icon" /></span>
+    <span class="label"><slot /></span></span>
 </template>
 
 <style scoped>
@@ -261,6 +262,7 @@ const hostState = computed(() =>
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--ui-space-1);
   box-sizing: border-box;
   min-inline-size: 0;
   max-inline-size: 100%;
@@ -287,8 +289,43 @@ const hostState = computed(() =>
   text-overflow: ellipsis;
 }
 
-/* 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. */
+.label:empty {
+  display: none;
+}
+
+/* Icon content has its own flex item so label ellipsis never clips its strokes. */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+
+.icon:empty {
+  display: none;
+}
+
+.icon :slotted(svg) {
+  display: block;
+  inline-size: 1em;
+  block-size: 1em;
+  flex: none;
+}
+
+/* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
+.label :slotted(svg) {
+  inline-size: 1em;
+  block-size: 1em;
+  vertical-align: middle;
+  margin-inline-end: var(--ui-space-1);
+}
+
+.label:has(svg) {
+  text-box-trim: none;
+}
+
+/* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
+   trimming its label separately keeps the glyph centered without changing adjacent lines. */
 @supports (text-box-trim: trim-both) {
   [data-component~="ui-badge"] {
     display: inline-block;
@@ -298,6 +335,15 @@ const hostState = computed(() =>
     text-box-trim: trim-both;
     text-box-edge: text;
   }
+  [data-component~="ui-badge"]:has(.icon:not(:empty)),
+  [data-component~="ui-badge"]:has(.label svg) {
+    display: inline-flex;
+    text-box-trim: none;
+  }
+  [data-component~="ui-badge"]:has(.icon:not(:empty)) .label {
+    text-box-trim: trim-both;
+    text-box-edge: text;
+  }
 }
 
 [data-component~="ui-badge"][data-ui-badge-state~="size=xs"] {
@@ -436,6 +482,14 @@ const hostState = computed(() =>
   justify-content: center;
 }
 
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label :slotted(svg) {
+  margin-inline-end: 0;
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label:empty {
+  display: none;
+}
+
 /* 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"] {
   position: relative;

package/vue/UiButton.vue

@@ -933,6 +933,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  column-gap: var(--ui-space-2);
   vertical-align: middle;
   color: var(--_tone-text);
 }
@@ -982,7 +983,6 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 .spinner-wrap {
   display: inline-flex;
   flex: none;
-  margin-inline-end: var(--ui-space-2);
   vertical-align: middle;
 }
 

package/vue/UiEditorSlashMenuItem.d.ts

@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     value: string | null;
-    disabled: boolean | null;
     icon: string | null;
+    disabled: boolean | null;
     description: string | null;
     keywords: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/chunks/UiBadge.js

@@ -9,7 +9,11 @@ var _hoisted_1 = [
 	"data-variant",
 	"data-ui-badge-state"
 ];
-var _hoisted_2 = { class: "label" };
+var _hoisted_2 = {
+	class: "icon",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = { class: "label" };
 //#endregion
 //#region .build/vue/UiBadge.vue
 var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -163,12 +167,12 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-badge-state": hostState.value || void 0
-			}), [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}), [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon")]), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-b1009c5d"]]);
+}), [["__scopeId", "data-v-5065fda2"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiButton.js

@@ -755,6 +755,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-5c174bca"]]);
+}), [["__scopeId", "data-v-7c2bc2b4"]]);
 //#endregion
 export { UiButton_default as t };