@gtivr4/a1-design-system-react 0.3.1 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtivr4/a1-design-system-react",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "React components for the A1 token-driven design system.",
   "type": "module",
   "main": "./src/index.js",

package/src/components/calendar/Calendar.jsx

@@ -42,6 +42,12 @@ export function Calendar({
   dimPast = true,
   variant = "scroll",
   todayButton = false,
+  selectable = false,
+  selectedDate,
+  defaultSelectedDate,
+  onChange,
+  minDate,
+  maxDate,
   className = "",
   ...props
 }) {
@@ -63,6 +69,35 @@ export function Calendar({
   const [viewMonth, setViewMonth] = useState(centerMonth);
   const currentMonthRef           = useRef(null);
 
+  // Selection — controlled when selectedDate is provided, otherwise internal state
+  const isControlled = selectedDate !== undefined;
+  const [internalSelected, setInternalSelected] = useState(defaultSelectedDate ?? null);
+  const selected = isControlled ? selectedDate : internalSelected;
+
+  function isSameDay(d, y, m, day) {
+    return d instanceof Date && d.getFullYear() === y && d.getMonth() === m && d.getDate() === day;
+  }
+
+  function isDayDisabled(y, m, day) {
+    const date = new Date(y, m, day);
+    if (minDate) {
+      const min = new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate());
+      if (date < min) return true;
+    }
+    if (maxDate) {
+      const max = new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate());
+      if (date > max) return true;
+    }
+    return false;
+  }
+
+  function handleDayClick(y, m, day) {
+    if (isDayDisabled(y, m, day)) return;
+    const date = new Date(y, m, day);
+    if (!isControlled) setInternalSelected(date);
+    onChange?.(date);
+  }
+
   // ── Localised strings ─────────────────────────────────────────
 
   // Month names
@@ -210,15 +245,30 @@ export function Calendar({
                   dimPast &&
                   new Date(year, month, day) < new Date(todayYear, todayMonth, todayDay);
 
+                const isSelected = isSameDay(selected, year, month, day);
+                const isDisabled = isDayDisabled(year, month, day);
+
                 return (
                   <td
                     key={di}
                     className={[
                       "a1-calendar__day",
-                      isToday && "a1-calendar__day--today",
-                      isPast  && "a1-calendar__day--past",
+                      isToday    && "a1-calendar__day--today",
+                      isPast     && "a1-calendar__day--past",
+                      isSelected && "a1-calendar__day--selected",
+                      isDisabled && "a1-calendar__day--disabled",
                     ].filter(Boolean).join(" ")}
                     aria-current={isToday ? "date" : undefined}
+                    aria-selected={isSelected ? true : undefined}
+                    aria-disabled={isDisabled ? true : undefined}
+                    tabIndex={selectable && !isDisabled ? 0 : undefined}
+                    onClick={selectable && !isDisabled ? () => handleDayClick(year, month, day) : undefined}
+                    onKeyDown={selectable && !isDisabled ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleDayClick(year, month, day);
+                      }
+                    } : undefined}
                   >
                     <span className="a1-calendar__day-number" aria-hidden="true">
                       {day}
@@ -235,17 +285,27 @@ export function Calendar({
 
   // ── Paginated variant ─────────────────────────────────────────
   if (variant === "paginated") {
-    const yearStart = todayYear - 10;
-    const yearEnd   = todayYear + 15;
+    const minYear = minDate ? minDate.getFullYear() : todayYear - 10;
+    const minMon  = minDate ? minDate.getMonth()    : 0;
+    const maxYear = maxDate ? maxDate.getFullYear() : todayYear + 15;
+    const maxMon  = maxDate ? maxDate.getMonth()    : 11;
+
+    const yearStart = minDate ? minDate.getFullYear() : todayYear - 10;
+    const yearEnd   = maxDate ? maxDate.getFullYear() : todayYear + 15;
     const years     = Array.from({ length: yearEnd - yearStart + 1 }, (_, i) => yearStart + i);
 
+    const prevAtMin = viewYear === minYear && viewMonth === minMon;
+    const nextAtMax = viewYear === maxYear && viewMonth === maxMon;
+
     const goPrev = () => {
+      if (prevAtMin) return;
       const p = addMonths(viewYear, viewMonth, -1);
       setViewYear(p.year);
       setViewMonth(p.month);
     };
 
     const goNext = () => {
+      if (nextAtMax) return;
       const n = addMonths(viewYear, viewMonth, 1);
       setViewYear(n.year);
       setViewMonth(n.month);
@@ -263,19 +323,19 @@ export function Calendar({
 
     return (
       <div
-        className={["a1-calendar", "a1-calendar--paginated", className].filter(Boolean).join(" ")}
+        className={["a1-calendar", "a1-calendar--paginated", selectable && "a1-calendar--selectable", className].filter(Boolean).join(" ")}
         {...props}
       >
         <div className="a1-calendar__inner">
           <div className="a1-calendar__nav">
 
             <span className="a1-calendar__nav-wide">
-              <Button variant="tertiary" size="sm" icon={isRtl ? "chevron_right" : "chevron_left"} iconPosition="start" onClick={goPrev}>
+              <Button variant="tertiary" size="sm" icon={isRtl ? "chevron_right" : "chevron_left"} iconPosition="start" onClick={goPrev} disabled={prevAtMin}>
                 {prevMonthLabel}
               </Button>
             </span>
             <span className="a1-calendar__nav-narrow">
-              <IconButton icon={isRtl ? "chevron_right" : "chevron_left"} label={prevMonthLabel} variant="tertiary" onClick={goPrev} />
+              <IconButton icon={isRtl ? "chevron_right" : "chevron_left"} label={prevMonthLabel} variant="tertiary" onClick={goPrev} disabled={prevAtMin} />
             </span>
 
             <div className="a1-calendar__nav-label">
@@ -286,9 +346,12 @@ export function Calendar({
                 value={viewMonth}
                 onChange={e => setViewMonth(Number(e.target.value))}
               >
-                {MONTHS.map((name, i) => (
-                  <option key={i} value={i}>{name}</option>
-                ))}
+                {MONTHS.map((name, i) => {
+                  const disabled =
+                    (viewYear === minYear && i < minMon) ||
+                    (viewYear === maxYear && i > maxMon);
+                  return <option key={i} value={i} disabled={disabled}>{name}</option>;
+                })}
               </SelectField>
               <SelectField
                 className="a1-calendar__nav-field"
@@ -327,12 +390,12 @@ export function Calendar({
             </div>
 
             <span className="a1-calendar__nav-wide">
-              <Button variant="tertiary" size="sm" icon={isRtl ? "chevron_left" : "chevron_right"} iconPosition="end" onClick={goNext}>
+              <Button variant="tertiary" size="sm" icon={isRtl ? "chevron_left" : "chevron_right"} iconPosition="end" onClick={goNext} disabled={nextAtMax}>
                 {nextMonthLabel}
               </Button>
             </span>
             <span className="a1-calendar__nav-narrow">
-              <IconButton icon={isRtl ? "chevron_left" : "chevron_right"} label={nextMonthLabel} variant="tertiary" onClick={goNext} />
+              <IconButton icon={isRtl ? "chevron_left" : "chevron_right"} label={nextMonthLabel} variant="tertiary" onClick={goNext} disabled={nextAtMax} />
             </span>
 
           </div>
@@ -351,7 +414,7 @@ export function Calendar({
 
   return (
     <div
-      className={["a1-calendar", className].filter(Boolean).join(" ")}
+      className={["a1-calendar", selectable && "a1-calendar--selectable", className].filter(Boolean).join(" ")}
       {...props}
     >
       <div className="a1-calendar__inner">

package/src/components/calendar/calendar.css

@@ -110,6 +110,50 @@
   background: var(--semantic-color-surface-raised);
 }
 
+/* ── Selected — full-cell fill (display and selectable modes) ─── */
+
+.a1-calendar__day--selected {
+  background: var(--semantic-color-action-background);
+  color: var(--semantic-color-text-inverse);
+}
+
+/* ── Disabled (out of range) — same surface as past dates ──────── */
+
+.a1-calendar__day--disabled {
+  background: var(--semantic-color-surface-raised);
+}
+
+/* ── Selectable mode (opt-in via selectable prop) ──────────────── */
+
+.a1-calendar--selectable .a1-calendar__day:not(.a1-calendar__day--empty):not(.a1-calendar__day--disabled) {
+  cursor: pointer;
+}
+.a1-calendar--selectable .a1-calendar__day--disabled {
+  cursor: not-allowed;
+}
+
+/* Today — neutral ring instead of action fill (yields to selected) */
+.a1-calendar--selectable .a1-calendar__day--today:not(.a1-calendar__day--selected) {
+  background: transparent;
+  color: var(--semantic-color-text-default);
+}
+.a1-calendar--selectable .a1-calendar__day--today:not(.a1-calendar__day--selected) .a1-calendar__day-number {
+  outline: 2px solid var(--semantic-color-text-default);
+  outline-offset: -1px;
+}
+
+/* Full-cell hover for non-selected, non-disabled days */
+.a1-calendar--selectable .a1-calendar__day:not(.a1-calendar__day--empty):not(.a1-calendar__day--disabled):not(.a1-calendar__day--selected):hover {
+  background: var(--semantic-color-surface-panel);
+  color: var(--semantic-color-text-default);
+}
+
+/* Focus ring */
+.a1-calendar--selectable .a1-calendar__day:focus-visible {
+  outline: var(--component-field-focus-ring-width) solid var(--component-field-focus-ring-color);
+  outline-offset: -2px;
+}
+
 /* ── Paginated variant — nav bar ─────────────────────────── */
 
 .a1-calendar__nav {
@@ -178,6 +222,33 @@
     color: var(--semantic-color-text-inverse);
   }
 
+  /* Selected: revert to circle in narrow view */
+  .a1-calendar__day--selected {
+    background: transparent;
+    color: var(--semantic-color-text-default);
+  }
+  .a1-calendar__day--selected .a1-calendar__day-number {
+    background: var(--semantic-color-action-background);
+    color: var(--semantic-color-text-inverse);
+  }
+
+  /* Selectable: today ring (suppress action-bg circle from non-selectable narrow rule) */
+  .a1-calendar--selectable .a1-calendar__day--today:not(.a1-calendar__day--selected) .a1-calendar__day-number {
+    background: transparent;
+    color: var(--semantic-color-text-default);
+    outline: 2px solid var(--semantic-color-text-default);
+    outline-offset: -1px;
+  }
+
+  /* Selectable: hover as circle in narrow */
+  .a1-calendar--selectable .a1-calendar__day:not(.a1-calendar__day--empty):not(.a1-calendar__day--disabled):not(.a1-calendar__day--selected):hover {
+    background: transparent;
+    color: var(--semantic-color-text-default);
+  }
+  .a1-calendar--selectable .a1-calendar__day:not(.a1-calendar__day--empty):not(.a1-calendar__day--disabled):not(.a1-calendar__day--selected):hover .a1-calendar__day-number {
+    background: var(--semantic-color-surface-panel);
+  }
+
   .a1-calendar__nav {
     padding-block: var(--component-calendar-heading-padding-block-compact);
   }

package/src/components/choice-group/ChoiceGroup.jsx

@@ -16,6 +16,7 @@ export function ChoiceGroup({
   size        = "default",
   columns,
   multiple    = false,
+  inlineIcon  = false,
   required    = false,
   name,
   options     = [],
@@ -76,6 +77,7 @@ export function ChoiceGroup({
     "a1-choice-group",
     resolvedSize !== "default" && `a1-choice-group--${resolvedSize}`,
     multiple ? "a1-choice-group--multiple" : "a1-choice-group--single",
+    inlineIcon && "a1-choice-group--inline-icon",
     isFixedColumns && "a1-choice-group--fixed-columns",
     responsiveClass,
     error   && "a1-choice-group--error",

package/src/components/choice-group/choice-group.css

@@ -317,6 +317,17 @@
   background-size: 80%;
 }
 
+/* ─── Inline icon layout ────────────────────────────────────────────────────── */
+
+.a1-choice-group--inline-icon .a1-choice-item {
+  flex-direction: row;
+  align-items: center;
+}
+
+.a1-choice-group--inline-icon .a1-choice-item__icon {
+  flex-shrink: 0;
+}
+
 /* ─── Error state ───────────────────────────────────────────────────────────── */
 
 .a1-choice-group--error

package/src/components/data-table/DataTable.jsx

@@ -22,8 +22,8 @@ import "./data-table.css";
  * }>
  * rows: Array<Record<string, any>>
  * getRowId?: (row: Record<string, any>, index: number) => string | number
- * density?: "auto" | "comfortable" | "default" | "compact"
- *   "auto" (default) — switches between densities based on available width and column definitions
+ * size?: "comfortable" | "default" | "compact"
+ *   omit (default) — switches between densities automatically based on available container width
  */
 
 // Estimated minimum content width per column type at a "neutral" padding level
@@ -193,7 +193,7 @@ function SelectionCheckbox({ checked, indeterminate = false, label, onChange })
 export function DataTable({
   columns = [],
   rows = [],
-  density = "default",
+  size,
   zebra = false,
   scrollable = false,
   caption,
@@ -238,14 +238,14 @@ export function DataTable({
   const [internalSearchColumn, setInternalSearchColumn] = useState(defaultSearchColumn);
   const [internalSelectedRowIds, setInternalSelectedRowIds] = useState(() => normalizeRowIds(defaultSelectedRowIds));
 
-  const isAuto = density === "auto";
+  const isAuto = size === undefined;
   const isSortControlled = sort !== undefined;
   const isPageControlled = page !== undefined;
   const isFilterControlled = filterValue !== undefined;
   const isSearchControlled = searchValue !== undefined;
   const isSearchColumnControlled = searchColumn !== undefined;
   const isSelectionControlled = selectedRowIds !== undefined;
-  const activeDensity = isAuto ? autoDensity : density;
+  const activeDensity = isAuto ? autoDensity : size;
   const activeSort = isSortControlled ? normalizeSort(sort) : internalSort;
   const activePage = isPageControlled ? page : internalPage;
   const activeFilterValue = isFilterControlled

package/src/components/field/SelectField.jsx

@@ -6,7 +6,7 @@ import { FieldsetContext } from "../fieldset/FieldsetContext.js";
 import "./field.css";
 
 const SIZES           = ["comfortable", "default", "compact"];
-const LABEL_POSITIONS = ["above", "side"];
+const LABEL_POSITIONS = ["above", "before"];
 
 export const SelectField = forwardRef(function SelectField({
   label,

package/src/components/field/TextField.jsx

@@ -5,7 +5,7 @@ import { FieldsetContext } from "../fieldset/FieldsetContext.js";
 import "./field.css";
 
 const SIZES           = ["comfortable", "default", "compact"];
-const LABEL_POSITIONS = ["above", "side"];
+const LABEL_POSITIONS = ["above", "before"];
 
 export const TextField = forwardRef(function TextField({
   label,

package/src/components/field/TextareaField.jsx

@@ -6,7 +6,7 @@ import "./field.css";
 import "./textarea-field.css";
 
 const SIZES           = ["comfortable", "default", "compact"];
-const LABEL_POSITIONS = ["above", "side"];
+const LABEL_POSITIONS = ["above", "before"];
 const ROW_SIZES       = { sm: 2, md: 4, lg: 8, xl: 12 };
 
 function resolveRows(rows) {

package/src/components/field/field.css

@@ -336,9 +336,9 @@
   color: var(--semantic-color-status-error-background);
 }
 
-/* ─── Side label layout ────────────────────────────────────────────────────── */
+/* ─── Before label layout ───────────────────────────────────────────────────── */
 
-.a1-field--label-side {
+.a1-field--label-before {
   display: grid;
   grid-template-columns: var(--a1-field-side-label-width) 1fr;
   column-gap: var(--base-spacing-16);
@@ -346,12 +346,12 @@
   align-items: start;
 }
 
-.a1-field--label-side .a1-field__label {
+.a1-field--label-before .a1-field__label {
   padding-top: calc((var(--a1-field-height) - 1lh) / 2);
   padding-bottom: 0;
 }
 
-.a1-field--label-side .a1-field__message {
+.a1-field--label-before .a1-field__message {
   grid-column: 1;
   grid-row: 2;
   /* Fine-tuned margin: overrides the base margin-top added for the above-label
@@ -359,22 +359,22 @@
   margin-top: calc((var(--a1-field-label-size) * 1.5 - var(--a1-field-height)) / 2 + var(--base-spacing-2));
 }
 
-/* ─── Side label → stacked on xs/sm ───────────────────────────────────────── */
+/* ─── Before label → stacked on xs/sm ─────────────────────────────────────── */
 
 @media (--bp-sm-down) {
-  .a1-field--label-side {
+  .a1-field--label-before {
     display: flex;
     flex-direction: column;
     gap: var(--a1-field-gap); /* restore: grid overrode row-gap to base-spacing-4 */
     align-items: stretch;     /* restore: grid set align-items: start */
   }
 
-  .a1-field--label-side .a1-field__label {
+  .a1-field--label-before .a1-field__label {
     padding-top: 0;
     padding-bottom: var(--a1-field-gap);
   }
 
-  .a1-field--label-side .a1-field__message {
+  .a1-field--label-before .a1-field__message {
     margin-top: var(--a1-field-gap);
   }
 }

package/src/components/field-row/FieldRow.jsx

@@ -5,9 +5,9 @@ import "./field-row.css";
 export function FieldRow({ children, className = "", ...props }) {
   const ctx = useContext(FieldsetContext);
 
-  // Side-label fields already use an internal two-column grid;
+  // Before-label fields already use an internal two-column grid;
   // stacking the row prevents layout conflicts.
-  const stacked = ctx?.labelPosition === "side";
+  const stacked = ctx?.labelPosition === "before";
 
   const classes = [
     "a1-field-row",

package/src/components/fieldset/Fieldset.jsx

@@ -2,7 +2,7 @@ import { FieldsetContext } from "./FieldsetContext.js";
 import "./fieldset.css";
 
 const SIZES           = ["comfortable", "default", "compact"];
-const LABEL_POSITIONS = ["above", "side"];
+const LABEL_POSITIONS = ["above", "before"];
 
 export function Fieldset({
   legend,

package/src/components/grid/Grid.jsx

@@ -2,6 +2,7 @@ import "./grid.css";
 
 const SPACING_KEYS = [1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 64, 96, 128];
 const gapSizes = {
+  xs:  "var(--base-spacing-4)",
   sm:  "var(--base-spacing-8)",
   md:  "var(--base-spacing-16)",
   lg:  "var(--base-spacing-24)",

package/src/components/heading/Heading.jsx

@@ -7,7 +7,7 @@ const margins = ["sm", "md", "lg"];
 const levels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const breakpoints = ["xs", "sm", "md", "lg", "xl"];
 const textWraps = ["balance"];
-const aligns = ["left", "center", "right"];
+const aligns = ["left", "center", "right", "start", "end"];
 
 const levelDefaults = { h1: "xl", h2: "lg", h3: "md", h4: "sm", h5: "xs", h6: "xs" };
 

package/src/components/heading/heading.css

@@ -88,6 +88,8 @@
 .a1-heading--align-left   { text-align: start;  }
 .a1-heading--align-center { text-align: center; }
 .a1-heading--align-right  { text-align: end;    }
+.a1-heading--align-start  { text-align: start;  }
+.a1-heading--align-end    { text-align: end;    }
 
 /* Expressive marks */
 .a1-heading-mark {

package/src/components/notification/Notification.jsx

@@ -1,6 +1,6 @@
 import "./notification.css";
 
-const variants = ["default", "error", "success", "warn", "info"];
+const statuses = ["neutral", "error", "success", "warn", "info"];
 const positions = ["top-right", "top-left", "bottom-right", "bottom-left"];
 
 function formatCount(n, max) {
@@ -15,11 +15,11 @@ export function Notification({
   count,
   label,
   dot = false,
-  variant = "default",
+  status = "neutral",
   position = "top-right",
   max = 99,
 }) {
-  const resolvedVariant = variants.includes(variant) ? variant : "default";
+  const resolvedStatus = statuses.includes(status) ? status : "neutral";
   const resolvedPosition = positions.includes(position) ? position : "top-right";
 
   const isDot = dot || (count === undefined && label === undefined);
@@ -35,7 +35,7 @@ export function Notification({
 
   const classes = [
     "a1-notification",
-    `a1-notification--${resolvedVariant}`,
+    `a1-notification--${resolvedStatus}`,
     `a1-notification--${resolvedPosition}`,
     isDot && "a1-notification--dot",
   ]

package/src/components/notification/notification.css

@@ -43,7 +43,7 @@
 
 /* ── Variants ───────────────────────────────────────────────────────────── */
 
-.a1-notification--default {
+.a1-notification--neutral {
   --a1-notification-background: var(--base-color-neutral-600);
   --a1-notification-foreground: var(--base-color-neutral-0);
 }

package/src/components/paragraph/Paragraph.jsx

@@ -4,7 +4,7 @@ const sizes = ["xs", "sm", "md", "lg", "xl"];
 const colors = ["default", "muted"];
 const breakpoints = ["xs", "sm", "md", "lg", "xl"];
 const textWraps = ["balance"];
-const aligns = ["left", "center", "right"];
+const aligns = ["left", "center", "right", "start", "end"];
 
 function isResponsiveSize(size) {
   return size && typeof size === "object" && !Array.isArray(size);

package/src/components/paragraph/paragraph.css

@@ -46,6 +46,8 @@
 .a1-paragraph--align-left   { text-align: start;  }
 .a1-paragraph--align-center { text-align: center; }
 .a1-paragraph--align-right  { text-align: end;    }
+.a1-paragraph--align-start  { text-align: start;  }
+.a1-paragraph--align-end    { text-align: end;    }
 
 .a1-paragraph + .a1-paragraph,
 .a1-paragraph + .a1-heading {

package/src/components/section/Section.jsx

@@ -31,7 +31,7 @@ export function Section({
   inverse = false,
   contentWidth,
   height,
-  alignment,
+  align,
   className = "",
   children,
   ...props
@@ -72,14 +72,14 @@ export function Section({
     classes.push(`a1-section--height-${height}`);
   }
 
-  if (typeof alignment === "string") {
-    if (VALID_ALIGNMENTS.includes(alignment)) {
-      classes.push(`a1-section--align-${alignment}`);
+  if (typeof align === "string") {
+    if (VALID_ALIGNMENTS.includes(align)) {
+      classes.push(`a1-section--align-${align}`);
     }
-  } else if (alignment && typeof alignment === "object") {
-    for (const [bp, align] of Object.entries(alignment)) {
-      if (VALID_ALIGNMENTS.includes(align)) {
-        classes.push(`a1-section--${bp}-align-${align}`);
+  } else if (align && typeof align === "object") {
+    for (const [bp, alignVal] of Object.entries(align)) {
+      if (VALID_ALIGNMENTS.includes(alignVal)) {
+        classes.push(`a1-section--${bp}-align-${alignVal}`);
       }
     }
   }

package/src/components/section/section.css

@@ -111,7 +111,7 @@
 /* ── Alignment ─────────────────────────────────────────────────────────────── */
 /*
  * Aligns direct children as layout items.
- * Use the object prop for responsive changes: alignment={{ xs: "center", lg: "left" }}
+ * Use the object prop for responsive changes: align={{ xs: "center", lg: "left" }}
  */
 
 .a1-section[class*="-align-"] {
@@ -206,10 +206,11 @@
 
 /* ── Padding — static (with built-in responsive scaling) ───────────────────── */
 /*
- * Three tiers scale across three breakpoints:
+ * Four tiers scale across three breakpoints:
  *   lg  96/64  →  96/40 at ≤1024  →  64/24 at ≤640
  *   md  64/40  →  40/24 at ≤1024  →  32/16 at ≤640
  *   sm  32/24  →  24/16 at ≤1024  →  16/12 at ≤640
+ *   xs  16/16  →  12/12 at ≤1024  →   8/8  at ≤640
  * Block (top/bottom) / Inline (left/right)
  */
 

package/src/components/segmented-control/segmented.css

@@ -42,7 +42,6 @@
 .a1-segment[aria-checked="true"] {
   background: var(--semantic-color-surface-page);
   color: var(--semantic-color-text-default);
-  font-weight: var(--component-segmented-font-weight-active);
   box-shadow: var(--semantic-shadow-xs);
 }
 

package/src/components/status-bar/StatusBar.jsx

@@ -0,0 +1,92 @@
+import { useId, useState, useEffect } from "react";
+import { Button } from "../button/Button.jsx";
+import { useLabel } from "../labels/Labels.jsx";
+import "./status-bar.css";
+
+const SIZES     = ["sm", "md", "lg"];
+const POSITIONS = ["above", "below", "before", "after"];
+
+export function StatusBar({
+  value         = 0,
+  max           = 100,
+  label,
+  labelPosition = "above",
+  size          = "md",
+  indeterminate = false,
+  className     = "",
+  ...props
+}) {
+  const labelId = useId();
+
+  const pauseLabel = useLabel("statusBar.pause", "Pause");
+  const playLabel  = useLabel("statusBar.play",  "Play");
+
+  const [paused,    setPaused]    = useState(false);
+  const [showPause, setShowPause] = useState(false);
+
+  useEffect(() => {
+    if (!indeterminate) {
+      setShowPause(false);
+      setPaused(false);
+      return;
+    }
+    const t = setTimeout(() => setShowPause(true), 3000);
+    return () => clearTimeout(t);
+  }, [indeterminate]);
+
+  const resolvedSize     = SIZES.includes(size) ? size : "md";
+  const resolvedPosition = POSITIONS.includes(labelPosition) ? labelPosition : "above";
+
+  const pct = Math.min(100, Math.max(0, max > 0 ? (value / max) * 100 : 0));
+  const isLabelFirst = resolvedPosition === "above" || resolvedPosition === "before";
+
+  const classes = [
+    "a1-status-bar",
+    resolvedSize !== "md" && `a1-status-bar--${resolvedSize}`,
+    `a1-status-bar--${resolvedPosition}`,
+    indeterminate && "a1-status-bar--indeterminate",
+    indeterminate && paused && "a1-status-bar--paused",
+    className,
+  ].filter(Boolean).join(" ");
+
+  const labelEl = label ? (
+    <span id={labelId} className="a1-status-bar__label">{label}</span>
+  ) : null;
+
+  return (
+    <div className={classes}>
+      {isLabelFirst && labelEl}
+      <div className="a1-status-bar__bar-row">
+        <div
+          className="a1-status-bar__track"
+          role="progressbar"
+          aria-valuenow={indeterminate ? undefined : value}
+          aria-valuemin={0}
+          aria-valuemax={max}
+          aria-labelledby={label ? labelId : undefined}
+          {...props}
+        >
+          <div
+            className={[
+              "a1-status-bar__fill",
+              indeterminate && "a1-status-bar__fill--indeterminate",
+            ].filter(Boolean).join(" ")}
+            style={indeterminate ? undefined : { inlineSize: `${pct}%` }}
+          />
+        </div>
+        {showPause && (
+          <Button
+            size="sm"
+            variant="secondary"
+            icon={paused ? "play_arrow" : "pause"}
+            className="a1-status-bar__pause"
+            onClick={() => setPaused(p => !p)}
+          >
+            {paused ? playLabel : pauseLabel}
+          </Button>
+        )}
+      </div>
+      {!isLabelFirst && labelEl}
+    </div>
+  );
+}

package/src/components/status-bar/status-bar.css

@@ -0,0 +1,146 @@
+/* ─── StatusBar ─────────────────────────────────────────────────────────────── */
+
+.a1-status-bar {
+  --a1-sb-height:       var(--component-status-bar-md-height);
+  --a1-sb-track-bg:     var(--component-status-bar-track-background);
+  --a1-sb-fill-bg:      var(--component-status-bar-fill-background);
+  --a1-sb-radius:       var(--component-status-bar-border-radius);
+  --a1-sb-border-width: var(--component-status-bar-border-width);
+  --a1-sb-border-color: var(--component-status-bar-border-color);
+  --a1-sb-label-gap:    var(--component-status-bar-label-gap);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--a1-sb-label-gap);
+  inline-size: 100%;
+}
+
+/* ─── Sizes ─────────────────────────────────────────────────────────────────── */
+
+.a1-status-bar--sm { --a1-sb-height: var(--component-status-bar-sm-height); }
+.a1-status-bar--lg { --a1-sb-height: var(--component-status-bar-lg-height); }
+
+/* ─── Label positions ───────────────────────────────────────────────────────── */
+
+/* below: column layout, DOM order is [bar-row, label] so no CSS change needed */
+
+.a1-status-bar--before,
+.a1-status-bar--after {
+  flex-direction: row;
+  align-items: center;
+}
+
+.a1-status-bar--before .a1-status-bar__bar-row,
+.a1-status-bar--after .a1-status-bar__bar-row {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.a1-status-bar--before .a1-status-bar__label,
+.a1-status-bar--after .a1-status-bar__label {
+  flex-shrink: 0;
+}
+
+/* ─── Bar row (track + optional pause button) ───────────────────────────────── */
+
+.a1-status-bar__bar-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--base-spacing-8);
+}
+
+.a1-status-bar__bar-row .a1-status-bar__track {
+  flex: 1;
+  min-inline-size: 0;
+  inline-size: auto;
+}
+
+/* ─── Label ─────────────────────────────────────────────────────────────────── */
+
+.a1-status-bar__label {
+  display: block;
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-sm);
+  font-weight: var(--base-font-weight-regular);
+  color: var(--semantic-color-text-default);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+/* ─── Track ─────────────────────────────────────────────────────────────────── */
+
+.a1-status-bar__track {
+  position: relative;
+  display: flex; /* flex direction inherits writing mode — fills from inline-start in RTL */
+  block-size: var(--a1-sb-height);
+  inline-size: 100%;
+  background-color: var(--a1-sb-track-bg);
+  border-radius: var(--a1-sb-radius);
+  border: var(--a1-sb-border-width) solid var(--a1-sb-border-color);
+  overflow: hidden;
+}
+
+/* ─── Fill ──────────────────────────────────────────────────────────────────── */
+
+/* Flex child — grows from inline-start, which in RTL means it grows from the right */
+.a1-status-bar__fill {
+  flex-shrink: 0;
+  block-size: 100%;
+  inline-size: 0;
+  background-color: var(--a1-sb-fill-bg);
+  border-radius: inherit;
+  transition: inline-size var(--semantic-motion-duration-normal) var(--semantic-motion-easing-standard);
+}
+
+/* ─── Indeterminate (loading) ───────────────────────────────────────────────── */
+
+/* Absolute positioning takes the fill out of flex flow for the sweep animation */
+.a1-status-bar__fill--indeterminate {
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  inline-size: 35%;
+  animation: a1-sb-indeterminate var(--component-status-bar-indeterminate-duration) ease-in-out infinite;
+}
+
+/* RTL: anchor to the physical right and reverse the sweep direction */
+[dir="rtl"] .a1-status-bar__fill--indeterminate {
+  left: auto;
+  right: 0;
+  animation-direction: reverse;
+}
+
+.a1-status-bar--paused .a1-status-bar__fill--indeterminate {
+  animation-play-state: paused;
+}
+
+@keyframes a1-sb-indeterminate {
+  0%   { transform: translateX(-115%); }
+  100% { transform: translateX(300%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .a1-status-bar__fill--indeterminate {
+    animation: none;
+    inline-size: 100%;
+    opacity: 0.4;
+  }
+}
+
+/* ─── Pause / play button ────────────────────────────────────────────────────── */
+
+.a1-status-bar__pause {
+  flex-shrink: 0;
+  animation: a1-sb-pause-appear var(--semantic-motion-duration-normal) var(--semantic-motion-easing-enter);
+}
+
+@keyframes a1-sb-pause-appear {
+  from { opacity: 0; transform: scale(0.75); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .a1-status-bar__pause {
+    animation: none;
+  }
+}

package/src/index.js

@@ -5,6 +5,7 @@ export { Blockquote } from "./components/blockquote/Blockquote.jsx";
 export { Breadcrumb } from "./components/breadcrumb/Breadcrumb.jsx";
 export { Notification } from "./components/notification/Notification.jsx";
 export { Snackbar } from "./components/snackbar/Snackbar.jsx";
+export { StatusBar } from "./components/status-bar/StatusBar.jsx";
 export { Bleed } from "./components/bleed/Bleed.jsx";
 export { IconButton } from "./components/icon-button/IconButton.jsx";
 export { Button } from "./components/button/Button.jsx";export { ButtonContainer } from "./components/button-container/ButtonContainer.jsx";

package/src/themes.css

@@ -52,6 +52,7 @@ html.a1-theme-accessible {
   --component-side-nav-border-width: 2px;
   --component-tab-border-width: 2px;
   --component-top-header-border-width: 2px;
+  --component-status-bar-border-width: 2px;
   --component-button-font-family: var(--theme-a1-accessible-font-family-body);
   --component-paragraph-font-family: var(--theme-a1-accessible-font-family-body);
   --component-heading-font-family-heading: var(--theme-a1-accessible-font-family-heading);

package/src/tokens.css

@@ -646,6 +646,16 @@
   --component-side-nav-item-font-line-height: 1.5;
   --component-side-nav-item-active-font-weight: 500;
   --component-side-nav-item-chevron-size: 1.125rem;
+  --component-status-bar-sm-height: 0.25rem;
+  --component-status-bar-md-height: 0.5rem;
+  --component-status-bar-lg-height: 0.75rem;
+  --component-status-bar-border-radius: 624.9375rem;
+  --component-status-bar-border-width: 0;
+  --component-status-bar-border-color: #a6b2c4;
+  --component-status-bar-track-background: #e1e8f3;
+  --component-status-bar-fill-background: #7c3aed;
+  --component-status-bar-label-gap: 0.5rem;
+  --component-status-bar-indeterminate-duration: 1400ms;
   --component-switch-track-width: 2.5rem;
   --component-switch-track-height: 1.375rem;
   --component-switch-thumb-size: 1rem;