@kanso-labs/kanso-ui 0.38.0 → 0.39.0

package/README.md

@@ -20,6 +20,9 @@ Every component is documented in Storybook, published from the latest release at
 npm install @kanso-labs/kanso-ui
 ```
 
+Coming from an earlier 0.x release? [`UPGRADING.md`](UPGRADING.md) lists every
+breaking change on the way to 1.0, with the edit each one asks for.
+
 ## Usage
 
 ```tsx
@@ -36,13 +39,19 @@ default, in both light and dark (respecting the OS-level
 `prefers-color-scheme`), and every component sizes itself with
 `box-sizing: border-box` rather than leaving that to a reset you supply.
 
-A bundler is what resolves that stylesheet. In an environment that cannot import
-CSS from JavaScript — some server-side renderers, or a plain Node process —
-import it yourself instead and the components style themselves the same way:
+A bundler is what resolves that stylesheet, so the package always loads through
+one. The main entry imports `./styles.css` itself and Node has no loader for
+CSS, so in plain Node an `import` or a `require()` of `@kanso-labs/kanso-ui`
+throws `ERR_UNKNOWN_FILE_EXTENSION`; `@kanso-labs/kanso-ui/date` is the one
+entry plain Node can load. A server renderer or a test runner that leaves
+dependencies to Node takes one setting to hand this package to its bundler
+instead, and [Server rendering and tests](#server-rendering-and-tests) gives it
+for Vite, Vitest and Jest.
 
-```ts
-import '@kanso-labs/kanso-ui/styles.css'
-```
+The same stylesheet is published on its own, as
+`@kanso-labs/kanso-ui/styles.css`, for CSS that loads it apart from the
+JavaScript: an `@import` in a stylesheet of your own, or a `<link>`. It adds the
+rules and nothing else, so it is not a way round the main entry's own import.
 
 `className` and `style` reach the element a component renders, so a component is
 positioned from the call site like any other element:
@@ -203,7 +212,7 @@ the page scrolls, becoming the small bar:
     contentMaxInlineSize="960px"
     headline="Headline"
     scrolled={scrollTop > 0}
-    size="large"
+    size="lg"
   />
   {page}
 </div>
@@ -367,13 +376,70 @@ Four things follow from where that boundary falls.
   ```
 
 - **The React Aria utilities the package re-exports are client-only** —
-  `I18nProvider`, `useListData`, `parseColor` and the rest. `collectionSizes` is
-  a plain value and works on either side.
+  `I18nProvider`, `useListData`, `parseColor` and the rest. `collectionSizes`,
+  `colorScheme` and `themeScope` are plain values and work on either side.
 - **A server-rendered app wraps its tree in `I18nProvider`** with the request's
   locale. React Aria reads the browser's locale on the client and has none on
   the server, so without it a date or a number can render differently on the two
   and fail hydration.
 
+### Server rendering and tests
+
+The main entry imports its own stylesheet, so the package has to reach a bundler
+wherever it runs. Three tools hand dependencies to Node by default, and each has
+a setting that sends this package through its bundler instead.
+
+**Vite's server rendering** leaves dependencies to Node, in `vite dev` and in a
+built server alike, so the server of a Vite-based framework — React Router's
+framework mode, TanStack Start, Astro, Vike — throws
+`ERR_UNKNOWN_FILE_EXTENSION` for `dist/styles.css` as it starts. Name the
+package in `ssr.noExternal`, wherever the framework takes its Vite settings
+(Astro's sit under `vite` in `astro.config.mjs`):
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  ssr: { noExternal: ['@kanso-labs/kanso-ui'] },
+})
+```
+
+**Vitest** leaves dependencies to Node too, so the first test that imports a
+component fails with `Unknown file extension ".css"`. Inline the package:
+
+```ts
+// vitest.config.ts
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: { server: { deps: { inline: ['@kanso-labs/kanso-ui'] } } },
+})
+```
+
+**Jest** wants a stand-in for the stylesheet, since it has no loader for CSS,
+and a transform for the package, since the package is ES modules:
+
+```js
+// jest.config.cjs
+module.exports = {
+  moduleNameMapper: { '\\.css$': '<rootDir>/style-stub.cjs' },
+  transformIgnorePatterns: [
+    '^(?!.*/node_modules/@kanso-labs/kanso-ui/).*/node_modules/',
+  ],
+}
+```
+
+`style-stub.cjs` is `module.exports = {}`, and the transform needs a Babel
+config that compiles modules to CommonJS, such as `@babel/preset-env`. The
+pattern is written to let in everything under the package, its own
+`dist/node_modules` included, which carries StyleX's runtime: the shorter
+`/node_modules/(?!@kanso-labs/kanso-ui/)` matches again at that second
+`node_modules` and leaves the runtime untransformed. On Node 24.9 or newer, Jest
+30 can load the package as ES modules instead, under
+`NODE_OPTIONS=--experimental-vm-modules`, and then needs the `moduleNameMapper`
+alone.
+
 ## Theming
 
 Every design token — color, spacing, radii, sizing, shadows, typography,
@@ -395,10 +461,8 @@ component, independent of your app's build tooling:
 }
 ```
 
-Overrides must target `:root` (or another selector matching the `<html>`
-element) — components resolve their tokens once, at the root, so redeclaring a
-`--kui-*` property on a smaller scope (e.g. a wrapping `<div>`) doesn't reach
-them.
+Overrides on `:root` reach the whole page. To theme part of one, declare them on
+a `ThemeScope` instead — see [Theming part of a page](#theming-part-of-a-page).
 
 [`@kanso-labs/kanso-ui/tokens.css`](src/tokens/design.tokens.css) is the
 canonical, generated reference for every available variable and its current
@@ -409,41 +473,107 @@ default value — useful for discovering names, not required at runtime
 import '@kanso-labs/kanso-ui/tokens.css'
 ```
 
+### Theming part of a page
+
+The tokens resolve once, on `:root`, and every component inherits them already
+resolved, so a `--kui-*` property redeclared on a smaller element — a wrapping
+`<div>` — reaches nothing on its own. `ThemeScope` resolves them again on an
+element of its own. An override declared on the scope, through `className` or
+`style`, or on any element around it, reaches every component inside, and the
+rest of the page keeps its own tokens:
+
+```css
+.accent {
+  --kui-color-primary: #7d5260;
+  --kui-color-on-primary: #ffffff;
+}
+```
+
+```tsx
+import { Select, ThemeScope } from '@kanso-labs/kanso-ui'
+
+function Section() {
+  return (
+    <ThemeScope className="accent">
+      <Select label="Label">…</Select>
+    </ThemeScope>
+  )
+}
+```
+
+`scheme` pins the scope to `'light'` or `'dark'`, whatever the OS asks for. Left
+unset, the scope keeps the scheme around it, so a scope inside a dark page stays
+dark.
+
+Overlays come along. React Aria portals a popover, a sheet, a tooltip or a
+snackbar to the end of `<body>`, outside any wrapper; one opened inside a
+`ThemeScope` portals into the scope instead, and takes its tokens with it. The
+cost is that an ancestor confining its descendants confines those overlays too —
+a `transform` or a `filter` makes a sheet's scrim cover that ancestor rather
+than the viewport, and `overflow: hidden` clips a popover — so put the scope
+around such an element rather than inside it.
+
+`themeScope` is the same thing as a class name, for an element you render
+yourself. Overlays opened under it still portal to the body and keep the page's
+tokens, since nothing tells them otherwise.
+
 ### Pinning light or dark
 
 The colours follow the reader's OS through `prefers-color-scheme` unless the app
 says otherwise. An app with a theme switch of its own pins a scheme with
-`colorScheme`, two class names: put `colorScheme.light` or `colorScheme.dark` on
-the `<html>` element, and remove both to follow the OS again. The `<html>`
-element is the place for it, since overlays are portalled to the body and still
-sit inside it.
+`colorScheme`: put `colorScheme.light` or `colorScheme.dark` on the `<html>`
+element, and remove it to follow the OS again. The `<html>` element is the place
+for it, since overlays are portalled to the body and still sit inside it. Either
+also works on a smaller element, as a `themeScope` that pins.
 
-Its shape is the one next-themes takes for class names, so a provider is all it
-needs:
+Each is several class names separated by spaces, so set it through `className`,
+or spread `name.split(' ')` into `classList.add`. A provider that adds one class
+per scheme throws on it — next-themes' `value` option is one. With a provider of
+that kind, render a `ThemeScope` around the app instead and hand it the
+provider's scheme:
 
 ```tsx
-import { ThemeProvider } from 'next-themes'
-import { colorScheme } from '@kanso-labs/kanso-ui'
+'use client'
+
+import { ThemeProvider, useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+import { ThemeScope } from '@kanso-labs/kanso-ui'
+
+function Scheme({ children }: { children: React.ReactNode }) {
+  const { resolvedTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  const scheme =
+    mounted && (resolvedTheme === 'dark' || resolvedTheme === 'light')
+      ? resolvedTheme
+      : undefined
+
+  return <ThemeScope scheme={scheme}>{children}</ThemeScope>
+}
 
 function Providers({ children }: { children: React.ReactNode }) {
   return (
-    <ThemeProvider attribute="class" value={colorScheme}>
-      {children}
+    <ThemeProvider attribute="data-theme">
+      <Scheme>{children}</Scheme>
     </ThemeProvider>
   )
 }
 ```
 
+The server cannot know the stored choice, so the scope takes it only once the
+page has mounted, which keeps the first client render matching the server's. The
+first paint follows the OS until then.
+
 A `--kui-color-*` override on `:root` still applies under a pinned scheme. To
 give one scheme a value of its own, key the override on an attribute your switch
 sets beside the class, since the class names are generated.
 
 ### For StyleX consumers
 
-If your app also uses StyleX, theme with
-[`stylex.createTheme()`](https://stylexjs.com/docs/learn/theming/) instead — it
-produces a scoped override class rather than a global one. The token objects
-themselves (`colors`, `typography`, `spacing`, `radii`, `sizing`, `shadows`,
+An app that also uses StyleX themes the same way, through the `--kui-*`
+properties and `ThemeScope`. The token objects
+[`stylex.createTheme()`](https://stylexjs.com/docs/learn/theming/) would take
+(`colors`, `typography`, `spacing`, `radii`, `sizing`, `shadows`,
 `stateLayerOpacity` and `motion`) aren't part of the public API yet; open an
 issue if you need them exported.
 

package/dist/button/hooks.js

@@ -1,6 +1,6 @@
+import { refCallback } from "../render/ref.js";
 import { ariaAttributesOf } from "../render/aria.js";
 import { useRipple } from "../hooks/useRipple.js";
-import { refCallback } from "../render/ref.js";
 import { c } from "react/compiler-runtime";
 import { ButtonContext, useSlottedContext } from "react-aria-components";
 //#region src/button/hooks.ts

package/dist/button/index.js

@@ -146,8 +146,8 @@ function buttonContent(children, pendingLabel, surface) {
 			...props(buttonBaseStyles.pending),
 			children: /* @__PURE__ */ jsx(ProgressIndicator, {
 				"aria-label": pendingLabel,
+				diameter: "1em",
 				isIndeterminate: true,
-				size: "1em",
 				tone: "inherit",
 				variant: "circular"
 			})

package/dist/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","RefAttributes","ButtonRenderProps","ClassNameOrFunction","ButtonProps","RACButtonProps","ToggleButtonProps","RACToggleButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","ProgressIndicator","useToggleGroupDisabled","useMessages","buttonRenderer","linkRenderer","toggleButtonRenderer","mergeStatefulStyles","useButtonBase","buttonBaseStyles","ButtonBaseProps","children","classes","state","ButtonState","ReturnType","props","className","disableRipple","href","pendingLabel","rel","style","target","ButtonDOMProps","HTMLAnchorElement","HTMLButtonElement","Omit","GlobalEventKey","Pick","HTMLElement","isSelected","Exclude","ToggleButtonBaseProps","defaultSelected","onChange","ButtonBase","t0","$","_c","input","render","t1","isPending","undefined","messages","disabled","element","ref","ripple","t2","styleProps","t3","t4","handlers","surface","t5","loading","t6","buttonContent","t7","label","labelPending","pending","ToggleButtonBase","disabledByGroup","id","isDisabled","toggleRender","toggleContent","_c","RACLink","RACButton","stylex.props","RACToggleButton"],"sources":["../../src/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, ButtonProps as RACButtonProps, ToggleButtonProps as RACToggleButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton } from 'react-aria-components';\nimport ProgressIndicator from '../components/progress-indicator';\nimport { useToggleGroupDisabled } from '../hooks/useToggleGroupDisabled';\nimport { useMessages } from '../i18n';\nimport { buttonRenderer, linkRenderer, toggleButtonRenderer } from '../render/aria';\nimport { mergeStatefulStyles } from '../styles/merge';\nimport { useButtonBase } from './hooks';\nimport { buttonBaseStyles } from './styles';\n\n// The press-button core Button and IconButton both render through. A button\n// is React Aria's `Button`, its `Link` once given `href`, or its\n// `ToggleButton` once it reports a state, and around each this adds what\n// React Aria leaves out: the ripple, the disabled state a parent's context\n// sets, the `aria-*` props and keyboard handlers it would drop or wrap, and\n// the ring drawn over the label while the button is pending. Each component\n// brings its own classes, as a function of the render state, and the call\n// site's `className` and `style` are merged over them.\n//\n// One module rather than a copy in each, since the copies had already drifted\n// once: IconButton read `ButtonContext` for a parent's disabled state and\n// Button did not. Not a component of the library's own and not exported from\n// the package; see `src/row` for the same arrangement around a list's row.\n\ntype ButtonBaseProps = {\n  children?: ReactNode;\n  /**\n   * The component's own classes, from the render state. The call site's\n   * `className` and `style` are merged over them.\n   */\n  classes: (state: ButtonState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  disableRipple?: boolean;\n  href?: string;\n  pendingLabel?: string;\n  rel?: string;\n  style?: StyleOrFunction<ButtonState>;\n  target?: string;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n// The props a button hands React Aria. React Aria types the global DOM events\n// — pointer, mouse, touch, wheel and the rest — against the element each\n// component renders, and a handler written for a <button> does not type-check\n// against an <a>. The keys are retyped against HTMLElement here so one set of\n// props serves both forms; the events React Aria defines itself (press,\n// focus, keyboard) keep its types, since it hands those its own event objects.\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\n\n// The render state React Aria's three elements share. A className or style\n// function written against it serves the button, the link and the toggle\n// alike; `isPending` belongs to the button alone, and `isCurrent` to the\n// link, so neither is here. What the button draws while pending is decided\n// in `buttonContent`, which sees React Aria's own state rather than this one.\n//\n// `isSelected` is optional because only the toggle has one: React Aria hands\n// the button and the link a state without it and the toggle a state with\n// it, and a parameter type this wide accepts either.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'> & {\n  isSelected?: boolean;\n};\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype ToggleButtonBaseProps = {\n  children?: ReactNode;\n  /** As for ButtonBase, handed `isSelected` as well. */\n  classes: (state: ButtonState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  defaultSelected?: boolean;\n  disableRipple?: boolean;\n  isSelected?: boolean;\n  onChange?: (isSelected: boolean) => void;\n  style?: StyleOrFunction<ButtonState>;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n/**\n * A button drawn with the classes a component hands it: React Aria's\n * `Button`, or its `Link` given `href`. See the header.\n */\nfunction ButtonBase({\n  children,\n  classes,\n  href,\n  isPending = false,\n  pendingLabel,\n  rel,\n  render,\n  target,\n  ...input\n}: ButtonBaseProps) {\n  const messages = useMessages();\n  const {\n    disabled,\n    element,\n    props,\n    ref,\n    ripple\n  } = useButtonBase(input, isPending);\n  const styleProps = mergeStatefulStyles(classes, props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} ref={ref} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} ref={ref} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel ?? messages.loading, ripple.surface)}\n    </RACButton>;\n}\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, surface: ReactNode) {\n  return (state: ButtonRenderProps) => <>\n      <span {...stylex.props(buttonBaseStyles.label, state.isPending && buttonBaseStyles.labelPending)}>\n        {children}\n      </span>\n      {state.isPending ? <span {...stylex.props(buttonBaseStyles.pending)}>\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {surface}\n    </>;\n}\n\n/**\n * A toggle drawn with the classes a component hands it: React Aria's\n * `ToggleButton`, which reports its state through `aria-pressed`. It is never\n * a link and never pending — React Aria's toggle takes neither, and neither\n * means anything for a control whose whole job is to report which of two\n * states it is in — so `isPending` reaches it only to keep the ripple off,\n * as it does for the plain button.\n */\nfunction ToggleButtonBase({\n  children,\n  classes,\n  defaultSelected,\n  isPending = false,\n  isSelected,\n  onChange,\n  render,\n  ...input\n}: ToggleButtonBaseProps) {\n  // A selecting ButtonGroup disables its toggles through React Aria's group\n  // state, which no prop here carries, so the ripple would stay on in a\n  // disabled group and answer a press with an animation. Handed on as the\n  // toggle's own `isDisabled`, which is what React Aria makes of it anyway.\n  const disabledByGroup = useToggleGroupDisabled(input.id);\n  const {\n    disabled,\n    element,\n    props,\n    ref,\n    ripple\n  } = useButtonBase(disabledByGroup ? {\n    ...input,\n    isDisabled: true\n  } : input, isPending);\n  return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} ref={ref} render={toggleButtonRenderer(element, toggleRender(render))} {...ripple.handlers} {...props} {...mergeStatefulStyles(classes, props)}>\n      {toggleContent(children, ripple.surface)}\n    </RACToggleButton>;\n}\n\n// What a toggle draws: its label and the ripple. No pending ring — see\n// ToggleButtonBase. Built by a call for the reason `buttonContent` is.\nfunction toggleContent(children: ReactNode, surface: ReactNode) {\n  return () => <>\n      {children}\n      {surface}\n    </>;\n}\n\n// A call site's `render` is written for React Aria's button, whose render\n// state says whether it is pending; a toggle's says nothing of it, and a\n// toggle never is. So the toggle hands that function its own state with\n// `isPending` filled in, which is what lets one `render` prop serve a button\n// whichever element it turns out to be.\nfunction toggleRender(render: RACButtonProps['render']): RACToggleButtonProps['render'] {\n  if (render === undefined) {\n    return undefined;\n  }\n  return (props, state) => render(props, {\n    ...state,\n    isPending: false\n  });\n}\nexport type { ButtonDOMProps, ButtonState };\nexport { ButtonBase, ToggleButtonBase };"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","RefAttributes","ButtonRenderProps","ClassNameOrFunction","ButtonProps","RACButtonProps","ToggleButtonProps","RACToggleButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","ProgressIndicator","useToggleGroupDisabled","useMessages","buttonRenderer","linkRenderer","toggleButtonRenderer","mergeStatefulStyles","useButtonBase","buttonBaseStyles","ButtonBaseProps","children","classes","state","ButtonState","ReturnType","props","className","disableRipple","href","pendingLabel","rel","style","target","ButtonDOMProps","HTMLAnchorElement","HTMLButtonElement","Omit","GlobalEventKey","Pick","HTMLElement","isSelected","Exclude","ToggleButtonBaseProps","defaultSelected","onChange","ButtonBase","t0","$","_c","input","render","t1","isPending","undefined","messages","disabled","element","ref","ripple","t2","styleProps","t3","t4","handlers","surface","t5","loading","t6","buttonContent","t7","label","labelPending","pending","ToggleButtonBase","disabledByGroup","id","isDisabled","toggleRender","toggleContent","_c","RACLink","RACButton","stylex.props","RACToggleButton"],"sources":["../../src/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, ButtonProps as RACButtonProps, ToggleButtonProps as RACToggleButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton } from 'react-aria-components';\nimport ProgressIndicator from '../components/progress-indicator';\nimport { useToggleGroupDisabled } from '../hooks/useToggleGroupDisabled';\nimport { useMessages } from '../i18n';\nimport { buttonRenderer, linkRenderer, toggleButtonRenderer } from '../render/aria';\nimport { mergeStatefulStyles } from '../styles/merge';\nimport { useButtonBase } from './hooks';\nimport { buttonBaseStyles } from './styles';\n\n// The press-button core Button and IconButton both render through. A button\n// is React Aria's `Button`, its `Link` once given `href`, or its\n// `ToggleButton` once it reports a state, and around each this adds what\n// React Aria leaves out: the ripple, the disabled state a parent's context\n// sets, the `aria-*` props and keyboard handlers it would drop or wrap, and\n// the ring drawn over the label while the button is pending. Each component\n// brings its own classes, as a function of the render state, and the call\n// site's `className` and `style` are merged over them.\n//\n// One module rather than a copy in each, since the copies had already drifted\n// once: IconButton read `ButtonContext` for a parent's disabled state and\n// Button did not. Not a component of the library's own and not exported from\n// the package; see `src/row` for the same arrangement around a list's row.\n\ntype ButtonBaseProps = {\n  children?: ReactNode;\n  /**\n   * The component's own classes, from the render state. The call site's\n   * `className` and `style` are merged over them.\n   */\n  classes: (state: ButtonState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  disableRipple?: boolean;\n  href?: string;\n  pendingLabel?: string;\n  rel?: string;\n  style?: StyleOrFunction<ButtonState>;\n  target?: string;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n// The props a button hands React Aria. React Aria types the global DOM events\n// — pointer, mouse, touch, wheel and the rest — against the element each\n// component renders, and a handler written for a <button> does not type-check\n// against an <a>. The keys are retyped against HTMLElement here so one set of\n// props serves both forms; the events React Aria defines itself (press,\n// focus, keyboard) keep its types, since it hands those its own event objects.\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\n\n// The render state React Aria's three elements share. A className or style\n// function written against it serves the button, the link and the toggle\n// alike; `isPending` belongs to the button alone, and `isCurrent` to the\n// link, so neither is here. What the button draws while pending is decided\n// in `buttonContent`, which sees React Aria's own state rather than this one.\n//\n// `isSelected` is optional because only the toggle has one: React Aria hands\n// the button and the link a state without it and the toggle a state with\n// it, and a parameter type this wide accepts either.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'> & {\n  isSelected?: boolean;\n};\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype ToggleButtonBaseProps = {\n  children?: ReactNode;\n  /** As for ButtonBase, handed `isSelected` as well. */\n  classes: (state: ButtonState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  defaultSelected?: boolean;\n  disableRipple?: boolean;\n  isSelected?: boolean;\n  onChange?: (isSelected: boolean) => void;\n  style?: StyleOrFunction<ButtonState>;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n/**\n * A button drawn with the classes a component hands it: React Aria's\n * `Button`, or its `Link` given `href`. See the header.\n */\nfunction ButtonBase({\n  children,\n  classes,\n  href,\n  isPending = false,\n  pendingLabel,\n  rel,\n  render,\n  target,\n  ...input\n}: ButtonBaseProps) {\n  const messages = useMessages();\n  const {\n    disabled,\n    element,\n    props,\n    ref,\n    ripple\n  } = useButtonBase(input, isPending);\n  const styleProps = mergeStatefulStyles(classes, props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} ref={ref} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} ref={ref} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel ?? messages.loading, ripple.surface)}\n    </RACButton>;\n}\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, surface: ReactNode) {\n  return (state: ButtonRenderProps) => <>\n      <span {...stylex.props(buttonBaseStyles.label, state.isPending && buttonBaseStyles.labelPending)}>\n        {children}\n      </span>\n      {state.isPending ? <span {...stylex.props(buttonBaseStyles.pending)}>\n          <ProgressIndicator aria-label={pendingLabel} diameter=\"1em\" isIndeterminate tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {surface}\n    </>;\n}\n\n/**\n * A toggle drawn with the classes a component hands it: React Aria's\n * `ToggleButton`, which reports its state through `aria-pressed`. It is never\n * a link and never pending — React Aria's toggle takes neither, and neither\n * means anything for a control whose whole job is to report which of two\n * states it is in — so `isPending` reaches it only to keep the ripple off,\n * as it does for the plain button.\n */\nfunction ToggleButtonBase({\n  children,\n  classes,\n  defaultSelected,\n  isPending = false,\n  isSelected,\n  onChange,\n  render,\n  ...input\n}: ToggleButtonBaseProps) {\n  // A selecting ButtonGroup disables its toggles through React Aria's group\n  // state, which no prop here carries, so the ripple would stay on in a\n  // disabled group and answer a press with an animation. Handed on as the\n  // toggle's own `isDisabled`, which is what React Aria makes of it anyway.\n  const disabledByGroup = useToggleGroupDisabled(input.id);\n  const {\n    disabled,\n    element,\n    props,\n    ref,\n    ripple\n  } = useButtonBase(disabledByGroup ? {\n    ...input,\n    isDisabled: true\n  } : input, isPending);\n  return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} ref={ref} render={toggleButtonRenderer(element, toggleRender(render))} {...ripple.handlers} {...props} {...mergeStatefulStyles(classes, props)}>\n      {toggleContent(children, ripple.surface)}\n    </RACToggleButton>;\n}\n\n// What a toggle draws: its label and the ripple. No pending ring — see\n// ToggleButtonBase. Built by a call for the reason `buttonContent` is.\nfunction toggleContent(children: ReactNode, surface: ReactNode) {\n  return () => <>\n      {children}\n      {surface}\n    </>;\n}\n\n// A call site's `render` is written for React Aria's button, whose render\n// state says whether it is pending; a toggle's says nothing of it, and a\n// toggle never is. So the toggle hands that function its own state with\n// `isPending` filled in, which is what lets one `render` prop serve a button\n// whichever element it turns out to be.\nfunction toggleRender(render: RACButtonProps['render']): RACToggleButtonProps['render'] {\n  if (render === undefined) {\n    return undefined;\n  }\n  return (props, state) => render(props, {\n    ...state,\n    isPending: false\n  });\n}\nexport type { ButtonDOMProps, ButtonState };\nexport { ButtonBase, ToggleButtonBase };"],"mappings":"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"}

package/dist/collection/index.js

@@ -11,18 +11,18 @@ import { jsx } from "react/jsx-runtime";
 */
 function CollectionLoadMore(t0) {
 	const $ = c(3);
-	const { label, size } = t0;
+	const { diameter, label } = t0;
 	const messages = useMessages();
 	const t1 = label ?? messages.loadingMore;
 	let t2;
-	if ($[0] !== size || $[1] !== t1) {
+	if ($[0] !== diameter || $[1] !== t1) {
 		t2 = /* @__PURE__ */ jsx(ProgressIndicator, {
 			"aria-label": t1,
+			diameter,
 			isIndeterminate: true,
-			size,
 			variant: "circular"
 		});
-		$[0] = size;
+		$[0] = diameter;
 		$[1] = t1;
 		$[2] = t2;
 	} else t2 = $[2];

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ProgressIndicator","useMessages","CollectionLoadMoreProps","label","size","CollectionLoadMore","t0","$","_c","messages","t1","loadingMore","t2","_c"],"sources":["../../src/collection/index.tsx"],"sourcesContent":["import ProgressIndicator from '../components/progress-indicator'\nimport { useMessages } from '../i18n'\n\ntype CollectionLoadMoreProps = {\n  /**\n   * What a screen reader announces while the next page is on its way. Left\n   * out, it is the I18nProvider's locale's word for it.\n   */\n  label: string | undefined\n  /** The ring's diameter, which follows the row it sits in. */\n  size: string\n}\n\n/**\n * The ring a collection shows while it loads more items.\n *\n * Indeterminate and circular in every collection that has one, since none of\n * them knows how many items are still to come.\n */\nfunction CollectionLoadMore({ label, size }: CollectionLoadMoreProps) {\n  const messages = useMessages()\n\n  return (\n    <ProgressIndicator\n      aria-label={label ?? messages.loadingMore}\n      isIndeterminate\n      size={size}\n      variant=\"circular\"\n    />\n  )\n}\n\nexport type { CollectionLoadMoreProps }\nexport { CollectionLoadMore }\n"],"mappings":";;;;;;;;;;;AAmBA,SAAAK,mBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAA4B,MAAA,EAAAL,OAAAC,SAAAE;CAC1B,MAAAG,WAAiBR,YAAY;CAIb,MAAAS,KAAAP,SAASM,SAAQE;CAAY,IAAAC;CAAA,IAAAL,EAAA,OAAAH,QAAAG,EAAA,OAAAG,IAAA;EAD3CE,KAAA,oBAAC,mBAAD;GACc,cAAAF;GACZ,iBAAA;GACMN;GACE,SAAA;EAAU,CAAA;EAClBG,EAAA,KAAAH;EAAAG,EAAA,KAAAG;EAAAH,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OALFK;AAKE"}
+{"version":3,"file":"index.js","names":["ProgressIndicator","useMessages","CollectionLoadMoreProps","diameter","label","CollectionLoadMore","t0","$","_c","messages","t1","loadingMore","t2","_c"],"sources":["../../src/collection/index.tsx"],"sourcesContent":["import ProgressIndicator from '../components/progress-indicator'\nimport { useMessages } from '../i18n'\n\ntype CollectionLoadMoreProps = {\n  /** The ring's diameter, which follows the row it sits in. */\n  diameter: string\n  /**\n   * What a screen reader announces while the next page is on its way. Left\n   * out, it is the I18nProvider's locale's word for it.\n   */\n  label: string | undefined\n}\n\n/**\n * The ring a collection shows while it loads more items.\n *\n * Indeterminate and circular in every collection that has one, since none of\n * them knows how many items are still to come.\n */\nfunction CollectionLoadMore({ diameter, label }: CollectionLoadMoreProps) {\n  const messages = useMessages()\n\n  return (\n    <ProgressIndicator\n      aria-label={label ?? messages.loadingMore}\n      diameter={diameter}\n      isIndeterminate\n      variant=\"circular\"\n    />\n  )\n}\n\nexport type { CollectionLoadMoreProps }\nexport { CollectionLoadMore }\n"],"mappings":";;;;;;;;;;;AAmBA,SAAAK,mBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAA4B,MAAA,EAAAL,UAAAC,UAAAE;CAC1B,MAAAG,WAAiBR,YAAY;CAIb,MAAAS,KAAAN,SAASK,SAAQE;CAAY,IAAAC;CAAA,IAAAL,EAAA,OAAAJ,YAAAI,EAAA,OAAAG,IAAA;EAD3CE,KAAA,oBAAC,mBAAD;GACc,cAAAF;GACFP;GACV,iBAAA;GACQ,SAAA;EAAU,CAAA;EAClBI,EAAA,KAAAJ;EAAAI,EAAA,KAAAG;EAAAH,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OALFK;AAKE"}

package/dist/color-scheme.d.ts

@@ -1,21 +1,28 @@
 //#region src/color-scheme.d.ts
+/**
+ * The class that lets an element theme what is inside it. A `--kui-*`
+ * override declared on that element, or on one around it, reaches every
+ * component rendered inside, where on any element but `<html>` it would
+ * otherwise reach none — the tokens resolve on `:root` and are inherited from
+ * there already resolved. The scheme is inherited from around it, so a scope
+ * inside a dark page stays dark.
+ *
+ * Overlays are portalled to the body, outside the element, so they keep the
+ * page's tokens; `ThemeScope` is the same class with a portal container of
+ * its own, which takes them along.
+ */
+declare const themeScope: string;
 /**
  * The classes that pin the library's colours to its light or its dark
  * scheme, whatever the reader's OS asks for — for an app with a theme switch
  * of its own. Put one on the `<html>` element, where overlays portalled to
  * the body still sit inside it; with neither there, the colours follow the
- * OS as they always have.
- *
- * Shaped as next-themes takes its class names:
- *
- * ```tsx
- * import { ThemeProvider } from 'next-themes'
- * import { colorScheme } from '@kanso-labs/kanso-ui'
+ * OS as they always have. Each is also a {@link themeScope}, so either on a
+ * smaller element pins and scopes the subtree under it.
  *
- * <ThemeProvider attribute="class" value={colorScheme}>
- *   {children}
- * </ThemeProvider>
- * ```
+ * Shaped as an object of class names, one per scheme. Each name is several
+ * classes separated by spaces, so add them with `className` rather than
+ * `classList.add`, which takes one class per argument.
  *
  * A `--kui-color-*` override still applies under either, declared on the
  * same element or above it.
@@ -25,5 +32,5 @@ declare const colorScheme: {
   light: string;
 };
 //#endregion
-export { colorScheme };
+export { colorScheme, themeScope };
 //# sourceMappingURL=color-scheme.d.ts.map

package/dist/color-scheme.js

@@ -1,32 +1,39 @@
 import { props } from "./node_modules/@stylexjs/stylex/lib/es/stylex.js";
-import { colorsDarkTheme, colorsLightTheme } from "./tokens/design.tokens.stylex.js";
+import { colorDefaultsDarkTheme, colorDefaultsLightTheme, tokenScope } from "./tokens/design.tokens.stylex.js";
 //#region src/color-scheme.ts
 /**
+* The class that lets an element theme what is inside it. A `--kui-*`
+* override declared on that element, or on one around it, reaches every
+* component rendered inside, where on any element but `<html>` it would
+* otherwise reach none — the tokens resolve on `:root` and are inherited from
+* there already resolved. The scheme is inherited from around it, so a scope
+* inside a dark page stays dark.
+*
+* Overlays are portalled to the body, outside the element, so they keep the
+* page's tokens; `ThemeScope` is the same class with a portal container of
+* its own, which takes them along.
+*/
+const themeScope = props(tokenScope).className ?? "";
+/**
 * The classes that pin the library's colours to its light or its dark
 * scheme, whatever the reader's OS asks for — for an app with a theme switch
 * of its own. Put one on the `<html>` element, where overlays portalled to
 * the body still sit inside it; with neither there, the colours follow the
-* OS as they always have.
-*
-* Shaped as next-themes takes its class names:
-*
-* ```tsx
-* import { ThemeProvider } from 'next-themes'
-* import { colorScheme } from '@kanso-labs/kanso-ui'
+* OS as they always have. Each is also a {@link themeScope}, so either on a
+* smaller element pins and scopes the subtree under it.
 *
-* <ThemeProvider attribute="class" value={colorScheme}>
-*   {children}
-* </ThemeProvider>
-* ```
+* Shaped as an object of class names, one per scheme. Each name is several
+* classes separated by spaces, so add them with `className` rather than
+* `classList.add`, which takes one class per argument.
 *
 * A `--kui-color-*` override still applies under either, declared on the
 * same element or above it.
 */
 const colorScheme = {
-	dark: props(colorsDarkTheme).className ?? "",
-	light: props(colorsLightTheme).className ?? ""
+	dark: props(tokenScope, colorDefaultsDarkTheme).className ?? "",
+	light: props(tokenScope, colorDefaultsLightTheme).className ?? ""
 };
 //#endregion
-export { colorScheme };
+export { colorScheme, themeScope };
 
 //# sourceMappingURL=color-scheme.js.map

package/dist/color-scheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-scheme.js","names":["stylex","colorsDarkTheme","colorsLightTheme","colorScheme","dark","props","className","light","stylex.props"],"sources":["../src/color-scheme.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { colorsDarkTheme, colorsLightTheme } from './tokens/design.tokens.stylex';\n\n// The library's colours follow the reader's OS through `prefers-color-scheme`\n// unless something says otherwise, and these are what say otherwise. Both\n// classes have always been generated and shipped in the stylesheet, for\n// Storybook's Theme control; nothing in the package named them, so an app\n// with a switch of its own had to restate every colour token under its own\n// selector, twice — dark for a light OS, light for a dark one.\n//\n// A server module like the entry, since it is two strings.\n\n/**\n * The classes that pin the library's colours to its light or its dark\n * scheme, whatever the reader's OS asks for — for an app with a theme switch\n * of its own. Put one on the `<html>` element, where overlays portalled to\n * the body still sit inside it; with neither there, the colours follow the\n * OS as they always have.\n *\n * Shaped as next-themes takes its class names:\n *\n * ```tsx\n * import { ThemeProvider } from 'next-themes'\n * import { colorScheme } from '@kanso-labs/kanso-ui'\n *\n * <ThemeProvider attribute=\"class\" value={colorScheme}>\n *   {children}\n * </ThemeProvider>\n * ```\n *\n * A `--kui-color-*` override still applies under either, declared on the\n * same element or above it.\n */\nconst colorScheme = {\n  dark: stylex.props(colorsDarkTheme).className ?? '',\n  light: stylex.props(colorsLightTheme).className ?? ''\n};\nexport { colorScheme };"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAMG,cAAc;CAClBC,MAAMJ,MAAaC,eAAe,CAAC,CAACK,aAAa;CACjDC,OAAOP,MAAaE,gBAAgB,CAAC,CAACI,aAAa;AACrD"}
+{"version":3,"file":"color-scheme.js","names":["stylex","colorDefaultsDarkTheme","colorDefaultsLightTheme","tokenScope","themeScope","props","className","colorScheme","dark","light","stylex.props"],"sources":["../src/color-scheme.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { colorDefaultsDarkTheme, colorDefaultsLightTheme, tokenScope } from './tokens/design.tokens.stylex';\n\n// The library's tokens resolve once, on `:root`, and follow the reader's OS\n// through `prefers-color-scheme` unless something says otherwise. These are\n// the classes that say otherwise, for a page that cannot or would rather not\n// render `ThemeScope`: `themeScope` resolves every token again on the element\n// it lands on, and each `colorScheme` class does that and pins the scheme\n// too. All three were generated for Storybook first, where the Theme control\n// uses the scheme pair; nothing in the package named them, so an app with a\n// switch of its own had to restate every colour token under its own\n// selector, twice — dark for a light OS, light for a dark one.\n//\n// A server module like the entry, since it is three strings.\n\n/**\n * The class that lets an element theme what is inside it. A `--kui-*`\n * override declared on that element, or on one around it, reaches every\n * component rendered inside, where on any element but `<html>` it would\n * otherwise reach none — the tokens resolve on `:root` and are inherited from\n * there already resolved. The scheme is inherited from around it, so a scope\n * inside a dark page stays dark.\n *\n * Overlays are portalled to the body, outside the element, so they keep the\n * page's tokens; `ThemeScope` is the same class with a portal container of\n * its own, which takes them along.\n */\nconst themeScope = stylex.props(tokenScope).className ?? '';\n\n/**\n * The classes that pin the library's colours to its light or its dark\n * scheme, whatever the reader's OS asks for — for an app with a theme switch\n * of its own. Put one on the `<html>` element, where overlays portalled to\n * the body still sit inside it; with neither there, the colours follow the\n * OS as they always have. Each is also a {@link themeScope}, so either on a\n * smaller element pins and scopes the subtree under it.\n *\n * Shaped as an object of class names, one per scheme. Each name is several\n * classes separated by spaces, so add them with `className` rather than\n * `classList.add`, which takes one class per argument.\n *\n * A `--kui-color-*` override still applies under either, declared on the\n * same element or above it.\n */\nconst colorScheme = {\n  dark: stylex.props(tokenScope, colorDefaultsDarkTheme).className ?? '',\n  light: stylex.props(tokenScope, colorDefaultsLightTheme).className ?? ''\n};\nexport { colorScheme, themeScope };"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAMI,aAAaJ,MAAaG,UAAU,CAAC,CAACG,aAAa;;;;;;;;;;;;;;;;AAiBzD,MAAMC,cAAc;CAClBC,MAAMR,MAAaG,YAAYF,sBAAsB,CAAC,CAACK,aAAa;CACpEG,OAAOT,MAAaG,YAAYD,uBAAuB,CAAC,CAACI,aAAa;AACxE"}

package/dist/components/app-bar/index.d.ts

@@ -11,14 +11,14 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
   /**
    * Collapses a flexible bar to the height and headline of the small one, for
    * a pinned bar over content that has been scrolled. Material Design
-   * specifies it for the flexible sizes, and without it a pinned `large` costs
+   * specifies it for the flexible sizes, and without it a pinned `lg` costs
    * 152px of the viewport for as long as the page is open.
    *
    * Controlled, and for the same reason `scrolled` is: only the app knows
    * which element scrolls, and how far into it the bar should have finished
    * collapsing. Usually set from the same handler.
    *
-   * Ignored on `small`, which is already the height this collapses to. The
+   * Ignored on `sm`, which is already the height this collapses to. The
    * subtitle goes with the height, since there is no room for a second line
    * in the small bar.
    *
@@ -85,17 +85,13 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
    */
   scrolled?: boolean;
   /**
-   * Height and headline size. `medium` and `large` are Material Design's
-   * flexible bars, which hug their text.
-   *
-   * Spelled out rather than the `sm`/`md`/`lg` the rest of the library takes
-   * — see AGENTS.md, under Prop vocabularies. It predates that rule, and
-   * renaming a public prop's values is a breaking change of its own rather
-   * than something to fold into other work.
-   * @default 'small'
+   * Height and headline size, as steps of the library's size scale. `sm` is
+   * Material Design's small bar, a fixed 64px; `md` and `lg` are its medium
+   * and large flexible bars, which hug their text.
+   * @default 'sm'
    */
-  size?: 'large' | 'medium' | 'small';
-  /** A second line under the headline. Makes `medium` and `large` taller. */
+  size?: 'lg' | 'md' | 'sm';
+  /** A second line under the headline. Makes `md` and `lg` taller. */
   subtitle?: ReactNode;
   /** Actions, at the far end. Usually icon buttons. */
   trailing?: ReactNode;
@@ -104,8 +100,8 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
  * Material Design's app bar: the container at the top of a page carrying its
  * title, one or two actions, and the way back out.
  *
- * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;
- * `medium` and `large` are the flexible bars, which give the headline a larger
+ * Three sizes. `sm` is a fixed 64px bar for a page whose title is a label;
+ * `md` and `lg` are the flexible bars, which give the headline a larger
  * type role and grow to fit a subtitle or a headline that wraps.
  *
  * It paints its own surface, unlike the layout components, because separating

package/dist/components/app-bar/index.js

@@ -10,20 +10,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const HEADLINE_OFFSET = "12px";
 const DEFAULT_CONTENT_INSET = "16px";
 const HEIGHTS = {
-	large: {
+	lg: {
 		plain: "120px",
 		withSubtitle: "152px"
 	},
-	medium: {
+	md: {
 		plain: "112px",
 		withSubtitle: "136px"
 	},
-	small: {
+	sm: {
 		plain: "64px",
 		withSubtitle: "64px"
 	}
 };
-const COLLAPSED_HEIGHT = HEIGHTS.small.plain;
+const COLLAPSED_HEIGHT = HEIGHTS.sm.plain;
 const styles = {
 	root: {
 		k6CgDc: "x12w9bfk",
@@ -52,9 +52,9 @@ const styles = {
 	}
 };
 const HEADLINE_VARIANT = {
-	large: "headlineMedium",
-	medium: "headlineSmall",
-	small: "titleLarge"
+	lg: "headlineMedium",
+	md: "headlineSmall",
+	sm: "titleLarge"
 };
 const HEADINGS = [
 	"h1",
@@ -87,8 +87,8 @@ const rowStyles = { root: (contentInset, maxInlineSize) => [_temp2, {
 * Material Design's app bar: the container at the top of a page carrying its
 * title, one or two actions, and the way back out.
 *
-* Three sizes. `small` is a fixed 64px bar for a page whose title is a label;
-* `medium` and `large` are the flexible bars, which give the headline a larger
+* Three sizes. `sm` is a fixed 64px bar for a page whose title is a label;
+* `md` and `lg` are the flexible bars, which give the headline a larger
 * type role and grow to fit a subtitle or a headline that wraps.
 *
 * It paints its own surface, unlike the layout components, because separating
@@ -113,8 +113,8 @@ function AppBar(t0) {
 		const contentMaxInlineSize = t9 === void 0 ? "none" : t9;
 		const headingLevel = t10 === void 0 ? 1 : t10;
 		const scrolled = t12 === void 0 ? false : t12;
-		const size = t13 === void 0 ? "small" : t13;
-		const collapse = collapsed && size !== "small";
+		const size = t13 === void 0 ? "sm" : t13;
+		const collapse = collapsed && size !== "sm";
 		const expandedHeight = subtitle === void 0 || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;
 		const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;
 		t5 = useRender;
@@ -150,7 +150,7 @@ function AppBar(t0) {
 			t18 = headline === void 0 ? null : /* @__PURE__ */ jsx(Text, {
 				className: "x12w9bfk xioksi3 x1nxaspg x1seskgd",
 				render: heading(headingLevel),
-				variant: collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size],
+				variant: collapse ? HEADLINE_VARIANT.sm : HEADLINE_VARIANT[size],
 				children: headline
 			});
 			$[13] = collapse;