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

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";

package/src/themes.css

@@ -93,6 +93,152 @@ html.a1-theme-accessible.a1-theme-light, html.a1-theme-light.a1-theme-accessible
 }
 
 
+/* ────────────────────────────────────────────────────────────
+   Aperture
+   Modern, minimal, gallery-grade theme for a photography portfolio — near-monochrome graphite on clean whites (Apple + Audi inspired) so imagery dominates, with a refined Apple-blue info and Audi-red error. Type: an elegant script display (Pinyon Script), an editorial serif heading (Playfair Display), and a clean, slightly elegant sans body (Manrope). Apply class="a1-theme-aperture" to <html>.
+   ──────────────────────────────────────────────────────────── */
+
+html.a1-theme-aperture {
+  --base-color-accent-0: #FFFFFF;
+  --base-color-accent-50: #F5F5F7;
+  --base-color-accent-100: #E8E8ED;
+  --base-color-accent-200: #D2D2D7;
+  --base-color-accent-300: #AEAEB2;
+  --base-color-accent-400: #6E6E73;
+  --base-color-accent-500: #1D1D1F;
+  --base-color-accent-600: #161618;
+  --base-color-accent-700: #0F0F10;
+  --base-color-accent-800: #08080A;
+  --base-color-accent-900: #040405;
+  --base-color-accent-1000: #000000;
+  --base-color-info-0: #FBFDFF;
+  --base-color-info-50: #EAF3FE;
+  --base-color-info-100: #D2E6FD;
+  --base-color-info-200: #A6CCFB;
+  --base-color-info-300: #6FA8F6;
+  --base-color-info-400: #3D86EE;
+  --base-color-info-500: #0071E3;
+  --base-color-info-600: #005BBF;
+  --base-color-info-700: #00458F;
+  --base-color-info-800: #002E60;
+  --base-color-info-900: #001A37;
+  --base-color-info-1000: #000D1C;
+  --base-color-success-0: #F9FDFB;
+  --base-color-success-50: #ECF7F1;
+  --base-color-success-100: #D7EEE3;
+  --base-color-success-200: #B0DCC8;
+  --base-color-success-300: #82C5A8;
+  --base-color-success-400: #54A886;
+  --base-color-success-500: #2E8765;
+  --base-color-success-600: #246B50;
+  --base-color-success-700: #1B503C;
+  --base-color-success-800: #123528;
+  --base-color-success-900: #0A1F17;
+  --base-color-success-1000: #05100C;
+  --base-color-error-0: #FFFBFB;
+  --base-color-error-50: #FCECEE;
+  --base-color-error-100: #F8D6DB;
+  --base-color-error-200: #F0AEB7;
+  --base-color-error-300: #E47E8C;
+  --base-color-error-400: #D4536A;
+  --base-color-error-500: #BB0A30;
+  --base-color-error-600: #960826;
+  --base-color-error-700: #71061D;
+  --base-color-error-800: #4C0413;
+  --base-color-error-900: #2E020B;
+  --base-color-error-1000: #170105;
+  --base-color-warn-0: #FFFCF6;
+  --base-color-warn-50: #FBF2E1;
+  --base-color-warn-100: #F6E4C3;
+  --base-color-warn-200: #EECB8C;
+  --base-color-warn-300: #E0AD55;
+  --base-color-warn-400: #C68F35;
+  --base-color-warn-500: #9A6D1E;
+  --base-color-warn-600: #7B5718;
+  --base-color-warn-700: #5C4112;
+  --base-color-warn-800: #3D2C0C;
+  --base-color-warn-900: #251A07;
+  --base-color-warn-1000: #130D03;
+  --semantic-color-text-default: #1D1D1F;
+  --semantic-color-text-muted: #6E6E73;
+  --semantic-color-text-inverse: #FFFFFF;
+  --semantic-color-text-accent: var(--base-color-accent-600);
+  --semantic-color-surface-page: #FAFAFA;
+  --semantic-color-surface-card: #FFFFFF;
+  --semantic-color-surface-field: #FFFFFF;
+  --semantic-color-surface-panel: #FFFFFF;
+  --semantic-color-surface-raised: #F0F0F2;
+  --semantic-color-border-subtle: #EBEBED;
+  --semantic-color-border-default: #D2D2D7;
+  --semantic-color-border-strong: #AEAEB2;
+  --semantic-color-action-background: var(--base-color-accent-500);
+  --semantic-color-action-background-hover: var(--base-color-accent-600);
+  --semantic-color-action-background-pressed: var(--base-color-accent-700);
+  --semantic-color-action-foreground: var(--base-color-accent-0);
+  --semantic-color-action-foreground-pressed: var(--base-color-accent-100);
+  --semantic-color-action-surface: var(--base-color-accent-50);
+  --semantic-color-action-border: var(--base-color-accent-300);
+  --semantic-color-status-error-background: var(--base-color-error-500);
+  --semantic-color-status-error-surface: var(--base-color-error-50);
+  --semantic-color-status-error-border: var(--base-color-error-300);
+  --semantic-color-status-error-foreground: var(--base-color-error-0);
+  --semantic-color-status-warn-background: var(--base-color-warn-500);
+  --semantic-color-status-warn-surface: var(--base-color-warn-50);
+  --semantic-color-status-warn-border: var(--base-color-warn-300);
+  --semantic-color-status-warn-foreground: var(--base-color-warn-0);
+  --semantic-color-status-success-background: var(--base-color-success-500);
+  --semantic-color-status-success-surface: var(--base-color-success-50);
+  --semantic-color-status-success-border: var(--base-color-success-300);
+  --semantic-color-status-success-foreground: var(--base-color-success-0);
+  --semantic-color-status-info-background: var(--base-color-info-500);
+  --semantic-color-status-info-surface: var(--base-color-info-50);
+  --semantic-color-status-info-border: var(--base-color-info-300);
+  --semantic-color-status-info-foreground: var(--base-color-info-0);
+  --component-button-primary-background: var(--semantic-color-action-background);
+  --component-button-primary-background-hover: var(--semantic-color-action-background-hover);
+  --component-button-primary-background-pressed: var(--semantic-color-action-background-pressed);
+  --component-button-primary-foreground: var(--base-color-accent-0);
+  --component-button-primary-foreground-hover: var(--base-color-accent-50);
+  --component-button-primary-foreground-pressed: var(--base-color-accent-100);
+  --component-button-primary-border: var(--semantic-color-action-background);
+  --component-button-secondary-background: var(--base-color-accent-0);
+  --component-button-secondary-background-hover: var(--base-color-accent-50);
+  --component-button-secondary-background-pressed: var(--base-color-accent-100);
+  --component-button-secondary-foreground: var(--base-color-accent-600);
+  --component-button-secondary-foreground-hover: var(--base-color-accent-700);
+  --component-button-secondary-foreground-pressed: var(--base-color-accent-800);
+  --component-button-secondary-border: var(--base-color-accent-500);
+  --component-button-secondary-border-hover: var(--base-color-accent-700);
+  --component-button-secondary-border-pressed: var(--base-color-accent-800);
+  --component-button-tertiary-background: transparent;
+  --component-button-tertiary-background-hover: var(--base-color-accent-50);
+  --component-button-tertiary-background-pressed: var(--base-color-accent-100);
+  --component-button-tertiary-foreground: var(--base-color-accent-600);
+  --component-button-tertiary-foreground-hover: var(--base-color-accent-700);
+  --component-button-tertiary-foreground-pressed: var(--base-color-accent-800);
+  --component-button-tertiary-border: transparent;
+  --component-button-tertiary-border-hover: var(--base-color-accent-50);
+  --component-button-tertiary-border-pressed: var(--base-color-accent-100);
+  --component-button-focus-ring: var(--base-color-accent-300);
+  --base-radius-sm: 0.25rem;
+  --base-radius-md: 0.5rem;
+  --base-radius-lg: 0.625rem;
+  --base-radius-xl: 0.75rem;
+  --component-card-border-radius: 14px;
+  --component-dialog-border-radius: 16px;
+  --component-button-font-family: var(--theme-a1-aperture-font-family-body);
+  --component-paragraph-font-family: var(--theme-a1-aperture-font-family-body);
+  --component-heading-font-family-heading: var(--theme-a1-aperture-font-family-heading);
+  --component-heading-font-family-display: var(--theme-a1-aperture-font-family-display);
+  --semantic-font-weight-body: var(--theme-a1-aperture-font-weight-body);
+  --semantic-font-weight-heading: var(--theme-a1-aperture-font-weight-heading);
+  --semantic-font-weight-display: var(--theme-a1-aperture-font-weight-display);
+  --component-paragraph-font-weight: var(--theme-a1-aperture-font-weight-body);
+  --component-heading-font-weight-heading: var(--theme-a1-aperture-font-weight-heading);
+  --component-heading-font-weight-display: var(--theme-a1-aperture-font-weight-display);
+}
+
+
 /* ────────────────────────────────────────────────────────────
    CatLympics
    Playful, pastel, bouncy theme for CatLympics Game. Apply .a1-theme-catlympics to <html>.
@@ -293,6 +439,151 @@ html.a1-theme-catlympics.a1-theme-light, html.a1-theme-light.a1-theme-catlympics
 }
 
 
+/* ────────────────────────────────────────────────────────────
+   Crochet
+   A soft, cozy pastel theme — dusty-rose accents, sage / periwinkle / apricot pastels on warm cream surfaces, warm engaging serif (Fraunces) display & headings, and a slab-serif (Roboto Slab) body. Apply class="a1-theme-crochet" to <html>.
+   ──────────────────────────────────────────────────────────── */
+
+html.a1-theme-crochet {
+  --base-color-accent-0: #FFFBFD;
+  --base-color-accent-50: #FBEFF5;
+  --base-color-accent-100: #F5DEEA;
+  --base-color-accent-200: #ECC2D6;
+  --base-color-accent-300: #DE9DBA;
+  --base-color-accent-400: #C9779B;
+  --base-color-accent-500: #B0567F;
+  --base-color-accent-600: #8E4063;
+  --base-color-accent-700: #6B2F4A;
+  --base-color-accent-800: #481E31;
+  --base-color-accent-900: #2B121D;
+  --base-color-accent-1000: #160910;
+  --base-color-info-0: #FBFCFF;
+  --base-color-info-50: #EFF2FB;
+  --base-color-info-100: #DFE5F6;
+  --base-color-info-200: #C2CCEC;
+  --base-color-info-300: #9CACDE;
+  --base-color-info-400: #7488C9;
+  --base-color-info-500: #5E73B0;
+  --base-color-info-600: #46588E;
+  --base-color-info-700: #34426B;
+  --base-color-info-800: #232C48;
+  --base-color-info-900: #14192B;
+  --base-color-info-1000: #0A0D16;
+  --base-color-success-0: #F9FDFB;
+  --base-color-success-50: #ECF6F0;
+  --base-color-success-100: #D9ECE2;
+  --base-color-success-200: #B7DCC7;
+  --base-color-success-300: #8DC4A6;
+  --base-color-success-400: #63A883;
+  --base-color-success-500: #418062;
+  --base-color-success-600: #34664E;
+  --base-color-success-700: #264C3A;
+  --base-color-success-800: #193326;
+  --base-color-success-900: #0E1E16;
+  --base-color-success-1000: #07100B;
+  --base-color-error-0: #FFFBFB;
+  --base-color-error-50: #FCEEEE;
+  --base-color-error-100: #F8DCDC;
+  --base-color-error-200: #F0BCBC;
+  --base-color-error-300: #E49494;
+  --base-color-error-400: #D26F6F;
+  --base-color-error-500: #BB4F4F;
+  --base-color-error-600: #963E3E;
+  --base-color-error-700: #712F2F;
+  --base-color-error-800: #4C1F1F;
+  --base-color-error-900: #2E1313;
+  --base-color-error-1000: #170909;
+  --base-color-warn-0: #FFFCF7;
+  --base-color-warn-50: #FBF1E3;
+  --base-color-warn-100: #F6E2C6;
+  --base-color-warn-200: #EEC891;
+  --base-color-warn-300: #E0A95C;
+  --base-color-warn-400: #C68B3C;
+  --base-color-warn-500: #9C6824;
+  --base-color-warn-600: #7D531D;
+  --base-color-warn-700: #5E3E16;
+  --base-color-warn-800: #3F2A0F;
+  --base-color-warn-900: #261907;
+  --base-color-warn-1000: #130D04;
+  --semantic-color-text-default: #3B2F2C;
+  --semantic-color-text-muted: #6B5C55;
+  --semantic-color-text-inverse: #FFFFFF;
+  --semantic-color-text-accent: var(--base-color-accent-600);
+  --semantic-color-surface-page: #FAF4EF;
+  --semantic-color-surface-card: #FFFFFF;
+  --semantic-color-surface-field: #FFFFFF;
+  --semantic-color-surface-panel: #FFFDFB;
+  --semantic-color-surface-raised: #F6ECE4;
+  --semantic-color-border-subtle: #EFE0D6;
+  --semantic-color-border-default: #DDC8BB;
+  --semantic-color-border-strong: #BCA294;
+  --semantic-color-action-background: var(--base-color-accent-500);
+  --semantic-color-action-background-hover: var(--base-color-accent-600);
+  --semantic-color-action-background-pressed: var(--base-color-accent-700);
+  --semantic-color-action-foreground: var(--base-color-accent-0);
+  --semantic-color-action-foreground-pressed: var(--base-color-accent-100);
+  --semantic-color-action-surface: var(--base-color-accent-50);
+  --semantic-color-action-border: var(--base-color-accent-300);
+  --semantic-color-status-error-background: var(--base-color-error-500);
+  --semantic-color-status-error-surface: var(--base-color-error-50);
+  --semantic-color-status-error-border: var(--base-color-error-300);
+  --semantic-color-status-error-foreground: var(--base-color-error-0);
+  --semantic-color-status-warn-background: var(--base-color-warn-500);
+  --semantic-color-status-warn-surface: var(--base-color-warn-50);
+  --semantic-color-status-warn-border: var(--base-color-warn-300);
+  --semantic-color-status-warn-foreground: var(--base-color-warn-0);
+  --semantic-color-status-success-background: var(--base-color-success-500);
+  --semantic-color-status-success-surface: var(--base-color-success-50);
+  --semantic-color-status-success-border: var(--base-color-success-300);
+  --semantic-color-status-success-foreground: var(--base-color-success-0);
+  --semantic-color-status-info-background: var(--base-color-info-500);
+  --semantic-color-status-info-surface: var(--base-color-info-50);
+  --semantic-color-status-info-border: var(--base-color-info-300);
+  --semantic-color-status-info-foreground: var(--base-color-info-0);
+  --component-button-primary-background: var(--semantic-color-action-background);
+  --component-button-primary-background-hover: var(--semantic-color-action-background-hover);
+  --component-button-primary-background-pressed: var(--semantic-color-action-background-pressed);
+  --component-button-primary-foreground: var(--base-color-accent-0);
+  --component-button-primary-foreground-hover: var(--base-color-accent-50);
+  --component-button-primary-foreground-pressed: var(--base-color-accent-100);
+  --component-button-primary-border: var(--semantic-color-action-background);
+  --component-button-secondary-background: var(--base-color-accent-0);
+  --component-button-secondary-background-hover: var(--base-color-accent-50);
+  --component-button-secondary-background-pressed: var(--base-color-accent-100);
+  --component-button-secondary-foreground: var(--base-color-accent-600);
+  --component-button-secondary-foreground-hover: var(--base-color-accent-700);
+  --component-button-secondary-foreground-pressed: var(--base-color-accent-800);
+  --component-button-secondary-border: var(--base-color-accent-500);
+  --component-button-secondary-border-hover: var(--base-color-accent-700);
+  --component-button-secondary-border-pressed: var(--base-color-accent-800);
+  --component-button-tertiary-background: transparent;
+  --component-button-tertiary-background-hover: var(--base-color-accent-50);
+  --component-button-tertiary-background-pressed: var(--base-color-accent-100);
+  --component-button-tertiary-foreground: var(--base-color-accent-600);
+  --component-button-tertiary-foreground-hover: var(--base-color-accent-700);
+  --component-button-tertiary-foreground-pressed: var(--base-color-accent-800);
+  --component-button-tertiary-border: transparent;
+  --component-button-tertiary-border-hover: var(--base-color-accent-50);
+  --component-button-tertiary-border-pressed: var(--base-color-accent-100);
+  --component-button-focus-ring: var(--base-color-accent-300);
+  --base-radius-md: 0.625rem;
+  --base-radius-lg: 0.875rem;
+  --base-radius-xl: 14px;
+  --component-card-border-radius: 16px;
+  --component-dialog-border-radius: 16px;
+  --component-button-font-family: var(--theme-a1-crochet-font-family-body);
+  --component-paragraph-font-family: var(--theme-a1-crochet-font-family-body);
+  --component-heading-font-family-heading: var(--theme-a1-crochet-font-family-heading);
+  --component-heading-font-family-display: var(--theme-a1-crochet-font-family-display);
+  --semantic-font-weight-body: var(--theme-a1-crochet-font-weight-body);
+  --semantic-font-weight-heading: var(--theme-a1-crochet-font-weight-heading);
+  --semantic-font-weight-display: var(--theme-a1-crochet-font-weight-display);
+  --component-paragraph-font-weight: var(--theme-a1-crochet-font-weight-body);
+  --component-heading-font-weight-heading: var(--theme-a1-crochet-font-weight-heading);
+  --component-heading-font-weight-display: var(--theme-a1-crochet-font-weight-display);
+}
+
+
 /* ────────────────────────────────────────────────────────────
    Fresh
    A crisp, airy theme with sky-blue accents, Nunito body text (ExtraBold headings), Baskerville display typography, and a cool mint gradient background. Apply class="a1-theme-fresh" to <html>.
@@ -559,6 +850,8 @@ html.a1-theme-heritage {
   --component-button-tertiary-border-pressed: var(--base-color-accent-100);
   --component-button-focus-ring: var(--base-color-accent-300);
   --base-radius-control: 2px;
+  --base-radius-sm: 1px;
+  --base-radius-md: 2px;
   --base-radius-lg: 3px;
   --base-radius-xl: 4px;
   --component-button-border-radius: 2px;

package/src/tokens.css

@@ -347,6 +347,13 @@
   --component-bottom-drawer-height: 3.5rem;
   --component-bottom-drawer-border-width: 1px;
   --component-bottom-drawer-z-index: 200;
+  --component-bottom-sheet-header-height: 3.5rem;
+  --component-bottom-sheet-border-radius: 0.5rem;
+  --component-bottom-sheet-handle-width: 2.5rem;
+  --component-bottom-sheet-handle-height: 0.25rem;
+  --component-bottom-sheet-padding: 1rem;
+  --component-bottom-sheet-background: #ffffff;
+  --component-bottom-sheet-z-index: 200;
   --component-calendar-month-gap: 2rem;
   --component-calendar-heading-padding-block: 0.75rem;
   --component-calendar-heading-padding-block-compact: 0.5rem;
@@ -658,9 +665,11 @@
   --component-segmented-padding: 0.1875rem;
   --component-segmented-gap: 0.125rem;
   --component-segmented-segment-padding-block: 0.25rem;
-  --component-segmented-segment-padding-inline: 0.75rem;
+  --component-segmented-segment-padding-inline: 0.5rem;
   --component-segmented-segment-padding-block-sm: 0.125rem;
   --component-segmented-segment-padding-inline-sm: 0.5rem;
+  --component-segmented-segment-padding-block-lg: 0.5rem;
+  --component-segmented-segment-padding-inline-lg: 1rem;
   --component-segmented-border-width: 1px;
   --component-segmented-font-weight-default: 400;
   --component-segmented-font-weight-active: 500;
@@ -975,6 +984,12 @@
   --theme-a1-accessible-font-user-size-medium: 1rem;
   --theme-a1-accessible-font-user-size-large: 1.125rem;
   --theme-a1-accessible-font-user-size-xl: 1.25rem;
+  --theme-a1-aperture-font-family-body: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --theme-a1-aperture-font-family-heading: 'Playfair Display', Georgia, Cambria, 'Times New Roman', serif;
+  --theme-a1-aperture-font-family-display: 'Pinyon Script', 'Tangerine', 'Snell Roundhand', cursive;
+  --theme-a1-aperture-font-weight-body: 400;
+  --theme-a1-aperture-font-weight-heading: 600;
+  --theme-a1-aperture-font-weight-display: 400;
   --theme-a1-catlympics-font-family-body: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --theme-a1-catlympics-font-family-heading: 'Patrick Hand SC', system-ui, -apple-system, sans-serif;
   --theme-a1-catlympics-font-family-display: 'Baloo 2', system-ui, -apple-system, sans-serif;
@@ -982,6 +997,12 @@
   --theme-a1-catlympics-font-weight-body: 400;
   --theme-a1-catlympics-font-weight-heading: 400;
   --theme-a1-catlympics-font-weight-display: 700;
+  --theme-a1-crochet-font-family-body: 'Roboto Slab', 'Bitter', Rockwell, 'Roboto Slab', Georgia, serif;
+  --theme-a1-crochet-font-family-heading: 'Libre Baskerville', Georgia, Cambria, 'Times New Roman', serif;
+  --theme-a1-crochet-font-family-display: 'Fraunces', 'Playfair Display', Georgia, Cambria, 'Times New Roman', serif;
+  --theme-a1-crochet-font-weight-body: 400;
+  --theme-a1-crochet-font-weight-heading: 700;
+  --theme-a1-crochet-font-weight-display: 600;
   --theme-a1-fresh-font-family-body: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --theme-a1-fresh-font-family-heading: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --theme-a1-fresh-font-family-display: Baskerville, 'Baskerville Old Face', 'Libre Baskerville', Georgia, Cambria, serif;