@manakind/manuia-ui 0.11.0 → 0.11.4

package/dist/category-card/category-card.css

@@ -23,6 +23,7 @@
 
     & .mui-category-card__meta {
       display: flex;
+      flex-wrap: wrap;
       align-items: flex-start;
       justify-content: space-between;
       gap: var(--semantic-space-gap);

package/dist/focus-item/focus-item.css

@@ -14,6 +14,7 @@
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: var(--semantic-space-gap-tight);
+    overflow-wrap: anywhere;
 
     & .mui-focus-item__card {
       --ds-card-padding: var(--semantic-space-padding);
@@ -22,12 +23,12 @@
     }
 
     /*
-     * Categories are capped at 40% of the row so long names wrap in their
-     * share instead of squeezing the title, as on GoalListItem.
+     * Categories and the toggle are capped so a long name or label wraps in
+     * its share instead of squeezing the title, as on GoalListItem.
      */
     & .mui-focus-item__row {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) fit-content(40%) auto;
+      grid-template-columns: minmax(0, 1fr) fit-content(40%) fit-content(30%);
       grid-template-areas: "main categories toggle";
       align-items: center;
       gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
@@ -43,8 +44,6 @@
 
     & .mui-focus-item__title {
       --ds-card-text: var(--ds-card-text-muted);
-
-      overflow-wrap: anywhere;
     }
 
     & .mui-focus-item__details {
@@ -59,15 +58,10 @@
 
     & .mui-focus-item__kind {
       display: inline-flex;
+      flex-wrap: wrap;
       align-items: center;
       gap: var(--semantic-space-gap-tight);
       font-weight: var(--primitives-font-weight-semibold);
-      white-space: nowrap;
-    }
-
-    /* Details are product data (a project name), so they may break anywhere. */
-    & .mui-focus-item__detail {
-      overflow-wrap: anywhere;
     }
 
     & .mui-focus-item__actions {
@@ -80,10 +74,6 @@
       font-size: var(--primitives-font-size-sm);
     }
 
-    & .mui-focus-item__action {
-      overflow-wrap: anywhere;
-    }
-
     & .mui-focus-item__categories {
       grid-area: categories;
       justify-content: flex-end;
@@ -96,7 +86,7 @@
 
     @container mui-focus-item (max-width: 36rem) {
       & .mui-focus-item__row {
-        grid-template-columns: minmax(0, 1fr) auto;
+        grid-template-columns: minmax(0, 1fr) fit-content(50%);
         grid-template-areas:
           "main toggle"
           "categories categories";

package/dist/goal-card/goal-card.css

@@ -298,12 +298,13 @@
      */
     & .mui-goal-card__type {
       display: inline-flex;
+      flex-wrap: wrap;
+      max-width: 100%;
       align-items: center;
       gap: var(--component-goal-card-chip-gap);
       color: var(--mui-tier-badge-text, var(--semantic-color-text-muted));
       font-size: var(--component-goal-card-chip-font-size);
       font-weight: var(--primitives-font-weight-semibold);
-      white-space: nowrap;
     }
 
     & .mui-goal-card__categories {

package/dist/goal-categories/goal-categories.css

@@ -7,6 +7,7 @@
     margin: 0;
     padding: 0;
     list-style: none;
+    overflow-wrap: anywhere;
 
     & .mui-goal-categories__item {
       display: inline-flex;
@@ -14,7 +15,6 @@
       gap: var(--semantic-space-gap-tight);
       color: var(--semantic-color-text-muted);
       font-size: var(--primitives-font-size-sm);
-      white-space: nowrap;
     }
 
     /*

package/dist/goal-list-item/goal-list-item.css

@@ -15,6 +15,7 @@
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: var(--semantic-space-gap-tight);
+    overflow-wrap: anywhere;
 
     /* Through the contract keys ui-core reads, so no specificity contest with `.ds-card`. */
     & .mui-goal-list-item__card {
@@ -24,14 +25,14 @@
     }
 
     /*
-     * The categories' track is capped: left at `auto` it grows to their
-     * one-line width, and a goal with three long categories squeezed its own
-     * title into a sliver that the details then painted over. Capped, they
-     * wrap inside their share and the title keeps the rest.
+     * The categories' and status's tracks are capped: left at `auto` a track
+     * grows to its one-line width, and a goal with three long categories, or
+     * a status label too long to break, squeezed its own title into a sliver.
+     * Capped, they wrap inside their share and the title keeps the rest.
      */
     & .mui-goal-list-item__row {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) fit-content(40%) auto;
+      grid-template-columns: minmax(0, 1fr) fit-content(40%) fit-content(30%);
       grid-template-areas: "main categories status";
       align-items: center;
       gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
@@ -48,8 +49,6 @@
     /* As on GoalCard: size and grouping mark the heading, not colour. */
     & .mui-goal-list-item__title {
       --ds-card-text: var(--ds-card-text-muted);
-
-      overflow-wrap: anywhere;
     }
 
     & .mui-goal-list-item__details {
@@ -64,14 +63,10 @@
 
     & .mui-goal-list-item__type {
       display: inline-flex;
+      flex-wrap: wrap;
       align-items: center;
       gap: var(--semantic-space-gap-tight);
       font-weight: var(--primitives-font-weight-semibold);
-      white-space: nowrap;
-    }
-
-    & .mui-goal-list-item__detail {
-      white-space: nowrap;
     }
 
     /* GoalCard's small-caps label, so the two views name their details alike. */
@@ -97,7 +92,7 @@
      */
     @container mui-goal-list-item (max-width: 36rem) {
       & .mui-goal-list-item__row {
-        grid-template-columns: minmax(0, 1fr) auto;
+        grid-template-columns: minmax(0, 1fr) fit-content(50%);
         grid-template-areas:
           "main status"
           "categories categories";

package/dist/goal-status-menu/goal-status-menu.css

@@ -17,6 +17,7 @@
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
+    max-width: 100%;
     gap: var(--semantic-space-gap-tight);
     margin: 0;
     padding: 0 var(--semantic-space-gap-tight);
@@ -38,6 +39,11 @@
       outline-offset: 3px;
     }
 
+    /* A Badge never gives way in a row, but inside the capped trigger it must, or the chevron goes. */
+    & .mui-goal-status-menu__badge {
+      flex-shrink: 1;
+    }
+
     & .mui-goal-status-menu__indicator {
       color: var(--semantic-color-text-muted);
       transform: rotate(90deg);

package/dist/goal-status-menu/goal-status-menu.js

@@ -25,7 +25,7 @@ const STATUS_ITEMS = GOAL_STATUSES.map((status) => ({
  * status and what pressing it does, which also names the menu it opens.
  */
 export function GoalStatusMenu({ status, statusIcon, onStatusChange, indicator = FallbackChevronRight, itemIndicator, labelClassName, className, }) {
-    const badge = (_jsx(Badge, { variant: STATUS_VARIANT[status], appearance: "plain", icon: statusIcon, labelClassName: cx('mui-goal-status-menu__label', labelClassName), "aria-label": status, className: onStatusChange ? undefined : className, children: status }));
+    const badge = (_jsx(Badge, { variant: STATUS_VARIANT[status], appearance: "plain", icon: statusIcon, labelClassName: cx('mui-goal-status-menu__label', labelClassName), "aria-label": status, className: onStatusChange ? 'mui-goal-status-menu__badge' : className, children: status }));
     if (!onStatusChange)
         return badge;
     return (_jsx(Menu, { label: "Status", items: STATUS_ITEMS, value: status, onValueChange: onStatusChange, itemIndicator: itemIndicator, trigger: _jsxs("button", { type: "button", className: cx('mui-goal-status-menu', className), "aria-label": `Status: ${status}. Change status`, children: [badge, _jsx(Icon, { source: indicator, size: "sm", decorative: true, className: "mui-goal-status-menu__indicator" })] }) }));

package/dist/goal-status-menu/goal-status-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"goal-status-menu.js","sourceRoot":"","sources":["../../src/goal-status-menu/goal-status-menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,KAAK,EACL,EAAE,EACF,oBAAoB,EACpB,IAAI,EAEJ,IAAI,GAEL,MAAM,mBAAmB,CAAC;AAC3B,OAAO,wBAAwB,CAAC;AAEhC,+EAA+E;AAC/E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,aAAa,EAAE,aAAa,EAAE,WAAW,CAAU,CAAC;AAIlF,MAAM,cAAc,GAAqD;IACvE,aAAa,EAAE,OAAO;IACtB,aAAa,EAAE,MAAM;IACrB,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,YAAY,GAA2B,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IAC1E,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC,CAAC,CAAC;AAsCJ;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,UAAU,EACV,cAAc,EACd,SAAS,GAAG,oBAAoB,EAChC,aAAa,EACb,cAAc,EACd,SAAS,GACW;IACpB,MAAM,KAAK,GAAG,CACZ,KAAC,KAAK,IACJ,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,EAC/B,UAAU,EAAC,OAAO,EAClB,IAAI,EAAE,UAAU,EAChB,cAAc,EAAE,EAAE,CAAC,6BAA6B,EAAE,cAAc,CAAC,gBACrD,MAAM,EAClB,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,YAEhD,MAAM,GACD,CACT,CAAC;IAEF,IAAI,CAAC,cAAc;QAAE,OAAO,KAAK,CAAC;IAElC,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAC,QAAQ,EACd,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,aAAa,EAC5B,OAAO,EACL,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,gBACpC,WAAW,MAAM,iBAAiB,aAE7C,KAAK,EACN,KAAC,IAAI,IACH,MAAM,EAAE,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,UAAU,QACV,SAAS,EAAC,iCAAiC,GAC3C,IACK,GAEX,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"goal-status-menu.js","sourceRoot":"","sources":["../../src/goal-status-menu/goal-status-menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,KAAK,EACL,EAAE,EACF,oBAAoB,EACpB,IAAI,EAEJ,IAAI,GAEL,MAAM,mBAAmB,CAAC;AAC3B,OAAO,wBAAwB,CAAC;AAEhC,+EAA+E;AAC/E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,aAAa,EAAE,aAAa,EAAE,WAAW,CAAU,CAAC;AAIlF,MAAM,cAAc,GAAqD;IACvE,aAAa,EAAE,OAAO;IACtB,aAAa,EAAE,MAAM;IACrB,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,YAAY,GAA2B,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IAC1E,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC,CAAC,CAAC;AAsCJ;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,UAAU,EACV,cAAc,EACd,SAAS,GAAG,oBAAoB,EAChC,aAAa,EACb,cAAc,EACd,SAAS,GACW;IACpB,MAAM,KAAK,GAAG,CACZ,KAAC,KAAK,IACJ,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,EAC/B,UAAU,EAAC,OAAO,EAClB,IAAI,EAAE,UAAU,EAChB,cAAc,EAAE,EAAE,CAAC,6BAA6B,EAAE,cAAc,CAAC,gBACrD,MAAM,EAClB,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,SAAS,YAEpE,MAAM,GACD,CACT,CAAC;IAEF,IAAI,CAAC,cAAc;QAAE,OAAO,KAAK,CAAC;IAElC,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAC,QAAQ,EACd,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,aAAa,EAC5B,OAAO,EACL,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,gBACpC,WAAW,MAAM,iBAAiB,aAE7C,KAAK,EACN,KAAC,IAAI,IACH,MAAM,EAAE,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,UAAU,QACV,SAAS,EAAC,iCAAiC,GAC3C,IACK,GAEX,CACH,CAAC;AACJ,CAAC"}

package/dist/goal-tab-trigger/goal-tab-trigger.d.ts

@@ -7,5 +7,17 @@ export interface GoalTabTriggerProps extends ComponentProps<typeof TabsTrigger>
     /** How many goals fall in this timeframe. */
     count: number;
 }
+/**
+ * A Manuia timeframe tab with its goal count.
+ *
+ * Composes `ui-core`'s `TabsTrigger` and `Badge`. The pairing is product
+ * specific — "a tab that carries a count of the things behind it" is a Manuia
+ * pattern, so it lives here rather than widening `TabsTrigger`.
+ *
+ * The count badge carries an `aria-label`, because a bare number announced
+ * after the label tells a screen reader user nothing. Tabs with no goals are
+ * rendered in a lighter weight, but they stay reachable — the count itself is
+ * the information.
+ */
 export declare function GoalTabTrigger({ label, count, className, ...props }: GoalTabTriggerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=goal-tab-trigger.d.ts.map

package/dist/goal-tab-trigger/goal-tab-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"goal-tab-trigger.d.ts","sourceRoot":"","sources":["../../src/goal-tab-trigger/goal-tab-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAEhC,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,OAAO,WAAW,CAAC;IAC7E,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;CACf;AA4BD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAmBxF"}
+{"version":3,"file":"goal-tab-trigger.d.ts","sourceRoot":"","sources":["../../src/goal-tab-trigger/goal-tab-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAEhC,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,OAAO,WAAW,CAAC;IAC7E,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;CACf;AAQD;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAmBxF"}

package/dist/goal-tab-trigger/goal-tab-trigger.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, cx, TabsTrigger } from '@manakind/ui-core';
 import './goal-tab-trigger.css';
+/**
+ * Cap the visible count at `99+` to bound the badge width.
+ * The badge's `aria-label` retains the full count.
+ */
+const MAX_DISPLAYED_COUNT = 99;
 /**
  * A Manuia timeframe tab with its goal count.
  *
@@ -13,19 +18,6 @@ import './goal-tab-trigger.css';
  * rendered in a lighter weight, but they stay reachable — the count itself is
  * the information.
  */
-/**
- * Counts stop rendering their true value here and switch to `99+`.
- *
- * The cap bounds how wide the badge can get: without it a five-digit count
- * would stretch the tab arbitrarily. At `99+` the badge widens from a circle
- * into a pill, which is what every other library does with this case and
- * costs nothing structurally — the height is pinned, so nothing reflows and
- * the tab strip keeps its nested radii.
- *
- * The cap is display only. The `aria-label` always announces the real
- * number, so nothing is hidden from a screen reader.
- */
-const MAX_DISPLAYED_COUNT = 99;
 export function GoalTabTrigger({ label, count, className, ...props }) {
     const hasGoals = count > 0;
     const overflows = count > MAX_DISPLAYED_COUNT;

package/dist/goal-tab-trigger/goal-tab-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"goal-tab-trigger.js","sourceRoot":"","sources":["../../src/goal-tab-trigger/goal-tab-trigger.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,wBAAwB,CAAC;AAShC;;;;;;;;;;;GAWG;AACH;;;;;;;;;;;GAWG;AACH,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAE/B,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuB;IACvF,MAAM,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,KAAK,GAAG,mBAAmB,CAAC;IAE9C,OAAO,CACL,MAAC,WAAW,IACV,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,CAAC,QAAQ,IAAI,6BAA6B,EAAE,SAAS,CAAC,KACxF,KAAK,aAET,yBAAO,KAAK,GAAQ,EACpB,KAAC,KAAK,IACJ,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,gBAC7B,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,YAEvD,SAAS,CAAC,CAAC,CAAC,GAAG,mBAAmB,GAAG,CAAC,CAAC,CAAC,KAAK,GACxC,IACI,CACf,CAAC;AACJ,CAAC"}
+{"version":3,"file":"goal-tab-trigger.js","sourceRoot":"","sources":["../../src/goal-tab-trigger/goal-tab-trigger.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,wBAAwB,CAAC;AAShC;;;GAGG;AACH,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAE/B;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuB;IACvF,MAAM,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,KAAK,GAAG,mBAAmB,CAAC;IAE9C,OAAO,CACL,MAAC,WAAW,IACV,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,CAAC,QAAQ,IAAI,6BAA6B,EAAE,SAAS,CAAC,KACxF,KAAK,aAET,yBAAO,KAAK,GAAQ,EACpB,KAAC,KAAK,IACJ,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,gBAC7B,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,YAEvD,SAAS,CAAC,CAAC,CAAC,GAAG,mBAAmB,GAAG,CAAC,CAAC,CAAC,KAAK,GACxC,IACI,CACf,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manakind/manuia-ui",
-  "version": "0.11.0",
+  "version": "0.11.4",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@manakind/manuia-tokens": "0.10.0",
-    "@manakind/ui-core": "0.11.0"
+    "@manakind/ui-core": "0.11.3"
   },
   "peerDependencies": {
     "react": "^19.0.0",