@lostgradient/cinder 0.1.1 → 0.2.0

package/src/components/table-cell/README.md

@@ -14,11 +14,12 @@ snippet. The flat `@lostgradient/cinder/table-cell` subpath remains exported for
 
 <!-- generated:props:start -->
 
-| Prop       | Type                                | Required | Default | Description                                                                                                                |
-| ---------- | ----------------------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `align`    | `"left"` \| `"center"` \| `"right"` | no       | —       | Visual alignment for numeric columns.                                                                                      |
-| `class`    | `string`                            | no       | —       | Additional class names merged with `.cinder-table__cell`.                                                                  |
-| `children` | `(opaque)`                          | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| Prop       | Type                                | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| ---------- | ----------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `align`    | `"left"` \| `"center"` \| `"right"` | no       | —       | Visual alignment for numeric columns.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `as`       | `"td"` \| `"th"`                    | no       | —       | When `'th'`, renders a `<th scope="row">` instead of `<td>`, marking this cell as the row-header identifier for assistive technology. The component sets `scope="row"` itself (so `scope` is not part of the prop surface). Defaults to `'td'` so existing consumers are unaffected. The attribute surface is typed against `<td>` for both modes — `<td>` and `<th>` share `HTMLTableCellElement`, so this covers the common attributes. The `<th>`-only attributes (`colspan`, `rowspan`, `headers`, `abbr`) are not surfaced here; a discriminated `td`/`th` union was tried but produced a union TypeScript reports as "too complex to represent" against the full element attribute interfaces. Use the compositional Table family directly if a row-header cell needs those `<th>`-only attributes. |
+| `class`    | `string`                            | no       | —       | Additional class names merged with `.cinder-table__cell`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `children` | `(opaque)`                          | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 
 <!-- generated:props:end -->
 

package/src/components/table-cell/table-cell.schema.json

@@ -6,6 +6,10 @@
       "enum": ["left", "center", "right"],
       "description": "Visual alignment for numeric columns."
     },
+    "as": {
+      "enum": ["td", "th"],
+      "description": "When `'th'`, renders a `<th scope=\"row\">` instead of `<td>`, marking this\ncell as the row-header identifier for assistive technology. The component\nsets `scope=\"row\"` itself (so `scope` is not part of the prop surface).\nDefaults to `'td'` so existing consumers are unaffected.\n\nThe attribute surface is typed against `<td>` for both modes — `<td>` and\n`<th>` share `HTMLTableCellElement`, so this covers the common attributes.\nThe `<th>`-only attributes (`colspan`, `rowspan`, `headers`, `abbr`) are\nnot surfaced here; a discriminated `td`/`th` union was tried but produced a\nunion TypeScript reports as \"too complex to represent\" against the full\nelement attribute interfaces. Use the compositional Table family directly\nif a row-header cell needs those `<th>`-only attributes."
+    },
     "class": {
       "type": "string",
       "description": "Additional class names merged with `.cinder-table__cell`."

package/src/components/table-cell/table-cell.schema.ts

@@ -8,6 +8,11 @@ const schema = {
       enum: ['left', 'center', 'right'],
       description: 'Visual alignment for numeric columns.',
     },
+    as: {
+      enum: ['td', 'th'],
+      description:
+        'When `\'th\'`, renders a `<th scope="row">` instead of `<td>`, marking this\ncell as the row-header identifier for assistive technology. The component\nsets `scope="row"` itself (so `scope` is not part of the prop surface).\nDefaults to `\'td\'` so existing consumers are unaffected.\n\nThe attribute surface is typed against `<td>` for both modes — `<td>` and\n`<th>` share `HTMLTableCellElement`, so this covers the common attributes.\nThe `<th>`-only attributes (`colspan`, `rowspan`, `headers`, `abbr`) are\nnot surfaced here; a discriminated `td`/`th` union was tried but produced a\nunion TypeScript reports as "too complex to represent" against the full\nelement attribute interfaces. Use the compositional Table family directly\nif a row-header cell needs those `<th>`-only attributes.',
+    },
     class: {
       type: 'string',
       description: 'Additional class names merged with `.cinder-table__cell`.',

package/src/components/table-cell/table-cell.svelte

@@ -18,9 +18,15 @@
   import type { TableCellProps } from './table-cell.types.ts';
   import { classNames } from '../../utilities/class-names.ts';
 
-  let { align = 'left', class: className, children, ...rest }: TableCellProps = $props();
+  let { align = 'left', as = 'td', class: className, children, ...rest }: TableCellProps = $props();
 </script>
 
-<td {...rest} class={classNames('cinder-table__cell', className)} data-cinder-align={align}>
+<svelte:element
+  this={as}
+  {...rest}
+  scope={as === 'th' ? 'row' : undefined}
+  class={classNames('cinder-table__cell', className)}
+  data-cinder-align={align}
+>
   {@render children?.()}
-</td>
+</svelte:element>

package/src/components/table-cell/table-cell.types.ts

@@ -1,9 +1,24 @@
 import type { Snippet } from 'svelte';
 import type { HTMLTdAttributes } from 'svelte/elements';
 
-export type TableCellProps = Omit<HTMLTdAttributes, 'class' | 'align'> & {
+export type TableCellProps = Omit<HTMLTdAttributes, 'class' | 'align' | 'scope'> & {
   /** Visual alignment for numeric columns. */
   align?: 'left' | 'center' | 'right';
+  /**
+   * When `'th'`, renders a `<th scope="row">` instead of `<td>`, marking this
+   * cell as the row-header identifier for assistive technology. The component
+   * sets `scope="row"` itself (so `scope` is not part of the prop surface).
+   * Defaults to `'td'` so existing consumers are unaffected.
+   *
+   * The attribute surface is typed against `<td>` for both modes — `<td>` and
+   * `<th>` share `HTMLTableCellElement`, so this covers the common attributes.
+   * The `<th>`-only attributes (`colspan`, `rowspan`, `headers`, `abbr`) are
+   * not surfaced here; a discriminated `td`/`th` union was tried but produced a
+   * union TypeScript reports as "too complex to represent" against the full
+   * element attribute interfaces. Use the compositional Table family directly
+   * if a row-header cell needs those `<th>`-only attributes.
+   */
+  as?: 'td' | 'th';
   /** Additional class names merged with `.cinder-table__cell`. */
   class?: string;
   /**

package/src/components/tag-input/README.md

@@ -0,0 +1,75 @@
+# TagInput
+
+Free-form token entry field that turns committed text into removable tags while keeping native input, form, and accessibility wiring intact.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { TagInput } from '@lostgradient/cinder/tag-input';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Collecting zero or more short free-form values such as labels, emails, or technologies.
+- Letting users review and remove committed values inline before submitting a form.
+
+### Avoid When
+
+- Users must choose from a fixed option list — use combobox instead.
+- The value is a single free-form string rather than a list — use input instead.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop               | Type                                                                                                          | Required | Default | Description                                                                                                                |
+| ------------------ | ------------------------------------------------------------------------------------------------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `allowDuplicates`  | `boolean`                                                                                                     | no       | —       | Allow the same trimmed tag value to appear more than once.                                                                 |
+| `aria-describedby` | `string` \| `null`                                                                                            | no       | —       | Additional description ids composed into the visible input aria-describedby chain.                                         |
+| `aria-invalid`     | `false` \| `true` \| `"true"` \| `"false"` \| `"grammar"` \| `"spelling"` \| `null`                           | no       | —       | Manual invalid-state override used when no inline validation message or FormField invalid state is active.                 |
+| `aria-label`       | `string` \| `null`                                                                                            | no       | —       | Accessible label applied when no labelled-by chain is present.                                                             |
+| `aria-labelledby`  | `string` \| `null`                                                                                            | no       | —       | Element ids that label both the text input and the committed-tag listbox.                                                  |
+| `autocapitalize`   | `"off"` \| `"on"` \| `"characters"` \| `"none"` \| `"sentences"` \| `"words"` \| `null`                       | no       | —       | Autocapitalization hint forwarded to the visible text input.                                                               |
+| `class`            | `string`                                                                                                      | no       | —       | Additional class merged onto the root element.                                                                             |
+| `defaultValue`     | `string`[]                                                                                                    | no       | —       | Initial tags for uncontrolled usage. Ignored after mount.                                                                  |
+| `disabled`         | `boolean`                                                                                                     | no       | —       | Disable the input and chip removal affordances.                                                                            |
+| `enterkeyhint`     | `"enter"` \| `"done"` \| `"go"` \| `"next"` \| `"previous"` \| `"search"` \| `"send"` \| `null`               | no       | —       | Virtual-keyboard Enter hint forwarded to the visible text input.                                                           |
+| `id`               | `string`                                                                                                      | no       | —       | Stable id for the visible text input. Falls back to FormField context or a generated id.                                   |
+| `inputmode`        | `"email"` \| `"tel"` \| `"url"` \| `"none"` \| `"search"` \| `"text"` \| `"numeric"` \| `"decimal"` \| `null` | no       | —       | Virtual-keyboard input mode forwarded to the visible text input.                                                           |
+| `max`              | `number`                                                                                                      | no       | —       | Maximum number of tags allowed. Non-finite values disable the cap.                                                         |
+| `maxlength`        | `number` \| `null`                                                                                            | no       | —       | Maximum pending-text length forwarded to the visible text input.                                                           |
+| `name`             | `string`                                                                                                      | no       | —       | Hidden input name used for native form submission; one hidden field is rendered per tag.                                   |
+| `placeholder`      | `string` \| `null`                                                                                            | no       | —       | Placeholder text shown while the pending tag input is empty.                                                               |
+| `readonly`         | `boolean`                                                                                                     | no       | —       | Render the pending-tag input as read-only and make committed tags non-removable.                                           |
+| `spellcheck`       | `false` \| `true` \| `"true"` \| `"false"` \| `null`                                                          | no       | —       | Spellcheck setting forwarded to the visible text input.                                                                    |
+| `value`            | `string`[]                                                                                                    | no       | —       | Controlled tags. When provided, the parent owns the tag array.                                                             |
+| `autocomplete`     | `(opaque)`                                                                                                    | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
+| `delimiter`        | `(opaque)`                                                                                                    | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
+| `onblur`           | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onchange`         | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onfocus`          | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `oninput`          | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onkeydown`        | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `validate`         | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/typography/README.md

@@ -0,0 +1,51 @@
+# Typography
+
+Renders text with a named typographic variant mapped to the design token scale.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Typography } from '@lostgradient/cinder/typography';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Applying a named typographic style (heading, body, caption) with semantic HTML.
+
+### Avoid When
+
+- Rendering inline text inside a paragraph — use a plain `<span>` with CSS.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Required | Default   | Description                                                                  |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------- | ---------------------------------------------------------------------------- |
+| `class`        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | no       | —         | Additional class names merged with `.cinder-typography`.                     |
+| `component`    | `"object"` \| `"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"h5"` \| `"h6"` \| `"caption"` \| `"label"` \| `"a"` \| `"abbr"` \| `"address"` \| `"article"` \| `"aside"` \| `"audio"` \| `"b"` \| `"bdi"` \| `"bdo"` \| `"blockquote"` \| `"body"` \| `"button"` \| `"canvas"` \| `"cite"` \| `"code"` \| `"colgroup"` \| `"data"` \| `"datalist"` \| `"dd"` \| `"del"` \| `"details"` \| `"dfn"` \| `"dialog"` \| `"div"` \| `"dl"` \| `"dt"` \| `"em"` \| `"fieldset"` \| `"figcaption"` \| `"figure"` \| `"footer"` \| `"form"` \| `"head"` \| `"header"` \| `"hgroup"` \| `"html"` \| `"i"` \| `"iframe"` \| `"ins"` \| `"kbd"` \| `"legend"` \| `"li"` \| `"main"` \| `"map"` \| `"mark"` \| `"menu"` \| `"meter"` \| `"nav"` \| `"noscript"` \| `"ol"` \| `"optgroup"` \| `"option"` \| `"output"` \| `"p"` \| `"picture"` \| `"pre"` \| `"progress"` \| `"q"` \| `"rp"` \| `"rt"` \| `"ruby"` \| `"s"` \| `"samp"` \| `"script"` \| `"search"` \| `"section"` \| `"select"` \| `"slot"` \| `"small"` \| `"span"` \| `"strong"` \| `"style"` \| `"sub"` \| `"summary"` \| `"sup"` \| `"table"` \| `"tbody"` \| `"td"` \| `"template"` \| `"textarea"` \| `"tfoot"` \| `"th"` \| `"thead"` \| `"time"` \| `"title"` \| `"tr"` \| `"u"` \| `"ul"` \| `"var"` \| `"video"` | no       | —         | Override the rendered HTML element while keeping the variant's visual style. |
+| `gutterBottom` | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | no       | `false`   | When true, adds bottom margin using the space scale.                         |
+| `noWrap`       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | no       | `false`   | When true, constrains to a single line with ellipsis overflow.               |
+| `variant`      | `"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"h5"` \| `"h6"` \| `"subtitle1"` \| `"subtitle2"` \| `"body1"` \| `"body2"` \| `"caption"` \| `"overline"` \| `"label"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | no       | `"body1"` | Named typographic style to apply.                                            |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/waveform/README.md

@@ -0,0 +1,57 @@
+# Waveform
+
+Responsive SVG rendering of time-domain audio amplitude data as a waveform path or bar display.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Waveform } from '@lostgradient/cinder/waveform';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Visualizing pre-recorded or pre-processed audio amplitude samples in a static display.
+- Showing an audio waveform thumbnail or preview with mocked or pre-computed sample data.
+
+### Avoid When
+
+- Real-time live audio capture is needed — wire AudioContext / AnalyserNode yourself and feed samples as props.
+- Frequency-domain data — use spectrum-chart or spectrogram instead.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop                  | Type                                                | Required | Default | Description |
+| --------------------- | --------------------------------------------------- | -------- | ------- | ----------- |
+| `class`               | `string`                                            | no       | —       |             |
+| `data`                | `number`[]                                          | yes      | —       |             |
+| `dataTableCaption`    | `string`                                            | no       | —       |             |
+| `dataTableVisibility` | `"screen-reader-only"` \| `"visible"` \| `"hidden"` | no       | —       |             |
+| `description`         | `string`                                            | no       | —       |             |
+| `height`              | `number`                                            | no       | —       |             |
+| `label`               | `string`                                            | yes      | —       |             |
+| `loading`             | `boolean`                                           | no       | —       |             |
+| `renderMode`          | `"path"` \| `"bars"`                                | no       | —       |             |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/waveform/index.ts

@@ -0,0 +1,6 @@
+import './waveform.css';
+import Waveform from './waveform.svelte';
+
+export default Waveform;
+export type { WaveformProps, WaveformRenderMode, WaveformSchemaProps } from './waveform.types.ts';
+export { Waveform };

package/src/components/waveform/waveform.css

@@ -0,0 +1,53 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-waveform {
+    display: grid;
+    gap: var(--cinder-space-2);
+    color: var(--cinder-text);
+  }
+
+  .cinder-waveform__description {
+    margin: 0;
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-waveform__viewport {
+    position: relative;
+  }
+
+  .cinder-waveform svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .cinder-waveform__baseline {
+    stroke: var(--cinder-border-muted);
+    stroke-width: 1;
+  }
+
+  .cinder-waveform__path {
+    fill: none;
+    stroke: var(--cinder-chart-series-1);
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+  }
+
+  .cinder-waveform__bar {
+    fill: var(--cinder-chart-series-1);
+    rx: 1;
+  }
+
+  .cinder-waveform__state {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    color: var(--cinder-text-muted);
+    background: color-mix(in oklch, var(--cinder-surface) 88%, transparent);
+    z-index: 1;
+  }
+}

package/src/components/waveform/waveform.examples.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "waveform",
+  "import": "@lostgradient/cinder/waveform",
+  "examples": [
+    {
+      "id": "bars-mode",
+      "title": "Audio waveform (bars mode)",
+      "description": "Pre-computed audio amplitude samples rendered as vertical amplitude bars.",
+      "code": "<script lang=\"ts\">\n  import { Waveform } from '@lostgradient/cinder/waveform';\n\n  // Simulate a voice recording envelope (louder in the middle) with deterministic noise\n  const voiceData = Array.from({ length: 128 }, (_, index) => {\n    const envelope = Math.sin((index / 128) * Math.PI);\n    // Deterministic pseudo-noise using multiple harmonics\n    const noise = (Math.sin(index * 7.3) + Math.sin(index * 13.7) + Math.sin(index * 23.1)) / 7.5;\n    return Math.max(-1, Math.min(1, envelope * 0.8 + noise));\n  });\n</script>\n\n<Waveform\n  label=\"Voice recording waveform\"\n  description=\"Simulated voice recording amplitude envelope displayed as bars.\"\n  data={voiceData}\n  renderMode=\"bars\"\n  height={80}\n/>\n"
+    },
+    {
+      "id": "sine-wave-path",
+      "title": "Sine wave (path mode)",
+      "description": "A time-domain sine wave rendered as a continuous SVG path.",
+      "code": "<script lang=\"ts\">\n  import { Waveform } from '@lostgradient/cinder/waveform';\n\n  const sineData = Array.from({ length: 256 }, (_, index) => Math.sin((index / 256) * Math.PI * 8));\n</script>\n\n<Waveform\n  label=\"Sine wave — 4 Hz\"\n  description=\"A pure 4 Hz sine wave sampled at 256 points, displayed in path mode.\"\n  data={sineData}\n  renderMode=\"path\"\n  height={100}\n  dataTableVisibility=\"visible\"\n/>\n"
+    }
+  ]
+}

package/src/components/waveform/waveform.schema.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "label": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
+    "data": {
+      "type": "array",
+      "items": {
+        "type": "number"
+      }
+    },
+    "renderMode": {
+      "enum": ["path", "bars"]
+    },
+    "height": {
+      "type": "number"
+    },
+    "loading": {
+      "type": "boolean"
+    },
+    "dataTableVisibility": {
+      "enum": ["screen-reader-only", "visible", "hidden"]
+    },
+    "dataTableCaption": {
+      "type": "string"
+    },
+    "class": {
+      "type": "string"
+    }
+  },
+  "additionalProperties": false,
+  "required": ["data", "label"]
+}

package/src/components/waveform/waveform.schema.ts

@@ -0,0 +1,42 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    label: {
+      type: 'string',
+    },
+    description: {
+      type: 'string',
+    },
+    data: {
+      type: 'array',
+      items: {
+        type: 'number',
+      },
+    },
+    renderMode: {
+      enum: ['path', 'bars'],
+    },
+    height: {
+      type: 'number',
+    },
+    loading: {
+      type: 'boolean',
+    },
+    dataTableVisibility: {
+      enum: ['screen-reader-only', 'visible', 'hidden'],
+    },
+    dataTableCaption: {
+      type: 'string',
+    },
+    class: {
+      type: 'string',
+    },
+  },
+  additionalProperties: false,
+  required: ['data', 'label'],
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;