@gtivr4/a1-design-system-react 0.1.0 → 0.2.4

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

@@ -0,0 +1,268 @@
+/* ─── RadioGroup ───────────────────────────────────────────────────────────── */
+
+.a1-radio-group {
+  border: none;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+
+  /* Size tokens — default */
+  --a1-rb-size:          var(--component-radio-group-control-size);
+  --a1-rb-gap:           var(--component-radio-group-gap);     /* horizontal gap: circle ↔ text */
+  --a1-rb-item-gap:      var(--component-radio-group-item-gap);     /* gap between items */
+  --a1-rb-group-gap:     var(--component-radio-group-group-gap);     /* vertical gap between legend/hint and message */
+  --a1-rb-items-top-gap: var(--component-radio-group-items-top-gap);    /* extra space between legend/hint and the items stack */
+  --a1-rb-input-nudge:   var(--component-radio-group-input-nudge);     /* top margin aligning circle center with label cap-height */
+  --a1-rb-row-py:        var(--component-radio-group-row-padding-block);     /* vertical padding on each item row */
+  --a1-rb-row-px:        var(--component-radio-group-row-padding-inline);     /* horizontal padding on each item row */
+  --a1-rb-legend-size:  var(--semantic-font-size-body-sm);
+  --a1-rb-label-size:   var(--semantic-font-size-body-md);
+  --a1-rb-hint-size:    var(--semantic-font-size-body-xs);
+  --a1-rb-msg-size:     var(--semantic-font-size-body-xs);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--a1-rb-group-gap);
+}
+
+/* ─── Sizes ───────────────────────────────────────────────────────────────── */
+
+.a1-radio-group--comfortable {
+  --a1-rb-size:          var(--component-radio-group-comfortable-control-size);
+  --a1-rb-gap:           var(--component-radio-group-comfortable-gap);
+  --a1-rb-item-gap:      var(--component-radio-group-comfortable-item-gap);
+  --a1-rb-group-gap:     var(--component-radio-group-comfortable-group-gap);
+  --a1-rb-items-top-gap: var(--component-radio-group-comfortable-items-top-gap);
+  --a1-rb-input-nudge:   var(--component-radio-group-comfortable-input-nudge);
+  --a1-rb-row-py:        var(--component-radio-group-comfortable-row-padding-block);
+  --a1-rb-row-px:        var(--component-radio-group-comfortable-row-padding-inline);
+  --a1-rb-legend-size: var(--semantic-font-size-body-md);
+  --a1-rb-label-size:  var(--semantic-font-size-body-md);
+  --a1-rb-hint-size:   var(--semantic-font-size-body-sm);
+  --a1-rb-msg-size:    var(--semantic-font-size-body-sm);
+}
+
+.a1-radio-group--comfortable .a1-radio-item__label {
+  font-weight: var(--base-font-weight-medium);
+}
+
+@media (--bp-md-up) {
+  .a1-radio-group--comfortable {
+    --a1-rb-legend-size: var(--semantic-font-size-body-lg);
+    --a1-rb-label-size:  var(--semantic-font-size-body-lg);
+    --a1-rb-size:        var(--component-radio-group-comfortable-control-size-md);
+    --a1-rb-input-nudge: var(--component-radio-group-comfortable-input-nudge);
+  }
+}
+
+.a1-radio-group--compact {
+  --a1-rb-size:          var(--component-radio-group-compact-control-size);
+  --a1-rb-gap:           var(--component-radio-group-compact-gap);
+  --a1-rb-item-gap:      var(--component-radio-group-compact-item-gap);
+  --a1-rb-group-gap:     var(--component-radio-group-compact-group-gap);
+  --a1-rb-items-top-gap: var(--component-radio-group-compact-items-top-gap);
+  --a1-rb-input-nudge:   var(--component-radio-group-compact-input-nudge);
+  --a1-rb-row-py:        var(--component-radio-group-compact-row-padding-block);
+  --a1-rb-row-px:        var(--component-radio-group-compact-row-padding-inline);
+  --a1-rb-legend-size: var(--semantic-font-size-body-xs);
+  --a1-rb-label-size:  var(--semantic-font-size-body-sm);
+  --a1-rb-hint-size:   var(--semantic-font-size-body-xs);
+  --a1-rb-msg-size:    var(--semantic-font-size-body-xs);
+}
+
+/* ─── Legend ──────────────────────────────────────────────────────────────── */
+
+.a1-radio-group__legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-rb-legend-size);
+  font-weight: var(--component-field-label-font-weight);
+  color: var(--semantic-color-text-default);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+.a1-radio-group--disabled .a1-radio-group__legend {
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-radio-group__legend-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-spacing-6);
+}
+
+/* ─── Group hint / error message ──────────────────────────────────────────── */
+
+.a1-radio-group__message {
+  margin: 0;
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-rb-msg-size);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+.a1-radio-group__message--hint  { color: var(--semantic-color-text-muted); }
+.a1-radio-group__message--error { color: var(--semantic-color-status-error-background); }
+
+/* ─── Items stack ─────────────────────────────────────────────────────────── */
+
+.a1-radio-group__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--a1-rb-item-gap);
+  margin-top: var(--a1-rb-items-top-gap);
+}
+
+/* ─── Individual item ─────────────────────────────────────────────────────── */
+
+.a1-radio-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--a1-rb-gap);
+  padding: var(--a1-rb-row-py) var(--a1-rb-row-px);
+  margin-inline: calc(-1 * var(--a1-rb-row-px));
+  border-radius: var(--base-radius-md);
+  cursor: pointer;
+  transition: background-color var(--semantic-motion-duration-fast);
+}
+
+.a1-radio-item--disabled {
+  cursor: not-allowed;
+}
+
+.a1-radio-item__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--component-radio-group-content-gap);
+}
+
+.a1-radio-item__label {
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-rb-label-size);
+  font-weight: var(--base-font-weight-regular);
+  color: var(--semantic-color-text-muted);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+/* Restore default color when the item is selected */
+.a1-radio-item:has(.a1-radio-item__input:checked) .a1-radio-item__label {
+  color: var(--semantic-color-text-default);
+}
+
+/* Disabled always stays muted regardless of checked state */
+.a1-radio-item--disabled .a1-radio-item__label {
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-radio-item__hint {
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-rb-hint-size);
+  font-weight: var(--base-font-weight-regular);
+  color: var(--semantic-color-text-muted);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+/* ─── Radio input ─────────────────────────────────────────────────────────── */
+
+.a1-radio-item__input {
+  -webkit-appearance: none;
+  appearance: none;
+  flex-shrink: 0;
+  width: var(--a1-rb-size);
+  height: var(--a1-rb-size);
+  margin-top: var(--a1-rb-input-nudge);
+  border: var(--component-field-border-width) solid var(--semantic-color-border-strong);
+  border-radius: 50%;
+  background-color: var(--semantic-color-surface-page);
+  cursor: pointer;
+  transition:
+    border-color     var(--semantic-motion-duration-fast),
+    background-color var(--semantic-motion-duration-fast);
+}
+
+/* Selected row — tinted background, no further interaction */
+.a1-radio-item:not(.a1-radio-item--disabled):has(.a1-radio-item__input:checked) {
+  background-color: var(--a1-field-hover-background);
+  cursor: default;
+}
+
+.a1-radio-item:not(.a1-radio-item--disabled):has(.a1-radio-item__input:checked)
+  .a1-radio-item__input {
+  cursor: default;
+}
+
+/* Hover — entire row background (unselected only) */
+.a1-radio-item:not(.a1-radio-item--disabled):not(:has(.a1-radio-item__input:checked)):hover {
+  background-color: var(--a1-field-hover-background);
+}
+
+/* Darken the input border on row hover (unselected only) */
+.a1-radio-item:not(.a1-radio-item--disabled):not(:has(.a1-radio-item__input:checked)):hover
+  .a1-radio-item__input {
+  border-color: var(--a1-field-hover-border-color);
+}
+
+/* Focus */
+.a1-radio-item__input:focus-visible {
+  outline: var(--component-field-focus-ring-width) solid var(--component-field-focus-ring-color);
+  outline-offset: var(--component-field-focus-ring-offset);
+}
+
+/* Selected */
+.a1-radio-item__input:checked {
+  background-color: var(--semantic-color-status-info-background);
+  border-color: var(--semantic-color-status-info-background);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23fafcff'/%3E%3C%2Fsvg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: var(--component-radio-group-dot-size);
+}
+
+/* Disabled (unselected) */
+.a1-radio-item__input:disabled {
+  background-color: var(--semantic-color-surface-raised);
+  border-color: var(--semantic-color-border-subtle);
+  cursor: not-allowed;
+}
+
+/* Disabled + selected */
+.a1-radio-item__input:checked:disabled {
+  background-color: var(--semantic-color-border-default);
+  border-color: var(--semantic-color-border-default);
+}
+
+/* ─── Inline layout ───────────────────────────────────────────────────────── */
+
+.a1-radio-group--inline .a1-radio-group__items {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--a1-rb-gap);
+}
+
+.a1-radio-group--inline .a1-radio-item {
+  margin-inline: 0;
+}
+
+/* Inline error — left accent doesn't suit a row layout */
+.a1-radio-group--inline.a1-radio-group--error .a1-radio-group__items {
+  border-left: none;
+  padding-left: 0;
+}
+
+/* ─── Error state ─────────────────────────────────────────────────────────── */
+
+.a1-radio-group--error .a1-radio-group__items {
+  border-left: var(--component-radio-group-error-accent-width) solid var(--semantic-color-status-error-background);
+  padding-left: var(--base-spacing-12);
+}
+
+/* Unselected items get a red border */
+.a1-radio-group--error .a1-radio-item__input:not(:checked):not(:disabled) {
+  border-color: var(--semantic-color-status-error-border);
+}
+
+/* Bolder error message */
+.a1-radio-group__message--error {
+  font-weight: var(--component-radio-group-error-message-font-weight);
+}

package/src/components/section/Section.jsx

@@ -0,0 +1,108 @@
+import "../../themes.css";
+import "../../color-scheme.css";
+import "./section.css";
+
+const VALID_PADDING = ["lg", "md", "sm", "none"];
+const VALID_SURFACES = ["page", "panel", "raised"];
+const VALID_GAPS = ["xs", "sm", "md", "lg"];
+const VALID_GRADIENTS = ["accent", "highlight", "info", "success", "warn"];
+const VALID_GRADIENT_POSITIONS = [
+  "top",
+  "top-right",
+  "right",
+  "bottom-right",
+  "bottom",
+  "bottom-left",
+  "left",
+  "top-left",
+  "center",
+];
+const VALID_CONTENT_WIDTHS = ["xs", "sm", "md", "lg", "xl", "2xl"];
+const VALID_HEIGHTS = ["screen", "hero"];
+const VALID_ALIGNMENTS = ["left", "center", "right"];
+
+export function Section({
+  as: Component = "section",
+  padding = "md",
+  surface,
+  gap,
+  gradient,
+  gradientPosition = "center",
+  inverse = false,
+  contentWidth,
+  height,
+  alignment,
+  className = "",
+  children,
+  ...props
+}) {
+  const classes = ["a1-section"];
+  const resolvedContentWidth = VALID_CONTENT_WIDTHS.includes(contentWidth) ? contentWidth : null;
+
+  if (typeof padding === "string") {
+    if (VALID_PADDING.includes(padding)) {
+      classes.push(`a1-section--padding-${padding}`);
+    }
+  } else if (padding && typeof padding === "object") {
+    for (const [bp, size] of Object.entries(padding)) {
+      if (VALID_PADDING.includes(size)) {
+        classes.push(`a1-section--${bp}-padding-${size}`);
+      }
+    }
+  }
+
+  if (surface && VALID_SURFACES.includes(surface)) {
+    classes.push(`a1-section--surface-${surface}`);
+  }
+
+  // When contentWidth is set, gap moves to the inner wrapper — keep section flat.
+  if (gap && VALID_GAPS.includes(gap) && !resolvedContentWidth) {
+    classes.push(`a1-section--gap-${gap}`);
+  }
+
+  if (gradient && VALID_GRADIENTS.includes(gradient)) {
+    classes.push(`a1-section--gradient-${gradient}`);
+  }
+
+  if (gradient && VALID_GRADIENT_POSITIONS.includes(gradientPosition)) {
+    classes.push(`a1-section--gradient-${gradientPosition}`);
+  }
+
+  if (height && VALID_HEIGHTS.includes(height)) {
+    classes.push(`a1-section--height-${height}`);
+  }
+
+  if (typeof alignment === "string") {
+    if (VALID_ALIGNMENTS.includes(alignment)) {
+      classes.push(`a1-section--align-${alignment}`);
+    }
+  } 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}`);
+      }
+    }
+  }
+
+  if (inverse) {
+    classes.push("a1-inverse");
+  }
+
+  if (className) classes.push(className);
+
+  const innerClasses = [
+    "a1-section__inner",
+    resolvedContentWidth && `a1-section__inner--${resolvedContentWidth}`,
+    gap && VALID_GAPS.includes(gap) && `a1-section--gap-${gap}`,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <Component className={classes.join(" ")} {...props}>
+      {resolvedContentWidth ? (
+        <div className={innerClasses}>
+          {children}
+        </div>
+      ) : children}
+    </Component>
+  );
+}

package/src/components/section/section.css

@@ -0,0 +1,280 @@
+/* ── Base ──────────────────────────────────────────────────────────────────── */
+
+.a1-section {
+  box-sizing: border-box;
+  width: 100%;
+  --a1-section-surface: transparent;
+  --a1-section-gradient-color: transparent;
+  --a1-section-gradient-width: var(--component-section-gradient-center-width);
+  --a1-section-gradient-height: var(--component-section-gradient-center-height);
+  --a1-section-gradient-anchor: center;
+  --a1-section-gradient-strength: var(--component-section-gradient-strength);
+  --a1-section-justify-items: stretch;
+}
+
+.a1-section.a1-inverse {
+  --a1-section-surface: var(--semantic-color-surface-page);
+  --a1-section-gradient-strength: var(--component-section-gradient-strength-inverse);
+}
+
+/* ── Surface ───────────────────────────────────────────────────────────────── */
+
+.a1-section--surface-page   { --a1-section-surface: var(--semantic-color-surface-page); background: var(--a1-section-surface); }
+.a1-section--surface-panel  { --a1-section-surface: var(--semantic-color-surface-panel); background: var(--a1-section-surface); }
+.a1-section--surface-raised { --a1-section-surface: var(--semantic-color-surface-raised); background: var(--a1-section-surface); }
+
+/* ── Gradient wash ─────────────────────────────────────────────────────────── */
+
+.a1-section--gradient-accent    { --a1-section-gradient-color: var(--semantic-color-action-background); }
+.a1-section--gradient-highlight { --a1-section-gradient-color: var(--base-color-highlited-200); }
+.a1-section--gradient-info      { --a1-section-gradient-color: var(--semantic-color-status-info-background); }
+.a1-section--gradient-success   { --a1-section-gradient-color: var(--semantic-color-status-success-background); }
+.a1-section--gradient-warn      { --a1-section-gradient-color: var(--semantic-color-status-warn-background); }
+
+.a1-section--gradient-top,
+.a1-section--gradient-top-right,
+.a1-section--gradient-right,
+.a1-section--gradient-bottom-right,
+.a1-section--gradient-bottom,
+.a1-section--gradient-bottom-left,
+.a1-section--gradient-top-left,
+.a1-section--gradient-left {
+  --a1-section-gradient-width: var(--component-section-gradient-edge-width);
+  --a1-section-gradient-height: var(--component-section-gradient-edge-height);
+}
+
+.a1-section--gradient-top          { --a1-section-gradient-anchor: top center; }
+.a1-section--gradient-top-right    { --a1-section-gradient-anchor: top right; }
+.a1-section--gradient-right        { --a1-section-gradient-anchor: right center; }
+.a1-section--gradient-bottom-right { --a1-section-gradient-anchor: bottom right; }
+.a1-section--gradient-bottom       { --a1-section-gradient-anchor: bottom center; }
+.a1-section--gradient-bottom-left  { --a1-section-gradient-anchor: bottom left; }
+.a1-section--gradient-left         { --a1-section-gradient-anchor: left center; }
+.a1-section--gradient-top-left     { --a1-section-gradient-anchor: top left; }
+.a1-section--gradient-center       { --a1-section-gradient-anchor: center; }
+
+.a1-section[class*="a1-section--gradient-"] {
+  background:
+    radial-gradient(
+      ellipse var(--a1-section-gradient-width) var(--a1-section-gradient-height) at var(--a1-section-gradient-anchor),
+      color-mix(in srgb, var(--a1-section-gradient-color) calc(var(--a1-section-gradient-strength) * 1%), transparent) 0%,
+      transparent calc(var(--component-section-gradient-fade) * 1%)
+    ),
+    var(--a1-section-surface, var(--semantic-color-surface-page));
+}
+
+/* ── Content gap ──────────────────────────────────────────────────────────── */
+
+.a1-section--gap-xs,
+.a1-section--gap-sm,
+.a1-section--gap-md,
+.a1-section--gap-lg {
+  display: grid;
+  justify-items: var(--a1-section-justify-items);
+}
+
+.a1-section--gap-xs { gap: var(--semantic-spacing-gap-xs); }
+.a1-section--gap-sm { gap: var(--semantic-spacing-gap-sm); }
+.a1-section--gap-md { gap: var(--semantic-spacing-gap-md); }
+.a1-section--gap-lg { gap: var(--semantic-spacing-gap-lg); }
+
+/* ── Height ────────────────────────────────────────────────────────────────── */
+
+.a1-section--height-screen {
+  min-height: 100svh;
+}
+
+/* Fills the viewport minus the sticky top header — use for hero/landing sections. */
+.a1-section--height-hero {
+  min-block-size: calc(90svh - var(--component-top-header-height));
+  display: grid;
+  align-content: center;
+}
+
+/* ── Content width ─────────────────────────────────────────────────────────── */
+
+.a1-section__inner {
+  display: grid;
+  justify-items: var(--a1-section-justify-items);
+  width: 100%;
+  margin-inline: auto;
+  box-sizing: border-box;
+}
+
+.a1-section__inner--xs  { max-width: 28.5rem; }
+.a1-section__inner--sm  { max-width: 40rem;  }
+.a1-section__inner--md  { max-width: 50rem;  }
+.a1-section__inner--lg  { max-width: 60rem;  }
+.a1-section__inner--xl  { max-width: 70rem;  }
+.a1-section__inner--2xl { max-width: 90rem;  }
+
+/* ── Alignment ─────────────────────────────────────────────────────────────── */
+/*
+ * Aligns direct children as layout items.
+ * Use the object prop for responsive changes: alignment={{ xs: "center", lg: "left" }}
+ */
+
+.a1-section[class*="-align-"] {
+  display: grid;
+  justify-items: var(--a1-section-justify-items);
+}
+
+.a1-section--align-left {
+  --a1-section-justify-items: start;
+}
+
+.a1-section--align-center {
+  --a1-section-justify-items: center;
+}
+
+.a1-section--align-right {
+  --a1-section-justify-items: end;
+}
+
+/* xs: base, no media query */
+.a1-section--xs-align-left {
+  --a1-section-justify-items: start;
+}
+
+.a1-section--xs-align-center {
+  --a1-section-justify-items: center;
+}
+
+.a1-section--xs-align-right {
+  --a1-section-justify-items: end;
+}
+
+/* sm: ≥481px */
+@media (--bp-sm-up) {
+  .a1-section--sm-align-left {
+    --a1-section-justify-items: start;
+  }
+
+  .a1-section--sm-align-center {
+    --a1-section-justify-items: center;
+  }
+
+  .a1-section--sm-align-right {
+    --a1-section-justify-items: end;
+  }
+}
+
+/* md: ≥641px */
+@media (--bp-md-up) {
+  .a1-section--md-align-left {
+    --a1-section-justify-items: start;
+  }
+
+  .a1-section--md-align-center {
+    --a1-section-justify-items: center;
+  }
+
+  .a1-section--md-align-right {
+    --a1-section-justify-items: end;
+  }
+}
+
+/* lg: ≥1025px */
+@media (--bp-lg-up) {
+  .a1-section--lg-align-left {
+    --a1-section-justify-items: start;
+  }
+
+  .a1-section--lg-align-center {
+    --a1-section-justify-items: center;
+  }
+
+  .a1-section--lg-align-right {
+    --a1-section-justify-items: end;
+  }
+}
+
+/* xl: ≥1441px */
+@media (--bp-xl-up) {
+  .a1-section--xl-align-left {
+    --a1-section-justify-items: start;
+  }
+
+  .a1-section--xl-align-center {
+    --a1-section-justify-items: center;
+  }
+
+  .a1-section--xl-align-right {
+    --a1-section-justify-items: end;
+  }
+}
+
+/* ── Padding — static (with built-in responsive scaling) ───────────────────── */
+/*
+ * Three 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
+ * Block (top/bottom) / Inline (left/right)
+ */
+
+.a1-section--padding-none {
+  padding: 0;
+}
+
+.a1-section--padding-sm {
+  padding-block: var(--base-spacing-32);
+  padding-inline: var(--base-spacing-24);
+}
+
+.a1-section--padding-md {
+  padding-block: var(--base-spacing-64);
+  padding-inline: var(--base-spacing-40);
+}
+
+.a1-section--padding-lg {
+  padding-block: var(--base-spacing-96);
+  padding-inline: var(--base-spacing-64);
+}
+
+@media (--bp-md-down) {
+  .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-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); }
+}
+
+/* ── Padding — responsive modifiers (mobile-first overrides, no auto-scaling) ─
+ * Use when the padding object prop is passed: padding={{ xs: "sm", lg: "lg" }}
+ * Each modifier applies the raw padding at or above that breakpoint.
+ */
+
+/* xs: base, no media query */
+.a1-section--xs-padding-none { padding: 0; }
+.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); }
+
+/* sm: ≥481px */
+@media (--bp-sm-up) {
+  .a1-section--sm-padding-none { padding: 0; }
+  .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); }
+}
+
+/* md: ≥769px */
+@media (min-width: 769px) {
+  .a1-section--md-padding-none { padding: 0; }
+  .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); }
+}
+
+/* lg: ≥1025px */
+@media (--bp-lg-up) {
+  .a1-section--lg-padding-none { padding: 0; }
+  .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/SegmentedControl.jsx

@@ -10,6 +10,8 @@ export function SegmentedControl({
   value,
   onChange,
   fullWidth = false,
+  size,
+  ...props
 }) {
   const items = options.map(normalize);
 
@@ -41,10 +43,12 @@ export function SegmentedControl({
       role="radiogroup"
       className={[
         "a1-segmented",
+        size && `a1-segmented--${size}`,
         fullWidth && "a1-segmented--full-width",
       ]
         .filter(Boolean)
         .join(" ")}
+      {...props}
       onKeyDown={handleKeyDown}
     >
       {items.map((opt) => {