@chassis-ui/react 0.1.0 → 0.1.1

package/dist/style.css

@@ -1 +1 @@
-@layer components{.notification.showing{opacity:0}.datepicker-body{position:relative}.datepicker-months-month.selected,.datepicker-years-year.selected{color:var(--cx-primary-contrast);background-color:var(--cx-primary)}.datepicker-months-month.selected:hover,.datepicker-years-year.selected:hover{background-color:var(--cx-primary)}.datepicker-date-outside>.datepicker-date-btn{color:var(--cx-day-disabled-fg-color)}.datepicker-date-weekend:where(:not(.datepicker-date-selected):not(.datepicker-date-unavailable))>.datepicker-date-btn:where(:not([aria-disabled=true])){color:var(--cx-fg-subtle)}.datepicker-date-unavailable:where(:not(.datepicker-date-selected))>.datepicker-date-btn{color:var(--cx-day-disabled-fg-color);text-decoration:line-through}.datepicker-date-selected>.datepicker-date-btn,.datepicker-date-selected.datepicker-date[aria-current=date]>.datepicker-date-btn{color:var(--cx-primary-contrast);background-color:var(--cx-primary)}.datepicker-date-in-range{color:var(--cx-day-range-fg-color);background-color:var(--cx-day-range-bg-color)}.datepicker-date-in-range>.datepicker-date-btn:hover{background-color:unset}.datepicker-date-in-range.datepicker-date-range-start{border-start-start-radius:var(--cx-border-radius-medium);border-end-start-radius:var(--cx-border-radius-medium)}.datepicker-date-in-range.datepicker-date-range-end{border-start-end-radius:var(--cx-border-radius-medium);border-end-end-radius:var(--cx-border-radius-medium)}.datepicker-date-btn:is(.datepicker-date-range-start,.datepicker-date-range-end),.datepicker-date-btn:is(.datepicker-date-range-start,.datepicker-date-range-end):hover{color:var(--cx-primary-contrast);background-color:var(--cx-primary)}.datepicker-date-btn.datepicker-date-range-start:not(.datepicker-date-range-end){border-start-end-radius:0;border-end-end-radius:0}.datepicker-date-btn.datepicker-date-range-end:not(.datepicker-date-range-start){border-start-start-radius:0;border-end-start-radius:0}.datepicker-date[aria-current=date]>.datepicker-date-btn.datepicker-date-range-start,.datepicker-date[aria-current=date]>.datepicker-date-btn.datepicker-date-range-end{color:var(--cx-primary-contrast);background-color:var(--cx-primary)}.datepicker-presets{gap:var(--cx-gap);padding-inline:0 var(--cx-padding-x);border-inline-end:var(--cx-border-width-medium) solid var(--cx-border-subtle);flex-direction:column;margin:0;list-style:none;display:flex}.datepicker-preset{padding:var(--cx-space-2xsmall) var(--cx-space-xsmall);color:var(--cx-fg-main);text-align:start;white-space:nowrap;cursor:pointer;border-radius:var(--cx-border-radius-medium);background-color:#0000;border:0}.datepicker-preset:hover{background-color:var(--cx-bg-hover)}.datepicker-preset:focus-visible{outline:var(--cx-border-width-xlarge) solid var(--cx-primary);outline-offset:-1px}.datepicker-preset.selected{color:var(--cx-primary-contrast);background-color:var(--cx-primary)}.datepicker-preset.selected:hover{background-color:var(--cx-primary)}.datepicker[hidden]{display:none}}.datepicker-field{align-items:center;width:fit-content;display:flex}.datepicker-segment{padding-inline:var(--cx-space-3xsmall);border-radius:var(--cx-border-radius-small);outline:0}.datepicker-segment.placeholder{color:var(--cx-form-idle-fg-inactive)}.datepicker-segment:focus{color:var(--cx-primary-contrast);background-color:var(--cx-primary)}.daterangepicker-separator{margin-inline:var(--cx-gap);color:var(--cx-fg-subtle)}.table-sort-icon{opacity:.6;margin-inline-start:var(--cx-space-2xsmall);font-size:.75em;display:inline-block}[aria-sort=ascending] .table-sort-icon,[aria-sort=descending] .table-sort-icon{opacity:1}[role=columnheader][aria-sort]{cursor:pointer;user-select:none}.table-selection-cell{text-align:center;width:1%;padding-inline-end:0}.table [role=row]:focus-visible,.table [role=gridcell]:focus-visible,.table [role=columnheader]:focus-visible,.table [role=rowheader]:focus-visible{outline:var(--cx-border-width-xlarge) solid var(--cx-primary);outline-offset:-2px}
+@layer components{.notification.showing{opacity:0}.datepicker-body{position:relative}.datepicker-months-month.selected,.datepicker-years-year.selected{color:var(--cx-primary-contrast);background-color:var(--cx-primary)}.datepicker-months-month.selected:hover,.datepicker-years-year.selected:hover{background-color:var(--cx-primary)}.datepicker-date-outside>.datepicker-date-btn{color:var(--cx-day-disabled-fg-color)}.datepicker-date-weekend:where(:not(.datepicker-date-selected):not(.datepicker-date-unavailable))>.datepicker-date-btn:where(:not([aria-disabled=true])){color:var(--cx-fg-subtle)}.datepicker-date-unavailable:where(:not(.datepicker-date-selected))>.datepicker-date-btn{color:var(--cx-day-disabled-fg-color);text-decoration:line-through}.datepicker-date-selected>.datepicker-date-btn,.datepicker-date-selected.datepicker-date[aria-current=date]>.datepicker-date-btn{color:var(--cx-primary-contrast);background-color:var(--cx-primary)}.datepicker-date-in-range{color:var(--cx-day-range-fg-color);background-color:var(--cx-day-range-bg-color)}.datepicker-date-in-range>.datepicker-date-btn:hover{background-color:unset}.datepicker-date-in-range.datepicker-date-range-start{border-start-start-radius:var(--cx-border-radius-md);border-end-start-radius:var(--cx-border-radius-md)}.datepicker-date-in-range.datepicker-date-range-end{border-start-end-radius:var(--cx-border-radius-md);border-end-end-radius:var(--cx-border-radius-md)}.datepicker-date-btn:is(.datepicker-date-range-start,.datepicker-date-range-end),.datepicker-date-btn:is(.datepicker-date-range-start,.datepicker-date-range-end):hover{color:var(--cx-primary-contrast);background-color:var(--cx-primary)}.datepicker-date-btn.datepicker-date-range-start:not(.datepicker-date-range-end){border-start-end-radius:0;border-end-end-radius:0}.datepicker-date-btn.datepicker-date-range-end:not(.datepicker-date-range-start){border-start-start-radius:0;border-end-start-radius:0}.datepicker-date[aria-current=date]>.datepicker-date-btn.datepicker-date-range-start,.datepicker-date[aria-current=date]>.datepicker-date-btn.datepicker-date-range-end{color:var(--cx-primary-contrast);background-color:var(--cx-primary)}.datepicker-presets{gap:var(--cx-gap);padding-inline:0 var(--cx-padding-x);border-inline-end:var(--cx-border-width-md) solid var(--cx-border-subtle);flex-direction:column;margin:0;list-style:none;display:flex}.datepicker-preset{padding:var(--cx-space-2xs) var(--cx-space-xs);color:var(--cx-fg-main);text-align:start;white-space:nowrap;cursor:pointer;border-radius:var(--cx-border-radius-md);background-color:#0000;border:0}.datepicker-preset:hover{background-color:var(--cx-bg-hover)}.datepicker-preset:focus-visible{outline:var(--cx-border-width-xl) solid var(--cx-primary);outline-offset:-1px}.datepicker-preset.selected{color:var(--cx-primary-contrast);background-color:var(--cx-primary)}.datepicker-preset.selected:hover{background-color:var(--cx-primary)}.datagrid{--cx-fg-color:var(--cx-table-td-fg-color,var(--cx-default-fg-main));--cx-bg-color:var(--cx-table-td-bg-color,var(--cx-default-bg-main));--cx-th-fg-color:var(--cx-table-th-fg-color,var(--cx-default-fg-main));--cx-th-bg-color:var(--cx-table-th-bg-color,var(--cx-default-bg-evident));--cx-hover-fg-color:var(--cx-table-hover-fg-color,var(--cx-default-fg-main));--cx-hover-bg-color:var(--cx-table-hover-bg-color,var(--cx-default-bg-evident));--cx-active-fg-color:var(--cx-table-active-fg-color,var(--cx-default-fg-main));--cx-active-bg-color:var(--cx-table-active-bg-color,var(--cx-default-bg-highlight));--cx-border-width:var(--cx-table-border-width,var(--cx-border-width-medium));--cx-border-color:var(--cx-table-border-color,var(--cx-default-border-subtle));--cx-cue-color:var(--cx-table-cue-color,var(--cx-default-cue-main));--cx-cell-padding-y:var(--cx-table-cell-padding-y,.5rem);--cx-cell-padding-x:var(--cx-table-cell-padding-x,.5rem);--cx-datagrid-pin-cue-shadow-start:inset 6px 0 6px -6px #0000004d;--cx-datagrid-pin-cue-shadow-end:inset -6px 0 6px -6px #0000004d;--cx-td-font-family:var(--cx-table-td-font-family,var(--cx-font-family-text));--cx-td-font-size:var(--cx-table-td-font-size,var(--cx-font-size-small));--cx-td-font-weight:var(--cx-table-td-font-weight,var(--cx-font-weight-normal));--cx-td-line-height:var(--cx-table-td-line-height,var(--cx-line-height-small));--cx-th-font-family:var(--cx-table-th-font-family,var(--cx-font-family-text));--cx-th-font-size:var(--cx-table-th-font-size,var(--cx-font-size-small));--cx-th-font-weight:var(--cx-table-th-font-weight,var(--cx-font-weight-strong));--cx-th-line-height:var(--cx-table-th-line-height,var(--cx-line-height-small));width:100%;height:400px;vertical-align:var(--cx-table-cell-vertical-align,top);border-color:var(--cx-border-color);display:block;position:relative;overflow:auto}.datagrid [role=columnheader],.datagrid [role=gridcell],.datagrid [role=rowheader]{box-sizing:border-box;height:100%;padding:var(--cx-cell-padding-y) var(--cx-cell-padding-x);color:var(--cx-fg-color);background-color:var(--cx-bg-color);border-color:var(--cx-border-color);border-style:solid;border-width:0 0 var(--cx-border-width) 0;font:var(--cx-td-font-weight) var(--cx-td-font-size)/var(--cx-td-line-height) var(--cx-td-font-family)}.datagrid .datagrid-header [role=columnheader]{--cx-fg-color:var(--cx-th-fg-color);--cx-bg-color:var(--cx-th-bg-color);font:var(--cx-th-font-weight) var(--cx-th-font-size)/var(--cx-th-line-height) var(--cx-th-font-family)}.datagrid [role=row][data-selected]>*{--cx-fg-color:var(--cx-active-fg-color);--cx-bg-color:var(--cx-active-bg-color)}.datagrid.hoverable [role=row]:not([data-selected]):hover>*{--cx-fg-color:var(--cx-hover-fg-color);--cx-bg-color:var(--cx-hover-bg-color)}.datagrid.bordered{border:var(--cx-border-width) solid var(--cx-border-color)}.datagrid.bordered [role=columnheader],.datagrid.bordered [role=gridcell],.datagrid.bordered [role=rowheader]{border-width:0 var(--cx-border-width) var(--cx-border-width) 0}.datagrid.borderless [role=columnheader],.datagrid.borderless [role=gridcell],.datagrid.borderless [role=rowheader]{border-width:0}.datagrid [role=row]:focus-visible,.datagrid [role=gridcell]:focus-visible,.datagrid [role=columnheader]:focus-visible,.datagrid [role=rowheader]:focus-visible{outline:var(--cx-border-width-xl) solid var(--cx-primary);outline-offset:-2px}.datagrid [role=columnheader][data-allows-sorting]{cursor:pointer;user-select:none}.datagrid .datagrid-sort-icon{opacity:.6;margin-inline-start:var(--cx-space-2xs);font-size:.75em;display:inline-block}.datagrid [data-sort-direction] .datagrid-sort-icon{opacity:1}.datagrid :has(>.datagrid-header),.datagrid :has(>.datagrid-body){overflow:visible!important}.datagrid .datagrid-selection-cell{text-align:center;padding-inline-end:0}.datagrid-footer{--cx-fg-color:var(--cx-table-td-fg-color,var(--cx-default-fg-main));--cx-bg-color:var(--cx-table-td-bg-color,var(--cx-default-bg-main));--cx-border-width:var(--cx-table-border-width,var(--cx-border-width-medium));--cx-border-color:var(--cx-table-border-color,var(--cx-default-border-subtle));--cx-cell-padding-y:var(--cx-table-cell-padding-y,.5rem);--cx-cell-padding-x:var(--cx-table-cell-padding-x,.5rem);box-sizing:border-box;padding:var(--cx-cell-padding-y) var(--cx-cell-padding-x);color:var(--cx-fg-color);background-color:var(--cx-bg-color);border-color:var(--cx-border-color);border-style:solid;border-width:var(--cx-border-width) 0 0 0}.datagrid-footer.borderless{border-width:0}.datepicker[hidden]{display:none}}.datepicker-field{align-items:center;width:fit-content;display:flex}.datepicker-segment{padding-inline:var(--cx-space-3xs);border-radius:var(--cx-border-radius-sm);outline:0}.datepicker-segment.placeholder{color:var(--cx-form-idle-fg-inactive)}.datepicker-segment:focus{color:var(--cx-primary-contrast);background-color:var(--cx-primary)}.daterangepicker-separator{margin-inline:var(--cx-gap);color:var(--cx-fg-subtle)}.table-sort-icon{opacity:.6;margin-inline-start:var(--cx-space-2xs);font-size:.75em;display:inline-block}[aria-sort=ascending] .table-sort-icon,[aria-sort=descending] .table-sort-icon{opacity:1}[role=columnheader][aria-sort]{cursor:pointer;user-select:none}.table-selection-cell{text-align:center;width:1%;padding-inline-end:0}.table [role=row]:focus-visible,.table [role=gridcell]:focus-visible,.table [role=columnheader]:focus-visible,.table [role=rowheader]:focus-visible{outline:var(--cx-border-width-xl) solid var(--cx-primary);outline-offset:-2px}

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@chassis-ui/react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
-  "engines": {
-    "node": ">=24"
-  },
   "description": "Chassis UI Components Library for React.js",
   "keywords": [
     "react",
@@ -36,17 +33,25 @@
     "./style.css": "./dist/style.css"
   },
   "sideEffects": [
-    "./src/utils/suppressFocusRingGlobally.ts"
+    "./dist/index.js",
+    "./dist/style.css"
+  ],
+  "browserslist": [
+    "chrome >= 107",
+    "edge >= 107",
+    "firefox >= 104",
+    "safari >= 16"
   ],
   "files": [
     "dist/",
     "src/"
   ],
   "dependencies": {
-    "@internationalized/date": "^3.12.2",
+    "@internationalized/date": "^3.12.4",
     "classnames": "^2.3.1",
-    "react-aria": "^3.0.0",
-    "react-stately": "^3.0.0",
+    "react-aria": "^3.52.0",
+    "react-aria-components": "^1.20.0",
+    "react-stately": "^3.50.0",
     "react-transition-group": "^4.4.2"
   },
   "devDependencies": {
@@ -55,34 +60,34 @@
     "@chassis-ui/css": "^0.4.0-0",
     "@chassis-ui/tokens": "^0.4.0",
     "@playwright/test": "1.62.1",
-    "@storybook/addon-a11y": "^10.5.6",
-    "@storybook/addon-docs": "^10.5.6",
-    "@storybook/addon-themes": "^10.5.8",
-    "@storybook/addon-vitest": "^10.5.8",
-    "@storybook/react-vite": "^10.5.6",
-    "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@tsdown/css": "^0.22.14",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-themes": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@tsdown/css": "^0.23.0",
     "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@types/react-dom": "^19.2.7",
     "@types/react-transition-group": "^4.4.11",
-    "@vitejs/plugin-react": "^6.0.4",
+    "@vitejs/plugin-react": "^6.1.1",
     "@vitest/browser-playwright": "4.1.10",
     "@vitest/coverage-istanbul": "^4.1.10",
     "bundlewatch": "^0.4.2",
     "http-server": "^14.1.1",
     "jest-axe": "^11.0.0",
-    "jsdom": "^30.0.0",
+    "jsdom": "^30.0.1",
     "playwright": "^1.62.1",
-    "postcss": "^8.5.23",
+    "postcss": "^8.5.28",
     "postcss-prefix-custom-properties": "^0.1.0",
-    "publint": "^0.3.23",
+    "publint": "^0.3.24",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "sass": "^1.101.0",
-    "storybook": "^10.5.10",
-    "tsdown": "0.22.14",
+    "sass": "^1.104.0",
+    "storybook": "^10.6.0",
+    "tsdown": "0.23.0",
     "tslib": "^2.6.0",
     "typescript": "^6.0.3",
     "vitest": "^4.1.10"
@@ -102,6 +107,8 @@
     "lint:prettier": "prettier -c --cache --ignore-path ../../.gitignore --ignore-path ../../.prettierignore .",
     "format": "prettier --write --ignore-path ../../.gitignore --ignore-path ../../.prettierignore .",
     "check:bundle": "bundlewatch --config .bundlewatch.config.json",
+    "check:types": "tsc --noEmit -p tsconfig.json",
+    "check:rsc": "ts-node --project ../../build/tsconfig.json ./scripts/check-rsc-directive.ts",
     "check:package": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./style.css",
     "check:api": "ts-node --project ../../build/tsconfig.json ./scripts/check-api-surface.ts",
     "check:api:update": "ts-node --project ../../build/tsconfig.json ./scripts/check-api-surface.ts --update",

package/src/components/accordion/Accordion.tsx

@@ -88,9 +88,9 @@ export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
    */
   onExpandedChange?: (keys: Array<number | string>) => void
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
 }
 
 export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(

package/src/components/accordion/AccordionItem.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef, DetailsHTMLAttributes, useContext } from 'react'
 import classNames from 'classnames'
 
 import { AccordionContext } from './context'
+import { devWarning } from '../../utils/devWarning'
 
 export interface AccordionItemProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
   /**
@@ -29,12 +30,11 @@ export interface AccordionItemProps extends DetailsHTMLAttributes<HTMLDetailsEle
 
 export const AccordionItem = forwardRef<HTMLDetailsElement, AccordionItemProps>(
   ({ children, alwaysOpen, className, name, open, itemKey: _itemKey, ...rest }, ref) => {
-    if (_itemKey !== undefined) {
-      console.warn(
-        'AccordionItem: the itemKey prop is deprecated and no longer used — the native ' +
-          '<details> element manages its own state. It will be removed in a future major version.'
-      )
-    }
+    devWarning(
+      _itemKey !== undefined,
+      'AccordionItem: the itemKey prop is deprecated and no longer used — the native ' +
+        '<details> element manages its own state. It will be removed in a future major version.'
+    )
 
     const context = useContext(AccordionContext)
     const isAlwaysOpen = alwaysOpen ?? context.alwaysOpen

package/src/components/autocomplete/Autocomplete.tsx

@@ -141,9 +141,9 @@ export interface AutocompleteProps extends Omit<
    */
   searchPlaceholder?: string
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * Set component validation state to valid.
    */
@@ -386,7 +386,7 @@ export const Autocomplete = ({
           className={classNames(
             'form-input',
             'combobox',
-            { small: size === 'small', large: size === 'large', disabled },
+            { sm: size === 'sm', lg: size === 'lg', disabled },
             { 'is-invalid': invalid, 'is-valid': valid },
             className
           )}
@@ -419,7 +419,7 @@ export const Autocomplete = ({
               <div className="combobox-search">
                 <input
                   autoComplete="off"
-                  className="form-input combobox-search-input small"
+                  className="form-input combobox-search-input sm"
                   {...inputHtmlProps}
                   ref={inputRef}
                 />

package/src/components/avatar/Avatar.tsx

@@ -5,7 +5,8 @@ import { ContextColor, ExtendedSizing } from '../../types'
 import {
   createPolymorphicComponent,
   PolymorphicComponentProps,
-  PolymorphicRef
+  PolymorphicRef,
+  PolymorphicRefWithFallback
 } from '../../utils/polymorphic'
 import { Link } from '../link/Link'
 import { Badge } from '../badge'
@@ -68,7 +69,9 @@ export type AvatarProps<C extends ElementType = 'span'> = PolymorphicComponentPr
 >
 
 type AvatarComponent = (<C extends ElementType = 'span'>(
-  props: AvatarProps<C> & { ref?: PolymorphicRef<C> }
+  props: AvatarProps<C> & {
+    ref?: PolymorphicRefWithFallback<C, HTMLSpanElement | HTMLAnchorElement>
+  }
 ) => ReactElement | null) & { displayName?: string }
 
 function AvatarRender<C extends ElementType = 'span'>(

package/src/components/breadcrumb/Breadcrumb.tsx

@@ -15,6 +15,15 @@ export interface BreadcrumbItemDef {
 }
 
 export interface BreadcrumbProps extends HTMLAttributes<HTMLOListElement> {
+  /**
+   * Accessible name of the wrapping `<nav>` landmark. Defaults to the English `'breadcrumb'`;
+   * override it to translate the landmark, or to tell two breadcrumb trails on the same page
+   * apart (landmarks of the same role need distinct names to be distinguishable in a screen
+   * reader's landmark list).
+   *
+   * @default 'breadcrumb'
+   */
+  'aria-label'?: string
   /**
    * A string of all className you want applied to the component.
    */
@@ -27,7 +36,7 @@ export interface BreadcrumbProps extends HTMLAttributes<HTMLOListElement> {
 }
 
 export const Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(
-  ({ children, className, items, ...rest }, ref) => {
+  ({ 'aria-label': ariaLabel = 'breadcrumb', children, className, items, ...rest }, ref) => {
     const _className = classNames('breadcrumb', className)
 
     const autoContent = items
@@ -47,7 +56,7 @@ export const Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(
       : null
 
     return (
-      <nav aria-label="breadcrumb">
+      <nav aria-label={ariaLabel}>
         <ol className={_className} {...rest} ref={ref}>
           {autoContent ?? children}
         </ol>

package/src/components/button/Button.tsx

@@ -13,7 +13,8 @@ import { useButtonSemantics, useDisabledAnchorGuard } from '../../hooks'
 import {
   createPolymorphicComponent,
   PolymorphicComponentProps,
-  PolymorphicRef
+  PolymorphicRef,
+  PolymorphicRefWithFallback
 } from '../../utils/polymorphic'
 
 type ButtonOwnProps<C extends ElementType> = {
@@ -53,9 +54,9 @@ type ButtonOwnProps<C extends ElementType> = {
    */
   shape?: Shapes
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * Specifies the type of button. Always specify the type attribute for the `<button>` element.
    * Different browsers may use different default types for the `<button>` element.
@@ -75,7 +76,9 @@ export type ButtonProps<C extends ElementType = 'button'> = PolymorphicComponent
 >
 
 type ButtonComponent = (<C extends ElementType = 'button'>(
-  props: ButtonProps<C> & { ref?: PolymorphicRef<C> }
+  props: ButtonProps<C> & {
+    ref?: PolymorphicRefWithFallback<C, HTMLButtonElement | HTMLAnchorElement>
+  }
 ) => ReactElement | null) & { displayName?: string }
 
 function ButtonRender<C extends ElementType = 'button'>(

package/src/components/button-group/ButtonGroup.tsx

@@ -17,9 +17,9 @@ type ButtonGroupOwnProps<C extends ElementType> = {
    */
   component?: C
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
    */

package/src/components/calendar/Calendar.tsx

@@ -18,6 +18,7 @@ import { CalendarNavButton } from './CalendarNavButton'
 import { CalendarWeekGrid } from './CalendarWeekGrid'
 import { mergeIsDateUnavailable } from '../../utils/mergeIsDateUnavailable'
 import './Calendar.scss'
+import { CalendarLabels, CalendarLabelsProvider } from './labels'
 
 interface CalendarBaseProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
@@ -55,6 +56,14 @@ interface CalendarBaseProps extends Omit<
    * shown but cannot be selected.
    */
   isDateUnavailable?: (date: DateValue) => boolean
+  /**
+   * Overrides for the handful of strings this component renders itself rather than getting from
+   * the active locale (the year view's paging arrows, its live-region announcements, and the
+   * month/year header buttons). Everything else — month and weekday names, the calendar system —
+   * follows `I18nProvider`'s locale via react-aria and needs no override. Merged over the English
+   * defaults, so passing one key leaves the rest alone.
+   */
+  labels?: Partial<CalendarLabels>
   /**
    * The maximum allowed date that a user may select.
    */
@@ -71,7 +80,7 @@ interface CalendarBaseProps extends Omit<
   unavailableDates?: string[]
   /**
    * Number of months to display side by side, sharing one selection. Wraps to multiple rows in
-   * a narrow container (e.g. a popover on a small screen) rather than overflowing — the wrap is
+   * a narrow container (e.g. a popover on a sm screen) rather than overflowing — the wrap is
    * driven by the calendar's own width, not the viewport, so it adapts correctly regardless of
    * where the calendar is embedded.
    *
@@ -145,6 +154,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>((props, forwar
     disabled,
     firstDayOfWeek = 'mon',
     isDateUnavailable,
+    labels,
     maxValue,
     minValue,
     onChange,
@@ -231,52 +241,56 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>((props, forwar
   const nextButton = <CalendarNavButton buttonProps={nextButtonProps} direction="next" />
 
   return (
-    <div
-      {...mergeProps(calendarProps, rest)}
-      className={classNames('datepicker', className)}
-      data-cx-inline="true"
-      ref={ref}
-    >
-      {visibleMonths === 1 ? (
-        <CalendarMonthYearPicker
-          monthStart={state.visibleRange.start}
-          nextArrow={nextButton}
-          prevArrow={prevButton}
-          state={state}
-        >
-          <CalendarWeekGrid
-            firstDayOfWeek={firstDayOfWeek}
-            renderCell={(date) => <CalendarCell date={date} locale={locale} state={state} />}
+    <CalendarLabelsProvider labels={labels}>
+      <div
+        {...mergeProps(calendarProps, rest)}
+        className={classNames('datepicker', className)}
+        data-cx-inline="true"
+        ref={ref}
+      >
+        {visibleMonths === 1 ? (
+          <CalendarMonthYearPicker
+            monthStart={state.visibleRange.start}
+            nextArrow={nextButton}
+            prevArrow={prevButton}
             state={state}
-          />
-        </CalendarMonthYearPicker>
-      ) : (
-        <>
-          {/* `.datepicker[data-cx-inline]` (the root above) is already `position: relative` in
+          >
+            <CalendarWeekGrid
+              firstDayOfWeek={firstDayOfWeek}
+              renderCell={(date) => <CalendarCell date={date} locale={locale} state={state} />}
+              state={state}
+            />
+          </CalendarMonthYearPicker>
+        ) : (
+          <>
+            {/* `.datepicker[data-cx-inline]` (the root above) is already `position: relative` in
               chassis-css, so this overlay needs no extra positioning wrapper of its own — unlike
               `RangeCalendar`, which has a `presets` column sharing that root and so scopes its
               own copy of this overlay to a nested `.datepicker-body` instead. */}
-          {!hasPickerView && (
-            <div className="datepicker-controls">
-              {prevButton}
-              {nextButton}
+            {!hasPickerView && (
+              <div className="datepicker-controls">
+                {prevButton}
+                {nextButton}
+              </div>
+            )}
+            <div className="datepicker-grid">
+              {[...new Array(visibleMonths).keys()].map((monthIndex) => (
+                <CalendarMonthBlock
+                  firstDayOfWeek={firstDayOfWeek}
+                  key={monthIndex}
+                  monthIndex={monthIndex}
+                  onViewChange={(view) =>
+                    setMonthViews((prev) => ({ ...prev, [monthIndex]: view }))
+                  }
+                  renderCell={(date) => <CalendarCell date={date} locale={locale} state={state} />}
+                  state={state}
+                />
+              ))}
             </div>
-          )}
-          <div className="datepicker-grid">
-            {[...new Array(visibleMonths).keys()].map((monthIndex) => (
-              <CalendarMonthBlock
-                firstDayOfWeek={firstDayOfWeek}
-                key={monthIndex}
-                monthIndex={monthIndex}
-                onViewChange={(view) => setMonthViews((prev) => ({ ...prev, [monthIndex]: view }))}
-                renderCell={(date) => <CalendarCell date={date} locale={locale} state={state} />}
-                state={state}
-              />
-            ))}
-          </div>
-        </>
-      )}
-    </div>
+          </>
+        )}
+      </div>
+    </CalendarLabelsProvider>
   )
 })
 

package/src/components/calendar/CalendarMonthGrid.tsx

@@ -5,6 +5,7 @@ import { CalendarState, RangeCalendarState } from 'react-stately'
 import { CalendarDate } from '@internationalized/date'
 
 import { isWholeUnitDisabled } from '../../utils/isWholeUnitDisabled'
+import { useCalendarLabels } from './labels'
 
 interface CalendarMonthGridProps {
   // Whether to render the visually-hidden `aria-live` announcement of this view's current header
@@ -27,6 +28,7 @@ export const CalendarMonthGrid = ({
   onSelect,
   state
 }: CalendarMonthGridProps) => {
+  const labels = useCalendarLabels()
   const monthFormatter = useDateFormatter({
     calendar: monthStart.calendar.identifier,
     month: 'short',
@@ -55,7 +57,7 @@ export const CalendarMonthGrid = ({
       </div>
       {announce && (
         <span role="status" className="visually-hidden">
-          {`Select month, ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}
+          {`${labels.selectMonth}, ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}
         </span>
       )}
       <div className="datepicker-content">

package/src/components/calendar/CalendarMonthYearPicker.tsx

@@ -6,6 +6,7 @@ import { CalendarDate } from '@internationalized/date'
 import { CalendarMonthGrid } from './CalendarMonthGrid'
 import { CalendarYearGrid } from './CalendarYearGrid'
 import { setVisibleRangeStart } from '../../utils/setVisibleRangeStart'
+import { useCalendarLabels } from './labels'
 
 interface CalendarMonthYearPickerProps {
   // The day grid, shown in the default 'days' view — owned by the caller (`Calendar` and
@@ -49,6 +50,7 @@ export const CalendarMonthYearPicker = ({
   prevArrow,
   state
 }: CalendarMonthYearPickerProps) => {
+  const labels = useCalendarLabels()
   const [view, setView] = useState<'days' | 'months' | 'years'>('days')
   const containerRef = useRef<HTMLDivElement>(null)
   // Skipped on mount — there's no prior view to restore focus from yet, and stealing focus
@@ -129,7 +131,7 @@ export const CalendarMonthYearPicker = ({
             {prevArrow}
             <div className="datepicker-header-content">
               <button
-                aria-label={`Month: ${monthFormatter.format(monthStart.toDate(state.timeZone))}`}
+                aria-label={`${labels.month}: ${monthFormatter.format(monthStart.toDate(state.timeZone))}`}
                 className="datepicker-month"
                 disabled={state.isDisabled}
                 onClick={() => changeView('months')}
@@ -138,7 +140,7 @@ export const CalendarMonthYearPicker = ({
                 {monthFormatter.format(monthStart.toDate(state.timeZone))}
               </button>
               <button
-                aria-label={`Year: ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}
+                aria-label={`${labels.year}: ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}
                 className="datepicker-year"
                 disabled={state.isDisabled}
                 onClick={() => changeView('years')}

package/src/components/calendar/CalendarYearGrid.tsx

@@ -5,6 +5,7 @@ import { CalendarState, RangeCalendarState } from 'react-stately'
 import { CalendarDate, toCalendarDate } from '@internationalized/date'
 
 import { isWholeUnitDisabled } from '../../utils/isWholeUnitDisabled'
+import { useCalendarLabels } from './labels'
 
 interface CalendarYearGridProps {
   // Whether to render the visually-hidden `aria-live` announcement of this view's current header
@@ -31,6 +32,7 @@ export const CalendarYearGrid = ({
   onSelect,
   state
 }: CalendarYearGridProps) => {
+  const labels = useCalendarLabels()
   const yearFormatter = useDateFormatter({
     calendar: monthStart.calendar.identifier,
     timeZone: state.timeZone,
@@ -76,7 +78,7 @@ export const CalendarYearGrid = ({
     <>
       <div className="datepicker-header">
         <button
-          aria-label="Previous years"
+          aria-label={labels.previousYears}
           className="datepicker-arrow datepicker-arrow-prev"
           disabled={isPrevDisabled}
           onClick={() => setPageStart((start) => start - YEARS_PER_PAGE)}
@@ -88,7 +90,7 @@ export const CalendarYearGrid = ({
           </button>
         </div>
         <button
-          aria-label="Next years"
+          aria-label={labels.nextYears}
           className="datepicker-arrow datepicker-arrow-next"
           disabled={isNextDisabled}
           onClick={() => setPageStart((start) => start + YEARS_PER_PAGE)}
@@ -97,7 +99,7 @@ export const CalendarYearGrid = ({
       </div>
       {announce && (
         <span role="status" className="visually-hidden">
-          {`Select year, ${rangeLabel}`}
+          {`${labels.selectYear}, ${rangeLabel}`}
         </span>
       )}
       <div className="datepicker-content">

package/src/components/calendar/RangeCalendar.scss

@@ -19,13 +19,13 @@
   }
 
   .datepicker-date-in-range.datepicker-date-range-start {
-    @include border-top-start-radius(var(--border-radius-medium));
-    @include border-bottom-start-radius(var(--border-radius-medium));
+    @include border-top-start-radius(var(--border-radius-md));
+    @include border-bottom-start-radius(var(--border-radius-md));
   }
 
   .datepicker-date-in-range.datepicker-date-range-end {
-    @include border-top-end-radius(var(--border-radius-medium));
-    @include border-bottom-end-radius(var(--border-radius-medium));
+    @include border-top-end-radius(var(--border-radius-md));
+    @include border-bottom-end-radius(var(--border-radius-md));
   }
 
   .datepicker-date-btn:is(.datepicker-date-range-start, .datepicker-date-range-end),
@@ -60,18 +60,18 @@
     padding-inline: 0 var(--padding-x);
     margin: 0;
     list-style: none;
-    border-inline-end: var(--border-width-medium) solid var(--border-subtle);
+    border-inline-end: var(--border-width-md) solid var(--border-subtle);
   }
 
   .datepicker-preset {
-    padding: var(--space-2xsmall) var(--space-xsmall);
+    padding: var(--space-2xs) var(--space-xs);
     color: var(--fg-main);
     text-align: start;
     white-space: nowrap;
     cursor: pointer;
     background-color: transparent;
     border: 0;
-    @include border-radius(var(--border-radius-medium));
+    @include border-radius(var(--border-radius-md));
   }
 
   .datepicker-preset:hover {
@@ -79,7 +79,7 @@
   }
 
   .datepicker-preset:focus-visible {
-    outline: var(--border-width-xlarge) solid var(--primary);
+    outline: var(--border-width-xl) solid var(--primary);
     outline-offset: -1px;
   }