@gtivr4/a1-design-system-react 0.19.0 → 0.21.0

package/package.json

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

package/src/components/card/Card.d.ts

@@ -25,6 +25,15 @@ export interface CardProps extends React.HTMLAttributes<HTMLElement> {
    * Default: "action"
    */
   heroColor?: "action" | "neutral" | "info" | "success" | "warn" | "error" | (string & {});
+  /** Badge label overlaid on the hero (only renders when `iconDisplay="hero"`). */
+  heroBadge?: React.ReactNode;
+  /** Status colour of the hero badge. Default: "neutral" */
+  heroBadgeStatus?: "neutral" | "info" | "success" | "warn" | "error";
+  /** Placement of the hero badge on a 3×3 grid ("{top|middle|bottom}-{start|center|end}"). Default: "top-end" */
+  heroBadgePosition?:
+    | "top-start" | "top-center" | "top-end"
+    | "middle-start" | "middle-center" | "middle-end"
+    | "bottom-start" | "bottom-center" | "bottom-end";
   children?: React.ReactNode;
 }
 

package/src/components/card/Card.jsx

@@ -1,5 +1,6 @@
 import "./card.css";
 import { Icon } from "../icon/Icon.jsx";
+import { MessageBadge } from "../message/Message.jsx";
 
 const HERO_COLORS = {
   action:  "var(--semantic-color-action-background)",
@@ -12,6 +13,14 @@ const HERO_COLORS = {
 
 const VALID_ICON_DISPLAY = ["none", "default", "hero"];
 
+// 3×3 placement of a hero badge: "{block}-{inline}" where block ∈ top|middle|bottom
+// and inline ∈ start|center|end.
+const VALID_HERO_BADGE_POSITIONS = [
+  "top-start", "top-center", "top-end",
+  "middle-start", "middle-center", "middle-end",
+  "bottom-start", "bottom-center", "bottom-end",
+];
+
 export function Card({
   as,
   bare = false,
@@ -20,6 +29,9 @@ export function Card({
   icon,
   iconDisplay = "default",
   heroColor = "action",
+  heroBadge,
+  heroBadgeStatus = "neutral",
+  heroBadgePosition = "top-end",
   className = "",
   children,
   ...props
@@ -47,12 +59,22 @@ export function Card({
     ? { type: "button" }
     : {};
 
+  const badgePos = VALID_HERO_BADGE_POSITIONS.includes(heroBadgePosition)
+    ? heroBadgePosition
+    : "top-end";
+  const [badgeBlock, badgeInline] = badgePos.split("-");
+
   return (
     <Component className={classes} href={href} {...interactiveProps} {...props}>
       <div className="a1-card__layout">
         {resolvedDisplay === "hero" && (
           <div className="a1-card__hero" style={{ "--a1-card-hero-bg": heroBg }}>
             <Icon name={icon} aria-hidden="true" />
+            {heroBadge && (
+              <span className={`a1-card__hero-badge a1-card__hero-badge--${badgeBlock} a1-card__hero-badge--${badgeInline}`}>
+                <MessageBadge status={heroBadgeStatus} size="sm">{heroBadge}</MessageBadge>
+              </span>
+            )}
           </div>
         )}
         {resolvedDisplay === "default" && (

package/src/components/card/card.css

@@ -79,6 +79,7 @@ button.a1-card--navigation {
 
 .a1-card__hero {
   /* Bleed out to the card edges on all four sides then add inner padding */
+  position: relative;
   margin-top: calc(-1 * var(--component-card-padding));
   margin-inline: calc(-1 * var(--component-card-padding));
   margin-bottom: var(--component-card-padding);
@@ -91,8 +92,26 @@ button.a1-card--navigation {
   --a1-icon-opsz: 48;
 }
 
+/* Hero badge — overlaid on the hero, placed via a 3×3 grid. */
+.a1-card__hero-badge {
+  position: absolute;
+  z-index: 1;
+}
+
+.a1-card__hero-badge--top    { inset-block-start: var(--base-spacing-8); }
+.a1-card__hero-badge--bottom { inset-block-end: var(--base-spacing-8); }
+.a1-card__hero-badge--middle { inset-block-start: 50%; }
+.a1-card__hero-badge--start  { inset-inline-start: var(--base-spacing-8); }
+.a1-card__hero-badge--end    { inset-inline-end: var(--base-spacing-8); }
+.a1-card__hero-badge--center { inset-inline-start: 50%; }
+
+/* Centre transforms for the middle/centre axes (combine when both). */
+.a1-card__hero-badge--middle:not(.a1-card__hero-badge--center) { transform: translateY(-50%); }
+.a1-card__hero-badge--center:not(.a1-card__hero-badge--middle) { transform: translateX(-50%); }
+.a1-card__hero-badge--middle.a1-card__hero-badge--center { transform: translate(-50%, -50%); }
+
 /* Higher specificity (0,2,0) beats .a1-icon (0,1,0) so font-size is not overridden by inherit */
-.a1-card__hero .a1-icon {
+.a1-card__hero > .a1-icon {
   font-size: var(--base-spacing-64);
   color: var(--semantic-color-text-inverse);
 }
@@ -120,7 +139,7 @@ button.a1-card--navigation {
     border-end-end-radius: 0;
   }
 
-  .a1-card__hero .a1-icon {
+  .a1-card__hero > .a1-icon {
     font-size: var(--base-spacing-128);
   }
 

package/src/components/code/Code.jsx

@@ -146,7 +146,11 @@ export function Code({
     );
   }
 
-  const collapsed = collapses && overflows && !expanded;
+  // Cap the height whenever collapsible + not expanded (so the overflow check has
+  // a clamped height to measure against); `clipped` adds the fade only when the
+  // content actually overflows the cap.
+  const collapsed = collapses && !expanded;
+  const clipped = collapsed && overflows;
 
   return (
     <div
@@ -155,6 +159,7 @@ export function Code({
         copyCode && "a1-code-block--copyable",
         editable && "a1-code-block--editable",
         collapsed && "a1-code-block--collapsed",
+        clipped && "a1-code-block--clipped",
         className,
       ]
         .filter(Boolean)
@@ -185,29 +190,33 @@ export function Code({
           </code>
         </pre>
       )}
-      {copyCode && (
-        <Button
-          className="a1-code-block__copy"
-          icon="content_copy"
-          size="sm"
-          variant="tertiary"
-          onClick={handleCopy}
-          type="button"
-        >
-          {copied ? copiedLabel : copyLabel}
-        </Button>
-      )}
-      {collapses && overflows && (
-        <Button
-          className="a1-code-block__toggle"
-          icon={expanded ? "expand_less" : "expand_more"}
-          size="sm"
-          variant="tertiary"
-          onClick={() => setExpanded((v) => !v)}
-          type="button"
-        >
-          {expanded ? showLessLabel : showMoreLabel}
-        </Button>
+      {(copyCode || (collapses && overflows)) && (
+        <div className="a1-code-block__actions">
+          {copyCode && (
+            <Button
+              className="a1-code-block__copy"
+              icon="content_copy"
+              size="sm"
+              variant="tertiary"
+              onClick={handleCopy}
+              type="button"
+            >
+              {copied ? copiedLabel : copyLabel}
+            </Button>
+          )}
+          {collapses && overflows && (
+            <Button
+              className="a1-code-block__toggle"
+              icon={expanded ? "expand_less" : "expand_more"}
+              size="sm"
+              variant="tertiary"
+              onClick={() => setExpanded((v) => !v)}
+              type="button"
+            >
+              {expanded ? showLessLabel : showMoreLabel}
+            </Button>
+          )}
+        </div>
       )}
     </div>
   );

package/src/components/code/code.css

@@ -95,7 +95,7 @@
   overflow-y: hidden;
 }
 
-.a1-code-block--collapsed .a1-code-block__pre::after {
+.a1-code-block--clipped .a1-code-block__pre::after {
   content: "";
   position: absolute;
   inset-inline: 0;
@@ -110,3 +110,10 @@
 .a1-code-block__toggle {
   margin: 0;
 }
+
+/* Copy + Show more/less sit inline on one row. */
+.a1-code-block__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--base-spacing-8);
+}

package/src/components/dialog/Dialog.jsx

@@ -67,6 +67,31 @@ export function Dialog({
     return () => el.removeEventListener("cancel", handleCancel);
   }, [onClose]);
 
+  // Dismissable dialogs (those with an onClose) also close when the backdrop — the
+  // area outside the dialog box — is clicked, matching Escape. Require both the press
+  // and the release to land on the backdrop so a drag that starts inside the dialog
+  // (e.g. selecting text and releasing past the edge) doesn't dismiss it.
+  useEffect(() => {
+    const el = ref.current;
+    if (!open || !el || !onClose) return;
+    const onBackdrop = (e) => {
+      const r = el.getBoundingClientRect();
+      return e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom;
+    };
+    let downOnBackdrop = false;
+    const handleMouseDown = (e) => { downOnBackdrop = e.target === el && onBackdrop(e); };
+    const handleClick = (e) => {
+      if (downOnBackdrop && e.target === el && onBackdrop(e)) onClose();
+      downOnBackdrop = false;
+    };
+    el.addEventListener("mousedown", handleMouseDown);
+    el.addEventListener("click", handleClick);
+    return () => {
+      el.removeEventListener("mousedown", handleMouseDown);
+      el.removeEventListener("click", handleClick);
+    };
+  }, [open, onClose]);
+
   useEffect(() => {
     const el = ref.current;
     if (!open || !el) return;

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

@@ -21,6 +21,22 @@ export interface TabsProps {
   level?: 1 | 2;
   /** Size variant. Default: undefined (standard) */
   size?: "compact";
+  /**
+   * Keep every panel mounted, stacked in one cell, so the panel area always reserves
+   * the **tallest** panel's height — switching tabs won't change the container height.
+   * Opt-in (default `false`); use inside a Dialog/overlay so it doesn't resize and move
+   * its targets. On a page, leave it off so tabs size to the active panel.
+   * Default: false
+   */
+  equalHeight?: boolean;
+  /**
+   * Label display. `"all"` (default) shows every tab's label at all breakpoints.
+   * `"selected"` shows the label only on the **active** tab; inactive tabs render
+   * **icon-only** (the label stays in the DOM for the accessible name). Pair with a
+   * `Tab` `icon` so inactive tabs aren't blank, and give **every** `Tab` a label.
+   * Mirrors `ToolbarGroup`'s `labelMode`. Default: "all"
+   */
+  labelMode?: "all" | "selected";
   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, size, className = "" }) {
+export function Tabs({ children, value, onChange, variant = "line", level = 1, size, equalHeight = false, labelMode = "all", className = "" }) {
   const uid = useId();
   return (
-    <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(" ")}>
+    <TabsContext.Provider value={{ value, onChange, variant, level, size, uid, equalHeight, labelMode }}>
+      <div className={["a1-tabs", `a1-tabs--level-${level}`, size && `a1-tabs--${size}`, equalHeight && "a1-tabs--equal-height", labelMode === "selected" && "a1-tabs--label-selected", className].filter(Boolean).join(" ")}>
         {children}
       </div>
     </TabsContext.Provider>
@@ -20,7 +20,7 @@ export function Tabs({ children, value, onChange, variant = "line", level = 1, s
 /* ─── TabList ───────────────────────────────────────────────────────────────── */
 
 export function TabList({ children }) {
-  const { variant } = useContext(TabsContext);
+  const { variant, value } = useContext(TabsContext);
   const scrollRef = useRef(null);
   const [canScrollLeft, setCanScrollLeft] = useState(false);
   const [canScrollRight, setCanScrollRight] = useState(false);
@@ -49,6 +49,24 @@ export function TabList({ children }) {
     };
   }, [checkScroll, enableScroll]);
 
+  // Keep the selected tab in view when it changes (and on mount) by adjusting only
+  // the strip's own horizontal scroll — never scrollIntoView, which would also move
+  // the page vertically.
+  useEffect(() => {
+    if (!enableScroll) return;
+    const el = scrollRef.current;
+    const active = el?.querySelector('[role="tab"][aria-selected="true"]');
+    if (!el || !active) return;
+    const pad = 16;
+    const elRect = el.getBoundingClientRect();
+    const aRect = active.getBoundingClientRect();
+    if (aRect.left < elRect.left) {
+      el.scrollBy({ left: aRect.left - elRect.left - pad, behavior: "smooth" });
+    } else if (aRect.right > elRect.right) {
+      el.scrollBy({ left: aRect.right - elRect.right + pad, behavior: "smooth" });
+    }
+  }, [value, enableScroll]);
+
   const scrollBy = (dir) => {
     scrollRef.current?.scrollBy({ left: dir * 200, behavior: "smooth" });
   };
@@ -154,15 +172,25 @@ export function Tab({ children, value: tabValue, count, icon, iconPosition = "st
 /* ─── TabPanel ──────────────────────────────────────────────────────────────── */
 
 export function TabPanel({ children, value: panelValue }) {
-  const { value, variant, uid } = useContext(TabsContext);
-  if (value !== panelValue) return null;
+  const { value, variant, uid, equalHeight } = useContext(TabsContext);
+  const isActive = value === panelValue;
+  // Default: unmount inactive panels (the panel area sizes to the active tab). With
+  // equalHeight, keep every panel mounted but stacked + hidden, so the area always
+  // reserves the tallest panel's height and the container never resizes on switch.
+  if (!equalHeight && !isActive) return null;
 
   return (
     <div
       role="tabpanel"
       id={`${uid}-panel-${panelValue}`}
       aria-labelledby={`${uid}-tab-${panelValue}`}
-      className={`a1-tab-panel a1-tab-panel--${variant}`}
+      aria-hidden={equalHeight && !isActive ? true : undefined}
+      className={[
+        "a1-tab-panel",
+        `a1-tab-panel--${variant}`,
+        equalHeight && "a1-tab-panel--stacked",
+        equalHeight && !isActive && "a1-tab-panel--inactive",
+      ].filter(Boolean).join(" ")}
     >
       {children}
     </div>

package/src/components/tabs/tabs.css

@@ -4,6 +4,10 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  /* Never force a flex/grid parent wider than its share: allow shrinking and cap
+     at the parent width so an overflowing tab strip scrolls instead of pushing it. */
+  min-width: 0;
+  max-width: 100%;
 }
 
 /* ─── Tab list wrapper ────────────────────────────────────────────────────── */
@@ -17,6 +21,8 @@
 .a1-tab-list-wrapper {
   display: flex;
   align-items: stretch;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .a1-tab-list-wrapper--line {
@@ -63,6 +69,11 @@
 /* Line variant gets overflow scroll; the tab list scrolls, wrapper border stays full-width */
 .a1-tab-list--scrollable {
   flex: 1;
+  /* min-width: 0 lets this flex item shrink below the tabs' intrinsic (min-content)
+     width — without it the strip grows to fit every tab and forces a horizontal
+     page/container overflow instead of scrolling internally. This is what makes the
+     overflow-x scroll (and the scroll-arrow buttons) actually engage. */
+  min-width: 0;
   overflow-x: auto;
   /* Setting overflow-x alone makes the browser compute overflow-y to `auto`,
      which lets a sub-pixel of height add a stray vertical scroll. Pin it. */
@@ -478,24 +489,23 @@
   border-bottom-left-radius: var(--base-radius-control);
 }
 
-/* ─── Responsive tab labels (xs/sm: icon-only for inactive tabs) ─────────── */
-
-@media (--bp-sm-down) {
-  .a1-tab {
-    position: relative;
-  }
+/* ─── Label on selected only (opt-in via labelMode="selected") ─────────────────
+ * Inactive tabs render icon-only; the selected tab shows its label. The label stays
+ * in the DOM (visually hidden) so the accessible name is preserved. Pair with a Tab
+ * `icon` so inactive tabs aren't blank, and give every Tab a label. */
+.a1-tabs--label-selected .a1-tab {
+  position: relative;
+}
 
-  /* Visually hide label on inactive tabs — kept in DOM for accessibility */
-  .a1-tab[aria-selected="false"] .a1-tab__label {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-  }
+.a1-tabs--label-selected .a1-tab[aria-selected="false"] .a1-tab__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
 }
 
 /* ─── Responsive font sizes ───────────────────────────────────────────────── */
@@ -545,6 +555,34 @@
   padding: var(--base-spacing-24) 0;
 }
 
+/* ─── Equal-height panels (opt-in) ──────────────────────────────────────────────
+ * Keep every panel mounted and stacked in one grid cell so the panel area always
+ * reserves the *tallest* panel's height — switching tabs no longer changes the
+ * container height. Use inside a Dialog/overlay so the dialog doesn't resize and
+ * move its targets. Inactive panels stay laid out (so they contribute height) but
+ * are visually hidden and removed from the a11y tree (aria-hidden), which also
+ * takes their focusable descendants out of the tab order.
+ */
+.a1-tabs--equal-height {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.a1-tabs--equal-height > .a1-tab-list-wrapper {
+  grid-row: 1;
+  grid-column: 1;
+}
+
+.a1-tab-panel--stacked {
+  grid-row: 2;
+  grid-column: 1;
+  min-width: 0;
+}
+
+.a1-tab-panel--inactive {
+  visibility: hidden;
+}
+
 /* ─── Compact size ──────────────────────────────────────────────────────────── */
 
 .a1-tabs--compact .a1-tab {

package/src/components/top-header/top-header.css

@@ -213,6 +213,13 @@
   color: var(--semantic-color-text-muted);
 }
 
+/* When the parent is the current/selected item (a child page is active), its
+   leading icon matches the selected text colour instead of staying muted. */
+.a1-top-header__flyout-trigger.a1-menu-item--active .a1-top-header__flyout-icon,
+.a1-top-header__flyout-trigger[aria-current="page"] .a1-top-header__flyout-icon {
+  color: currentColor;
+}
+
 .a1-top-header__flyout-chevron {
   margin-inline-start: auto;
   flex-shrink: 0;