@common-origin/design-system 2.16.0 → 2.17.0

package/dist/components/atoms/DateFormatter/DateFormatter.d.ts

@@ -1,11 +1,21 @@
 import React from 'react';
+/**
+ * How DateFormatter shows a date. `'relative'` is deprecated: it has always behaved exactly like
+ * `'smart'`, so use `'smart'`. It keeps working until it is removed in 3.0 (#82).
+ */
 export type DateFormatMode = 'absolute' | 'relative' | 'smart';
 export interface DateFormatterProps {
     /** ISO date string to format */
     dateString: string;
     /** Format pattern (defaults to 'yyyy') */
     formatString?: string;
-    /** Date formatting mode: 'absolute' uses formatString, 'relative' shows "Today"/"Yesterday", 'smart' combines both */
+    /**
+     * `'absolute'` always uses `formatString`. `'smart'` shows "Today", "Yesterday" or the day name
+     * for dates this week, and formats older dates with `formatString`.
+     * `'relative'` is deprecated: it behaves exactly like `'smart'`, so use `'smart'`. It keeps
+     * working until it is removed in 3.0 (#82).
+     * @default 'absolute'
+     */
     mode?: DateFormatMode;
     /** Optional data-testid for testing */
     'data-testid'?: string;

package/dist/components/atoms/Icon/Icon.d.ts

@@ -5,6 +5,17 @@ export interface IconProps {
     name: IconName;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     iconColor?: 'default' | 'emphasis' | 'subdued' | 'disabled' | 'inverse' | 'interactive' | 'error' | 'success' | 'warning' | 'inherit';
+    /**
+     * Makes the icon meaningful: it's announced as an image with this name. Without `aria-label`
+     * or `title`, the icon is decorative and hidden from assistive technology (#85). Use a
+     * human-readable name, never the internal icon name; `icons.json`'s `ariaLabelDefault` is a
+     * starting point.
+     */
+    'aria-label'?: string;
+    /**
+     * Like `aria-label`, and also shown as a tooltip. `aria-label` wins if both are given.
+     */
+    title?: string;
     'data-testid'?: string;
 }
 export declare const Icon: FC<IconProps>;

package/dist/components/molecules/DateGroup/DateGroup.d.ts

@@ -5,7 +5,10 @@ export interface DateGroupProps {
     date: Date | string;
     /** Children to render under the date header (typically transactions) */
     children: React.ReactNode;
-    /** Format mode for date display */
+    /**
+     * Format mode for the date header, passed to DateFormatter's `mode`. `'relative'` is
+     * deprecated: it behaves exactly like `'smart'`, so use `'smart'` (#82).
+     */
     format?: DateFormatMode;
     /** Whether to show total amount for this date group */
     showTotal?: boolean;

package/dist/components/molecules/List/List.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type ListSpacing } from './ListContext';
 export interface ListProps {
     /**
      * ListItem components
@@ -10,10 +11,10 @@ export interface ListProps {
      */
     dividers?: boolean;
     /**
-     * Vertical spacing between items
+     * Density of the list's items: their padding. A ListItem's own `spacing` overrides it (#77).
      * @default 'comfortable'
      */
-    spacing?: 'compact' | 'comfortable';
+    spacing?: ListSpacing;
     /**
      * Additional CSS class name
      */

package/dist/components/molecules/List/ListContext.d.ts

@@ -0,0 +1,6 @@
+export type ListSpacing = 'compact' | 'comfortable';
+/**
+ * The spacing a List gives its items (#77). A ListItem without its own `spacing` uses it; outside
+ * a List it's `comfortable`. Internal: not exported from the package.
+ */
+export declare const ListSpacingContext: import("react").Context<ListSpacing>;

package/dist/components/molecules/List/ListItem.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type ListSpacing } from './ListContext';
 export interface ListItemProps {
     /**
      * Main text/content
@@ -56,10 +57,10 @@ export interface ListItemProps {
      */
     destructive?: boolean;
     /**
-     * Spacing variant from parent List
-     * @default 'comfortable'
+     * Density of this item. Defaults to the parent List's `spacing`, or `comfortable` outside a
+     * List; set it to override the List for this item (#77).
      */
-    spacing?: 'compact' | 'comfortable';
+    spacing?: ListSpacing;
     /**
      * Expanded content (shown when expanded=true)
      */
@@ -95,6 +96,6 @@ export interface ListItemProps {
     onKeyDown?: (e: React.KeyboardEvent) => void;
 }
 export declare const ListItem: {
-    ({ primary, secondary, badge, icon, expandable, expanded, onToggle, interactive, onClick, disabled, selected, destructive, spacing, children, className, "data-testid": dataTestId, role: customRole, "aria-selected": ariaSelected, id, tabIndex: customTabIndex, onKeyDown: customOnKeyDown, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ primary, secondary, badge, icon, expandable, expanded, onToggle, interactive, onClick, disabled, selected, destructive, spacing: spacingProp, children, className, "data-testid": dataTestId, role: customRole, "aria-selected": ariaSelected, id, tabIndex: customTabIndex, onKeyDown: customOnKeyDown, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@common-origin/design-system",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "Common Origin Design System - Framework-agnostic atomic design components with comprehensive WCAG 2.2 AA testing",
   "private": false,
   "main": "dist/index.js",