@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/stats-section/stats-section.types.ts

@@ -1,61 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ContainerMaxWidth } from '../container/container.types.ts';
-import type { StatGroupColumns, StatGroupVariant } from '../stat-group/stat-group.types.ts';
-import type { StatChangeDirection } from '../stat/stat.types.ts';
-
-/** @schemaObject */
-export type StatsSectionItem = {
-  /** Metric label text. */
-  label: string;
-  /** Metric value. */
-  value: string | number;
-  /** Optional change value, e.g. "+12%". */
-  changeValue?: string;
-  /** Direction for change indicator. */
-  changeDirection?: StatChangeDirection;
-  /** Optional descriptor for change value. */
-  changeDescription?: string;
-};
-
-/** Props for the StatsSection component. */
-export type StatsSectionProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
-  /** Wrapper element tag. @default "section" */
-  as?: 'section' | 'div';
-  /** Optional section heading text. */
-  title?: string;
-  /** Optional section description text. */
-  description?: string;
-  /** Stats to render via StatGroup + Stat. */
-  stats: StatsSectionItem[];
-  /** Columns forwarded to StatGroup. @default "auto" */
-  columns?: StatGroupColumns;
-  /** Variant forwarded to StatGroup. @default "cards" */
-  variant?: StatGroupVariant;
-  /** Accessible label forwarded to StatGroup. @default "Key metrics" */
-  label?: string;
-  /** Max width token forwarded to Container. @default "wide" */
-  maxWidth?: ContainerMaxWidth;
-  /** Custom class merged with `.cinder-stats-section`. */
-  class?: string;
-};
-
-export interface StatsSectionSchemaProps {
-  /** Wrapper element tag. @default "section" */
-  as?: 'section' | 'div';
-  /** Optional section heading text. */
-  title?: string;
-  /** Optional section description text. */
-  description?: string;
-  /** Stats to render via StatGroup + Stat. */
-  stats: StatsSectionItem[];
-  /** Columns forwarded to StatGroup. @default "auto" */
-  columns?: StatGroupColumns;
-  /** Variant forwarded to StatGroup. @default "cards" */
-  variant?: StatGroupVariant;
-  /** Accessible label forwarded to StatGroup. @default "Key metrics" */
-  label?: string;
-  /** Max width token forwarded to Container. @default "wide" */
-  maxWidth?: ContainerMaxWidth;
-  /** Custom class merged with `.cinder-stats-section`. */
-  class?: string;
-}

package/src/components/status-dot/index.ts

@@ -1,11 +0,0 @@
-import './status-dot.css';
-import StatusDot from './status-dot.svelte';
-
-export default StatusDot;
-export type {
-  StatusDotConnectionState,
-  StatusDotProps,
-  StatusDotSize,
-  StatusDotStatus,
-} from './status-dot.types.ts';
-export { StatusDot };

package/src/components/status-dot/status-dot.svelte

@@ -1,112 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category feedback
-   * @status stable
-   * @purpose Colored dot indicator that communicates static entity state or live realtime connection state with an accessible text label.
-   * @tag connection
-   * @tag feedback
-   * @tag realtime
-   * @tag status
-   * @useWhen Indicating the current state of a list row, user, deployment, or other entity alongside its name.
-   * @useWhen Communicating status compactly when many indicators appear together without triggering live-region announcements.
-   * @useWhen Surfacing whether a realtime channel is connected, connecting, disconnected, or errored on a dashboard or app chrome.
-   * @useWhen Giving operators an at-a-glance health signal for a long-lived transport.
-   * @avoidWhen Counting items or showing a numeric value — use badge instead.
-   * @avoidWhen Announcing a transient status change — use toast-region or alert so assistive tech reads it.
-   * @related badge
-   */
-  export type { StatusDotProps, StatusDotSize, StatusDotStatus } from './status-dot.types.ts';
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../utilities/class-names.ts';
-  import type {
-    StatusDotConnectionState,
-    StatusDotProps,
-    StatusDotStatus,
-  } from './status-dot.types.ts';
-
-  const connectionStatusMap: Record<StatusDotConnectionState, StatusDotStatus> = {
-    connected: 'online',
-    connecting: 'warning',
-    disconnected: 'offline',
-    error: 'danger',
-  };
-
-  const connectionLabels: Record<StatusDotConnectionState, string> = {
-    connected: 'Connected',
-    connecting: 'Connecting',
-    disconnected: 'Disconnected',
-    error: 'Error',
-  };
-
-  let {
-    status,
-    connectionState,
-    label,
-    live,
-    showLabel = true,
-    size = 'md',
-    class: className,
-    'aria-label': ariaLabel,
-    ...rest
-  }: StatusDotProps = $props();
-
-  const normalizedAriaLabel = $derived(ariaLabel?.trim() ? ariaLabel.trim() : undefined);
-  const resolvedStatus = $derived(
-    status ?? (connectionState === undefined ? 'neutral' : connectionStatusMap[connectionState]),
-  );
-  const resolvedLive = $derived(live ?? connectionState !== undefined);
-  const normalizedLabel = $derived(
-    label?.trim()
-      ? label.trim()
-      : connectionState === undefined
-        ? undefined
-        : connectionLabels[connectionState],
-  );
-  const hasVisibleLabel = $derived(showLabel && normalizedLabel !== undefined);
-
-  // `role="img"` needs an author-provided name. Blank labels are treated as
-  // absent so status is never communicated by color alone.
-  const resolvedAriaLabel = $derived(normalizedAriaLabel ?? normalizedLabel ?? resolvedStatus);
-  const visibleLabelIsLiveDuplicate = $derived(
-    resolvedLive && normalizedLabel !== undefined && resolvedAriaLabel !== normalizedLabel,
-  );
-  const needsHiddenLiveLabel = $derived(
-    resolvedLive && (!hasVisibleLabel || visibleLabelIsLiveDuplicate),
-  );
-</script>
-
-<!--
-  `role="img"` (not `role="status"`) because StatusDot is a static decorative
-  indicator that can appear many times in a single view (e.g. one per row in a
-  list). `role="status"` is an ARIA polite live region: when injected into an
-  already-rendered DOM (paginated tables, virtualized lists) it can cause
-  screen readers to announce each dot as it mounts. `role="img"` declares the
-  element as a graphic with an accessible name supplied via `aria-label`,
-  which is the semantically correct choice for a non-changing visual state
-  badge.
--->
-<span
-  {...rest}
-  class={classNames('cinder-status-dot', className)}
-  data-cinder-status={resolvedStatus}
-  data-cinder-state={connectionState}
-  data-cinder-size={size}
-  role={resolvedLive ? 'status' : 'img'}
-  aria-live={resolvedLive ? 'polite' : undefined}
-  aria-atomic={resolvedLive ? 'true' : undefined}
-  aria-label={resolvedLive ? undefined : resolvedAriaLabel}
->
-  <span class="cinder-status-dot__indicator" aria-hidden="true"></span>
-  {#if hasVisibleLabel}
-    <span
-      class="cinder-status-dot__label"
-      aria-hidden={visibleLabelIsLiveDuplicate ? 'true' : undefined}>{normalizedLabel}</span
-    >
-  {/if}
-  {#if needsHiddenLiveLabel}
-    <span class="cinder-sr-only">{resolvedAriaLabel}</span>
-  {/if}
-</span>

package/src/components/status-dot/status-dot.types.ts

@@ -1,74 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-
-/**
- * Semantic status values understood by StatusDot.
- *
- * The string values are stamped onto the root as `data-cinder-status` and
- * drive color exclusively via CSS — there are no hard-coded color classes
- * on the component. The token mapping (e.g. `online` → `--cinder-success`,
- * `danger` → `--cinder-danger`) lives in `status-dot.css` so consumers can
- * theme without forking the component.
- *
- * - `success` maps to `--cinder-success` (same hue as `online`).
- * - `accent` maps to `--cinder-accent`.
- *
- * Exported so host components (e.g. `stacked-list-item.svelte`) can type
- * their own `status` prop against this union rather than restating it.
- */
-export type StatusDotStatus =
-  | 'online'
-  | 'offline'
-  | 'warning'
-  | 'danger'
-  | 'pending'
-  | 'neutral'
-  | 'success'
-  | 'accent';
-
-export type StatusDotSize = 'sm' | 'md';
-
-/** Realtime connection states that StatusDot can render as a live-region preset. */
-export type StatusDotConnectionState = 'connected' | 'connecting' | 'disconnected' | 'error';
-
-/**
- * Props for StatusDot.
- *
- * The component manages the accessible name itself so the status is never
- * communicated by color alone (WCAG 1.4.1): the visible label text wins,
- * then a hidden but provided `label`, then the raw `status` token. A
- * consumer-supplied `aria-label` always takes priority over the automatic
- * fallback.
- */
-export type StatusDotProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
-  /** Semantic status. Drives color via `data-cinder-status`; defaults to a neutral dot or derives from `connectionState`. */
-  status?: StatusDotStatus;
-  /** Realtime connection preset. Sets status, default label, and live-region semantics. */
-  connectionState?: StatusDotConnectionState;
-  /** Optional human label. Rendered visibly when `showLabel` is true; used as the accessible name either way. */
-  label?: string;
-  /** Use role="status" with polite live-region attributes. Defaults true when connectionState is provided. */
-  live?: boolean;
-  /** Whether to render the visible label. Default `true`. */
-  showLabel?: boolean;
-  /** Dot size. Default `'md'`. */
-  size?: StatusDotSize;
-  /** Extra classes appended to the root element. */
-  class?: string;
-};
-
-export interface StatusDotSchemaProps {
-  /** Semantic status. Drives color via `data-cinder-status`; defaults to a neutral dot or derives from `connectionState`. `success` maps to `--cinder-success`; `accent` maps to `--cinder-accent`. */
-  status?: StatusDotStatus;
-  /** Realtime connection preset. Sets status, default label, and live-region semantics. */
-  connectionState?: StatusDotConnectionState;
-  /** Optional human label. Rendered visibly when `showLabel` is true; used as the accessible name either way. */
-  label?: string;
-  /** Whether to render the visible label. @default true */
-  showLabel?: boolean;
-  /** Use role="status" with polite live-region attributes. Defaults true when connectionState is provided. */
-  live?: boolean;
-  /** Dot size. @default "md" */
-  size?: StatusDotSize;
-  /** Extra classes appended to the root element. */
-  class?: string;
-}

package/src/components/steps/index.ts

@@ -1,6 +0,0 @@
-import './steps.css';
-import Steps from './steps.svelte';
-
-export default Steps;
-export type { StepItem, StepsOrientation, StepsProps } from './steps.types.ts';
-export { Steps };

package/src/components/steps/steps.svelte

@@ -1,125 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category navigation
-   * @status stable
-   * @purpose Ordered progress indicator that visualizes a fixed sequence of steps with completed, current, and upcoming states.
-   * @tag navigation
-   * @tag progress
-   * @useWhen Walking the user through a multi-step wizard or checkout flow with strict ordering.
-   * @useWhen Showing how far the user has advanced through a known number of stages.
-   * @avoidWhen Switching between independent peer views with no order — use tabs instead.
-   * @avoidWhen Showing ancestor hierarchy of the current page — use breadcrumbs instead.
-   * @related tabs, breadcrumbs, pagination
-   */
-  export type { StepItem, StepsOrientation, StepsProps } from './steps.types.ts';
-</script>
-
-<script lang="ts">
-  import type { StepsProps } from './steps.types.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import Check from 'lucide-svelte/icons/check';
-
-  let {
-    steps,
-    currentStep,
-    orientation = 'horizontal',
-    label = 'Progress',
-    completedLabel = 'Completed',
-    class: className,
-  }: StepsProps = $props();
-
-  const clampedCurrent = $derived(
-    steps.length === 0 ? undefined : Math.max(0, Math.min(steps.length, currentStep)),
-  );
-
-  type StepState = 'complete' | 'current' | 'upcoming';
-
-  const stepStates = $derived<StepState[]>(
-    steps.map((_, index) => {
-      if (clampedCurrent === undefined) return 'upcoming';
-      if (index < clampedCurrent) return 'complete';
-      if (index === clampedCurrent) return 'current';
-      return 'upcoming';
-    }),
-  );
-</script>
-
-<nav
-  class={classNames('cinder-steps', className)}
-  aria-label={label}
-  data-cinder-orientation={orientation}
->
-  <ol class="cinder-steps__list">
-    {#each steps as step, index (step.id)}
-      {@const state = stepStates[index]}
-      {@const isCurrent = state === 'current'}
-      {@const isComplete = state === 'complete'}
-      {@const hasHref = step.href !== undefined}
-      {@const isInteractive = hasHref || step.onclick !== undefined}
-      {@const stepLabel = step.label}
-      {@const stepDescription = step.description}
-      <li
-        class="cinder-steps__item"
-        data-cinder-state={state}
-        aria-current={isCurrent && !isInteractive ? 'step' : undefined}
-      >
-        <span class="cinder-steps__marker" aria-hidden="true">
-          {#if isComplete}
-            <Check class="cinder-steps__check" />
-          {:else}
-            <span class="cinder-steps__index">{index + 1}</span>
-          {/if}
-        </span>
-        {#if hasHref}
-          <a
-            class="cinder-steps__interactive cinder-steps__body"
-            href={step.href}
-            onclick={step.onclick}
-            aria-current={isCurrent ? 'step' : undefined}
-          >
-            {@render stepBody(stepLabel, stepDescription, isComplete, completedLabel)}
-          </a>
-        {:else if step.onclick}
-          <button
-            type="button"
-            class="cinder-steps__interactive cinder-steps__body"
-            onclick={step.onclick}
-            aria-current={isCurrent ? 'step' : undefined}
-          >
-            {@render stepBody(stepLabel, stepDescription, isComplete, completedLabel)}
-          </button>
-        {:else}
-          <span class="cinder-steps__body">
-            {@render stepBody(stepLabel, stepDescription, isComplete, completedLabel)}
-          </span>
-        {/if}
-        {#if index < steps.length - 1}
-          <span
-            class="cinder-steps__connector"
-            data-cinder-state={isComplete ? 'complete' : 'upcoming'}
-            aria-hidden="true"
-          ></span>
-        {/if}
-      </li>
-    {/each}
-  </ol>
-</nav>
-
-{#snippet stepBody(
-  bodyLabel: string,
-  bodyDescription: string | undefined,
-  bodyIsComplete: boolean,
-  bodyCompletedLabel: string,
-)}
-  <span class="cinder-steps__body-content">
-    {#if bodyIsComplete}
-      <span class="cinder-steps__sr-only">{bodyCompletedLabel}</span>
-      <span class="cinder-steps__sr-only-separator"> </span>
-    {/if}
-    <span class="cinder-steps__label">{bodyLabel}</span>
-    {#if bodyDescription}
-      <span class="cinder-steps__description">{bodyDescription}</span>
-    {/if}
-  </span>
-{/snippet}

package/src/components/steps/steps.types.ts

@@ -1,42 +0,0 @@
-export type StepsOrientation = 'horizontal' | 'vertical';
-export type StepItem = {
-  /** Stable identifier used as the keyed-each key. Must be unique. */
-  id: string;
-  /** Visible label for the step. */
-  label: string;
-  /** Optional secondary text shown beneath the label. */
-  description?: string;
-  /**
-   * When set, the step body renders as a link (`<a>`) to this href. The marker
-   * and connector stay decorative; only the body (label + description) is the
-   * interactive target.
-   */
-  href?: string;
-  /**
-   * When set, the step body renders as a button invoking this callback. When
-   * combined with `href`, the body renders as a link that also runs the
-   * callback on click (the consumer decides whether to `preventDefault`).
-   */
-  onclick?: (event: MouseEvent) => void;
-};
-export type StepsProps = {
-  /** Ordered list of step entries from first to last. */
-  steps: StepItem[];
-  /**
-   * Zero-based index of the active step. Steps with index < currentStep are
-   * "completed". Pass `steps.length` to mark every step as complete (terminal
-   * "done" state).
-   */
-  currentStep: number;
-  /** Layout direction. Defaults to 'horizontal'. */
-  orientation?: StepsOrientation;
-  /** Accessible name for the wrapping nav landmark. Defaults to 'Progress'. */
-  label?: string;
-  /**
-   * Visually-hidden text prepended to completed steps so screen readers
-   * announce state + label. Defaults to 'Completed'.
-   */
-  completedLabel?: string;
-  /** Additional class names merged with `.cinder-steps`. */
-  class?: string;
-};

package/src/components/surface/index.ts

@@ -1,6 +0,0 @@
-import './surface.css';
-import Surface from './surface.svelte';
-
-export default Surface;
-export type { SurfaceProps, SurfaceTone } from './surface.types.ts';
-export { Surface };

package/src/components/surface/surface.svelte

@@ -1,35 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category layout
-   * @status stable
-   * @purpose Neutral background primitive that establishes a tonal layer for nested content and broadcasts its tone to descendants via context.
-   * @tag layout
-   * @tag container
-   * @useWhen Wrapping a region in a consistent background tone such as default, raised, or sunken.
-   * @useWhen Letting nested components adapt their styling based on the surrounding surface tone.
-   * @avoidWhen Building a self-contained content card with padding and elevation — use card instead.
-   * @avoidWhen Standing up a full page scaffold with header and actions — use a hand-rolled page scaffold instead.
-   * @related card
-   */
-  export type { SurfaceProps, SurfaceTone } from './surface.types.ts';
-</script>
-
-<script lang="ts">
-  import { setSurfaceContext, type SurfaceContextValue } from '../../_internal/surface-context.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import type { SurfaceProps } from './surface.types.ts';
-
-  let { tone = 'default', class: className, children, ...rest }: SurfaceProps = $props();
-
-  const context: SurfaceContextValue = {
-    get tone() {
-      return tone;
-    },
-  };
-  setSurfaceContext(context);
-</script>
-
-<div class={classNames('cinder-surface', className)} data-cinder-tone={tone} {...rest}>
-  {@render children?.()}
-</div>

package/src/components/surface/surface.types.ts

@@ -1,20 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-
-import type { SurfaceTone } from '../../_internal/surface-context.ts';
-export type { SurfaceTone } from '../../_internal/surface-context.ts';
-
-export type SurfaceProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-  tone?: SurfaceTone;
-  /** Additional CSS classes */
-  class?: string;
-  /** Content rendered inside the surface container. */
-  children?: Snippet;
-};
-
-export interface SurfaceSchemaProps {
-  /** Surface tone. @default "default" */
-  tone?: SurfaceTone;
-  /** Additional CSS classes */
-  class?: string;
-}

package/src/components/tab/index.ts

@@ -1,6 +0,0 @@
-import './tab.css';
-import Tab from './tab.svelte';
-
-export default Tab;
-export type { TabProps } from './tab.types.ts';
-export { Tab };

package/src/components/tab/tab.svelte

@@ -1,120 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category navigation
-   * @status stable
-   * @purpose Single selectable tab trigger inside a tabs composite that registers with the parent context and controls a matching tab-panel.
-   * @tag navigation
-   * @tag tabs
-   * @useWhen Declaring one tab heading inside a tabs ancestor with a stable value identifier.
-   * @useWhen Pairing one-to-one with a tab-panel that shares the same value to wire aria-controls.
-   * @avoidWhen Used outside a tabs ancestor — the component throws at construction.
-   * @avoidWhen Rendering a generic action button — use button instead.
-   * @related tabs, tab-list, tab-panel
-   */
-  // `Tab.value` is treated as immutable after mount. The component reads
-  // `value` via `untrack` inside both registration effects so that changing
-  // `value` at runtime does not re-key the parent registry. Mutating `value`
-  // after mount is unsupported and will leave the registry in a stale state.
-  export type { TabProps } from './tab.types.ts';
-</script>
-
-<script lang="ts">
-  import type { TabProps } from './tab.types.ts';
-  import { untrack } from 'svelte';
-
-  import { rovingTabIndex } from '../../_internal/collection.ts';
-  import { getTabsContext } from '../tabs/tabs-context.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-
-  let { value, id, disabled = false, class: className, children, trailing }: TabProps = $props();
-
-  const tabs = getTabsContext();
-
-  // Derive both ids from the root's baseId and the tab's value so that two
-  // Tabs instances sharing the same value produce distinct DOM ids. The panel
-  // id is always computed from baseId and value; it does not track a custom
-  // `id` prop on this Tab.
-  //
-  // ⚠️  Custom-id wiring: if you supply a custom `id` prop to override this
-  // Tab's element id, the paired TabPanel's default `aria-labelledby` still
-  // points at the baseId-derived id (e.g. `${baseId}-tab-${value}`), which no
-  // longer matches the button's id. Close the gap by passing the SAME custom id
-  // to the paired TabPanel's `ariaLabelledby` prop. Removing the custom `id`
-  // override restores fully automatic wiring.
-  const tabId = $derived(id ?? `${tabs.baseId}-tab-${value}`);
-  const panelId = $derived(`${tabs.baseId}-panel-${value}`);
-
-  const isActive = $derived(tabs.isActive(value));
-  const isFocusable = $derived(tabs.isFocusable(value));
-
-  let buttonElement: HTMLButtonElement | undefined = $state();
-
-  // Capture the registry key once. `Tab.value` is treated as immutable after
-  // mount (see module-level note above); reading it via `untrack` here makes
-  // the immutability mechanical — even if a consumer mutates the prop, the
-  // registry keeps using the original key for register, setDisabled, and
-  // unregister, so the registry never drifts into an inconsistent state.
-  const registeredValue = untrack(() => value);
-
-  // Effect A — mount/unmount registration. Depends only on `buttonElement`.
-  // The initial `disabled` is seeded into the registry on mount so first
-  // paint computes the right tab stop without waiting for Effect B. The
-  // mutation calls themselves are wrapped in `untrack` because `register`
-  // and `unregister` write to a reactive `version` counter; reading that
-  // inside an effect would self-trigger.
-  $effect(() => {
-    if (!buttonElement) return;
-    const button = buttonElement;
-    const initialDisabled = untrack(() => disabled);
-    untrack(() => {
-      tabs.register(registeredValue, button, initialDisabled);
-    });
-    return () => {
-      untrack(() => {
-        tabs.unregister(registeredValue);
-      });
-    };
-  });
-
-  // Effect B — sync subsequent `disabled` prop changes to the registry
-  // without re-registering. Subscribes only to `disabled`; the mutation
-  // call is wrapped in `untrack` for the same reason as Effect A.
-  // `setDisabled` is a safe no-op when called before `register` has run.
-  $effect(() => {
-    const next = disabled;
-    untrack(() => {
-      tabs.setDisabled(registeredValue, next);
-    });
-  });
-
-  function handleClick(): void {
-    if (disabled) return;
-    tabs.select(value);
-  }
-</script>
-
-<button
-  bind:this={buttonElement}
-  type="button"
-  role="tab"
-  id={tabId}
-  class={classNames('cinder-tab', className)}
-  data-cinder-value={value}
-  data-cinder-active={isActive ? '' : undefined}
-  data-cinder-disabled={disabled || undefined}
-  data-variant={tabs.orientation}
-  aria-selected={isActive}
-  aria-controls={panelId}
-  tabindex={rovingTabIndex(isFocusable)}
-  {disabled}
-  onclick={handleClick}
-  onkeydown={tabs.handleKeydown}
->
-  {@render children()}
-  {#if trailing}
-    <span class="cinder-tab__trailing" aria-hidden="true">
-      {@render trailing()}
-    </span>
-  {/if}
-</button>

package/src/components/tab/tab.types.ts

@@ -1,25 +0,0 @@
-import type { Snippet } from 'svelte';
-export type TabProps = {
-  /** Identifier — matches the value of the corresponding TabPanel. */
-  value: string;
-  /** Optional explicit id override; auto-generated otherwise for ARIA wiring. */
-  id?: string;
-  /** Disables this single tab. The panel content is hidden but its DOM stays. */
-  disabled?: boolean;
-  /** Additional class names merged with `.cinder-tab`. */
-  class?: string;
-  /** Tab label content. */
-  children: Snippet;
-  /**
-   * Decorative content rendered inside an `aria-hidden` span (badges, kbd hints,
-   * counters). Do NOT use for interactive controls like close buttons —
-   * `aria-hidden` removes the content from the accessibility tree, making any
-   * interactive child unreachable by keyboard and invisible to screen readers.
-   *
-   * For a closeable tab, render a separate `<button>` immediately after the
-   * `<Tab>` in the DOM (as a sibling within the tab strip) and associate it
-   * with the tab via `aria-label="Close [tab name]"`. The close button must
-   * live outside the `<Tab>` element entirely.
-   */
-  trailing?: Snippet;
-};

package/src/components/tab-list/index.ts

@@ -1,6 +0,0 @@
-import './tab-list.css';
-import TabList from './tab-list.svelte';
-
-export default TabList;
-export type { TabListProps } from './tab-list.types.ts';
-export { TabList };