@gtivr4/a1-design-system-react 0.3.0 → 0.4.0

package/package.json

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

package/src/color-scheme.css

@@ -9,6 +9,16 @@
   box-sizing: border-box;
 }
 
+/* ─── Root typeface ──────────────────────────────────────────────────────────
+   Apply the design system body font to the document so unscoped elements
+   inherit the correct typeface without requiring any A1 component to be
+   rendered first. Without this, the browser default (serif) is used until a
+   component's own CSS loads. */
+
+body {
+  font-family: var(--component-paragraph-font-family);
+}
+
 /* ─── Form field interaction tokens — light mode defaults ────────────────────
    Single source of truth for hover, active, and read-only states across all
    form field components. Overridden in every dark-mode context below.

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/data-table/data-table-filters.css

@@ -104,7 +104,7 @@
 }
 
 .a1-dt-filters__chip-icon {
-  font-size: 18px;
+  font-size: var(--component-menu-item-icon-size);
   flex-shrink: 0;
   margin-inline-start: -2px;
 }
@@ -134,7 +134,7 @@
   border-radius: 9999px;
   background: var(--semantic-color-action-background);
   color: var(--semantic-color-action-foreground);
-  font-size: 11px;
+  font-size: var(--component-tab-count-font-size);
   font-weight: 600;
   line-height: 1;
   margin-inline-start: var(--base-spacing-4);

package/src/components/data-table/data-table.css

@@ -263,7 +263,7 @@
   border-radius: 9999px;
   background: var(--semantic-color-action-background);
   color: var(--semantic-color-action-foreground);
-  font-size: 10px;
+  font-size: var(--semantic-font-size-body-xs);
   font-weight: 600;
   letter-spacing: 0.02em;
   user-select: none;
@@ -272,7 +272,7 @@
 .a1-data-table--compact .a1-data-table__avatar {
   width: 22px;
   height: 22px;
-  font-size: 9px;
+  font-size: var(--component-notification-font-size);
 }
 
 .a1-data-table__actions {

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

@@ -2,7 +2,7 @@ import "../../themes.css";
 import "../../color-scheme.css";
 import "./section.css";
 
-const VALID_PADDING = ["lg", "md", "sm", "none"];
+const VALID_PADDING = ["lg", "md", "sm", "xs", "none"];
 const VALID_SURFACES = ["page", "panel", "raised"];
 const VALID_GAPS = ["xs", "sm", "md", "lg"];
 const VALID_GRADIENTS = ["accent", "highlight", "info", "success", "warn"];
@@ -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)
  */
 
@@ -217,6 +218,11 @@
   padding: 0;
 }
 
+.a1-section--padding-xs {
+  padding-block: var(--base-spacing-16);
+  padding-inline: var(--base-spacing-16);
+}
+
 .a1-section--padding-sm {
   padding-block: var(--base-spacing-32);
   padding-inline: var(--base-spacing-24);
@@ -233,12 +239,14 @@
 }
 
 @media (--bp-md-down) {
+  .a1-section--padding-xs { padding-block: var(--base-spacing-12); padding-inline: var(--base-spacing-12); }
   .a1-section--padding-sm { padding-block: var(--base-spacing-24); padding-inline: var(--base-spacing-16); }
   .a1-section--padding-md { padding-block: var(--base-spacing-40); padding-inline: var(--base-spacing-24); }
   .a1-section--padding-lg { padding-block: var(--base-spacing-64); padding-inline: var(--base-spacing-40); }
 }
 
 @media (--bp-sm-down) {
+  .a1-section--padding-xs { padding-block: var(--base-spacing-8); padding-inline: var(--base-spacing-8); }
   .a1-section--padding-sm { padding-block: var(--base-spacing-16); padding-inline: var(--base-spacing-12); }
   .a1-section--padding-md { padding-block: var(--base-spacing-24); padding-inline: var(--base-spacing-16); }
   .a1-section--padding-lg { padding-block: var(--base-spacing-40); padding-inline: var(--base-spacing-24); }
@@ -251,6 +259,7 @@
 
 /* xs: base, no media query */
 .a1-section--xs-padding-none { padding: 0; }
+.a1-section--xs-padding-xs   { padding-block: var(--base-spacing-16); padding-inline: var(--base-spacing-16); }
 .a1-section--xs-padding-sm   { padding-block: var(--base-spacing-32); padding-inline: var(--base-spacing-24); }
 .a1-section--xs-padding-md   { padding-block: var(--base-spacing-64); padding-inline: var(--base-spacing-40); }
 .a1-section--xs-padding-lg   { padding-block: var(--base-spacing-96); padding-inline: var(--base-spacing-64); }
@@ -258,6 +267,7 @@
 /* sm: ≥481px */
 @media (--bp-sm-up) {
   .a1-section--sm-padding-none { padding: 0; }
+  .a1-section--sm-padding-xs   { padding-block: var(--base-spacing-16); padding-inline: var(--base-spacing-16); }
   .a1-section--sm-padding-sm   { padding-block: var(--base-spacing-32); padding-inline: var(--base-spacing-24); }
   .a1-section--sm-padding-md   { padding-block: var(--base-spacing-64); padding-inline: var(--base-spacing-40); }
   .a1-section--sm-padding-lg   { padding-block: var(--base-spacing-96); padding-inline: var(--base-spacing-64); }
@@ -266,6 +276,7 @@
 /* md: ≥769px */
 @media (min-width: 769px) {
   .a1-section--md-padding-none { padding: 0; }
+  .a1-section--md-padding-xs   { padding-block: var(--base-spacing-12); padding-inline: var(--base-spacing-12); }
   .a1-section--md-padding-sm   { padding-block: var(--base-spacing-24); padding-inline: var(--base-spacing-16); }
   .a1-section--md-padding-md   { padding-block: var(--base-spacing-40); padding-inline: var(--base-spacing-24); }
   .a1-section--md-padding-lg   { padding-block: var(--base-spacing-64); padding-inline: var(--base-spacing-40); }
@@ -274,6 +285,7 @@
 /* lg: ≥1025px */
 @media (--bp-lg-up) {
   .a1-section--lg-padding-none { padding: 0; }
+  .a1-section--lg-padding-xs   { padding-block: var(--base-spacing-16); padding-inline: var(--base-spacing-16); }
   .a1-section--lg-padding-sm   { padding-block: var(--base-spacing-32); padding-inline: var(--base-spacing-24); }
   .a1-section--lg-padding-md   { padding-block: var(--base-spacing-64); padding-inline: var(--base-spacing-40); }
   .a1-section--lg-padding-lg   { padding-block: var(--base-spacing-96); padding-inline: var(--base-spacing-64); }

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>
+  );
+}