@fragment-build/ui 4.0.0 → 4.0.1

package/fragments/sidebar/sidebar.css

@@ -72,6 +72,13 @@
 
   .fragment-sidebar__collapsed-nav {
     @apply flex flex-col gap-1;
+
+    /* The active item looks selected the same way at either rail width: the soft fill. */
+    .button--primary {
+      @apply bg-accent-soft;
+      color: var(--sidebar-accent-soft-foreground, var(--accent-soft-foreground));
+    }
+
     & svg {
       @apply size-[18px]! shrink-0 self-center;
     }

package/fragments/stat/StatCard.js

@@ -15,6 +15,6 @@ export const StatCard = ({ label, value, icon, delta, hint, help, helpLabel = 'M
     const sentiment = delta?.sentiment ?? (delta?.direction === 'up' ? 'positive' : delta?.direction === 'down' ? 'negative' : 'neutral');
     const v = statCard({ emphasis, sentiment });
     const DeltaIcon = delta ? deltaIcon[delta.direction] : null;
-    return (_jsxs(Card, { className: v.base({ className }), children: [_jsxs("div", { className: v.top(), children: [_jsxs("span", { className: v.label(), children: [label, help && (_jsxs(Tooltip, { delay: 0, children: [_jsx(Tooltip.Trigger, { className: v.help(), "aria-label": helpLabel, tabIndex: 0, children: _jsx(IconInfoCircle, { size: 14, stroke: 1.75 }) }), _jsx(Tooltip.Content, { className: "max-w-xs", children: help })] }))] }), icon && _jsx("span", { className: v.icon(), children: icon })] }), isLoading ? (_jsx(Skeleton, { className: v.skeleton() })) : (_jsxs("div", { className: v.valueRow(), children: [_jsx("span", { className: v.value(), children: value }), delta && DeltaIcon && (_jsxs("span", { className: v.delta(), children: [_jsx(DeltaIcon, { size: 14, stroke: 2 }), delta.value] }))] })), (hint || delta?.label) && !isLoading && (_jsx("p", { className: v.hint(), children: hint ?? delta?.label }))] }));
+    return (_jsxs(Card, { className: v.base({ className }), children: [_jsxs("div", { className: v.top(), children: [_jsxs("span", { className: v.label(), children: [_jsx("span", { className: "truncate", children: label }), help && (_jsxs(Tooltip, { delay: 0, children: [_jsx(Tooltip.Trigger, { className: v.help(), "aria-label": helpLabel, tabIndex: 0, children: _jsx(IconInfoCircle, { size: 14, stroke: 1.75 }) }), _jsx(Tooltip.Content, { className: "max-w-xs", children: help })] }))] }), icon && _jsx("span", { className: v.icon(), children: icon })] }), isLoading ? (_jsx(Skeleton, { className: v.skeleton() })) : (_jsxs("div", { className: v.valueRow(), children: [_jsx("span", { className: v.value(), children: value }), delta && DeltaIcon && (_jsxs("span", { className: v.delta(), children: [_jsx(DeltaIcon, { size: 14, stroke: 2 }), delta.value] }))] })), (hint || delta?.label) && !isLoading && (_jsx("p", { className: v.hint(), children: hint ?? delta?.label }))] }));
 };
 //# sourceMappingURL=StatCard.js.map

package/fragments/stat/StatCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard.js","sourceRoot":"","sources":["../../src/fragments/stat/StatCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACtG,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAgC7C,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE,gBAAgB;IACpB,IAAI,EAAE,kBAAkB;IACxB,IAAI,EAAE,SAAS;CACP,CAAC;AAEX,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,GAAG,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,GACtG,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,KAAK,EAAE,SAAS,IAAI,CACpC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAC9F,CAAC;IACF,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE5D,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,aACpC,eAAK,SAAS,EAAE,CAAC,CAAC,GAAG,EAAE,aACrB,gBAAM,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,aACvB,KAAK,EACL,IAAI,IAAI,CACP,MAAC,OAAO,IAAC,KAAK,EAAE,CAAC,aACf,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,gBAAc,SAAS,EAAE,QAAQ,EAAE,CAAC,YACtE,KAAC,cAAc,IAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,GAAI,GAC1B,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,UAAU,YAAE,IAAI,GAAmB,IACtD,CACX,IACI,EACN,IAAI,IAAI,eAAM,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,YAAG,IAAI,GAAQ,IAC7C,EACL,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,QAAQ,IAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,GAAI,CACtC,CAAC,CAAC,CAAC,CACF,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,aAC1B,eAAM,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,YAAG,KAAK,GAAQ,EACzC,KAAK,IAAI,SAAS,IAAI,CACrB,gBAAM,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,aACxB,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,GAAI,EACjC,KAAK,CAAC,KAAK,IACP,CACR,IACG,CACP,EACA,CAAC,IAAI,IAAI,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CACvC,YAAG,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,YAAG,IAAI,IAAI,KAAK,EAAE,KAAK,GAAK,CACnD,IACI,CACR,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"StatCard.js","sourceRoot":"","sources":["../../src/fragments/stat/StatCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACtG,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAgC7C,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE,gBAAgB;IACpB,IAAI,EAAE,kBAAkB;IACxB,IAAI,EAAE,SAAS;CACP,CAAC;AAEX,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,GAAG,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,GACtG,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,KAAK,EAAE,SAAS,IAAI,CACpC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAC9F,CAAC;IACF,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE5D,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,aACpC,eAAK,SAAS,EAAE,CAAC,CAAC,GAAG,EAAE,aACrB,gBAAM,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,aACxB,eAAM,SAAS,EAAC,UAAU,YAAE,KAAK,GAAQ,EACxC,IAAI,IAAI,CACP,MAAC,OAAO,IAAC,KAAK,EAAE,CAAC,aACf,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,gBAAc,SAAS,EAAE,QAAQ,EAAE,CAAC,YACtE,KAAC,cAAc,IAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,GAAI,GAC1B,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,UAAU,YAAE,IAAI,GAAmB,IACtD,CACX,IACI,EACN,IAAI,IAAI,eAAM,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,YAAG,IAAI,GAAQ,IAC7C,EACL,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,QAAQ,IAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,GAAI,CACtC,CAAC,CAAC,CAAC,CACF,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,aAC1B,eAAM,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,YAAG,KAAK,GAAQ,EACzC,KAAK,IAAI,SAAS,IAAI,CACrB,gBAAM,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,aACxB,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,GAAI,EACjC,KAAK,CAAC,KAAK,IACP,CACR,IACG,CACP,EACA,CAAC,IAAI,IAAI,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CACvC,YAAG,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,YAAG,IAAI,IAAI,KAAK,EAAE,KAAK,GAAK,CACnD,IACI,CACR,CAAC;AACJ,CAAC,CAAC"}

package/fragments/widget/widget.css

@@ -3,8 +3,9 @@
     @apply p-5 gap-4 min-w-0;
   }
 
+  /* Wraps, so a long title and its controls share the row when they fit and stack when they do not. */
   .fragment-widget__header {
-    @apply p-0 flex flex-row items-start gap-3;
+    @apply p-0 flex flex-row flex-wrap items-start gap-3;
   }
 
   .fragment-widget__header-start {
@@ -12,7 +13,7 @@
   }
 
   .fragment-widget__heading {
-    @apply min-w-0 flex-1;
+    @apply min-w-48 flex-1;
   }
 
   .fragment-widget__title {

package/index.css

@@ -62,10 +62,27 @@
     @apply border border-border shadow-none;
   }
 
+  /*
+   * Text that has to fit, in any language. Single-line controls keep one line and end in an
+   * ellipsis when a translation is longer than the room it has: HeroUI breaks a Select's value
+   * onto a second line instead ("Alle / Oberflächen"), which grows the trigger out of its row.
+   * The trigger may shrink, so the ellipsis — not an overflow — is what absorbs the difference.
+   */
+  .select__trigger {
+    @apply min-w-0 items-center;
+  }
+
+  .select__value {
+    @apply min-w-0 truncate;
+    overflow-wrap: normal;
+  }
+
+  .chip {
+    @apply max-w-full whitespace-nowrap;
+  }
+
+  /* The thumb keeps HeroUI's accent ring: transparent, only a white knob was left, invisible on a white card. */
   .slider {
-    .slider__thumb {
-      @apply bg-transparent;
-    }
     &[data-orientation="horizontal"] {
       .slider__track {
         @apply h-1;
@@ -82,6 +99,19 @@
     @apply rounded-xl;
   }
 
+  /*
+   * HeroUI sets a modal's body in the muted colour, which suits a one-line confirmation and greys
+   * out every heading and label in a dialog that holds a form. Body copy is ink here; a dialog that
+   * only says something mutes its own message. The heading gets the weight of a page section.
+   */
+  .modal__body {
+    @apply text-foreground;
+  }
+
+  .modal__heading {
+    @apply text-lg font-semibold;
+  }
+
   .tabs {
     &:not(.tabs--secondary) {
       .tabs__list {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragment-build/ui",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "type": "module",
   "engines": {
     "node": ">=22"

package/src/fragments/sidebar/sidebar.css

@@ -72,6 +72,13 @@
 
   .fragment-sidebar__collapsed-nav {
     @apply flex flex-col gap-1;
+
+    /* The active item looks selected the same way at either rail width: the soft fill. */
+    .button--primary {
+      @apply bg-accent-soft;
+      color: var(--sidebar-accent-soft-foreground, var(--accent-soft-foreground));
+    }
+
     & svg {
       @apply size-[18px]! shrink-0 self-center;
     }

package/src/fragments/widget/widget.css

@@ -3,8 +3,9 @@
     @apply p-5 gap-4 min-w-0;
   }
 
+  /* Wraps, so a long title and its controls share the row when they fit and stack when they do not. */
   .fragment-widget__header {
-    @apply p-0 flex flex-row items-start gap-3;
+    @apply p-0 flex flex-row flex-wrap items-start gap-3;
   }
 
   .fragment-widget__header-start {
@@ -12,7 +13,7 @@
   }
 
   .fragment-widget__heading {
-    @apply min-w-0 flex-1;
+    @apply min-w-48 flex-1;
   }
 
   .fragment-widget__title {

package/src/index.css

@@ -62,10 +62,27 @@
     @apply border border-border shadow-none;
   }
 
+  /*
+   * Text that has to fit, in any language. Single-line controls keep one line and end in an
+   * ellipsis when a translation is longer than the room it has: HeroUI breaks a Select's value
+   * onto a second line instead ("Alle / Oberflächen"), which grows the trigger out of its row.
+   * The trigger may shrink, so the ellipsis — not an overflow — is what absorbs the difference.
+   */
+  .select__trigger {
+    @apply min-w-0 items-center;
+  }
+
+  .select__value {
+    @apply min-w-0 truncate;
+    overflow-wrap: normal;
+  }
+
+  .chip {
+    @apply max-w-full whitespace-nowrap;
+  }
+
+  /* The thumb keeps HeroUI's accent ring: transparent, only a white knob was left, invisible on a white card. */
   .slider {
-    .slider__thumb {
-      @apply bg-transparent;
-    }
     &[data-orientation="horizontal"] {
       .slider__track {
         @apply h-1;
@@ -82,6 +99,19 @@
     @apply rounded-xl;
   }
 
+  /*
+   * HeroUI sets a modal's body in the muted colour, which suits a one-line confirmation and greys
+   * out every heading and label in a dialog that holds a form. Body copy is ink here; a dialog that
+   * only says something mutes its own message. The heading gets the weight of a page section.
+   */
+  .modal__body {
+    @apply text-foreground;
+  }
+
+  .modal__heading {
+    @apply text-lg font-semibold;
+  }
+
   .tabs {
     &:not(.tabs--secondary) {
       .tabs__list {