@lostgradient/cinder 0.12.0 → 0.13.0

package/src/components/side-navigation/side-navigation.types.ts

@@ -12,3 +12,15 @@ export type SideNavigationProps = Omit<
   /** Must be <li> elements containing NavigationItem and/or SideNavigationGroup. */
   children: Snippet;
 };
+
+/** Schema generator surface for SideNavigation — excludes native attributes except supported styling hooks. */
+export interface SideNavigationSchemaProps {
+  /** Accessible name for the <nav> landmark. Required, non-empty, distinct from other navs on the page. */
+  ariaLabel: string;
+  /** Additional CSS class merged with `.cinder-side-navigation`. */
+  class?: string;
+  /** Inline style string applied to the `.cinder-side-navigation` root. */
+  style?: string;
+  /** Must be <li> elements containing NavigationItem and/or SideNavigationGroup. */
+  children: Snippet;
+}

package/src/components/side-navigation/side-navigation.variables.json

@@ -1 +1 @@
-[]
+["--cinder-side-navigation-list-gap"]

package/src/components/side-navigation/side-navigation.variables.ts

@@ -1,3 +1,3 @@
-const variables: readonly string[] = [];
+const variables: readonly string[] = ['--cinder-side-navigation-list-gap'];
 
 export default variables;

package/src/components/sidebar/index.ts

@@ -2,5 +2,6 @@ import './sidebar.css';
 import Sidebar from './sidebar.svelte';
 
 export default Sidebar;
+export { SIDEBAR_MOBILE_BREAKPOINT, SIDEBAR_MOBILE_MEDIA_QUERY } from './sidebar.constants.ts';
 export type { SidebarProps } from './sidebar.types.ts';
 export { Sidebar };

package/src/components/sidebar/sidebar.constants.ts

@@ -0,0 +1,13 @@
+/**
+ * Viewport width below which Sidebar uses its mobile drawer behavior.
+ *
+ * Consumers with app chrome outside the Sidebar can import this value instead
+ * of duplicating the component's internal breakpoint.
+ */
+export const SIDEBAR_MOBILE_BREAKPOINT = '47.99rem';
+
+/**
+ * Fully parenthesized media query used by Sidebar to switch from the inline
+ * aside to the mobile drawer.
+ */
+export const SIDEBAR_MOBILE_MEDIA_QUERY = `(max-width: ${SIDEBAR_MOBILE_BREAKPOINT})`;

package/src/components/sidebar/sidebar.examples.json

@@ -8,6 +8,12 @@
       "title": "Basic sidebar",
       "description": "Layout-level sidebar with brand, navigation, and footer regions. Collapse toggles icon-only mode on desktop and closes the drawer on mobile.",
       "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { NavigationItem } from '@lostgradient/cinder/navigation-item';\n  import { SideNavigation } from '@lostgradient/cinder/side-navigation';\n  import { SideNavigationGroup } from '@lostgradient/cinder/side-navigation-group';\n  import { SideNavigationItem } from '@lostgradient/cinder/side-navigation-item';\n  import { Sidebar } from '@lostgradient/cinder/sidebar';\n  let collapsed = $state(false);\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n  <div>\n    <Button\n      label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n      onclick={() => (collapsed = !collapsed)}\n    />\n  </div>\n\n  <div\n    style=\"display: flex; min-height: 24rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden;\"\n  >\n    <Sidebar bind:collapsed label=\"Workspace\">\n      {#snippet brand()}\n        <strong style=\"font-size: 0.875rem;\">Cinder</strong>\n      {/snippet}\n\n      {#snippet navigation()}\n        <SideNavigation ariaLabel=\"Workspace sections\">\n          {#snippet children()}\n            <SideNavigationItem href=\"#dashboard\">\n              {#snippet children()}Dashboard{/snippet}\n            </SideNavigationItem>\n            <SideNavigationItem href=\"#projects\" active>\n              {#snippet children()}Projects{/snippet}\n            </SideNavigationItem>\n            <SideNavigationGroup label=\"Settings\">\n              {#snippet children()}\n                <SideNavigationItem href=\"#general\">\n                  {#snippet children()}General{/snippet}\n                </SideNavigationItem>\n                <SideNavigationItem href=\"#billing\">\n                  {#snippet children()}Billing{/snippet}\n                </SideNavigationItem>\n              {/snippet}\n            </SideNavigationGroup>\n          {/snippet}\n        </SideNavigation>\n      {/snippet}\n\n      {#snippet footer()}\n        <NavigationItem variant=\"vertical\" href=\"#account\">\n          {#snippet children()}Account{/snippet}\n        </NavigationItem>\n      {/snippet}\n    </Sidebar>\n\n    <main style=\"flex: 1; padding: 1rem;\">\n      <p>Main content area.</p>\n      <p>Resize the viewport below ~767px to see the mobile drawer behavior.</p>\n    </main>\n  </div>\n</div>\n"
+    },
+    {
+      "id": "mobile-trigger",
+      "title": "App-owned mobile trigger",
+      "description": "Use the exported Sidebar mobile media query when a top bar owns the drawer trigger outside the Sidebar.",
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { NavigationItem } from '@lostgradient/cinder/navigation-item';\n  import { SideNavigation } from '@lostgradient/cinder/side-navigation';\n  import { SideNavigationItem } from '@lostgradient/cinder/side-navigation-item';\n  import { SIDEBAR_MOBILE_MEDIA_QUERY, Sidebar } from '@lostgradient/cinder/sidebar';\n  import { MediaQuery } from 'svelte/reactivity';\n\n  const mobile = new MediaQuery(SIDEBAR_MOBILE_MEDIA_QUERY, false);\n  let collapsed = $state(true);\n\n  const triggerLabel = $derived(\n    mobile.current\n      ? collapsed\n        ? 'Open workspace navigation'\n        : 'Close workspace navigation'\n      : collapsed\n        ? 'Expand workspace navigation'\n        : 'Collapse workspace navigation',\n  );\n</script>\n\n<div\n  style=\"display: flex; min-height: 24rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden;\"\n>\n  <Sidebar id=\"workspace-sidebar\" bind:collapsed label=\"Workspace\">\n    {#snippet brand()}\n      <strong style=\"font-size: 0.875rem;\">Cinder</strong>\n    {/snippet}\n\n    {#snippet navigation()}\n      <SideNavigation ariaLabel=\"Workspace sections\">\n        <SideNavigationItem href=\"#dashboard\">Dashboard</SideNavigationItem>\n        <SideNavigationItem href=\"#projects\" active>Projects</SideNavigationItem>\n        <SideNavigationItem href=\"#settings\">Settings</SideNavigationItem>\n      </SideNavigation>\n    {/snippet}\n\n    {#snippet footer()}\n      <NavigationItem variant=\"vertical\" href=\"#account\">Account</NavigationItem>\n    {/snippet}\n  </Sidebar>\n\n  <main style=\"flex: 1; display: flex; flex-direction: column; min-inline-size: 0;\">\n    <div\n      style=\"display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb;\"\n    >\n      <Button\n        label={triggerLabel}\n        aria-controls=\"workspace-sidebar\"\n        aria-expanded={!collapsed}\n        onclick={() => (collapsed = !collapsed)}\n      />\n      <strong>Workspace</strong>\n    </div>\n\n    <div style=\"padding: 1rem;\">\n      <p style=\"margin: 0;\">\n        The trigger lives in app chrome, while Sidebar owns the drawer state and breakpoint.\n      </p>\n    </div>\n  </main>\n</div>\n"
     }
   ]
 }

package/src/components/sidebar/sidebar.svelte

@@ -7,6 +7,7 @@ import { MediaQuery } from 'svelte/reactivity';
 import { setSidebarContext } from '../../_internal/sidebar-context.ts';
 import { classNames } from '../../utilities/class-names.ts';
 import Drawer from '../drawer/drawer.svelte';
+import { SIDEBAR_MOBILE_MEDIA_QUERY } from './sidebar.constants.ts';
 let { id: sidebarId, collapsed = $bindable(false), label = 'Sidebar', class: className, brand: brandSnippet, navigation: navigationSnippet, footer: footerSnippet, 'aria-label': _ariaLabelAttribute, 'aria-labelledby': _ariaLabelledbyAttribute, ...rest } = $props();
 const validatedLabel = $derived.by(() => {
     if (label.trim() === '') {
@@ -18,16 +19,14 @@ const validatedLabel = $derived.by(() => {
 // complementary <aside> and the inner navigation are not announced as two
 // identically-named landmarks.
 const navigationLabel = $derived(`${validatedLabel} navigation`);
-// Breakpoint matches the existing `47.99rem` (~767px) convention used by
-// navigation-bar.css and navigation-item.css. The fully-parenthesized form
-// is required — `window.matchMedia` rejects bare media feature expressions
-// on Firefox and Safari.
+// The fully-parenthesized form is required — `window.matchMedia` rejects
+// bare media feature expressions on Firefox and Safari.
 // Keep the fallback explicit for SSR-contract test environments that resolve
 // the client MediaQuery build while `window.matchMedia` is unavailable.
 const hasMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
 const usesSsrResponsiveFallback = !hasMatchMedia;
 const mobile = hasMatchMedia
-    ? new MediaQuery('(max-width: 47.99rem)', false)
+    ? new MediaQuery(SIDEBAR_MOBILE_MEDIA_QUERY, false)
     : { current: false };
 const context = {
     get collapsed() {

package/src/components/stat/stat.css

@@ -1,17 +1,25 @@
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 @layer cinder.components {
   .cinder-stat {
+    --cinder-stat-row-gap: var(--cinder-space-1, 0.25rem);
+    --cinder-stat-column-gap: var(--cinder-space-3, 0.75rem);
+    --cinder-stat-label-font-size: var(--cinder-text-sm);
+    --cinder-stat-value-font-size: var(--cinder-text-4xl);
+    --cinder-stat-value-font-weight: var(--cinder-font-semibold);
+    --cinder-stat-value-line-height: 1.1;
+    --cinder-stat-change-gap: var(--cinder-space-1, 0.25rem);
+    --cinder-stat-change-font-size: var(--cinder-text-sm);
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto auto auto;
-    row-gap: var(--cinder-space-1, 0.25rem);
+    row-gap: var(--cinder-stat-row-gap, var(--cinder-space-1, 0.25rem));
     align-items: start;
     color: var(--cinder-text);
   }
 
   .cinder-stat[data-cinder-has-icon] {
     grid-template-columns: auto 1fr;
-    column-gap: var(--cinder-space-3, 0.75rem);
+    column-gap: var(--cinder-stat-column-gap, var(--cinder-space-3, 0.75rem));
   }
 
   .cinder-stat__icon {
@@ -25,7 +33,7 @@
   }
 
   .cinder-stat__label {
-    font-size: var(--cinder-text-sm);
+    font-size: var(--cinder-stat-label-font-size, var(--cinder-text-sm));
     color: var(--cinder-text-muted);
   }
 
@@ -34,10 +42,10 @@
   }
 
   .cinder-stat__value {
-    font-size: var(--cinder-text-4xl);
-    font-weight: var(--cinder-font-semibold);
+    font-size: var(--cinder-stat-value-font-size, var(--cinder-text-4xl));
+    font-weight: var(--cinder-stat-value-font-weight, var(--cinder-font-semibold));
     font-variant-numeric: tabular-nums;
-    line-height: 1.1;
+    line-height: var(--cinder-stat-value-line-height, 1.1);
   }
 
   .cinder-stat[data-cinder-has-icon] .cinder-stat__value {
@@ -47,8 +55,8 @@
   .cinder-stat__change {
     display: inline-flex;
     align-items: center;
-    gap: var(--cinder-space-1, 0.25rem);
-    font-size: var(--cinder-text-sm);
+    gap: var(--cinder-stat-change-gap, var(--cinder-space-1, 0.25rem));
+    font-size: var(--cinder-stat-change-font-size, var(--cinder-text-sm));
   }
 
   .cinder-stat[data-cinder-has-icon] .cinder-stat__change {

package/src/components/stat/stat.schema.json

@@ -24,6 +24,10 @@
     "class": {
       "type": "string",
       "description": "Additional class names merged with `.cinder-stat`."
+    },
+    "style": {
+      "type": "string",
+      "description": "Inline style string applied to the `.cinder-stat` root."
     }
   },
   "additionalProperties": false,

package/src/components/stat/stat.schema.ts

@@ -28,6 +28,10 @@ const schema = {
       type: 'string',
       description: 'Additional class names merged with `.cinder-stat`.',
     },
+    style: {
+      type: 'string',
+      description: 'Inline style string applied to the `.cinder-stat` root.',
+    },
   },
   additionalProperties: false,
   required: ['label', 'value'],

package/src/components/stat/stat.types.ts

@@ -33,3 +33,23 @@ export type StatProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
   /** Additional class names merged with `.cinder-stat`. */
   class?: string;
 };
+
+/** Schema generator surface for Stat — excludes native attributes except supported styling hooks. */
+export interface StatSchemaProps {
+  /** Short label describing the metric, e.g. "Monthly Revenue". */
+  label: string;
+  /** The statistic. Strings rendered verbatim; numbers formatted via formatNumber. */
+  value: string | number;
+  /** Optional change indicator with direction and accessible wording. */
+  change?: StatChange;
+  /** Optional leading icon snippet (decorative — wrapper is aria-hidden). */
+  icon?: Snippet;
+  /** Intl.NumberFormat options applied only when `value` is a number. */
+  valueFormatOptions?: Intl.NumberFormatOptions;
+  /** Locale forwarded to formatNumber. Defaults to the nearest LocaleProvider locale, then en-US. */
+  valueLocale?: string;
+  /** Additional class names merged with `.cinder-stat`. */
+  class?: string;
+  /** Inline style string applied to the `.cinder-stat` root. */
+  style?: string;
+}

package/src/components/stat/stat.variables.json

@@ -1 +1,10 @@
-[]
+[
+  "--cinder-stat-change-font-size",
+  "--cinder-stat-change-gap",
+  "--cinder-stat-column-gap",
+  "--cinder-stat-label-font-size",
+  "--cinder-stat-row-gap",
+  "--cinder-stat-value-font-size",
+  "--cinder-stat-value-font-weight",
+  "--cinder-stat-value-line-height"
+]

package/src/components/stat/stat.variables.ts

@@ -1,3 +1,12 @@
-const variables: readonly string[] = [];
+const variables: readonly string[] = [
+  '--cinder-stat-change-font-size',
+  '--cinder-stat-change-gap',
+  '--cinder-stat-column-gap',
+  '--cinder-stat-label-font-size',
+  '--cinder-stat-row-gap',
+  '--cinder-stat-value-font-size',
+  '--cinder-stat-value-font-weight',
+  '--cinder-stat-value-line-height',
+];
 
 export default variables;

package/src/components/stat-group/stat-group.css

@@ -1,8 +1,11 @@
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 @layer cinder.components {
   .cinder-stat-group {
+    --cinder-stat-group-gap: var(--cinder-space-4, 1rem);
+    --cinder-stat-group-card-padding: var(--cinder-space-4, 1rem);
+    --cinder-stat-group-shared-cell-padding: var(--cinder-space-4, 1rem);
     display: grid;
-    gap: var(--cinder-space-4, 1rem);
+    gap: var(--cinder-stat-group-gap, var(--cinder-space-4, 1rem));
     /* Query the group's own inline size so fixed column counts can collapse when
        the group is narrow — even inside a wide viewport (RESPONSIVE-POLICY.md). */
     container-type: inline-size;
@@ -50,7 +53,7 @@
 
   /* variant: cards — each stat gets a card-style border, background, and shadow */
   .cinder-stat-group[data-cinder-variant='cards'] > .cinder-stat {
-    padding: var(--cinder-space-4, 1rem);
+    padding: var(--cinder-stat-group-card-padding, var(--cinder-space-4, 1rem));
     background: var(--cinder-surface-raised);
     border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-md, 0.5rem);
@@ -63,15 +66,15 @@
  * gap with the surface color, avoiding nth-child math for any column count.
  */
   .cinder-stat-group[data-cinder-variant='shared-borders'] {
+    --cinder-stat-group-gap: 1px;
     border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-md, 0.5rem);
     overflow: hidden;
     background: var(--cinder-border);
-    gap: 1px;
   }
 
   .cinder-stat-group[data-cinder-variant='shared-borders'] > .cinder-stat {
-    padding: var(--cinder-space-4, 1rem);
+    padding: var(--cinder-stat-group-shared-cell-padding, var(--cinder-space-4, 1rem));
     background: var(--cinder-surface-raised);
   }
 }

package/src/components/stat-group/stat-group.examples.json

@@ -21,6 +21,12 @@
       "description": "The `cards` variant renders each metric as a discrete bordered card, separating the tiles instead of laying them out edge-to-edge in a shared grid.",
       "code": "<script lang=\"ts\">\n  import { StatGroup } from '@lostgradient/cinder/stat-group';\n</script>\n\n<StatGroup label=\"This quarter\" columns={3} variant=\"cards\">\n  <StatGroup.Stat label=\"Projects\" value={42} />\n  <StatGroup.Stat label=\"Members\" value={18} />\n  <StatGroup.Stat label=\"Storage\" value=\"64 GB\" />\n</StatGroup>\n"
     },
+    {
+      "id": "compact-summary",
+      "title": "Compact summary strip",
+      "description": "Dense summaries can tune StatGroup spacing and Stat typography through public CSS variables.",
+      "code": "<script lang=\"ts\">\n  import { StatGroup } from '@lostgradient/cinder/stat-group';\n</script>\n\n<StatGroup\n  label=\"Workflow summary\"\n  columns={4}\n  variant=\"shared-borders\"\n  style=\"--cinder-stat-group-gap: 1px; --cinder-stat-group-shared-cell-padding: var(--cinder-space-2);\"\n>\n  <StatGroup.Stat\n    label=\"Events\"\n    value={128}\n    style=\"--cinder-stat-row-gap: 0; --cinder-stat-label-font-size: var(--cinder-text-xs); --cinder-stat-value-font-size: var(--cinder-text-lg); --cinder-stat-change-font-size: var(--cinder-text-xs);\"\n  />\n  <StatGroup.Stat\n    label=\"Matched\"\n    value={42}\n    style=\"--cinder-stat-row-gap: 0; --cinder-stat-label-font-size: var(--cinder-text-xs); --cinder-stat-value-font-size: var(--cinder-text-lg); --cinder-stat-change-font-size: var(--cinder-text-xs);\"\n  />\n  <StatGroup.Stat\n    label=\"Retries\"\n    value={3}\n    style=\"--cinder-stat-row-gap: 0; --cinder-stat-label-font-size: var(--cinder-text-xs); --cinder-stat-value-font-size: var(--cinder-text-lg); --cinder-stat-change-font-size: var(--cinder-text-xs);\"\n  />\n  <StatGroup.Stat\n    label=\"Latency\"\n    value=\"184 ms\"\n    style=\"--cinder-stat-row-gap: 0; --cinder-stat-label-font-size: var(--cinder-text-xs); --cinder-stat-value-font-size: var(--cinder-text-lg); --cinder-stat-change-font-size: var(--cinder-text-xs);\"\n  />\n</StatGroup>\n"
+    },
     {
       "id": "shared-borders-variant",
       "title": "Shared-borders variant",

package/src/components/stat-group/stat-group.schema.json

@@ -19,6 +19,10 @@
     "class": {
       "type": "string",
       "description": "Additional class names merged with `.cinder-stat-group`."
+    },
+    "style": {
+      "type": "string",
+      "description": "Inline style string applied to the `.cinder-stat-group` root."
     }
   },
   "additionalProperties": false,

package/src/components/stat-group/stat-group.schema.ts

@@ -24,6 +24,10 @@ const schema = {
       type: 'string',
       description: 'Additional class names merged with `.cinder-stat-group`.',
     },
+    style: {
+      type: 'string',
+      description: 'Inline style string applied to the `.cinder-stat-group` root.',
+    },
   },
   additionalProperties: false,
   metadata: {

package/src/components/stat-group/stat-group.types.ts

@@ -28,3 +28,31 @@ export type StatGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
   /** Additional class names merged with `.cinder-stat-group`. */
   class?: string;
 };
+
+/** Schema generator surface for StatGroup — excludes native attributes except supported styling hooks. */
+export interface StatGroupSchemaProps {
+  /**
+   * Optional accessible label for the whole stat set. When provided, the
+   * container becomes `role="group"` and uses this value as its accessible name.
+   */
+  label?: string;
+  /**
+   * Grid column count. `'auto'` uses auto-fit with minmax for responsive layout.
+   * @default 'auto'
+   */
+  columns?: StatGroupColumns;
+  /**
+   * Visual variant; surfaced as `data-cinder-variant` for CSS styling.
+   * - `'default'` — plain grid, no borders or backgrounds.
+   * - `'cards'` — each stat gets a card-style border and shadow.
+   * - `'shared-borders'` — single outer border with 1px gap dividers between stats.
+   * @default 'default'
+   */
+  variant?: StatGroupVariant;
+  /** Stat children, typically one or more `<Stat>` components. */
+  children: Snippet;
+  /** Additional class names merged with `.cinder-stat-group`. */
+  class?: string;
+  /** Inline style string applied to the `.cinder-stat-group` root. */
+  style?: string;
+}

package/src/components/stat-group/stat-group.variables.json

@@ -1 +1,5 @@
-[]
+[
+  "--cinder-stat-group-card-padding",
+  "--cinder-stat-group-gap",
+  "--cinder-stat-group-shared-cell-padding"
+]

package/src/components/stat-group/stat-group.variables.ts

@@ -1,3 +1,7 @@
-const variables: readonly string[] = [];
+const variables: readonly string[] = [
+  '--cinder-stat-group-card-padding',
+  '--cinder-stat-group-gap',
+  '--cinder-stat-group-shared-cell-padding',
+];
 
 export default variables;

package/src/index.ts

@@ -797,7 +797,11 @@ export type { SideNavigationGroupProps } from './components/side-navigation-grou
 export { default as SideNavigationItem } from './components/side-navigation-item/index.ts';
 export type { SideNavigationItemProps } from './components/side-navigation-item/index.ts';
 
-export { default as Sidebar } from './components/sidebar/index.ts';
+export {
+  SIDEBAR_MOBILE_BREAKPOINT,
+  SIDEBAR_MOBILE_MEDIA_QUERY,
+  default as Sidebar,
+} from './components/sidebar/index.ts';
 export type { SidebarProps } from './components/sidebar/index.ts';
 
 export { default as SortableList } from './components/sortable-list/index.ts';

package/src/styles/foundation.css

@@ -303,7 +303,8 @@
   .cinder-dropdown-item[data-disabled],
   .cinder-toggle:disabled,
   .cinder-segmented-control[aria-disabled='true'],
-  .cinder-segmented-control-option:disabled
+  .cinder-segmented-control-option:disabled,
+  .cinder-segmented-control-option[aria-disabled='true']
 ) {
   opacity: 0.6;
 }

package/dist/server/index.server-hfx487zj.js

@@ -1,42 +0,0 @@
-import {
-  strictStableContext
-} from "./index.server-bn02606y.js";
-import {
-  classNames
-} from "./index.server-z7nvkz8v.js";
-
-// src/components/accordion-item/accordion-item.svelte
-import * as $ from "svelte/internal/server";
-
-// src/components/accordion/accordion.context.ts
-var [getAccordionContext, setAccordionContext] = strictStableContext("@lostgradient/cinder/accordion/context", "AccordionItem must be rendered inside an Accordion");
-
-// src/components/accordion-item/accordion-item.svelte
-function Accordion_item($$renderer, $$props) {
-  $$renderer.component(($$renderer2) => {
-    let { id, title, disabled = false, class: className, children } = $$props;
-    const context = getAccordionContext();
-    const isExpanded = $.derived(() => context.expandedIds.includes(id));
-    const headerId = $.derived(() => `${id}-header`);
-    const panelId = $.derived(() => `${id}-panel`);
-    function handleClick() {
-      if (disabled)
-        return;
-      context.toggle(id);
-    }
-    $$renderer2.push(`<div${$.attr_class($.clsx(classNames("cinder-accordion-item", className)))}${$.attr("data-cinder-expanded", isExpanded() ? "" : undefined)}${$.attr("data-cinder-disabled", disabled ? "" : undefined)}><h3 class="cinder-accordion-item__heading"><button type="button"${$.attr("id", headerId())} class="cinder-accordion-item__trigger"${$.attr("aria-expanded", isExpanded())}${$.attr("aria-controls", panelId())}${$.attr("disabled", disabled, true)}><span class="cinder-accordion-item__title">${$.escape(title)}</span> <svg class="cinder-accordion-item__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"></path></svg></button></h3> `);
-    if (isExpanded()) {
-      $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<div${$.attr("id", panelId())} class="cinder-accordion-item__panel"><div class="cinder-accordion-item__panel-inner">`);
-      children($$renderer2);
-      $$renderer2.push(`<!----></div></div>`);
-    } else {
-      $$renderer2.push("<!--[-1-->");
-    }
-    $$renderer2.push(`<!--]--></div>`);
-  }, Accordion_item);
-}
-
-export { setAccordionContext, Accordion_item };
-
-//# debugId=A611BC101408464764756E2164756E21