@lostgradient/cinder 0.5.0 → 0.7.0

package/src/components/card/card.examples.json

@@ -9,6 +9,18 @@
       "description": "A plain bordered card with a single body region.",
       "code": "<script lang=\"ts\">\n  import { Card } from '@lostgradient/cinder/card';\n</script>\n\n<Card>\n  <div\n    style=\"min-block-size: 8rem; border: 1px dashed var(--cinder-border-muted); border-radius: var(--cinder-radius-sm); background: repeating-linear-gradient(-45deg, transparent, transparent 0.5rem, color-mix(in oklch, var(--cinder-border-muted), transparent 70%) 0.5rem, color-mix(in oklch, var(--cinder-border-muted), transparent 70%) 0.5625rem);\"\n  ></div>\n</Card>\n"
     },
+    {
+      "id": "danger-zone-action",
+      "title": "Danger zone action",
+      "description": "A destructive action inside a danger-tone Card with the confirmation flow delegated to ConfirmDialog.",
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { Card } from '@lostgradient/cinder/card';\n  import { ConfirmDialog } from '@lostgradient/cinder/confirm-dialog';\n\n  let open = $state(false);\n  let triggerRef: HTMLElement | null = $state(null);\n  let deleted = $state(false);\n</script>\n\n<Card\n  tone=\"danger\"\n  title=\"Delete project\"\n  description=\"Permanently removes project settings, review history, and saved automation rules.\"\n>\n  <p style=\"margin: 0; color: var(--cinder-text-subtle); font-size: var(--cinder-text-sm);\">\n    {deleted\n      ? 'The deletion flow completed.'\n      : 'Export any data you need before deleting this project.'}\n  </p>\n\n  {#snippet footer()}\n    <Button\n      variant=\"danger\"\n      label=\"Delete project\"\n      disabled={deleted}\n      onclick={(event) => {\n        triggerRef = event.currentTarget as HTMLElement;\n        open = true;\n      }}\n    />\n  {/snippet}\n</Card>\n\n<ConfirmDialog\n  bind:open\n  {triggerRef}\n  title=\"Delete this project?\"\n  description=\"This action is permanent. Project settings, review history, and automation rules cannot be restored.\"\n  destructive\n  confirmLabel=\"Delete project\"\n  onconfirm={() => (deleted = true)}\n  oncancel={() => (open = false)}\n/>\n"
+    },
+    {
+      "id": "danger-zone-toggle",
+      "title": "Danger zone setting",
+      "description": "A high-risk settings card with container-level danger treatment, a switch, and a confirmation dialog before the risky state is applied.",
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { Card } from '@lostgradient/cinder/card';\n  import { ConfirmDialog } from '@lostgradient/cinder/confirm-dialog';\n  import { Toggle } from '@lostgradient/cinder/toggle';\n\n  let paused = $state(false);\n  let confirmOpen = $state(false);\n\n  function requestPause(next: boolean): boolean {\n    if (!next) return false;\n    confirmOpen = true;\n    return paused;\n  }\n</script>\n\n<Card\n  tone=\"danger\"\n  title=\"Pause reviews\"\n  description=\"Stops new review dispatch globally. Existing in-flight reviews can finish, but no new work will be assigned until reviews are resumed.\"\n>\n  <div style=\"display: grid; gap: var(--cinder-space-3);\">\n    <Toggle\n      id=\"pause-reviews\"\n      bind:checked={paused}\n      label=\"Reviews paused\"\n      onValueChange={requestPause}\n    />\n    <p style=\"margin: 0; color: var(--cinder-text-subtle); font-size: var(--cinder-text-sm);\">\n      Current state: <strong>{paused ? 'Paused' : 'Dispatching reviews'}</strong>\n    </p>\n  </div>\n\n  {#snippet footer()}\n    {#if paused}\n      <Button variant=\"secondary\" label=\"Resume reviews\" onclick={() => (paused = false)} />\n    {/if}\n  {/snippet}\n</Card>\n\n<ConfirmDialog\n  bind:open={confirmOpen}\n  title=\"Pause review dispatch?\"\n  description=\"This affects every repository connected to the workspace. New reviews will stop until an administrator resumes dispatch.\"\n  destructive\n  confirmLabel=\"Pause reviews\"\n  onconfirm={() => (paused = true)}\n  oncancel={() => (confirmOpen = false)}\n/>\n"
+    },
     {
       "id": "edge-to-edge-mobile",
       "title": "Card, edge-to-edge on mobile",

package/src/components/card/card.schema.json

@@ -0,0 +1,64 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "title": {
+      "type": "string",
+      "description": "Primary heading text rendered inside the card's header region."
+    },
+    "variant": {
+      "enum": ["card", "well"],
+      "description": "Visual container style. `card` is raised; `well` is flatter and inset."
+    },
+    "tone": {
+      "enum": ["default", "danger"],
+      "description": "Container risk treatment. `danger` renders a danger-zone surface for high-risk settings or destructive actions."
+    },
+    "bodyTone": {
+      "enum": ["default", "muted"],
+      "description": "Body surface treatment. `muted` renders a grey/inset body region."
+    },
+    "footerTone": {
+      "enum": ["default", "muted"],
+      "description": "Footer surface treatment. `muted` renders a grey/inset footer region."
+    },
+    "edgeToEdgeOnMobile": {
+      "type": "boolean",
+      "description": "Remove side borders/radius and bleed to the viewport edge on narrow screens."
+    },
+    "padding": {
+      "enum": ["none", "default"],
+      "description": "Body padding. `none` removes all padding for flush or full-bleed content (e.g. an image)."
+    },
+    "headingLevel": {
+      "enum": [2, 3, 4, 5, 6],
+      "description": "Heading level for the generated title. Defaults to `3`. Set this so the\ncard title nests correctly within the surrounding document outline."
+    },
+    "description": {
+      "type": "string",
+      "description": "Optional subheading rendered as a paragraph below the title inside the header."
+    }
+  },
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "children",
+        "reason": "function-or-snippet",
+        "required": true
+      },
+      {
+        "name": "class",
+        "reason": "unknown-shape"
+      },
+      {
+        "name": "footer",
+        "reason": "function-or-snippet"
+      },
+      {
+        "name": "header",
+        "reason": "function-or-snippet"
+      }
+    ]
+  }
+}

package/src/components/card/card.schema.ts

@@ -0,0 +1,71 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    title: {
+      type: 'string',
+      description: "Primary heading text rendered inside the card's header region.",
+    },
+    variant: {
+      enum: ['card', 'well'],
+      description: 'Visual container style. `card` is raised; `well` is flatter and inset.',
+    },
+    tone: {
+      enum: ['default', 'danger'],
+      description:
+        'Container risk treatment. `danger` renders a danger-zone surface for high-risk settings or destructive actions.',
+    },
+    bodyTone: {
+      enum: ['default', 'muted'],
+      description: 'Body surface treatment. `muted` renders a grey/inset body region.',
+    },
+    footerTone: {
+      enum: ['default', 'muted'],
+      description: 'Footer surface treatment. `muted` renders a grey/inset footer region.',
+    },
+    edgeToEdgeOnMobile: {
+      type: 'boolean',
+      description: 'Remove side borders/radius and bleed to the viewport edge on narrow screens.',
+    },
+    padding: {
+      enum: ['none', 'default'],
+      description:
+        'Body padding. `none` removes all padding for flush or full-bleed content (e.g. an image).',
+    },
+    headingLevel: {
+      enum: [2, 3, 4, 5, 6],
+      description:
+        'Heading level for the generated title. Defaults to `3`. Set this so the\ncard title nests correctly within the surrounding document outline.',
+    },
+    description: {
+      type: 'string',
+      description: 'Optional subheading rendered as a paragraph below the title inside the header.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        required: true,
+      },
+      {
+        name: 'class',
+        reason: 'unknown-shape',
+      },
+      {
+        name: 'footer',
+        reason: 'function-or-snippet',
+      },
+      {
+        name: 'header',
+        reason: 'function-or-snippet',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/card/card.svelte

@@ -1,62 +1,43 @@
 <script lang="ts" module>
-  /**
-   * @cinder
-   * @category layout
-   * @status stable
-   * @purpose Surface container that groups related content with optional header, title, description, and footer regions.
-   * @tag layout
-   * @tag container
-   * @useWhen Grouping a self-contained unit of content such as a summary, preview, or settings panel.
-   * @useWhen Composing a list of comparable items where each needs its own framed region.
-   * @avoidWhen Rendering a bare visual surface without slotted regions — use surface instead.
-   * @avoidWhen Presenting a single key metric — use stat or stat-group instead.
-   * @related surface, stat, stacked-list-item, section-heading
-   */
-  export type {
-    CardHeadingLevel,
-    CardPadding,
-    CardProps,
-    CardTone,
-    CardVariant,
-  } from './card.types.ts';
+export {};
 </script>
 
 <script lang="ts">
-  import type { CardProps } from './card.types.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-
-  let {
-    class: className,
-    children,
-    header,
-    title,
-    headingLevel = 3,
-    description,
-    footer,
-    variant = 'card',
-    bodyTone = 'default',
-    footerTone = 'default',
-    edgeToEdgeOnMobile = false,
-    padding = 'default',
-    ...rest
-  }: CardProps = $props();
-
-  // Coerce + clamp at runtime: a consumer can pass 0, 7, NaN, or a non-numeric
-  // value (JS callers, schema-driven usage). Building `h${headingLevel}` directly
-  // would emit invalid markup like <h0>/<hNaN>. Matches EmptyState's heading clamp.
-  const resolvedHeadingLevel = $derived(
-    Number.isFinite(Math.trunc(Number(headingLevel)))
-      ? Math.min(6, Math.max(1, Math.trunc(Number(headingLevel))))
-      : 3,
-  );
-  const titleTag = $derived(`h${resolvedHeadingLevel}` as const);
+import CircleAlert from 'lucide-svelte/icons/circle-alert';
+import { composeDescribedBy } from '../../_internal/field-control.ts';
+import { classNames } from '../../utilities/class-names.ts';
+const generatedId = $props.id();
+let { class: className, children, header, title, headingLevel = 3, description, footer, variant = 'card', tone = 'default', bodyTone = 'default', footerTone = 'default', edgeToEdgeOnMobile = false, padding = 'default', ...rest } = $props();
+// Coerce + clamp at runtime: a consumer can pass 0, 7, NaN, or a non-numeric
+// value (JS callers, schema-driven usage). Building `h${headingLevel}` directly
+// would emit invalid markup like <h0>/<hNaN>. Matches EmptyState's heading clamp.
+const resolvedHeadingLevel = $derived(Number.isFinite(Math.trunc(Number(headingLevel)))
+    ? Math.min(6, Math.max(1, Math.trunc(Number(headingLevel))))
+    : 3);
+const titleTag = $derived(`h${resolvedHeadingLevel}`);
+const hasGeneratedHeader = $derived(Boolean(title && !header));
+const titleId = $derived(hasGeneratedHeader ? `${generatedId}-title` : undefined);
+const descriptionId = $derived(hasGeneratedHeader && description ? `${generatedId}-description` : undefined);
+const hasExternalRole = $derived(typeof rest.role === 'string' && rest.role.trim().length > 0);
+const hasExternalLabel = $derived((typeof rest['aria-labelledby'] === 'string' && rest['aria-labelledby'].trim().length > 0) ||
+    (typeof rest['aria-label'] === 'string' && rest['aria-label'].trim().length > 0));
+const describedBy = $derived(composeDescribedBy(descriptionId, rest['aria-describedby']));
+const labelAttributes = $derived(hasGeneratedHeader
+    ? {
+        ...(!hasExternalRole ? { role: 'group' } : {}),
+        ...(!hasExternalLabel ? { 'aria-labelledby': titleId } : {}),
+        ...(describedBy ? { 'aria-describedby': describedBy } : {}),
+    }
+    : {});
 </script>
 
 <div
+  {...rest}
   class={classNames('cinder-card', className)}
   data-cinder-variant={variant}
+  data-cinder-tone={tone}
   data-cinder-edge-to-edge-mobile={edgeToEdgeOnMobile ? '' : undefined}
-  {...rest}
+  {...labelAttributes}
 >
   {#if header}
     <div class="cinder-card__header">
@@ -64,9 +45,18 @@
     </div>
   {:else if title}
     <div class="cinder-card__header">
-      <svelte:element this={titleTag} class="cinder-card__title">{title}</svelte:element>
+      <div class="cinder-card__title-row">
+        {#if tone === 'danger'}
+          <span class="cinder-card__risk-icon" aria-hidden="true">
+            <CircleAlert size={18} strokeWidth={2.25} />
+          </span>
+        {/if}
+        <svelte:element this={titleTag} id={titleId} class="cinder-card__title"
+          >{title}</svelte:element
+        >
+      </div>
       {#if description}
-        <p class="cinder-card__description">{description}</p>
+        <p id={descriptionId} class="cinder-card__description">{description}</p>
       {/if}
     </div>
   {/if}

package/src/components/card/card.types.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export type CardVariant = 'card' | 'well';
 export type CardTone = 'default' | 'muted';
+export type CardSurfaceTone = 'default' | 'danger';
 /** Controls body padding. `none` removes all padding for flush/full-bleed content. Future values like `compact` may be added. */
 export type CardPadding = 'default' | 'none';
 /** Heading level for the generated card title, so the document outline stays correct. */
@@ -10,6 +11,8 @@ type CardBase = HTMLAttributes<HTMLDivElement> & {
   class?: string;
   /** Visual container style. `card` is raised; `well` is flatter and inset. */
   variant?: CardVariant;
+  /** Container risk treatment. `danger` renders a danger-zone surface for high-risk settings or destructive actions. */
+  tone?: CardSurfaceTone;
   /** Body surface treatment. `muted` renders a grey/inset body region. */
   bodyTone?: CardTone;
   /** Footer surface treatment. `muted` renders a grey/inset footer region. */

package/src/components/card/card.variables.json

@@ -0,0 +1 @@
+["--cinder-card-mobile-bleed"]

package/src/components/card/card.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = ['--cinder-card-mobile-bleed'];
+
+export default variables;

package/src/components/card/index.ts

@@ -2,5 +2,11 @@ import './card.css';
 import Card from './card.svelte';
 
 export default Card;
-export type { CardPadding, CardProps, CardTone, CardVariant } from './card.types.ts';
+export type {
+  CardPadding,
+  CardProps,
+  CardSurfaceTone,
+  CardTone,
+  CardVariant,
+} from './card.types.ts';
 export { Card };

package/src/components/carousel/carousel.schema.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "activeIndex": {
+      "type": "number",
+      "description": "Zero-based active index (bindable)."
+    },
+    "autoplay": {
+      "type": "boolean",
+      "description": "Enables interval-based auto-advance."
+    },
+    "autoplayInterval": {
+      "type": "number",
+      "description": "Milliseconds between auto-advance ticks."
+    },
+    "label": {
+      "type": "string",
+      "description": "Accessible name for the carousel region."
+    },
+    "description": {
+      "type": "string",
+      "description": "Optional accessible description linked to the region."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional classes merged onto the root element."
+    }
+  },
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "controlLabels",
+        "reason": "unknown-shape",
+        "description": "Override labels for controls and picker."
+      },
+      {
+        "name": "slides",
+        "reason": "unknown-shape",
+        "required": true,
+        "description": "Ordered list of slides."
+      }
+    ]
+  }
+}

package/src/components/carousel/carousel.schema.ts

@@ -0,0 +1,50 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    activeIndex: {
+      type: 'number',
+      description: 'Zero-based active index (bindable).',
+    },
+    autoplay: {
+      type: 'boolean',
+      description: 'Enables interval-based auto-advance.',
+    },
+    autoplayInterval: {
+      type: 'number',
+      description: 'Milliseconds between auto-advance ticks.',
+    },
+    label: {
+      type: 'string',
+      description: 'Accessible name for the carousel region.',
+    },
+    description: {
+      type: 'string',
+      description: 'Optional accessible description linked to the region.',
+    },
+    class: {
+      type: 'string',
+      description: 'Additional classes merged onto the root element.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'controlLabels',
+        reason: 'unknown-shape',
+        description: 'Override labels for controls and picker.',
+      },
+      {
+        name: 'slides',
+        reason: 'unknown-shape',
+        required: true,
+        description: 'Ordered list of slides.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/carousel/carousel.svelte

@@ -1,134 +1,96 @@
 <script lang="ts" module>
-  /**
-   * @cinder
-   * @category navigation
-   * @status beta
-   * @purpose Rotating content viewport with previous/next controls, picker dots, and optional autoplay.
-   * @tag navigation
-   * @tag carousel
-   * @tag media
-   * @useWhen Presenting a finite set of visual highlights with sequential browsing controls.
-   * @useWhen Cycling between promotional or tutorial panels inside a single region.
-   * @avoidWhen Content should remain simultaneously visible and scannable. | grid
-   * @avoidWhen You only need one static hero panel with no sequence controls.
-   * @related image, aspect-ratio, masonry
-   * @a11yPattern WAI-ARIA Carousel
-   * @keyboardShortcut ArrowLeft / ArrowRight / Home / End | Moves between slides.
-   * @a11yNote Auto-advance pauses on hover and focus, and is disabled under reduced motion.
-   */
-  export type {
-    CarouselControlLabel,
-    CarouselProps,
-    CarouselSlide,
-    CarouselSlideContent,
-  } from './carousel.types.ts';
+export {};
 </script>
 
 <script lang="ts">
-  import { classNames } from '../../utilities/class-names.ts';
-  import { useReducedMotion } from '../../utilities/use-reduced-motion.svelte.ts';
-  import type { CarouselProps } from './carousel.types.ts';
-
-  const reducedMotion = useReducedMotion();
-  const descriptionId = $props.id();
-
-  let {
-    slides,
-    activeIndex = $bindable(0),
-    autoplay = false,
-    autoplayInterval = 5000,
-    label = 'Carousel',
-    description,
-    controlLabels,
-    class: className,
-    ...rest
-  }: CarouselProps = $props();
-
-  let isHovered = $state(false);
-  let hasFocusWithin = $state(false);
-  let userPaused = $state(false);
-
-  const clampedLength = $derived(slides.length);
-  const currentIndex = $derived.by(() => {
-    if (clampedLength < 1) return 0;
+import { classNames } from '../../utilities/class-names.ts';
+import { useReducedMotion } from '../../utilities/use-reduced-motion.svelte.ts';
+const reducedMotion = useReducedMotion();
+const descriptionId = $props.id();
+let { slides, activeIndex = $bindable(0), autoplay = false, autoplayInterval = 5000, label = 'Carousel', description, controlLabels, class: className, ...rest } = $props();
+let isHovered = $state(false);
+let hasFocusWithin = $state(false);
+let userPaused = $state(false);
+const clampedLength = $derived(slides.length);
+const currentIndex = $derived.by(() => {
+    if (clampedLength < 1)
+        return 0;
     return Math.max(0, Math.min(clampedLength - 1, activeIndex));
-  });
-
-  $effect(() => {
+});
+$effect(() => {
     if (clampedLength < 1) {
-      if (activeIndex !== 0) activeIndex = 0;
-      return;
+        if (activeIndex !== 0)
+            activeIndex = 0;
+        return;
     }
     const normalizedIndex = Math.max(0, Math.min(clampedLength - 1, activeIndex));
-    if (activeIndex !== normalizedIndex) activeIndex = normalizedIndex;
-  });
-
-  const shouldAutoplay = $derived(
-    autoplay &&
-      clampedLength > 1 &&
-      autoplayInterval > 0 &&
-      !reducedMotion.current &&
-      !isHovered &&
-      !hasFocusWithin &&
-      !userPaused,
-  );
-  const liveAnnouncement = $derived.by(() => {
-    if (!slides[currentIndex]) return '';
+    if (activeIndex !== normalizedIndex)
+        activeIndex = normalizedIndex;
+});
+const shouldAutoplay = $derived(autoplay &&
+    clampedLength > 1 &&
+    autoplayInterval > 0 &&
+    !reducedMotion.current &&
+    !isHovered &&
+    !hasFocusWithin &&
+    !userPaused);
+const liveAnnouncement = $derived.by(() => {
+    if (!slides[currentIndex])
+        return '';
     return `Slide ${currentIndex + 1} of ${clampedLength}: ${slides[currentIndex].label}`;
-  });
-
-  $effect(() => {
-    if (!shouldAutoplay) return;
+});
+$effect(() => {
+    if (!shouldAutoplay)
+        return;
     const timer = setInterval(() => {
-      if (clampedLength < 2) return;
-      activeIndex = (currentIndex + 1) % clampedLength;
+        if (clampedLength < 2)
+            return;
+        activeIndex = (currentIndex + 1) % clampedLength;
     }, autoplayInterval);
     return () => clearInterval(timer);
-  });
-
-  function goTo(index: number) {
-    if (clampedLength < 1) return;
+});
+function goTo(index) {
+    if (clampedLength < 1)
+        return;
     activeIndex = ((index % clampedLength) + clampedLength) % clampedLength;
-  }
-
-  function goPrevious() {
+}
+function goPrevious() {
     goTo(currentIndex - 1);
-  }
-
-  function goNext() {
+}
+function goNext() {
     goTo(currentIndex + 1);
-  }
-
-  function onKeydown(event: KeyboardEvent) {
-    if (clampedLength < 2) return;
+}
+function onKeydown(event) {
+    if (clampedLength < 2)
+        return;
     if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      goPrevious();
-      return;
+        event.preventDefault();
+        goPrevious();
+        return;
     }
     if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      goNext();
-      return;
+        event.preventDefault();
+        goNext();
+        return;
     }
     if (event.key === 'Home') {
-      event.preventDefault();
-      goTo(0);
-      return;
+        event.preventDefault();
+        goTo(0);
+        return;
     }
     if (event.key === 'End') {
-      event.preventDefault();
-      goTo(clampedLength - 1);
+        event.preventDefault();
+        goTo(clampedLength - 1);
     }
-  }
-
-  function onFocusOut(event: FocusEvent) {
+}
+function onFocusOut(event) {
     const nextFocus = event.relatedTarget;
     if (nextFocus instanceof Node && event.currentTarget instanceof HTMLElement) {
-      if (event.currentTarget.contains(nextFocus)) return;
+        if (event.currentTarget.contains(nextFocus))
+            return;
     }
     hasFocusWithin = false;
-  }
+}
 </script>
 
 <section
@@ -148,7 +110,11 @@
   {#if description}
     <p id={descriptionId} class="cinder-carousel__sr-only">{description}</p>
   {/if}
-  <p class="cinder-carousel__sr-only" aria-live={shouldAutoplay ? 'off' : 'polite'} aria-atomic="true">
+  <p
+    class="cinder-carousel__sr-only"
+    aria-live={shouldAutoplay ? 'off' : 'polite'}
+    aria-atomic="true"
+  >
     {liveAnnouncement}
   </p>
 

package/src/components/carousel/carousel.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/carousel/carousel.variables.ts

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