@agentero/design-system 0.25.1 → 0.25.2

package/mcp/manifests/components.html

@@ -588,13 +588,13 @@
 <header>
   <div class="wrap">
     <h1>Manifest Debugger</h1>
-    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">25 components ok</span><span class="filter-pill ok" aria-disabled="true">193 stories ok</span></div>
+    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">25 components ok</span><span class="filter-pill ok" aria-disabled="true">194 stories ok</span></div>
   </div>
 </header>
 <main>
   <div class="wrap">
     <div class="note ok" style="margin-bottom: 16px;">
-              Using <code>react-component-meta</code>. Generation took <strong>4.2s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>3.0s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -6371,7 +6371,7 @@ tablist role is announced.</div>
       <div class="badges">
         <label for="c-21-components-tag-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-21-components-tag-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-21-components-tag-stories" class="badge ok as-toggle">12 stories</label>
         
         
       </div>
@@ -6675,6 +6675,24 @@ icon with a long label clips the label and leaves the icon at full size.</div>
             &lt;/Tag&gt;
         &lt;/div&gt;
     &lt;/Stack&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Overflows Without Wrapping</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>A too-narrow container overflows a single-line Tag; the label never wraps</div>
+              <div class="hint">Without `truncate`, a Tag never wraps its label onto multiple lines — a
+container narrower than the label just gets overflowed by a single-line
+Tag that keeps its intrinsic width, instead of breaking the label across
+lines and spilling out of the fixed-height box.</div>
+              <pre><code>const OverflowsWithoutWrapping = () =&gt; (
+    &lt;div style={{ width: &#39;9rem&#39;, border: &#39;1px dashed gray&#39; }}&gt;
+        &lt;Tag title=&quot;Travel insurance limited lines producer&quot;&gt;
+            Travel insurance limited lines producer
+        &lt;/Tag&gt;
+    &lt;/div&gt;
 );</code></pre>
             </div>
             <div class="note ok">

package/mcp/manifests/components.json

@@ -6192,6 +6192,13 @@
           "description": "`truncate` caps the Tag at its container's width and ellipsizes the label.\nThe ellipsis sits on a wrapper around each text run, so a Tag that mixes an\nicon with a long label clips the label and leaves the icon at full size.",
           "summary": "Long labels capped at the container width with an ellipsis"
         },
+        {
+          "id": "components-tag--overflows-without-wrapping",
+          "name": "Overflows Without Wrapping",
+          "snippet": "const OverflowsWithoutWrapping = () => (\n    <div style={{ width: '9rem', border: '1px dashed gray' }}>\n        <Tag title=\"Travel insurance limited lines producer\">\n            Travel insurance limited lines producer\n        </Tag>\n    </div>\n);",
+          "description": "Without `truncate`, a Tag never wraps its label onto multiple lines — a\ncontainer narrower than the label just gets overflowed by a single-line\nTag that keeps its intrinsic width, instead of breaking the label across\nlines and spilling out of the fixed-height box.",
+          "summary": "A too-narrow container overflows a single-line Tag; the label never wraps"
+        },
         {
           "id": "components-tag--colors",
           "name": "Colors",
@@ -6987,6 +6994,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 4234
+    "durationMs": 3008
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.25.1",
+	"version": "0.25.2",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",

package/src/tag/tag.js

@@ -8,7 +8,7 @@ var s = t({
 	base: [
 		"inline-flex w-fit min-w-fit items-center gap-1",
 		"rounded-md border border-solid border-transparent px-2",
-		"font-normal leading-normal no-underline",
+		"font-normal leading-normal whitespace-nowrap no-underline",
 		"transition-[background-color,opacity] duration-200",
 		"[&_svg]:size-3.5 [&_svg]:shrink-0"
 	],
@@ -35,7 +35,7 @@ var s = t({
 			md: "h-8 text-sm"
 		},
 		pill: { true: "rounded-full" },
-		truncate: { true: "max-w-full min-w-0 overflow-hidden whitespace-nowrap" },
+		truncate: { true: "max-w-full min-w-0 overflow-hidden" },
 		interactive: { true: "cursor-pointer" },
 		hasOnlyIcon: { true: "justify-center px-0" }
 	},