@gtivr4/a1-design-system-react 0.12.1 → 0.14.0

package/src/components/inline-editable/InlineEditable.jsx

@@ -1,7 +1,83 @@
 import { useEffect, useRef, useState } from "react";
 import "./inline-editable.css";
 
-export function InlineEditable({
+export function InlineEditable({ seamless = false, ...props }) {
+  // Seamless edits the text in place (contentEditable) so the surrounding
+  // component defines all typography; the boxed variant swaps to a field.
+  return seamless ? <SeamlessEditable {...props} /> : <BoxEditable {...props} />;
+}
+
+/* ── Seamless — edits in place, inheriting all surrounding text styling ────── */
+
+function SeamlessEditable({
+  value,
+  onChange,
+  multiline = false,
+  disabled = false,
+  placeholder,
+  className = "",
+  inputClassName: _inputClassName,
+  children: _children,
+  ...props
+}) {
+  const ref = useRef(null);
+
+  // Push the value into the DOM, but never while the user is actively typing
+  // here — overwriting the text node would reset the caret.
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const text = value ?? "";
+    if (document.activeElement !== el && el.innerText !== text) {
+      el.innerText = text;
+    }
+  }, [value]);
+
+  function handleInput(event) {
+    onChange?.(event.currentTarget.innerText);
+  }
+
+  function handleKeyDown(event) {
+    if (event.key === "Escape") {
+      event.currentTarget.blur();
+      return;
+    }
+    if (!multiline && event.key === "Enter") {
+      event.preventDefault();
+      event.currentTarget.blur();
+    }
+  }
+
+  const classes = [
+    "a1-inline-editable",
+    "a1-inline-editable--seamless",
+    multiline && "a1-inline-editable--multiline",
+    disabled && "a1-inline-editable--disabled",
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <span
+      {...props}
+      ref={ref}
+      className={classes}
+      contentEditable={!disabled}
+      suppressContentEditableWarning
+      role="textbox"
+      aria-multiline={multiline || undefined}
+      aria-label={props["aria-label"] ?? placeholder}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? undefined : 0}
+      data-placeholder={placeholder}
+      onInput={disabled ? undefined : handleInput}
+      onKeyDown={disabled ? undefined : handleKeyDown}
+    />
+  );
+}
+
+/* ── Boxed — click to reveal a field, commit on blur/Enter ─────────────────── */
+
+function BoxEditable({
   value,
   onChange,
   multiline = false,

package/src/components/inline-editable/inline-editable.css

@@ -16,8 +16,14 @@
   outline-offset: 2px;
 }
 
+/* Disabled — render as plain, selectable text with no interactive affordances */
 .a1-inline-editable--disabled {
-  cursor: default;
+  cursor: auto;
+  user-select: text;
+}
+
+.a1-inline-editable--disabled:hover {
+  outline-color: transparent;
 }
 
 .a1-inline-editable__placeholder {
@@ -45,3 +51,40 @@
   outline: 2px solid var(--semantic-color-interactive-default);
   outline-offset: -1px;
 }
+
+/* ── Seamless ──────────────────────────────────────────────────────────────
+   Edits the text in place via contentEditable. The element inherits everything
+   — font, size, weight, colour, line-height, alignment, wrapping — from the
+   surrounding component (Heading, Paragraph, Button, …), so editing never
+   resizes or restyles the text. Only a focus ring is added, for accessibility. */
+.a1-inline-editable--seamless {
+  display: inline;
+  cursor: text;
+  border-radius: var(--base-border-radius-sm);
+  outline: none;
+  /* allow the caret/selection to sit just outside the glyphs without clipping */
+  outline-offset: 2px;
+}
+
+/* Multiline keeps authored line breaks */
+.a1-inline-editable--multiline {
+  white-space: pre-wrap;
+}
+
+.a1-inline-editable--seamless:focus,
+.a1-inline-editable--seamless:focus-visible {
+  outline: 2px solid var(--semantic-color-interactive-default);
+}
+
+/* Placeholder while empty (no value typed yet) */
+.a1-inline-editable--seamless:empty::before {
+  content: attr(data-placeholder);
+  color: var(--semantic-color-text-muted);
+  opacity: 0.7;
+}
+
+/* Disabled seamless — plain, selectable text with no caret affordance */
+.a1-inline-editable--seamless.a1-inline-editable--disabled {
+  cursor: auto;
+  user-select: text;
+}

package/src/components/message/Message.jsx

@@ -24,19 +24,23 @@ const ES_SCALE_CONFIG = {
    MessageBadge  (inline filled status chip)
    ═══════════════════════════════════════════════════════════════════════════ */
 
-export function MessageBadge({ status = "neutral", subtle = false, size = "md", icon, children }) {
+export function MessageBadge({ status = "neutral", subtle = false, size = "md", icon, className = "", children, ...rest }) {
   const resolvedStatus = STATUSES.includes(status) ? status : "neutral";
   // icon={null} explicitly suppresses the icon; undefined falls back to the status default
   const resolvedIcon = icon === null ? null : (icon ?? STATUS_ICONS[resolvedStatus]);
 
   return (
-    <span className={[
-      "a1-message-badge",
-      `a1-message-badge--${resolvedStatus}`,
-      subtle && "a1-message-badge--subtle",
-      size === "sm" && "a1-message-badge--sm",
-      size === "lg" && "a1-message-badge--lg",
-    ].filter(Boolean).join(" ")}>
+    <span
+      className={[
+        "a1-message-badge",
+        `a1-message-badge--${resolvedStatus}`,
+        subtle && "a1-message-badge--subtle",
+        size === "sm" && "a1-message-badge--sm",
+        size === "lg" && "a1-message-badge--lg",
+        className,
+      ].filter(Boolean).join(" ")}
+      {...rest}
+    >
       {resolvedIcon && <Icon name={resolvedIcon} />}
       {children}
     </span>
@@ -53,12 +57,14 @@ export function MessageEmptyState({
   title,
   description,
   action,
+  className = "",
+  ...rest
 }) {
   const resolvedScale = ES_SCALES.includes(scale) ? scale : "section";
   const { headingAs, headingSize, paragraphSize } = ES_SCALE_CONFIG[resolvedScale];
 
   return (
-    <div className={`a1-message-empty a1-message-empty--${resolvedScale}`}>
+    <div className={`a1-message-empty a1-message-empty--${resolvedScale}${className ? ` ${className}` : ""}`} {...rest}>
       <div className="a1-message-empty__icon-wrap" aria-hidden="true">
         <Icon name={icon} />
       </div>

package/src/components/page-layout/page-layout.css

@@ -110,6 +110,19 @@
   overflow-y: auto;
 }
 
+/* When a SideNav is inside the viewport-height sidebar, the SideNav manages
+   its own internal scroll — let it fill the sidebar height exactly so the
+   footer stays pinned to the bottom rather than scrolling off screen. */
+.a1-page-layout--viewport-height .a1-page-layout__sidebar:has(.a1-side-nav) {
+  overflow-y: hidden;
+}
+
+.a1-page-layout--viewport-height .a1-page-layout__sidebar .a1-side-nav {
+  position: relative;
+  top: auto;
+  height: 100%;
+}
+
 .a1-page-layout--viewport-height .a1-page-layout__content {
   overflow: hidden;
 }

package/src/components/page-nav/page-nav.css

@@ -35,8 +35,6 @@
   font-size: var(--semantic-font-size-body-xs);
   font-weight: 600;
   color: var(--semantic-color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
   line-height: 1;
 }
 

package/src/components/pagination/Pagination.jsx

@@ -21,11 +21,13 @@ export function Pagination({
   onChange,
   siblings = 1,
   size = "md",
+  className = "",
+  ...rest
 }) {
   const items = getPageItems(page, totalPages, siblings);
 
   return (
-    <nav aria-label="Pagination" className={`a1-pagination a1-pagination--${size}`}>
+    <nav aria-label="Pagination" className={`a1-pagination a1-pagination--${size}${className ? ` ${className}` : ""}`} {...rest}>
       <IconButton
         icon="chevron_left"
         label="Previous page"

package/src/components/radio-group/RadioGroup.jsx

@@ -65,7 +65,7 @@ export function RadioGroup({
           <span className="a1-radio-group__legend-inner">
             {label}
             {required && resolvedSize === "comfortable" ? (
-              <MessageBadge status="info" subtle>{requiredText}</MessageBadge>
+              <MessageBadge status="info" subtle size="sm" icon={null}>{requiredText}</MessageBadge>
             ) : required ? (
               <span className="a1-field__asterisk" aria-hidden="true"> *</span>
             ) : null}

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

@@ -15,7 +15,7 @@
   --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-legend-size:  var(--semantic-font-size-form-label-default);
   --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);
@@ -36,7 +36,7 @@
   --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-legend-size: var(--semantic-font-size-form-label-comfortable);
   --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);
@@ -64,7 +64,7 @@
   --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-legend-size: var(--semantic-font-size-form-label-compact);
   --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);

package/src/components/section/Section.d.ts

@@ -27,6 +27,14 @@ export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
   height?: "screen" | "hero";
   /** Horizontal layout alignment for direct children. Responsive object syntax supported. */
   align?: ResponsiveAlignment;
+  /** Border thickness. Uses the same size tokens as Divider. Omit for no border. */
+  borderSize?: "xs" | "sm" | "md" | "lg";
+  /** Border pattern. Uses the same line styles as Divider. Default: "solid" */
+  borderStyle?: "solid" | "dashed" | "dotted";
+  /** Border color tone. Uses the same variants as Divider. Default: "subtle" */
+  borderVariant?: "subtle" | "strong" | "accent";
+  /** Border radius scale. */
+  radius?: "none" | "sm" | "md" | "lg" | "xl";
   children?: React.ReactNode;
 }
 

package/src/components/section/Section.jsx

@@ -20,6 +20,10 @@ const VALID_GRADIENT_POSITIONS = [
 const VALID_CONTENT_WIDTHS = ["xs", "sm", "md", "lg", "xl", "2xl"];
 const VALID_HEIGHTS = ["screen", "hero"];
 const VALID_ALIGNMENTS = ["left", "center", "right"];
+const VALID_BORDER_SIZES = ["xs", "sm", "md", "lg"];
+const VALID_BORDER_STYLES = ["solid", "dashed", "dotted"];
+const VALID_BORDER_VARIANTS = ["subtle", "strong", "accent"];
+const VALID_RADII = ["none", "sm", "md", "lg", "xl"];
 
 export function Section({
   as: Component = "section",
@@ -32,6 +36,10 @@ export function Section({
   contentWidth,
   height,
   align,
+  borderSize,
+  borderStyle = "solid",
+  borderVariant = "subtle",
+  radius,
   className = "",
   children,
   ...props
@@ -88,6 +96,22 @@ export function Section({
     classes.push("a1-inverse");
   }
 
+  if (borderSize && VALID_BORDER_SIZES.includes(borderSize)) {
+    classes.push(`a1-section--border-${borderSize}`);
+  }
+
+  if (borderStyle && VALID_BORDER_STYLES.includes(borderStyle)) {
+    classes.push(`a1-section--border-${borderStyle}`);
+  }
+
+  if (borderVariant && VALID_BORDER_VARIANTS.includes(borderVariant)) {
+    classes.push(`a1-section--border-${borderVariant}`);
+  }
+
+  if (radius && VALID_RADII.includes(radius)) {
+    classes.push(`a1-section--radius-${radius}`);
+  }
+
   if (className) classes.push(className);
 
   const innerClasses = [

package/src/components/section/section.css

@@ -10,6 +10,10 @@
   --a1-section-gradient-anchor: center;
   --a1-section-gradient-strength: var(--component-section-gradient-strength);
   --a1-section-justify-items: stretch;
+  --a1-section-border-size: 0;
+  --a1-section-border-style: solid;
+  --a1-section-border-color: transparent;
+  border: var(--a1-section-border-size) var(--a1-section-border-style) var(--a1-section-border-color);
 }
 
 .a1-section.a1-inverse {
@@ -23,6 +27,29 @@
 .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); }
 
+/* ── Border ────────────────────────────────────────────────────────────────── */
+
+.a1-section--border-xs { --a1-section-border-size: var(--component-divider-size-xs); }
+.a1-section--border-sm { --a1-section-border-size: var(--component-divider-size-sm); }
+.a1-section--border-md { --a1-section-border-size: var(--component-divider-size-md); }
+.a1-section--border-lg { --a1-section-border-size: var(--component-divider-size-lg); }
+
+.a1-section--border-solid  { --a1-section-border-style: solid; }
+.a1-section--border-dashed { --a1-section-border-style: dashed; }
+.a1-section--border-dotted { --a1-section-border-style: dotted; }
+
+.a1-section--border-subtle { --a1-section-border-color: var(--semantic-color-border-subtle); }
+.a1-section--border-strong { --a1-section-border-color: var(--semantic-color-border-strong); }
+.a1-section--border-accent { --a1-section-border-color: var(--semantic-color-text-accent); }
+
+/* ── Radius ────────────────────────────────────────────────────────────────── */
+
+.a1-section--radius-none { border-radius: 0; }
+.a1-section--radius-sm   { border-radius: var(--base-radius-sm); }
+.a1-section--radius-md   { border-radius: var(--base-radius-md); }
+.a1-section--radius-lg   { border-radius: var(--base-radius-lg); }
+.a1-section--radius-xl   { border-radius: var(--base-radius-xl); }
+
 /* ── Gradient wash ─────────────────────────────────────────────────────────── */
 
 .a1-section--gradient-accent    { --a1-section-gradient-color: var(--semantic-color-action-background); }
@@ -84,6 +111,7 @@
 
 .a1-section--height-screen {
   min-height: 100svh;
+  align-content: start;
 }
 
 /* Fills the viewport minus the sticky top header — use for hero/landing sections. */

package/src/components/snackbar/Snackbar.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+export interface SnackbarProps {
+  /** Controls visibility — renders nothing when false. Default: false */
+  open?: boolean;
+  /** Message content displayed inside the snackbar. */
+  children?: React.ReactNode;
+  /** Label for the optional action button. Both `actionLabel` and `onAction` must be provided to show the button. */
+  actionLabel?: string;
+  /** Called when the action button is clicked. Both `actionLabel` and `onAction` must be provided to show the button. */
+  onAction?: () => void;
+  /** Called when the dismiss icon button is clicked. Omit to hide the dismiss button. */
+  onClose?: () => void;
+  /**
+   * Snackbar position.
+   * Default: "bottom"
+   */
+  position?: 'bottom' | 'bottom-left' | 'bottom-right' | 'top' | 'top-left' | 'top-right';
+  /** ARIA role. Default: "status" (aria-live="polite"). */
+  role?: string;
+  className?: string;
+}
+
+export declare function Snackbar(props: SnackbarProps): React.ReactElement | null;

package/src/components/snackbar/Snackbar.jsx

@@ -2,7 +2,6 @@ import "./snackbar.css";
 import { Button } from "../button/Button.jsx";
 import { IconButton } from "../icon-button/IconButton.jsx";
 
-const variants = ["default", "success", "info", "warn", "error"];
 const positions = ["bottom", "bottom-left", "bottom-right", "top", "top-left", "top-right"];
 
 export function Snackbar({
@@ -11,21 +10,25 @@ export function Snackbar({
   actionLabel,
   onAction,
   onClose,
-  variant = "default",
+  variant: ignoredVariant,
   position = "bottom",
-  inverse = true,
+  inverse: ignoredInverse,
   role,
   className = "",
   ...props
 }) {
   if (!open) return null;
 
-  const resolvedVariant = variants.includes(variant) ? variant : "default";
+  // Kept out of the DOM for older call sites; Snackbar now has one visual style.
+  void ignoredVariant;
+  // Kept out of the DOM for older call sites; inverse is now internal.
+  void ignoredInverse;
+
   const resolvedPosition = positions.includes(position) ? position : "bottom";
   const classes = [
     "a1-snackbar",
-    inverse && "a1-inverse",
-    `a1-snackbar--${resolvedVariant}`,
+    "a1-inverse",
+    "a1-snackbar--default",
     `a1-snackbar--${resolvedPosition}`,
     className,
   ].filter(Boolean).join(" ");
@@ -33,8 +36,8 @@ export function Snackbar({
   return (
     <div
       className={classes}
-      role={role ?? (resolvedVariant === "error" ? "alert" : "status")}
-      aria-live={resolvedVariant === "error" ? "assertive" : "polite"}
+      role={role ?? "status"}
+      aria-live="polite"
       {...props}
     >
       <div className="a1-snackbar__content">{children}</div>

package/src/components/snackbar/snackbar.css

@@ -66,29 +66,14 @@
   flex: 1;
 }
 
-.a1-snackbar--default,
-.a1-snackbar--info {
-  --a1-snackbar-background: var(--semantic-color-surface-inverse, var(--base-color-neutral-900));
-  --a1-snackbar-border: var(--semantic-color-surface-inverse, var(--base-color-neutral-900));
-  --a1-snackbar-foreground: var(--semantic-color-text-default, var(--base-color-neutral-0));
-}
-
-.a1-snackbar--success {
-  --a1-snackbar-background: var(--semantic-color-status-success-background);
-  --a1-snackbar-border: var(--semantic-color-status-success-border, var(--semantic-color-status-success-background));
-  --a1-snackbar-foreground: var(--semantic-color-status-success-foreground);
-}
+.a1-snackbar.a1-snackbar--default {
+  --a1-snackbar-background: var(--base-color-neutral-900);
+  --a1-snackbar-border: var(--base-color-neutral-900);
+  --a1-snackbar-foreground: var(--base-color-neutral-0);
 
-.a1-snackbar--warn {
-  --a1-snackbar-background: var(--semantic-color-status-warn-background);
-  --a1-snackbar-border: var(--semantic-color-status-warn-border, var(--semantic-color-status-warn-background));
-  --a1-snackbar-foreground: var(--semantic-color-status-warn-foreground);
-}
-
-.a1-snackbar--error {
-  --a1-snackbar-background: var(--semantic-color-status-error-background);
-  --a1-snackbar-border: var(--semantic-color-status-error-border, var(--semantic-color-status-error-background));
-  --a1-snackbar-foreground: var(--semantic-color-status-error-foreground);
+  background: var(--a1-snackbar-background);
+  border-color: var(--a1-snackbar-border);
+  color: var(--a1-snackbar-foreground);
 }
 
 @media (max-width: 720px) {

package/src/components/stack/Stack.jsx

@@ -74,6 +74,7 @@ export function Stack({
   justify = "start",
   wrap = false,
   className = "",
+  style: styleProp,
   children,
   ...props
 }) {
@@ -89,7 +90,7 @@ export function Stack({
     "--a1-stack-wrap": wrap ? "wrap" : "nowrap",
     ...getResponsiveDirectionStyle(direction),
     ...getResponsiveJustifyStyle(justify),
-    ...props.style,
+    ...styleProp,
   };
 
   return (

package/src/components/tabs/Tabs.d.ts

@@ -19,6 +19,8 @@ export interface TabsProps {
    * Default: 1
    */
   level?: 1 | 2;
+  /** Size variant. Default: undefined (standard) */
+  size?: "compact";
   className?: string;
   children?: React.ReactNode;
 }

package/src/components/tabs/Tabs.jsx

@@ -6,11 +6,11 @@ const TabsContext = createContext(null);
 
 /* ─── Tabs ─────────────────────────────────────────────────────────────────── */
 
-export function Tabs({ children, value, onChange, variant = "line", level = 1, className = "" }) {
+export function Tabs({ children, value, onChange, variant = "line", level = 1, size, className = "" }) {
   const uid = useId();
   return (
-    <TabsContext.Provider value={{ value, onChange, variant, level, uid }}>
-      <div className={["a1-tabs", `a1-tabs--level-${level}`, className].filter(Boolean).join(" ")}>
+    <TabsContext.Provider value={{ value, onChange, variant, level, size, uid }}>
+      <div className={["a1-tabs", `a1-tabs--level-${level}`, size && `a1-tabs--${size}`, className].filter(Boolean).join(" ")}>
         {children}
       </div>
     </TabsContext.Provider>

package/src/components/tabs/tabs.css

@@ -225,6 +225,77 @@
   border-bottom-left-radius: var(--base-radius-lg);
 }
 
+/* ── Pills variant ──────────────────────────────────────────────────────── */
+
+.a1-tab-list-wrapper--pills {
+  align-items: center;
+}
+
+.a1-tab-list--pills {
+  gap: var(--base-spacing-8);
+  flex-wrap: wrap;
+}
+
+.a1-tab--pills {
+  padding: var(--component-tab-padding-block) var(--component-tab-padding-inline);
+  font-size: var(--semantic-font-size-body-sm);
+  font-weight: var(--base-font-weight-medium);
+  color: var(--semantic-color-text-muted);
+  background: var(--semantic-color-surface-raised);
+  border-radius: var(--base-radius-pill);
+}
+
+.a1-tab--pills:hover:not([aria-selected="true"]) {
+  color: var(--semantic-color-text-default);
+  background: var(--semantic-color-surface-panel);
+}
+
+.a1-tab--pills[aria-selected="true"] {
+  color: var(--semantic-color-action-foreground);
+  background: var(--semantic-color-action-background);
+  cursor: default;
+}
+
+.a1-tab--pills[aria-selected="true"] .a1-tab__count {
+  background: color-mix(in srgb, var(--semantic-color-action-foreground) 24%, transparent);
+  color: var(--semantic-color-action-foreground);
+}
+
+/* ── Segment variant (mirrors SegmentedControl) ─────────────────────────── */
+
+.a1-tab-list-wrapper--segment {
+  align-items: center;
+}
+
+.a1-tab-list--segment {
+  gap: var(--component-segmented-gap);
+  padding: var(--component-segmented-padding);
+  background: var(--semantic-color-surface-raised);
+  border: var(--component-segmented-border-width) solid var(--semantic-color-border-default);
+  border-radius: var(--base-radius-control);
+}
+
+.a1-tab--segment {
+  padding: var(--component-segmented-segment-padding-block) var(--component-segmented-segment-padding-inline);
+  font-size: var(--semantic-font-size-body-sm);
+  font-weight: var(--base-font-weight-medium);
+  color: var(--semantic-color-text-muted);
+  border-radius: calc(var(--base-radius-control) - var(--component-segmented-padding));
+  justify-content: center;
+}
+
+.a1-tab--segment:hover:not([aria-selected="true"]) {
+  color: var(--semantic-color-text-default);
+  background: var(--semantic-color-surface-panel);
+}
+
+.a1-tab--segment[aria-selected="true"] {
+  color: var(--semantic-color-text-default);
+  background: var(--semantic-color-surface-page);
+  box-shadow: var(--semantic-shadow-xs);
+  cursor: default;
+}
+
 /* ── Progress variant ───────────────────────────────────────────────────── */
 
 .a1-tab-list-wrapper--progress {
@@ -470,3 +541,27 @@
 .a1-tab-panel--progress {
   padding: var(--base-spacing-24) 0;
 }
+
+/* ─── Compact size ──────────────────────────────────────────────────────────── */
+
+.a1-tabs--compact .a1-tab {
+  padding: var(--base-spacing-6) var(--base-spacing-8);
+  font-size: var(--semantic-font-size-body-sm);
+  gap: var(--base-spacing-4);
+}
+
+.a1-tabs--compact .a1-tab--line {
+  padding: var(--base-spacing-6) var(--base-spacing-8);
+}
+
+.a1-tabs--compact .a1-tab--folder {
+  padding: var(--base-spacing-6) var(--base-spacing-8);
+}
+
+.a1-tabs--compact .a1-tab--pills {
+  padding: var(--base-spacing-4) var(--base-spacing-12);
+}
+
+.a1-tabs--compact .a1-tab--segment {
+  padding: var(--component-segmented-segment-padding-block-sm) var(--component-segmented-segment-padding-inline-sm);
+}

package/src/components/top-header/TopHeader.jsx

@@ -588,6 +588,7 @@ export function TopHeader({
   loginButton,
   navIconPosition = "start",
   className = "",
+  ...rest
 }) {
   const [navMode, setNavMode] = useState(() => resolveNavMode(navIconPosition));
   const [openSubmenu, setOpenSubmenu] = useState(null);
@@ -641,6 +642,7 @@ export function TopHeader({
           navMode === "hidden" && "a1-top-header--nav-hidden",
           className,
         ].filter(Boolean).join(" ")}
+        {...rest}
       >
         <button
           type="button"