@robr0/design-system 0.2.0 → 0.3.0

package/components/DateInput/DateInput.js

@@ -1,5 +1,6 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { Field } from "../Field/Field.js";
 import "./DateInput.css";
 import "../../fonts/material-symbols.css";
 const DateInput = React.forwardRef(
@@ -35,40 +36,43 @@ const DateInput = React.forwardRef(
       onValueChange?.(e.target.value);
     };
     const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
-    return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-      label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        className: classes,
         label,
-        required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
-          " ",
-          "*"
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        children: /* @__PURE__ */ jsxs("div", { className: `${baseClass}__field-wrapper`, children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: "calendar_today" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              ref,
+              className: `${baseClass}__field`,
+              type: "date",
+              id: inputId,
+              name,
+              value,
+              placeholder,
+              disabled,
+              required,
+              min,
+              max,
+              "aria-label": ariaLabel || rest["aria-label"] || label,
+              "aria-invalid": error,
+              "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
+              onChange: handleChange
+            }
+          )
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__field-wrapper`, children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: "calendar_today" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ...rest,
-            ref,
-            className: `${baseClass}__field`,
-            type: "date",
-            id: inputId,
-            name,
-            value,
-            placeholder,
-            disabled,
-            required,
-            min,
-            max,
-            "aria-label": ariaLabel || rest["aria-label"] || label,
-            "aria-invalid": error,
-            "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
-            onChange: handleChange
-          }
-        )
-      ] }),
-      helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
-    ] });
+      }
+    );
   }
 );
 DateInput.displayName = "DateInput";

package/components/DatePicker/DatePicker.js

@@ -125,40 +125,51 @@ const DatePicker = React.forwardRef(
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__grid`, role: "grid", children: [
-        DAYS.map((day) => /* @__PURE__ */ jsx("div", { className: `${baseClass}__day-header`, role: "columnheader", children: day }, day)),
-        cells.map((cell, idx) => {
-          const isSelected = selectedDate && isSameDay(cell.date, selectedDate);
-          const isToday = isSameDay(cell.date, today);
-          const isCellDisabled = isDateDisabled(cell.date);
-          const cellClasses = [
-            `${baseClass}__cell`,
-            !cell.inMonth ? `${baseClass}__cell--outside` : "",
-            isSelected ? `${baseClass}__cell--selected` : "",
-            isToday && !isSelected ? `${baseClass}__cell--today` : "",
-            isCellDisabled ? `${baseClass}__cell--disabled` : ""
-          ].filter(Boolean).join(" ");
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: cellClasses,
-              onClick: () => handleSelect(cell),
-              disabled: isCellDisabled,
-              "aria-label": cell.date.toLocaleDateString(void 0, {
-                weekday: "long",
-                year: "numeric",
-                month: "long",
-                day: "numeric"
-              }),
-              "aria-selected": isSelected || void 0,
-              role: "gridcell",
-              children: cell.day
-            },
-            idx
-          );
-        })
-      ] })
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${baseClass}__grid`,
+          role: "group",
+          "aria-label": `${MONTHS[viewMonth]} ${viewYear}`,
+          children: [
+            DAYS.map((day) => (
+              // Each cell's aria-label already carries the full weekday name, so
+              // the visual column headers are redundant noise for a screen reader.
+              /* @__PURE__ */ jsx("div", { className: `${baseClass}__day-header`, "aria-hidden": "true", children: day }, day)
+            )),
+            cells.map((cell, idx) => {
+              const isSelected = selectedDate && isSameDay(cell.date, selectedDate);
+              const isToday = isSameDay(cell.date, today);
+              const isCellDisabled = isDateDisabled(cell.date);
+              const cellClasses = [
+                `${baseClass}__cell`,
+                !cell.inMonth ? `${baseClass}__cell--outside` : "",
+                isSelected ? `${baseClass}__cell--selected` : "",
+                isToday && !isSelected ? `${baseClass}__cell--today` : "",
+                isCellDisabled ? `${baseClass}__cell--disabled` : ""
+              ].filter(Boolean).join(" ");
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: cellClasses,
+                  onClick: () => handleSelect(cell),
+                  disabled: isCellDisabled,
+                  "aria-label": `${cell.date.toLocaleDateString(void 0, {
+                    weekday: "long",
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric"
+                  })}${isSelected ? ", selected" : ""}`,
+                  "aria-current": isToday ? "date" : void 0,
+                  children: cell.day
+                },
+                idx
+              );
+            })
+          ]
+        }
+      )
     ] });
   }
 );

package/components/Dialog/Dialog.js

@@ -42,9 +42,7 @@ const Dialog = React.forwardRef(
       if (!open) return;
       const panel = panelRef.current;
       if (panel) {
-        const first = panel.querySelector(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
+        const first = panel.querySelector("button, [href], input, select, textarea") ?? panel.querySelector('[tabindex]:not([tabindex="-1"])');
         (first ?? panel).focus();
       }
       const handleKeyDown = (e) => {
@@ -133,7 +131,10 @@ const Dialog = React.forwardRef(
                 }
               )
             ] }),
-            children && /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children }),
+            children && // Scrollable when content is long; without a tab stop a keyboard
+            // user cannot reach that scroll. The initial-focus query below
+            // still prefers a real control, so this does not steal focus.
+            /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, tabIndex: 0, children }),
             footer && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer`, children: footer })
           ]
         }

package/components/Drawer/Drawer.js

@@ -44,7 +44,9 @@ const Drawer = React.forwardRef(
       if (!open) return;
       const panel = panelRef.current;
       if (panel) {
-        const first = panel.querySelector(FOCUSABLE);
+        const first = panel.querySelector(
+          "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])"
+        ) ?? panel.querySelector(FOCUSABLE);
         (first ?? panel).focus();
       }
       const handleKeyDown = (e) => {
@@ -132,7 +134,10 @@ const Drawer = React.forwardRef(
                 }
               )
             ] }),
-            children && /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children }),
+            children && // Scrollable when content is long; without a tab stop a keyboard
+            // user cannot reach that scroll. The initial-focus query below
+            // still prefers a real control, so this does not steal focus.
+            /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, tabIndex: 0, children }),
             footer && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer`, children: footer })
           ]
         }

package/components/Dropdown/Dropdown.css

@@ -15,19 +15,6 @@
    LABEL
    ============================================ */
 
-.ds-dropdown__label {
-  font-family: var(--font-paragraph-em-family);
-  font-size: var(--font-paragraph-em-size);
-  font-weight: var(--font-paragraph-em-weight);
-  line-height: var(--font-paragraph-em-line-height);
-  letter-spacing: var(--font-paragraph-em-letter-spacing);
-  color: var(--color-text-primary);
-}
-
-.ds-dropdown__required {
-  color: var(--color-core-accent-coral);
-}
-
 /* ============================================
    TRIGGER
    ============================================ */
@@ -216,16 +203,6 @@
    HELPER TEXT
    ============================================ */
 
-.ds-dropdown__helper {
-  font-family: var(--font-paragraph-sm-family);
-  font-size: var(--font-paragraph-sm-size);
-  font-weight: var(--font-paragraph-sm-weight);
-  line-height: var(--font-paragraph-sm-line-height);
-  letter-spacing: var(--font-paragraph-sm-letter-spacing);
-  color: var(--color-text-tertiary);
-  margin: 0;
-}
-
 /* ============================================
    ERROR STATE
    ============================================ */
@@ -234,18 +211,10 @@
   border-color: var(--color-status-error-border);
 }
 
-.ds-dropdown--error .ds-dropdown__helper {
-  color: var(--color-status-error-border);
-}
-
 /* ============================================
    DISABLED STATE
    ============================================ */
 
-.ds-dropdown--disabled .ds-dropdown__label {
-  color: var(--color-input-text-disabled);
-}
-
 .ds-dropdown--disabled .ds-dropdown__trigger {
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);
@@ -278,11 +247,6 @@
   --icon-size: var(--icon-size-sm);
 }
 
-.ds-dropdown--compact .ds-dropdown__label {
-  font-size: var(--font-paragraph-sm-size);
-  line-height: var(--font-paragraph-sm-line-height);
-}
-
 .ds-dropdown--compact .ds-dropdown__option {
   padding: var(--padding-xs) var(--padding-sm); /* 6px 8px */
   font-size: var(--font-paragraph-sm-em-size);

package/components/Dropdown/Dropdown.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useEffect } from "react";
+import { Field } from "../Field/Field.js";
 import "./Dropdown.css";
 import "../../fonts/material-symbols.css";
 const Dropdown = React.forwardRef(
@@ -112,122 +113,131 @@ const Dropdown = React.forwardRef(
         focusedEl?.scrollIntoView({ block: "nearest" });
       }
     }, [focusedIndex, isOpen]);
-    return /* @__PURE__ */ jsxs("div", { ...rest, className: classes, ref: setRootRef, children: [
-      label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, id: `${inputId}-label`, children: [
+    return /* @__PURE__ */ jsxs(
+      Field,
+      {
+        ...rest,
+        className: classes,
+        ref: setRootRef,
         label,
-        required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
-          " ",
-          "*"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `${baseClass}__trigger`,
-          role: "combobox",
-          "aria-expanded": isOpen,
-          "aria-haspopup": "listbox",
-          "aria-labelledby": label ? `${inputId}-label` : void 0,
-          "aria-label": ariaLabel || rest["aria-label"] || (!label ? placeholder : void 0),
-          "aria-controls": `${inputId}-listbox`,
-          tabIndex: disabled ? -1 : 0,
-          onClick: handleToggle,
-          onKeyDown: handleKeyDown,
-          children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: `${baseClass}__value ${!selectedOption ? `${baseClass}__value--placeholder` : ""}`,
-                children: selectedOption ? selectedOption.label : placeholder
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
-          ]
-        }
-      ),
-      isOpen && /* @__PURE__ */ jsx(
-        "ul",
-        {
-          className: [`${baseClass}__menu`, isGrouped ? `${baseClass}__menu--grouped` : ""].filter(Boolean).join(" "),
-          role: "listbox",
-          id: `${inputId}-listbox`,
-          ref: listRef,
-          "aria-labelledby": label ? `${inputId}-label` : void 0,
-          children: isGrouped ? (() => {
-            let flatIndex = 0;
-            return groups.map((group, groupIdx) => /* @__PURE__ */ jsxs("li", { className: `${baseClass}__group`, role: "none", children: [
-              /* @__PURE__ */ jsx("span", { className: `${baseClass}__group-label`, role: "presentation", children: group.label }),
-              /* @__PURE__ */ jsx(
-                "ul",
-                {
-                  className: `${baseClass}__group-list`,
-                  role: "group",
-                  "aria-label": group.label,
-                  children: group.options.map((option) => {
-                    const myIndex = flatIndex++;
-                    return /* @__PURE__ */ jsxs(
-                      "li",
-                      {
-                        className: [
-                          `${baseClass}__option`,
-                          option.value === value ? `${baseClass}__option--selected` : "",
-                          option.disabled ? `${baseClass}__option--disabled` : "",
-                          myIndex === focusedIndex ? `${baseClass}__option--focused` : ""
-                        ].filter(Boolean).join(" "),
-                        role: "option",
-                        "aria-selected": option.value === value,
-                        "aria-disabled": option.disabled,
-                        onClick: () => !option.disabled && handleSelect(option.value),
-                        children: [
-                          option.label,
-                          option.value === value && /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              className: `${baseClass}__check material-symbols-rounded`,
-                              "aria-hidden": "true",
-                              children: "check"
-                            }
-                          )
-                        ]
-                      },
-                      option.value
-                    );
-                  })
-                }
-              ),
-              groupIdx < groups.length - 1 && /* @__PURE__ */ jsx("li", { className: `${baseClass}__separator`, role: "separator" })
-            ] }, `group-${groupIdx}`));
-          })() : options.map((option, index) => /* @__PURE__ */ jsxs(
-            "li",
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
             {
-              className: [
-                `${baseClass}__option`,
-                option.value === value ? `${baseClass}__option--selected` : "",
-                option.disabled ? `${baseClass}__option--disabled` : "",
-                index === focusedIndex ? `${baseClass}__option--focused` : ""
-              ].filter(Boolean).join(" "),
-              role: "option",
-              "aria-selected": option.value === value,
-              "aria-disabled": option.disabled,
-              onClick: () => !option.disabled && handleSelect(option.value),
+              className: `${baseClass}__trigger`,
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-labelledby": label ? `${inputId}-label` : void 0,
+              "aria-label": ariaLabel || rest["aria-label"] || (!label ? placeholder : void 0),
+              "aria-controls": `${inputId}-listbox`,
+              "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
+              "aria-invalid": error || void 0,
+              tabIndex: disabled ? -1 : 0,
+              onClick: handleToggle,
+              onKeyDown: handleKeyDown,
               children: [
-                option.label,
-                option.value === value && /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: `${baseClass}__check material-symbols-rounded`,
-                    "aria-hidden": "true",
-                    children: "check"
+                    className: `${baseClass}__value ${!selectedOption ? `${baseClass}__value--placeholder` : ""}`,
+                    children: selectedOption ? selectedOption.label : placeholder
                   }
-                )
+                ),
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
               ]
-            },
-            option.value
-          ))
-        }
-      ),
-      helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
-    ] });
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsx(
+            "ul",
+            {
+              className: [`${baseClass}__menu`, isGrouped ? `${baseClass}__menu--grouped` : ""].filter(Boolean).join(" "),
+              role: "listbox",
+              id: `${inputId}-listbox`,
+              ref: listRef,
+              "aria-labelledby": label ? `${inputId}-label` : void 0,
+              children: isGrouped ? (() => {
+                let flatIndex = 0;
+                return groups.map((group, groupIdx) => /* @__PURE__ */ jsxs("li", { className: `${baseClass}__group`, role: "none", children: [
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__group-label`, role: "presentation", children: group.label }),
+                  /* @__PURE__ */ jsx(
+                    "ul",
+                    {
+                      className: `${baseClass}__group-list`,
+                      role: "group",
+                      "aria-label": group.label,
+                      children: group.options.map((option) => {
+                        const myIndex = flatIndex++;
+                        return /* @__PURE__ */ jsxs(
+                          "li",
+                          {
+                            className: [
+                              `${baseClass}__option`,
+                              option.value === value ? `${baseClass}__option--selected` : "",
+                              option.disabled ? `${baseClass}__option--disabled` : "",
+                              myIndex === focusedIndex ? `${baseClass}__option--focused` : ""
+                            ].filter(Boolean).join(" "),
+                            role: "option",
+                            "aria-selected": option.value === value,
+                            "aria-disabled": option.disabled,
+                            onClick: () => !option.disabled && handleSelect(option.value),
+                            children: [
+                              option.label,
+                              option.value === value && /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: `${baseClass}__check material-symbols-rounded`,
+                                  "aria-hidden": "true",
+                                  children: "check"
+                                }
+                              )
+                            ]
+                          },
+                          option.value
+                        );
+                      })
+                    }
+                  ),
+                  groupIdx < groups.length - 1 && /* @__PURE__ */ jsx("li", { className: `${baseClass}__separator`, role: "separator" })
+                ] }, `group-${groupIdx}`));
+              })() : options.map((option, index) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  className: [
+                    `${baseClass}__option`,
+                    option.value === value ? `${baseClass}__option--selected` : "",
+                    option.disabled ? `${baseClass}__option--disabled` : "",
+                    index === focusedIndex ? `${baseClass}__option--focused` : ""
+                  ].filter(Boolean).join(" "),
+                  role: "option",
+                  "aria-selected": option.value === value,
+                  "aria-disabled": option.disabled,
+                  onClick: () => !option.disabled && handleSelect(option.value),
+                  children: [
+                    option.label,
+                    option.value === value && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `${baseClass}__check material-symbols-rounded`,
+                        "aria-hidden": "true",
+                        children: "check"
+                      }
+                    )
+                  ]
+                },
+                option.value
+              ))
+            }
+          )
+        ]
+      }
+    );
   }
 );
 Dropdown.displayName = "Dropdown";

package/components/DropdownMenu/DropdownMenu.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useCallback, useEffect } from "react";
+import React, { useState, useRef, useCallback, useEffect } from "react";
 import "./DropdownMenu.css";
 import "../../fonts/material-symbols.css";
 function collectItems(entries) {
@@ -291,19 +291,22 @@ const DropdownMenu = ({
   ].filter(Boolean).join(" ");
   const itemCounter = { count: 0 };
   return /* @__PURE__ */ jsxs("div", { className: classes, ref: rootRef, children: [
-    /* @__PURE__ */ jsx(
-      "div",
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__trigger`, children: React.isValidElement(trigger) ? React.cloneElement(trigger, {
+      "aria-haspopup": "menu",
+      "aria-expanded": isOpen,
+      onClick: handleToggle,
+      onKeyDown: handleKeyDown
+    }) : /* @__PURE__ */ jsx(
+      "button",
       {
-        className: `${baseClass}__trigger`,
-        role: "button",
-        tabIndex: 0,
+        type: "button",
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
         onClick: handleToggle,
         onKeyDown: handleKeyDown,
         children: trigger
       }
-    ),
+    ) }),
     isOpen && /* @__PURE__ */ jsx(
       "ul",
       {

package/components/Field/Field.css

@@ -0,0 +1,80 @@
+/* ============================================
+   FIELD COMPONENT
+   Label, required marker, and helper/error text
+   shared by every labelled form control.
+
+   Layout (flex column, gap) deliberately stays on the
+   consuming component's own root class — Field only
+   owns the label and helper scaffolding, so adopting it
+   changes no spacing.
+   ============================================ */
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-field__label {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-field__required {
+  color: var(--color-core-accent-coral);
+}
+
+/* ============================================
+   FOOTER — only rendered when an `aside` is supplied
+   (a character counter, a unit). Without one the helper
+   sits directly in the field column, so adopting Field
+   adds no wrapper to existing markup.
+   ============================================ */
+
+.ds-field__footer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+}
+
+/* ============================================
+   HELPER TEXT
+   ============================================ */
+
+.ds-field__helper {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+  margin: 0;
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-field--error .ds-field__helper {
+  color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-field--disabled .ds-field__label {
+  color: var(--color-input-text-disabled);
+}
+
+/* ============================================
+   COMPACT SIZE
+   ============================================ */
+
+.ds-field--compact .ds-field__label {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+}