@lostgradient/cinder 0.6.0 → 0.7.0

package/src/components/bar-chart/bar-chart.svelte

@@ -0,0 +1,350 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { assertValidNonNegativeInteger, chartPaletteColor, createBarModel, dataTableClass, formatNumericValue, legendVisible, } from '../../_internal/chart/chart-utilities.ts';
+import { DEFAULT_CHART_FOCUS_RING_STROKE_PADDING, createBarFocusRingGeometry, } from '../../_internal/chart/chart-focus-ring.ts';
+import { ChartInteraction } from '../../_internal/chart/chart-interaction.svelte.ts';
+import { classNames } from '../../utilities/class-names.ts';
+let { label, description, data, categoryKey, series, orientation = 'vertical', mode = 'grouped', height = 280, xAxis, yAxis, legendPosition = 'top', hiddenSeriesIds = $bindable([]), loading = false, dataTableCaption, dataTableVisibility = 'screen-reader-only', maximumInteractivePoints = 500, class: customClassName, empty, loadingContent, id, ...rest } = $props();
+const generatedId = $props.id();
+const rootId = $derived(id ?? generatedId);
+const descriptionId = $derived(description ? `${rootId}-description` : undefined);
+// Bar chart interaction: pointer axis switches with orientation.
+// Vertical bars snap to x-buckets; horizontal bars snap to y-buckets.
+// A reactive getter is passed so the same instance follows orientation
+// changes without resetting measuredWidth — intentionally different from
+// line/area charts which always use pointer axis 'x'.
+const interaction = new ChartInteraction({
+    pointerAxis: () => (orientation === 'vertical' ? 'x' : 'y'),
+});
+let rootElement = $state();
+$effect(() => {
+    if (!rootElement)
+        return;
+    return interaction.observeResize(rootElement);
+});
+const model = $derived(createBarModel({
+    data,
+    categoryKey,
+    series,
+    hiddenSeriesIds,
+    width: interaction.measuredWidth,
+    height,
+    orientation,
+    mode,
+    xAxis,
+    yAxis,
+}));
+const keyboardEnabled = $derived(model.targets.length > 0 && model.targets.length <= maximumInteractivePoints);
+const hasDataTable = $derived(dataTableVisibility !== 'hidden');
+const guidanceId = $derived(!keyboardEnabled && hasDataTable && model.targets.length > 0
+    ? `${rootId}-table-guidance`
+    : undefined);
+const focusedTarget = $derived.by(() => {
+    const currentTarget = interaction.focusedTarget;
+    if (!currentTarget)
+        return undefined;
+    return model.targets.find((target) => target.id === currentTarget.id);
+});
+let keyboardFocusModality = $state(false);
+let focusVisibleTargetId = $state();
+const focusRingTarget = $derived(keyboardFocusModality && focusedTarget && focusVisibleTargetId === focusedTarget.id
+    ? focusedTarget
+    : undefined);
+const barFocusRing = $derived(focusRingTarget
+    ? createBarFocusRingGeometry({
+        target: focusRingTarget,
+        plotWidth: model.geometry.plotWidth,
+        plotHeight: model.geometry.plotHeight,
+        strokePadding: DEFAULT_CHART_FOCUS_RING_STROKE_PADDING,
+    })
+    : null);
+$effect(() => {
+    assertValidNonNegativeInteger('bar-chart', 'invalid-maximum-interactive-points', maximumInteractivePoints, 'maximumInteractivePoints');
+});
+$effect(() => {
+    interaction.clearStaleTargets(loading, model.empty, model.targets);
+});
+function rememberKeyboardFocusModality(event) {
+    if (event.key === 'Tab' ||
+        event.key === 'Home' ||
+        event.key === 'End' ||
+        event.key.startsWith('Arrow')) {
+        keyboardFocusModality = true;
+    }
+}
+function clearKeyboardFocusModality() {
+    keyboardFocusModality = false;
+    focusVisibleTargetId = undefined;
+}
+function handleTargetFocus(target) {
+    interaction.focusedTarget = target;
+    focusVisibleTargetId = keyboardFocusModality ? target.id : undefined;
+}
+function handleTargetBlur() {
+    interaction.focusedTarget = undefined;
+    focusVisibleTargetId = undefined;
+}
+function handleTargetKeydown(event) {
+    rememberKeyboardFocusModality(event);
+    interaction.activateByKeyboard(event, rootElement, model.targets, keyboardEnabled);
+}
+</script>
+
+<svelte:window
+  onkeydown={rememberKeyboardFocusModality}
+  onpointerdown={clearKeyboardFocusModality}
+/>
+
+<figure
+  {...rest}
+  bind:this={rootElement}
+  id={rootId}
+  class={classNames('cinder-bar-chart', customClassName)}
+  aria-label={label}
+  aria-describedby={descriptionId}
+  data-cinder-orientation={orientation}
+  data-cinder-mode={mode}
+>
+  {#if description}<p id={descriptionId} class="cinder-bar-chart__description">
+      {description}
+    </p>{/if}
+  {#if legendVisible(legendPosition, series.length) && legendPosition === 'top'}
+    <div class="cinder-bar-chart__legend" aria-label="Series">
+      {#each series as item, index (item.id)}
+        <button
+          type="button"
+          aria-pressed={!hiddenSeriesIds.includes(item.id)}
+          onclick={() => (hiddenSeriesIds = interaction.toggleSeries(hiddenSeriesIds, item.id))}
+          ><span style:background={item.color ?? chartPaletteColor(index)}
+          ></span>{item.label}</button
+        >
+      {/each}
+    </div>
+  {/if}
+  <div
+    class="cinder-bar-chart__viewport"
+    style:height="{height}px"
+    data-cinder-loading={loading || undefined}
+  >
+    {#if loading}
+      <div class="cinder-bar-chart__state">
+        {#if loadingContent}{@render loadingContent()}{:else}Loading chart…{/if}
+      </div>
+    {:else if model.empty}
+      <div class="cinder-bar-chart__state">
+        {#if empty}{@render empty()}{:else}No chart data{/if}
+      </div>
+    {/if}
+    <svg
+      viewBox={`0 0 ${interaction.measuredWidth} ${height}`}
+      aria-hidden={loading || model.empty ? 'true' : undefined}
+      aria-labelledby={!loading && !model.empty ? `${rootId}-svg-title` : undefined}
+    >
+      {#if !loading && !model.empty}
+        <title id="{rootId}-svg-title">{label}</title>
+      {/if}
+      <g transform={`translate(${model.geometry.marginLeft}, ${model.geometry.marginTop})`}>
+        {#each model.yTicks as tick, index (tick)}
+          <!--
+            Bar chart tick positions depend on orientation:
+            - Vertical: y-axis labels appear left of the chart (same as line/area).
+            - Horizontal: value labels appear along the bottom x-axis instead.
+            This is intentionally different from line/area chart tick rendering.
+          -->
+          <text
+            class="cinder-bar-chart__tick-label"
+            x={orientation === 'vertical'
+              ? -8
+              : ((tick - model.valueDomain[0]) / (model.valueDomain[1] - model.valueDomain[0])) *
+                model.geometry.plotWidth}
+            y={orientation === 'vertical'
+              ? model.geometry.plotHeight -
+                ((tick - model.valueDomain[0]) / (model.valueDomain[1] - model.valueDomain[0])) *
+                  model.geometry.plotHeight
+              : model.geometry.plotHeight + 20}
+            text-anchor={orientation === 'vertical' ? 'end' : 'middle'}
+            dominant-baseline={orientation === 'vertical' ? 'middle' : undefined}
+            >{formatNumericValue(tick, orientation === 'vertical' ? yAxis : xAxis, undefined, {
+              index,
+            })}</text
+          >
+        {/each}
+        <!-- Series-specific rendering: rectangular bars. -->
+        {#each model.bars as bar (bar.id)}
+          <rect
+            class="cinder-bar-chart__bar"
+            x={bar.x}
+            y={bar.y}
+            width={bar.width}
+            height={bar.height}
+            fill={bar.color}
+            aria-hidden="true"
+            data-cinder-series={bar.seriesId}
+            data-cinder-category={bar.categoryLabel}
+            data-cinder-active={interaction.activeTarget?.seriesId === bar.seriesId &&
+            interaction.activeTarget?.xLabel === bar.categoryLabel
+              ? ''
+              : undefined}
+          />
+        {/each}
+        {#each model.categoryTicks as tick (tick.categoryKey)}
+          <!--
+            Category axis labels differ by orientation:
+            - Vertical: labels appear below bars (middle-anchored x, no baseline).
+            - Horizontal: labels appear left of bars (end-anchored x, middle baseline).
+          -->
+          <text
+            class="cinder-bar-chart__tick-label"
+            x={tick.x}
+            y={tick.y}
+            text-anchor={orientation === 'vertical' ? 'middle' : 'end'}
+            dominant-baseline={orientation === 'vertical' ? undefined : 'middle'}>{tick.label}</text
+          >
+        {/each}
+        {#if interaction.activeTarget}
+          <!--
+            Bar chart crosshair direction depends on orientation:
+            - Vertical bars: vertical crosshair through the active bar's x position.
+            - Horizontal bars: horizontal crosshair through the active bar's y position.
+            This is intentionally different from line/area charts which always draw a
+            vertical crosshair.
+          -->
+          {#if orientation === 'vertical'}
+            <line
+              class="cinder-bar-chart__crosshair"
+              x1={interaction.activeTarget.x}
+              x2={interaction.activeTarget.x}
+              y1="0"
+              y2={model.geometry.plotHeight}
+              aria-hidden="true"
+            />
+          {:else}
+            <line
+              class="cinder-bar-chart__crosshair"
+              x1="0"
+              x2={model.geometry.plotWidth}
+              y1={interaction.activeTarget.y}
+              y2={interaction.activeTarget.y}
+              aria-hidden="true"
+            />
+          {/if}
+        {/if}
+        {#if model.targets.length > 0}
+          <rect
+            class="cinder-bar-chart__hit-surface"
+            role="presentation"
+            width={model.geometry.plotWidth}
+            height={model.geometry.plotHeight}
+            onpointermove={(event) => interaction.activateByPointer(event, model.targets)}
+            onpointerleave={() => interaction.clearPointerTarget()}
+          />
+          {#if keyboardEnabled}
+            {#each model.targets as target (target.id)}
+              <!--
+                Bar chart uses rect focus targets centered on each bar, not circle targets.
+                Circles are suitable for point-based charts (line/area); rects match the
+                bar geometry and produce better hit areas for bar-shaped data points.
+              -->
+              <rect
+                class="cinder-bar-chart__focus-target"
+                x={(target.x ?? 0) - 6}
+                y={(target.y ?? 0) - 6}
+                width="12"
+                height="12"
+                tabindex="0"
+                role="button"
+                data-cinder-target-id={target.id}
+                data-cinder-series-id={target.seriesId}
+                data-cinder-focus-ring-active={barFocusRing && focusRingTarget?.id === target.id
+                  ? 'true'
+                  : undefined}
+                aria-label={`${target.seriesLabel}, ${target.xLabel}, ${target.valueLabel}`}
+                aria-describedby={interaction.activeTarget?.id === target.id
+                  ? `${rootId}-tooltip`
+                  : undefined}
+                onfocus={() => handleTargetFocus(target)}
+                onblur={handleTargetBlur}
+                onkeydown={handleTargetKeydown}
+              />
+            {/each}
+          {/if}
+        {/if}
+        {#if barFocusRing}
+          <g class="cinder-bar-chart__focus-ring-layer" aria-hidden="true">
+            <rect
+              class="cinder-bar-chart__focus-ring-halo"
+              x={barFocusRing.x}
+              y={barFocusRing.y}
+              width={barFocusRing.width}
+              height={barFocusRing.height}
+              rx={barFocusRing.radius}
+            />
+            <rect
+              class="cinder-bar-chart__focus-ring"
+              x={barFocusRing.x}
+              y={barFocusRing.y}
+              width={barFocusRing.width}
+              height={barFocusRing.height}
+              rx={barFocusRing.radius}
+            />
+          </g>
+        {/if}
+      </g>
+    </svg>
+    {#if interaction.activeTarget}<div
+        id="{rootId}-tooltip"
+        role="tooltip"
+        class="cinder-bar-chart__tooltip"
+        style:left="{model.geometry.marginLeft + interaction.activeTarget.x}px"
+        style:top="{model.geometry.marginTop + interaction.activeTarget.y}px"
+      >
+        <strong>{interaction.activeTarget.seriesLabel}</strong><span
+          >{interaction.activeTarget.xLabel}: {interaction.activeTarget.valueLabel}</span
+        >
+      </div>{/if}
+  </div>
+  {#if guidanceId}<p id={guidanceId} class="cinder-sr-only">
+      Use the data table to inspect this chart with a keyboard.
+    </p>{/if}
+  {#if hasDataTable}
+    <!--
+      Bar chart data table uses Category/Series/Value columns rather than
+      Series/X/Value (line/area). This reflects that bar charts are category-
+      primary: each row is one category, with each series as a column value.
+    -->
+    <table class={dataTableClass(dataTableVisibility)} aria-describedby={guidanceId}>
+      <caption>{dataTableCaption ?? label}</caption>
+      <thead
+        ><tr><th scope="col">Category</th><th scope="col">Series</th><th scope="col">Value</th></tr
+        ></thead
+      >
+      <tbody>
+        {#each model.tableRows as row (row.categoryKey)}
+          {#each row.values as value (value.seriesId)}
+            <tr
+              ><th scope="row">{row.categoryLabel}</th><td>{value.seriesLabel}</td><td
+                >{value.valueLabel}</td
+              ></tr
+            >
+          {/each}
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+  {#if legendVisible(legendPosition, series.length) && legendPosition === 'bottom'}
+    <div class="cinder-bar-chart__legend" aria-label="Series">
+      {#each series as item, index (item.id)}
+        <button
+          type="button"
+          aria-pressed={!hiddenSeriesIds.includes(item.id)}
+          onclick={() => (hiddenSeriesIds = interaction.toggleSeries(hiddenSeriesIds, item.id))}
+          ><span style:background={item.color ?? chartPaletteColor(index)}
+          ></span>{item.label}</button
+        >
+      {/each}
+    </div>
+  {/if}
+</figure>

package/src/components/bar-chart/bar-chart.types.ts

@@ -0,0 +1,62 @@
+import type {
+  BarChartDatum,
+  BarChartMode,
+  BarChartOrientation,
+  BarChartSchemaDatum,
+  BarChartSchemaSeries,
+  BarChartSeries,
+  ChartAxisSchemaConfiguration,
+  ChartDataTableVisibility,
+  ChartLegendPosition,
+  ChartSharedProps,
+} from '../chart.types.ts';
+
+export type BarChartProps = ChartSharedProps & {
+  /** Rows containing the category and value-key fields used by each series. */
+  data: BarChartDatum[];
+  /** Datum key used for the category axis. Runtime validation requires string, number, or Date values. */
+  categoryKey: string;
+  /** Series descriptors. Each valueKey must resolve to number, null, or undefined on every datum. */
+  series: BarChartSeries[];
+  /** Bar orientation. Default `vertical`. */
+  orientation?: BarChartOrientation;
+  /** Grouped or stacked bar layout. Default `grouped`. */
+  mode?: BarChartMode;
+};
+
+export type BarChartSchemaProps = {
+  /** Accessible label for the chart. Required for screen readers. */
+  label: string;
+  /** Optional description rendered below the label. */
+  description?: string;
+  /** Pixel height of the chart viewport. Default `280`. */
+  height?: number;
+  /** Configuration for the x-axis label and tick count. */
+  xAxis?: ChartAxisSchemaConfiguration;
+  /** Configuration for the y-axis label and tick count. */
+  yAxis?: ChartAxisSchemaConfiguration;
+  /** Where to render the series legend relative to the chart. Default `top`. */
+  legendPosition?: ChartLegendPosition;
+  /** IDs of series currently hidden from the chart. Can be two-way bound with `bind:hiddenSeriesIds`. */
+  hiddenSeriesIds?: string[];
+  /** Whether the chart is in a loading state. Default `false`. */
+  loading?: boolean;
+  /** Custom data table caption; falls back to `label`. */
+  dataTableCaption?: string;
+  /** Controls data table visibility. Default `screen-reader-only`. */
+  dataTableVisibility?: ChartDataTableVisibility;
+  /** Maximum number of interactive focus targets before keyboard navigation is disabled. Default `500`. */
+  maximumInteractivePoints?: number;
+  /** Custom class applied to the root element. */
+  class?: string;
+  /** JSON-safe data rows. Schema cannot express dynamic categoryKey/valueKey relationships; runtime validation narrows value-key fields to number, null, or undefined. */
+  data: BarChartSchemaDatum[];
+  /** Category field name. Runtime validation requires every row to contain a string, number, or Date category. */
+  categoryKey: string;
+  /** Series value keys. Schema cannot prove every valueKey exists on every row; runtime validation enforces it. */
+  series: BarChartSchemaSeries[];
+  /** Bar orientation. Default `vertical`. */
+  orientation?: BarChartOrientation;
+  /** Grouped or stacked bar layout. Default `grouped`. */
+  mode?: BarChartMode;
+};

package/src/components/bar-chart/bar-chart.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/bar-chart/index.ts

@@ -0,0 +1,6 @@
+import './bar-chart.css';
+import BarChart from './bar-chart.svelte';
+
+export default BarChart;
+export type { BarChartProps, BarChartSchemaProps } from './bar-chart.types.ts';
+export { BarChart };

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

@@ -0,0 +1,109 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    colSpan: {
+      anyOf: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'integer',
+          minimum: 1,
+        },
+      ],
+      description: 'Number of columns this cell spans.',
+    },
+    rowSpan: {
+      anyOf: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'integer',
+          minimum: 1,
+        },
+      ],
+      description: 'Number of rows this cell spans.',
+    },
+    columnStart: {
+      anyOf: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'integer',
+          not: {
+            const: 0,
+          },
+        },
+      ],
+      description: 'Explicit `grid-column-start` value.',
+    },
+    columnEnd: {
+      anyOf: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'integer',
+          not: {
+            const: 0,
+          },
+        },
+      ],
+      description: 'Explicit `grid-column-end` value.',
+    },
+    rowStart: {
+      anyOf: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'integer',
+          not: {
+            const: 0,
+          },
+        },
+      ],
+      description: 'Explicit `grid-row-start` value.',
+    },
+    rowEnd: {
+      anyOf: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'integer',
+          not: {
+            const: 0,
+          },
+        },
+      ],
+      description: 'Explicit `grid-row-end` value.',
+    },
+    as: {
+      type: 'string',
+      description: 'Rendered HTML tag.',
+    },
+    class: {
+      type: 'string',
+      description: 'Custom class merged with `.cinder-bento-cell`.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        required: true,
+        description: 'Bento cell contents.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

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

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+let { colSpan, rowSpan, columnStart, columnEnd, rowStart, rowEnd, as = 'div', class: customClassName, children, ...rest } = $props();
+const resolvedColSpan = $derived(colSpan !== undefined ? String(colSpan) : undefined);
+const resolvedRowSpan = $derived(rowSpan !== undefined ? String(rowSpan) : undefined);
+const resolvedColumnStart = $derived(columnStart !== undefined ? String(columnStart) : undefined);
+const resolvedColumnEnd = $derived(columnEnd !== undefined ? String(columnEnd) : undefined);
+const resolvedRowStart = $derived(rowStart !== undefined ? String(rowStart) : undefined);
+const resolvedRowEnd = $derived(rowEnd !== undefined ? String(rowEnd) : undefined);
+const shouldApplyColSpan = $derived(resolvedColSpan !== undefined && resolvedColumnEnd === undefined);
+const shouldApplyRowSpan = $derived(resolvedRowSpan !== undefined && resolvedRowEnd === undefined);
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  class={classNames('cinder-bento-cell', customClassName)}
+  data-cinder-col-span={shouldApplyColSpan ? 'true' : undefined}
+  data-cinder-row-span={shouldApplyRowSpan ? 'true' : undefined}
+  style:--cinder-bento-cell-col-span={resolvedColSpan}
+  style:--cinder-bento-cell-row-span={resolvedRowSpan}
+  style:--cinder-bento-cell-column-start={resolvedColumnStart}
+  style:--cinder-bento-cell-column-end={resolvedColumnEnd}
+  style:--cinder-bento-cell-row-start={resolvedRowStart}
+  style:--cinder-bento-cell-row-end={resolvedRowEnd}
+>
+  {@render children?.()}
+</svelte:element>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+/** Props for the BentoCell component. */
+export type BentoCellProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+  /** Number of columns this cell spans. */
+  colSpan?: number | string;
+  /** Number of rows this cell spans. */
+  rowSpan?: number | string;
+  /** Explicit `grid-column-start` value. */
+  columnStart?: number | string;
+  /** Explicit `grid-column-end` value. */
+  columnEnd?: number | string;
+  /** Explicit `grid-row-start` value. */
+  rowStart?: number | string;
+  /** Explicit `grid-row-end` value. */
+  rowEnd?: number | string;
+  /** Rendered HTML tag. */
+  as?: string;
+  /** Custom class merged with `.cinder-bento-cell`. */
+  class?: string;
+  /** Bento cell contents. */
+  children: Snippet;
+};

package/src/components/bento-cell/bento-cell.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/bento-cell/index.ts

@@ -0,0 +1,6 @@
+import './bento-cell.css';
+import BentoCell from './bento-cell.svelte';
+
+export default BentoCell;
+export type { BentoCellProps } from './bento-cell.types.ts';
+export { BentoCell };

package/src/components/bento-grid/bento-grid.schema.ts

@@ -0,0 +1,60 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    columns: {
+      anyOf: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'integer',
+          minimum: 1,
+        },
+      ],
+      description:
+        'Positive integer number of equal-width columns or a full CSS\n`grid-template-columns` value.\nNumeric values render as `repeat(<columns>, minmax(0, 1fr))`.',
+    },
+    gap: {
+      type: 'string',
+      description: 'Uniform row and column gap.',
+    },
+    rowGap: {
+      type: 'string',
+      description: 'Row gap override. Wins over `gap` for rows.',
+    },
+    columnGap: {
+      type: 'string',
+      description: 'Column gap override. Wins over `gap` for columns.',
+    },
+    collapse: {
+      type: 'boolean',
+      description:
+        'Enables a narrow-screen fallback where BentoGrid becomes a single column\nand BentoCell placement resets to auto flow.',
+      default: true,
+    },
+    as: {
+      type: 'string',
+      description: 'Rendered HTML tag.',
+    },
+    class: {
+      type: 'string',
+      description: 'Custom class merged with `.cinder-bento-grid`.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        required: true,
+        description: 'Bento grid contents.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;