@usefragments/ui 1.5.4 → 1.7.0

package/src/components/CodeBlock/index.tsx

@@ -6,8 +6,10 @@ import { useState, useCallback, useEffect, useMemo } from "react";
 // Lazy-loaded dependency (shiki)
 // ============================================
 
+type ShikiThemeInput = string | typeof import("./css-variables-theme").FUI_CSS_VARIABLES_THEME;
+
 let _codeToHtml:
-  | ((code: string, options: { lang: string; theme: string }) => Promise<string>)
+  | ((code: string, options: { lang: string; theme: ShikiThemeInput }) => Promise<string>)
   | null = null;
 let _shikiLoadPromise: Promise<void> | null = null;
 let _shikiFailed = false;
@@ -28,7 +30,9 @@ async function loadShikiDeps() {
   await _shikiLoadPromise;
 }
 import { TabsRoot, TabsList, Tab, TabsPanel } from "../Tabs";
+import { FUI_CSS_VARIABLES_THEME } from "./css-variables-theme";
 import styles from "./CodeBlock.module.scss";
+import { isDevelopmentBuild, isProductionBuild } from "../../utils/env";
 
 export type CodeBlockLanguage =
   | "tsx"
@@ -76,6 +80,7 @@ const LANGUAGE_ALIASES: Partial<Record<CodeBlockLanguage, string>> = {
 
 /** Available syntax highlighting themes */
 export type CodeBlockTheme =
+  | "css-variables"
   | "synthwave-84"
   | "github-dark"
   | "github-light"
@@ -95,7 +100,7 @@ export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   code: string;
   /** Programming language for syntax highlighting */
   language?: CodeBlockLanguage;
-  /** Syntax highlighting theme */
+  /** Syntax highlighting theme. Default follows `--fui-code-token-*` via shiki css-variables. */
   theme?: CodeBlockTheme;
   /** Show copy button */
   showCopy?: boolean;
@@ -125,6 +130,12 @@ export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   defaultCollapsed?: boolean;
   /** Number of lines to show when collapsed */
   collapsedLines?: number;
+  /**
+   * Collapse control copy. `lines` keeps “Show N more lines” / “Show less”
+   * (docs prose). `expand` is one right-aligned Expand / Collapse control
+   * for preview+code capsules.
+   */
+  collapseAction?: "lines" | "expand";
   /** Compact mode with reduced padding */
   compact?: boolean;
   /** Show a persistent copy button (always visible, uses Button component) */
@@ -547,14 +558,22 @@ function processShikiHtml(html: string, options: ProcessOptions): string {
     const lineClass = lineClasses.join(" ");
     const diffMarker = isAdded ? "+" : isRemoved ? "-" : " ";
 
-    if (showLineNumbers || hasDiff) {
-      const lineNumHtml = showLineNumbers
-        ? `<span class="line-number">${displayLineNum}</span>`
+    const lineNumHtml =
+      showLineNumbers || hasDiff
+        ? `${showLineNumbers ? `<span class="line-number">${displayLineNum}</span>` : ""}${
+            hasDiff ? `<span class="diff-marker">${diffMarker}</span>` : ""
+          }`
         : "";
-      const diffMarkerHtml = hasDiff ? `<span class="diff-marker">${diffMarker}</span>` : "";
-      return `<span class="${lineClass}">${lineNumHtml}${diffMarkerHtml}${line}</span>`;
+
+    // Shiki already wraps each row in <span class="line">; merge into that span
+    // instead of nesting a second .line (which breaks the inline-block row layout).
+    if (/^<span class="line([^"]*)">/.test(line)) {
+      return line.replace(
+        /^<span class="line([^"]*)">/,
+        `<span class="${lineClass}$1">${lineNumHtml}`
+      );
     }
-    return `<span class="${lineClass}">${line}</span>`;
+    return `<span class="${lineClass}">${lineNumHtml}${line}</span>`;
   });
 
   // Reconstruct the HTML
@@ -565,7 +584,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
   {
     code,
     language = "tsx",
-    theme = "one-dark-pro",
+    theme = "css-variables",
     showCopy = true,
     title,
     filename,
@@ -580,6 +599,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
     collapsible = false,
     defaultCollapsed = false,
     collapsedLines = 5,
+    collapseAction = "lines",
     compact = false,
     persistentCopy = false,
     copyPlacement = "auto",
@@ -591,7 +611,10 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
   ref
 ) {
   const [copied, setCopied] = useState(false);
-  const [highlight, setHighlight] = useState<{ html: string; loading: boolean }>({ html: '', loading: true });
+  const [highlight, setHighlight] = useState<{ html: string; loading: boolean }>({
+    html: "",
+    loading: true,
+  });
   const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
 
   const trimmedCode = useMemo(() => normalizeCode(code, language), [code, language]);
@@ -624,7 +647,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
       const fallbackHtml = `<pre class="shiki"><code>${escapeHtml(visibleCode)}</code></pre>`;
 
       if (_shikiFailed || !_codeToHtml) {
-        if (_shikiFailed && process.env.NODE_ENV === "development") {
+        if (_shikiFailed && isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] CodeBlock: shiki is not installed. " +
               "Install it with: npm install shiki"
@@ -635,7 +658,9 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
 
       try {
         const resolvedLang = LANGUAGE_ALIASES[language] || language;
-        const html = await _codeToHtml(visibleCode, { lang: resolvedLang, theme });
+        const shikiTheme: ShikiThemeInput =
+          theme === "css-variables" ? FUI_CSS_VARIABLES_THEME : theme;
+        const html = await _codeToHtml(visibleCode, { lang: resolvedLang, theme: shikiTheme });
         return processShikiHtml(html, {
           showLineNumbers,
           startLineNumber,
@@ -644,7 +669,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
           removedLines: removedSet,
         });
       } catch (err) {
-        if (process.env.NODE_ENV !== "production") {
+        if (!isProductionBuild()) {
           console.error("Syntax highlighting failed:", err);
         }
         return fallbackHtml;
@@ -679,7 +704,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
       setTimeout(() => setCopied(false), 2000);
       onCopy?.();
     } catch (err) {
-      if (process.env.NODE_ENV !== "production") {
+      if (!isProductionBuild()) {
         console.error("Failed to copy:", err);
       }
     }
@@ -714,9 +739,13 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
     : undefined;
 
   return (
-    <div ref={ref} {...htmlProps} className={classNames} data-theme="dark">
-      {title && <div className={styles.title}>{title}</div>}
-      <div className={wrapperClasses} style={wrapperStyle}>
+    <div ref={ref} {...htmlProps} className={classNames} data-slot="code-block">
+      {title && (
+        <div className={styles.title} data-slot="code-block-title">
+          {title}
+        </div>
+      )}
+      <div className={wrapperClasses} style={wrapperStyle} data-slot="code-block-frame">
         {shouldRenderHeader && (
           <div className={styles.header}>
             <span className={styles.filename}>{filename ?? ""}</span>
@@ -773,11 +802,17 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
           <button
             type="button"
             onClick={toggleCollapsed}
-            className={styles.collapseButton}
+            className={
+              collapseAction === "expand"
+                ? `${styles.collapseButton} ${styles.collapseExpand}`
+                : styles.collapseButton
+            }
             aria-expanded={!isCollapsed}
             aria-label={isCollapsed ? "Expand code" : "Collapse code"}
           >
-            {isCollapsed ? (
+            {collapseAction === "expand" ? (
+              <span>{isCollapsed ? "Expand" : "Collapse"}</span>
+            ) : isCollapsed ? (
               <>
                 <ChevronDownIcon className={styles.icon} />
                 <span>Show {totalLines - collapsedLines} more lines</span>
@@ -834,6 +869,14 @@ export interface TabbedCodeBlockProps {
   wordWrap?: boolean;
   /** Maximum height in pixels (enables scrolling) */
   maxHeight?: number;
+  /** Allow collapsing/expanding each tab's code (forwarded to every panel) */
+  collapsible?: boolean;
+  /** Initial collapsed state (only applies when collapsible is true) */
+  defaultCollapsed?: boolean;
+  /** Number of lines to show when collapsed */
+  collapsedLines?: number;
+  /** Forwarded to every panel (see CodeBlock `collapseAction`) */
+  collapseAction?: "lines" | "expand";
   /** Additional class name */
   className?: string;
   /** Callback fired when a tab's copy button is clicked. Receives the tab label. */
@@ -852,6 +895,10 @@ function TabbedCodeBlock({
   tabsVariant = "pills",
   wordWrap,
   maxHeight,
+  collapsible,
+  defaultCollapsed,
+  collapsedLines,
+  collapseAction,
   className,
   onCopy,
 }: TabbedCodeBlockProps) {
@@ -864,28 +911,37 @@ function TabbedCodeBlock({
           {tabs.map((tab, index) => {
             const tabValue = tab.value ?? tab.label;
             return (
-            <Tab key={`${tabValue}-${index}`} value={tabValue}>
-              {tab.label}
-            </Tab>
+              <Tab key={`${tabValue}-${index}`} value={tabValue}>
+                {tab.label}
+              </Tab>
             );
           })}
         </TabsList>
         {tabs.map((tab, index) => {
           const tabValue = tab.value ?? tab.label;
           return (
-          <TabsPanel key={`${tabValue}-panel-${index}`} value={tabValue} flush className={styles.tabbedPanel}>
-            <CodeBlockBase
-              code={tab.code}
-              language={tab.language}
-              theme={theme}
-              showCopy={showCopy}
-              copyPlacement={copyPlacement}
-              showLineNumbers={showLineNumbers}
-              wordWrap={wordWrap}
-              maxHeight={maxHeight}
-              onCopy={onCopy ? () => onCopy(tab.label) : undefined}
-            />
-          </TabsPanel>
+            <TabsPanel
+              key={`${tabValue}-panel-${index}`}
+              value={tabValue}
+              flush
+              className={styles.tabbedPanel}
+            >
+              <CodeBlockBase
+                code={tab.code}
+                language={tab.language}
+                theme={theme}
+                showCopy={showCopy}
+                copyPlacement={copyPlacement}
+                showLineNumbers={showLineNumbers}
+                wordWrap={wordWrap}
+                maxHeight={maxHeight}
+                collapsible={collapsible}
+                defaultCollapsed={defaultCollapsed}
+                collapsedLines={collapsedLines}
+                collapseAction={collapseAction}
+                onCopy={onCopy ? () => onCopy(tab.label) : undefined}
+              />
+            </TabsPanel>
           );
         })}
       </TabsRoot>

package/src/components/Collapsible/Collapsible.contract.json

@@ -1,15 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Collapsible",
-  "description": "An interactive component that expands/collapses to show or hide content",
+  "description": "Shows or hides one region of content behind a trigger.",
   "category": "layout",
-  "tags": [
-    "collapsible",
-    "expandable",
-    "accordion",
-    "disclosure",
-    "toggle"
-  ],
+  "tags": ["collapsible", "expandable", "accordion", "disclosure", "toggle"],
   "status": "stable",
   "sourcePath": "src/components/Collapsible/index.tsx",
   "exportName": "Collapsible",
@@ -51,22 +45,21 @@
   },
   "usage": {
     "when": [
-      "Showing/hiding additional content on demand",
-      "Building accordions or expandable sections",
-      "Collapsible navigation sections",
-      "FAQ sections with expandable answers",
-      "Settings panels with grouped options"
+      "Detail most readers do not need",
+      "Optional or advanced settings",
+      "Navigation sections that fold away",
+      "Building a disclosure the other components do not cover"
     ],
     "whenNot": [
-      "Single item disclosure (use Accordion instead)",
-      "Navigation menus with complex interactions (use Menu)",
-      "Modal or overlay content (use Dialog or Popover)"
+      "Several sections that should coordinate (use Accordion)",
+      "Content that must overlay the page (use Dialog or Popover)",
+      "Action lists (use Menu)"
     ],
     "guidelines": [
-      "Use clear trigger labels that indicate expandable content",
-      "Consider defaultOpen for primary content users often need",
-      "Keep trigger text concise but descriptive",
-      "Use chevron icons consistently to indicate collapsible state"
+      "The trigger should say what opens, not 'click here'",
+      "defaultOpen for content most users want on arrival",
+      "Keep the trigger to a short phrase",
+      "Keep the chevron direction consistent across the page"
     ],
     "accessibility": [
       "Trigger must have aria-expanded to indicate state",
@@ -78,32 +71,32 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Basic collapsible with trigger and content",
+      "description": "Starts closed and opens on click.",
       "code": "<Collapsible>\n  <Collapsible.Trigger>Click to expand</Collapsible.Trigger>\n  <Collapsible.Content>\n    <p>This content is hidden by default and revealed when the trigger is clicked.</p>\n  </Collapsible.Content>\n</Collapsible>"
     },
     {
       "name": "Default Open",
-      "description": "Collapsible that starts in the expanded state",
+      "description": "Starts open for content most users want.",
       "code": "<Collapsible defaultOpen>\n  <Collapsible.Trigger>Section Title</Collapsible.Trigger>\n  <Collapsible.Content>\n    <p>This content is visible by default. Click the trigger to collapse.</p>\n  </Collapsible.Content>\n</Collapsible>"
     },
     {
       "name": "Chevron Start",
-      "description": "Collapsible with chevron icon on the left",
+      "description": "Marker leads the label instead of trailing it.",
       "code": "<Collapsible>\n  <Collapsible.Trigger chevronPosition=\"start\">Navigation</Collapsible.Trigger>\n  <Collapsible.Content>\n    <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>\n      <li>Dashboard</li>\n      <li>Settings</li>\n      <li>Profile</li>\n    </ul>\n  </Collapsible.Content>\n</Collapsible>"
     },
     {
       "name": "No Chevron",
-      "description": "Collapsible without chevron indicator",
+      "description": "Bare trigger when the surrounding layout signals enough.",
       "code": "<Collapsible>\n  <Collapsible.Trigger showChevron={false}>Show more details</Collapsible.Trigger>\n  <Collapsible.Content>\n    <p>Hidden details that appear when triggered.</p>\n  </Collapsible.Content>\n</Collapsible>"
     },
     {
       "name": "Disabled",
-      "description": "Collapsible in disabled state",
+      "description": "Locked shut and skipped by the keyboard.",
       "code": "<Collapsible disabled>\n  <Collapsible.Trigger>Cannot toggle (disabled)</Collapsible.Trigger>\n  <Collapsible.Content>\n    <p>This content cannot be shown because the collapsible is disabled.</p>\n  </Collapsible.Content>\n</Collapsible>"
     },
     {
       "name": "Multiple Sections",
-      "description": "Multiple independent collapsible sections",
+      "description": "Independent regions that ignore each other.",
       "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>\n  <Collapsible defaultOpen>\n    <Collapsible.Trigger>Getting Started</Collapsible.Trigger>\n    <Collapsible.Content>\n      <p>Introduction and setup instructions.</p>\n    </Collapsible.Content>\n  </Collapsible>\n  <Collapsible>\n    <Collapsible.Trigger>Advanced Usage</Collapsible.Trigger>\n    <Collapsible.Content>\n      <p>Advanced configuration options.</p>\n    </Collapsible.Content>\n  </Collapsible>\n  <Collapsible>\n    <Collapsible.Trigger>API Reference</Collapsible.Trigger>\n    <Collapsible.Content>\n      <p>Complete API documentation.</p>\n    </Collapsible.Content>\n  </Collapsible>\n</div>"
     }
   ],
@@ -131,19 +124,11 @@
       "onOpenChange: (open: boolean) => void - state change callback",
       "disabled: boolean - prevents interaction"
     ],
-    "a11yRules": [
-      "A11Y_EXPANDED_STATE",
-      "A11Y_REGION_LABEL",
-      "A11Y_KEYBOARD_NAV"
-    ]
+    "a11yRules": ["A11Y_EXPANDED_STATE", "A11Y_REGION_LABEL", "A11Y_KEYBOARD_NAV"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root",
-      "Trigger",
-      "Content"
-    ]
+    "subComponents": ["Root", "Trigger", "Content"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Collapsible/Collapsible.module.scss

@@ -1,25 +1,22 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+@use "../../recipes/feedback" as feedback;
 
 .root {
   width: 100%;
 }
 
 .trigger {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: var(--fui-space-1, $fui-space-1);
-  background: transparent;
-  border: none;
+  @include button-reset;
+  @include interactive-base;
+  @include feedback.disclosure-row;
+
+  inline-size: 100%;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-primary, $fui-text-primary);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   transition: background-color var(--fui-transition-fast, $fui-transition-fast);
-  gap: var(--fui-space-2, $fui-space-2);
 
   &:hover:not(:disabled) {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -37,13 +34,12 @@
 
 .triggerContent {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .chevron {
-  flex-shrink: 0;
-  width: var(--fui-icon-md, $fui-icon-md);
-  height: var(--fui-icon-md, $fui-icon-md);
+  @include feedback.disclosure-glyph;
+
   color: var(--fui-text-secondary, $fui-text-secondary);
   transition: transform var(--fui-transition-normal, $fui-transition-normal);
 }
@@ -53,67 +49,37 @@
 }
 
 .content {
+  display: grid;
+  grid-template-rows: 0fr;
   overflow: hidden;
+  opacity: 0;
   transition:
-    max-height var(--fui-transition-normal, $fui-transition-normal),
+    grid-template-rows var(--fui-transition-normal, $fui-transition-normal),
     opacity var(--fui-transition-normal, $fui-transition-normal);
 }
 
 .contentOpen {
-  max-height: 2000px; // Large enough for most content
+  grid-template-rows: 1fr;
   opacity: 1;
 }
 
-.contentClosed {
-  max-height: 0;
-  opacity: 0;
-}
-
 .contentInner {
-  padding-top: var(--fui-space-1, $fui-space-1);
-}
+  @include feedback.disclosure-panel;
 
-.disabled {
-  .trigger {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-// Animation variant using CSS animation instead of max-height
-// Can be used with forceMount for smoother animations
-.root[data-animated='true'] {
-  // Duration + easing come from --fui-transition-normal (matches the
-  // max-height/opacity transition above); fill-mode keeps the end state.
-  .contentOpen {
-    animation: collapsibleSlideDown var(--fui-transition-normal, $fui-transition-normal)
-      forwards;
-  }
-
-  .contentClosed {
-    animation: collapsibleSlideUp var(--fui-transition-normal, $fui-transition-normal)
-      forwards;
-  }
+  min-block-size: 0;
+  overflow: hidden;
+  color: var(--fui-text-secondary, $fui-text-secondary);
 }
 
-@keyframes collapsibleSlideDown {
-  from {
-    max-height: 0;
-    opacity: 0;
-  }
-  to {
-    max-height: var(--collapsible-content-height, 2000px);
-    opacity: 1;
-  }
+.disabled .trigger {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-@keyframes collapsibleSlideUp {
-  from {
-    max-height: var(--collapsible-content-height, 2000px);
-    opacity: 1;
-  }
-  to {
-    max-height: 0;
-    opacity: 0;
+@media (prefers-reduced-motion: reduce) {
+  .trigger,
+  .chevron,
+  .content {
+    transition: none;
   }
 }

package/src/components/Collapsible/index.tsx

@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import React, { useState, useCallback, useId, createContext, useContext } from 'react';
-import styles from './Collapsible.module.scss';
+import React, { useState, useCallback, useId, createContext, useContext } from "react";
+import styles from "./Collapsible.module.scss";
 
 function composeEventHandlers<E extends { defaultPrevented: boolean }>(
   userHandler: ((event: E) => void) | undefined,
@@ -28,7 +28,7 @@ const CollapsibleContext = createContext<CollapsibleContextValue | null>(null);
 function useCollapsibleContext() {
   const context = useContext(CollapsibleContext);
   if (!context) {
-    throw new Error('Collapsible compound components must be used within Collapsible.Root');
+    throw new Error("Collapsible compound components must be used within Collapsible.Root");
   }
   return context;
 }
@@ -89,8 +89,8 @@ function CollapsibleRoot({
     <CollapsibleContext.Provider value={contextValue}>
       <div
         {...htmlProps}
-        className={`${styles.root} ${isOpen ? styles.open : ''} ${disabled ? styles.disabled : ''} ${className || ''}`}
-        data-state={isOpen ? 'open' : 'closed'}
+        className={`${styles.root} ${isOpen ? styles.open : ""} ${disabled ? styles.disabled : ""} ${className || ""}`}
+        data-state={isOpen ? "open" : "closed"}
         data-disabled={disabled || undefined}
       >
         {children}
@@ -105,7 +105,7 @@ export interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTML
   /** Show chevron indicator */
   showChevron?: boolean;
   /** Chevron position */
-  chevronPosition?: 'start' | 'end';
+  chevronPosition?: "start" | "end";
   /** Render as child element (for custom triggers) */
   asChild?: boolean;
 }
@@ -114,7 +114,7 @@ function CollapsibleTrigger({
   children,
   className,
   showChevron = true,
-  chevronPosition = 'end',
+  chevronPosition = "end",
   asChild = false,
   onClick,
   onKeyDown,
@@ -123,7 +123,7 @@ function CollapsibleTrigger({
   const { isOpen, toggle, contentId, triggerId, disabled } = useCollapsibleContext();
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ' ') {
+    if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       toggle();
     }
@@ -135,7 +135,7 @@ function CollapsibleTrigger({
 
   const chevronIcon = showChevron && (
     <svg
-      className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ''}`}
+      className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ""}`}
       viewBox="0 0 16 16"
       fill="none"
       aria-hidden="true"
@@ -160,9 +160,9 @@ function CollapsibleTrigger({
     return React.cloneElement(children as React.ReactElement<any>, {
       ...htmlProps,
       id: (htmlProps.id as string | undefined) ?? triggerId,
-      'aria-expanded': isOpen,
-      'aria-controls': contentId,
-      'aria-disabled': disabled || undefined,
+      "aria-expanded": isOpen,
+      "aria-controls": contentId,
+      "aria-disabled": disabled || undefined,
       onClick: composeEventHandlers(
         (event: React.MouseEvent<HTMLElement>) => {
           childProps.onClick?.(event);
@@ -177,7 +177,7 @@ function CollapsibleTrigger({
         },
         (event) => handleKeyDown(event as unknown as React.KeyboardEvent)
       ),
-      className: [className, childProps.className].filter(Boolean).join(' '),
+      className: [styles.trigger, className, childProps.className].filter(Boolean).join(" "),
     });
   }
 
@@ -186,7 +186,7 @@ function CollapsibleTrigger({
       {...htmlProps}
       type="button"
       id={(htmlProps.id as string | undefined) ?? triggerId}
-      className={`${styles.trigger} ${className || ''}`}
+      className={`${styles.trigger} ${className || ""}`}
       aria-expanded={isOpen}
       aria-controls={contentId}
       aria-disabled={disabled || undefined}
@@ -194,9 +194,9 @@ function CollapsibleTrigger({
       onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}
       disabled={disabled}
     >
-      {chevronPosition === 'start' && chevronIcon}
+      {chevronPosition === "start" && chevronIcon}
       <span className={styles.triggerContent}>{children}</span>
-      {chevronPosition === 'end' && chevronIcon}
+      {chevronPosition === "end" && chevronIcon}
     </button>
   );
 }
@@ -227,9 +227,10 @@ function CollapsibleContent({
       id={(htmlProps.id as string | undefined) ?? contentId}
       role="region"
       aria-labelledby={triggerId}
-      className={`${styles.content} ${isOpen ? styles.contentOpen : styles.contentClosed} ${className || ''}`}
-      data-state={isOpen ? 'open' : 'closed'}
-      hidden={!isOpen && !forceMount}
+      aria-hidden={!isOpen || undefined}
+      inert={!isOpen || undefined}
+      className={`${styles.content} ${isOpen ? styles.contentOpen : styles.contentClosed} ${className || ""}`}
+      data-state={isOpen ? "open" : "closed"}
     >
       <div className={styles.contentInner}>{children}</div>
     </div>
@@ -244,11 +245,6 @@ export const Collapsible = Object.assign(CollapsibleRoot, {
 });
 
 // Named exports for direct imports
-export {
-  CollapsibleRoot,
-  CollapsibleTrigger,
-  CollapsibleContent,
-  useCollapsibleContext,
-};
+export { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useCollapsibleContext };
 
 export type CollapsibleProps = CollapsibleRootProps;