@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/shortcut-hint/shortcut-hint.svelte

@@ -1,62 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category typography
-   * @status alpha
-   * @purpose Inline shortcut hint that renders a key combo via Kbd alongside an action label, with an accessible text representation not reliant on visual keycaps alone.
-   * @tag shortcut
-   * @tag inline
-   * @useWhen Showing a keyboard shortcut inline beside a label in a toolbar button, menu item, or tooltip.
-   * @useWhen Pairing with command-palette items to surface available shortcuts.
-   * @avoidWhen Displaying a full shortcut reference table — use keyboard-shortcuts instead.
-   * @related kbd, keyboard-shortcuts, tooltip
-   */
-  export type { ShortcutHintProps } from './shortcut-hint.types.ts';
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../utilities/class-names.ts';
-  import Kbd from '../kbd/kbd.svelte';
-  import type { ShortcutHintProps } from './shortcut-hint.types.ts';
-
-  let {
-    keys,
-    keysLabel,
-    children,
-    keysPosition = 'after',
-    class: customClassName,
-    ...rest
-  }: ShortcutHintProps = $props();
-
-  /**
-   * Build a screen-reader–friendly label for the key combo.
-   */
-  const resolvedKeysLabel = $derived(keysLabel ?? keys.join(' plus '));
-</script>
-
-<!--
-  The visual keycaps are aria-hidden so assistive technology never encounters the
-  raw Kbd glyphs; the spoken representation is a single cinder-sr-only text node
-  ("Ctrl plus S") — a more reliable strategy than aria-label on a generic span.
-  Keycaps are inlined (not a {#snippet}) to avoid a Svelte 5 + happy-dom snippet
-  ordering quirk when a snippet is the first child of an {#if} branch.
--->
-<span {...rest} class={classNames('cinder-shortcut-hint', customClassName)}>
-  {#if children && keysPosition === 'after'}
-    <span class="cinder-shortcut-hint__label">{@render children()}</span>
-  {/if}
-
-  <span class="cinder-shortcut-hint__keys" aria-hidden="true">
-    {#each keys as key, index (index)}
-      <Kbd label={key} size="sm" />
-      {#if index < keys.length - 1}
-        <span class="cinder-shortcut-hint__separator">+</span>
-      {/if}
-    {/each}
-  </span>
-  <span class="cinder-sr-only">{resolvedKeysLabel}</span>
-
-  {#if children && keysPosition === 'before'}
-    <span class="cinder-shortcut-hint__label">{@render children()}</span>
-  {/if}
-</span>

package/src/components/shortcut-hint/shortcut-hint.types.ts

@@ -1,35 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-
-/** Props for the ShortcutHint component. */
-export type ShortcutHintProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'children'> & {
-  /** The key sequence to display (e.g. ["Ctrl", "S"] or ["Space"]). */
-  keys: string[];
-  /** Optional accessible label for the key combo. Defaults to joining keys with " plus ". */
-  keysLabel?: string;
-  /** The action or label to render alongside the key combo. */
-  children?: Snippet;
-  /** Whether to place the keys before or after the children. @default "after" */
-  keysPosition?: 'before' | 'after';
-  /** Additional class names merged with `.cinder-shortcut-hint`. */
-  class?: string;
-};
-
-/**
- * Cinder-specific props for ShortcutHint, used by the schema generator.
- */
-export interface ShortcutHintSchemaProps {
-  /** The key sequence to display. */
-  keys: string[];
-  /** Accessible label for the key combo. */
-  keysLabel?: string;
-  /**
-   * Position of keys relative to children.
-   * @default "after"
-   */
-  keysPosition?: 'before' | 'after';
-  /** Additional class names merged with `.cinder-shortcut-hint`. */
-  class?: string;
-  /** The action label rendered beside the keys. */
-  children?: Snippet;
-}

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

@@ -1,19 +0,0 @@
-import SideNavigationGroup from '../side-navigation-group/side-navigation-group.svelte';
-import SideNavigationItem from '../side-navigation-item/side-navigation-item.svelte';
-import './side-navigation.css';
-import SideNavigationRoot from './side-navigation.svelte';
-
-/**
- * `SideNavigation` is the parent compound component and a namespace exposing
- * the compose-only `SideNavigation.Group` and `SideNavigation.Item` leaves.
- * The leaves remain importable individually via `@lostgradient/cinder/side-navigation-group`
- * and `@lostgradient/cinder/side-navigation-item`.
- */
-const SideNavigation = Object.assign(SideNavigationRoot, {
-  Group: SideNavigationGroup,
-  Item: SideNavigationItem,
-});
-
-export default SideNavigation;
-export type { SideNavigationProps } from './side-navigation.types.ts';
-export { SideNavigation };

package/src/components/side-navigation/side-navigation.svelte

@@ -1,48 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category navigation
-   * @status stable
-   * @purpose Vertical navigation column that hosts grouped side-navigation-item entries with a required accessible label for the landmark.
-   * @tag navigation
-   * @tag sidebar
-   * @useWhen Building a tall, dense application sidebar with many sections and nested groups.
-   * @useWhen Pairing with sidebar so the column collapses responsively on narrow viewports.
-   * @avoidWhen Anchoring primary navigation across the top of the page — use navigation-bar instead.
-   * @avoidWhen Rendering a single flat horizontal nav row — use navigation-bar instead.
-   * @related side-navigation-item, side-navigation-group, navigation-bar, sidebar
-   */
-  export type { SideNavigationProps } from './side-navigation.types.ts';
-</script>
-
-<script lang="ts">
-  import type { SideNavigationProps } from './side-navigation.types.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-
-  type SideNavigationRuntimeProps = SideNavigationProps & {
-    'aria-label'?: unknown;
-    'aria-labelledby'?: unknown;
-  };
-
-  let {
-    ariaLabel,
-    class: className,
-    children,
-    'aria-label': _ariaLabelAttribute,
-    'aria-labelledby': _ariaLabelledbyAttribute,
-    ...rest
-  }: SideNavigationRuntimeProps = $props();
-
-  const validatedLabel = $derived.by(() => {
-    if (ariaLabel.trim() === '') {
-      throw new Error('SideNavigation requires a non-empty ariaLabel.');
-    }
-    return ariaLabel;
-  });
-</script>
-
-<nav class={classNames('cinder-side-navigation', className)} {...rest} aria-label={validatedLabel}>
-  <ul class="cinder-side-navigation__list">
-    {@render children()}
-  </ul>
-</nav>

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

@@ -1,14 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-/** Props for the SideNavigation component. */
-export type SideNavigationProps = Omit<
-  HTMLAttributes<HTMLElement>,
-  'aria-label' | 'aria-labelledby'
-> & {
-  /** 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;
-  /** Must be <li> elements containing NavigationItem and/or SideNavigationGroup. */
-  children: Snippet;
-};

package/src/components/side-navigation-group/_contains-active-harness.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-  import SideNavigationGroup from './side-navigation-group.svelte';
-  import SideNavigationItem from '../side-navigation-item/side-navigation-item.svelte';
-
-  // Test-only harness: renders real SideNavigationItem children inside a
-  // SideNavigationGroup so the Svelte context bridge under test is exercised.
-  // Each item's active state is driven by props so tests can rerender to
-  // toggle them.
-  let {
-    firstActive = false,
-    secondActive = false,
-    showSecond = true,
-    nestedActive = false,
-    showNested = false,
-  }: {
-    firstActive?: boolean;
-    secondActive?: boolean;
-    showSecond?: boolean;
-    nestedActive?: boolean;
-    showNested?: boolean;
-  } = $props();
-</script>
-
-<ul>
-  <SideNavigationGroup label="Settings">
-    <SideNavigationItem href="/one" active={firstActive}>One</SideNavigationItem>
-    {#if showSecond}
-      <SideNavigationItem href="/two" active={secondActive}>Two</SideNavigationItem>
-    {/if}
-    {#if showNested}
-      <SideNavigationGroup label="Nested">
-        <SideNavigationItem href="/nested" active={nestedActive}>Nested</SideNavigationItem>
-      </SideNavigationGroup>
-    {/if}
-  </SideNavigationGroup>
-</ul>

package/src/components/side-navigation-group/index.ts

@@ -1,6 +0,0 @@
-import './side-navigation-group.css';
-import SideNavigationGroup from './side-navigation-group.svelte';
-
-export default SideNavigationGroup;
-export type { SideNavigationGroupProps } from './side-navigation-group.types.ts';
-export { SideNavigationGroup };

package/src/components/side-navigation-group/side-navigation-group.svelte

@@ -1,143 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category navigation
-   * @status stable
-   * @purpose Collapsible labelled bucket inside side-navigation that groups related side-navigation-item entries under a single heading.
-   * @tag navigation
-   * @tag grouping
-   * @useWhen Splitting a long side-navigation column into clearly named sections.
-   * @useWhen Letting users collapse rarely used groups to reduce visual noise in the sidebar.
-   * @avoidWhen Used outside a side-navigation ancestor — it expects that landmark for context.
-   * @avoidWhen Hosting a single flat list with no grouping — place side-navigation-item entries directly.
-   * @related side-navigation, side-navigation-item
-   */
-  export type { SideNavigationGroupProps } from './side-navigation-group.types.ts';
-</script>
-
-<script lang="ts">
-  import type { SideNavigationGroupProps } from './side-navigation-group.types.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import {
-    setSideNavigationGroupContext,
-    tryGetSideNavigationGroupContext,
-    type SideNavigationGroupRegistration,
-  } from '../_internal/side-navigation-group-context.ts';
-
-  let {
-    label,
-    id: idProp,
-    expanded = $bindable(true),
-    disabled = false,
-    icon,
-    badge,
-    class: className,
-    children,
-    ...rest
-  }: SideNavigationGroupProps = $props();
-
-  const generatedId = $props.id();
-  const id = $derived(idProp ?? generatedId);
-
-  const validatedLabel = $derived.by(() => {
-    if (label.trim() === '') {
-      throw new Error('SideNavigationGroup requires a non-empty label.');
-    }
-    return label;
-  });
-  const headerId = $derived(`${id}-trigger`);
-  const panelId = $derived(`${id}-panel`);
-
-  function toggle(): void {
-    if (disabled) return;
-    expanded = !expanded;
-  }
-
-  // Bubble active state from descendant items up to the trigger. The group is
-  // "contains-active" when any registered child reports itself active.
-  let activeCount = $state(0);
-  const containsActive = $derived(activeCount > 0);
-
-  function register(): SideNavigationGroupRegistration {
-    let wasActive = false;
-    let unregistered = false;
-    return {
-      setActive(active: boolean) {
-        if (unregistered || active === wasActive) return;
-        wasActive = active;
-        activeCount += active ? 1 : -1;
-      },
-      unregister() {
-        if (unregistered) return; // idempotent — never double-decrement
-        unregistered = true;
-        if (wasActive) activeCount -= 1;
-      },
-    };
-  }
-
-  const parentGroup = tryGetSideNavigationGroupContext();
-  let parentHandle: SideNavigationGroupRegistration | undefined;
-
-  $effect(() => {
-    if (!parentGroup) return;
-    parentHandle = parentGroup.register();
-    return () => {
-      parentHandle?.unregister();
-      parentHandle = undefined;
-    };
-  });
-
-  $effect(() => {
-    parentHandle?.setActive(containsActive);
-  });
-
-  setSideNavigationGroupContext({ register });
-</script>
-
-<li
-  {...rest}
-  {id}
-  class={classNames('cinder-side-navigation-group', className)}
-  data-cinder-expanded={expanded ? '' : undefined}
-  data-cinder-contains-active={containsActive ? '' : undefined}
->
-  <button
-    type="button"
-    id={headerId}
-    class="cinder-side-navigation-group__trigger"
-    aria-expanded={expanded}
-    aria-controls={panelId}
-    {disabled}
-    onclick={toggle}
-  >
-    {#if icon}
-      <span class="cinder-side-navigation-group__icon" aria-hidden="true">{@render icon()}</span>
-    {/if}
-    <span class="cinder-side-navigation-group__label">{validatedLabel}</span>
-    {#if badge}
-      <span class="cinder-side-navigation-group__badge">{@render badge()}</span>
-    {/if}
-    <svg
-      class="cinder-side-navigation-group__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"
-      />
-    </svg>
-  </button>
-  <ul
-    id={panelId}
-    class="cinder-side-navigation-group__panel"
-    aria-labelledby={headerId}
-    hidden={!expanded}
-  >
-    {@render children()}
-  </ul>
-</li>

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

@@ -1,21 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLLiAttributes } from 'svelte/elements';
-/** Props for the SideNavigationGroup component. */
-export type SideNavigationGroupProps = Omit<HTMLLiAttributes, 'id'> & {
-  /** Visible section header label. */
-  label: string;
-  /** Optional stable id for the root <li>. Trigger uses `${id}-trigger`, panel uses `${id}-panel`. If omitted, generated via useId. */
-  id?: string;
-  /** Whether the group is expanded. Bindable. Default: true. */
-  expanded?: boolean;
-  /** When true, the disclosure button is disabled. Default: false. */
-  disabled?: boolean;
-  /** Optional leading icon rendered inside the header button before the label. */
-  icon?: Snippet;
-  /** Optional trailing badge rendered inside the header button after the label, before the chevron. */
-  badge?: Snippet;
-  /** Additional CSS class merged with `.cinder-side-navigation-group`. */
-  class?: string;
-  /** Must be <li>-wrapped NavigationItems (or SideNavigationItems) rendered inside the disclosed <ul>. */
-  children: Snippet;
-};

package/src/components/side-navigation-item/index.ts

@@ -1,5 +0,0 @@
-import SideNavigationItem from './side-navigation-item.svelte';
-
-export default SideNavigationItem;
-export type { SideNavigationItemProps } from './side-navigation-item.types.ts';
-export { SideNavigationItem };

package/src/components/side-navigation-item/side-navigation-item.svelte

@@ -1,61 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category navigation
-   * @status stable
-   * @purpose Single list-wrapped navigation entry tuned for the vertical layout of side-navigation, delegating rendering to navigation-item.
-   * @tag navigation
-   * @tag sidebar
-   * @useWhen Rendering one entry inside a side-navigation column or side-navigation-group.
-   * @useWhen Keeping list semantics correct so screen readers announce sidebar entry counts.
-   * @avoidWhen Placing entries in a horizontal navigation-bar — use navigation-item directly.
-   * @avoidWhen Rendering outside a side-navigation list — use navigation-item without the list wrapper.
-   * @related side-navigation, side-navigation-group, navigation-item
-   */
-  export type { SideNavigationItemProps } from './side-navigation-item.types.ts';
-</script>
-
-<script lang="ts">
-  import type { SideNavigationItemProps } from './side-navigation-item.types.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import NavigationItem from '../navigation-item/navigation-item.svelte';
-  import {
-    tryGetSideNavigationGroupContext,
-    type SideNavigationGroupRegistration,
-  } from '../_internal/side-navigation-group-context.ts';
-
-  const props: SideNavigationItemProps = $props();
-  const active = $derived(props.active ?? false);
-  // Forward everything except listItemClass to NavigationItem.
-  const navigationItemProps = $derived.by(() => {
-    const { listItemClass: _omit, ...rest } = props;
-    return rest;
-  });
-
-  // When this item sits inside a SideNavigationGroup, report its active state
-  // so the group can light up its trigger. Outside a group the context is
-  // undefined and these effects are no-ops.
-  const group = tryGetSideNavigationGroupContext();
-  let handle: SideNavigationGroupRegistration | undefined;
-  // One-time registration: no reactive reads, so it runs exactly once at mount
-  // and cleans up once at unmount. Keeping it free of `active` avoids coupling
-  // registration to the group's counter writes (which would loop).
-  $effect(() => {
-    if (!group) return;
-    handle = group.register();
-    return () => {
-      handle?.unregister();
-      handle = undefined;
-    };
-  });
-  // Ongoing active reporting. Runs on mount (reporting the initial state) and on
-  // every `active` change. `handle` is populated by the registration effect,
-  // which Svelte runs first (declaration order) in the same mount flush.
-  $effect(() => {
-    handle?.setActive(active);
-  });
-</script>
-
-<li class={classNames('cinder-side-navigation__item', props.listItemClass)}>
-  <NavigationItem {...navigationItemProps} variant="vertical" />
-</li>

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

@@ -1,22 +0,0 @@
-import type { NavigationItemProps } from '../navigation-item/navigation-item.types.ts';
-
-/**
- * Distributive `Omit` — preserves the link/button arm discrimination on
- * `NavigationItemProps`. Plain `Omit<NavigationItemProps, 'variant'>` would
- * collapse the union into a single intersection and let consumers pass any
- * extra property without TypeScript complaining; the `T extends unknown`
- * trigger fans the Omit across each arm individually.
- */
-type DistributiveOmit<T, K extends keyof never> = T extends unknown ? Omit<T, K> : never;
-
-/**
- * Props for the SideNavigationItem component.
- *
- * Forwards all NavigationItem props except `variant` — side navigation always
- * renders the vertical variant so consumers cannot accidentally introduce a
- * tombstone (horizontal-radius) focus ring inside a sidebar list.
- */
-export type SideNavigationItemProps = DistributiveOmit<NavigationItemProps, 'variant'> & {
-  /** Class merged onto the outer <li>. */
-  listItemClass?: string;
-};

package/src/components/sidebar/index.ts

@@ -1,6 +0,0 @@
-import './sidebar.css';
-import Sidebar from './sidebar.svelte';
-
-export default Sidebar;
-export type { SidebarProps } from './sidebar.types.ts';
-export { Sidebar };

package/src/components/sidebar/sidebar.svelte

@@ -1,136 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category layout
-   * @status stable
-   * @purpose Responsive layout shell that anchors a collapsible column beside main content and swaps to a drawer below a configurable breakpoint.
-   * @tag layout
-   * @tag responsive
-   * @useWhen Wrapping the page chrome so a navigation column can collapse and become a mobile drawer automatically.
-   * @useWhen Sharing collapsed state between a side-navigation column and the rest of the app shell via context.
-   * @avoidWhen Building the page body itself rather than the surrounding shell — use a hand-rolled page scaffold instead.
-   * @avoidWhen Rendering navigation entries directly — place side-navigation inside the sidebar column.
-   * @related side-navigation, drawer
-   */
-  export type { SidebarProps } from './sidebar.types.ts';
-</script>
-
-<script lang="ts">
-  import type { SidebarProps } from './sidebar.types.ts';
-  import { MediaQuery } from 'svelte/reactivity';
-
-  import { setSidebarContext, type SidebarContextValue } from '../../_internal/sidebar-context.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import Drawer from '../drawer/drawer.svelte';
-
-  type SidebarRuntimeProps = SidebarProps & {
-    'aria-label'?: unknown;
-    'aria-labelledby'?: unknown;
-  };
-
-  let {
-    id: sidebarId,
-    collapsed = $bindable(false),
-    label = 'Sidebar',
-    class: className,
-    brand: brandSnippet,
-    navigation: navigationSnippet,
-    footer: footerSnippet,
-    'aria-label': _ariaLabelAttribute,
-    'aria-labelledby': _ariaLabelledbyAttribute,
-    ...rest
-  }: SidebarRuntimeProps = $props();
-
-  const validatedLabel = $derived.by(() => {
-    if (label.trim() === '') {
-      throw new Error('Sidebar requires a non-empty label.');
-    }
-    return label;
-  });
-
-  // The inner <nav> landmark gets a distinct accessible name so the outer
-  // 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.
-  const mobile = new MediaQuery('(max-width: 47.99rem)', false);
-
-  const context: SidebarContextValue = {
-    get collapsed() {
-      return collapsed;
-    },
-  };
-  setSidebarContext(context);
-</script>
-
-{#if mobile.current}
-  <Drawer
-    {...rest}
-    bind:open={
-      () => !collapsed,
-      (value: boolean) => {
-        collapsed = !value;
-      }
-    }
-    side="left"
-    size="md"
-    title={validatedLabel}
-    id={sidebarId}
-  >
-    <div class={classNames('cinder-sidebar', 'cinder-sidebar--mobile', className)}>
-      {#if brandSnippet}
-        <div class="cinder-sidebar__brand">
-          {@render brandSnippet()}
-        </div>
-      {/if}
-
-      {#if navigationSnippet}
-        <!-- Guard the entire <nav> landmark, not just its contents. An empty <nav>
-             is an accessibility problem (screen readers announce a navigation landmark
-             with no destinations). navigation is optional so a sidebar can be used as
-             app chrome without a nav list. -->
-        <nav class="cinder-sidebar__nav" aria-label={navigationLabel}>
-          {@render navigationSnippet()}
-        </nav>
-      {/if}
-
-      {#if footerSnippet}
-        <div class="cinder-sidebar__footer cinder-sidebar__footer--mobile">
-          {@render footerSnippet()}
-        </div>
-      {/if}
-    </div>
-  </Drawer>
-{:else}
-  <aside
-    id={sidebarId}
-    {...rest}
-    class={classNames('cinder-sidebar', className)}
-    aria-label={validatedLabel}
-    data-cinder-collapsed={collapsed ? '' : undefined}
-  >
-    {#if brandSnippet}
-      <div class="cinder-sidebar__brand">
-        {@render brandSnippet()}
-      </div>
-    {/if}
-
-    {#if navigationSnippet}
-      <!-- Same guard: keep the <nav> landmark out of the DOM when navigation is absent
-           so screen readers don't announce an empty navigation region. -->
-      <nav class="cinder-sidebar__nav" aria-label={navigationLabel}>
-        {@render navigationSnippet()}
-      </nav>
-    {/if}
-
-    {#if footerSnippet}
-      <div class="cinder-sidebar__footer">
-        {@render footerSnippet()}
-      </div>
-    {/if}
-  </aside>
-{/if}

package/src/components/sidebar/sidebar.types.ts

@@ -1,36 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-/** Props for the Sidebar component. */
-export type SidebarProps = Omit<
-  HTMLAttributes<HTMLElement>,
-  'aria-label' | 'aria-labelledby' | 'class' | 'children'
-> & {
-  /**
-   * Whether the sidebar is collapsed. Bindable via `bind:collapsed`. Default `false`.
-   *
-   * On desktop (>= md breakpoint) `collapsed=true` switches the sidebar to
-   * icon-only mode. Below the md breakpoint the sidebar renders inside a
-   * `<Drawer>` and `collapsed=true` means the drawer is closed.
-   */
-  collapsed?: boolean;
-  /**
-   * Accessible name for the outer landmark and the mobile drawer. Required —
-   * defaults to `'Sidebar'` for convenience but must be unique per page. The
-   * inner `<nav>` landmark derives its own accessible name from this value
-   * by appending `' navigation'` so screen readers can distinguish the
-   * outer complementary region from the inner navigation region.
-   */
-  label?: string;
-  /** Additional CSS class merged with `.cinder-sidebar`. */
-  class?: string;
-  /** Optional branding region rendered above the navigation. */
-  brand?: Snippet;
-  /**
-   * Navigation region. Typically a `<SideNavigation>` subtree. Optional — when
-   * omitted, no `<nav>` landmark is rendered (so the sidebar can serve as app chrome
-   * without a navigation list, and an empty `<nav>` isn't announced to screen readers).
-   */
-  navigation?: Snippet;
-  /** Optional footer region (e.g. user account, sign-out). */
-  footer?: Snippet;
-};

package/src/components/skeleton/index.ts

@@ -1,6 +0,0 @@
-import './skeleton.css';
-import Skeleton from './skeleton.svelte';
-
-export default Skeleton;
-export type { SkeletonProps } from './skeleton.types.ts';
-export { Skeleton };