@roadlittledawn/docs-design-system-react 0.12.0 → 0.12.2

package/USAGE.md

@@ -134,6 +134,7 @@ import { Card } from "@roadlittledawn/docs-design-system-react";
 | `href` | `string` | — | Optional link URL. When provided, the entire card becomes clickable |
 | `icon` | `ReactNode` | — | Optional icon to display. Pass a rendered icon component. In MDX, the consuming site's component map resolves string names to rendered components before passing here. |
 | `iconPlacement` | `"left" \| "top-left" \| "top-center"` | `"top-left"` | Where to place the icon: vertically centered on the left, above content flush left, or above content centered |
+| `iconSize` | `string` | — | Override the icon container size (width and height). Accepts any valid CSS length (e.g. `"2rem"`, `"48px"`). Defaults to `--dds-card-icon-size` (`1.5rem`). |
 | `showArrow` | `boolean` | `false` | Show an animated arrow in the lower-right corner to signal the card is navigable. Best used with `href`. |
 | `children` | `ReactNode` | — | Card content |
 | `className` | `string` | `""` | Additional CSS classes |
@@ -161,6 +162,11 @@ import { Card } from "@roadlittledawn/docs-design-system-react";
   Read guides, tutorials, and API references.
 </Card>
 
+{/* Card with custom icon size (48px container) */}
+<Card title="Documentation" icon={<YourIcon />} iconPlacement="top-left" iconSize="3rem">
+  Icon container overridden to 48px × 48px.
+</Card>
+
 {/* Colored background */}
 <Card title="New Feature" titleColor="blue" backgroundColor="blue">
   Check out our latest component additions.
@@ -523,10 +529,20 @@ import { List } from "@roadlittledawn/docs-design-system-react";
 
 ### List.Item Props
 
-| Prop        | Type        | Default | Description            |
-| ----------- | ----------- | ------- | ---------------------- |
-| `children`  | `ReactNode` | —       | List item content      |
-| `className` | `string`    | `""`    | Additional CSS classes |
+| Prop         | Type        | Default | Description                                                                 |
+| ------------ | ----------- | ------- | --------------------------------------------------------------------------- |
+| `children`   | `ReactNode` | —       | List item content                                                           |
+| `className`  | `string`    | `""`    | Additional CSS classes                                                      |
+| `bulletIcon` | `ReactNode` | —       | Custom bullet icon for this item. Overrides the parent `List`'s `bulletIcon` |
+
+### CSS classes
+
+| Class | Element | Notes |
+| ----- | ------- | ----- |
+| `dds-list` | `<ol>` / `<ul>` | Root list element |
+| `dds-list-item` | `<li>` | Each list item |
+| `dds-list-item-content` | `<div>` | Wraps item children; target for content-level overrides |
+| `dds-list-item-icon` | `<span>` | Wrapper for custom `bulletIcon` SVG/node |
 
 ### Examples
 

package/dist/components/Card.d.ts

@@ -28,6 +28,11 @@ export interface CardProps {
      * @default 'top-left'
      */
     iconPlacement?: "left" | "top-left" | "top-center";
+    /**
+     * Override the icon container size (width and height). Accepts any valid CSS length value (e.g. `"2rem"`, `"48px"`).
+     * Defaults to the `--dds-card-icon-size` token (`1.5rem`).
+     */
+    iconSize?: string;
     /**
      * Show an animated arrow in the lower-right corner to signal the card is navigable.
      * Best used together with `href`. The arrow animates with a springy motion on hover.
@@ -39,4 +44,4 @@ export interface CardProps {
     /** Additional CSS classes */
     className?: string;
 }
-export declare function Card({ title, titleColor, backgroundColor, href, icon, iconPlacement, showArrow, children, className, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ title, titleColor, backgroundColor, href, icon, iconPlacement, iconSize, showArrow, children, className, }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Card.js

@@ -1,6 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function Card(_a) {
-    var title = _a.title, _b = _a.titleColor, titleColor = _b === void 0 ? "gray" : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? "white" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPlacement, iconPlacement = _d === void 0 ? "top-left" : _d, _e = _a.showArrow, showArrow = _e === void 0 ? false : _e, children = _a.children, _f = _a.className, className = _f === void 0 ? "" : _f;
+    var title = _a.title, _b = _a.titleColor, titleColor = _b === void 0 ? "gray" : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? "white" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPlacement, iconPlacement = _d === void 0 ? "top-left" : _d, iconSize = _a.iconSize, _e = _a.showArrow, showArrow = _e === void 0 ? false : _e, children = _a.children, _f = _a.className, className = _f === void 0 ? "" : _f;
     var cardClasses = [
         "dds-card",
         "dds-card-bg-".concat(backgroundColor),
@@ -19,7 +30,7 @@ export function Card(_a) {
             iconPlacement === "top-center" ? "dds-card-icon-top-center" : "",
         ]
             .filter(Boolean)
-            .join(" "), "aria-hidden": "true", children: icon })) : null;
+            .join(" "), style: __assign({}, (iconSize && { width: iconSize, height: iconSize })), "aria-hidden": "true", children: icon })) : null;
     var arrowEl = showArrow ? (_jsx("span", { className: "dds-card-arrow", "aria-hidden": "true", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 8H14M10 4L14 8L10 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) : null;
     var bodyContent = icon && iconPlacement === "left" ? (_jsxs("div", { className: "dds-card-icon-row", children: [iconEl, _jsxs("div", { className: "dds-card-icon-content", children: [title && _jsx("h3", { className: titleClasses, children: title }), _jsx("div", { className: textClasses, children: children })] })] })) : (_jsxs(_Fragment, { children: [iconEl, title && _jsx("h3", { className: titleClasses, children: title }), _jsx("div", { className: textClasses, children: children })] }));
     var content = (_jsxs("div", { className: cardClasses, children: [bodyContent, arrowEl] }));

package/dist/components/Card.stories.d.ts

@@ -46,6 +46,11 @@ export declare const NoTitle: Story;
  * All icon placement variants side by side.
  */
 export declare const IconPlacements: Story;
+/**
+ * Cards with a custom icon size using the `iconSize` prop.
+ * Use any valid CSS length value (e.g. `"2rem"`, `"48px"`).
+ */
+export declare const WithCustomIconSize: Story;
 /**
  * All title color variants.
  */

package/dist/components/Card.stories.js

@@ -38,6 +38,10 @@ var meta = {
             description: 'Placement of the icon within the card.',
             table: { defaultValue: { summary: "'top-left'" } },
         },
+        iconSize: {
+            control: 'text',
+            description: 'Override the icon container size (width and height, e.g. "2rem", "48px"). Defaults to the --dds-card-icon-size token (1.5rem).',
+        },
         showArrow: {
             control: 'boolean',
             description: 'Show an animated arrow in the lower-right corner to signal the card is navigable.',
@@ -235,6 +239,20 @@ export var IconPlacements = {
     },
     render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Card, { title: "Icon Left", icon: _jsx(DemoIcon, {}), iconPlacement: "left", children: _jsx("span", { style: { color: 'var(--dds-card-text-gray)' }, children: "Icon is centered vertically beside the content." }) }), _jsx(Card, { title: "Icon Top Left", icon: _jsx(DemoIcon, {}), iconPlacement: "top-left", children: _jsx("span", { style: { color: 'var(--dds-card-text-gray)' }, children: "Icon sits above the title, flush left." }) }), _jsx(Card, { title: "Icon Top Center", icon: _jsx(DemoIcon, {}), iconPlacement: "top-center", children: _jsx("span", { style: { color: 'var(--dds-card-text-gray)' }, children: "Icon sits above the title, horizontally centered." }) })] })); },
 };
+/**
+ * Cards with a custom icon size using the `iconSize` prop.
+ * Use any valid CSS length value (e.g. `"2rem"`, `"48px"`).
+ */
+export var WithCustomIconSize = {
+    parameters: {
+        docs: {
+            source: {
+                code: "{/* 48px icon container */}\n<Card title=\"Large Icon\" icon={<YourIcon />} iconPlacement=\"top-left\" iconSize=\"3rem\">\n  Icon container is 48px \u00D7 48px (3rem).\n</Card>\n\n{/* 16px icon container */}\n<Card title=\"Small Icon\" icon={<YourIcon />} iconPlacement=\"left\" iconSize=\"1rem\">\n  Icon container is 16px \u00D7 16px (1rem).\n</Card>",
+            },
+        },
+    },
+    render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Card, { title: "Large Icon", icon: _jsx(DemoIcon, {}), iconPlacement: "top-left", iconSize: "3rem", children: _jsx("span", { style: { color: 'var(--dds-card-text-gray)' }, children: "Icon container is 48px \u00D7 48px (3rem)." }) }), _jsx(Card, { title: "Small Icon", icon: _jsx(DemoIcon, {}), iconPlacement: "left", iconSize: "1rem", children: _jsx("span", { style: { color: 'var(--dds-card-text-gray)' }, children: "Icon container is 16px \u00D7 16px (1rem)." }) })] })); },
+};
 /**
  * All title color variants.
  */

package/dist/components/List.d.ts

@@ -16,7 +16,7 @@ export interface ListItemProps {
     children: ReactNode;
     /** Additional CSS classes */
     className?: string;
-    /** Internal: bullet icon injected by List parent for unordered lists */
+    /** Custom bullet icon (React node, e.g., SVG) for this item. Overrides the parent List's bulletIcon */
     bulletIcon?: ReactNode;
 }
 export declare function ListItem({ children, className, bulletIcon }: ListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/List.js

@@ -15,12 +15,16 @@ function ListImpl(_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.ordered, ordered = _c === void 0 ? true : _c, bullet = _a.bullet, bulletIcon = _a.bulletIcon;
     var listClasses = ["dds-list", className].filter(Boolean).join(" ");
     var Element = ordered ? "ol" : "ul";
-    return (_jsx(Element, { className: listClasses, "data-ordered": ordered, "data-has-icon": !!bulletIcon && !ordered, style: bullet && !bulletIcon
+    return (_jsx(Element, { className: listClasses, "data-ordered": ordered, style: bullet && !bulletIcon
             ? { "--dds-list-bullet": JSON.stringify(bullet) }
             : undefined, children: bulletIcon && !ordered
             ? React.Children.map(children, function (child) {
+                var _a;
                 if (React.isValidElement(child) && child.type === ListItem) {
-                    return React.cloneElement(child, __assign(__assign({}, child.props), { bulletIcon: bulletIcon }));
+                    var childProps = child.props;
+                    return React.cloneElement(child, __assign(__assign({}, childProps), { 
+                        // Child's own bulletIcon takes precedence over the parent's
+                        bulletIcon: (_a = childProps.bulletIcon) !== null && _a !== void 0 ? _a : bulletIcon }));
                 }
                 return child;
             })
@@ -29,7 +33,7 @@ function ListImpl(_a) {
 export function ListItem(_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, bulletIcon = _a.bulletIcon;
     var itemClasses = ["dds-list-item", className].filter(Boolean).join(" ");
-    return (_jsxs("li", { className: itemClasses, children: [bulletIcon && (_jsx("span", { className: "dds-list-item-icon", "aria-hidden": "true", children: bulletIcon })), children] }));
+    return (_jsxs("li", { className: itemClasses, "data-has-icon": bulletIcon ? "true" : undefined, children: [bulletIcon && (_jsx("span", { className: "dds-list-item-icon", "aria-hidden": "true", children: bulletIcon })), _jsx("div", { className: "dds-list-item-content", children: children })] }));
 }
 export var List = Object.assign(ListImpl, {
     Item: ListItem,

package/dist/styles.css

@@ -1745,7 +1745,9 @@ a.no-text-decoration {
 .dds-list-item {
   counter-increment: list-counter;
   position: relative;
-  padding-inline-start: calc(var(--dds-list-badge-size) + 1rem);
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
   margin-bottom: var(--dds-list-item-margin-bottom, 1.5rem);
   min-height: var(--dds-list-badge-size);
 }
@@ -1767,13 +1769,10 @@ a.no-text-decoration {
 /* Ordered list badges */
 .dds-list[data-ordered="true"] .dds-list-item::before {
   content: counter(list-counter);
-  position: absolute;
-  left: 0;
-  top: 0;
+  flex-shrink: 0;
   width: var(--dds-list-badge-size, 2.5rem);
   height: var(--dds-list-badge-size, 2.5rem);
   line-height: var(--dds-line-height-relaxed);
-  inset-inline-start: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1787,27 +1786,24 @@ a.no-text-decoration {
 /* Unordered list bullets */
 .dds-list[data-ordered="false"] .dds-list-item::before {
   content: var(--dds-list-bullet, "•");
-  position: absolute;
-  left: 0;
-  top: 0;
+  flex-shrink: 0;
   width: var(--dds-list-badge-size, 2.5rem);
   height: var(--dds-list-badge-size, 2.5rem);
-  inset-inline-start: 0;
   display: flex;
+  transform: translateY(var(--dds-list-bullet-offset, -0.1em));
   align-items: center;
   justify-content: center;
-  font-size: var(--dds-list-bullet-size, 1.5rem);
+  font-size: var(--dds-list-bullet-size, 1.25rem);
   color: var(--dds-list-badge-text);
 }
-/* Hide ::before when using custom icon */
-.dds-list[data-has-icon="true"] .dds-list-item::before {
+/* Hide ::before when item has a custom icon.
+   Specificity matches the show rules above (0-3-1) and comes after, so it wins. */
+.dds-list .dds-list-item[data-has-icon="true"]::before {
   display: none;
 }
 /* Custom icon bullet */
 .dds-list-item-icon {
-  position: absolute;
-  left: 0;
-  top: 0;
+  flex-shrink: 0;
   width: var(--dds-list-badge-size, 2.5rem);
   height: var(--dds-list-badge-size, 2.5rem);
   display: flex;
@@ -1819,6 +1815,27 @@ a.no-text-decoration {
   width: 1.25rem;
   height: 1.25rem;
 }
+/* Content wrapper — flex child that fills remaining space */
+.dds-list-item-content {
+  flex: 1;
+  min-width: 0;
+}
+/* Neutralize consuming-site typography margins that would misalign the badge.
+   The list item's own margin/padding controls spacing — not the children's. */
+.dds-list-item-content > :first-child {
+  margin-top: 0;
+}
+.dds-list-item-content > :last-child {
+  margin-bottom: 0;
+}
+/* For unordered lists, vertically center the content within the li so the first
+   text line's center aligns with the bullet/icon center.
+   margin-block: auto distributes remaining space evenly above and below the
+   content span, so its midpoint always lands at badge-size/2 — the same as the
+   bullet center — regardless of font-size or line-height. */
+.dds-list[data-ordered="false"] .dds-list-item-content {
+  margin-block: auto;
+}
 /* ==========================================================================
    Popover Component
    Uses the native Popover API for top-layer rendering.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadlittledawn/docs-design-system-react",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {