@manakind/manuia-ui 0.20.0 → 0.21.0

package/dist/action-item/action-item.css

@@ -17,6 +17,7 @@
     overflow-wrap: anywhere;
 
     & .mui-action-item__card {
+      container-name: mui-action-item;
       --ds-card-padding: var(--semantic-space-padding);
       --ds-card-title-font-size: var(--primitives-font-size-md);
       --ds-card-title-font-weight: var(--primitives-font-weight-medium);
@@ -72,11 +73,23 @@
       font-size: var(--primitives-font-size-xs);
     }
 
+    /*
+     * A glyph is part of its label, not a neighbour: the two keep one line,
+     * and a label too long for the row breaks beside its glyph.
+     */
     & .mui-action-item__detail {
       display: inline-flex;
-      flex-wrap: wrap;
       align-items: center;
       gap: var(--semantic-space-gap-tight);
+      max-width: 100%;
+    }
+
+    & .mui-action-item__detail-icon {
+      flex: none;
+    }
+
+    & .mui-action-item__detail-label {
+      min-width: 0;
     }
 
     /* The label names the level; the tint on its glyph lets a list be scanned by it. */
@@ -119,6 +132,47 @@
       max-width: 40%;
     }
 
+    /*
+     * Compact: a row inside another card, so no border, fill or radius of its
+     * own, and only a little padding above and below. A rule between rows
+     * keeps them apart instead of the list's gap.
+     */
+    &.mui-action-item--compact {
+      --mui-action-item-footer-space: 0px;
+
+      & .mui-action-item__card {
+        --ds-card-padding: var(--semantic-space-gap) 0;
+        --ds-card-border: transparent;
+        --ds-card-bg: transparent;
+        --ds-card-radius: 0;
+        --ds-card-title-font-size: var(--primitives-font-size-sm);
+        --ds-card-title-font-weight: var(--primitives-font-weight-regular);
+      }
+
+      & .mui-action-item__row {
+        align-items: center;
+        column-gap: var(--semantic-space-gap);
+      }
+
+      & .mui-action-item__title + :is(.mui-action-item__details, .mui-action-item__categories) {
+        margin-block-start: 0;
+      }
+
+      & .mui-action-item__main {
+        gap: var(--semantic-space-gap-tight);
+      }
+    }
+
+    /* A compact row has no border to ring, so a selected one takes a tint instead. */
+    &.mui-action-item--compact.mui-action-item--selected .mui-action-item__card {
+      --ds-card-bg: var(--semantic-color-action-primary-subtle);
+      box-shadow: none;
+    }
+
+    &.mui-action-item--compact + &.mui-action-item--compact {
+      border-block-start: 1px solid var(--semantic-color-border-subtle);
+    }
+
     /*
      * Narrow: the row wraps. The toggle, the title and the checkbox keep the
      * first line. The details and categories follow, lined up under the title
@@ -153,6 +207,13 @@
         );
       }
 
+      &.mui-action-item--compact .mui-action-item__row:has(> .mui-action-item__complete) {
+        --mui-action-item-indent: calc(
+          var(--ds-button-size-sm-icon-only-size) +
+          var(--semantic-space-gap)
+        );
+      }
+
       & .mui-action-item__main {
         display: contents;
       }
@@ -196,31 +257,5 @@
         align-self: center;
       }
     }
-
-    /*
-     * The product's placing controls stand before the card, centred against
-     * it, with a message passed as children kept under the card. The card
-     * becomes the container the narrow layout measures, so the row collapses
-     * by the width inside the card (its padding excluded) rather than by the
-     * whole row, controls included.
-     */
-    &:has(> .mui-action-item__leading) {
-      container-type: normal;
-      grid-template-columns: auto minmax(0, 1fr);
-      column-gap: var(--semantic-space-gap);
-
-      & > :not(.mui-action-item__leading) {
-        grid-column: 2;
-      }
-
-      & > .mui-action-item__card {
-        container: mui-action-item / inline-size;
-      }
-    }
-
-    & > .mui-action-item__leading {
-      grid-row: 1;
-      align-self: center;
-    }
   }
 }

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

@@ -1,6 +1,7 @@
 import { type BadgeVariant, type IconSource } from '@manakind/ui-core';
 import type { ComponentProps, ReactNode } from 'react';
 import { type GoalCategory } from '../goal-categories';
+import '../leading-slot.css';
 import './action-item.css';
 /** One fact about the action, shown after the title: its project, outcome, effort, duration. */
 export interface ActionItemDetail {
@@ -26,6 +27,12 @@ export interface ActionItemPriority {
 }
 /** How the note reads: an aside, or a warning the user should act on. The two Badge variants it maps to. */
 export type ActionItemNoteTone = Extract<BadgeVariant, 'muted' | 'warning'>;
+/**
+ * How much room the row takes. `default` is a card of its own; `compact` is a
+ * smaller row without the card's border, for a list inside another card,
+ * such as an outcome's actions in an `OutcomeItem`.
+ */
+export type ActionItemDensity = 'default' | 'compact';
 export interface ActionItemProps extends Omit<ComponentProps<'li'>, 'title' | 'children' | 'className'> {
     /** The action's description. Rendered as the row's heading. */
     title: string;
@@ -80,6 +87,13 @@ export interface ActionItemProps extends Omit<ComponentProps<'li'>, 'title' | 'c
     leading?: ReactNode;
     /** Heading level for the title. Defaults to `h3`; match the surrounding outline. */
     titleAs?: 'h2' | 'h3' | 'h4';
+    /**
+     * `compact` drops the card's border and padding, takes the small toggle
+     * and a smaller title, and rules a line between rows: for a list inside
+     * another card. The product passes fewer details there; the row shows what
+     * it is given. Defaults to `default`.
+     */
+    density?: ActionItemDensity;
     /** Extra class names on the `<li>`. */
     className?: string;
     /**
@@ -101,6 +115,9 @@ export interface ActionItemProps extends Omit<ComponentProps<'li'>, 'title' | 'c
  * control; it has no pending state, for `FocusItem`'s reason, so the product
  * keeps its change idempotent.
  *
+ * `density="compact"` makes it a smaller row without the card's border, for
+ * an outcome's actions inside an `OutcomeItem`.
+ *
  * Wide, the row reads left to right. Narrow, the toggle, the title and the
  * checkbox share the first line; the details and categories follow, lined up
  * under the title, and the second line and the controls share a footer
@@ -111,5 +128,5 @@ export interface ActionItemProps extends Omit<ComponentProps<'li'>, 'title' | 'c
  * count a screen reader hears is the whole list's, and a sortable list
  * passes its drag library's ref and transform style.
  */
-export declare function ActionItem({ title, completed, onCompletedChange, completeIcon, priority, details, categories, maxVisibleCategories, note, noteTone, selected, onSelectedChange, controls, secondary, leading, titleAs, className, children, ...listItemProps }: ActionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ActionItem({ title, completed, onCompletedChange, completeIcon, priority, details, categories, maxVisibleCategories, note, noteTone, selected, onSelectedChange, controls, secondary, leading, titleAs, density, className, children, ...listItemProps }: ActionItemProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=action-item.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"action-item.d.ts","sourceRoot":"","sources":["../../src/action-item/action-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EAOjB,KAAK,UAAU,EAChB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,mBAAmB,CAAC;AAE3B,gGAAgG;AAChG,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,mFAAmF;AACnF,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEhE,sGAAsG;AACtG,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,KAAK,EAAE,uBAAuB,CAAC;IAC/B,oHAAoH;IACpH,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,4GAA4G;AAC5G,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;AAE5E,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;IACtE,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,SAAS,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,+DAA+D;IAC/D,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,gEAAgE;IAChE,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,wDAAwD;IACxD,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,yGAAyG;IACzG,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2GAA2G;IAC3G,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yGAAyG;IACzG,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oFAAoF;IACpF,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACR,OAAY,EACZ,UAAe,EACf,oBAAwB,EACxB,IAAI,EACJ,QAAkB,EAClB,QAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,OAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,aAAa,EACjB,EAAE,eAAe,2CAyGjB"}
+{"version":3,"file":"action-item.d.ts","sourceRoot":"","sources":["../../src/action-item/action-item.tsx"],"names":[],"mappings":"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"}

package/dist/action-item/action-item.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, Card, CardTitle, Checkbox, cx, Icon, IconButton, } from '@manakind/ui-core';
 import { GoalCategories } from '../goal-categories';
+import '../leading-slot.css';
 import './action-item.css';
 /**
  * One Manuia action as a row. Render it inside an `ActionList`: it is the
@@ -14,6 +15,9 @@ import './action-item.css';
  * control; it has no pending state, for `FocusItem`'s reason, so the product
  * keeps its change idempotent.
  *
+ * `density="compact"` makes it a smaller row without the card's border, for
+ * an outcome's actions inside an `OutcomeItem`.
+ *
  * Wide, the row reads left to right. Narrow, the toggle, the title and the
  * checkbox share the first line; the details and categories follow, lined up
  * under the title, and the second line and the controls share a footer
@@ -24,9 +28,10 @@ import './action-item.css';
  * count a screen reader hears is the whole list's, and a sortable list
  * passes its drag library's ref and transform style.
  */
-export function ActionItem({ title, completed, onCompletedChange, completeIcon, priority, details = [], categories = [], maxVisibleCategories = 2, note, noteTone = 'muted', selected = false, onSelectedChange, controls, secondary, leading, titleAs = 'h3', className, children, ...listItemProps }) {
+export function ActionItem({ title, completed, onCompletedChange, completeIcon, priority, details = [], categories = [], maxVisibleCategories = 2, note, noteTone = 'muted', selected = false, onSelectedChange, controls, secondary, leading, titleAs = 'h3', density = 'default', className, children, ...listItemProps }) {
     const selectable = onSelectedChange !== undefined;
-    const toggle = completeIcon && onCompletedChange ? (_jsx(IconButton, { className: "mui-action-item__complete", variant: completed ? 'primary' : 'secondary', size: "md", icon: completeIcon, "aria-pressed": completed, "aria-label": `Complete ${title}`, onClick: () => onCompletedChange(!completed) })) : null;
+    const compact = density === 'compact';
+    const toggle = completeIcon && onCompletedChange ? (_jsx(IconButton, { className: "mui-action-item__complete", variant: completed ? 'primary' : 'secondary', size: compact ? 'sm' : 'md', icon: completeIcon, "aria-pressed": completed, "aria-label": `Complete ${title}`, onClick: () => onCompletedChange(!completed) })) : null;
     /*
      * A detail's key is its label and its rank among equal labels: a project
      * and an outcome may share a name, and a key that only held the label
@@ -36,10 +41,10 @@ export function ActionItem({ title, completed, onCompletedChange, completeIcon,
     const detailRows = details.map((detail) => {
         const rank = seen.get(detail.label) ?? 0;
         seen.set(detail.label, rank + 1);
-        return (_jsxs("span", { className: "mui-action-item__detail", children: [detail.icon && _jsx(Icon, { source: detail.icon, size: "sm", decorative: true }), detail.label] }, `${detail.label}-${rank}`));
+        return (_jsxs("span", { className: "mui-action-item__detail", children: [detail.icon && (_jsx(Icon, { source: detail.icon, size: "sm", decorative: true, className: "mui-action-item__detail-icon" })), _jsx("span", { className: "mui-action-item__detail-label", children: detail.label })] }, `${detail.label}-${rank}`));
     });
-    const priorityDetail = priority ? (_jsxs("span", { className: cx('mui-action-item__detail', 'mui-action-item__priority', `mui-action-item__priority--${priority.level}`), children: [priority.icon && (_jsx(Icon, { source: priority.icon, size: "sm", decorative: true, className: "mui-action-item__priority-icon" })), priority.label] })) : null;
+    const priorityDetail = priority ? (_jsxs("span", { className: cx('mui-action-item__detail', 'mui-action-item__priority', `mui-action-item__priority--${priority.level}`), children: [priority.icon && (_jsx(Icon, { source: priority.icon, size: "sm", decorative: true, className: "mui-action-item__detail-icon mui-action-item__priority-icon" })), _jsx("span", { className: "mui-action-item__detail-label", children: priority.label })] })) : null;
     const detailList = priority || details.length > 0 || note ? (_jsxs("p", { className: "mui-action-item__details", children: [priorityDetail, detailRows, note && (_jsx(Badge, { variant: noteTone, className: "mui-action-item__note", children: note }))] })) : null;
-    return (_jsxs("li", { ...listItemProps, className: cx('mui-action-item', completed && 'mui-action-item--completed', selectable && selected && 'mui-action-item--selected', className), children: [leading && _jsx("div", { className: "mui-action-item__leading", children: leading }), _jsx(Card, { className: "mui-action-item__card", children: _jsxs("div", { className: "mui-action-item__row", children: [toggle, _jsxs("div", { className: "mui-action-item__main", children: [_jsx(CardTitle, { as: titleAs, className: "mui-action-item__title", children: title }), detailList, _jsx(GoalCategories, { className: "mui-action-item__categories", categories: categories, maxVisible: maxVisibleCategories }), secondary && _jsx("div", { className: "mui-action-item__secondary", children: secondary })] }), controls && _jsx("div", { className: "mui-action-item__controls", children: controls }), selectable && (_jsx(Checkbox, { className: "mui-action-item__select", "aria-label": `Select ${title}`, checked: selected, onCheckedChange: onSelectedChange }))] }) }), children] }));
+    return (_jsxs("li", { ...listItemProps, className: cx('mui-leading-slot', 'mui-action-item', compact && 'mui-action-item--compact', completed && 'mui-action-item--completed', selectable && selected && 'mui-action-item--selected', className), children: [leading && (_jsx("div", { className: "mui-leading-slot__leading mui-action-item__leading", children: leading })), _jsx(Card, { className: "mui-leading-slot__card mui-action-item__card", children: _jsxs("div", { className: "mui-action-item__row", children: [toggle, _jsxs("div", { className: "mui-action-item__main", children: [_jsx(CardTitle, { as: titleAs, className: "mui-action-item__title", children: title }), detailList, _jsx(GoalCategories, { className: "mui-action-item__categories", categories: categories, maxVisible: maxVisibleCategories }), secondary && _jsx("div", { className: "mui-action-item__secondary", children: secondary })] }), controls && _jsx("div", { className: "mui-action-item__controls", children: controls }), selectable && (_jsx(Checkbox, { className: "mui-action-item__select", "aria-label": `Select ${title}`, checked: selected, onCheckedChange: onSelectedChange }))] }) }), children] }));
 }
 //# sourceMappingURL=action-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"action-item.js","sourceRoot":"","sources":["../../src/action-item/action-item.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"action-item.js","sourceRoot":"","sources":["../../src/action-item/action-item.tsx"],"names":[],"mappings":"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"}

package/dist/action-item/index.d.ts

@@ -1,3 +1,3 @@
-export type { ActionItemDetail, ActionItemNoteTone, ActionItemPriority, ActionItemPriorityLevel, ActionItemProps, } from './action-item';
+export type { ActionItemDensity, ActionItemDetail, ActionItemNoteTone, ActionItemPriority, ActionItemPriorityLevel, ActionItemProps, } from './action-item';
 export { ActionItem } from './action-item';
 //# sourceMappingURL=index.d.ts.map

package/dist/action-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/action-item/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,EACvB,eAAe,GAChB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/action-item/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,EACvB,eAAe,GAChB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/action-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/action-item/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/action-item/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/action-list/action-list.css

@@ -7,4 +7,9 @@
     padding: 0;
     list-style: none;
   }
+
+  /* Compact rows rule a line between them instead. */
+  .mui-action-list:has(> .mui-action-item--compact) {
+    gap: 0;
+  }
 }

package/dist/action-list/action-list.d.ts

@@ -1,11 +1,14 @@
 import type { ComponentProps } from 'react';
 import './action-list.css';
 export interface ActionListProps extends ComponentProps<'ul'> {
-    /** `ActionItem`s. Each renders its own `<li>`. */
+    /** `ActionItem`s and `OutcomeItem`s. Each renders its own `<li>`. */
     children?: ComponentProps<'ul'>['children'];
 }
 /**
- * A `<ul>` of `ActionItem` rows: the actions of a day, a block or a project.
+ * A `<ul>` of `ActionItem` rows, and `OutcomeItem` rows that group them: the
+ * actions of a day, an outcome or a project.
+ * Cards stand apart by a gap; compact rows (`density="compact"`) close it
+ * and rule a line between them instead.
  *
  * A real list, so a screen reader announces how many items there are. Name it
  * with `aria-label` or `aria-labelledby` when the heading above it doesn't

package/dist/action-list/action-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-list.d.ts","sourceRoot":"","sources":["../../src/action-list/action-list.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC3D,kDAAkD;IAClD,QAAQ,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC;CAC7C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAM5E"}
+{"version":3,"file":"action-list.d.ts","sourceRoot":"","sources":["../../src/action-list/action-list.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC3D,qEAAqE;IACrE,QAAQ,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC;CAC7C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAM5E"}

package/dist/action-list/action-list.js

@@ -2,7 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '@manakind/ui-core';
 import './action-list.css';
 /**
- * A `<ul>` of `ActionItem` rows: the actions of a day, a block or a project.
+ * A `<ul>` of `ActionItem` rows, and `OutcomeItem` rows that group them: the
+ * actions of a day, an outcome or a project.
+ * Cards stand apart by a gap; compact rows (`density="compact"`) close it
+ * and rule a line between them instead.
  *
  * A real list, so a screen reader announces how many items there are. Name it
  * with `aria-label` or `aria-labelledby` when the heading above it doesn't

package/dist/action-list/action-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-list.js","sourceRoot":"","sources":["../../src/action-list/action-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,OAAO,mBAAmB,CAAC;AAO3B;;;;;;;;;;GAUG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAC3E,OAAO,CACL,aAAI,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,KAAM,KAAK,YACvD,QAAQ,GACN,CACN,CAAC;AACJ,CAAC"}
+{"version":3,"file":"action-list.js","sourceRoot":"","sources":["../../src/action-list/action-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,OAAO,mBAAmB,CAAC;AAO3B;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAC3E,OAAO,CACL,aAAI,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,KAAM,KAAK,YACvD,QAAQ,GACN,CACN,CAAC;AACJ,CAAC"}

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

@@ -17,6 +17,7 @@
     overflow-wrap: anywhere;
 
     & .mui-focus-item__card {
+      container-name: mui-focus-item;
       --ds-card-padding: var(--semantic-space-padding);
       --ds-card-title-font-size: var(--primitives-font-size-md);
       --ds-card-title-font-weight: var(--primitives-font-weight-regular);
@@ -154,31 +155,5 @@
         justify-self: end;
       }
     }
-
-    /*
-     * The product's placing controls stand before the card, centred against
-     * it, with a message passed as children kept under the card. The card
-     * becomes the container the narrow layout measures, so the row collapses
-     * by the width inside the card (its padding excluded) rather than by the
-     * whole row, controls included.
-     */
-    &:has(> .mui-focus-item__leading) {
-      container-type: normal;
-      grid-template-columns: auto minmax(0, 1fr);
-      column-gap: var(--semantic-space-gap);
-
-      & > :not(.mui-focus-item__leading) {
-        grid-column: 2;
-      }
-
-      & > .mui-focus-item__card {
-        container: mui-focus-item / inline-size;
-      }
-    }
-
-    & > .mui-focus-item__leading {
-      grid-row: 1;
-      align-self: center;
-    }
   }
 }

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

@@ -1,6 +1,7 @@
 import { type IconSource } from '@manakind/ui-core';
 import type { ComponentProps, ReactNode } from 'react';
 import { type GoalCategory } from '../goal-categories';
+import '../leading-slot.css';
 import './focus-item.css';
 /** What a focus row holds: a single action, or an outcome that groups actions. */
 export type FocusItemKind = 'action' | 'outcome';

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,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,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,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;IACtE,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;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,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;;;;;;;;;;;;;;;;;;;;GAoBG;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,QAAQ,EACR,OAAO,EACP,OAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,aAAa,EACjB,EAAE,cAAc,2CAkEhB"}
+{"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,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,qBAAqB,CAAC;AAC7B,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,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;IACtE,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;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,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;;;;;;;;;;;;;;;;;;;;GAoBG;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,QAAQ,EACR,OAAO,EACP,OAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,aAAa,EACjB,EAAE,cAAc,2CAoEhB"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Card, CardTitle, cx, Icon } from '@manakind/ui-core';
 import { GoalCategories } from '../goal-categories';
+import '../leading-slot.css';
 import './focus-item.css';
 const KIND_LABELS = {
     action: 'Action',
@@ -34,6 +35,6 @@ export function FocusItem({ kind, title, kindIcon, details = [], categories = []
     const handleToggle = () => onFocusedChange?.(!focused);
     const actionList = isOutcome && actions.length > 0 ? (_jsx("ul", { className: "mui-focus-item__actions", "aria-label": `Open actions for ${title}`, children: actions.map((action) => (_jsx("li", { className: "mui-focus-item__action", children: action.title }, action.id))) })) : null;
     const toggle = onFocusedChange ? (_jsx(Button, { className: "mui-focus-item__toggle", variant: focused ? 'primary' : 'secondary', size: "sm", leadingIcon: focused ? focusedIcon : focusIcon, "aria-pressed": focused, "aria-label": `Focus ${title}`, onClick: handleToggle, children: "Focus" })) : null;
-    return (_jsxs("li", { ...listItemProps, className: cx('mui-focus-item', className), children: [leading && _jsx("div", { className: "mui-focus-item__leading", children: leading }), _jsx(Card, { className: "mui-focus-item__card", children: _jsxs("div", { className: "mui-focus-item__row", children: [_jsxs("div", { className: "mui-focus-item__main", children: [_jsx(CardTitle, { as: titleAs, className: "mui-focus-item__title", children: title }), _jsxs("p", { className: "mui-focus-item__details", children: [_jsxs("span", { className: "mui-focus-item__kind", children: [kindIcon && _jsx(Icon, { source: kindIcon, size: "sm", decorative: true }), KIND_LABELS[kind]] }), facts.map((fact) => (_jsx("span", { className: "mui-focus-item__detail", children: fact }, fact)))] }), actionList] }), _jsx(GoalCategories, { className: "mui-focus-item__categories", categories: categories }), toggle, controls && _jsx("div", { className: "mui-focus-item__controls", children: controls })] }) }), children] }));
+    return (_jsxs("li", { ...listItemProps, className: cx('mui-leading-slot', 'mui-focus-item', className), children: [leading && (_jsx("div", { className: "mui-leading-slot__leading mui-focus-item__leading", children: leading })), _jsx(Card, { className: "mui-leading-slot__card mui-focus-item__card", children: _jsxs("div", { className: "mui-focus-item__row", children: [_jsxs("div", { className: "mui-focus-item__main", children: [_jsx(CardTitle, { as: titleAs, className: "mui-focus-item__title", children: title }), _jsxs("p", { className: "mui-focus-item__details", children: [_jsxs("span", { className: "mui-focus-item__kind", children: [kindIcon && _jsx(Icon, { source: kindIcon, size: "sm", decorative: true }), KIND_LABELS[kind]] }), facts.map((fact) => (_jsx("span", { className: "mui-focus-item__detail", children: fact }, fact)))] }), actionList] }), _jsx(GoalCategories, { className: "mui-focus-item__categories", categories: categories }), toggle, controls && _jsx("div", { className: "mui-focus-item__controls", children: controls })] }) }), children] }));
 }
 //# sourceMappingURL=focus-item.js.map

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":"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"}
+{"version":3,"file":"focus-item.js","sourceRoot":"","sources":["../../src/focus-item/focus-item.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -20,4 +20,5 @@ export * from './goal-list';
 export * from './goal-list-item';
 export * from './goal-status-menu';
 export * from './goal-tab-trigger';
+export * from './outcome-item';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}

package/dist/index.js

@@ -20,4 +20,5 @@ export * from './goal-list';
 export * from './goal-list-item';
 export * from './goal-status-menu';
 export * from './goal-tab-trigger';
+export * from './outcome-item';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}

package/dist/leading-slot.css

@@ -0,0 +1,30 @@
+@layer components {
+  /*
+   * A list row whose product's placing controls (a ReorderControl) stand
+   * before its card, outside it and centred against it, with a message passed
+   * as children kept under the card. The card becomes the container the row's
+   * narrow layout measures, so the row collapses by the width inside the card
+   * (its padding excluded) rather than by the whole row, controls included.
+   * Shared by ActionItem, FocusItem and OutcomeItem: each row is a one-column
+   * grid naming its own container on both the row and the card, and only the
+   * card's container type moves here.
+   */
+  .mui-leading-slot:has(> .mui-leading-slot__leading) {
+    container-type: normal;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: var(--semantic-space-gap);
+
+    & > :not(.mui-leading-slot__leading) {
+      grid-column: 2;
+    }
+
+    & > .mui-leading-slot__card {
+      container-type: inline-size;
+    }
+  }
+
+  .mui-leading-slot > .mui-leading-slot__leading {
+    grid-row: 1;
+    align-self: center;
+  }
+}

package/dist/leading-slot.css.d.ts

@@ -0,0 +1,2 @@
+/* AUTOGENERATED: types for the stylesheet beside it. */
+export {};

package/dist/outcome-item/index.d.ts

@@ -0,0 +1,3 @@
+export type { OutcomeItemProps } from './outcome-item';
+export { OutcomeItem } from './outcome-item';
+//# sourceMappingURL=index.d.ts.map

package/dist/outcome-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/outcome-item/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/outcome-item/index.js

@@ -0,0 +1,2 @@
+export { OutcomeItem } from './outcome-item';
+//# sourceMappingURL=index.js.map

package/dist/outcome-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/outcome-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/outcome-item/outcome-item.css

@@ -0,0 +1,139 @@
+@layer components {
+  .mui-outcome-item {
+    /* The row lays out by its own width, as ActionItem does. */
+    container: mui-outcome-item / inline-size;
+
+    /* What the body is indented by: the toggle's column and the gap after it. */
+    --mui-outcome-item-indent: calc(
+      var(--ds-button-size-md-icon-only-size) +
+      var(--semantic-space-gap-relaxed)
+    );
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--semantic-space-gap-tight);
+    overflow-wrap: anywhere;
+
+    /* A step above ActionItem's title, so the outcome heads the actions under it. */
+    & .mui-outcome-item__card {
+      container-name: mui-outcome-item;
+      --ds-card-padding: var(--semantic-space-padding);
+      --ds-card-title-font-size: var(--primitives-font-size-lg);
+      --ds-card-title-font-weight: var(--primitives-font-weight-semibold);
+    }
+
+    /* Toggle, main, controls, in a flex row as on ActionItem: absent controls leave no gap. */
+    & .mui-outcome-item__header {
+      display: flex;
+      align-items: start;
+      gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
+    }
+
+    & .mui-outcome-item__main {
+      display: flex;
+      flex: 1 1 0;
+      flex-direction: column;
+      gap: var(--semantic-space-gap);
+      min-width: 0;
+    }
+
+    /* Centred on the title's first line, as the facts start under it. */
+    & .mui-outcome-item__title {
+      min-height: var(--ds-button-size-md-icon-only-size);
+      display: flex;
+      align-items: center;
+    }
+
+    & .mui-outcome-item__details {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
+      margin: 0;
+      color: var(--semantic-color-text-muted);
+      font-size: var(--primitives-font-size-xs);
+    }
+
+    /*
+     * A glyph is part of its label, not a neighbour: the two keep one line,
+     * and a label too long for the row breaks beside its glyph.
+     */
+    & .mui-outcome-item__detail {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--semantic-space-gap-tight);
+      max-width: 100%;
+    }
+
+    & .mui-outcome-item__detail-icon {
+      flex: none;
+    }
+
+    & .mui-outcome-item__detail-label {
+      min-width: 0;
+    }
+
+    & .mui-outcome-item__kind {
+      color: var(--semantic-color-text-default);
+      font-weight: var(--primitives-font-weight-semibold);
+    }
+
+    & .mui-outcome-item__kind-icon {
+      color: var(--semantic-color-action-primary-strong);
+    }
+
+    & .mui-outcome-item__controls {
+      display: flex;
+      flex: 0 1 auto;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-end;
+      gap: var(--semantic-space-gap);
+      max-width: 40%;
+    }
+
+    /* The actions sit under the title, ruled off from the header. */
+    & .mui-outcome-item__body {
+      margin-inline-start: var(--mui-outcome-item-indent);
+      padding-block-start: var(--semantic-space-gap);
+      border-block-start: 1px solid var(--semantic-color-border-subtle);
+      color: var(--semantic-color-text-muted);
+      font-size: var(--primitives-font-size-sm);
+    }
+
+    /*
+     * Narrow: the toggle and the title keep the first line; the details and
+     * categories follow under the title, the controls close the header at
+     * its end, and the body takes the card's full width.
+     */
+    @container mui-outcome-item (max-width: 36rem) {
+      & .mui-outcome-item__header {
+        flex-wrap: wrap;
+        row-gap: var(--semantic-space-gap);
+      }
+
+      & .mui-outcome-item__main {
+        display: contents;
+      }
+
+      & .mui-outcome-item__title {
+        flex: 1 1 0;
+        min-width: 0;
+      }
+
+      & .mui-outcome-item__details,
+      & .mui-outcome-item__categories {
+        flex: 0 0 calc(100% - var(--mui-outcome-item-indent));
+        margin-inline-start: var(--mui-outcome-item-indent);
+      }
+
+      & .mui-outcome-item__controls {
+        max-width: 100%;
+        margin-inline-start: auto;
+      }
+
+      & .mui-outcome-item__body {
+        margin-inline-start: 0;
+      }
+    }
+  }
+}

package/dist/outcome-item/outcome-item.css.d.ts

@@ -0,0 +1,2 @@
+/* AUTOGENERATED: types for the stylesheet beside it. */
+export {};

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

@@ -0,0 +1,77 @@
+import { type IconSource } from '@manakind/ui-core';
+import { type ComponentProps, type ReactNode } from 'react';
+import type { ActionItemDetail } from '../action-item';
+import { type GoalCategory } from '../goal-categories';
+import '../leading-slot.css';
+import './outcome-item.css';
+export interface OutcomeItemProps extends Omit<ComponentProps<'li'>, 'title' | 'children' | 'className'> {
+    /** The outcome. Rendered as the row's heading, a step larger than an `ActionItem`'s title. */
+    title: string;
+    /** Glyph beside the "Outcome" label, supplied by the product and tinted as the outcome's mark. */
+    kindIcon?: IconSource;
+    /** Facts shown after the "Outcome" label, each with an optional glyph: its project, how many actions are open. */
+    details?: ActionItemDetail[];
+    /** Categories the outcome belongs to, as dotted text. */
+    categories?: GoalCategory[];
+    /** How many categories to show before collapsing into `+N more`. Defaults to 2, as on `ActionItem`. */
+    maxVisibleCategories?: number;
+    /**
+     * The outcome's actions, shown in the body while the row is expanded: an
+     * `ActionList` of compact `ActionItem`s, or a line saying there are none.
+     * Required, since the toggle shows and hides it. Rendered as given.
+     */
+    actions: ReactNode;
+    /** Whether the body is shown. Pass with `onExpandedChange` to control it; omit to let the row hold it. */
+    expanded?: boolean;
+    /** Whether the body starts shown, when the row holds the state. Defaults to `true`. */
+    defaultExpanded?: boolean;
+    /** Called with the new state when the expand toggle is pressed. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Glyph on the expand toggle while the body is hidden, supplied by the product. */
+    collapsedIcon: IconSource;
+    /** Glyph on the toggle while the body is shown. Falls back to `collapsedIcon`. */
+    expandedIcon?: IconSource;
+    /**
+     * The product's controls that act on the outcome, placed at the header's
+     * end: a focus toggle, an edit button. They render as given; the row only
+     * places them.
+     */
+    controls?: ReactNode;
+    /**
+     * The product's controls that place this row in its list, set before the
+     * card and outside it: a vertical `ReorderControl`, as on `ActionItem`.
+     */
+    leading?: ReactNode;
+    /** Heading level for the title. Defaults to `h3`; give the actions inside the next level down. */
+    titleAs?: 'h2' | 'h3' | 'h4';
+    /** Extra class names on the `<li>`. */
+    className?: string;
+    /**
+     * A message about this outcome, shown under the card inside the same
+     * `<li>`: an `Alert` after a failed change, say.
+     */
+    children?: ReactNode;
+}
+/**
+ * One Manuia outcome as an accordion row: a header with the outcome and its
+ * controls, over a body with the actions that achieve it. Render it inside
+ * an `ActionList` or a `FocusList`, beside the `ActionItem`s it groups: it is
+ * the `<li>`.
+ *
+ * The header leads with the expand toggle, in the column where an
+ * `ActionItem` has its completion toggle, so the outcome's title lines up
+ * with the titles of the actions around it. The toggle is named "Actions for
+ * …" in both states and says which with `aria-expanded`, tied to the body by
+ * `aria-controls`. Each row opens on its own, so several can be open at once.
+ * The body stays mounted while hidden, so its rows keep their state.
+ *
+ * Wide, the header reads left to right and the body is indented under the
+ * title. Narrow, the toggle and the title share the first line, the details
+ * and categories follow under the title, the controls take a footer at the
+ * header's end, and the body takes the card's full width. With `leading`,
+ * the product's placing controls stand before the card, centred against it,
+ * and a message passed as children stays under the card. Attributes other than the props land on the `<li>`: a sortable
+ * list passes its drag library's ref and transform style there.
+ */
+export declare function OutcomeItem({ title, kindIcon, details, categories, maxVisibleCategories, actions, expanded: expandedProp, defaultExpanded, onExpandedChange, collapsedIcon, expandedIcon, controls, leading, titleAs, className, children, ...listItemProps }: OutcomeItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=outcome-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"outcome-item.d.ts","sourceRoot":"","sources":["../../src/outcome-item/outcome-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;IACtE,8FAA8F;IAC9F,KAAK,EAAE,MAAM,CAAC;IACd,kGAAkG;IAClG,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,kHAAkH;IAClH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,yDAAyD;IACzD,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,uGAAuG;IACvG,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB,0GAA0G;IAC1G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,oFAAoF;IACpF,aAAa,EAAE,UAAU,CAAC;IAC1B,kFAAkF;IAClF,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kGAAkG;IAClG,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;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,OAAY,EACZ,UAAe,EACf,oBAAwB,EACxB,OAAO,EACP,QAAQ,EAAE,YAAY,EACtB,eAAsB,EACtB,gBAAgB,EAChB,aAAa,EACb,YAA4B,EAC5B,QAAQ,EACR,OAAO,EACP,OAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,aAAa,EACjB,EAAE,gBAAgB,2CA8ElB"}

package/dist/outcome-item/outcome-item.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardTitle, cx, Icon, IconButton } from '@manakind/ui-core';
+import { useId, useState } from 'react';
+import { GoalCategories } from '../goal-categories';
+import '../leading-slot.css';
+import './outcome-item.css';
+/**
+ * One Manuia outcome as an accordion row: a header with the outcome and its
+ * controls, over a body with the actions that achieve it. Render it inside
+ * an `ActionList` or a `FocusList`, beside the `ActionItem`s it groups: it is
+ * the `<li>`.
+ *
+ * The header leads with the expand toggle, in the column where an
+ * `ActionItem` has its completion toggle, so the outcome's title lines up
+ * with the titles of the actions around it. The toggle is named "Actions for
+ * …" in both states and says which with `aria-expanded`, tied to the body by
+ * `aria-controls`. Each row opens on its own, so several can be open at once.
+ * The body stays mounted while hidden, so its rows keep their state.
+ *
+ * Wide, the header reads left to right and the body is indented under the
+ * title. Narrow, the toggle and the title share the first line, the details
+ * and categories follow under the title, the controls take a footer at the
+ * header's end, and the body takes the card's full width. With `leading`,
+ * the product's placing controls stand before the card, centred against it,
+ * and a message passed as children stays under the card. Attributes other than the props land on the `<li>`: a sortable
+ * list passes its drag library's ref and transform style there.
+ */
+export function OutcomeItem({ title, kindIcon, details = [], categories = [], maxVisibleCategories = 2, actions, expanded: expandedProp, defaultExpanded = true, onExpandedChange, collapsedIcon, expandedIcon = collapsedIcon, controls, leading, titleAs = 'h3', className, children, ...listItemProps }) {
+    const bodyId = useId();
+    const [ownExpanded, setOwnExpanded] = useState(defaultExpanded);
+    const expanded = expandedProp ?? ownExpanded;
+    const toggleExpanded = () => {
+        setOwnExpanded(!expanded);
+        onExpandedChange?.(!expanded);
+    };
+    /* Keyed by label and rank among equal labels, as on `ActionItem`. */
+    const seen = new Map();
+    const detailRows = details.map((detail) => {
+        const rank = seen.get(detail.label) ?? 0;
+        seen.set(detail.label, rank + 1);
+        return (_jsxs("span", { className: "mui-outcome-item__detail", children: [detail.icon && (_jsx(Icon, { source: detail.icon, size: "sm", decorative: true, className: "mui-outcome-item__detail-icon" })), _jsx("span", { className: "mui-outcome-item__detail-label", children: detail.label })] }, `${detail.label}-${rank}`));
+    });
+    return (_jsxs("li", { ...listItemProps, className: cx('mui-leading-slot', 'mui-outcome-item', className), children: [leading && (_jsx("div", { className: "mui-leading-slot__leading mui-outcome-item__leading", children: leading })), _jsxs(Card, { className: "mui-leading-slot__card mui-outcome-item__card", children: [_jsxs("div", { className: "mui-outcome-item__header", children: [_jsx(IconButton, { className: "mui-outcome-item__toggle", variant: "tertiary", icon: expanded ? expandedIcon : collapsedIcon, "aria-expanded": expanded, "aria-controls": bodyId, "aria-label": `Actions for ${title}`, onClick: toggleExpanded }), _jsxs("div", { className: "mui-outcome-item__main", children: [_jsx(CardTitle, { as: titleAs, className: "mui-outcome-item__title", children: title }), _jsxs("p", { className: "mui-outcome-item__details", children: [_jsxs("span", { className: "mui-outcome-item__detail mui-outcome-item__kind", children: [kindIcon && (_jsx(Icon, { source: kindIcon, size: "sm", decorative: true, className: "mui-outcome-item__detail-icon mui-outcome-item__kind-icon" })), _jsx("span", { className: "mui-outcome-item__detail-label", children: "Outcome" })] }), detailRows] }), _jsx(GoalCategories, { className: "mui-outcome-item__categories", categories: categories, maxVisible: maxVisibleCategories })] }), controls && _jsx("div", { className: "mui-outcome-item__controls", children: controls })] }), _jsx("div", { id: bodyId, className: "mui-outcome-item__body", hidden: !expanded, children: actions })] }), children] }));
+}
+//# sourceMappingURL=outcome-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"outcome-item.js","sourceRoot":"","sources":["../../src/outcome-item/outcome-item.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manakind/manuia-ui",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -37,7 +37,7 @@
     "vr": "playwright test"
   },
   "dependencies": {
-    "@manakind/manuia-tokens": "0.18.0",
+    "@manakind/manuia-tokens": "0.19.0",
     "@manakind/ui-core": "0.19.0"
   },
   "peerDependencies": {