@manakind/manuia-ui 0.14.0 → 0.16.0

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

@@ -0,0 +1,178 @@
+@layer components {
+  .mui-action-item {
+    /*
+     * The row lays out by its own width, as FocusItem does, so a list in a
+     * narrow column collapses the same way a list on a phone does.
+     */
+    container: mui-action-item / inline-size;
+
+    /*
+     * The second line sits well clear of the facts: the gap the column
+     * already holds plus this margin, 24px.
+     */
+    --mui-action-item-footer-space: var(--semantic-space-gap-relaxed);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--semantic-space-gap-tight);
+    overflow-wrap: anywhere;
+
+    & .mui-action-item__card {
+      --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);
+    }
+
+    /* A selected row carries a second border in the strong primary, as a chosen card does. */
+    &.mui-action-item--selected .mui-action-item__card {
+      --ds-card-border: var(--semantic-color-action-primary-strong);
+      box-shadow: 0 0 0 1px var(--semantic-color-action-primary-strong);
+    }
+
+    /*
+     * Toggle, main, controls, checkbox, in a flex row rather than a grid: the
+     * toggle, controls and checkbox are each optional, and an absent flex
+     * item leaves no track and no gap behind. The controls are capped so a
+     * long label in them wraps in its share instead of squeezing the title.
+     */
+    & .mui-action-item__row {
+      display: flex;
+      align-items: start;
+      gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
+    }
+
+    /*
+     * The rhythm groups the card: the title, then its facts held close
+     * together, then the controls set apart from both.
+     */
+    & .mui-action-item__main {
+      display: flex;
+      flex: 1 1 0;
+      flex-direction: column;
+      gap: var(--semantic-space-gap);
+      min-width: 0;
+    }
+
+    /* Set on what follows the title, so a title with nothing under it keeps no space. */
+    & .mui-action-item__title + :is(.mui-action-item__details, .mui-action-item__categories) {
+      margin-block-start: var(--semantic-space-gap);
+    }
+
+    &.mui-action-item--completed .mui-action-item__title {
+      --ds-card-text: var(--ds-card-text-muted);
+      text-decoration: line-through;
+    }
+
+    & .mui-action-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);
+    }
+
+    & .mui-action-item__detail {
+      display: inline-flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--semantic-space-gap-tight);
+    }
+
+    & .mui-action-item__secondary {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--semantic-space-gap);
+      margin-block-start: var(--mui-action-item-footer-space);
+    }
+
+    & .mui-action-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%;
+    }
+
+    /*
+     * 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
+     * rather than the toggle, so the text keeps one left edge. The second
+     * line and the controls make a footer across the card's full width, the
+     * controls at its end, so a phone spends no line on two icon buttons.
+     */
+    @container mui-action-item (max-width: 36rem) {
+      & .mui-action-item__row {
+        --mui-action-item-indent: 0px;
+        flex-wrap: wrap;
+        row-gap: var(--semantic-space-gap);
+      }
+
+      /*
+       * A zero-height full line ahead of everything ordered after the title's
+       * line. The title's flex basis is 0, so without it a row with no
+       * details or categories pulls the footer up beside the title. Its
+       * negative margin takes back the row gap its empty line adds.
+       */
+      & .mui-action-item__row::before {
+        content: "";
+        flex: 0 0 100%;
+        order: 1;
+        margin-block-start: calc(-1 * var(--semantic-space-gap));
+      }
+
+      & .mui-action-item__row:has(> .mui-action-item__complete) {
+        --mui-action-item-indent: calc(
+          var(--ds-button-size-md-icon-only-size) +
+          var(--semantic-space-gap-relaxed)
+        );
+      }
+
+      & .mui-action-item__main {
+        display: contents;
+      }
+
+      & .mui-action-item__title {
+        flex: 1 1 0;
+        align-self: center;
+        min-width: 0;
+      }
+
+      /* Ordered after the checkbox, which the DOM puts last, so the checkbox wraps onto the title's line. */
+      & .mui-action-item__details,
+      & .mui-action-item__categories,
+      & .mui-action-item__secondary,
+      & .mui-action-item__controls {
+        order: 1;
+        max-width: none;
+      }
+
+      /* Basis plus margin make a full line each, indented under the title. */
+      & .mui-action-item__details,
+      & .mui-action-item__categories {
+        flex: 0 0 calc(100% - var(--mui-action-item-indent));
+        margin-inline-start: var(--mui-action-item-indent);
+      }
+
+      & .mui-action-item__secondary {
+        flex: 1 1 auto;
+        align-self: center;
+      }
+
+      & .mui-action-item__controls {
+        flex: 0 1 auto;
+        align-self: center;
+        max-width: 100%;
+        margin-block-start: var(--mui-action-item-footer-space);
+        margin-inline-start: auto;
+      }
+
+      & .mui-action-item__select {
+        align-self: center;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,89 @@
+import { type BadgeVariant, type IconSource } from '@manakind/ui-core';
+import type { ComponentProps, ReactNode } from 'react';
+import { type GoalCategory } from '../goal-categories';
+import './action-item.css';
+/** One fact about the action, shown after the title: its project, outcome, effort, duration. */
+export interface ActionItemDetail {
+    /** Pre-formatted text, such as "Website relaunch" or "30 min". */
+    label: string;
+    /** Glyph before the text, supplied by the product. */
+    icon?: IconSource;
+}
+/** 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'>;
+export interface ActionItemProps extends Omit<ComponentProps<'li'>, 'title' | 'children' | 'className'> {
+    /** The action's description. Rendered as the row's heading. */
+    title: string;
+    /** Whether the action is done. Strikes the title and presses the completion toggle. */
+    completed: boolean;
+    /**
+     * Called with the new state when the completion toggle is pressed. Without
+     * it, or without `completeIcon`, the row has no toggle and the struck
+     * title alone says the action is done.
+     */
+    onCompletedChange?: (completed: boolean) => void;
+    /** Glyph on the completion toggle, supplied by the product. */
+    completeIcon?: IconSource;
+    /** Facts shown after the title, each with an optional glyph. */
+    details?: ActionItemDetail[];
+    /** Categories the action belongs to, as dotted text. */
+    categories?: GoalCategory[];
+    /** How many categories to show before collapsing into `+N more`. Defaults to 2, as on `GoalListItem`. */
+    maxVisibleCategories?: number;
+    /**
+     * A short pre-formatted status beside the details: the days it was done,
+     * or how long it has waited unscheduled. `noteTone` says how it reads.
+     */
+    note?: string;
+    /** `muted` (default) for an aside; `warning` for a note the user should act on, such as a stale action. */
+    noteTone?: ActionItemNoteTone;
+    /**
+     * Whether the row is selected for a bulk change. With `onSelectedChange`
+     * the row carries a checkbox named "Select …" and, when selected, a ring;
+     * without the handler neither is shown.
+     */
+    selected?: boolean;
+    /** Called with the new state when the selection checkbox changes. Without it the row has no checkbox. */
+    onSelectedChange?: (selected: boolean) => void;
+    /**
+     * The product's controls that act on this row, placed at its end: a focus
+     * toggle, an edit button. They render as given; the row only places them.
+     */
+    controls?: ReactNode;
+    /**
+     * The product's second line under the details: the control that
+     * schedules the action, a delete button for a stale one. Rendered as given.
+     */
+    secondary?: ReactNode;
+    /** Heading level for the title. Defaults to `h3`; match the surrounding outline. */
+    titleAs?: 'h2' | 'h3' | 'h4';
+    /** Extra class names on the `<li>`. */
+    className?: string;
+    /**
+     * A message about this action, shown under the row inside the same `<li>`:
+     * an `Alert` after a failed change, say. Kept in the item so the list's
+     * item count stays the number of actions.
+     */
+    children?: ReactNode;
+}
+/**
+ * One Manuia action as a row. Render it inside an `ActionList`: it is the
+ * `<li>`.
+ *
+ * The row leads with a round completion toggle, then the title over its
+ * details, categories and the product's second line, then the product's
+ * controls and, when the list allows a bulk change, a selection checkbox.
+ * The toggle is a pressed/unpressed button named "Complete …" in both
+ * states, so a screen reader hears the state change rather than a different
+ * control; it has no pending state, for `FocusItem`'s reason, so the product
+ * keeps its change idempotent.
+ *
+ * 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
+ * across the full width. Attributes other than the props land
+ * on the `<li>`: a virtualised list gives each row `aria-setsize` and
+ * `aria-posinset`, so the count a screen reader hears is the whole list's.
+ */
+export declare function ActionItem({ title, completed, onCompletedChange, completeIcon, details, categories, maxVisibleCategories, note, noteTone, selected, onSelectedChange, controls, secondary, titleAs, 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

@@ -0,0 +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,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,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,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;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,OAAY,EACZ,UAAe,EACf,oBAAwB,EACxB,IAAI,EACJ,QAAkB,EAClB,QAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,OAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,aAAa,EACjB,EAAE,eAAe,2CAmFjB"}

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

@@ -0,0 +1,41 @@
+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 './action-item.css';
+/**
+ * One Manuia action as a row. Render it inside an `ActionList`: it is the
+ * `<li>`.
+ *
+ * The row leads with a round completion toggle, then the title over its
+ * details, categories and the product's second line, then the product's
+ * controls and, when the list allows a bulk change, a selection checkbox.
+ * The toggle is a pressed/unpressed button named "Complete …" in both
+ * states, so a screen reader hears the state change rather than a different
+ * control; it has no pending state, for `FocusItem`'s reason, so the product
+ * keeps its change idempotent.
+ *
+ * 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
+ * across the full width. Attributes other than the props land
+ * on the `<li>`: a virtualised list gives each row `aria-setsize` and
+ * `aria-posinset`, so the count a screen reader hears is the whole list's.
+ */
+export function ActionItem({ title, completed, onCompletedChange, completeIcon, details = [], categories = [], maxVisibleCategories = 2, note, noteTone = 'muted', selected = false, onSelectedChange, controls, secondary, titleAs = 'h3', 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;
+    /*
+     * 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
+     * would collide.
+     */
+    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-action-item__detail", children: [detail.icon && _jsx(Icon, { source: detail.icon, size: "sm", decorative: true }), detail.label] }, `${detail.label}-${rank}`));
+    });
+    const detailList = details.length > 0 || note ? (_jsxs("p", { className: "mui-action-item__details", children: [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: [_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] }));
+}
+//# sourceMappingURL=action-item.js.map

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

@@ -0,0 +1 @@
+{"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

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

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

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

package/dist/action-item/index.js

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

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

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

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

@@ -0,0 +1,10 @@
+@layer components {
+  .mui-action-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--semantic-space-gap-relaxed);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react';
+import './action-list.css';
+export interface ActionListProps extends ComponentProps<'ul'> {
+    /** `ActionItem`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 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
+ * already say what it lists. Loading and empty states belong to the product,
+ * outside the list: an empty `<ul>` is a list of none. A list that renders
+ * only a window of its rows gives each `ActionItem` `aria-setsize` and
+ * `aria-posinset`, and keeps its spacers as padding on the `<ul>`, so the
+ * count stays the whole list's and no spacer becomes an item.
+ */
+export declare function ActionList({ className, children, ...props }: ActionListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=action-list.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,18 @@
+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 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
+ * already say what it lists. Loading and empty states belong to the product,
+ * outside the list: an empty `<ul>` is a list of none. A list that renders
+ * only a window of its rows gives each `ActionItem` `aria-setsize` and
+ * `aria-posinset`, and keeps its spacers as padding on the `<ul>`, so the
+ * count stays the whole list's and no spacer becomes an item.
+ */
+export function ActionList({ className, children, ...props }) {
+    return (_jsx("ul", { className: cx('mui-action-list', className), ...props, children: children }));
+}
+//# sourceMappingURL=action-list.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,3 @@
+export type { ActionListProps } from './action-list';
+export { ActionList } from './action-list';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/action-list/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/action-list/index.js

@@ -0,0 +1,2 @@
+export { ActionList } from './action-list';
+//# sourceMappingURL=index.js.map

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

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

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

@@ -104,7 +104,7 @@
       color: var(--semantic-color-text-muted);
       font-size: var(--primitives-font-size-xs);
       font-weight: var(--primitives-font-weight-semibold);
-      letter-spacing: 0.15em;
+      letter-spacing: var(--semantic-letter-spacing-label);
       line-height: var(--primitives-line-height-tight);
       text-transform: uppercase;
     }

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

@@ -35,11 +35,12 @@
       gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
     }
 
+    /* The title, then its facts and actions held close together, as on ActionItem. */
     & .mui-focus-item__main {
       grid-area: main;
       display: flex;
       flex-direction: column;
-      gap: var(--semantic-space-gap-tight);
+      gap: var(--semantic-space-gap);
       min-width: 0;
     }
 
@@ -47,11 +48,16 @@
       --ds-card-text: var(--ds-card-text-muted);
     }
 
+    /* Set on what follows the title, as on ActionItem. */
+    & .mui-focus-item__title + .mui-focus-item__details {
+      margin-block-start: var(--semantic-space-gap);
+    }
+
     & .mui-focus-item__details {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      gap: var(--semantic-space-gap-tight) var(--semantic-space-gap-relaxed);
+      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);
@@ -68,11 +74,11 @@
     & .mui-focus-item__actions {
       display: flex;
       flex-direction: column;
-      gap: var(--semantic-space-gap-tight);
+      gap: var(--semantic-space-gap);
       margin: 0;
       padding-inline-start: var(--semantic-space-padding);
       color: var(--semantic-color-text-muted);
-      font-size: var(--primitives-font-size-sm);
+      font-size: var(--primitives-font-size-xs);
     }
 
     & .mui-focus-item__categories {
@@ -91,7 +97,7 @@
         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);
+        row-gap: var(--semantic-space-gap);
       }
 
       & .mui-focus-item__main {
@@ -113,7 +119,6 @@
 
       & .mui-focus-item__categories {
         justify-content: flex-start;
-        margin-block-start: calc(var(--semantic-space-gap) - var(--semantic-space-gap-tight));
       }
     }
   }

package/dist/focus-list/focus-list.css

@@ -2,7 +2,7 @@
   .mui-focus-list {
     display: flex;
     flex-direction: column;
-    gap: var(--semantic-space-gap);
+    gap: var(--semantic-space-gap-relaxed);
     margin: 0;
     padding: 0;
     list-style: none;

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

@@ -262,6 +262,8 @@
       height: var(--mui-tier-emblem-size);
       border-radius: var(--semantic-radius-pill);
       color: var(--mui-tier-emblem-icon);
+      /* The glyph is sized by its tier, through the icon's own contract key. */
+      --ds-icon-size-md: var(--mui-tier-emblem-glyph-size);
       /*
        * Rare has no mid stop; its fallback is the sRGB midpoint, which draws
        * exactly the two-stop gradient. `in srgb` pins the space so that a
@@ -456,7 +458,7 @@
     & .mui-goal-card__milestones-label {
       font-weight: var(--primitives-font-weight-semibold);
       font-size: var(--primitives-font-size-xs);
-      letter-spacing: 0.15em;
+      letter-spacing: var(--semantic-letter-spacing-label);
       line-height: var(--primitives-line-height-tight);
       text-transform: uppercase;
     }
@@ -484,6 +486,7 @@
       --mui-tier-emblem-to: var(--component-goal-card-legendary-emblem-to);
       --mui-tier-emblem-icon: var(--component-goal-card-legendary-emblem-icon);
       --mui-tier-emblem-size: var(--component-goal-card-legendary-emblem-size);
+      --mui-tier-emblem-glyph-size: var(--component-goal-card-legendary-emblem-glyph-size);
       --mui-tier-emblem-ring-color: var(--mui-tier-accent);
       --mui-tier-emblem-ring-width: 2px;
       --mui-tier-emblem-ring-alpha: 50%;
@@ -518,6 +521,7 @@
       --mui-tier-emblem-to: var(--component-goal-card-epic-emblem-to);
       --mui-tier-emblem-icon: var(--component-goal-card-epic-emblem-icon);
       --mui-tier-emblem-size: var(--component-goal-card-epic-emblem-size);
+      --mui-tier-emblem-glyph-size: var(--component-goal-card-epic-emblem-glyph-size);
       --mui-tier-emblem-ring-color: var(--mui-tier-accent);
       --mui-tier-emblem-ring-width: 1px;
       --mui-tier-emblem-ring-alpha: 40%;
@@ -551,6 +555,7 @@
       --mui-tier-emblem-to: var(--component-goal-card-rare-emblem-to);
       --mui-tier-emblem-icon: var(--component-goal-card-rare-emblem-icon);
       --mui-tier-emblem-size: var(--component-goal-card-rare-emblem-size);
+      --mui-tier-emblem-glyph-size: var(--component-goal-card-rare-emblem-glyph-size);
       --mui-tier-emblem-ring-color: var(--component-goal-card-rare-emblem-ring-color);
       --mui-tier-emblem-ring-width: 1px;
       --mui-tier-emblem-ring-alpha: 40%;

package/dist/goal-card/goal-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"goal-card.d.ts","sourceRoot":"","sources":["../../src/goal-card/goal-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,UAAU,EAEhB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,KAAK,UAAU,EAAkB,MAAM,qBAAqB,CAAC;AACtE,OAAO,iBAAiB,CAAC;AAEzB,uDAAuD;AACvD,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEhF,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,IAAI,EAAE,QAAQ,CAAC;IACf,yCAAyC;IACzC,MAAM,EAAE,UAAU,CAAC;IACnB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,+FAA+F;IAC/F,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACjC,mGAAmG;IACnG,uBAAuB,CAAC,EAAE,UAAU,CAAC;IACrC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IAC3C;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,+DAA+D;IAC/D,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,yGAAyG;IACzG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,mEAAmE;IACnE,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,uFAAuF;IACvF,sBAAsB,CAAC,EAAE,UAAU,CAAC;IACpC;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqBD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,UAAU,EACV,cAAc,EACd,mBAAmB,EACnB,uBAAuB,EACvB,IAAI,EACJ,aAAa,EAAE,aAAmB,EAClC,WAAW,EACX,UAAe,EACf,oBAAwB,EACxB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,sBAAuC,EACvC,UAAU,EACV,OAAc,EACd,SAAS,GACV,EAAE,aAAa,2CAyHf"}
+{"version":3,"file":"goal-card.d.ts","sourceRoot":"","sources":["../../src/goal-card/goal-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,UAAU,EAEhB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,KAAK,UAAU,EAAkB,MAAM,qBAAqB,CAAC;AACtE,OAAO,iBAAiB,CAAC;AAEzB,uDAAuD;AACvD,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEhF,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,IAAI,EAAE,QAAQ,CAAC;IACf,yCAAyC;IACzC,MAAM,EAAE,UAAU,CAAC;IACnB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,+FAA+F;IAC/F,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACjC,mGAAmG;IACnG,uBAAuB,CAAC,EAAE,UAAU,CAAC;IACrC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IAC3C;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,+DAA+D;IAC/D,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,yGAAyG;IACzG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,mEAAmE;IACnE,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,uFAAuF;IACvF,sBAAsB,CAAC,EAAE,UAAU,CAAC;IACpC;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,UAAU,EACV,cAAc,EACd,mBAAmB,EACnB,uBAAuB,EACvB,IAAI,EACJ,aAAa,EAAE,aAAmB,EAClC,WAAW,EACX,UAAe,EACf,oBAAwB,EACxB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,sBAAuC,EACvC,UAAU,EACV,OAAc,EACd,SAAS,GACV,EAAE,aAAa,2CAyHf"}

package/dist/goal-card/goal-card.js

@@ -3,15 +3,6 @@ import { Card, CardContent, CardHeader, CardLink, CardTitle, cx, Icon, Progress,
 import { GoalCategories } from '../goal-categories';
 import { GoalStatusMenu } from '../goal-status-menu';
 import './goal-card.css';
-/**
- * Emblem glyph size per tier, mirroring the product (20 / 16 / 14). The ring
- * around it is sized in CSS from the tier tokens; this is the icon inside it.
- */
-const TIER_EMBLEM_ICON_SIZE = {
-    '5 Year': 'lg',
-    '1 Year': 'md',
-    Quarterly: 'sm',
-};
 /** Maps a timeframe to its CSS tier modifier. */
 const TIER_CLASS = {
     '5 Year': 'legendary',
@@ -59,7 +50,7 @@ export function GoalCard({ title, description, type, status, statusIcon, onStatu
      * treatment stays entirely in `goal-card.css` — one place to read what a
      * tier looks like, and no second definition here to drift from it.
      */
-    return (_jsxs(Card, { interactive: Boolean(href), className: cx('mui-goal-card', `mui-goal-card--${TIER_CLASS[type]}`, className), children: [_jsx("span", { className: "mui-goal-card__ornament", "aria-hidden": "true" }), _jsxs("span", { className: "mui-goal-card__corners", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsxs(CardHeader, { className: "mui-goal-card__header", children: [_jsxs("div", { className: "mui-goal-card__meta", children: [_jsxs("span", { className: "mui-goal-card__meta-start", children: [emblemIcon && (_jsx("span", { className: "mui-goal-card__emblem", "aria-hidden": "true", children: _jsx(Icon, { source: emblemIcon, size: TIER_EMBLEM_ICON_SIZE[type] ?? 'md', decorative: true }) })), _jsxs("span", { className: "mui-goal-card__type", children: [typeIcon && _jsx(Icon, { source: typeIcon, size: "sm", decorative: true }), type, periodLabel && (_jsxs("span", { className: "mui-goal-card__period", children: [' ', _jsx("span", { "aria-hidden": "true", children: "\u00B7" }), " ", periodLabel] }))] })] }), _jsx(GoalStatusMenu, { labelClassName: "mui-goal-card__status-label", status: status, statusIcon: statusIcon, onStatusChange: onStatusChange, indicator: statusMenuIndicator, itemIndicator: statusMenuItemIndicator })] }), _jsx(GoalCategories, { className: "mui-goal-card__categories", categories: categories, maxVisible: maxVisibleCategories }), _jsx(CardTitle, { as: titleAs, className: "mui-goal-card__title", children: href ? (_jsx(CardLink, { asChild: true, children: _jsx(LinkComponent, { href: href, children: title }) })) : (title) }), _jsx("span", { className: "mui-goal-card__divider", "aria-hidden": "true" })] }), _jsxs(CardContent, { className: "mui-goal-card__content", children: [_jsx("p", { className: "mui-goal-card__description", children: description || 'No description provided.' }), total > 0 && (_jsxs("div", { className: "mui-goal-card__milestones", children: [_jsx(Progress, { size: "sm", value: completed, max: total, label: _jsx("span", { className: "mui-goal-card__milestones-label", children: "Milestones" }), valueText: `${completed} of ${total}` }), _jsx("ul", { className: "mui-goal-card__milestone-list", children: milestones?.map((milestone) => (_jsxs("li", { className: cx('mui-goal-card__milestone', milestone.completed && 'mui-goal-card__milestone--done'), children: [_jsx("span", { className: "mui-goal-card__milestone-marker", "aria-hidden": "true", children: milestone.completed && milestoneIcon && (_jsx(Icon, { source: milestoneIcon, size: "sm", decorative: true })) }), _jsx("span", { className: "mui-goal-card__milestone-title", children: milestone.title }), milestone.convertedToGoal && (_jsx("span", { className: "mui-goal-card__milestone-converted", children: _jsx(Icon, { source: milestoneConvertedIcon, size: "sm", label: "Converted to a goal" }) }))] }, milestone.id))) })] })), targetDate && (_jsxs("p", { className: "mui-goal-card__target", children: [_jsx("span", { className: "mui-goal-card__target-label", children: "Target:" }), " ", targetDate] }))] })] }));
+    return (_jsxs(Card, { interactive: Boolean(href), className: cx('mui-goal-card', `mui-goal-card--${TIER_CLASS[type]}`, className), children: [_jsx("span", { className: "mui-goal-card__ornament", "aria-hidden": "true" }), _jsxs("span", { className: "mui-goal-card__corners", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsxs(CardHeader, { className: "mui-goal-card__header", children: [_jsxs("div", { className: "mui-goal-card__meta", children: [_jsxs("span", { className: "mui-goal-card__meta-start", children: [emblemIcon && (_jsx("span", { className: "mui-goal-card__emblem", "aria-hidden": "true", children: _jsx(Icon, { source: emblemIcon, size: "md", decorative: true }) })), _jsxs("span", { className: "mui-goal-card__type", children: [typeIcon && _jsx(Icon, { source: typeIcon, size: "sm", decorative: true }), type, periodLabel && (_jsxs("span", { className: "mui-goal-card__period", children: [' ', _jsx("span", { "aria-hidden": "true", children: "\u00B7" }), " ", periodLabel] }))] })] }), _jsx(GoalStatusMenu, { labelClassName: "mui-goal-card__status-label", status: status, statusIcon: statusIcon, onStatusChange: onStatusChange, indicator: statusMenuIndicator, itemIndicator: statusMenuItemIndicator })] }), _jsx(GoalCategories, { className: "mui-goal-card__categories", categories: categories, maxVisible: maxVisibleCategories }), _jsx(CardTitle, { as: titleAs, className: "mui-goal-card__title", children: href ? (_jsx(CardLink, { asChild: true, children: _jsx(LinkComponent, { href: href, children: title }) })) : (title) }), _jsx("span", { className: "mui-goal-card__divider", "aria-hidden": "true" })] }), _jsxs(CardContent, { className: "mui-goal-card__content", children: [_jsx("p", { className: "mui-goal-card__description", children: description || 'No description provided.' }), total > 0 && (_jsxs("div", { className: "mui-goal-card__milestones", children: [_jsx(Progress, { size: "sm", value: completed, max: total, label: _jsx("span", { className: "mui-goal-card__milestones-label", children: "Milestones" }), valueText: `${completed} of ${total}` }), _jsx("ul", { className: "mui-goal-card__milestone-list", children: milestones?.map((milestone) => (_jsxs("li", { className: cx('mui-goal-card__milestone', milestone.completed && 'mui-goal-card__milestone--done'), children: [_jsx("span", { className: "mui-goal-card__milestone-marker", "aria-hidden": "true", children: milestone.completed && milestoneIcon && (_jsx(Icon, { source: milestoneIcon, size: "sm", decorative: true })) }), _jsx("span", { className: "mui-goal-card__milestone-title", children: milestone.title }), milestone.convertedToGoal && (_jsx("span", { className: "mui-goal-card__milestone-converted", children: _jsx(Icon, { source: milestoneConvertedIcon, size: "sm", label: "Converted to a goal" }) }))] }, milestone.id))) })] })), targetDate && (_jsxs("p", { className: "mui-goal-card__target", children: [_jsx("span", { className: "mui-goal-card__target-label", children: "Target:" }), " ", targetDate] }))] })] }));
 }
 /*
  * Fallback glyph, inlined because this package is public and may not

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

@@ -1 +1 @@
-{"version":3,"file":"goal-card.js","sourceRoot":"","sources":["../../src/goal-card/goal-card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"goal-card.js","sourceRoot":"","sources":["../../src/goal-card/goal-card.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EAEJ,QAAQ,GACT,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,cAAc,EAAqB,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAmB,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,iBAAiB,CAAC;AAiHzB,iDAAiD;AACjD,MAAM,UAAU,GAA6B;IAC3C,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;IACjB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,UAAU,EACV,cAAc,EACd,mBAAmB,EACnB,uBAAuB,EACvB,IAAI,EACJ,aAAa,EAAE,aAAa,GAAG,GAAG,EAClC,WAAW,EACX,UAAU,GAAG,EAAE,EACf,oBAAoB,GAAG,CAAC,EACxB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,sBAAsB,GAAG,cAAc,EACvC,UAAU,EACV,OAAO,GAAG,IAAI,EACd,SAAS,GACK;IACd,MAAM,SAAS,GAAG,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC;IACrE,MAAM,KAAK,GAAG,UAAU,EAAE,MAAM,IAAI,CAAC,CAAC;IAEtC;;;;;;;;;OASG;IACH,OAAO,CACL,MAAC,IAAI,IACH,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,EAC1B,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,kBAAkB,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,aAE/E,eAAM,SAAS,EAAC,yBAAyB,iBAAa,MAAM,GAAG,EAC/D,gBAAM,SAAS,EAAC,wBAAwB,iBAAa,MAAM,aACzD,gBAAQ,EACR,gBAAQ,EACR,gBAAQ,EACR,gBAAQ,IACH,EAEP,MAAC,UAAU,IAAC,SAAS,EAAC,uBAAuB,aAC3C,eAAK,SAAS,EAAC,qBAAqB,aAClC,gBAAM,SAAS,EAAC,2BAA2B,aACxC,UAAU,IAAI,CACb,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACxD,KAAC,IAAI,IAAC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAC,IAAI,EAAC,UAAU,SAAG,GAC5C,CACR,EACD,gBAAM,SAAS,EAAC,qBAAqB,aAClC,QAAQ,IAAI,KAAC,IAAI,IAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,UAAU,SAAG,EAC3D,IAAI,EACJ,WAAW,IAAI,CACd,gBAAM,SAAS,EAAC,uBAAuB,aACpC,GAAG,EACJ,8BAAkB,MAAM,uBAAS,OAAE,WAAW,IACzC,CACR,IACI,IACF,EACP,KAAC,cAAc,IACb,cAAc,EAAC,6BAA6B,EAC5C,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,mBAAmB,EAC9B,aAAa,EAAE,uBAAuB,GACtC,IACE,EAEN,KAAC,cAAc,IACb,SAAS,EAAC,2BAA2B,EACrC,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,oBAAoB,GAChC,EAEF,KAAC,SAAS,IAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,sBAAsB,YACrD,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,QAAQ,IAAC,OAAO,kBACf,KAAC,aAAa,IAAC,IAAI,EAAE,IAAI,YAAG,KAAK,GAAiB,GACzC,CACZ,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACS,EAEZ,eAAM,SAAS,EAAC,wBAAwB,iBAAa,MAAM,GAAG,IACnD,EAEb,MAAC,WAAW,IAAC,SAAS,EAAC,wBAAwB,aAC7C,YAAG,SAAS,EAAC,4BAA4B,YAAE,WAAW,IAAI,0BAA0B,GAAK,EAExF,KAAK,GAAG,CAAC,IAAI,CACZ,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,QAAQ,IACP,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,EAChB,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,eAAM,SAAS,EAAC,iCAAiC,2BAAkB,EAC1E,SAAS,EAAE,GAAG,SAAS,OAAO,KAAK,EAAE,GACrC,EACF,aAAI,SAAS,EAAC,+BAA+B,YAC1C,UAAU,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAC9B,cAEE,SAAS,EAAE,EAAE,CACX,0BAA0B,EAC1B,SAAS,CAAC,SAAS,IAAI,gCAAgC,CACxD,aAED,eAAM,SAAS,EAAC,iCAAiC,iBAAa,MAAM,YACjE,SAAS,CAAC,SAAS,IAAI,aAAa,IAAI,CACvC,KAAC,IAAI,IAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAC,IAAI,EAAC,UAAU,SAAG,CACrD,GACI,EACP,eAAM,SAAS,EAAC,gCAAgC,YAAE,SAAS,CAAC,KAAK,GAAQ,EACxE,SAAS,CAAC,eAAe,IAAI,CAC5B,eAAM,SAAS,EAAC,oCAAoC,YAClD,KAAC,IAAI,IAAC,MAAM,EAAE,sBAAsB,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,qBAAqB,GAAG,GACzE,CACR,KAhBI,SAAS,CAAC,EAAE,CAiBd,CACN,CAAC,GACC,IACD,CACP,EAEA,UAAU,IAAI,CACb,aAAG,SAAS,EAAC,uBAAuB,aAClC,eAAM,SAAS,EAAC,6BAA6B,wBAAe,OAAE,UAAU,IACtE,CACL,IACW,IACT,CACR,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,cAAc,GAAe,CAAC,KAAK,EAAE,EAAE,CAAC,CAC5C,6BAAiB,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,KAAK,KAAK,YAC/D,eACE,CAAC,EAAC,oBAAoB,EACtB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AACF,cAAc,CAAC,WAAW,GAAG,wBAAwB,CAAC"}

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

@@ -2,7 +2,7 @@
   .mui-goal-list {
     display: flex;
     flex-direction: column;
-    gap: var(--semantic-space-gap);
+    gap: var(--semantic-space-gap-relaxed);
     margin: 0;
     padding: 0;
     list-style: none;

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

@@ -29,7 +29,7 @@
      * 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
+     * Narrow, the status's cap is 8.5rem 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.
      */
@@ -45,7 +45,7 @@
       grid-area: main;
       display: flex;
       flex-direction: column;
-      gap: var(--semantic-space-gap-tight);
+      gap: var(--semantic-space-gap);
       min-width: 0;
     }
 
@@ -54,11 +54,16 @@
       --ds-card-text: var(--ds-card-text-muted);
     }
 
+    /* Set on what follows the title, as on ActionItem. */
+    & .mui-goal-list-item__title + .mui-goal-list-item__details {
+      margin-block-start: var(--semantic-space-gap);
+    }
+
     & .mui-goal-list-item__details {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      gap: var(--semantic-space-gap-tight) var(--semantic-space-gap-relaxed);
+      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);
@@ -75,7 +80,7 @@
     /* GoalCard's small-caps label, so the two views name their details alike. */
     & .mui-goal-list-item__detail-label {
       font-weight: var(--primitives-font-weight-semibold);
-      letter-spacing: 0.15em;
+      letter-spacing: var(--semantic-letter-spacing-label);
       text-transform: uppercase;
     }
 
@@ -97,10 +102,10 @@
      */
     @container mui-goal-list-item (max-width: 36rem) {
       & .mui-goal-list-item__row {
-        grid-template-columns: minmax(0, 1fr) fit-content(clamp(50%, 8rem, 60%));
+        grid-template-columns: minmax(0, 1fr) fit-content(clamp(50%, 8.5rem, 60%));
         grid-template-areas: none;
         align-items: start;
-        row-gap: var(--semantic-space-gap-tight);
+        row-gap: var(--semantic-space-gap);
       }
 
       & .mui-goal-list-item__main {
@@ -121,7 +126,6 @@
 
       & .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-status-menu/goal-status-menu.css

@@ -1,9 +1,4 @@
 @layer components {
-  /*
-   * A bare button around the plain status badge. The badge keeps its own look;
-   * the button adds only what says "this opens something": the chevron, a fill
-   * on hover, and the focus ring.
-   */
   /*
    * The trigger raises itself above a host card's stretched link (ui-core's
    * CardLink), so it keeps its own clicks wherever it sits. Only the trigger:
@@ -14,51 +9,11 @@
   .mui-goal-status-menu {
     position: relative;
     z-index: 1;
-    display: inline-flex;
-    align-items: center;
     flex-shrink: 0;
-    max-width: 100%;
-    gap: var(--semantic-space-gap-tight);
-    margin: 0;
-    padding: 0 var(--semantic-space-gap-tight);
-    border: 0;
-    border-radius: var(--semantic-radius-interactive);
-    background-color: transparent;
-    color: inherit;
-    font: inherit;
-    cursor: pointer;
-    transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1);
-
-    &:hover,
-    &[data-state="open"] {
-      background-color: var(--semantic-color-surface-muted);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--semantic-color-focus-ring);
-      outline-offset: 3px;
-    }
 
     /* A Badge never gives way in a row, but inside the capped trigger it must, or the chevron goes. */
     & .mui-goal-status-menu__badge {
       flex-shrink: 1;
     }
-
-    & .mui-goal-status-menu__indicator {
-      color: var(--semantic-color-text-muted);
-      transform: rotate(90deg);
-      transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
-    }
-
-    &[data-state="open"] .mui-goal-status-menu__indicator {
-      transform: rotate(-90deg);
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .mui-goal-status-menu,
-  .mui-goal-status-menu .mui-goal-status-menu__indicator {
-    transition: none;
   }
 }

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

@@ -20,12 +20,7 @@ export interface GoalStatusMenuProps {
      * Without it the badge is a plain, non-interactive status.
      */
     onStatusChange?: (status: GoalStatus) => void;
-    /**
-     * Glyph after the badge saying it opens a menu. Must point RIGHT, as
-     * 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.
-     */
+    /** Glyph after the badge saying it opens a menu. Must point RIGHT; see `MenuTrigger`'s `indicator`. */
     indicator?: IconSource;
     /** Glyph marking the current status in the menu. Defaults to Menu's built-in check. */
     itemIndicator?: IconSource;

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

@@ -1 +1 @@
-{"version":3,"file":"goal-status-menu.d.ts","sourceRoot":"","sources":["../../src/goal-status-menu/goal-status-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,UAAU,EAGhB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,wBAAwB,CAAC;AAEhC,+EAA+E;AAC/E,eAAO,MAAM,aAAa,sDAAuD,CAAC;AAElF,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAaxD,MAAM,WAAW,mBAAmB;IAClC,mDAAmD;IACnD,MAAM,EAAE,UAAU,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C;;;;;OAKG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,uFAAuF;IACvF,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,UAAU,EACV,cAAc,EACd,SAAgC,EAChC,aAAa,EACb,cAAc,EACd,SAAS,GACV,EAAE,mBAAmB,2CAwCrB"}
+{"version":3,"file":"goal-status-menu.d.ts","sourceRoot":"","sources":["../../src/goal-status-menu/goal-status-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,UAAU,EAAoC,MAAM,mBAAmB,CAAC;AACjG,OAAO,wBAAwB,CAAC;AAEhC,+EAA+E;AAC/E,eAAO,MAAM,aAAa,sDAAuD,CAAC;AAElF,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAaxD,MAAM,WAAW,mBAAmB;IAClC,mDAAmD;IACnD,MAAM,EAAE,UAAU,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,uGAAuG;IACvG,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,uFAAuF;IACvF,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,UAAU,EACV,cAAc,EACd,SAAS,EACT,aAAa,EACb,cAAc,EACd,SAAS,GACV,EAAE,mBAAmB,2CAkCrB"}

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, cx, FallbackChevronRight, Icon, Menu, } from '@manakind/ui-core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge, cx, Menu, MenuTrigger } from '@manakind/ui-core';
 import './goal-status-menu.css';
 /** A Manuia goal's progress states, in the order a goal moves through them. */
 export const GOAL_STATUSES = ['Not Started', 'In Progress', 'Completed'];
@@ -24,10 +24,10 @@ const STATUS_ITEMS = GOAL_STATUSES.map((status) => ({
  * The trigger is named "Status: In Progress. Change status": the current
  * status and what pressing it does, which also names the menu it opens.
  */
-export function GoalStatusMenu({ status, statusIcon, onStatusChange, indicator = FallbackChevronRight, itemIndicator, labelClassName, className, }) {
+export function GoalStatusMenu({ status, statusIcon, onStatusChange, indicator, itemIndicator, labelClassName, className, }) {
     const badge = (_jsx(Badge, { variant: STATUS_VARIANT[status], appearance: "plain", icon: statusIcon, labelClassName: cx('mui-goal-status-menu__label', labelClassName), "aria-label": status, className: onStatusChange ? 'mui-goal-status-menu__badge' : className, children: status }));
     if (!onStatusChange)
         return badge;
-    return (_jsx(Menu, { label: "Status", items: STATUS_ITEMS, value: status, onValueChange: onStatusChange, itemIndicator: itemIndicator, trigger: _jsxs("button", { type: "button", className: cx('mui-goal-status-menu', className), "aria-label": `Status: ${status}. Change status`, children: [badge, _jsx(Icon, { source: indicator, size: "sm", decorative: true, className: "mui-goal-status-menu__indicator" })] }) }));
+    return (_jsx(Menu, { label: "Status", items: STATUS_ITEMS, value: status, onValueChange: onStatusChange, itemIndicator: itemIndicator, trigger: _jsx(MenuTrigger, { indicator: indicator, className: cx('mui-goal-status-menu', className), "aria-label": `Status: ${status}. Change status`, children: badge }) }));
 }
 //# sourceMappingURL=goal-status-menu.js.map

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

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

package/dist/index.d.ts

@@ -9,6 +9,8 @@
  * `.storybook/preview.ts` for the canonical setup.
  */
 export * from '@manakind/ui-core';
+export * from './action-item';
+export * from './action-list';
 export * from './category-card';
 export * from './focus-item';
 export * from './focus-list';

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,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"}

package/dist/index.js

@@ -9,6 +9,8 @@
  * `.storybook/preview.ts` for the canonical setup.
  */
 export * from '@manakind/ui-core';
+export * from './action-item';
+export * from './action-list';
 export * from './category-card';
 export * from './focus-item';
 export * from './focus-list';

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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manakind/manuia-ui",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -37,8 +37,8 @@
     "vr": "playwright test"
   },
   "dependencies": {
-    "@manakind/manuia-tokens": "0.13.0",
-    "@manakind/ui-core": "0.15.0"
+    "@manakind/manuia-tokens": "0.15.0",
+    "@manakind/ui-core": "0.16.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",