@manakind/manuia-ui 0.22.0 → 0.24.0

package/dist/goal-categories/goal-categories.js.map

@@ -1 +1 @@
-{"version":3,"file":"goal-categories.js","sourceRoot":"","sources":["../../src/goal-categories/goal-categories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,uBAAuB,CAAC;AAuC/B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAuB;IACvF,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzC,uEAAuE;IACvE,4EAA4E;IAC5E,sEAAsE;IACtE,yEAAyE;IACzE,6EAA6E;IAC7E,wEAAwE;IACxE,sEAAsE;IACtE,wEAAwE;IACxE,4EAA4E;IAC5E,4EAA4E;IAC5E,OAAO;IACP,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC;QACvC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAoB,CAAC,EAAE,CAAC,CAAC;QAC/C,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,OAAO,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IAC9E,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC;IAEnF,OAAO,CACL,cAAI,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,aAChD,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;gBACxB,MAAM,GAAG,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACtC,OAAO,CACL,cAEE,SAAS,EAAC,2BAA2B,EACrC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAE,EAAE,qBAAqB,EAAE,GAAG,EAAoB,CAAC,CAAC,CAAC,SAAS,aAE1E,eAAM,SAAS,EAAC,0BAA0B,iBAAa,MAAM,GAAG,EAC/D,QAAQ,CAAC,IAAI,KALT,QAAQ,CAAC,EAAE,CAMb,CACN,CAAC;YACJ,CAAC,CAAC,EACD,SAAS,GAAG,CAAC,IAAI,CAChB,cAAI,SAAS,EAAC,+DAA+D,kBACzE,SAAS,aACR,CACN,IACE,CACN,CAAC;AACJ,CAAC"}
+{"version":3,"file":"goal-categories.js","sourceRoot":"","sources":["../../src/goal-categories/goal-categories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,uBAAuB,CAAC;AAyC/B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAuB;IACvF,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzC,uEAAuE;IACvE,4EAA4E;IAC5E,sEAAsE;IACtE,yEAAyE;IACzE,6EAA6E;IAC7E,wEAAwE;IACxE,sEAAsE;IACtE,wEAAwE;IACxE,4EAA4E;IAC5E,4EAA4E;IAC5E,OAAO;IACP,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC;QACvC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAoB,CAAC,EAAE,CAAC,CAAC;QAC/C,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,OAAO,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IAC9E,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC;IAEnF,OAAO,CACL,cAAI,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,aAChD,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACzB,aAAsB,SAAS,EAAC,2BAA2B,YACzD,KAAC,aAAa,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,GAAI,IAD3E,QAAQ,CAAC,EAAE,CAEf,CACN,CAAC,EACD,SAAS,GAAG,CAAC,IAAI,CAChB,cAAI,SAAS,EAAC,+DAA+D,kBACzE,SAAS,aACR,CACN,IACE,CACN,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * from '@manakind/ui-core';
 export * from './action-item';
 export * from './action-list';
 export * from './category-card';
+export * from './category-label';
 export * from './focus-item';
 export * from './focus-list';
 export * from './goal-card';
@@ -20,5 +21,6 @@ export * from './goal-list';
 export * from './goal-list-item';
 export * from './goal-status-menu';
 export * from './goal-tab-trigger';
+export * from './milestone-timeline';
 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;AACnC,cAAc,gBAAgB,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,kBAAkB,CAAC;AACjC,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,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC"}

package/dist/index.js

@@ -12,6 +12,7 @@ export * from '@manakind/ui-core';
 export * from './action-item';
 export * from './action-list';
 export * from './category-card';
+export * from './category-label';
 export * from './focus-item';
 export * from './focus-list';
 export * from './goal-card';
@@ -20,5 +21,6 @@ export * from './goal-list';
 export * from './goal-list-item';
 export * from './goal-status-menu';
 export * from './goal-tab-trigger';
+export * from './milestone-timeline';
 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;AACnC,cAAc,gBAAgB,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,kBAAkB,CAAC;AACjC,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,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC"}

package/dist/item-accent.css

@@ -0,0 +1,33 @@
+@layer components {
+  /*
+   * A list row's category colour as a bar along the card's leading edge, for
+   * scanning a long mixed list. `--mui-item-accent` is set on the row from
+   * the product's colour, validated like a category's.
+   *
+   * The bar spans only the straight part of the edge: inset by the card's
+   * radius at both ends, so it never bends round a corner the way a
+   * `border-inline-start` does. It starts on the card's 1px border so it reads
+   * as the edge itself, and takes no pointer events. A compact row has no
+   * inline padding to cover, so it takes the bar's width and a gap as padding.
+   */
+  .mui-item-accent > .mui-leading-slot__card {
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset-block: var(--ds-card-radius);
+      inset-inline-start: -1px;
+      width: var(--component-category-label-accent-width);
+      background-color: var(--mui-item-accent);
+      pointer-events: none;
+    }
+  }
+
+  .mui-item-accent.mui-action-item--compact > .mui-leading-slot__card {
+    padding-inline-start: calc(
+      var(--component-category-label-accent-width) +
+      var(--semantic-space-gap-tight)
+    );
+  }
+}

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

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

package/dist/item-accent.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from 'react';
+/**
+ * A list row's accent: its class and its style with the colour added,
+ * decided by one validation so the two never disagree (a class without the
+ * colour would paint a transparent bar). Keeps whatever style the product
+ * passed, such as a sortable list's transform. An invalid colour leaves the
+ * row as it was.
+ */
+export declare function accentProps(color: string | undefined, style: CSSProperties | undefined): {
+    className?: string;
+    style?: CSSProperties;
+};
+//# sourceMappingURL=item-accent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item-accent.d.ts","sourceRoot":"","sources":["../src/item-accent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,KAAK,EAAE,aAAa,GAAG,SAAS,GAC/B;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,CAO/C"}

package/dist/item-accent.js

@@ -0,0 +1,18 @@
+import { safeColor } from './css-color';
+/**
+ * A list row's accent: its class and its style with the colour added,
+ * decided by one validation so the two never disagree (a class without the
+ * colour would paint a transparent bar). Keeps whatever style the product
+ * passed, such as a sortable list's transform. An invalid colour leaves the
+ * row as it was.
+ */
+export function accentProps(color, style) {
+    const accent = safeColor(color);
+    if (!accent)
+        return { style };
+    return {
+        className: 'mui-item-accent',
+        style: { ...style, '--mui-item-accent': accent },
+    };
+}
+//# sourceMappingURL=item-accent.js.map

package/dist/item-accent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-accent.js","sourceRoot":"","sources":["../src/item-accent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CACzB,KAAyB,EACzB,KAAgC;IAEhC,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAC9B,OAAO;QACL,SAAS,EAAE,iBAAiB;QAC5B,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,mBAAmB,EAAE,MAAM,EAAmB;KAClE,CAAC;AACJ,CAAC"}

package/dist/milestone-timeline/index.d.ts

@@ -0,0 +1,3 @@
+export type { MilestoneTimelineEnd, MilestoneTimelineItem, MilestoneTimelineProps, MilestoneTimelineStart, } from './milestone-timeline';
+export { MilestoneTimeline } from './milestone-timeline';
+//# sourceMappingURL=index.d.ts.map

package/dist/milestone-timeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/milestone-timeline/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/milestone-timeline/index.js

@@ -0,0 +1,2 @@
+export { MilestoneTimeline } from './milestone-timeline';
+//# sourceMappingURL=index.js.map

package/dist/milestone-timeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/milestone-timeline/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/milestone-timeline/milestone-timeline.css

@@ -0,0 +1,187 @@
+@layer components {
+  .mui-milestone-timeline {
+    display: grid;
+    gap: var(--semantic-space-gap);
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  /* Toggle, title and count share a line while they fit; the count wraps under them when they don't. */
+  .mui-milestone-timeline__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--semantic-space-gap-tight);
+    min-width: 0;
+  }
+
+  .mui-milestone-timeline__title {
+    margin: 0;
+  }
+
+  .mui-milestone-timeline__summary {
+    margin-inline-start: auto;
+    color: var(--semantic-color-text-muted);
+    font-size: var(--primitives-font-size-sm);
+  }
+
+  /*
+   * The line: one column for the points, drawn down its centre behind them,
+   * and the text beside. It runs from the first point's centre to the last
+   * one's, so it never sticks out past the start or the end.
+   */
+  .mui-milestone-timeline__list {
+    --_marker: var(--component-milestone-timeline-marker-size);
+    position: relative;
+    display: grid;
+    gap: var(--component-milestone-timeline-row-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset-block: calc(var(--_marker) / 2);
+      inset-inline-start: calc(
+        var(--_marker) /
+        2 -
+        var(--component-milestone-timeline-line-width) /
+        2
+      );
+      width: var(--component-milestone-timeline-line-width);
+      background-color: var(--component-milestone-timeline-line);
+    }
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .mui-milestone-timeline__point {
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--_marker) minmax(0, 1fr) auto;
+    align-items: start;
+    column-gap: var(--semantic-space-gap);
+    min-width: 0;
+  }
+
+  .mui-milestone-timeline__marker {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_marker);
+    height: var(--_marker);
+    border: var(--component-milestone-timeline-line-width) solid
+      var(--component-milestone-timeline-marker-border);
+    border-radius: var(--semantic-radius-pill);
+    background-color: var(--component-milestone-timeline-marker-bg);
+  }
+
+  /* The start and end are smaller, solid ends of the line, not milestones. */
+  .mui-milestone-timeline__point--start .mui-milestone-timeline__marker,
+  .mui-milestone-timeline__point--end .mui-milestone-timeline__marker {
+    width: calc(var(--_marker) / 2);
+    height: calc(var(--_marker) / 2);
+    margin: calc(var(--_marker) / 4);
+    border: 0;
+    background-color: var(--component-milestone-timeline-marker-border);
+  }
+
+  .mui-milestone-timeline__point--completed .mui-milestone-timeline__marker {
+    border-color: var(--component-milestone-timeline-completed-bg);
+    background-color: var(--component-milestone-timeline-completed-bg);
+    color: var(--component-milestone-timeline-completed-glyph);
+  }
+
+  .mui-milestone-timeline__point--placeholder .mui-milestone-timeline__marker {
+    border-style: dashed;
+  }
+
+  .mui-milestone-timeline__text {
+    display: grid;
+    gap: var(--semantic-space-gap-tight);
+    min-width: 0;
+    /* Lines the first line of text up with the point's centre. */
+    min-height: var(--_marker);
+    align-content: start;
+    overflow-wrap: anywhere;
+  }
+
+  .mui-milestone-timeline__name,
+  .mui-milestone-timeline__end-label {
+    color: var(--semantic-color-text-default);
+    font-size: var(--primitives-font-size-md);
+    line-height: var(--_marker);
+  }
+
+  .mui-milestone-timeline__end-label {
+    color: var(--semantic-color-text-muted);
+  }
+
+  .mui-milestone-timeline__point--completed .mui-milestone-timeline__name {
+    color: var(--semantic-color-text-muted);
+    text-decoration: line-through;
+  }
+
+  .mui-milestone-timeline__date {
+    color: var(--semantic-color-text-muted);
+    font-size: var(--primitives-font-size-sm);
+  }
+
+  .mui-milestone-timeline__point--overdue {
+    & .mui-milestone-timeline__marker {
+      border-color: var(--component-milestone-timeline-overdue);
+    }
+
+    & .mui-milestone-timeline__date {
+      color: var(--component-milestone-timeline-overdue-text);
+    }
+  }
+
+  /*
+   * The controls and the add control sit in a box the point's height, centred
+   * in it: whatever size the product's buttons are, they overflow it evenly
+   * and so stay centred on the point.
+   */
+  .mui-milestone-timeline__controls {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--semantic-space-gap-tight);
+    height: var(--_marker);
+  }
+
+  /*
+   * The add control sits on the line in the points' column, its button
+   * centred on the line however large the product makes it.
+   */
+  .mui-milestone-timeline__point--add {
+    grid-template-columns: var(--_marker) minmax(0, 1fr);
+  }
+
+  .mui-milestone-timeline__add {
+    grid-column: 1;
+    justify-self: center;
+    display: inline-flex;
+    align-items: center;
+    height: var(--_marker);
+    position: relative;
+    z-index: 1;
+  }
+
+  .mui-milestone-timeline__add-label {
+    color: var(--semantic-color-text-muted);
+    font-size: var(--primitives-font-size-md);
+    line-height: var(--_marker);
+  }
+
+  .mui-milestone-timeline__placeholder-text {
+    align-self: center;
+    width: 40%;
+    height: var(--component-milestone-timeline-placeholder-height);
+    border-radius: var(--semantic-radius-pill);
+    background-color: var(--semantic-color-surface-muted);
+  }
+}

package/dist/milestone-timeline/milestone-timeline.css.d.ts

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

package/dist/milestone-timeline/milestone-timeline.d.ts

@@ -0,0 +1,100 @@
+import { type IconSource } from '@manakind/ui-core';
+import { type ReactNode } from 'react';
+import './milestone-timeline.css';
+/** One milestone on the line. */
+export interface MilestoneTimelineItem {
+    /** Stable key. */
+    id: string;
+    /** What the milestone is. */
+    name: string;
+    /** Pre-formatted due date, such as "15.11.2026". */
+    date: string;
+    /** Done: the point is filled with `completedIcon` and the name reads as done. */
+    completed: boolean;
+    /** Past its date and not done: the point and the date take the warning tone. */
+    overdue?: boolean;
+    /**
+     * The product's controls for this milestone, at the end of its row: a
+     * completion toggle, edit, delete. Rendered as given.
+     */
+    controls?: ReactNode;
+}
+/** The line's first point: where the work starts. */
+export interface MilestoneTimelineStart {
+    /** Such as "Start". */
+    label: string;
+    /** Pre-formatted date the work started, when it has one. */
+    date?: string;
+}
+/** The line's last point: what the work ends in. */
+export interface MilestoneTimelineEnd {
+    /** Such as "Done". */
+    label: string;
+}
+export interface MilestoneTimelineProps {
+    /** The section's heading. Defaults to "Milestones". */
+    title?: string;
+    /** Heading level for the title; match the surrounding outline. Defaults to `h2`. */
+    titleAs?: 'h2' | 'h3' | 'h4';
+    /** The line's first point. */
+    start: MilestoneTimelineStart;
+    /** The line's last point. */
+    end: MilestoneTimelineEnd;
+    /** The milestones, in date order. */
+    milestones: MilestoneTimelineItem[];
+    /**
+     * The product's control that adds a milestone, drawn as a point on the line
+     * after the last milestone: a "+" `IconButton`, say, that opens its form.
+     * Leave it out where milestones cannot be added (at a limit).
+     */
+    addControl?: ReactNode;
+    /**
+     * Text beside the add control, saying what it adds: "Add milestone". It is
+     * the control's visible caption, hidden from assistive technology, so the
+     * control's accessible name must contain it (a speech user says what they
+     * see).
+     */
+    addLabel?: string;
+    /**
+     * How many dashed placeholder points stand on the line while there are no
+     * milestones, showing where they go. Defaults to 2; 0 shows none; at most
+     * `MAX_PLACEHOLDERS`.
+     */
+    placeholders?: number;
+    /** Glyph in a completed milestone's point, supplied by the product. */
+    completedIcon?: IconSource;
+    /** Whether the line is shown. Pass with `onExpandedChange` to control it; omit to let the section hold it. */
+    expanded?: boolean;
+    /** Whether the line starts shown, when the section holds the state. Defaults to `true`. */
+    defaultExpanded?: boolean;
+    /** Called with the new state when the toggle is pressed. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Glyph on the toggle while the line is hidden. */
+    collapsedIcon: IconSource;
+    /** Glyph on the toggle while the line is shown. Falls back to `collapsedIcon`. */
+    expandedIcon?: IconSource;
+    /** Extra class names on the `<section>`. */
+    className?: string;
+}
+/** The most placeholder points the line shows: enough to teach, not a list. */
+export declare const MAX_PLACEHOLDERS = 5;
+/**
+ * A project's milestones as a vertical line from its start to its end, each
+ * milestone a point with its name, date and controls beside it, so every
+ * milestone reads without hovering. The product's add control stands on the
+ * line as a point of its own; with no milestones, dashed placeholder points
+ * show where they will go.
+ *
+ * The whole line folds away behind a toggle in the header, named after the
+ * section's title and saying whether it is open with `aria-expanded`, as
+ * OutcomeItem's toggle does, with a count of how many are done beside the
+ * title so a folded line still says where the project stands. The list stays
+ * mounted while hidden.
+ *
+ * @remarks
+ * The line is an ordered list: a screen reader hears the start, each
+ * milestone with its date and whether it is done, and the end, in order.
+ * The placeholder points are decoration and are hidden from it.
+ */
+export declare function MilestoneTimeline({ title, titleAs, start, end, milestones, addControl, addLabel, placeholders, completedIcon, expanded: expandedProp, defaultExpanded, onExpandedChange, collapsedIcon, expandedIcon, className, }: MilestoneTimelineProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=milestone-timeline.d.ts.map

package/dist/milestone-timeline/milestone-timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"milestone-timeline.d.ts","sourceRoot":"","sources":["../../src/milestone-timeline/milestone-timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmC,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACrF,OAAO,EAAE,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AACxD,OAAO,0BAA0B,CAAC;AAElC,iCAAiC;AACjC,MAAM,WAAW,qBAAqB;IACpC,kBAAkB;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,iFAAiF;IACjF,SAAS,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,qDAAqD;AACrD,MAAM,WAAW,sBAAsB;IACrC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,oDAAoD;AACpD,MAAM,WAAW,oBAAoB;IACnC,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,8BAA8B;IAC9B,KAAK,EAAE,sBAAsB,CAAC;IAC9B,6BAA6B;IAC7B,GAAG,EAAE,oBAAoB,CAAC;IAC1B,qCAAqC;IACrC,UAAU,EAAE,qBAAqB,EAAE,CAAC;IACpC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,oDAAoD;IACpD,aAAa,EAAE,UAAU,CAAC;IAC1B,kFAAkF;IAClF,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,+EAA+E;AAC/E,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAoB,EACpB,OAAc,EACd,KAAK,EACL,GAAG,EACH,UAAU,EACV,UAAU,EACV,QAAQ,EACR,YAAgB,EAChB,aAAa,EACb,QAAQ,EAAE,YAAY,EACtB,eAAsB,EACtB,gBAAgB,EAChB,aAAa,EACb,YAA4B,EAC5B,SAAS,GACV,EAAE,sBAAsB,2CAsGxB"}

package/dist/milestone-timeline/milestone-timeline.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardTitle, cx, Icon, IconButton } from '@manakind/ui-core';
+import { useId, useState } from 'react';
+import './milestone-timeline.css';
+/** The most placeholder points the line shows: enough to teach, not a list. */
+export const MAX_PLACEHOLDERS = 5;
+/**
+ * A project's milestones as a vertical line from its start to its end, each
+ * milestone a point with its name, date and controls beside it, so every
+ * milestone reads without hovering. The product's add control stands on the
+ * line as a point of its own; with no milestones, dashed placeholder points
+ * show where they will go.
+ *
+ * The whole line folds away behind a toggle in the header, named after the
+ * section's title and saying whether it is open with `aria-expanded`, as
+ * OutcomeItem's toggle does, with a count of how many are done beside the
+ * title so a folded line still says where the project stands. The list stays
+ * mounted while hidden.
+ *
+ * @remarks
+ * The line is an ordered list: a screen reader hears the start, each
+ * milestone with its date and whether it is done, and the end, in order.
+ * The placeholder points are decoration and are hidden from it.
+ */
+export function MilestoneTimeline({ title = 'Milestones', titleAs = 'h2', start, end, milestones, addControl, addLabel, placeholders = 2, completedIcon, expanded: expandedProp, defaultExpanded = true, onExpandedChange, collapsedIcon, expandedIcon = collapsedIcon, className, }) {
+    const listId = useId();
+    const [ownExpanded, setOwnExpanded] = useState(defaultExpanded);
+    const expanded = expandedProp ?? ownExpanded;
+    const toggle = () => {
+        setOwnExpanded(!expanded);
+        onExpandedChange?.(!expanded);
+    };
+    const done = milestones.filter((milestone) => milestone.completed).length;
+    const summary = milestones.length > 0 ? `${done} of ${milestones.length} done` : 'None yet';
+    const placeholderCount = milestones.length === 0 && Number.isFinite(placeholders)
+        ? Math.min(Math.max(Math.trunc(placeholders), 0), MAX_PLACEHOLDERS)
+        : 0;
+    const endPoint = (point, edge) => (_jsxs("li", { className: cx('mui-milestone-timeline__point', `mui-milestone-timeline__point--${edge}`), children: [_jsx("span", { className: "mui-milestone-timeline__marker", "aria-hidden": "true" }), _jsxs("span", { className: "mui-milestone-timeline__text", children: [_jsx("span", { className: "mui-milestone-timeline__end-label", children: point.label }), point.date && _jsx("span", { className: "mui-milestone-timeline__date", children: point.date })] })] }));
+    const milestonePoint = (milestone) => {
+        const overdue = milestone.overdue === true && !milestone.completed;
+        return (_jsxs("li", { className: cx('mui-milestone-timeline__point', 'mui-milestone-timeline__point--milestone', milestone.completed && 'mui-milestone-timeline__point--completed', overdue && 'mui-milestone-timeline__point--overdue'), children: [_jsx("span", { className: "mui-milestone-timeline__marker", "aria-hidden": "true", children: milestone.completed && completedIcon && (_jsx(Icon, { source: completedIcon, size: "sm", decorative: true })) }), _jsxs("span", { className: "mui-milestone-timeline__text", children: [_jsx("span", { className: "mui-milestone-timeline__name", children: milestone.name }), _jsxs("span", { className: "mui-milestone-timeline__date", children: [milestone.date, milestone.completed && _jsx("span", { className: "mui-milestone-timeline__status", children: " \u00B7 Done" }), overdue && _jsx("span", { className: "mui-milestone-timeline__status", children: " \u00B7 Overdue" })] })] }), milestone.controls && (_jsx("span", { className: "mui-milestone-timeline__controls", children: milestone.controls }))] }, milestone.id));
+    };
+    return (_jsxs("section", { className: cx('mui-milestone-timeline', className), children: [_jsxs("div", { className: "mui-milestone-timeline__header", children: [_jsx(IconButton, { variant: "tertiary", size: "sm", icon: expanded ? expandedIcon : collapsedIcon, "aria-expanded": expanded, "aria-controls": listId, "aria-label": title, onClick: toggle }), _jsx(CardTitle, { as: titleAs, className: "mui-milestone-timeline__title", children: title }), _jsx("span", { className: "mui-milestone-timeline__summary", children: summary })] }), _jsxs("ol", { id: listId, className: "mui-milestone-timeline__list", hidden: !expanded, children: [endPoint(start, 'start'), milestones.map(milestonePoint), addControl && (_jsxs("li", { className: "mui-milestone-timeline__point mui-milestone-timeline__point--add", children: [_jsx("span", { className: "mui-milestone-timeline__add", children: addControl }), addLabel && (_jsx("span", { className: "mui-milestone-timeline__add-label", "aria-hidden": "true", children: addLabel }))] })), Array.from({ length: placeholderCount }, (_, index) => (_jsxs("li", { "aria-hidden": "true", className: "mui-milestone-timeline__point mui-milestone-timeline__point--placeholder", children: [_jsx("span", { className: "mui-milestone-timeline__marker" }), _jsx("span", { className: "mui-milestone-timeline__placeholder-text" })] }, index))), endPoint(end, 'end')] })] }));
+}
+//# sourceMappingURL=milestone-timeline.js.map

package/dist/milestone-timeline/milestone-timeline.js.map

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

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

@@ -115,6 +115,13 @@
         display: contents;
       }
 
+      /* The breadcrumb keeps its own line above the toggle and title, under the title's column. */
+      & .mui-outcome-item__eyebrow {
+        order: -1;
+        flex: 0 0 calc(100% - var(--mui-outcome-item-indent));
+        margin-inline-start: var(--mui-outcome-item-indent);
+      }
+
       & .mui-outcome-item__title {
         flex: 1 1 0;
         min-width: 0;

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

@@ -2,6 +2,7 @@ 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 '../item-accent.css';
 import '../leading-slot.css';
 import './outcome-item.css';
 export interface OutcomeItemProps extends Omit<ComponentProps<'li'>, 'title' | 'children' | 'className'> {
@@ -11,7 +12,7 @@ export interface OutcomeItemProps extends Omit<ComponentProps<'li'>, 'title' | '
     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 the outcome belongs to, each a `CategoryLabel`. */
     categories?: GoalCategory[];
     /** How many categories to show before collapsing into `+N more`. Defaults to 2, as on `ActionItem`. */
     maxVisibleCategories?: number;
@@ -44,6 +45,17 @@ export interface OutcomeItemProps extends Omit<ComponentProps<'li'>, 'title' | '
     leading?: ReactNode;
     /** Heading level for the title. Defaults to `h3`; give the actions inside the next level down. */
     titleAs?: 'h2' | 'h3' | 'h4';
+    /**
+     * Where the item lives, above its title: a `Breadcrumb` of its category,
+     * project or outcome, say. Rendered as given.
+     */
+    eyebrow?: ReactNode;
+    /**
+     * The item's category colour as a straight bar along the card's leading
+     * edge, for scanning a long mixed list. Data, not a token: validated by
+     * `safeColor` and ignored when not a colour. Leave it off a lone item.
+     */
+    accentColor?: string;
     /** Extra class names on the `<li>`. */
     className?: string;
     /**
@@ -73,5 +85,5 @@ export interface OutcomeItemProps extends Omit<ComponentProps<'li'>, 'title' | '
  * 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;
+export declare function OutcomeItem({ title, kindIcon, details, categories, maxVisibleCategories, actions, expanded: expandedProp, defaultExpanded, onExpandedChange, collapsedIcon, expandedIcon, controls, leading, titleAs, eyebrow, accentColor, 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

@@ -1 +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"}
+{"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,oBAAoB,CAAC;AAE5B,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,iEAAiE;IACjE,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;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,OAAO,EACP,WAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,aAAa,EACjB,EAAE,gBAAgB,2CAoFlB"}

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

@@ -2,6 +2,8 @@ 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 '../item-accent.css';
+import { accentProps } from '../item-accent';
 import '../leading-slot.css';
 import './outcome-item.css';
 /**
@@ -25,7 +27,7 @@ import './outcome-item.css';
  * 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 }) {
+export function OutcomeItem({ title, kindIcon, details = [], categories = [], maxVisibleCategories = 2, actions, expanded: expandedProp, defaultExpanded = true, onExpandedChange, collapsedIcon, expandedIcon = collapsedIcon, controls, leading, titleAs = 'h3', eyebrow, accentColor, className, children, ...listItemProps }) {
     const bodyId = useId();
     const [ownExpanded, setOwnExpanded] = useState(defaultExpanded);
     const expanded = expandedProp ?? ownExpanded;
@@ -40,6 +42,7 @@ export function OutcomeItem({ title, kindIcon, details = [], categories = [], ma
         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] }));
+    const accent = accentProps(accentColor, listItemProps.style);
+    return (_jsxs("li", { ...listItemProps, style: accent.style, className: cx('mui-leading-slot', 'mui-outcome-item', accent.className, 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: [eyebrow && _jsx("div", { className: "mui-outcome-item__eyebrow", children: eyebrow }), _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

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