@manakind/manuia-ui 0.11.4 → 0.11.6

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

@@ -24,7 +24,8 @@
 
     /*
      * Categories and the toggle are capped so a long name or label wraps in
-     * its share instead of squeezing the title, as on GoalListItem.
+     * its share instead of squeezing the title, as on GoalListItem, and the
+     * narrow cap is clamped the same way.
      */
     & .mui-focus-item__row {
       display: grid;
@@ -84,17 +85,35 @@
       justify-self: end;
     }
 
+    /* Narrow: laid out as GoalListItem's, with the toggle beside the title. */
     @container mui-focus-item (max-width: 36rem) {
       & .mui-focus-item__row {
-        grid-template-columns: minmax(0, 1fr) fit-content(50%);
-        grid-template-areas:
-          "main toggle"
-          "categories categories";
+        grid-template-columns: minmax(0, 1fr) fit-content(clamp(50%, 8rem, 60%));
+        grid-template-areas: none;
         align-items: start;
+        row-gap: var(--semantic-space-gap-tight);
+      }
+
+      & .mui-focus-item__main {
+        display: contents;
+      }
+
+      & .mui-focus-item__title,
+      & .mui-focus-item__toggle {
+        grid-area: auto;
+        grid-row: 1;
+      }
+
+      & .mui-focus-item__details,
+      & .mui-focus-item__actions,
+      & .mui-focus-item__categories {
+        grid-area: auto;
+        grid-column: 1 / -1;
       }
 
       & .mui-focus-item__categories {
         justify-content: flex-start;
+        margin-block-start: calc(var(--semantic-space-gap) - var(--semantic-space-gap-tight));
       }
     }
   }

package/dist/focus-item/focus-item.d.ts

@@ -65,8 +65,9 @@ export interface FocusItemProps {
  * instead.
  *
  * Wide, the row reads left to right: title over its details and actions,
- * then categories, then the toggle. Narrow, the categories drop below and
- * the toggle stays beside the title.
+ * then categories, then the toggle. Narrow, only the title shares a line
+ * with the toggle; the details, actions and categories take the full width
+ * below.
  */
 export declare function FocusItem({ kind, title, kindIcon, details, categories, actions, focused, onFocusedChange, focusIcon, focusedIcon, titleAs, className, children, }: FocusItemProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=focus-item.d.ts.map

package/dist/focus-item/focus-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus-item.d.ts","sourceRoot":"","sources":["../../src/focus-item/focus-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAE1B,kFAAkF;AAClF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,+CAA+C;AAC/C,MAAM,WAAW,eAAe;IAC9B,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;CACf;AAOD,MAAM,WAAW,cAAc;IAC7B,mFAAmF;IACnF,IAAI,EAAE,aAAa,CAAC;IACpB,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,sEAAsE;IACtE,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,wFAAwF;IACxF,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,oFAAoF;IACpF,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAY,EACZ,UAAe,EACf,OAAY,EACZ,OAAO,EACP,eAAe,EACf,SAAS,EACT,WAAuB,EACvB,OAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE,cAAc,2CA+DhB"}
+{"version":3,"file":"focus-item.d.ts","sourceRoot":"","sources":["../../src/focus-item/focus-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAE1B,kFAAkF;AAClF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,+CAA+C;AAC/C,MAAM,WAAW,eAAe;IAC9B,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;CACf;AAOD,MAAM,WAAW,cAAc;IAC7B,mFAAmF;IACnF,IAAI,EAAE,aAAa,CAAC;IACpB,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,sEAAsE;IACtE,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,wFAAwF;IACxF,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,oFAAoF;IACpF,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAY,EACZ,UAAe,EACf,OAAY,EACZ,OAAO,EACP,eAAe,EACf,SAAS,EACT,WAAuB,EACvB,OAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE,cAAc,2CA+DhB"}

package/dist/focus-item/focus-item.js

@@ -19,8 +19,9 @@ const KIND_LABELS = {
  * instead.
  *
  * Wide, the row reads left to right: title over its details and actions,
- * then categories, then the toggle. Narrow, the categories drop below and
- * the toggle stays beside the title.
+ * then categories, then the toggle. Narrow, only the title shares a line
+ * with the toggle; the details, actions and categories take the full width
+ * below.
  */
 export function FocusItem({ kind, title, kindIcon, details = [], categories = [], actions = [], focused, onFocusedChange, focusIcon, focusedIcon = focusIcon, titleAs = 'h3', className, children, }) {
     const isOutcome = kind === 'outcome';

package/dist/focus-item/focus-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-item.js","sourceRoot":"","sources":["../../src/focus-item/focus-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,EAAmB,MAAM,mBAAmB,CAAC;AAEvF,OAAO,EAAE,cAAc,EAAqB,MAAM,oBAAoB,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAa1B,MAAM,WAAW,GAAkC;IACjD,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;CACnB,CAAC;AA4CF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,EAAE,EACZ,OAAO,EACP,eAAe,EACf,SAAS,EACT,WAAW,GAAG,SAAS,EACvB,OAAO,GAAG,IAAI,EACd,SAAS,EACT,QAAQ,GACO;IACf,MAAM,SAAS,GAAG,IAAI,KAAK,SAAS,CAAC;IACrC,MAAM,WAAW,GAAG,GAAG,OAAO,CAAC,MAAM,SAAS,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;IAC5F,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC5E,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IAEvD,MAAM,UAAU,GACd,SAAS,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAChC,aAAI,SAAS,EAAC,yBAAyB,gBAAa,oBAAoB,KAAK,EAAE,YAC5E,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,aAAoB,SAAS,EAAC,wBAAwB,YACnD,MAAM,CAAC,KAAK,IADN,MAAM,CAAC,EAAE,CAEb,CACN,CAAC,GACC,CACN,CAAC,CAAC,CAAC,IAAI,CAAC;IAEX,MAAM,MAAM,GAAG,eAAe,CAAC,CAAC,CAAC,CAC/B,KAAC,MAAM,IACL,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EAC1C,IAAI,EAAC,IAAI,EACT,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,kBAChC,OAAO,gBACT,SAAS,KAAK,EAAE,EAC5B,OAAO,EAAE,YAAY,sBAGd,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,CACL,cAAI,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,aAC5C,KAAC,IAAI,IAAC,SAAS,EAAC,sBAAsB,YACpC,eAAK,SAAS,EAAC,qBAAqB,aAClC,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,SAAS,IAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,uBAAuB,YACtD,KAAK,GACI,EAEZ,aAAG,SAAS,EAAC,yBAAyB,aACpC,gBAAM,SAAS,EAAC,sBAAsB,aACnC,QAAQ,IAAI,KAAC,IAAI,IAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,UAAU,SAAG,EAC3D,WAAW,CAAC,IAAI,CAAC,IACb,EACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,eAAiB,SAAS,EAAC,wBAAwB,YAChD,IAAI,IADI,IAAI,CAER,CACR,CAAC,IACA,EAEH,UAAU,IACP,EAEN,KAAC,cAAc,IAAC,SAAS,EAAC,4BAA4B,EAAC,UAAU,EAAE,UAAU,GAAI,EAEhF,MAAM,IACH,GACD,EACN,QAAQ,IACN,CACN,CAAC;AACJ,CAAC"}
+{"version":3,"file":"focus-item.js","sourceRoot":"","sources":["../../src/focus-item/focus-item.tsx"],"names":[],"mappings":"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"}

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

@@ -29,6 +29,9 @@
      * 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.
+     * Narrow, the status's cap is 8rem where half the row is less: half of a
+     * phone's row is narrower than "Not Started" with its chevron, and the
+     * label wrapped. It stops at 60%, so the title always keeps the rest.
      */
     & .mui-goal-list-item__row {
       display: grid;
@@ -87,20 +90,38 @@
     }
 
     /*
-     * Narrow: the categories move to a line of their own and the status stays
-     * beside the title, where a reader scanning the list looks for it.
+     * Narrow: the status stays beside the title, where a reader scanning the
+     * list looks for it, and everything else takes the row's full width
+     * below. Beside the status, the details had a phone's row less the
+     * status, and "MILESTONES" broke mid-word.
      */
     @container mui-goal-list-item (max-width: 36rem) {
       & .mui-goal-list-item__row {
-        grid-template-columns: minmax(0, 1fr) fit-content(50%);
-        grid-template-areas:
-          "main status"
-          "categories categories";
+        grid-template-columns: minmax(0, 1fr) fit-content(clamp(50%, 8rem, 60%));
+        grid-template-areas: none;
         align-items: start;
+        row-gap: var(--semantic-space-gap-tight);
+      }
+
+      & .mui-goal-list-item__main {
+        display: contents;
+      }
+
+      & .mui-goal-list-item__title,
+      & .mui-goal-list-item__status {
+        grid-area: auto;
+        grid-row: 1;
+      }
+
+      & .mui-goal-list-item__details,
+      & .mui-goal-list-item__categories {
+        grid-area: auto;
+        grid-column: 1 / -1;
       }
 
       & .mui-goal-list-item__categories {
         justify-content: flex-start;
+        margin-block-start: calc(var(--semantic-space-gap) - var(--semantic-space-gap-tight));
       }
     }
   }

package/dist/goal-list-item/goal-list-item.d.ts

@@ -68,8 +68,8 @@ export interface GoalListItemProps {
  * above it, separately operable.
  *
  * Wide, the row reads left to right: title over its details, then categories,
- * then status. Narrow, the categories drop below and the status stays beside
- * the title.
+ * then status. Narrow, only the title shares a line with the status; the
+ * details and categories take the full width below.
  */
 export declare function GoalListItem({ title, type, status, statusIcon, onStatusChange, statusMenuIndicator, statusMenuItemIndicator, periodLabel, categories, maxVisibleCategories, milestones, targetDate, typeIcon, href, linkComponent: LinkComponent, titleAs, className, children, }: GoalListItemProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=goal-list-item.d.ts.map

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

@@ -15,8 +15,8 @@ import './goal-list-item.css';
  * above it, separately operable.
  *
  * Wide, the row reads left to right: title over its details, then categories,
- * then status. Narrow, the categories drop below and the status stays beside
- * the title.
+ * then status. Narrow, only the title shares a line with the status; the
+ * details and categories take the full width below.
  */
 export function GoalListItem({ title, type, status, statusIcon, onStatusChange, statusMenuIndicator, statusMenuItemIndicator, periodLabel, categories = [], maxVisibleCategories = 2, milestones, targetDate, typeIcon, href, linkComponent: LinkComponent = 'a', titleAs = 'h3', className, children, }) {
     const completed = milestones?.filter((m) => m.completed).length ?? 0;

package/dist/goal-status-menu/goal-status-menu.d.ts

@@ -22,8 +22,8 @@ export interface GoalStatusMenuProps {
     onStatusChange?: (status: GoalStatus) => void;
     /**
      * Glyph after the badge saying it opens a menu. Must point RIGHT, as
-     * Select's indicator does: it is turned down while closed and up while
-     * open, because the product's icon set has no down or up chevron.
+     * Select's indicator does: the component turns it down while closed and
+     * up while open, so one glyph serves both states.
      * Defaults to a plain built-in chevron.
      */
     indicator?: IconSource;

package/package.json

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