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

package/src/components/paragraph/Paragraph.jsx

@@ -5,6 +5,7 @@ const colors = ["default", "muted"];
 const breakpoints = ["xs", "sm", "md", "lg", "xl"];
 const textWraps = ["balance"];
 const aligns = ["left", "center", "right", "start", "end"];
+const weights = ["regular", "medium", "semibold", "bold"];
 
 function isResponsiveSize(size) {
   return size && typeof size === "object" && !Array.isArray(size);
@@ -31,6 +32,7 @@ export function Paragraph({
   color = "default",
   textWrap,
   align,
+  weight,
   className = "",
   style,
   ...props
@@ -39,6 +41,7 @@ export function Paragraph({
   const resolvedColor = colors.includes(color) ? color : "default";
   const resolvedTextWrap = textWraps.includes(textWrap) ? textWrap : null;
   const resolvedAlign = aligns.includes(align) ? align : null;
+  const resolvedWeight = weights.includes(weight) ? weight : null;
   const responsiveStyle = getResponsiveSizeStyle(size);
   const resolvedStyle = Object.keys(responsiveStyle).length
     ? { ...responsiveStyle, ...style }
@@ -50,6 +53,7 @@ export function Paragraph({
     resolvedColor !== "default" && `a1-paragraph--${resolvedColor}`,
     resolvedTextWrap && `a1-paragraph--wrap-${resolvedTextWrap}`,
     resolvedAlign && `a1-paragraph--align-${resolvedAlign}`,
+    resolvedWeight && `a1-paragraph--weight-${resolvedWeight}`,
     className
   ]
     .filter(Boolean)

package/src/components/paragraph/paragraph.css

@@ -2,7 +2,7 @@
   margin: 0;
   font-family: var(--component-paragraph-font-family);
   font-size: var(--a1-paragraph-responsive-size, var(--a1-paragraph-size));
-  font-weight: var(--component-paragraph-font-weight);
+  font-weight: var(--a1-paragraph-weight, var(--component-paragraph-font-weight));
   line-height: var(--component-paragraph-font-line-height);
   color: var(--a1-paragraph-color, var(--semantic-color-text-default));
 }
@@ -39,6 +39,11 @@
 
 .a1-paragraph--muted { --a1-paragraph-color: var(--semantic-color-text-muted); }
 
+.a1-paragraph--weight-regular  { --a1-paragraph-weight: var(--base-font-weight-regular); }
+.a1-paragraph--weight-medium   { --a1-paragraph-weight: var(--base-font-weight-medium); }
+.a1-paragraph--weight-semibold { --a1-paragraph-weight: var(--base-font-weight-semibold); }
+.a1-paragraph--weight-bold     { --a1-paragraph-weight: var(--base-font-weight-bold); }
+
 /* Text wrap */
 .a1-paragraph--wrap-balance { text-wrap: balance; }
 
@@ -48,8 +53,3 @@
 .a1-paragraph--align-right  { text-align: end;    }
 .a1-paragraph--align-start  { text-align: start;  }
 .a1-paragraph--align-end    { text-align: end;    }
-
-.a1-paragraph + .a1-paragraph,
-.a1-paragraph + .a1-heading {
-  margin-top: 1.5em;
-}

package/src/components/segmented-control/SegmentedControl.d.ts

@@ -18,6 +18,14 @@ export interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivEleme
   fullWidth?: boolean;
   /** Height scale. Default: "md" */
   size?: "sm" | "md" | "lg";
+  /**
+   * Label display. `"all"` (default) shows every option's label. `"selected"`
+   * shows the label only on the selected option; the rest render icon-only
+   * (using each option's `ariaLabel`/`label` for its accessible name). Options
+   * without an icon always show their label so they never render blank.
+   * "none" hides every label (fully icon-only).
+   */
+  labelMode?: "all" | "selected" | "none";
 }
 
 export declare function SegmentedControl(props: SegmentedControlProps): React.ReactElement;

package/src/components/segmented-control/SegmentedControl.jsx

@@ -11,6 +11,7 @@ export function SegmentedControl({
   onChange,
   fullWidth = false,
   size,
+  labelMode = "all",
   ...props
 }) {
   const items = options.map(normalize);
@@ -52,8 +53,20 @@ export function SegmentedControl({
       onKeyDown={handleKeyDown}
     >
       {items.map((opt) => {
-        const iconOnly = Boolean(opt.icon) && !opt.label;
         const isSelected = value === opt.value;
+        // labelMode controls which segments show their text label:
+        //   "all" (default) — every segment.
+        //   "selected"      — only the selected segment.
+        //   "none"          — none of them (fully icon-only).
+        // An option with no icon always shows its label so it never goes blank.
+        const wantsLabel =
+          Boolean(opt.label) &&
+          (labelMode === "none"
+            ? !opt.icon
+            : labelMode === "selected"
+              ? (isSelected || !opt.icon)
+              : true);
+        const iconOnly = Boolean(opt.icon) && !wantsLabel;
 
         return (
           <button
@@ -61,7 +74,7 @@ export function SegmentedControl({
             role="radio"
             type="button"
             aria-checked={isSelected}
-            aria-label={iconOnly ? (opt.ariaLabel ?? opt.value) : undefined}
+            aria-label={iconOnly ? (opt.ariaLabel ?? opt.label ?? opt.value) : undefined}
             tabIndex={isSelected ? 0 : -1}
             className={[
               "a1-segment",
@@ -72,7 +85,7 @@ export function SegmentedControl({
             onClick={() => onChange?.(opt.value)}
           >
             {opt.icon && <Icon name={opt.icon} className="a1-segment__icon" />}
-            {opt.label}
+            {wantsLabel ? opt.label : null}
           </button>
         );
       })}

package/src/components/segmented-control/segmented.css

@@ -13,6 +13,9 @@
 
 .a1-segmented--full-width {
   display: flex;
+  /* Fill the container so the equal-width segments actually stretch — `display:
+     flex` alone leaves it content-width inside a centering flex/grid parent. */
+  inline-size: 100%;
 }
 
 /* ─── Segment button ──────────────────────────────────────────────────────── */
@@ -58,10 +61,27 @@
   font-size: var(--semantic-font-size-body-sm);
 }
 
+/* Small: tighter padding and a font size one step down from the default. */
+.a1-segmented--sm .a1-segment {
+  padding: var(--component-segmented-segment-padding-block-sm)
+           var(--component-segmented-segment-padding-inline-sm);
+  font-size: var(--semantic-font-size-body-xs);
+  /* Tighter icon↔label gap at sm. */
+  gap: var(--base-spacing-4);
+}
+
+/* Large: roomier padding and a font size one step up. */
+.a1-segmented--lg .a1-segment {
+  padding: var(--component-segmented-segment-padding-block-lg)
+           var(--component-segmented-segment-padding-inline-lg);
+  font-size: var(--semantic-font-size-body-md);
+}
+
 /* ─── Icon ────────────────────────────────────────────────────────────────── */
 
 .a1-segment__icon {
-  font-size: 1em;
+  /* One step larger than the label so the glyph reads clearly at the md/lg sizes. */
+  font-size: 1.25em;
 }
 
 /* Icon-only: match inline padding to block padding so the segment is square */
@@ -69,6 +89,16 @@
   padding-inline: var(--component-segmented-segment-padding-block);
 }
 
+/* Small: a larger icon and tighter horizontal padding per segment (so an
+   icon-only sm strip stays compact). */
+.a1-segmented--sm .a1-segment__icon {
+  font-size: 1.5em;
+}
+
+.a1-segmented--sm .a1-segment--icon-only {
+  padding-inline: var(--component-segmented-segment-padding-block-sm);
+}
+
 /* ─── Dark mode ───────────────────────────────────────────────────────────── */
 
 .a1-theme-dark .a1-segment:not([aria-checked="true"]),

package/src/components/slider/slider.css

@@ -25,8 +25,10 @@
 /* ── Sizes (match the field family: compact / default / comfortable) ─────────── */
 
 .a1-slider--compact {
-  --a1-slider-track-height: var(--base-spacing-6);
-  --a1-slider-thumb-size: var(--base-spacing-16);
+  /* Track + thumb are one step up from the smallest scale so the compact slider
+     stays grabbable; the label/detent text keeps the compact field-family size. */
+  --a1-slider-track-height: var(--base-spacing-8);
+  --a1-slider-thumb-size: var(--base-spacing-20);
   --a1-slider-label-size: var(--semantic-font-size-form-label-compact);
   --a1-slider-label-weight: var(--component-field-compact-label-font-weight);
   --a1-slider-detent-size: var(--semantic-font-size-body-xs);
@@ -222,6 +224,12 @@
 .a1-slider--disabled {
   --a1-slider-fill-color: var(--semantic-color-border-default);
   --a1-slider-thumb-color: var(--semantic-color-border-default);
+  --a1-slider-active-color: var(--semantic-color-text-muted);
+}
+
+.a1-slider--disabled .a1-slider__input,
+.a1-slider--disabled .a1-slider__track,
+.a1-slider--disabled .a1-slider__ticks {
   opacity: 0.6;
 }
 

package/src/components/split-button/SplitButton.jsx

@@ -32,6 +32,7 @@ export function SplitButton({
 }) {
   const [open, setOpen] = useState(false);
   const toggleRef = useRef(null);
+  const rootRef = useRef(null);
 
   const resolvedVariant = variants.includes(variant) ? variant : "primary";
   const resolvedSize = sizes.includes(size) ? size : "md";
@@ -48,6 +49,7 @@ export function SplitButton({
 
   return (
     <div
+      ref={rootRef}
       className={["a1-split-button", isInert && "a1-split-button--disabled", className].filter(Boolean).join(" ")}
       {...rest}
     >
@@ -75,7 +77,7 @@ export function SplitButton({
       >
         <Icon name="arrow_drop_down" className="a1-split-button__caret" aria-hidden="true" />
       </button>
-      <Menu open={open} onClose={() => setOpen(false)} anchorRef={toggleRef} aria-label={menuLabel}>
+      <Menu open={open} onClose={() => setOpen(false)} anchorRef={rootRef} aria-label={menuLabel}>
         {actions.map((action) => (
           <MenuItem
             key={action.id}

package/src/components/tabs/tabs.css

@@ -64,6 +64,9 @@
 .a1-tab-list--scrollable {
   flex: 1;
   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. */
+  overflow-y: hidden;
   scrollbar-width: none;
 }
 

package/src/components/toolbar/Toolbar.d.ts

@@ -116,6 +116,13 @@ export interface ToolbarGroupProps {
   columns?: number;
   /** Show option labels as text; boolean or a responsive breakpoint object. Default: false (icon-only) */
   showLabels?: ToolbarShowLabel;
+  /**
+   * `"all"` (default) honours `showLabels` for every option. `"selected"` shows
+   * the label only on the currently selected option; the rest render icon/swatch-only
+   * and a `"none"`/empty value falls back to the standard none icon. Use it for a
+   * swatch picker where only the chosen swatch is named (e.g. Section surface/gradient).
+   */
+  labelMode?: "all" | "selected";
   "aria-label"?: string;
   disabled?: boolean;
   className?: string;

package/src/components/toolbar/Toolbar.jsx

@@ -108,8 +108,8 @@ export function Toolbar({
 }
 
 /** Visual separator between tools within a Toolbar. */
-export function ToolbarDivider() {
-  return <span className="a1-toolbar__divider" role="separator" aria-orientation="vertical" />;
+export function ToolbarDivider({ className = "", ...rest }) {
+  return <span className={cx("a1-toolbar__divider", className)} role="separator" aria-orientation="vertical" {...rest} />;
 }
 
 function ToolButtonContent({ icon, label, showLabel, swatch }) {
@@ -196,6 +196,7 @@ export function ToolbarMenu({
   disabled = false,
   "aria-label": ariaLabel,
   className = "",
+  ...rest
 }) {
   const [open, setOpen] = useState(false);
   const btnRef = useRef(null);
@@ -215,6 +216,7 @@ export function ToolbarMenu({
         title={label}
         disabled={disabled}
         onClick={() => setOpen((o) => !o)}
+        {...rest}
       >
         <ToolButtonContent icon={buttonIcon} label={label} showLabel={showLabel} />
         <Icon name="arrow_drop_down" size="sm" className="a1-toolbar__caret" />
@@ -248,9 +250,11 @@ export function ToolbarGroup({
   options = [],
   columns,
   showLabels = false,
+  labelMode = "all",
   "aria-label": ariaLabel,
   disabled = false,
   className = "",
+  ...rest
 }) {
   const btnRefs = useRef([]);
   const grid = typeof columns === "number" && columns > 0;
@@ -295,6 +299,7 @@ export function ToolbarGroup({
       aria-label={ariaLabel}
       className={cx("a1-toolbar__group", grid && "a1-toolbar__group--grid", className)}
       style={style}
+      {...rest}
     >
       {options.map((opt, i) => {
         const selected = i === selectedIndex;
@@ -302,7 +307,10 @@ export function ToolbarGroup({
         // selected) is the single tab stop for the group.
         const tabIndex = selected || (selectedIndex === -1 && i === 0) ? 0 : -1;
         const optLabel = opt.label ?? String(opt.value);
-        const icon = opt.icon ?? (!labelAlwaysShown(showLabels) && isNoneValue(opt.value) ? TOOLBAR_NONE_ICON : undefined);
+        // `labelMode="selected"` shows the label only on the selected option;
+        // the rest fall back to icon/swatch-only (and "none" to its icon).
+        const optShowLabel = labelMode === "selected" ? selected : showLabels;
+        const icon = opt.icon ?? (!labelAlwaysShown(optShowLabel) && isNoneValue(opt.value) ? TOOLBAR_NONE_ICON : undefined);
         return (
           <button
             key={String(opt.value)}
@@ -310,7 +318,7 @@ export function ToolbarGroup({
             type="button"
             role="radio"
             aria-checked={selected}
-            aria-label={toolAriaLabel(showLabels, optLabel)}
+            aria-label={toolAriaLabel(optShowLabel, optLabel)}
             title={optLabel}
             tabIndex={tabIndex}
             disabled={disabled || opt.disabled}
@@ -318,7 +326,7 @@ export function ToolbarGroup({
             onClick={() => onChange?.(opt.value)}
             onKeyDown={(e) => handleKeyDown(e, i)}
           >
-            <ToolButtonContent icon={icon} label={opt.label} showLabel={showLabels} swatch={opt.swatch} />
+            <ToolButtonContent icon={icon} label={opt.label} showLabel={optShowLabel} swatch={opt.swatch} />
           </button>
         );
       })}

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

@@ -144,6 +144,8 @@
 }
 
 .a1-top-header__nav-submenu-trigger {
+  min-inline-size: 24px;
+  min-block-size: 24px;
   padding-inline: var(--base-spacing-8);
 }
 

package/src/components/tree-menu/TreeMenu.jsx

@@ -482,16 +482,20 @@ export function TreeMenu({
 
   if (!showExpandControls) return tree;
 
+  // One toggle: if anything is expanded, collapse everything; otherwise expand all.
+  const anyExpanded = expandedIds.size > 0;
+
   return (
     <div className="a1-tree-menu-root">
       <div className="a1-tree-menu__controls">
-        <button type="button" className="a1-tree-menu__control-btn" onClick={handleExpandAll}>
-          <Icon name="unfold_more" />
-          Expand all
-        </button>
-        <button type="button" className="a1-tree-menu__control-btn" onClick={handleCollapseAll}>
-          <Icon name="unfold_less" />
-          Collapse all
+        <button
+          type="button"
+          className="a1-tree-menu__control-btn"
+          aria-expanded={anyExpanded}
+          onClick={anyExpanded ? handleCollapseAll : handleExpandAll}
+        >
+          <Icon name={anyExpanded ? 'unfold_less' : 'unfold_more'} />
+          {anyExpanded ? 'Collapse all' : 'Expand all'}
         </button>
       </div>
       {tree}

package/src/index.d.ts

@@ -0,0 +1,71 @@
+// Aggregated type entry — generated to mirror index.js so TS consumers (and
+// design-sync) see the component exports. Regenerate if index.js changes.
+
+export { Accordion } from "./components/accordion/Accordion";
+export { ContextMenu } from "./components/context-menu/ContextMenu";
+export { TreeMenu } from "./components/tree-menu/TreeMenu";
+export { Calendar } from "./components/calendar/Calendar";
+export { PageNav } from "./components/page-nav/PageNav";
+export { Blockquote } from "./components/blockquote/Blockquote";
+export { Breadcrumb } from "./components/breadcrumb/Breadcrumb";
+export { Notification } from "./components/notification/Notification";
+export { Snackbar } from "./components/snackbar/Snackbar";
+export { StatusBar } from "./components/status-bar/StatusBar";
+export { CircularProgress } from "./components/circular-progress/CircularProgress";
+export { StepTracker } from "./components/step-tracker/StepTracker";
+export { Bleed } from "./components/bleed/Bleed";
+export { IconButton } from "./components/icon-button/IconButton";
+export { Button } from "./components/button/Button";
+export { SplitButton } from "./components/split-button/SplitButton";
+export { ButtonContainer } from "./components/button-container/ButtonContainer";
+export { Card } from "./components/card/Card";
+export { Cluster } from "./components/cluster/Cluster";
+export { Code } from "./components/code/Code";
+export { DefinitionList } from "./components/definition-list/DefinitionList";
+export { Dialog } from "./components/dialog/Dialog";
+export { Divider } from "./components/divider/Divider";
+export { InlineEditable } from "./components/inline-editable/InlineEditable";
+export { Heading, HeadingMark } from "./components/heading/Heading";
+export { List, ListItem } from "./components/list/List";
+export { Inset } from "./components/inset/Inset";
+export { Icon } from "./components/icon/Icon";
+export { Link } from "./components/link/Link";
+export { Paragraph } from "./components/paragraph/Paragraph";
+export { Banner } from "./components/banner/Banner";
+export { Fieldset } from "./components/fieldset/Fieldset";
+export { FieldRow } from "./components/field-row/FieldRow";
+export { TextField } from "./components/field/TextField";
+export { SelectField } from "./components/field/SelectField";
+export { Autocomplete } from "./components/autocomplete/Autocomplete";
+export { NumberField } from "./components/field/NumberField";
+export { TextareaField } from "./components/field/TextareaField";
+export { CheckboxGroup } from "./components/checkbox-group/CheckboxGroup";
+export { ChoiceGroup } from "./components/choice-group/ChoiceGroup";
+export { RadioGroup } from "./components/radio-group/RadioGroup";
+export { Switch } from "./components/switch/Switch";
+export { MessageBadge, MessageEmptyState } from "./components/message/Message";
+export { Pagination } from "./components/pagination/Pagination";
+export { SegmentedControl } from "./components/segmented-control/SegmentedControl";
+export { Slider } from "./components/slider/Slider";
+export {
+  Toolbar,
+  ToolbarToggle,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarMenu,
+  ToolbarDivider,
+  TOOLBAR_NONE_ICON,
+} from "./components/toolbar/Toolbar.jsx";
+export { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
+export { Grid, GridItem } from "./components/grid/Grid";
+export { Inverse } from "./components/inverse/Inverse";
+export { Section } from "./components/section/Section";
+export { Stack } from "./components/stack/Stack";
+export { PageLayout } from "./components/page-layout/PageLayout";
+export { Menu, MenuSection, MenuItem } from "./components/menu/Menu";
+export { SideNav, SideNavItem, SideNavGroup } from "./components/side-nav/SideNav";
+export { BottomDrawer } from "./components/bottom-drawer/BottomDrawer";
+export { DataTable } from "./components/data-table/DataTable";
+export { Figure } from "./components/figure/Figure";
+export { Spacer } from "./components/spacer/Spacer";
+export { StickyActions } from "./components/sticky-actions/StickyActions";

package/src/index.js

@@ -33,6 +33,7 @@ export { Fieldset } from "./components/fieldset/Fieldset.jsx";
 export { FieldRow } from "./components/field-row/FieldRow.jsx";
 export { TextField } from "./components/field/TextField.jsx";
 export { SelectField } from "./components/field/SelectField.jsx";
+export { Autocomplete } from "./components/autocomplete/Autocomplete.jsx";
 export { DateField } from "./components/field/DateField.jsx";
 export { PhoneField } from "./components/field/PhoneField.jsx";
 export { ZipField, ZIP_MASKS } from "./components/field/ZipField.jsx";
@@ -69,6 +70,7 @@ export { Menu, MenuSection, MenuItem } from "./components/menu/Menu.jsx";
 export { SideNav, SideNavItem, SideNavGroup } from "./components/side-nav/SideNav.jsx";
 export { TokenSelect } from "./components/token-select/TokenSelect.jsx";
 export { BottomDrawer } from "./components/bottom-drawer/BottomDrawer.jsx";
+export { BottomSheet } from "./components/bottom-sheet/BottomSheet.jsx";
 export { TopHeader } from "./components/top-header/TopHeader.jsx";
 export { DataTable } from "./components/data-table/DataTable.jsx";
 export { DataTableFilters } from "./components/data-table/DataTableFilters.jsx";