@remix-run/ui 0.2.0 → 0.4.0

package/dist/toggle/index.js

@@ -0,0 +1,108 @@
+import { createMixin, css } from '@remix-run/ui';
+import { renderMixinElement } from "../runtime/mixins/mixin.js";
+import { controlFocusShadow } from "../shared/focus-styles.js";
+export { ToggleChangeEvent, onToggleChange } from '@remix-run/ui/toggle/primitives';
+const checkedSelector = '&:checked, &[aria-checked="true"], &[data-state="checked"]';
+const checkedThumbSelector = '&:checked::before, &[aria-checked="true"]::before, &[data-state="checked"]::before';
+const uncheckedThumbBackground = 'linear-gradient(180deg, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.04) 100%), #FFFFFF';
+const uncheckedThumbShadow = '0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.12), 0 4px 4px -2px rgba(0, 0, 0, 0.12), inset 0 0 2px 1px #FFFFFF';
+const checkedThumbBackground = 'linear-gradient(180deg, rgba(112, 199, 84, 0) 25%, rgba(112, 199, 84, 0.25) 100%), #FFFFFF';
+const checkedThumbShadow = '0 1px 2px -0.5px rgba(66, 134, 44, 0.6), 0 2px 4px -1px rgba(66, 134, 44, 0.6), 0 4px 6px -2px rgba(66, 134, 44, 0.6), 0 0 0 0.5px rgba(0, 0, 0, 0.28), inset 0 0 2px 1px #FFFFFF';
+const toggleDefaultAttrs = createMixin((handle, hostType) => (props) => {
+    if (hostType !== 'input') {
+        return handle.element;
+    }
+    let type = props.type ?? 'checkbox';
+    if (type !== 'checkbox') {
+        return renderMixinElement(handle.element, {
+            ...props,
+            type,
+        });
+    }
+    return renderMixinElement(handle.element, {
+        ...props,
+        role: props.role ?? 'switch',
+        type,
+    });
+})();
+const baseStyles = {
+    appearance: 'none',
+    WebkitAppearance: 'none',
+    margin: 0,
+    boxSizing: 'border-box',
+    position: 'relative',
+    display: 'inline-block',
+    width: 'var(--rmx-toggle-width)',
+    height: 'var(--rmx-toggle-height)',
+    minWidth: 'var(--rmx-toggle-width)',
+    minHeight: 'var(--rmx-toggle-height)',
+    padding: 0,
+    border: 0,
+    borderRadius: '9999px',
+    background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 100%), #EBEBEB',
+    boxShadow: 'inset 0 0 4px 1px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(0, 0, 0, 0.02), inset 0 2px 2px rgba(0, 0, 0, 0.02)',
+    verticalAlign: 'middle',
+    flex: 'none',
+    '&::before': {
+        content: '""',
+        position: 'absolute',
+        left: 'var(--rmx-toggle-thumb-inset)',
+        top: 'calc((var(--rmx-toggle-height) - var(--rmx-toggle-thumb-height)) / 2)',
+        width: 'var(--rmx-toggle-thumb-width)',
+        height: 'var(--rmx-toggle-thumb-height)',
+        borderRadius: '99px',
+        background: uncheckedThumbBackground,
+        boxShadow: uncheckedThumbShadow,
+        transform: 'translateX(0)',
+        transition: 'transform 160ms ease, background 160ms ease, box-shadow 160ms ease',
+        pointerEvents: 'none',
+    },
+    '&:disabled, &[aria-disabled="true"]': {
+        opacity: 0.55,
+    },
+    [checkedSelector]: {
+        background: 'linear-gradient(180deg, #70C754 0%, #70C754 100%)',
+        boxShadow: '0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.4), 0 -4px 8px 2px #FFFFFF, 0 4px 8px 2px rgba(0, 0, 0, 0.05), 0 0 12px 1px rgba(112, 199, 84, 0.25), inset 0 0 4px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 2px 2px rgba(0, 0, 0, 0.1)',
+    },
+    [checkedThumbSelector]: {
+        background: checkedThumbBackground,
+        boxShadow: checkedThumbShadow,
+        transform: 'translateX(var(--rmx-toggle-thumb-translate-x))',
+    },
+    '&:focus-visible': {
+        outline: 0,
+        boxShadow: controlFocusShadow,
+    },
+    '@media (prefers-reduced-motion: reduce)': {
+        '&::before': {
+            transition: 'none',
+        },
+    },
+};
+const thumbTranslate = 'calc(var(--rmx-toggle-width) - var(--rmx-toggle-thumb-width) - (var(--rmx-toggle-thumb-inset) * 2))';
+const sizeStyles = {
+    md: css({
+        '--rmx-toggle-width': '30px',
+        '--rmx-toggle-height': '18px',
+        '--rmx-toggle-thumb-width': '18px',
+        '--rmx-toggle-thumb-height': '14px',
+        '--rmx-toggle-thumb-inset': '2px',
+        '--rmx-toggle-thumb-translate-x': thumbTranslate,
+        ...baseStyles,
+    }),
+    lg: css({
+        '--rmx-toggle-width': '36px',
+        '--rmx-toggle-height': '22px',
+        '--rmx-toggle-thumb-width': '22px',
+        '--rmx-toggle-thumb-height': '18px',
+        '--rmx-toggle-thumb-inset': '2px',
+        '--rmx-toggle-thumb-translate-x': thumbTranslate,
+        ...baseStyles,
+    }),
+};
+export function toggle(options = {}) {
+    let { size = 'md' } = options;
+    return [toggleDefaultAttrs, sizeStyles[size]];
+}
+export default toggle;
+//# sourceMappingURL=index.js.map

package/dist/toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toggle/index.tsx"],"names":[],"mappings":"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"}

package/dist/toggle/primitives.d.ts

@@ -0,0 +1,29 @@
+import { on } from '@remix-run/ui';
+import type { Dispatched, ElementProps, MixinFactory } from '@remix-run/ui';
+export interface ToggleControlOptions {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    form?: string;
+    inputRef?: (input: HTMLInputElement, signal: AbortSignal) => void;
+    name?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    readOnly?: boolean;
+    required?: boolean;
+    tabIndex?: number;
+    value?: string;
+}
+type ToggleChangeHandler<target extends HTMLElement> = (event: Dispatched<ToggleChangeEvent, target>, signal: AbortSignal) => void | Promise<void>;
+declare const TOGGLE_CHANGE_EVENT: "rmx:toggle-change";
+declare global {
+    interface HTMLElementEventMap {
+        [TOGGLE_CHANGE_EVENT]: ToggleChangeEvent;
+    }
+}
+export declare class ToggleChangeEvent extends Event {
+    readonly checked: boolean;
+    constructor(checked: boolean);
+}
+export declare const control: MixinFactory<HTMLElement, [options?: ToggleControlOptions | undefined], ElementProps>;
+export declare function onToggleChange<target extends HTMLElement>(handler: ToggleChangeHandler<target>, captureBoolean?: boolean): ReturnType<typeof on<target, typeof TOGGLE_CHANGE_EVENT>>;
+export {};

package/dist/toggle/primitives.js

@@ -0,0 +1,127 @@
+import { createElement, createMixin, on, ref } from '@remix-run/ui';
+const TOGGLE_CHANGE_EVENT = 'rmx:toggle-change';
+export class ToggleChangeEvent extends Event {
+    checked;
+    constructor(checked) {
+        super(TOGGLE_CHANGE_EVENT, { bubbles: true });
+        this.checked = checked;
+    }
+}
+function getBooleanState(value) {
+    return value === true || value === false ? value : undefined;
+}
+function propIsTrue(value) {
+    return value === true || value === 'true' || value === '';
+}
+function isDisabled(options, props) {
+    return (options.disabled === true || propIsTrue(props.disabled) || propIsTrue(props['aria-disabled']));
+}
+function isReadOnly(options, props) {
+    return (options.readOnly === true || propIsTrue(props.readOnly) || propIsTrue(props['aria-readonly']));
+}
+const controlMixin = createMixin((handle, hostType) => {
+    let uncontrolledChecked = false;
+    let hasInitialized = false;
+    function getChecked(options, props) {
+        let optionChecked = getBooleanState(options.checked);
+        if (optionChecked !== undefined) {
+            return optionChecked;
+        }
+        let propChecked = getBooleanState(props.checked);
+        if (propChecked !== undefined) {
+            return propChecked;
+        }
+        if (!hasInitialized) {
+            uncontrolledChecked =
+                getBooleanState(options.defaultChecked) ?? getBooleanState(props.defaultChecked) ?? false;
+            hasInitialized = true;
+        }
+        return uncontrolledChecked;
+    }
+    function setChecked(node, options, props, nextChecked) {
+        if (isDisabled(options, props) || isReadOnly(options, props)) {
+            if (node instanceof HTMLInputElement) {
+                node.checked = getChecked(options, props);
+            }
+            return;
+        }
+        if (options.checked === undefined && props.checked === undefined) {
+            uncontrolledChecked = nextChecked;
+            void handle.update();
+        }
+        options.onCheckedChange?.(nextChecked);
+        node.dispatchEvent(new ToggleChangeEvent(nextChecked));
+    }
+    return (options = {}, props) => {
+        let checked = getChecked(options, props);
+        let disabled = isDisabled(options, props);
+        let readOnly = isReadOnly(options, props);
+        let required = options.required ?? props.required;
+        let nextProps = {
+            ...props,
+            'aria-checked': hostType === 'input' ? undefined : checked,
+            'aria-disabled': hostType === 'input' ? undefined : disabled || undefined,
+            'aria-readonly': hostType === 'input' ? undefined : readOnly || undefined,
+            'aria-required': hostType === 'input' ? undefined : required || undefined,
+            checked: hostType === 'input' ? checked : props.checked,
+            defaultChecked: hostType === 'input' ? undefined : props.defaultChecked,
+            disabled: hostType === 'input' ? disabled || undefined : props.disabled,
+            form: hostType === 'input' ? (options.form ?? props.form) : props.form,
+            name: hostType === 'input' ? (options.name ?? props.name) : props.name,
+            readOnly: hostType === 'input' ? readOnly || undefined : props.readOnly,
+            required: hostType === 'input' ? required : props.required,
+            role: 'switch',
+            tabIndex: hostType === 'input'
+                ? (options.tabIndex ?? props.tabIndex)
+                : disabled
+                    ? undefined
+                    : (options.tabIndex ?? props.tabIndex ?? 0),
+            type: hostType === 'input'
+                ? props.type === undefined
+                    ? 'checkbox'
+                    : props.type
+                : hostType === 'button' && props.type === undefined
+                    ? 'button'
+                    : props.type,
+            value: hostType === 'input' ? (options.value ?? props.value) : props.value,
+            'data-state': checked ? 'checked' : 'unchecked',
+        };
+        return createElement(handle.element, {
+            ...nextProps,
+            mix: [
+                ref((node, signal) => {
+                    if (node instanceof HTMLInputElement) {
+                        options.inputRef?.(node, signal);
+                    }
+                }),
+                on('click', (event) => {
+                    if (hostType !== 'input') {
+                        event.preventDefault();
+                    }
+                    if (disabled || readOnly) {
+                        if (event.currentTarget instanceof HTMLInputElement) {
+                            event.currentTarget.checked = checked;
+                        }
+                        return;
+                    }
+                    let nextChecked = event.currentTarget instanceof HTMLInputElement
+                        ? event.currentTarget.checked
+                        : !checked;
+                    setChecked(event.currentTarget, options, props, nextChecked);
+                }),
+                on('keydown', (event) => {
+                    if (hostType === 'input' || event.key !== ' ') {
+                        return;
+                    }
+                    event.preventDefault();
+                    setChecked(event.currentTarget, options, props, !checked);
+                }),
+            ],
+        });
+    };
+});
+export const control = controlMixin;
+export function onToggleChange(handler, captureBoolean) {
+    return on(TOGGLE_CHANGE_EVENT, handler, captureBoolean);
+}
+//# sourceMappingURL=primitives.js.map

package/dist/toggle/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../../src/toggle/primitives.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@remix-run/ui",
-  "version": "0.2.0",
-  "description": "UI tokens, mixins, and glyphs for Remix components",
+  "version": "0.4.0",
+  "description": "UI runtime, headless primitives, and styled components for Remix",
   "author": "Ryan Florence <rpflorence@gmail.com>",
   "license": "MIT",
   "repository": {
@@ -15,6 +15,8 @@
     "README.md",
     "dist",
     "src",
+    "!src/**/*.demo.ts",
+    "!src/**/*.demo.tsx",
     "!src/**/*.test.ts",
     "!src/**/*.test.tsx"
   ],
@@ -26,28 +28,44 @@
       "default": "./dist/index.js"
     },
     "./accordion": {
-      "types": "./dist/components/accordion/accordion.d.ts",
-      "default": "./dist/components/accordion/accordion.js"
+      "types": "./dist/accordion/index.d.ts",
+      "default": "./dist/accordion/index.js"
+    },
+    "./accordion/primitives": {
+      "types": "./dist/accordion/primitives.d.ts",
+      "default": "./dist/accordion/primitives.js"
+    },
+    "./anchor": {
+      "types": "./dist/anchor/index.d.ts",
+      "default": "./dist/anchor/index.js"
     },
     "./animation": {
       "types": "./dist/animation/index.d.ts",
       "default": "./dist/animation/index.js"
     },
-    "./anchor": {
-      "types": "./dist/components/anchor/anchor.d.ts",
-      "default": "./dist/components/anchor/anchor.js"
-    },
     "./breadcrumbs": {
-      "types": "./dist/components/breadcrumbs/breadcrumbs.d.ts",
-      "default": "./dist/components/breadcrumbs/breadcrumbs.js"
+      "types": "./dist/breadcrumbs/index.d.ts",
+      "default": "./dist/breadcrumbs/index.js"
     },
     "./button": {
-      "types": "./dist/components/button/button.d.ts",
-      "default": "./dist/components/button/button.js"
+      "types": "./dist/button/index.d.ts",
+      "default": "./dist/button/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox/index.d.ts",
+      "default": "./dist/checkbox/index.js"
     },
     "./combobox": {
-      "types": "./dist/components/combobox/combobox.d.ts",
-      "default": "./dist/components/combobox/combobox.js"
+      "types": "./dist/combobox/index.d.ts",
+      "default": "./dist/combobox/index.js"
+    },
+    "./combobox/primitives": {
+      "types": "./dist/combobox/primitives.d.ts",
+      "default": "./dist/combobox/primitives.js"
+    },
+    "./input": {
+      "types": "./dist/input/index.d.ts",
+      "default": "./dist/input/index.js"
     },
     "./jsx-dev-runtime": {
       "types": "./dist/jsx-runtime.d.ts",
@@ -57,55 +75,67 @@
       "types": "./dist/jsx-runtime.d.ts",
       "default": "./dist/jsx-runtime.js"
     },
-    "./glyph": {
-      "types": "./dist/components/glyph/glyph.d.ts",
-      "default": "./dist/components/glyph/glyph.js"
-    },
     "./listbox": {
-      "types": "./dist/components/listbox/listbox.d.ts",
-      "default": "./dist/components/listbox/listbox.js"
+      "types": "./dist/listbox/index.d.ts",
+      "default": "./dist/listbox/index.js"
     },
     "./menu": {
-      "types": "./dist/components/menu/menu.d.ts",
-      "default": "./dist/components/menu/menu.js"
+      "types": "./dist/menu/index.d.ts",
+      "default": "./dist/menu/index.js"
+    },
+    "./menu/primitives": {
+      "types": "./dist/menu/primitives.d.ts",
+      "default": "./dist/menu/primitives.js"
     },
     "./popover": {
-      "types": "./dist/components/popover/popover.d.ts",
-      "default": "./dist/components/popover/popover.js"
+      "types": "./dist/popover/index.d.ts",
+      "default": "./dist/popover/index.js"
+    },
+    "./radio": {
+      "types": "./dist/radio/index.d.ts",
+      "default": "./dist/radio/index.js"
     },
     "./select": {
-      "types": "./dist/components/select/select.d.ts",
-      "default": "./dist/components/select/select.js"
+      "types": "./dist/select/index.d.ts",
+      "default": "./dist/select/index.js"
     },
-    "./separator": {
-      "types": "./dist/components/separator/separator.d.ts",
-      "default": "./dist/components/separator/separator.js"
+    "./select/primitives": {
+      "types": "./dist/select/primitives.d.ts",
+      "default": "./dist/select/primitives.js"
     },
     "./server": {
       "types": "./dist/server/stream.d.ts",
       "default": "./dist/server/stream.js"
     },
+    "./tabs": {
+      "types": "./dist/tabs/index.d.ts",
+      "default": "./dist/tabs/index.js"
+    },
+    "./tabs/primitives": {
+      "types": "./dist/tabs/primitives.d.ts",
+      "default": "./dist/tabs/primitives.js"
+    },
     "./test": {
       "types": "./dist/test.d.ts",
       "default": "./dist/test.js"
     },
-    "./theme": {
-      "types": "./dist/theme/theme.d.ts",
-      "default": "./dist/theme/theme.js"
+    "./toggle": {
+      "types": "./dist/toggle/index.d.ts",
+      "default": "./dist/toggle/index.js"
     },
-    "./scroll-lock": {
-      "types": "./dist/utils/scroll-lock.d.ts",
-      "default": "./dist/utils/scroll-lock.js"
+    "./toggle/primitives": {
+      "types": "./dist/toggle/primitives.d.ts",
+      "default": "./dist/toggle/primitives.js"
     },
     "./package.json": "./package.json"
   },
   "devDependencies": {
     "@types/node": "^24.6.0",
     "@typescript/native-preview": "7.0.0-dev.20251125.1",
-    "playwright": "^1.59.0",
+    "playwright": "^1.60.0",
     "typescript": "^5.9.3",
-    "@remix-run/assert": "0.2.1",
-    "@remix-run/test": "0.4.1"
+    "@remix-run/assert": "0.3.0",
+    "@remix-run/test": "0.5.0"
   },
   "dependencies": {
     "@types/dom-navigation": "^1.0.7"
@@ -113,18 +143,17 @@
   "keywords": [
     "remix",
     "ui",
-    "theming",
-    "design-tokens",
-    "css-variables",
+    "headless",
+    "components",
     "mixins",
-    "glyphs",
-    "component-styling"
+    "runtime",
+    "primitives"
   ],
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "clean": "git clean -fdX",
-    "lint": "pnpm -w exec oxlint packages/ui -A all --quiet",
-    "lint:fix": "pnpm -w exec oxlint packages/ui -A all --fix --quiet",
+    "lint": "pnpm -w exec oxlint packages/ui --max-warnings=0",
+    "lint:fix": "pnpm -w exec oxlint packages/ui --fix --max-warnings=0",
     "test": "remix-test",
     "test:coverage": "remix-test --coverage",
     "test:watch": "remix-test --watch",

package/src/{components/accordion → accordion}/README.md

@@ -2,7 +2,7 @@
 
 `Accordion` renders a disclosure set with one or more expandable items. Use it for grouped settings, FAQ sections, and dense panels where each item owns a trigger and content region.
 
-## Usage
+## Component Usage
 
 ```tsx
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'remix/ui/accordion'
@@ -82,16 +82,11 @@ export function ControlledAccordion(handle: Handle) {
 }
 ```
 
-Listen for bubbling `AccordionChangeEvent` events with `onAccordionChange`.
+Listen for bubbling `AccordionChangeEvent` events with `onAccordionChange` from `remix/ui/accordion/primitives`.
 
 ```tsx
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  onAccordionChange,
-} from 'remix/ui/accordion'
+import { onAccordionChange } from 'remix/ui/accordion/primitives'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'remix/ui/accordion'
 
 export function TrackedAccordion() {
   return (
@@ -124,7 +119,7 @@ Set `collapsible={false}` in single mode when the open item must stay open. The
 </Accordion>
 ```
 
-Use `headingLevel` to choose the heading wrapper rendered around each trigger. The default level is `3`.
+Use `headingLevel` to choose the heading element rendered around each trigger. The default level is `3`.
 
 ```tsx
 <Accordion defaultValue="shipping" headingLevel={2}>
@@ -142,16 +137,57 @@ Pass `indicator={null}` to remove the default chevron, or pass a custom node to
 <AccordionTrigger indicator={<span aria-hidden>+</span>}>Custom indicator</AccordionTrigger>
 ```
 
-## `accordion.*`
+## Primitive Usage
+
+Use the lower-level primitives when app code owns the accordion markup and styles:
+
+```tsx
+import * as accordion from 'remix/ui/accordion/primitives'
+import { contentStyle, headingStyle, itemStyle, rootStyle, triggerStyle } from './accordion.styles'
+
+export function PrimitiveAccordion() {
+  return (
+    <accordion.Context defaultValue="shipping">
+      <div mix={[rootStyle, accordion.root()]}>
+        <accordion.ItemContext value="shipping">
+          <div mix={[itemStyle, accordion.item()]}>
+            <h3 mix={headingStyle}>
+              <button mix={[triggerStyle, accordion.trigger()]} type="button">
+                Shipping
+              </button>
+            </h3>
+            <div mix={[contentStyle, accordion.content()]}>
+              Delivery windows and carrier defaults.
+            </div>
+          </div>
+        </accordion.ItemContext>
+      </div>
+    </accordion.Context>
+  )
+}
+```
+
+## `remix/ui/accordion`
 
 - `Accordion`: root component. Defaults to single-item mode and supports controlled `value`, uncontrolled `defaultValue`, `onValueChange`, `disabled`, `headingLevel`, `collapsible`, and `type="multiple"`.
 - `AccordionItem`: registers one accordion item by `value`. Pass `disabled` to prevent that item from opening or receiving keyboard focus.
 - `AccordionTrigger`: heading-wrapped button for an item. It wires `aria-expanded`, `aria-controls`, keyboard navigation, and the default chevron indicator.
 - `AccordionContent`: panel for an item. It wires the panel id, `aria-labelledby`, `aria-hidden`, inert state, and open/closed state attributes.
+- `rootStyle`, `itemStyle`, `headingStyle`, `triggerStyle`, `indicatorStyle`, `panelStyle`, and `bodyStyle`: flat style mixins used by the component markup.
+- `AccordionProps`, `AccordionSingleProps`, `AccordionMultipleProps`, `AccordionItemProps`, `AccordionTriggerProps`, and `AccordionContentProps`: public TypeScript props for the composed APIs.
+
+## `remix/ui/accordion/primitives`
+
+- `Context`: lower-level provider for custom accordion composition.
+- `ItemContext`: lower-level provider for one item value.
+- `root()`: wires the root element and bubbling change events.
+- `item()`: wires one item wrapper.
+- `trigger()`: wires the item trigger, keyboard navigation, and trigger ARIA attributes.
+- `content()`: wires the item panel id, hidden state, inert state, and open/closed state attributes.
 - `onAccordionChange(...)`: event mixin for the bubbling `AccordionChangeEvent`.
-- `AccordionChangeEvent`: bubbling event class with `value`, `itemValue`, and `accordionType`.
-- `AccordionProps`, `AccordionSingleProps`, `AccordionMultipleProps`, `AccordionItemProps`, `AccordionTriggerProps`, and `AccordionContentProps`: public TypeScript props.
-- `rootStyle`, `itemStyle`, `triggerStyle`, `indicatorStyle`, `panelStyle`, and `bodyStyle`: flat style mixins used by the component wrappers.
+- `AccordionChangeEvent`: bubbling event with `value`, `itemValue`, and `accordionType`.
+- `AccordionType`, `AccordionValue`, `AccordionSingleValue`, `AccordionMultipleValue`, and `AccordionHeadingLevel`: public TypeScript state and configuration types.
+- `AccordionBaseContextProps`, `AccordionSingleContextProps`, `AccordionMultipleContextProps`, `AccordionContextProps`, `AccordionRootOptions`, `AccordionItemOptions`, `AccordionTriggerOptions`, and `AccordionContentOptions`: primitive prop and option types for custom composition.
 
 ## Behavior Notes