@lostgradient/cinder 0.4.1 → 0.5.0

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

@@ -0,0 +1,55 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ContainerMaxWidth } from '../container/container.types.ts';
+
+/** @schemaObject */
+export type PricingSectionPlan = {
+  /** Plan name. */
+  name: string;
+  /** Plan price label. */
+  price: string;
+  /** Included features. */
+  features: string[];
+  /** CTA label for the plan action button. */
+  cta: string;
+  /** Optional caveat text. */
+  caveat?: string;
+  /** Marks plan as highlighted/selected. */
+  selected?: boolean;
+};
+
+/** Props for the PricingSection component. */
+export type PricingSectionProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Optional section title. */
+  title?: string;
+  /** Optional section description. */
+  description?: string;
+  /** Plans rendered as PricingCard components. */
+  plans: PricingSectionPlan[];
+  /** Grid column count. @default 3 */
+  columns?: 1 | 2 | 3 | 4;
+  /** Callback fired when a plan CTA is clicked. */
+  onPlanSelect?: (plan: PricingSectionPlan, index: number) => void;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-pricing-section`. */
+  class?: string;
+};
+
+export interface PricingSectionSchemaProps {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Optional section title. */
+  title?: string;
+  /** Optional section description. */
+  description?: string;
+  /** Plans rendered as PricingCard components. */
+  plans: PricingSectionPlan[];
+  /** Grid column count. @default 3 */
+  columns?: 1 | 2 | 3 | 4;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-pricing-section`. */
+  class?: string;
+}

package/src/components/progress/progress.svelte

@@ -8,9 +8,10 @@
    * @tag progress
    * @useWhen Reporting measurable progress of a known task such as a file upload or multi-step import.
    * @useWhen Showing an indeterminate work indicator when the task duration is unknown but the surface needs a progressbar role.
+   * @avoidWhen Showing a bounded measurement gauge (battery, CPU, quota) that is not task completion. | meter
    * @avoidWhen Showing a small inline busy state next to a control — use spinner.
    * @avoidWhen Reserving placeholder space for incoming content — use skeleton.
-   * @related spinner, skeleton
+   * @related meter, spinner, skeleton
    */
   export type { ProgressProps, ProgressSize, ProgressVariant } from './progress.types.ts';
 </script>

package/src/components/qr-code/index.ts

@@ -0,0 +1,6 @@
+import './qr-code.css';
+import QrCode from './qr-code.svelte';
+
+export default QrCode;
+export type { QrCodeErrorCorrectionLevel, QrCodeProps } from './qr-code.types.ts';
+export { QrCode };

package/src/components/qr-code/qr-code.css

@@ -0,0 +1,40 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-qr-code {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--cinder-radius-md);
+    color: #000; /* cinder-allow-raw-color: structural-pattern — QR requires fixed dark-on-light polarity for scanner reliability across all themes */
+    background: #fff; /* cinder-allow-raw-color: structural-pattern — QR requires fixed dark-on-light polarity for scanner reliability across all themes */
+    overflow: hidden;
+  }
+
+  .cinder-qr-code svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .cinder-qr-code__placeholder {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: inherit;
+    background: var(--cinder-surface-inset);
+  }
+
+  .cinder-qr-code__placeholder[data-cinder-state='error'] {
+    color: var(--cinder-danger);
+    border: 1px solid var(--cinder-danger);
+    background: var(--cinder-color-danger-bg, var(--cinder-surface-inset));
+  }
+
+  .cinder-qr-code__error-mark {
+    font-size: 1rem;
+    font-weight: var(--cinder-font-semibold);
+    line-height: 1;
+  }
+}

package/src/components/qr-code/qr-code.examples.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "qr-code",
+  "import": "@lostgradient/cinder/qr-code",
+  "examples": [
+    {
+      "id": "basic",
+      "title": "Share link QR code",
+      "description": "Render a scannable URL with an explicit accessible label.",
+      "code": "<script lang=\"ts\">\n  import { QrCode } from '@lostgradient/cinder/qr-code';\n</script>\n\n<QrCode value=\"https://cinder.design/components\" label=\"Scan to open the cinder components page\" />\n"
+    },
+    {
+      "id": "sizing-and-levels",
+      "title": "Size and error correction",
+      "description": "Compare QR size and recovery level for short and long payloads.",
+      "code": "<script lang=\"ts\">\n  import { QrCode } from '@lostgradient/cinder/qr-code';\n</script>\n\n<div style=\"display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem;\">\n  <QrCode\n    value=\"otpauth://totp/cinder?secret=ABC123DEF456&issuer=Cinder\"\n    size={128}\n    errorCorrectionLevel=\"L\"\n  />\n  <QrCode\n    value=\"https://cinder.design/docs/advanced/accessibility?source=playground\"\n    size={200}\n    errorCorrectionLevel=\"H\"\n  />\n</div>\n"
+    }
+  ]
+}

package/src/components/qr-code/qr-code.svelte

@@ -0,0 +1,160 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category data-display
+   * @status beta
+   * @purpose Encodes a string payload as an inline SVG QR code with an explicit accessible label.
+   * @tag qr-code
+   * @tag sharing
+   * @useWhen Presenting a scannable URL, token, or Wi-Fi credential that users can scan from another device.
+   * @useWhen You need a theme-aware QR graphic that stays crisp at any scale.
+   * @avoidWhen You only need to expose a copyable short text value without camera scanning affordance. | copy-button
+   * @avoidWhen The payload is sensitive and should never be displayed as machine-readable visual data.
+   * @related copy-button, share-card
+   */
+  export type { QrCodeErrorCorrectionLevel, QrCodeProps } from './qr-code.types.ts';
+</script>
+
+<script lang="ts">
+  import QRCode from 'qrcode';
+
+  import { classNames } from '../../utilities/class-names.ts';
+
+  import type { QrCodeProps } from './qr-code.types.ts';
+
+  let {
+    value,
+    label,
+    size = 160,
+    margin = 4,
+    errorCorrectionLevel = 'M',
+    class: customClassName,
+    ...rest
+  }: QrCodeProps = $props();
+
+  const mergedClassName = $derived(classNames('cinder-qr-code', customClassName));
+  const resolvedSize = $derived(Number.isFinite(size) && size > 0 ? size : 160);
+  const resolvedMargin = $derived(Number.isFinite(margin) && margin >= 0 ? Math.floor(margin) : 4);
+  const safeLabel = $derived(
+    typeof label === 'string' && label.trim().length > 0 ? label.trim() : 'QR code',
+  );
+
+  function svgCommand(command: string, x: number, y: number | undefined = undefined): string {
+    return typeof y === 'number' ? `${command}${x} ${y}` : `${command}${x}`;
+  }
+
+  function qrModulesToPath(
+    data: ArrayLike<boolean | number>,
+    moduleSize: number,
+    marginSize: number,
+  ): string {
+    let path = '';
+    let moveBy = 0;
+    let newRow = false;
+    let lineLength = 0;
+
+    for (let index = 0; index < data.length; index += 1) {
+      const column = Math.floor(index % moduleSize);
+      const row = Math.floor(index / moduleSize);
+
+      if (!column && !newRow) newRow = true;
+
+      if (data[index]) {
+        lineLength += 1;
+
+        if (!(index > 0 && column > 0 && data[index - 1])) {
+          path += newRow
+            ? svgCommand('M', column + marginSize, 0.5 + row + marginSize)
+            : svgCommand('m', moveBy, 0);
+          moveBy = 0;
+          newRow = false;
+        }
+
+        if (!(column + 1 < moduleSize && data[index + 1])) {
+          path += svgCommand('h', lineLength);
+          lineLength = 0;
+        }
+      } else {
+        moveBy += 1;
+      }
+    }
+
+    return path;
+  }
+
+  function renderSvgData(
+    modules: ArrayLike<boolean | number>,
+    moduleSize: number,
+    marginSize: number,
+  ): { pathData: string; viewBox: string } {
+    const qrSize = moduleSize + marginSize * 2;
+    return {
+      pathData: qrModulesToPath(modules, moduleSize, marginSize),
+      viewBox: `0 0 ${qrSize} ${qrSize}`,
+    };
+  }
+
+  const qrGenerationResult = $derived.by(() => {
+    try {
+      const qrData = QRCode.create(value, { errorCorrectionLevel });
+      const svgData = renderSvgData(qrData.modules.data, qrData.modules.size, resolvedMargin);
+
+      return {
+        pathData: svgData.pathData,
+        viewBox: svgData.viewBox,
+        generationFailed: false,
+      };
+    } catch {
+      return {
+        pathData: '',
+        viewBox: '0 0 0 0',
+        generationFailed: true,
+      };
+    }
+  });
+  const pathData = $derived(qrGenerationResult.pathData);
+  const viewBox = $derived(qrGenerationResult.viewBox);
+  const generationFailed = $derived(qrGenerationResult.generationFailed);
+  const resolvedRole = $derived(generationFailed ? 'status' : 'img');
+  const resolvedAriaLabel = $derived(generationFailed ? 'Unable to render QR code' : safeLabel);
+  const resolvedAriaLive = $derived(generationFailed ? 'polite' : undefined);
+</script>
+
+<span
+  {...rest}
+  class={mergedClassName}
+  role={resolvedRole}
+  aria-label={resolvedAriaLabel}
+  aria-live={resolvedAriaLive}
+  data-cinder-invalid={generationFailed ? 'true' : undefined}
+  data-cinder-state={generationFailed ? 'error' : 'ready'}
+  style:inline-size={`${resolvedSize}px`}
+  style:block-size={`${resolvedSize}px`}
+>
+  {#if pathData.length > 0}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={resolvedSize}
+      height={resolvedSize}
+      {viewBox}
+      shape-rendering="crispEdges"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path fill="none" stroke="currentColor" d={pathData} />
+    </svg>
+  {:else}
+    <span
+      class="cinder-qr-code__placeholder"
+      data-cinder-state={generationFailed ? 'error' : 'ready'}
+      aria-hidden="true"
+    >
+      {#if generationFailed}
+        <span class="cinder-qr-code__error-mark">!</span>
+      {/if}
+    </span>
+    {#if generationFailed}
+      <span class="cinder-sr-only">Unable to render QR code.</span>
+    {/if}
+  {/if}
+</span>

package/src/components/qr-code/qr-code.types.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+export type QrCodeErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+
+/** Props for the QrCode component. */
+export type QrCodeProps = Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  'aria-label' | 'aria-live' | 'children' | 'class' | 'role'
+> & {
+  /** Text payload encoded into the QR code matrix. */
+  value: string;
+  /** Accessible label announced for the QR image. Defaults to `QR code`. */
+  label?: string;
+  /** Square pixel size of the rendered QR code. @default 160 */
+  size?: number;
+  /** Quiet-zone width in QR modules. @default 4 */
+  margin?: number;
+  /** QR error correction level. @default "M" */
+  errorCorrectionLevel?: QrCodeErrorCorrectionLevel;
+  class?: string;
+};
+
+export interface QrCodeSchemaProps {
+  /** Text payload encoded into the QR code matrix. */
+  value: string;
+  /** Accessible label announced for the QR image. @default `QR code` */
+  label?: string;
+  /** Square pixel size of the rendered QR code. @default 160 */
+  size?: number;
+  /** Quiet-zone width in QR modules. @default 4 */
+  margin?: number;
+  /** QR error correction level. @default "M" */
+  errorCorrectionLevel?: QrCodeErrorCorrectionLevel;
+  /** Custom class merged with `.cinder-qr-code`. */
+  class?: string;
+}

package/src/components/resizable-panels/resizable-panels-sizing.ts

@@ -93,38 +93,50 @@ function formatSizeSignature(size: ResizablePanelSize | undefined): string {
 }
 
 export function getPaneLayoutSignature(panes: ResizablePanelDefinition[]): string {
-  return panes
-    .map((pane) =>
+  const paneSignatures: string[] = [];
+  for (const pane of panes) {
+    const snapPointSignatures: string[] = [];
+    for (const size of pane.snapPoints ?? []) {
+      snapPointSignatures.push(formatSizeSignature(size));
+    }
+    paneSignatures.push(
       [
         pane.id,
         formatSizeSignature(pane.defaultSize),
         formatSizeSignature(pane.minSize),
         formatSizeSignature(pane.maxSize),
-        (pane.snapPoints ?? []).map((size) => formatSizeSignature(size)).join(','),
+        snapPointSignatures.join(','),
         pane.collapsible ? '1' : '0',
         pane.defaultCollapsed ? '1' : '0',
       ].join('|'),
-    )
-    .join('||');
+    );
+  }
+  return paneSignatures.join('||');
 }
 
 export function getPaneDefaultSizeSignature(panes: ResizablePanelDefinition[]): string {
-  return panes.map((pane) => [pane.id, formatSizeSignature(pane.defaultSize)].join('|')).join('||');
+  const paneSignatures: string[] = [];
+  for (const pane of panes) {
+    paneSignatures.push([pane.id, formatSizeSignature(pane.defaultSize)].join('|'));
+  }
+  return paneSignatures.join('||');
 }
 
 function getPanelConstraints(
   panes: ResizablePanelDefinition[],
   availablePanePixels: number,
 ): PanelConstraints[] {
-  return panes.map((pane) => {
+  const constraints: PanelConstraints[] = [];
+  for (const pane of panes) {
     const minimum = resolveSizeToPixels(pane.minSize, availablePanePixels) ?? 0;
     const maximum =
       resolveSizeToPixels(pane.maxSize, availablePanePixels) ?? Number.POSITIVE_INFINITY;
-    return {
+    constraints.push({
       minPixels: Math.max(0, minimum),
       maxPixels: Math.max(Math.max(0, minimum), maximum),
-    };
-  });
+    });
+  }
+  return constraints;
 }
 
 function distributeDelta(
@@ -134,7 +146,11 @@ function distributeDelta(
   direction: 'grow' | 'shrink',
 ): number[] {
   const nextSizes = [...sizes];
-  let remaining = targetTotal - nextSizes.reduce((sum, value) => sum + value, 0);
+  let currentTotal = 0;
+  for (const value of nextSizes) {
+    currentTotal += value;
+  }
+  let remaining = targetTotal - currentTotal;
 
   if (Math.abs(remaining) < 0.001) return nextSizes;
 
@@ -143,13 +159,18 @@ function distributeDelta(
 
   while (Math.abs(remaining) > 0.001 && guard < 1000) {
     guard += 1;
-    const availableIndexes = capacities
-      .map((capacity, index) => ({ capacity, index }))
-      .filter(({ capacity }) => capacity > 0.001);
+    const availableIndexes: Array<{ capacity: number; index: number }> = [];
+    for (let index = 0; index < capacities.length; index++) {
+      const capacity = capacities[index] ?? 0;
+      if (capacity > 0.001) availableIndexes.push({ capacity, index });
+    }
 
     if (availableIndexes.length === 0) break;
 
-    const totalCapacity = availableIndexes.reduce((sum, item) => sum + item.capacity, 0);
+    let totalCapacity = 0;
+    for (const item of availableIndexes) {
+      totalCapacity += item.capacity;
+    }
     let consumedThisPass = 0;
 
     for (const { capacity, index } of availableIndexes) {
@@ -169,25 +190,37 @@ function distributeDelta(
 }
 
 function scaleSizesToTotal(sizes: number[], targetTotal: number): number[] {
-  if (targetTotal <= 0) return sizes.map(() => 0);
-
-  const currentTotal = sizes.reduce((sum, value) => sum + value, 0);
-  if (currentTotal <= 0) {
-    const equalShare = sizes.length > 0 ? targetTotal / sizes.length : 0;
-    return sizes.map(() => equalShare);
+  if (targetTotal <= 0) {
+    const zeroSizes: number[] = [];
+    for (let index = 0; index < sizes.length; index++) {
+      zeroSizes.push(0);
+    }
+    return zeroSizes;
   }
 
+  let total = 0;
+  for (const value of sizes) {
+    total += value;
+  }
+  const currentTotal = total > 0 ? total : 1;
   const scale = targetTotal / currentTotal;
-  return sizes.map((size) => size * scale);
+  const scaledSizes: number[] = [];
+  for (const size of sizes) {
+    scaledSizes.push(size * scale);
+  }
+  return scaledSizes;
 }
 
 function applyCollapsedConstraints(
   constraints: PanelConstraints[],
   collapsedFlags: boolean[],
 ): PanelConstraints[] {
-  return constraints.map((constraint, index) =>
-    collapsedFlags[index] ? { minPixels: 0, maxPixels: 0 } : constraint,
-  );
+  const nextConstraints: PanelConstraints[] = [];
+  for (let index = 0; index < constraints.length; index++) {
+    const constraint = constraints[index]!;
+    nextConstraints.push(collapsedFlags[index] ? { minPixels: 0, maxPixels: 0 } : constraint);
+  }
+  return nextConstraints;
 }
 
 function normalizeToAvailable(
@@ -197,50 +230,62 @@ function normalizeToAvailable(
   collapsedFlags: boolean[] = [],
 ): number[] {
   const effectiveConstraints = applyCollapsedConstraints(constraints, collapsedFlags);
-  const clampedSizes = desiredSizes.map((size, index) =>
-    clamp(size, effectiveConstraints[index]!.minPixels, effectiveConstraints[index]!.maxPixels),
-  );
+  const clampedSizes: number[] = [];
+  for (let index = 0; index < desiredSizes.length; index++) {
+    const size = desiredSizes[index] ?? 0;
+    clampedSizes.push(
+      clamp(size, effectiveConstraints[index]!.minPixels, effectiveConstraints[index]!.maxPixels),
+    );
+  }
 
-  const minimumTotal = effectiveConstraints.reduce(
-    (sum, constraint) => sum + constraint.minPixels,
-    0,
-  );
+  let minimumTotal = 0;
+  for (const constraint of effectiveConstraints) {
+    minimumTotal += constraint.minPixels;
+  }
   if (minimumTotal > availablePanePixels) {
-    return scaleSizesToTotal(
-      effectiveConstraints.map((constraint) => constraint.minPixels),
-      availablePanePixels,
-    );
+    const minimumSizes: number[] = [];
+    for (const constraint of effectiveConstraints) {
+      minimumSizes.push(constraint.minPixels);
+    }
+    return scaleSizesToTotal(minimumSizes, availablePanePixels);
   }
 
-  const finiteMaximums = effectiveConstraints.map((constraint) => constraint.maxPixels);
-  if (finiteMaximums.every(Number.isFinite)) {
-    const maximumTotal = finiteMaximums.reduce((sum, value) => sum + value, 0);
-    if (maximumTotal > 0 && maximumTotal < availablePanePixels) {
-      return scaleSizesToTotal(finiteMaximums, availablePanePixels);
+  const finiteMaximums: number[] = [];
+  let maximumTotal = 0;
+  for (const constraint of effectiveConstraints) {
+    finiteMaximums.push(constraint.maxPixels);
+    if (Number.isFinite(constraint.maxPixels)) {
+      maximumTotal += constraint.maxPixels;
+    } else {
+      maximumTotal = Number.POSITIVE_INFINITY;
     }
   }
+  if (maximumTotal === 0) return finiteMaximums;
+  if (maximumTotal < availablePanePixels)
+    return scaleSizesToTotal(finiteMaximums, availablePanePixels);
 
-  const currentTotal = clampedSizes.reduce((sum, value) => sum + value, 0);
+  let currentTotal = 0;
+  for (const value of clampedSizes) {
+    currentTotal += value;
+  }
   if (currentTotal < availablePanePixels) {
-    return distributeDelta(
-      clampedSizes,
-      availablePanePixels,
-      effectiveConstraints.map((constraint, index) =>
-        Math.max(0, constraint.maxPixels - clampedSizes[index]!),
-      ),
-      'grow',
-    );
+    const growCapacities: number[] = [];
+    for (let index = 0; index < effectiveConstraints.length; index++) {
+      growCapacities.push(
+        Math.max(0, effectiveConstraints[index]!.maxPixels - clampedSizes[index]!),
+      );
+    }
+    return distributeDelta(clampedSizes, availablePanePixels, growCapacities, 'grow');
   }
 
   if (currentTotal > availablePanePixels) {
-    return distributeDelta(
-      clampedSizes,
-      availablePanePixels,
-      effectiveConstraints.map((constraint, index) =>
-        Math.max(0, clampedSizes[index]! - constraint.minPixels),
-      ),
-      'shrink',
-    );
+    const shrinkCapacities: number[] = [];
+    for (let index = 0; index < effectiveConstraints.length; index++) {
+      shrinkCapacities.push(
+        Math.max(0, clampedSizes[index]! - effectiveConstraints[index]!.minPixels),
+      );
+    }
+    return distributeDelta(clampedSizes, availablePanePixels, shrinkCapacities, 'shrink');
   }
 
   return clampedSizes;

package/src/components/review-editor/review-editor-front-matter.ts

@@ -97,9 +97,8 @@ export function parseYamlFieldValue(raw: string): ParsedYamlValue {
   return { valid: true, value: parsed.data?.['value'] };
 }
 
-export function documentPositionToBodyPosition(position: number, bodyOffset: number): number {
-  return Math.max(0, position - bodyOffset);
-}
+export const documentPositionToBodyPosition = (position: number, bodyOffset: number): number =>
+  Math.max(0, position - bodyOffset);
 
 export function bodyPositionToDocumentPosition(position: number, bodyOffset: number): number {
   return position + bodyOffset;

package/src/components/schema-form/schema-form-validation.ts

@@ -44,13 +44,12 @@ async function validateJsonSchemaValue(
     const result = validate(value) as unknown;
     valid = isPromiseLike(result) ? (await result, true) : result;
   } catch (error) {
-    if (isAjvValidationError(error)) {
+    if (isAjvValidationError(error))
       return {
         valid: false,
         value,
         issues: ajvIssues(error.errors),
       };
-    }
 
     return validationFailure(value, readableSchemaError(error));
   }

package/src/components/segmented-control/segmented-control.css

@@ -8,11 +8,23 @@
     display: inline-flex;
     flex-direction: column;
     gap: var(--cinder-space-2);
+    /* `inline-flex` only governs how THIS element lays out its own children —
+       it does nothing to stop an ancestor from stretching this element's own
+       box. A CSS Grid cell (or a flex row with the default align-items:
+       stretch) will still stretch it to fill the full cross-size, leaving the
+       pill's border/background way wider than its buttons. Pin it to its
+       content so it only goes full-width when explicitly requested via
+       data-cinder-full-width below. */
+    inline-size: fit-content;
   }
 
   .cinder-segmented-control-container:has([data-cinder-full-width]) {
     display: flex;
-    width: 100%;
+    /* Logical, not physical `width` — mixing the two for the same axis on one
+       element is ambiguous. Using inline-size throughout means this cleanly
+       overrides the base rule's inline-size:fit-content via normal cascade
+       (higher specificity), with no physical/logical conflict. */
+    inline-size: 100%;
   }
 
   .cinder-segmented-control-label {

package/src/components/sparkbar/index.ts

@@ -0,0 +1,6 @@
+import './sparkbar.css';
+import Sparkbar from './sparkbar.svelte';
+
+export default Sparkbar;
+export type { SparkbarProps, SparkbarSize, SparkbarVariant } from './sparkbar.types.ts';
+export { Sparkbar };