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

package/src/components/bottom-sheet/bottom-sheet.css

@@ -0,0 +1,113 @@
+/* BottomSheet — fixed bottom panel, no scrim, separation via shadow. Drag handle
+   resizes between detents; content scrolls internally. xs + sm only. */
+
+.a1-bottom-sheet {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: var(--component-bottom-sheet-z-index, 200);
+
+  display: flex;
+  flex-direction: column;
+  block-size: var(--a1-bottom-sheet-height, var(--component-bottom-sheet-header-height, 3.5rem));
+  max-block-size: 96dvh;
+  min-block-size: var(--component-bottom-sheet-header-height, 3.5rem);
+
+  background: var(--component-bottom-sheet-background, var(--semantic-color-surface-card));
+  border-start-start-radius: var(--component-bottom-sheet-border-radius, var(--base-radius-lg));
+  border-start-end-radius: var(--component-bottom-sheet-border-radius, var(--base-radius-lg));
+  /* Strong 1px hairline along the top edge (and up the rounded corners). */
+  border-block-start: var(--component-divider-size-sm) solid var(--semantic-color-border-strong);
+  border-inline: var(--component-divider-size-sm) solid var(--semantic-color-border-strong);
+  /* Upward shadow only — separates the sheet from page content without a scrim. */
+  box-shadow:
+    0 calc(-1 * var(--base-spacing-2)) var(--base-spacing-8)
+      color-mix(in srgb, var(--semantic-color-text-default) 12%, transparent),
+    var(--semantic-shadow-xl);
+
+  padding-block-end: env(safe-area-inset-bottom, 0px);
+  transition: block-size var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard);
+}
+
+.a1-bottom-sheet--dragging {
+  transition: none;
+}
+
+/* ── Header (drag handle + title) ──────────────────────────────────────────── */
+
+.a1-bottom-sheet__header {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--base-spacing-8);
+  padding: var(--base-spacing-8) var(--component-bottom-sheet-padding, var(--base-spacing-16));
+  min-block-size: var(--component-bottom-sheet-header-height, 3.5rem);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+
+.a1-bottom-sheet--dragging .a1-bottom-sheet__header {
+  cursor: grabbing;
+}
+
+.a1-bottom-sheet__handle {
+  align-self: center;
+  flex: none;
+  inline-size: var(--component-bottom-sheet-handle-width, var(--base-spacing-40));
+  block-size: var(--component-bottom-sheet-handle-height, var(--base-spacing-4));
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: var(--semantic-color-border-strong);
+  cursor: grab;
+}
+
+.a1-bottom-sheet__handle:focus-visible {
+  outline: var(--component-button-focus-ring-width, 2px) solid var(--semantic-color-text-accent);
+  outline-offset: var(--base-spacing-4);
+}
+
+.a1-bottom-sheet__title {
+  font-size: var(--semantic-font-size-body-md);
+  font-weight: var(--semantic-font-weight-heading);
+  color: var(--semantic-color-text-default);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Scrollable content ────────────────────────────────────────────────────── */
+
+.a1-bottom-sheet__content {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  padding:
+    0
+    var(--component-bottom-sheet-padding, var(--base-spacing-16))
+    var(--base-spacing-16);
+}
+
+/* When collapsed the content area has no height — it's clipped to the header. */
+.a1-bottom-sheet--collapsed .a1-bottom-sheet__content {
+  overflow: hidden;
+}
+
+/* ── Spacer: reserves the collapsed footprint in document flow ─────────────── */
+
+.a1-bottom-sheet__spacer {
+  block-size: var(--component-bottom-sheet-header-height, 3.5rem);
+}
+
+/* ── xs + sm only ──────────────────────────────────────────────────────────── */
+
+@media (--bp-md-up) {
+  .a1-bottom-sheet,
+  .a1-bottom-sheet__spacer {
+    display: none;
+  }
+}

package/src/components/button/button.css

@@ -1,8 +1,8 @@
 .a1-button {
   box-sizing: border-box;
-  height: var(--a1-button-height, var(--component-button-min-height));
+  /* min-height keeps the standard target size for a single line; the button
+     grows taller when a long label wraps to multiple lines. */
   min-height: var(--a1-button-height, var(--component-button-min-height));
-  max-height: var(--a1-button-height, var(--component-button-min-height));
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -18,7 +18,11 @@
   --a1-icon-weight: 700;
   line-height: var(--component-button-font-line-height);
   text-decoration: none;
-  white-space: nowrap;
+  /* Allow long labels to wrap onto multiple lines (centered), breaking an
+     over-long word if needed, instead of overflowing a fixed-height pill. */
+  white-space: normal;
+  text-align: center;
+  overflow-wrap: anywhere;
   overflow: clip;
   cursor: pointer;
   background: var(--a1-button-background);

package/src/components/code/Code.jsx

@@ -77,6 +77,7 @@ export function Code({
 
   const copyLabel = useLabel("code.copyCode", "Copy code");
   const copiedLabel = useLabel("code.copied", "Copied");
+  const editLabel = useLabel("code.editCode", "Edit code");
   const textToCopy = useMemo(
     () => copyText || (editable ? editableValue : textFromChildren(Children.toArray(children))),
     [children, copyText, editable, editableValue],
@@ -113,6 +114,10 @@ export function Code({
   ]
     .filter(Boolean)
     .join(" ");
+  const editableProps = {
+    ...props,
+    ...(!props["aria-label"] && !props["aria-labelledby"] ? { "aria-label": editLabel } : null),
+  };
 
   if (!shouldRenderBlock) {
     return (
@@ -145,7 +150,7 @@ export function Code({
           value={editableValue}
           onChange={handleTextareaChange}
           spellCheck={false}
-          {...props}
+          {...editableProps}
         />
       ) : (
         <pre className="a1-code-block__pre">

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

@@ -12,7 +12,7 @@ import "./data-table.css";
  * columns: Array<{
  *   key: string,
  *   label: string,
- *   type?: "text" | "number" | "currency" | "date" | "badge" | "avatar" | "link" | "actions",
+ *   type?: "text" | "number" | "currency" | "date" | "badge" | "avatar" | "image" | "link" | "actions",
  *   align?: "start" | "center" | "end",
  *   width?: string,
  *   sortable?: boolean,
@@ -29,6 +29,7 @@ import "./data-table.css";
 // Estimated minimum content width per column type at a "neutral" padding level
 const COL_BASE_WIDTH = {
   avatar:   160,  // avatar circle + name text
+  image:     72,  // small thumbnail
   date:     110,  // "Jan 12, 2026"
   actions:  120,  // one or two compact buttons
   link:     120,  // linked text
@@ -455,6 +456,15 @@ export function DataTable({
         );
       }
 
+      case "image": {
+        // value is an image URL, or `{ src, alt }`.
+        const src = value && typeof value === "object" ? value.src : value;
+        const alt = value && typeof value === "object" ? (value.alt ?? "") : "";
+        return src
+          ? <img className="a1-data-table__thumb" src={src} alt={alt} loading="lazy" />
+          : <span className="a1-data-table__thumb a1-data-table__thumb--empty" aria-hidden="true" />;
+      }
+
       case "badge": {
         const status = col.statusMap?.[value] ?? "neutral";
         const compact = activeDensity === "compact";

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

@@ -286,6 +286,25 @@
   font-size: var(--component-notification-font-size);
 }
 
+/* Image (thumbnail) cell type. */
+.a1-data-table__thumb {
+  display: block;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  object-fit: cover;
+  border-radius: var(--base-radius-sm);
+  background: var(--semantic-color-surface-raised);
+}
+
+.a1-data-table--compact .a1-data-table__thumb {
+  inline-size: 2rem;
+  block-size: 2rem;
+}
+
+.a1-data-table__thumb--empty {
+  border: var(--component-divider-size-sm) dashed var(--semantic-color-border-subtle);
+}
+
 .a1-data-table__actions {
   display: inline-flex;
   align-items: center;

package/src/components/figure/Figure.d.ts

@@ -13,12 +13,38 @@ export interface FigureProps extends React.HTMLAttributes<HTMLElement> {
   captionSrOnly?: boolean;
   /** Caption alignment. Default: "start" */
   captionPosition?: "start" | "center";
-  /** Border radius on the image. */
+  /** Border radius on the image. Default (no prop) is square, same as "none". */
   radius?: "none" | "sm" | "md" | "lg";
   /** Constrain figure width. */
-  size?: "xs" | "sm" | "md" | "lg";
-  /** Horizontal alignment of the figure. Default: "start" */
-  align?: "start" | "center" | "end";
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+  /** Horizontal alignment of the figure. Default: "none" (normal flow). */
+  align?: "none" | "start" | "center" | "end";
+  /**
+   * Fix the image to a set aspect ratio, cropping to fill via `object-fit: cover`.
+   * Omit for the image's natural ratio.
+   */
+  aspectRatio?: "16:9" | "4:3" | "3:2" | "1:1" | "2:3" | "3:4" | "9:16" | "21:9";
+  /**
+   * Crop focal point used when the image is cropped (i.e. when `aspectRatio` or a
+   * fixed height applies). Maps to `object-position`. Default: "center"
+   */
+  crop?:
+    | "center"
+    | "top"
+    | "bottom"
+    | "left"
+    | "right"
+    | "top-left"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-right";
+  /**
+   * Freeform crop: a sub-rectangle of the image to show, expressed as fractions
+   * (0–1) of the natural image — `{ x, y, width, height }` where x/y is the
+   * top-left corner. Applied non-destructively (CSS only); the image is never
+   * modified. Takes precedence over `aspectRatio` / `crop` when set.
+   */
+  cropRect?: { x: number; y: number; width: number; height: number };
   /** Top margin. */
   marginTop?: "sm" | "md" | "lg";
   /** Bottom margin. */
@@ -28,6 +54,13 @@ export interface FigureProps extends React.HTMLAttributes<HTMLElement> {
    * Pass `true` for symmetric bleed or a numeric spacing token for inline-only.
    */
   bleed?: boolean | SpacingToken;
+  /**
+   * Show a tokenized placeholder pattern when `src` is missing or fails to load
+   * (e.g. a deleted image). Default: true. Set false to render the bare `<img>`.
+   */
+  placeholder?: boolean;
+  /** Material Symbols icon shown in the placeholder. Default: "image" */
+  placeholderIcon?: string;
   /** Extra class names on the `<figure>` element */
   className?: string;
   /** Extra class names on the `<img>` element */

package/src/components/figure/Figure.jsx

@@ -1,11 +1,25 @@
 import "./figure.css";
+import { useEffect, useState } from "react";
 import { Bleed } from "../bleed/Bleed.jsx";
+import { Icon } from "../icon/Icon.jsx";
+
+function isCropRect(rect) {
+  return (
+    rect != null &&
+    typeof rect === "object" &&
+    ["x", "y", "width", "height"].every((k) => typeof rect[k] === "number") &&
+    rect.width > 0 &&
+    rect.height > 0
+  );
+}
 
 const rounded = ["none", "sm", "md", "lg"];
 const captionPositions = ["start", "center"];
 const spacings = ["sm", "md", "lg"];
-const sizes = ["xs", "sm", "md", "lg"];
-const alignments = ["start", "center", "end"];
+const sizes = ["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "xxl"];
+const alignments = ["none", "start", "center", "end"];
+const aspectRatios = ["16:9", "4:3", "3:2", "1:1", "2:3", "3:4", "9:16", "21:9"];
+const crops = ["center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right"];
 
 export function Figure({
   src,
@@ -16,21 +30,40 @@ export function Figure({
   radius,
   size,
   align,
+  aspectRatio,
+  crop,
+  cropRect,
   marginTop,
   marginBottom,
   bleed,
+  placeholder = true,
+  placeholderIcon = "image",
   className = "",
   imgClassName = "",
   style,
   imgStyle,
   ...props
 }) {
+  // Freeform crop: a sub-rectangle of the image (fractions 0–1) shown
+  // non-destructively. We measure the natural ratio to size the crop box.
+  const cropped = isCropRect(cropRect);
+  const [naturalRatio, setNaturalRatio] = useState(null);
+
+  // Show a tokenized placeholder pattern when there's no source or it fails to
+  // load (e.g. a deleted library image). Reset the error flag when src changes.
+  const [errored, setErrored] = useState(false);
+  useEffect(() => { setErrored(false); }, [src]);
+  const showPlaceholder = placeholder && (!src || errored);
+
   const classes = [
     "a1-figure",
     radius != null && rounded.includes(radius) && `a1-figure--rounded-${radius}`,
     captionPositions.includes(captionPosition) && captionPosition !== "start" && `a1-figure--caption-${captionPosition}`,
     sizes.includes(size) && `a1-figure--${size}`,
-    alignments.includes(align) && align !== "start" && `a1-figure--align-${align}`,
+    alignments.includes(align) && align !== "none" && `a1-figure--align-${align}`,
+    !cropped && aspectRatios.includes(aspectRatio) && `a1-figure--ratio-${aspectRatio.replace(":", "-")}`,
+    !cropped && crops.includes(crop) && crop !== "center" && `a1-figure--crop-${crop}`,
+    cropped && "a1-figure--cropped",
     spacings.includes(marginTop) && `a1-figure--mt-${marginTop}`,
     spacings.includes(marginBottom) && `a1-figure--mb-${marginBottom}`,
     className,
@@ -40,14 +73,50 @@ export function Figure({
     captionSrOnly ? "a1-sr-only" : "a1-figure__caption",
   ].join(" ");
 
+  const img = (
+    <img
+      src={src}
+      alt={alt}
+      className={["a1-figure__img", imgClassName].filter(Boolean).join(" ")}
+      style={imgStyle}
+      onError={() => setErrored(true)}
+      onLoad={cropped ? (e) => {
+        const { naturalWidth, naturalHeight } = e.currentTarget;
+        if (naturalWidth && naturalHeight) setNaturalRatio(naturalWidth / naturalHeight);
+      } : undefined}
+    />
+  );
+
+  const placeholderEl = (
+    <div
+      className={["a1-figure__img", "a1-figure__placeholder", imgClassName].filter(Boolean).join(" ")}
+      style={imgStyle}
+      role="img"
+      aria-label={alt || undefined}
+    >
+      <Icon name={placeholderIcon} className="a1-figure__placeholder-icon" aria-hidden="true" />
+    </div>
+  );
+
+  const media = showPlaceholder ? placeholderEl : cropped ? (
+    <div
+      className="a1-figure__crop"
+      style={{
+        "--a1-figure-crop-x": cropRect.x,
+        "--a1-figure-crop-y": cropRect.y,
+        "--a1-figure-crop-w": cropRect.width,
+        "--a1-figure-crop-h": cropRect.height,
+        // Box aspect ratio = (cropW · imgW) / (cropH · imgH).
+        ...(naturalRatio ? { aspectRatio: `${(cropRect.width / cropRect.height) * naturalRatio}` } : {}),
+      }}
+    >
+      {img}
+    </div>
+  ) : img;
+
   const figure = (
     <figure className={classes} style={style} {...props}>
-      <img
-        src={src}
-        alt={alt}
-        className={["a1-figure__img", imgClassName].filter(Boolean).join(" ")}
-        style={imgStyle}
-      />
+      {media}
       {caption && (
         <figcaption className={captionClasses}>{caption}</figcaption>
       )}

package/src/components/figure/figure.css

@@ -15,7 +15,13 @@
   display: block;
   width: 100%;
   height: auto;
-  border-radius: var(--base-radius-container);
+  /* Square by default — this is the same as radius="none". Use the `radius`
+     prop to round the corners. */
+  border-radius: 0;
+  /* Crop point. Harmless on natural-ratio images (the box already matches the
+     intrinsic ratio); takes effect once a fixed aspect-ratio or height crops. */
+  object-fit: cover;
+  object-position: var(--a1-figure-crop, center);
 }
 
 .a1-figure__caption {
@@ -27,25 +33,47 @@
   font-style: italic;
 }
 
-/* ── Rounded modifier ──────────────────────────────────────────────────────── */
+/* ── Freeform crop (cropRect) ────────────────────────────────────────────────
+   The crop box clips a sub-rectangle of the image. The image is scaled so the
+   crop region fills the box width and shifted so the region's top-left aligns. */
+.a1-figure__crop {
+  position: relative;
+  inline-size: 100%;
+  overflow: hidden;
+}
 
-.a1-figure--rounded .a1-figure__img {
-  border-radius: var(--base-radius-container);
+.a1-figure--cropped .a1-figure__crop .a1-figure__img {
+  position: absolute;
+  inline-size: calc(100% / var(--a1-figure-crop-w));
+  max-inline-size: none;
+  block-size: auto;
+  inset-inline-start: calc(var(--a1-figure-crop-x) / var(--a1-figure-crop-w) * -100%);
+  inset-block-start: calc(var(--a1-figure-crop-y) / var(--a1-figure-crop-h) * -100%);
+  border-radius: 0;
 }
 
-.a1-figure--rounded-none .a1-figure__img {
+/* ── Rounded modifier ──────────────────────────────────────────────────────── */
+
+/* radius="none" matches the default (square) — kept so a figure can be reset to
+   square when a wrapping context sets a radius. The crop box, when present, is
+   the clipping element so it carries the radius. */
+.a1-figure--rounded-none .a1-figure__img,
+.a1-figure--rounded-none .a1-figure__crop {
   border-radius: 0;
 }
 
-.a1-figure--rounded-sm .a1-figure__img {
+.a1-figure--rounded-sm .a1-figure__img,
+.a1-figure--rounded-sm .a1-figure__crop {
   border-radius: var(--base-radius-sm);
 }
 
-.a1-figure--rounded-md .a1-figure__img {
+.a1-figure--rounded-md .a1-figure__img,
+.a1-figure--rounded-md .a1-figure__crop {
   border-radius: var(--base-radius-md);
 }
 
-.a1-figure--rounded-lg .a1-figure__img {
+.a1-figure--rounded-lg .a1-figure__img,
+.a1-figure--rounded-lg .a1-figure__crop {
   border-radius: var(--base-radius-lg);
 }
 
@@ -60,8 +88,11 @@
 .a1-figure--mb-lg { margin-bottom: var(--base-spacing-24); }
 
 /* ── Alignment ───────────────────────────────────────────────────────────── */
+/* Default (align="none"): no alignment — the figure flows at the inline-start in
+   normal document flow. start/center/end are explicit alignments. */
 
 /* start/end: constrain the figure itself and shift via margin */
+.a1-figure--align-start { margin-inline-end: auto; }
 .a1-figure--align-end { margin-inline-start: auto; }
 
 /* center: figure stays full-width; size constrains img + caption */
@@ -70,14 +101,24 @@
 /* ── Size ────────────────────────────────────────────────────────────────── */
 
 /* Default: constrain the figure element */
+.a1-figure--3xs { max-width: 5rem; }
+.a1-figure--2xs { max-width: 8rem; }
 .a1-figure--xs { max-width: 12rem; }
 .a1-figure--sm { max-width: 20rem; }
 .a1-figure--md { max-width: 30rem; }
 .a1-figure--lg { max-width: 40rem; }
+.a1-figure--xl { max-width: 50rem; }
+.a1-figure--xxl { max-width: 60rem; }
 
 /* Center override: transfer the constraint to img + caption instead */
 .a1-figure--align-center { max-width: none; }
 
+.a1-figure--align-center.a1-figure--3xs .a1-figure__img,
+.a1-figure--align-center.a1-figure--3xs .a1-figure__caption { max-width: 5rem; }
+
+.a1-figure--align-center.a1-figure--2xs .a1-figure__img,
+.a1-figure--align-center.a1-figure--2xs .a1-figure__caption { max-width: 8rem; }
+
 .a1-figure--align-center.a1-figure--xs .a1-figure__img,
 .a1-figure--align-center.a1-figure--xs .a1-figure__caption { max-width: 12rem; }
 
@@ -90,8 +131,64 @@
 .a1-figure--align-center.a1-figure--lg .a1-figure__img,
 .a1-figure--align-center.a1-figure--lg .a1-figure__caption { max-width: 40rem; }
 
+.a1-figure--align-center.a1-figure--xl .a1-figure__img,
+.a1-figure--align-center.a1-figure--xl .a1-figure__caption { max-width: 50rem; }
+
+.a1-figure--align-center.a1-figure--xxl .a1-figure__img,
+.a1-figure--align-center.a1-figure--xxl .a1-figure__caption { max-width: 60rem; }
+
+/* ── Aspect ratio ────────────────────────────────────────────────────────── */
+
+/* A fixed aspect-ratio box; the image fills it via object-fit: cover, cropping
+   to the `crop` point. width:100% + height:auto lets aspect-ratio size the box. */
+.a1-figure--ratio-16-9 .a1-figure__img { aspect-ratio: 16 / 9; }
+.a1-figure--ratio-4-3 .a1-figure__img { aspect-ratio: 4 / 3; }
+.a1-figure--ratio-3-2 .a1-figure__img { aspect-ratio: 3 / 2; }
+.a1-figure--ratio-1-1 .a1-figure__img { aspect-ratio: 1 / 1; }
+.a1-figure--ratio-2-3 .a1-figure__img { aspect-ratio: 2 / 3; }
+.a1-figure--ratio-3-4 .a1-figure__img { aspect-ratio: 3 / 4; }
+.a1-figure--ratio-9-16 .a1-figure__img { aspect-ratio: 9 / 16; }
+.a1-figure--ratio-21-9 .a1-figure__img { aspect-ratio: 21 / 9; }
+
+/* ── Crop (object-position) ──────────────────────────────────────────────────
+   Each modifier sets --a1-figure-crop, read by .a1-figure__img's
+   object-position. Default (center) needs no class. */
+.a1-figure--crop-top { --a1-figure-crop: center top; }
+.a1-figure--crop-bottom { --a1-figure-crop: center bottom; }
+.a1-figure--crop-left { --a1-figure-crop: left center; }
+.a1-figure--crop-right { --a1-figure-crop: right center; }
+.a1-figure--crop-top-left { --a1-figure-crop: left top; }
+.a1-figure--crop-top-right { --a1-figure-crop: right top; }
+.a1-figure--crop-bottom-left { --a1-figure-crop: left bottom; }
+.a1-figure--crop-bottom-right { --a1-figure-crop: right bottom; }
+
 /* ── Caption position ──────────────────────────────────────────────────────── */
 
 .a1-figure--caption-center .a1-figure__caption {
   text-align: center;
 }
+
+/* ─── Placeholder ─────────────────────────────────────────────────────────────
+   Shown when the image is missing or fails to load: a tokenized diagonal-stripe
+   pattern with a centered icon. Shares .a1-figure__img sizing, so aspect-ratio
+   and size variants apply; a 4/3 fallback box is used when no ratio is set. */
+.a1-figure__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 4 / 3;
+  background-color: var(--semantic-color-surface-raised);
+  background-image: repeating-linear-gradient(
+    45deg,
+    var(--semantic-color-border-subtle) 0,
+    var(--semantic-color-border-subtle) 1px,
+    transparent 1px,
+    transparent 10px
+  );
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-figure__placeholder-icon {
+  font-size: var(--base-spacing-48);
+  opacity: 0.6;
+}

package/src/components/grid/Grid.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl";
-type GapKey = "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 64 | 96 | 128;
+type GapKey = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 64 | 96 | 128;
 type ColSpan = number | "full";
 
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/components/grid/Grid.jsx

@@ -14,6 +14,8 @@ const breakpoints = ["xs", "sm", "md", "lg", "xl"];
 
 function resolveGap(key) {
   if (key == null) return undefined;
+  // "none" removes the gap (matches the shared resolveSpacing convention).
+  if (key === "none") return "0";
   if (gapSizes[key]) return gapSizes[key];
 
   const n = Number(key);

package/src/components/grid/grid.css

@@ -34,6 +34,7 @@
 .a1-grid--xs-3  { --a1-grid-cols: 3; }
 .a1-grid--xs-4  { --a1-grid-cols: 4; }
 .a1-grid--xs-6  { --a1-grid-cols: 6; }
+.a1-grid--xs-8  { --a1-grid-cols: 8; }
 .a1-grid--xs-12 { --a1-grid-cols: 12; }
 
 @media (--bp-sm-up) {
@@ -42,6 +43,7 @@
   .a1-grid--sm-3  { --a1-grid-cols: 3; }
   .a1-grid--sm-4  { --a1-grid-cols: 4; }
   .a1-grid--sm-6  { --a1-grid-cols: 6; }
+  .a1-grid--sm-8  { --a1-grid-cols: 8; }
   .a1-grid--sm-12 { --a1-grid-cols: 12; }
 }
 
@@ -51,6 +53,7 @@
   .a1-grid--md-3  { --a1-grid-cols: 3; }
   .a1-grid--md-4  { --a1-grid-cols: 4; }
   .a1-grid--md-6  { --a1-grid-cols: 6; }
+  .a1-grid--md-8  { --a1-grid-cols: 8; }
   .a1-grid--md-12 { --a1-grid-cols: 12; }
 }
 
@@ -60,6 +63,7 @@
   .a1-grid--lg-3  { --a1-grid-cols: 3; }
   .a1-grid--lg-4  { --a1-grid-cols: 4; }
   .a1-grid--lg-6  { --a1-grid-cols: 6; }
+  .a1-grid--lg-8  { --a1-grid-cols: 8; }
   .a1-grid--lg-12 { --a1-grid-cols: 12; }
 }
 
@@ -69,6 +73,7 @@
   .a1-grid--xl-3  { --a1-grid-cols: 3; }
   .a1-grid--xl-4  { --a1-grid-cols: 4; }
   .a1-grid--xl-6  { --a1-grid-cols: 6; }
+  .a1-grid--xl-8  { --a1-grid-cols: 8; }
   .a1-grid--xl-12 { --a1-grid-cols: 12; }
 }
 

package/src/components/icon-button/IconButton.d.ts

@@ -13,8 +13,8 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   label: string;
   /** Visual style. Default: "tertiary" */
   variant?: "tertiary" | "secondary" | "destructive" | "success";
-  /** Button size. "lg" matches Button's large touch target (3.5rem) and icon size, suitable for pairing with large Buttons. Default: "md" */
-  size?: "md" | "lg";
+  /** Button size. "sm" is a 24×24px target (the WCAG 2.2 AA minimum) for dense toolbars; "lg" matches Button's large touch target (3.5rem) and icon size. Default: "md" */
+  size?: "sm" | "md" | "lg";
   /** Link target when rendered with `as="a"`. */
   href?: string;
   disabled?: boolean;

package/src/components/icon-button/IconButton.jsx

@@ -2,7 +2,8 @@ import "./icon-button.css";
 import { Icon } from "../icon/Icon.jsx";
 
 const variants = ["tertiary", "secondary", "destructive", "success"];
-const sizes = ["md", "lg"];
+const sizes = ["sm", "md", "lg"];
+const sizeClass = { sm: "a1-icon-button--small", lg: "a1-icon-button--large" };
 
 export function IconButton({
   as: Component = "button",
@@ -23,7 +24,7 @@ export function IconButton({
   const classes = [
     "a1-icon-button",
     `a1-icon-button--${resolvedVariant}`,
-    resolvedSize === "lg" && "a1-icon-button--large",
+    resolvedSize && sizeClass[resolvedSize],
     className,
   ].filter(Boolean).join(" ");