entasis 0.11.0 → 0.13.0

package/dist/components/Accordion/accordion.mcp.js

@@ -27,6 +27,9 @@ The Accordion component provides an interactive collapsible container for organi
 - **titleKey**: string - Key to extract title from items (default: 'title')
 - **contentKey**: string - Key to extract content from items (default: 'content')
 - **descriptionKey**: string - Key to extract description from items (default: 'description')
+- **disabledKey**: string - Key whose boolean disables one item (default: 'disabled')
+- **disabled**: boolean (default: false) - Disables every item
+- **headingLevel**: 2 | 3 | 4 | 5 | 6 (default: 3) - Level of the heading element that wraps each trigger
 
 ### Layout Props
 - **variant**: 'classic' | 'card' | 'outline' (default: 'classic')
@@ -43,8 +46,10 @@ The Accordion component provides an interactive collapsible container for organi
 - **splitted**: boolean (default: false) - Breaks the list into one surface per item with a gap: each item gets its own raised card (card), its own border (outline), or its own underline (classic)
 
 ### Event Props
-- **onValueChange**: (value: string[]) => void - Called once when expanded item ids change
-- **onItemOpenChange**: (options: { item: Item; index: number; open: boolean }) => void - Called after one item's open state changes
+- **onValueChange**: (value: string[]) => void - Called once after the expanded item ids change, with the new ids. Not called for initialization or for ids a parent assigns.
+- **onItemOpenChange**: (payload: { item: Item; index: number; open: boolean; details: OpenChangeDetails }) => void - Called before one item opens or closes. \`details.reason\` is \`'trigger-press'\` or \`'find-in-page'\`, \`details.event\` carries the DOM event, and \`details.cancel()\` keeps the item as it was (\`onValueChange\` is then not called). See \`entasis/types\` for \`OpenChangeDetails\`.
+- **onItemAfterOpen**: (payload: { item: Item; index: number }) => void - Called once each time an item finishes opening: after its slide, or at once when no animation plays (reduced motion, zero duration, find-in-page). Not called for items open at the start.
+- **onItemAfterClose**: (payload: { item: Item; index: number }) => void - Called once each time an item finishes closing, also when no animation plays or the panel is removed mid-close.
 
 ### Slot Props
 - **title**: Snippet - Custom title rendering
@@ -54,6 +59,8 @@ The Accordion component provides an interactive collapsible container for organi
 
 ### Behavior Props
 - **oneAtATime**: boolean (default: true) - Whether only one item can be expanded at a time
+- **hiddenUntilFound**: boolean (default: false) - Keeps collapsed panels in the DOM under \`hidden="until-found"\`, so the browser's find-in-page, text fragments and \`#id\` links reach their content and open the item (reason \`find-in-page\`, no animation). Collapsed content stays out of the accessibility tree and the tab order until then. A disabled item is not findable: its collapsed panel stays under plain \`hidden\`.
+- **keepMounted**: boolean (default: false) - Keeps collapsed panels mounted under \`hidden\`, preserving their state (form values, scroll). Not findable by the browser.
 
 ### Visual Props
 - **icon**: 'chevron' | 'plus-minus' | 'none' | Snippet (default: 'chevron')
@@ -73,18 +80,22 @@ The Accordion component provides an interactive collapsible container for organi
 \`\`\`
 <Accordion>
 	<AccordionItem>
-		<AccordionTrigger>
-			<AccordionHeader>
-				<Title />
-				<Description />
-			</AccordionHeader>
-			<Icon />
-		</AccordionTrigger>
-		<AccordionContent />
+		<Heading>                       <!-- h2 to h6, headingLevel -->
+			<AccordionTrigger>          <!-- button: id, aria-expanded, aria-controls, data-index -->
+				<AccordionHeader>
+					<Title />
+					<Description />
+				</AccordionHeader>
+				<Icon />
+			</AccordionTrigger>
+		</Heading>
+		<AccordionContent />            <!-- region: id, aria-labelledby the trigger -->
 	</AccordionItem>
 </Accordion>
 \`\`\`
 
+The heading wraps the button, as the WAI-ARIA accordion pattern asks, so assistive technology lists the headings. A collapsed item has no panel in the DOM unless \`hiddenUntilFound\` or \`keepMounted\` is set, so its content is neither read nor tabbable; \`aria-controls\` is present while the panel exists.
+
 ## Examples
 
 ### Basic Example
@@ -206,6 +217,22 @@ The Accordion component provides an interactive collapsible container for organi
 />
 \`\`\`
 
+### Find-in-page and disabled items
+
+\`\`\`svelte
+<script>
+	import { Accordion } from './index.ts';
+
+	let items = [
+		{ title: 'Shipping', content: 'Orders ship within two days.' },
+		{ title: 'Returns', content: 'Free returns for 30 days.', disabled: true }
+	];
+</script>
+
+<!-- Ctrl+F finds "two days" and opens Shipping; Returns is skipped by Tab. -->
+<Accordion {items} hiddenUntilFound />
+\`\`\`
+
 ### With Event Handler
 
 \`\`\`svelte
@@ -216,8 +243,9 @@ The Accordion component provides an interactive collapsible container for organi
 		{ title: 'Section 1', content: 'Content 1' }
 	];
 	
-	function handleToggle({ item, index, open }) {
-		console.log(\`Item \${item.title} at index \${index} is now \${open ? 'open' : 'closed'}\`);
+	function handleToggle({ item, index, open, details }) {
+		console.log(\`Item \${item.title} at index \${index} is opening: \${open} (\${details.reason})\`);
+		// details.cancel() would keep it as it was.
 	}
 </script>
 
@@ -251,18 +279,45 @@ The Accordion component provides an interactive collapsible container for organi
 </Accordion>
 \`\`\`
 
+## Styling hooks
+
+Every item, trigger and panel carries its own open state.
+
+Attributes are presence attributes (set while the state holds, omitted otherwise) unless they carry a value.
+
+**Data attributes**
+- \`data-open\`: On an item, its trigger, its panel and the panel's content: present while the item is expanded.
+- \`data-closed\`: On an item, its trigger, its panel and the panel's content: present while the item is collapsed, including during the exit transition.
+- \`data-entering\`: On a panel: present while its opening animation plays.
+- \`data-exiting\`: On a panel: present while its closing animation plays.
+- \`data-disabled\`: On an item and its trigger: present while the item is disabled.
+- \`data-state\`: On a trigger: \`open\` or \`closed\` (kept for compatibility; prefer \`data-open\` / \`data-closed\`).
+- \`data-index\`: On an item and its trigger: the item index.
+- \`data-slot\`: The part: \`accordion\`, \`accordion-item\`, \`accordion-trigger\`, \`accordion-icon-wrapper\` or \`accordion-panel\`.
+- \`data-size\`: On the root: the resolved \`size\`.
+- \`data-density\`: On the root: the resolved \`density\`.
+- \`data-variant\`: On the root: the resolved \`variant\`.
+
+**CSS variables**
+- \`--disclosure-panel-height\`: On a panel: its measured height in px while it animates, \`auto\` once open and \`0px\` once closed.
+
+The typed maps \`accordionDataAttributes\` and \`accordionCssVariables\` (from \`entasis/accordion\`) list each name with its meaning.
+
 ## Accessibility
 
-- Automatically handles ARIA attributes
-- Keyboard navigation support (Enter/Space to toggle)
-- Focus management for expanded items
-- Screen reader friendly with proper roles
+- Each trigger is a native \`<button>\` inside a heading element (\`headingLevel\`), with \`aria-expanded\` and, while its panel exists, \`aria-controls\`.
+- Each panel is a \`role="region"\` labelled by its trigger.
+- Enter and Space toggle an item. Tab moves between triggers and into open content; arrow, Home and End keys are left to the page (they neither move focus nor block scrolling), following the current WAI-ARIA guidance.
+- A disabled item's trigger has the native \`disabled\` attribute: it is skipped by Tab and announced as unavailable.
+- Collapsed content is not copied anywhere for screen readers. Use \`hiddenUntilFound\` to make it findable.
+- Migration: the \`accessible\` prop is removed (collapsed content is no longer duplicated into screen-reader-only text).
 
 ## Notes
 
 - Items are automatically assigned IDs if not provided
-- Uses Melt UI's Accordion builder for accessibility
-- Smooth transitions with the library's themed slide transition
+- Expanded ids are tracked by the component itself; there is no builder dependency
+- Panels animate their height through the shared disclosure panel (\`--disclosure-panel-height\` is set on the panel)
+- Styling hooks: \`data-open\` / \`data-closed\` on the item, trigger and content, \`data-disabled\`, \`data-index\`, and \`data-entering\` / \`data-exiting\` on the panel
 - Supports bindable items for dynamic updates
 
 ## Theme Customization
@@ -275,11 +330,12 @@ The theme object contains the following parts:
 - **root**: Main accordion container styles
 - **item**: Individual accordion item styles
 - **trigger**: Accordion trigger button styles
-- **header**: Header section styles (contains title and description)
+- **heading**: The \`h2\`-\`h6\` element that wraps each trigger (margin-free by default)
+- **header**: Header section styles (contains title and description, inside the trigger)
 - **title**: Title text styles
 - **description**: Description text styles
 - **icon**: Expand/collapse icon styles
-- **content**: Content panel styles
+- **content**: Content styles, on the element inside the region panel (so a hidden-until-found panel reserves no space)
 
 ### Available Variants
 
@@ -384,8 +440,8 @@ The theme object contains the following parts:
 
 ## Motion
 
-- **motion** theme slot: a slide keyed by \`axis\` (\`y\` by default, \`x\` for a horizontal list).
-- Takes \`in\` / \`out\` slide params plus a \`duration\` / \`easing\` motion token.
+- **motion** theme slot: the panel's height animation. \`duration\`, \`delay\` and \`easing\` apply; the preset's slide offsets and opacity do not (panels collapse along their height only).
+- Takes \`in\` / \`out\` params plus a \`duration\` / \`easing\` motion token.
 - Ladder: \`<Theme components={{ accordion: { motion } }}>\` → \`setAccordionTheme({ motion })\` →
   \`theme.motion\` → the \`transition\` prop. Reduced motion collapses it to 0.
 `;

package/dist/components/Accordion/accordion.props.d.ts

@@ -3,9 +3,10 @@ import type { Slot, WithSlot } from '../Slot/slot.js';
 import type { FSOProps } from '../../transitions/transition.js';
 import type { ResponsiveProps } from '../Theme/theme.js';
 import type { WithAttachments } from '../../types/props.js';
+import type { OpenChangeDetails } from '../../utils/openChange.js';
 import type { AccordionThemeProps } from './accordion.theme.js';
 export type ConditionalKeys<Base, Condition> = NonNullable<{
-    [Key in keyof Base]: Base[Key] extends Condition ? Key : never;
+    [Key in keyof Base]: NonNullable<Base[Key]> extends Condition ? Key : never;
 }[keyof Base]>;
 export type AccordionProps<Item extends Record<string, unknown>> = WithAttachments<WithSlot<{
     /**
@@ -20,21 +21,69 @@ export type AccordionProps<Item extends Record<string, unknown>> = WithAttachmen
     value?: string[];
     /** Initially expanded item ids when `value` is omitted. */
     defaultValue?: string[];
-    /** Called after the expanded item ids change. */
+    /** Called after the expanded item ids change, with the new ids. */
     onValueChange?: (value: string[]) => void;
     /**
-     * Called after one item's open state changes. Receives the item, its index, and the
-     * resulting open state; `onValueChange` reports the whole expanded set.
+     * Called before one item opens or closes. Receives the item, its index, the requested open
+     * state and the open-change `details`: `details.reason` says why (`trigger-press`, or
+     * `find-in-page` for the browser's find), `details.event` carries the DOM event, and
+     * `details.cancel()` keeps the item as it was (then `onValueChange` is not called).
+     * `onValueChange` reports the whole expanded set once the change is applied.
      */
     onItemOpenChange?: (payload: {
         item: Item;
         index: number;
         open: boolean;
+        details: OpenChangeDetails;
+    }) => void;
+    /**
+     * Called once each time an item finishes opening: after its slide, or at once when no
+     * animation runs (reduced motion, a zero duration, find-in-page). Not called for items open
+     * at the start.
+     */
+    onItemAfterOpen?: (payload: {
+        item: Item;
+        index: number;
+    }) => void;
+    /**
+     * Called once each time an item finishes closing: after its slide, at once when no
+     * animation runs, or when the panel is removed mid-close.
+     */
+    onItemAfterClose?: (payload: {
+        item: Item;
+        index: number;
     }) => void;
     /**
      * Whether the accordion should only allow one item to be open at a time.
      */
     oneAtATime?: boolean;
+    /**
+     * Disables every item: the triggers get the native `disabled` attribute, leave the tab
+     * order and cannot be toggled.
+     */
+    disabled?: boolean;
+    /**
+     * The key whose boolean marks one item as disabled. By default the accordion reads the
+     * `disabled` property of each item. A disabled item's trigger has the native `disabled`
+     * attribute, so it is skipped by Tab and announced as unavailable.
+     */
+    disabledKey?: ConditionalKeys<Item, boolean> | (string extends keyof Item ? keyof Item & string : never);
+    /**
+     * Keeps collapsed panels in the DOM under `hidden="until-found"`, so the browser's
+     * find-in-page, text fragments and `#id` links can reach their content and open the item
+     * (reason `find-in-page`, no animation). Collapsed content stays out of the accessibility
+     * tree and the tab order until then. A disabled item is not findable: its collapsed panel
+     * stays under plain `hidden`, so the browser never opens it. A parent that refuses the
+     * change leaves the item closed.
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * Keeps collapsed panels mounted under `hidden`, preserving their state (form values,
+     * scroll, media). Not findable by the browser; use `hiddenUntilFound` for that.
+     * @default false
+     */
+    keepMounted?: boolean;
     /**
      * The key to use to get the title from the item. By default, the accordion will use the 'title' property of the item.
      * Usefull if the title is a string but you can pass a slot to display a custom title.
@@ -73,7 +122,7 @@ export type AccordionProps<Item extends Record<string, unknown>> = WithAttachmen
      */
     variant?: 'classic' | 'card' | 'outline';
     /**
-     * Heading level announced for each item title (`aria-level` on the item heading).
+     * Level of the heading element (`h2` to `h6`) that wraps each trigger button.
      * @default 3
      */
     headingLevel?: 2 | 3 | 4 | 5 | 6;
@@ -91,11 +140,6 @@ export type AccordionProps<Item extends Record<string, unknown>> = WithAttachmen
      * Theme overrides for the accordion root and item sub-parts (header, trigger, title, description, icon, content).
      */
     theme?: AccordionThemeProps;
-    /**
-     * Whether the accordion should be accessible when not expanded.
-     * This is useful for screen readers to skip the content when not expanded.
-     */
-    accessible?: boolean;
 }, 'title' | 'description' | 'content', {
     /** Current accordion item passed to the slot. */
     item: Item;

package/dist/components/Accordion/accordion.theme.d.ts

@@ -26,7 +26,7 @@ export declare const accordionTheme: {
             };
         };
     }>;
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -46,8 +46,8 @@ export declare const accordionTheme: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    item: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    item: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -71,8 +71,9 @@ export declare const accordionTheme: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    header: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    heading: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    header: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -83,8 +84,8 @@ export declare const accordionTheme: {
             normal: string;
             comfortable: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    trigger: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    trigger: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -100,35 +101,35 @@ export declare const accordionTheme: {
             card: string;
             outline: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    title: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    title: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    description: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    description: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    icon: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    icon: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    iconWrapper: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    iconWrapper: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         expanded: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    content: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    content: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -144,7 +145,7 @@ export declare const accordionTheme: {
             card: string;
             outline: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type AccordionTheme = typeof accordionTheme;
 export type AccordionThemeProps = InferComponentTheme<AccordionTheme>;
@@ -162,7 +163,7 @@ export declare const setAccordionTheme: (theme: InferComponentTheme<{
             };
         };
     }>;
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -182,8 +183,8 @@ export declare const setAccordionTheme: (theme: InferComponentTheme<{
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    item: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    item: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -207,8 +208,9 @@ export declare const setAccordionTheme: (theme: InferComponentTheme<{
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    header: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    heading: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    header: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -219,8 +221,8 @@ export declare const setAccordionTheme: (theme: InferComponentTheme<{
             normal: string;
             comfortable: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    trigger: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    trigger: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -236,35 +238,35 @@ export declare const setAccordionTheme: (theme: InferComponentTheme<{
             card: string;
             outline: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    title: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    title: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    description: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    description: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    icon: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    icon: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    iconWrapper: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    iconWrapper: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         expanded: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    content: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    content: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -280,9 +282,9 @@ export declare const setAccordionTheme: (theme: InferComponentTheme<{
             card: string;
             outline: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useAccordionTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
+export declare const useAccordionTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
     motion: import("../../utils/motion/index.js").MotionResolver<{
         readonly axis: {
             readonly y: {};
@@ -296,7 +298,7 @@ export declare const useAccordionTheme: import("../../utils/cva/theme.js").UseCo
             };
         };
     }>;
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -316,8 +318,8 @@ export declare const useAccordionTheme: import("../../utils/cva/theme.js").UseCo
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    item: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    item: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -341,8 +343,9 @@ export declare const useAccordionTheme: import("../../utils/cva/theme.js").UseCo
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    header: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    heading: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    header: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -353,8 +356,8 @@ export declare const useAccordionTheme: import("../../utils/cva/theme.js").UseCo
             normal: string;
             comfortable: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    trigger: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    trigger: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -370,35 +373,35 @@ export declare const useAccordionTheme: import("../../utils/cva/theme.js").UseCo
             card: string;
             outline: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    title: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    title: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    description: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    description: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    icon: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    icon: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    iconWrapper: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    iconWrapper: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         expanded: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    content: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    content: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -414,7 +417,7 @@ export declare const useAccordionTheme: import("../../utils/cva/theme.js").UseCo
             card: string;
             outline: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>;
 export declare const useAccordionMotion: () => import("../../utils/motion/index.js").ComponentMotion<{
     readonly axis: {

package/dist/components/Accordion/accordion.theme.js

@@ -117,6 +117,9 @@ const defaultAccordionTrigger = cva({
         variant: 'classic'
     }
 });
+// The heading element (`h2`-`h6`) that wraps each trigger button. Headings render without browser
+// margins or type scale; the trigger owns the row's look.
+const defaultAccordionHeading = cva({ base: 'm-0 w-full text-[length:inherit] font-[inherit]' });
 const defaultAccordionHeader = cva({
     base: 'flex-1 flex flex-col items-start',
     variants: {
@@ -225,6 +228,7 @@ export const accordionTheme = {
     motion: defaultAccordionMotion,
     root: defaultAccordion,
     item: defaultAccordionItem,
+    heading: defaultAccordionHeading,
     header: defaultAccordionHeader,
     trigger: defaultAccordionTrigger,
     title: defaultAccordionTitle,

package/dist/components/Accordion/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Accordion } from './Accordion.svelte';
 export type { AccordionProps, ConditionalKeys } from './accordion.props.js';
 export { accordionTheme, setAccordionTheme, useAccordionTheme, type AccordionTheme, type AccordionThemeProps } from './accordion.theme.js';
+export { accordionDataAttributes, accordionCssVariables, type AccordionDataAttribute, type AccordionCssVariable } from './accordion.attributes.js';

package/dist/components/Accordion/index.js

@@ -1,2 +1,3 @@
 export { default as Accordion } from './Accordion.svelte';
 export { accordionTheme, setAccordionTheme, useAccordionTheme } from './accordion.theme.js';
+export { accordionDataAttributes, accordionCssVariables } from './accordion.attributes.js';