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

package/USAGE.md

@@ -529,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/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.1",
+  "version": "0.12.2",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {