@kanso-labs/kanso-ui 0.37.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/calendar/styles.js

@@ -212,8 +212,9 @@ const calendarStyles = {
 	},
 	months: {
 		kGNEyG: "x7a106z",
-		k1xSpc: "x78zum5",
+		k1xSpc: "x78zum5 x1yrkhk",
 		kOIVth: "xj2l1yv",
+		kJBjZk: "x12n7ir1",
 		kAzted: "x1fivsg2",
 		$$css: true
 	},

package/dist/calendar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","radii","sizing","spacing","stateLayerOpacity","typography","ROW_BLOCK_SIZE","WEEKS_HELD","FORCED_COLORS","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","kAXs8y","cellInRange","kVAM5u","kjBf7l","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","ksu8eU","kMzoRj","cellUnavailable","kMnn75","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","chevronHidden","k33iCy","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","headerGroup","heading","kogj98","k9WMMc","menuArrow","kmuXW","menuArrowExpanded","menuButton","kg3NbH","menuCheck","menuItem","k3XXqK","menuItemDisabled","menuItemFocused","kInvED","kMeerF","menuItemSelected","menuList","kLZC3w","kPef9Z","kEafiO","kORKVm","months","root","kXwgrk","k7Eaqz","kmVPX3","dateLayers","inRangeHovered","inRangePressed","plainHovered","plainPressed","selectedHovered","selectedPressed","menuLayers"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — takes its colours from\n// the modal date picker's range-selection tokens instead, since the docked\n// token set stops at the selected date; see `cellInRange`.\n//\n// Under forced colours a selected date and a range's band are fills, which\n// that mode paints in a system colour, so a calendar showed no selection and\n// no range there, only today's outline. Both take `Highlight` with\n// `HighlightText` over it, the pair the mode gives whatever is chosen, which\n// draws a range as one run from its first day to its last.\n//\n// They take the pair with `forced-color-adjust: none`. Left to adjust, the\n// mode lays a `Canvas` backplate behind every run of text, and a date in\n// `HighlightText` on that backplate is a blank box. With it off nothing is\n// forced on those cells, so they name a system colour for everything they\n// draw — the fill, the date, today's outline and the focus ring. A day ruled\n// out or disabled names none, so it hands itself back to the mode.\n\n// One row of the grid. The weekday row and every week of dates are the same\n// 40dp, so `cell`, `headerCell` and the room `months` reserves are all this\n// one number — a date resized without the reservation following it would put\n// the calendar's height back on its month.\nconst ROW_BLOCK_SIZE = '40px';\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. February 2026 is the other end at four. Holding\n// six draws every month in the box the longest one fills.\nconst WEEKS_HELD = 6;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x15dekr4 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x187kppt\",\n    kfmiAY: \"x1fpsnkq\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"x17kgqx\",\n    krdFHd: \"x1uni95s\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  cellUnavailable: {\n    kWkggS: \"xjbqb8w\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    kMnn75: \"x5lhwog\",\n    $$css: true\n  },\n  chevron: {\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  chevronHidden: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  grid: {\n    kLvRdT: \"x1vathgz\",\n    kheTzg: \"x1gukg7c\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    kAzted: \"x1ba4aug\",\n    $$css: true\n  },\n  headerCell: {\n    kZKoxP: \"x1vqgdyp\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  headerGroup: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    $$css: true\n  },\n  heading: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  menuArrow: {\n    kZKoxP: \"xmix8c7\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  menuArrowExpanded: {\n    k3aq6I: \"x19jd1h0\",\n    $$css: true\n  },\n  menuButton: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"xzoy561\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  },\n  menuCheck: {\n    kZKoxP: \"xxk0z11\",\n    kMwMTN: \"x139gbkf\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  menuItem: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xbg5kjn\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k3XXqK: \"x1t137rt\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  menuItemDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  menuItemFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  menuItemSelected: {\n    kWkggS: \"xkrgufg\",\n    $$css: true\n  },\n  menuList: {\n    kZKoxP: \"x1mj9p22\",\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    kB7OPa: \"x9f619\",\n    kUOVxO: \"xnx04jz\",\n    k3XXqK: \"x1t137rt\",\n    kORKVm: \"x1odjw0f\",\n    $$css: true\n  },\n  months: {\n    kGNEyG: \"x7a106z\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xj2l1yv\",\n    kAzted: \"x1fivsg2\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\n\n// A date's hover and pressed layers, one pair per ground it sits on: nothing,\n// the range band, and the selected circle. From React Aria's render state rather than `:hover` and `:active`, for Button's\n// reasons — see its header: a hover layer stayed on after a tap, and no\n// pressed layer showed for a press made from the keyboard.\n// Each layer is written whole for its ground because StyleX replaces a\n// property whole, and the band and the circle keep their forced-colours\n// `Highlight` under the layer.\nconst dateLayers = {\n  inRangeHovered: {\n    kWkggS: \"x3zumxv x1jzqe4\",\n    $$css: true\n  },\n  inRangePressed: {\n    kWkggS: \"x1as5h4c x1jzqe4\",\n    $$css: true\n  },\n  plainHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  plainPressed: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  selectedHovered: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  }\n};\n\n// A list row's hover and pressed layers over the checked row's surface\n// variant. Over nothing a row takes a date's own pair, `dateLayers.plain*`,\n// since the page gives both the same on-surface layer.\nconst menuLayers = {\n  selectedHovered: {\n    kWkggS: \"xgw93rf\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x113d7pk\",\n    $$css: true\n  }\n};\nexport { calendarStyles, dateLayers, menuLayers };"],"mappings":"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"}
+{"version":3,"file":"styles.js","names":["stylex","colors","media","radii","sizing","spacing","stateLayerOpacity","typography","ROW_BLOCK_SIZE","WEEKS_HELD","FORCED_COLORS","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","kAXs8y","cellInRange","kVAM5u","kjBf7l","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","ksu8eU","kMzoRj","cellUnavailable","kMnn75","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","chevronHidden","k33iCy","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","headerGroup","heading","kogj98","k9WMMc","menuArrow","kmuXW","menuArrowExpanded","menuButton","kg3NbH","menuCheck","menuItem","k3XXqK","menuItemDisabled","menuItemFocused","kInvED","kMeerF","menuItemSelected","menuList","kLZC3w","kPef9Z","kEafiO","kORKVm","months","kJBjZk","root","kXwgrk","k7Eaqz","kmVPX3","dateLayers","inRangeHovered","inRangePressed","plainHovered","plainPressed","selectedHovered","selectedPressed","menuLayers"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — takes its colours from\n// the modal date picker's range-selection tokens instead, since the docked\n// token set stops at the selected date; see `cellInRange`.\n//\n// Under forced colours a selected date and a range's band are fills, which\n// that mode paints in a system colour, so a calendar showed no selection and\n// no range there, only today's outline. Both take `Highlight` with\n// `HighlightText` over it, the pair the mode gives whatever is chosen, which\n// draws a range as one run from its first day to its last.\n//\n// They take the pair with `forced-color-adjust: none`. Left to adjust, the\n// mode lays a `Canvas` backplate behind every run of text, and a date in\n// `HighlightText` on that backplate is a blank box. With it off nothing is\n// forced on those cells, so they name a system colour for everything they\n// draw — the fill, the date, today's outline and the focus ring. A day ruled\n// out or disabled names none, so it hands itself back to the mode.\n\n// One row of the grid. The weekday row and every week of dates are the same\n// 40dp, so `cell`, `headerCell` and the room `months` reserves are all this\n// one number — a date resized without the reservation following it would put\n// the calendar's height back on its month.\nconst ROW_BLOCK_SIZE = '40px';\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. February 2026 is the other end at four. Holding\n// six draws every month in the box the longest one fills.\nconst WEEKS_HELD = 6;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x15dekr4 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x187kppt\",\n    kfmiAY: \"x1fpsnkq\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"x17kgqx\",\n    krdFHd: \"x1uni95s\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  cellUnavailable: {\n    kWkggS: \"xjbqb8w\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    kMnn75: \"x5lhwog\",\n    $$css: true\n  },\n  chevron: {\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  chevronHidden: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  grid: {\n    kLvRdT: \"x1vathgz\",\n    kheTzg: \"x1gukg7c\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    kAzted: \"x1ba4aug\",\n    $$css: true\n  },\n  headerCell: {\n    kZKoxP: \"x1vqgdyp\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  headerGroup: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    $$css: true\n  },\n  heading: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  menuArrow: {\n    kZKoxP: \"xmix8c7\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  menuArrowExpanded: {\n    k3aq6I: \"x19jd1h0\",\n    $$css: true\n  },\n  menuButton: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"xzoy561\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  },\n  menuCheck: {\n    kZKoxP: \"xxk0z11\",\n    kMwMTN: \"x139gbkf\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  menuItem: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xbg5kjn\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k3XXqK: \"x1t137rt\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  menuItemDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  menuItemFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  menuItemSelected: {\n    kWkggS: \"xkrgufg\",\n    $$css: true\n  },\n  menuList: {\n    kZKoxP: \"x1mj9p22\",\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    kB7OPa: \"x9f619\",\n    kUOVxO: \"xnx04jz\",\n    k3XXqK: \"x1t137rt\",\n    kORKVm: \"x1odjw0f\",\n    $$css: true\n  },\n  months: {\n    kGNEyG: \"x7a106z\",\n    k1xSpc: \"x78zum5 x1yrkhk\",\n    kOIVth: \"xj2l1yv\",\n    kJBjZk: \"x12n7ir1\",\n    kAzted: \"x1fivsg2\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\n\n// A date's hover and pressed layers, one pair per ground it sits on: nothing,\n// the range band, and the selected circle. From React Aria's render state rather than `:hover` and `:active`, for Button's\n// reasons — see its header: a hover layer stayed on after a tap, and no\n// pressed layer showed for a press made from the keyboard.\n// Each layer is written whole for its ground because StyleX replaces a\n// property whole, and the band and the circle keep their forced-colours\n// `Highlight` under the layer.\nconst dateLayers = {\n  inRangeHovered: {\n    kWkggS: \"x3zumxv x1jzqe4\",\n    $$css: true\n  },\n  inRangePressed: {\n    kWkggS: \"x1as5h4c x1jzqe4\",\n    $$css: true\n  },\n  plainHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  plainPressed: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  selectedHovered: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  }\n};\n\n// A list row's hover and pressed layers over the checked row's surface\n// variant. Over nothing a row takes a date's own pair, `dateLayers.plain*`,\n// since the page gives both the same on-surface layer.\nconst menuLayers = {\n  selectedHovered: {\n    kWkggS: \"xgw93rf\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x113d7pk\",\n    $$css: true\n  }\n};\nexport { calendarStyles, dateLayers, menuLayers };"],"mappings":"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"}

package/dist/carousel/arrangement.d.ts

@@ -0,0 +1,5 @@
+//#region src/carousel/arrangement.d.ts
+type CarouselLayout = 'hero' | 'multi-browse' | 'uncontained';
+//#endregion
+export type { CarouselLayout };
+//# sourceMappingURL=arrangement.d.ts.map

package/dist/carousel/arrangement.js

@@ -0,0 +1,123 @@
+/** The page's small item: 40dp at the least and 56dp at the most. */
+const SMALL_MAX = 56;
+const SMALL_MIN = 40;
+/**
+* The sizes a layout draws its items at in a content box `room` wide, for
+* `count` items and a preferred large width of `itemSize`.
+*/
+function arrange(layout, room, itemSize, count) {
+	if (layout === "uncontained") return {
+		large: Math.min(itemSize, room),
+		largeCount: 0,
+		medium: 0,
+		small: 0,
+		steps: 0
+	};
+	const small = room >= 184 ? SMALL_MAX : SMALL_MIN;
+	if (layout === "hero") return withSteps({
+		large: Math.max(room - 8 - small, small),
+		largeCount: 1,
+		medium: 0,
+		small
+	}, count);
+	const fit = Math.floor((room - small - 8) / (itemSize + 8));
+	const most = Math.max(1, Math.min(fit, count - 2));
+	for (let largeCount = most; largeCount >= 1; largeCount--) {
+		const gaps = (largeCount + 1) * 8;
+		const medium = room - largeCount * itemSize - gaps - small;
+		if (medium >= small && medium <= itemSize) return withSteps({
+			large: itemSize,
+			largeCount,
+			medium,
+			small
+		}, count);
+		const large = (room - gaps - 1.5 * small) / (largeCount + .5);
+		if (large >= small) return withSteps({
+			large,
+			largeCount,
+			medium: (large + small) / 2,
+			small
+		}, count);
+	}
+	return arrange("hero", room, itemSize, count);
+}
+function filledOf(sizes, count) {
+	return Math.min(count, sizes.largeCount + trailingOf(sizes).length);
+}
+/**
+* Where every item is drawn with the carousel `position` rests along: a
+* whole number at a rest, and the fraction between two while it moves.
+* `room` is the content box's width and `padding` the space on each side of
+* it, which an item past the edge is drawn beyond.
+*/
+function placements(layout, arrangement, room, padding, count, position) {
+	if (layout === "uncontained") return Array.from({ length: count }, (_, index) => ({
+		left: index * (arrangement.large + 8),
+		width: arrangement.large
+	}));
+	const clamped = Math.min(Math.max(position, 0), arrangement.steps);
+	const from = Math.floor(clamped);
+	const to = Math.min(from + 1, arrangement.steps);
+	const fraction = clamped - from;
+	const start = rest(arrangement, room, padding, count, from);
+	const end = rest(arrangement, room, padding, count, to);
+	return start.map((placement, index) => {
+		const next = end[index] ?? placement;
+		return {
+			left: placement.left + (next.left - placement.left) * fraction,
+			width: placement.width + (next.width - placement.width) * fraction
+		};
+	});
+}
+function rest(arrangement, room, padding, count, step) {
+	const { large, largeCount, small } = arrangement;
+	const filled = filledOf(arrangement, count);
+	const trailing = trailingOf(arrangement).slice(0, filled - largeCount);
+	const last = count - filled;
+	const turned = Math.max(0, step - last);
+	const kept = trailing.length - turned;
+	const sizes = [
+		...Array.from({ length: turned }, (_, slot) => trailing[trailing.length - 1 - slot] ?? small),
+		...Array.from({ length: Math.min(largeCount, filled) }, () => large),
+		...trailing.slice(0, kept)
+	];
+	const first = Math.min(step, last);
+	const lefts = [];
+	let cursor = 0;
+	for (const size of sizes) {
+		lefts.push(cursor);
+		cursor += size + 8;
+	}
+	const shift = turned > 0 ? room - (cursor - 8) : 0;
+	const away = small > 0 ? small : large;
+	return Array.from({ length: count }, (_, index) => {
+		const slot = index - first;
+		if (slot < 0) return {
+			left: -padding + slot * (away + 8),
+			width: away
+		};
+		if (slot >= sizes.length) return {
+			left: room + padding + 8 + (slot - sizes.length) * (away + 8),
+			width: away
+		};
+		return {
+			left: (lefts[slot] ?? 0) + shift,
+			width: sizes[slot] ?? away
+		};
+	});
+}
+function trailingOf({ medium, small }) {
+	return [medium, small].filter((size) => size > 0);
+}
+function withSteps(sizes, count) {
+	const filled = filledOf(sizes, count);
+	const turning = Math.max(0, filled - sizes.largeCount);
+	return {
+		...sizes,
+		steps: count - filled + turning
+	};
+}
+//#endregion
+export { arrange, placements };
+
+//# sourceMappingURL=arrangement.js.map

package/dist/carousel/arrangement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrangement.js","names":["CarouselLayout","GAP","SMALL_MAX","SMALL_MIN","Arrangement","large","largeCount","medium","small","steps","Placement","left","width","arrange","layout","room","itemSize","count","Math","min","max","withSteps","fit","floor","most","gaps","sizes","filledOf","Omit","trailingOf","length","placements","arrangement","padding","position","Array","from","_","index","clamped","to","fraction","start","rest","end","map","placement","next","step","filled","trailing","slice","last","turned","kept","slot","first","lefts","cursor","size","push","shift","away","filter","turning"],"sources":["../../src/carousel/arrangement.ts"],"sourcesContent":["// The carousel page's layouts as numbers: which items are large, medium and\n// small at each place a carousel comes to rest, and where each is drawn as\n// it moves between two of them. Apart from the component so the arithmetic\n// can be tested without a browser laying anything out, and so the\n// component's file holds what it renders.\n//\n// The model is MDC-Android's keylines, simplified to what the page draws.\n// At rest a multi-browse carousel shows `largeCount` large items, one medium\n// and one small, filling the room exactly; a hero carousel one large and one\n// small. Each rest is one item further along than the last, and once the\n// last item has come into view the rests that remain turn the arrangement\n// round a slot at a time — small, the large ones, medium; then small,\n// medium, the large ones — so every item is drawn large at one rest at\n// least. At rest `s` the large items are always `s` to `s + largeCount - 1`.\n// Between two rests every item's place and width are interpolated, which is\n// what makes an item grow or shrink as it moves rather than jump. Items past\n// either edge are drawn small and out of sight, so they arrive at the size\n// of the slot they enter.\n//\n// Everything is in pixels along the inline axis of the carousel's content\n// box: 0 is its start edge, inside the leading padding.\n\ntype CarouselLayout = 'hero' | 'multi-browse' | 'uncontained'\n\n/** The page's 8dp between items. */\nconst GAP = 8\n\n/** The page's small item: 40dp at the least and 56dp at the most. */\nconst SMALL_MAX = 56\nconst SMALL_MIN = 40\n\ntype Arrangement = {\n  /** The large item's width, which every item is laid out at. */\n  large: number\n  /** How many items are large at rest. */\n  largeCount: number\n  /** The medium item's width, or 0 for a layout without one. */\n  medium: number\n  /** The small item's width, or 0 for a layout without one. */\n  small: number\n  /** The last place the carousel comes to rest, counting from 0. */\n  steps: number\n}\n\n/** Where an item is drawn: the start of what shows of it, and its width. */\ntype Placement = { left: number; width: number }\n\n/**\n * The sizes a layout draws its items at in a content box `room` wide, for\n * `count` items and a preferred large width of `itemSize`.\n */\nfunction arrange(\n  layout: CarouselLayout,\n  room: number,\n  itemSize: number,\n  count: number,\n): Arrangement {\n  if (layout === 'uncontained') {\n    const large = Math.min(itemSize, room)\n    return { large, largeCount: 0, medium: 0, small: 0, steps: 0 }\n  }\n\n  // The small item at its largest unless the room is too narrow for it.\n  const small = room >= 3 * SMALL_MAX + 2 * GAP ? SMALL_MAX : SMALL_MIN\n\n  if (layout === 'hero') {\n    const large = Math.max(room - GAP - small, small)\n    return withSteps({ large, largeCount: 1, medium: 0, small }, count)\n  }\n\n  // As many items at the preferred width as fit beside a medium and a small\n  // one, and no more than leave a medium and a small item to fill those two\n  // slots, so a short run of items still fills the room rather than leaving\n  // its last slots empty. Where what is left for the medium item is not\n  // between the small and the large width, the large width gives way, to\n  // whatever leaves the medium item halfway between the two.\n  const fit = Math.floor((room - small - GAP) / (itemSize + GAP))\n  const most = Math.max(1, Math.min(fit, count - 2))\n  for (let largeCount = most; largeCount >= 1; largeCount--) {\n    const gaps = (largeCount + 1) * GAP\n    const medium = room - largeCount * itemSize - gaps - small\n    if (medium >= small && medium <= itemSize) {\n      return withSteps({ large: itemSize, largeCount, medium, small }, count)\n    }\n    const large = (room - gaps - 1.5 * small) / (largeCount + 0.5)\n    if (large >= small) {\n      const sizes = { large, largeCount, medium: (large + small) / 2, small }\n      return withSteps(sizes, count)\n    }\n  }\n  // Too narrow for three: one large item and one small, as a hero draws.\n  return arrange('hero', room, itemSize, count)\n}\n\n// How many of the slots are filled: all of them, unless there are fewer\n// items, which leaves the last slots empty.\nfunction filledOf(sizes: Omit<Arrangement, 'steps'>, count: number) {\n  return Math.min(count, sizes.largeCount + trailingOf(sizes).length)\n}\n\n/**\n * Where every item is drawn with the carousel `position` rests along: a\n * whole number at a rest, and the fraction between two while it moves.\n * `room` is the content box's width and `padding` the space on each side of\n * it, which an item past the edge is drawn beyond.\n */\nfunction placements(\n  layout: CarouselLayout,\n  arrangement: Arrangement,\n  room: number,\n  padding: number,\n  count: number,\n  position: number,\n): Placement[] {\n  if (layout === 'uncontained') {\n    return Array.from({ length: count }, (_, index) => ({\n      left: index * (arrangement.large + GAP),\n      width: arrangement.large,\n    }))\n  }\n\n  const clamped = Math.min(Math.max(position, 0), arrangement.steps)\n  const from = Math.floor(clamped)\n  const to = Math.min(from + 1, arrangement.steps)\n  const fraction = clamped - from\n  const start = rest(arrangement, room, padding, count, from)\n  const end = rest(arrangement, room, padding, count, to)\n\n  return start.map((placement, index) => {\n    const next = end[index] ?? placement\n    return {\n      left: placement.left + (next.left - placement.left) * fraction,\n      width: placement.width + (next.width - placement.width) * fraction,\n    }\n  })\n}\n\n// Where every item is drawn at one rest.\nfunction rest(\n  arrangement: Arrangement,\n  room: number,\n  padding: number,\n  count: number,\n  step: number,\n) {\n  const { large, largeCount, small } = arrangement\n  const filled = filledOf(arrangement, count)\n  const trailing = trailingOf(arrangement).slice(0, filled - largeCount)\n  // The last rest drawn from the start; past it, how many trailing slots\n  // have turned round to the front, the last of them first.\n  const last = count - filled\n  const turned = Math.max(0, step - last)\n  const kept = trailing.length - turned\n  const sizes = [\n    ...Array.from(\n      { length: turned },\n      (_, slot) => trailing[trailing.length - 1 - slot] ?? small,\n    ),\n    ...Array.from({ length: Math.min(largeCount, filled) }, () => large),\n    ...trailing.slice(0, kept),\n  ]\n  // The item in the first slot. Once the arrangement turns, the slots hold\n  // the last items, whichever way round they are drawn.\n  const first = Math.min(step, last)\n\n  // The slots, laid out from the start edge.\n  const lefts: number[] = []\n  let cursor = 0\n  for (const size of sizes) {\n    lefts.push(cursor)\n    cursor += size + GAP\n  }\n  // A turned arrangement that does not fill the room is set against the end\n  // edge instead, which is where its large items belong.\n  const shift = turned > 0 ? room - (cursor - GAP) : 0\n  const away = small > 0 ? small : large\n\n  return Array.from({ length: count }, (_, index): Placement => {\n    const slot = index - first\n    if (slot < 0) {\n      // Past the start edge, beyond the padding, a small item per place.\n      return { left: -padding + slot * (away + GAP), width: away }\n    }\n    if (slot >= sizes.length) {\n      // Past the end edge, likewise.\n      return {\n        left: room + padding + GAP + (slot - sizes.length) * (away + GAP),\n        width: away,\n      }\n    }\n    return { left: (lefts[slot] ?? 0) + shift, width: sizes[slot] ?? away }\n  })\n}\n\n// The widths that follow the large ones at rest: medium then small, or the\n// small alone for a hero.\nfunction trailingOf({ medium, small }: Omit<Arrangement, 'steps'>) {\n  return [medium, small].filter((size) => size > 0)\n}\n\n// A rest starts at each item while every slot after it is filled, and each\n// trailing slot turning round to the front is one rest more.\nfunction withSteps(\n  sizes: Omit<Arrangement, 'steps'>,\n  count: number,\n): Arrangement {\n  const filled = filledOf(sizes, count)\n  const turning = Math.max(0, filled - sizes.largeCount)\n  return { ...sizes, steps: count - filled + turning }\n}\n\nexport type { Arrangement, CarouselLayout, Placement }\n\nexport { arrange, GAP, placements }\n"],"mappings":";AA4BA,MAAME,YAAY;AAClB,MAAMC,YAAY;;;;;AAsBlB,SAASU,QACPC,QACAC,MACAC,UACAC,OACa;CACb,IAAIH,WAAW,eAEb,OAAO;EAAET,OADKa,KAAKC,IAAIH,UAAUD,IACxBV;EAAOC,YAAY;EAAGC,QAAQ;EAAGC,OAAO;EAAGC,OAAO;CAAE;CAI/D,MAAMD,QAAQO,QAAQ,MAA0Bb,YAAYC;CAE5D,IAAIW,WAAW,QAEb,OAAOO,UAAU;EAAEhB,OADLa,KAAKE,IAAIL,OAAAA,IAAaP,OAAOA,KACxBH;EAAOC,YAAY;EAAGC,QAAQ;EAAGC;CAAM,GAAGS,KAAK;CASpE,MAAMK,MAAMJ,KAAKK,OAAOR,OAAOP,QAAAA,MAAgBQ,WAAAA,EAAe;CAC9D,MAAMQ,OAAON,KAAKE,IAAI,GAAGF,KAAKC,IAAIG,KAAKL,QAAQ,CAAC,CAAC;CACjD,KAAK,IAAIX,aAAakB,MAAMlB,cAAc,GAAGA,cAAc;EACzD,MAAMmB,QAAQnB,aAAa,KAAA;EAC3B,MAAMC,SAASQ,OAAOT,aAAaU,WAAWS,OAAOjB;EACrD,IAAID,UAAUC,SAASD,UAAUS,UAC/B,OAAOK,UAAU;GAAEhB,OAAOW;GAAUV;GAAYC;GAAQC;EAAM,GAAGS,KAAK;EAExE,MAAMZ,SAASU,OAAOU,OAAO,MAAMjB,UAAUF,aAAa;EAC1D,IAAID,SAASG,OAEX,OAAOa,UAAUK;GADDrB;GAAOC;GAAYC,SAASF,QAAQG,SAAS;GAAGA;EAC/CkB,GAAOT,KAAK;CAEjC;CAEA,OAAOJ,QAAQ,QAAQE,MAAMC,UAAUC,KAAK;AAC9C;AAIA,SAASU,SAASD,OAAmCT,OAAe;CAClE,OAAOC,KAAKC,IAAIF,OAAOS,MAAMpB,aAAauB,WAAWH,KAAK,CAAC,CAACI,MAAM;AACpE;;;;;;;AAQA,SAASC,WACPjB,QACAkB,aACAjB,MACAkB,SACAhB,OACAiB,UACa;CACb,IAAIpB,WAAW,eACb,OAAOqB,MAAMC,KAAK,EAAEN,QAAQb,MAAM,IAAIoB,GAAGC,WAAW;EAClD3B,MAAM2B,SAASN,YAAY3B,QAAAA;EAC3BO,OAAOoB,YAAY3B;CACrB,EAAE;CAGJ,MAAMkC,UAAUrB,KAAKC,IAAID,KAAKE,IAAIc,UAAU,CAAC,GAAGF,YAAYvB,KAAK;CACjE,MAAM2B,OAAOlB,KAAKK,MAAMgB,OAAO;CAC/B,MAAMC,KAAKtB,KAAKC,IAAIiB,OAAO,GAAGJ,YAAYvB,KAAK;CAC/C,MAAMgC,WAAWF,UAAUH;CAC3B,MAAMM,QAAQC,KAAKX,aAAajB,MAAMkB,SAAShB,OAAOmB,IAAI;CAC1D,MAAMQ,MAAMD,KAAKX,aAAajB,MAAMkB,SAAShB,OAAOuB,EAAE;CAEtD,OAAOE,MAAMG,KAAKC,WAAWR,UAAU;EACrC,MAAMS,OAAOH,IAAIN,UAAUQ;EAC3B,OAAO;GACLnC,MAAMmC,UAAUnC,QAAQoC,KAAKpC,OAAOmC,UAAUnC,QAAQ8B;GACtD7B,OAAOkC,UAAUlC,SAASmC,KAAKnC,QAAQkC,UAAUlC,SAAS6B;EAC5D;CACF,CAAC;AACH;AAGA,SAASE,KACPX,aACAjB,MACAkB,SACAhB,OACA+B,MACA;CACA,MAAM,EAAE3C,OAAOC,YAAYE,UAAUwB;CACrC,MAAMiB,SAAStB,SAASK,aAAaf,KAAK;CAC1C,MAAMiC,WAAWrB,WAAWG,WAAW,CAAC,CAACmB,MAAM,GAAGF,SAAS3C,UAAU;CAGrE,MAAM8C,OAAOnC,QAAQgC;CACrB,MAAMI,SAASnC,KAAKE,IAAI,GAAG4B,OAAOI,IAAI;CACtC,MAAME,OAAOJ,SAASpB,SAASuB;CAC/B,MAAM3B,QAAQ;EACZ,GAAGS,MAAMC,KACP,EAAEN,QAAQuB,OAAO,IAChBhB,GAAGkB,SAASL,SAASA,SAASpB,SAAS,IAAIyB,SAAS/C,KACvD;EACA,GAAG2B,MAAMC,KAAK,EAAEN,QAAQZ,KAAKC,IAAIb,YAAY2C,MAAM,EAAE,SAAS5C,KAAK;EACnE,GAAG6C,SAASC,MAAM,GAAGG,IAAI;CAAC;CAI5B,MAAME,QAAQtC,KAAKC,IAAI6B,MAAMI,IAAI;CAGjC,MAAMK,QAAkB,CAAA;CACxB,IAAIC,SAAS;CACb,KAAK,MAAMC,QAAQjC,OAAO;EACxB+B,MAAMG,KAAKF,MAAM;EACjBA,UAAUC,OAAAA;CACZ;CAGA,MAAME,QAAQR,SAAS,IAAItC,QAAQ2C,SAAAA,KAAgB;CACnD,MAAMI,OAAOtD,QAAQ,IAAIA,QAAQH;CAEjC,OAAO8B,MAAMC,KAAK,EAAEN,QAAQb,MAAM,IAAIoB,GAAGC,UAAqB;EAC5D,MAAMiB,OAAOjB,QAAQkB;EACrB,IAAID,OAAO,GAET,OAAO;GAAE5C,MAAM,CAACsB,UAAUsB,QAAQO,OAAAA;GAAalD,OAAOkD;EAAK;EAE7D,IAAIP,QAAQ7B,MAAMI,QAEhB,OAAO;GACLnB,MAAMI,OAAOkB,UAAAA,KAAiBsB,OAAO7B,MAAMI,WAAWgC,OAAAA;GACtDlD,OAAOkD;EACT;EAEF,OAAO;GAAEnD,OAAO8C,MAAMF,SAAS,KAAKM;GAAOjD,OAAOc,MAAM6B,SAASO;EAAK;CACxE,CAAC;AACH;AAIA,SAASjC,WAAW,EAAEtB,QAAQC,SAAqC;CACjE,OAAO,CAACD,QAAQC,KAAK,CAAC,CAACuD,QAAQJ,SAASA,OAAO,CAAC;AAClD;AAIA,SAAStC,UACPK,OACAT,OACa;CACb,MAAMgC,SAAStB,SAASD,OAAOT,KAAK;CACpC,MAAM+C,UAAU9C,KAAKE,IAAI,GAAG6B,SAASvB,MAAMpB,UAAU;CACrD,OAAO;EAAE,GAAGoB;EAAOjB,OAAOQ,QAAQgC,SAASe;CAAQ;AACrD"}

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