@lostgradient/cinder 0.1.1 → 0.3.0

package/dist/components/matrix-chart/matrix-chart.css

@@ -0,0 +1,54 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-matrix-chart {
+    display: grid;
+    gap: var(--cinder-space-3);
+    color: var(--cinder-text);
+  }
+
+  .cinder-matrix-chart__description {
+    margin: 0;
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-matrix-chart__viewport {
+    position: relative;
+  }
+
+  .cinder-matrix-chart svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .cinder-matrix-chart__cell {
+    rx: 2;
+    stroke: var(--cinder-surface);
+    stroke-width: 1.5;
+  }
+
+  .cinder-matrix-chart__cell[data-cinder-active] {
+    filter: brightness(1.15);
+  }
+
+  .cinder-matrix-chart__cell-label {
+    font-size: var(--cinder-text-xs);
+    pointer-events: none;
+  }
+
+  .cinder-matrix-chart__tick-label {
+    fill: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-matrix-chart__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/dist/components/matrix-chart/matrix-chart.schema.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentSchema } from '../../schema-types';
+declare const _default: ComponentSchema;
+export default _default;

package/dist/components/matrix-chart/matrix-chart.schema.js

@@ -0,0 +1,120 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/matrix-chart/matrix-chart.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    label: {
+      type: "string",
+      description: "Accessible label for the chart. Required for screen readers."
+    },
+    description: {
+      type: "string",
+      description: "Optional description rendered below the label."
+    },
+    data: {
+      type: "array",
+      items: {
+        type: "object",
+        additionalProperties: {
+          anyOf: [
+            {
+              type: "string"
+            },
+            {
+              type: "number"
+            },
+            {
+              type: "null"
+            }
+          ]
+        }
+      },
+      description: "Rows of data. Each row must include the keys named by the `xField`, `yField`, and `valueField` props."
+    },
+    xField: {
+      type: "string",
+      description: "Key on each datum used for the x-axis (columns)."
+    },
+    yField: {
+      type: "string",
+      description: "Key on each datum used for the y-axis (rows)."
+    },
+    valueField: {
+      type: "string",
+      description: "Key on each datum used for the numeric cell value."
+    },
+    colorScale: {
+      enum: ["sequential", "diverging"],
+      description: "Color interpolation scale. Default `sequential`."
+    },
+    showCellLabels: {
+      type: "boolean",
+      description: "Show cell value labels. Default `true`."
+    },
+    height: {
+      type: "number",
+      description: "Pixel height of the chart viewport. Default `280`."
+    },
+    loading: {
+      type: "boolean",
+      description: "Whether the chart is in a loading state. Default `false`."
+    },
+    dataTableCaption: {
+      type: "string",
+      description: "Custom data table caption; falls back to `label`."
+    },
+    dataTableVisibility: {
+      enum: ["screen-reader-only", "visible", "hidden"],
+      description: "Controls data table visibility. Default `screen-reader-only`."
+    },
+    class: {
+      type: "string",
+      description: "Custom class applied to the root element."
+    }
+  },
+  additionalProperties: false,
+  required: ["data", "label", "valueField", "xField", "yField"],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "empty",
+        reason: "function-or-snippet",
+        description: "Snippet rendered when the chart has no data."
+      },
+      {
+        name: "loadingContent",
+        reason: "function-or-snippet",
+        description: "Snippet rendered while the chart is loading."
+      }
+    ]
+  }
+};
+var matrix_chart_schema_default = schema;
+export {
+  matrix_chart_schema_default as default
+};
+
+//# debugId=F12E55EC4A07F51F64756E2164756E21

package/dist/components/matrix-chart/matrix-chart.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @cinder
+ * @category data-display
+ * @status alpha
+ * @purpose Categorical × categorical heatmap for dense analytics, confusion matrices, and correlation grids.
+ * @tag chart
+ * @tag heatmap
+ * @tag matrix
+ * @tag analytics
+ * @useWhen Showing density or magnitude across two categorical dimensions simultaneously.
+ * @useWhen Rendering a confusion matrix where rows are actual classes and columns are predicted classes.
+ * @avoidWhen Showing a continuous trend over time — use line-chart instead.
+ * @avoidWhen Comparing discrete category totals — use bar-chart instead.
+ * @related bar-chart, line-chart, area-chart
+ */
+export type { MatrixChartProps, MatrixChartSchemaProps } from './matrix-chart.types.ts';
+import type { MatrixChartProps } from './matrix-chart.types.ts';
+declare const MatrixChart: import("svelte").Component<MatrixChartProps, {}, "">;
+type MatrixChart = ReturnType<typeof MatrixChart>;
+export default MatrixChart;

package/dist/components/matrix-chart/matrix-chart.types.d.ts

@@ -0,0 +1,65 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChartDataTableVisibility } from '../chart.types.ts';
+export type MatrixColorScale = 'sequential' | 'diverging';
+export type MatrixChartDatum = Record<string, string | number | null | undefined>;
+export type MatrixChartProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /** Accessible label for the chart. Required for screen readers. */
+    label: string;
+    /** Optional description rendered below the label. */
+    description?: string;
+    /** Rows of data. Each row must include the keys named by the `xField`, `yField`, and `valueField` props. */
+    data: MatrixChartDatum[];
+    /** Key on each datum used for the x-axis (columns). */
+    xField: string;
+    /** Key on each datum used for the y-axis (rows). */
+    yField: string;
+    /** Key on each datum used for the numeric cell value. */
+    valueField: string;
+    /** Color interpolation scale. Default `sequential`. */
+    colorScale?: MatrixColorScale;
+    /** Show cell value labels. Default `true`. */
+    showCellLabels?: boolean;
+    /** Pixel height of the chart viewport. Default `280`. */
+    height?: number;
+    /** Whether the chart is in a loading state. */
+    loading?: boolean;
+    /** Custom data table caption; falls back to `label`. */
+    dataTableCaption?: string;
+    /** Controls data table visibility. Default `screen-reader-only`. */
+    dataTableVisibility?: ChartDataTableVisibility;
+    /** Custom class applied to the root element. */
+    class?: string;
+    /** Snippet rendered when the chart has no data. */
+    empty?: Snippet;
+    /** Snippet rendered while the chart is loading. */
+    loadingContent?: Snippet;
+};
+export type MatrixChartSchemaProps = {
+    /** Accessible label for the chart. Required for screen readers. */
+    label: string;
+    /** Optional description rendered below the label. */
+    description?: string;
+    /** Rows of data. Each row must include the keys named by the `xField`, `yField`, and `valueField` props. */
+    data: Record<string, string | number | null>[];
+    /** Key on each datum used for the x-axis (columns). */
+    xField: string;
+    /** Key on each datum used for the y-axis (rows). */
+    yField: string;
+    /** Key on each datum used for the numeric cell value. */
+    valueField: string;
+    /** Color interpolation scale. Default `sequential`. */
+    colorScale?: MatrixColorScale;
+    /** Show cell value labels. Default `true`. */
+    showCellLabels?: boolean;
+    /** Pixel height of the chart viewport. Default `280`. */
+    height?: number;
+    /** 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;
+    /** Custom class applied to the root element. */
+    class?: string;
+};

package/dist/components/matrix-chart/matrix-chart.variables.d.ts

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

package/dist/components/matrix-chart/matrix-chart.variables.js

@@ -0,0 +1,31 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/matrix-chart/matrix-chart.variables.ts
+var variables = [];
+var matrix_chart_variables_default = variables;
+export {
+  matrix_chart_variables_default as default
+};
+
+//# debugId=55DA8462FEC2ED0664756E2164756E21

package/dist/components/media-controls/index.d.ts

@@ -0,0 +1,5 @@
+import './media-controls.css';
+import MediaControls from './media-controls.svelte';
+export default MediaControls;
+export type { MediaControlsLayout, MediaControlsProps } from './media-controls.types.ts';
+export { MediaControls };

package/dist/components/media-controls/index.js

@@ -0,0 +1,309 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/media-controls/index.ts
+import"@lostgradient/cinder/media-controls/styles";
+
+// src/components/media-controls/media-controls.svelte
+import"svelte/internal/disclose-version";
+import * as $2 from "svelte/internal/client";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/_visually-hidden-live-region.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+var root = $.from_html(`<div aria-atomic="true"> </div>`);
+function _visually_hidden_live_region($$anchor, $$props) {
+  $.push($$props, true);
+  let message = $.prop($$props, "message", 3, ""), announcementSequence = $.prop($$props, "announcementSequence", 3, 0), priority = $.prop($$props, "priority", 3, "polite");
+  let rendered = $.state("");
+  let setTimeoutId = null;
+  let version = 0;
+  let isDestroyed = false;
+  $.user_effect(() => {
+    return () => {
+      isDestroyed = true;
+      if (setTimeoutId) {
+        clearTimeout(setTimeoutId);
+        setTimeoutId = null;
+      }
+    };
+  });
+  $.user_effect(() => {
+    const next = message();
+    announcementSequence();
+    const current = ++version;
+    if (setTimeoutId) {
+      clearTimeout(setTimeoutId);
+      setTimeoutId = null;
+    }
+    $.set(rendered, "");
+    if (next === "")
+      return;
+    setTimeoutId = setTimeout(() => {
+      if (isDestroyed || version !== current)
+        return;
+      $.set(rendered, next, true);
+      setTimeoutId = null;
+    }, 0);
+  });
+  var div = root();
+  var text = $.child(div, true);
+  $.reset(div);
+  $.template_effect(($0) => {
+    $.set_attribute(div, "role", priority() === "assertive" ? "alert" : "status");
+    $.set_attribute(div, "aria-live", priority() === "assertive" ? "assertive" : "polite");
+    $.set_class(div, 1, $0);
+    $.set_text(text, $.get(rendered));
+  }, [() => $.clsx(classNames("cinder-sr-only", $$props.class))]);
+  $.append($$anchor, div);
+  $.pop();
+}
+
+// src/components/media-controls/media-controls.svelte
+var root_2 = $2.from_html(`<span class="cinder-media-controls__label">Loading</span>`);
+var root_1 = $2.from_html(`<span class="cinder-media-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cinder-media-controls__svg cinder-media-controls__svg--loading"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg></span> <!>`, 1);
+var root_4 = $2.from_html(`<span class="cinder-media-controls__label">Unavailable</span>`);
+var root_3 = $2.from_html(`<span class="cinder-media-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cinder-media-controls__svg"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg></span> <!>`, 1);
+var root_6 = $2.from_html(`<span class="cinder-media-controls__label">Replay</span>`);
+var root_5 = $2.from_html(`<span class="cinder-media-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cinder-media-controls__svg"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg></span> <!>`, 1);
+var root_8 = $2.from_html(`<span class="cinder-media-controls__label">Pause</span>`);
+var root_7 = $2.from_html(`<span class="cinder-media-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="cinder-media-controls__svg"><rect x="6" y="4" width="4" height="16" rx="1"></rect><rect x="14" y="4" width="4" height="16" rx="1"></rect></svg></span> <!>`, 1);
+var root_10 = $2.from_html(`<span class="cinder-media-controls__label">Play</span>`);
+var root_9 = $2.from_html(`<span class="cinder-media-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="cinder-media-controls__svg"><polygon points="5,3 19,12 5,21"></polygon></svg></span> <!>`, 1);
+var root_11 = $2.from_html(`<div class="cinder-media-controls__progress" role="progressbar"><div class="cinder-media-controls__progress-track"><div class="cinder-media-controls__progress-fill"></div></div></div>`);
+var root2 = $2.from_html(`<div><button type="button" class="cinder-media-controls__button"><!></button> <!></div> <!>`, 1);
+function Media_controls($$anchor, $$props) {
+  $2.push($$props, true);
+  let playing = $2.prop($$props, "playing", 3, false), replay = $2.prop($$props, "replay", 3, false), disabled = $2.prop($$props, "disabled", 3, false), loading = $2.prop($$props, "loading", 3, false), unavailable = $2.prop($$props, "unavailable", 3, false), progressLabel = $2.prop($$props, "progressLabel", 3, "Playback progress"), layout = $2.prop($$props, "layout", 3, "compact"), rest = $2.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "playing",
+    "replay",
+    "disabled",
+    "loading",
+    "unavailable",
+    "progress",
+    "progressLabel",
+    "layout",
+    "onPlay",
+    "onPause",
+    "onReplay",
+    "class"
+  ]);
+  const isDisabled = $2.derived(() => disabled() || loading() || unavailable());
+  const iconOnly = $2.derived(() => layout() === "compact");
+  const hasProgress = $2.derived(() => Number.isFinite($$props.progress));
+  const clampedProgress = $2.derived(() => Number.isFinite($$props.progress) ? Math.max(0, Math.min(1, $$props.progress)) : 0);
+  const progressPercent = $2.derived(() => Math.round($2.get(clampedProgress) * 100));
+  let announcement = $2.state("");
+  function handlePlay() {
+    if ($2.get(isDisabled))
+      return;
+    $2.set(announcement, "Playing");
+    $$props.onPlay?.();
+  }
+  function handlePause() {
+    if ($2.get(isDisabled))
+      return;
+    $2.set(announcement, "Paused");
+    $$props.onPause?.();
+  }
+  function handleReplay() {
+    if ($2.get(isDisabled))
+      return;
+    $2.set(announcement, "Replaying");
+    $$props.onReplay?.();
+  }
+  function handlePrimaryAction() {
+    if (replay()) {
+      handleReplay();
+    } else if (playing()) {
+      handlePause();
+    } else {
+      handlePlay();
+    }
+  }
+  const isToggle = $2.derived(() => !loading() && !unavailable() && !replay());
+  const primaryLabel = $2.derived(() => loading() ? "Loading playback controls" : unavailable() ? "Playback unavailable" : replay() ? "Replay" : "Play or pause");
+  const primaryPressed = $2.derived(() => $2.get(isToggle) ? playing() ? "true" : "false" : undefined);
+  var fragment = root2();
+  var div = $2.first_child(fragment);
+  $2.attribute_effect(div, ($0) => ({
+    ...rest,
+    class: $0,
+    "data-cinder-layout": layout(),
+    "data-cinder-playing": playing() ? "" : undefined,
+    "data-cinder-loading": loading() ? "" : undefined,
+    "data-cinder-unavailable": unavailable() ? "" : undefined
+  }), [() => classNames("cinder-media-controls", $$props.class)]);
+  var button = $2.child(div);
+  var node = $2.child(button);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var fragment_1 = root_1();
+      var node_1 = $2.sibling($2.first_child(fragment_1), 2);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_2();
+          $2.append($$anchor3, span);
+        };
+        $2.if(node_1, ($$render) => {
+          if (!$2.get(iconOnly))
+            $$render(consequent);
+        });
+      }
+      $2.append($$anchor2, fragment_1);
+    };
+    var consequent_3 = ($$anchor2) => {
+      var fragment_2 = root_3();
+      var node_2 = $2.sibling($2.first_child(fragment_2), 2);
+      {
+        var consequent_2 = ($$anchor3) => {
+          var span_1 = root_4();
+          $2.append($$anchor3, span_1);
+        };
+        $2.if(node_2, ($$render) => {
+          if (!$2.get(iconOnly))
+            $$render(consequent_2);
+        });
+      }
+      $2.append($$anchor2, fragment_2);
+    };
+    var consequent_5 = ($$anchor2) => {
+      var fragment_3 = root_5();
+      var node_3 = $2.sibling($2.first_child(fragment_3), 2);
+      {
+        var consequent_4 = ($$anchor3) => {
+          var span_2 = root_6();
+          $2.append($$anchor3, span_2);
+        };
+        $2.if(node_3, ($$render) => {
+          if (!$2.get(iconOnly))
+            $$render(consequent_4);
+        });
+      }
+      $2.append($$anchor2, fragment_3);
+    };
+    var consequent_7 = ($$anchor2) => {
+      var fragment_4 = root_7();
+      var node_4 = $2.sibling($2.first_child(fragment_4), 2);
+      {
+        var consequent_6 = ($$anchor3) => {
+          var span_3 = root_8();
+          $2.append($$anchor3, span_3);
+        };
+        $2.if(node_4, ($$render) => {
+          if (!$2.get(iconOnly))
+            $$render(consequent_6);
+        });
+      }
+      $2.append($$anchor2, fragment_4);
+    };
+    var alternate = ($$anchor2) => {
+      var fragment_5 = root_9();
+      var node_5 = $2.sibling($2.first_child(fragment_5), 2);
+      {
+        var consequent_8 = ($$anchor3) => {
+          var span_4 = root_10();
+          $2.append($$anchor3, span_4);
+        };
+        $2.if(node_5, ($$render) => {
+          if (!$2.get(iconOnly))
+            $$render(consequent_8);
+        });
+      }
+      $2.append($$anchor2, fragment_5);
+    };
+    $2.if(node, ($$render) => {
+      if (loading())
+        $$render(consequent_1);
+      else if (unavailable())
+        $$render(consequent_3, 1);
+      else if (replay())
+        $$render(consequent_5, 2);
+      else if (playing())
+        $$render(consequent_7, 3);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  $2.reset(button);
+  var node_6 = $2.sibling(button, 2);
+  {
+    var consequent_9 = ($$anchor2) => {
+      var div_1 = root_11();
+      $2.set_attribute(div_1, "aria-valuemin", 0);
+      $2.set_attribute(div_1, "aria-valuemax", 100);
+      var div_2 = $2.child(div_1);
+      var div_3 = $2.child(div_2);
+      let styles;
+      $2.reset(div_2);
+      $2.reset(div_1);
+      $2.template_effect(() => {
+        $2.set_attribute(div_1, "aria-label", progressLabel());
+        $2.set_attribute(div_1, "aria-valuenow", $2.get(progressPercent));
+        $2.set_attribute(div_1, "aria-valuetext", `${$2.get(progressPercent) ?? ""}%`);
+        styles = $2.set_style(div_3, "", styles, { width: `${$2.get(progressPercent) ?? ""}%` });
+      });
+      $2.append($$anchor2, div_1);
+    };
+    $2.if(node_6, ($$render) => {
+      if ($2.get(hasProgress))
+        $$render(consequent_9);
+    });
+  }
+  $2.reset(div);
+  var node_7 = $2.sibling(div, 2);
+  _visually_hidden_live_region(node_7, {
+    get message() {
+      return $2.get(announcement);
+    }
+  });
+  $2.template_effect(() => {
+    $2.set_attribute(button, "aria-label", $2.get(primaryLabel));
+    $2.set_attribute(button, "aria-pressed", $2.get(primaryPressed));
+    $2.set_attribute(button, "aria-disabled", $2.get(isDisabled) ? "true" : undefined);
+    $2.set_attribute(button, "aria-busy", loading() ? "true" : undefined);
+    button.disabled = $2.get(isDisabled);
+    $2.set_attribute(button, "data-cinder-state", loading() ? "loading" : unavailable() ? "unavailable" : replay() ? "replay" : playing() ? "playing" : "paused");
+  });
+  $2.delegated("click", button, handlePrimaryAction);
+  $2.append($$anchor, fragment);
+  $2.pop();
+}
+$2.delegate(["click"]);
+
+// src/components/media-controls/index.ts
+var media_controls_default = Media_controls;
+export {
+  media_controls_default as default,
+  Media_controls as MediaControls
+};
+
+//# debugId=8507E67D2F48F97764756E2164756E21