@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/server/index.server-ajzk1x9v.js

@@ -0,0 +1,224 @@
+import {
+  useResizeObserver
+} from "./index.server-9w7qdn8h.js";
+import {
+  dataTableClass
+} from "./index.server-chj73na5.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/waveform/waveform.svelte
+import * as $ from "svelte/internal/server";
+function Waveform($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const generatedId = $.props_id($$renderer2);
+    let {
+      label,
+      description,
+      data,
+      renderMode = "path",
+      height = 80,
+      loading = false,
+      dataTableVisibility = "screen-reader-only",
+      dataTableCaption,
+      class: customClassName,
+      empty,
+      loadingContent,
+      id,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const rootId = $.derived(() => id ?? generatedId);
+    const descriptionId = $.derived(() => description ? `${rootId()}-description` : undefined);
+    let measuredWidth = 400;
+    const observeResize = useResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry && entry.contentRect.width > 0)
+        measuredWidth = entry.contentRect.width;
+    });
+    const isEmpty = $.derived(() => data.length === 0);
+    const midY = $.derived(() => height / 2);
+    const MAX_RENDER_POINTS = 2000;
+    function clampSample(sample) {
+      return sample !== undefined && Number.isFinite(sample) ? Math.max(-1, Math.min(1, sample)) : 0;
+    }
+    const renderSamples = $.derived(() => {
+      const length = data.length;
+      if (length <= MAX_RENDER_POINTS)
+        return data.map(clampSample);
+      const bucketCount = Math.floor(MAX_RENDER_POINTS / 2);
+      const bucketSize = length / bucketCount;
+      const out = [];
+      for (let bucket = 0;bucket < bucketCount; bucket += 1) {
+        const start = Math.floor(bucket * bucketSize);
+        const end = bucket === bucketCount - 1 ? length : Math.min(length, Math.floor((bucket + 1) * bucketSize));
+        let min = clampSample(data[start]);
+        let max = min;
+        let minIndex = start;
+        let maxIndex = start;
+        for (let index = start;index < end; index += 1) {
+          const sample = clampSample(data[index]);
+          if (sample < min) {
+            min = sample;
+            minIndex = index;
+          }
+          if (sample > max) {
+            max = sample;
+            maxIndex = index;
+          }
+        }
+        if (minIndex <= maxIndex)
+          out.push(min, max);
+        else
+          out.push(max, min);
+      }
+      return out;
+    });
+    const waveformPath = $.derived(() => {
+      const samples = renderSamples();
+      if (samples.length === 0)
+        return "";
+      if (samples.length === 1) {
+        const x = measuredWidth / 2;
+        const y = midY() - samples[0] * midY();
+        return `M${(x - 1).toFixed(2)},${y.toFixed(2)}L${(x + 1).toFixed(2)},${y.toFixed(2)}`;
+      }
+      const points = samples.map((sample, index) => {
+        const x = index / (samples.length - 1) * measuredWidth;
+        const y = midY() - sample * midY();
+        return { x, y };
+      });
+      const firstPoint = points[0];
+      const restPoints = points.slice(1);
+      return `M${firstPoint.x.toFixed(2)},${firstPoint.y.toFixed(2)}` + restPoints.map((point) => `L${point.x.toFixed(2)},${point.y.toFixed(2)}`).join("");
+    });
+    const waveformBars = $.derived(() => {
+      const samples = renderSamples();
+      if (samples.length === 0)
+        return [];
+      const step = measuredWidth / samples.length;
+      const visualWidth = Math.max(1, step - 1);
+      return samples.map((sample, index) => {
+        const amplitude = Math.abs(sample);
+        const barHeight = amplitude * midY();
+        return {
+          x: index * step,
+          y: midY() - barHeight,
+          height: barHeight * 2,
+          width: visualWidth
+        };
+      });
+    });
+    const hasDataTable = $.derived(() => dataTableVisibility !== "hidden");
+    const TABLE_SAMPLE_LIMIT = 20;
+    const isTableSampled = $.derived(() => data.length > TABLE_SAMPLE_LIMIT);
+    const tableSamples = $.derived(() => {
+      if (data.length === 0)
+        return [];
+      const step = Math.max(1, Math.ceil(data.length / TABLE_SAMPLE_LIMIT));
+      const out = [];
+      for (let index = 0;index < data.length; index += step) {
+        out.push({ index, value: clampSample(data[index]) });
+      }
+      return out;
+    });
+    const tableCaption = $.derived(() => {
+      const base = dataTableCaption ?? label;
+      if (!isTableSampled())
+        return base;
+      return `${base} (${tableSamples().length} of ${data.length} samples shown)`;
+    });
+    $$renderer2.push(`<figure${$.attributes({
+      ...rest,
+      id: rootId(),
+      class: $.clsx(classNames("cinder-waveform", customClassName)),
+      "aria-label": label,
+      "aria-describedby": descriptionId(),
+      "data-cinder-render-mode": renderMode
+    })}>`);
+    if (description) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p${$.attr("id", descriptionId())} class="cinder-waveform__description">${$.escape(description)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <div class="cinder-waveform__viewport"${$.attr("data-cinder-loading", loading || undefined)}${$.attr_style("", { height: `${$.stringify(height)}px` })}>`);
+    if (loading) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-waveform__state">`);
+      if (loadingContent) {
+        $$renderer2.push("<!--[0-->");
+        loadingContent($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`Loading…`);
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else if (isEmpty()) {
+      $$renderer2.push("<!--[1-->");
+      $$renderer2.push(`<div class="cinder-waveform__state">`);
+      if (empty) {
+        $$renderer2.push("<!--[0-->");
+        empty($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`No waveform data`);
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <svg role="img"${$.attr("viewBox", `0 0 ${measuredWidth} ${height}`)}${$.attr("aria-hidden", loading || isEmpty() ? "true" : undefined)}${$.attr("aria-labelledby", !loading && !isEmpty() ? `${rootId()}-svg-title` : undefined)}>`);
+    if (!loading && !isEmpty()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<title${$.attr("id", `${$.stringify(rootId())}-svg-title`)}>${$.escape(label)}</title>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    if (!loading && !isEmpty()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<line class="cinder-waveform__baseline" x1="0"${$.attr("x2", measuredWidth)}${$.attr("y1", midY())}${$.attr("y2", midY())} aria-hidden="true"></line>`);
+      if (renderMode === "bars") {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<!--[-->`);
+        const each_array = $.ensure_array_like(waveformBars());
+        for (let index = 0, $$length = each_array.length;index < $$length; index++) {
+          let bar = each_array[index];
+          $$renderer2.push(`<rect class="cinder-waveform__bar"${$.attr("x", bar.x)}${$.attr("y", bar.y)}${$.attr("width", bar.width)}${$.attr("height", bar.height)} aria-hidden="true"></rect>`);
+        }
+        $$renderer2.push(`<!--]-->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<path class="cinder-waveform__path"${$.attr("d", waveformPath())} aria-hidden="true"></path>`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></svg></div> `);
+    if (hasDataTable()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<table${$.attr_class($.clsx(dataTableClass(dataTableVisibility)))}><caption>${$.escape(tableCaption())}</caption><thead><tr><th scope="col">Sample index</th><th scope="col">Amplitude</th></tr></thead><tbody><!--[-->`);
+      const each_array_1 = $.ensure_array_like(tableSamples());
+      for (let $$index_1 = 0, $$length = each_array_1.length;$$index_1 < $$length; $$index_1++) {
+        let sample = each_array_1[$$index_1];
+        $$renderer2.push(`<tr><td>${$.escape(sample.index)}</td><td>${$.escape(sample.value.toFixed(4))}</td></tr>`);
+      }
+      $$renderer2.push(`<!--]--></tbody></table>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></figure>`);
+  });
+}
+
+// src/components/waveform/index.ts
+var waveform_default = Waveform;
+export { Waveform, waveform_default };
+
+//# debugId=C40BBA8126E7A43564756E2164756E21

package/dist/server/index.server-amfq2v2p.js

@@ -0,0 +1,12 @@
+import {
+  optionalContext
+} from "./index.server-493m9fm5.js";
+
+// src/components/_internal/side-navigation-group-context.ts
+import { createContext } from "svelte";
+var [getSideNavigationGroupContextStrict, setSideNavigationGroupContext] = createContext();
+var tryGetSideNavigationGroupContext = optionalContext(getSideNavigationGroupContextStrict);
+
+export { setSideNavigationGroupContext, tryGetSideNavigationGroupContext };
+
+//# debugId=9486322E07514E1164756E2164756E21

package/dist/server/index.server-ans2v9y9.js

@@ -0,0 +1,45 @@
+import {
+  Icon
+} from "./index.server-2ymxf0ra.js";
+
+// ../../node_modules/lucide-svelte/dist/icons/copy.svelte
+import * as $ from "svelte/internal/server";
+function Copy($$renderer, $$props) {
+  const $$sanitized_props = $.sanitize_props($$props);
+  const iconNode = [
+    [
+      "rect",
+      {
+        width: "14",
+        height: "14",
+        x: "8",
+        y: "8",
+        rx: "2",
+        ry: "2"
+      }
+    ],
+    [
+      "path",
+      {
+        d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+      }
+    ]
+  ];
+  Icon($$renderer, $.spread_props([
+    { name: "copy" },
+    $$sanitized_props,
+    {
+      iconNode,
+      children: ($$renderer2) => {
+        $$renderer2.push(`<!--[-->`);
+        $.slot($$renderer2, $$props, "default", {}, null);
+        $$renderer2.push(`<!--]-->`);
+      },
+      $$slots: { default: true }
+    }
+  ]));
+}
+
+export { Copy };
+
+//# debugId=87F6B7075693FCB764756E2164756E21

package/dist/server/index.server-anyk9x1r.js

@@ -0,0 +1,282 @@
+import {
+  ChartInteraction,
+  DEFAULT_CHART_FOCUS_RING_STROKE_PADDING,
+  createBarFocusRingGeometry
+} from "./index.server-gw4atb82.js";
+import {
+  chartPaletteColor,
+  createBarModel,
+  dataTableClass,
+  formatNumericValue,
+  legendVisible
+} from "./index.server-chj73na5.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/bar-chart/bar-chart.svelte
+import * as $ from "svelte/internal/server";
+function Bar_chart($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const generatedId = $.props_id($$renderer2);
+    let {
+      label,
+      description,
+      data,
+      categoryKey,
+      series,
+      orientation = "vertical",
+      mode = "grouped",
+      height = 280,
+      xAxis,
+      yAxis,
+      legendPosition = "top",
+      hiddenSeriesIds = [],
+      loading = false,
+      dataTableCaption,
+      dataTableVisibility = "screen-reader-only",
+      maximumInteractivePoints = 500,
+      class: customClassName,
+      empty,
+      loadingContent,
+      id,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const rootId = $.derived(() => id ?? generatedId);
+    const descriptionId = $.derived(() => description ? `${rootId()}-description` : undefined);
+    const interaction = new ChartInteraction({ pointerAxis: () => orientation === "vertical" ? "x" : "y" });
+    let rootElement = undefined;
+    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(() => {
+      const currentTarget = interaction.focusedTarget;
+      if (!currentTarget)
+        return;
+      return model().targets.find((target) => target.id === currentTarget.id);
+    });
+    let keyboardFocusModality = false;
+    let focusVisibleTargetId = undefined;
+    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);
+    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());
+    }
+    $$renderer2.push(`<figure${$.attributes({
+      ...rest,
+      id: rootId(),
+      class: $.clsx(classNames("cinder-bar-chart", customClassName)),
+      "aria-label": label,
+      "aria-describedby": descriptionId(),
+      "data-cinder-orientation": orientation,
+      "data-cinder-mode": mode
+    })}>`);
+    if (description) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p${$.attr("id", descriptionId())} class="cinder-bar-chart__description">${$.escape(description)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (legendVisible(legendPosition, series.length) && legendPosition === "top") {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-bar-chart__legend" aria-label="Series"><!--[-->`);
+      const each_array = $.ensure_array_like(series);
+      for (let index = 0, $$length = each_array.length;index < $$length; index++) {
+        let item = each_array[index];
+        $$renderer2.push(`<button type="button"${$.attr("aria-pressed", !hiddenSeriesIds.includes(item.id))}><span${$.attr_style("", { background: item.color ?? chartPaletteColor(index) })}></span>${$.escape(item.label)}</button>`);
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <div class="cinder-bar-chart__viewport"${$.attr("data-cinder-loading", loading || undefined)}${$.attr_style("", { height: `${$.stringify(height)}px` })}>`);
+    if (loading) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-bar-chart__state">`);
+      if (loadingContent) {
+        $$renderer2.push("<!--[0-->");
+        loadingContent($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`Loading chart…`);
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else if (model().empty) {
+      $$renderer2.push("<!--[1-->");
+      $$renderer2.push(`<div class="cinder-bar-chart__state">`);
+      if (empty) {
+        $$renderer2.push("<!--[0-->");
+        empty($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`No chart data`);
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <svg${$.attr("viewBox", `0 0 ${interaction.measuredWidth} ${height}`)}${$.attr("aria-hidden", loading || model().empty ? "true" : undefined)}${$.attr("aria-labelledby", !loading && !model().empty ? `${rootId()}-svg-title` : undefined)}>`);
+    if (!loading && !model().empty) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<title${$.attr("id", `${$.stringify(rootId())}-svg-title`)}>${$.escape(label)}</title>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--><g${$.attr("transform", `translate(${model().geometry.marginLeft}, ${model().geometry.marginTop})`)}><!--[-->`);
+    const each_array_1 = $.ensure_array_like(model().yTicks);
+    for (let index = 0, $$length = each_array_1.length;index < $$length; index++) {
+      let tick = each_array_1[index];
+      $$renderer2.push(`<text class="cinder-bar-chart__tick-label"${$.attr("x", orientation === "vertical" ? -8 : (tick - model().valueDomain[0]) / (model().valueDomain[1] - model().valueDomain[0]) * model().geometry.plotWidth)}${$.attr("y", orientation === "vertical" ? model().geometry.plotHeight - (tick - model().valueDomain[0]) / (model().valueDomain[1] - model().valueDomain[0]) * model().geometry.plotHeight : model().geometry.plotHeight + 20)}${$.attr("text-anchor", orientation === "vertical" ? "end" : "middle")}${$.attr("dominant-baseline", orientation === "vertical" ? "middle" : undefined)}>${$.escape(formatNumericValue(tick, orientation === "vertical" ? yAxis : xAxis, undefined, { index }))}</text>`);
+    }
+    $$renderer2.push(`<!--]--><!--[-->`);
+    const each_array_2 = $.ensure_array_like(model().bars);
+    for (let $$index_2 = 0, $$length = each_array_2.length;$$index_2 < $$length; $$index_2++) {
+      let bar = each_array_2[$$index_2];
+      $$renderer2.push(`<rect class="cinder-bar-chart__bar"${$.attr("x", bar.x)}${$.attr("y", bar.y)}${$.attr("width", bar.width)}${$.attr("height", bar.height)}${$.attr("fill", bar.color)} aria-hidden="true"${$.attr("data-cinder-series", bar.seriesId)}${$.attr("data-cinder-category", bar.categoryLabel)}${$.attr("data-cinder-active", interaction.activeTarget?.seriesId === bar.seriesId && interaction.activeTarget?.xLabel === bar.categoryLabel ? "" : undefined)}></rect>`);
+    }
+    $$renderer2.push(`<!--]--><!--[-->`);
+    const each_array_3 = $.ensure_array_like(model().categoryTicks);
+    for (let $$index_3 = 0, $$length = each_array_3.length;$$index_3 < $$length; $$index_3++) {
+      let tick = each_array_3[$$index_3];
+      $$renderer2.push(`<text class="cinder-bar-chart__tick-label"${$.attr("x", tick.x)}${$.attr("y", tick.y)}${$.attr("text-anchor", orientation === "vertical" ? "middle" : "end")}${$.attr("dominant-baseline", orientation === "vertical" ? undefined : "middle")}>${$.escape(tick.label)}</text>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    if (interaction.activeTarget) {
+      $$renderer2.push("<!--[0-->");
+      if (orientation === "vertical") {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<line class="cinder-bar-chart__crosshair"${$.attr("x1", interaction.activeTarget.x)}${$.attr("x2", interaction.activeTarget.x)} y1="0"${$.attr("y2", model().geometry.plotHeight)} aria-hidden="true"></line>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<line class="cinder-bar-chart__crosshair" x1="0"${$.attr("x2", model().geometry.plotWidth)}${$.attr("y1", interaction.activeTarget.y)}${$.attr("y2", interaction.activeTarget.y)} aria-hidden="true"></line>`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    if (model().targets.length > 0) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<rect class="cinder-bar-chart__hit-surface" role="presentation"${$.attr("width", model().geometry.plotWidth)}${$.attr("height", model().geometry.plotHeight)}></rect>`);
+      if (keyboardEnabled()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<!--[-->`);
+        const each_array_4 = $.ensure_array_like(model().targets);
+        for (let $$index_4 = 0, $$length = each_array_4.length;$$index_4 < $$length; $$index_4++) {
+          let target = each_array_4[$$index_4];
+          $$renderer2.push(`<rect class="cinder-bar-chart__focus-target"${$.attr("x", (target.x ?? 0) - 6)}${$.attr("y", (target.y ?? 0) - 6)} width="12" height="12" tabindex="0" role="button"${$.attr("data-cinder-target-id", target.id)}${$.attr("data-cinder-series-id", target.seriesId)}${$.attr("data-cinder-focus-ring-active", barFocusRing() && focusRingTarget()?.id === target.id ? "true" : undefined)}${$.attr("aria-label", `${target.seriesLabel}, ${target.xLabel}, ${target.valueLabel}`)}${$.attr("aria-describedby", interaction.activeTarget?.id === target.id ? `${rootId()}-tooltip` : undefined)}></rect>`);
+        }
+        $$renderer2.push(`<!--]-->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    if (barFocusRing()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<g class="cinder-bar-chart__focus-ring-layer" aria-hidden="true"><rect class="cinder-bar-chart__focus-ring-halo"${$.attr("x", barFocusRing().x)}${$.attr("y", barFocusRing().y)}${$.attr("width", barFocusRing().width)}${$.attr("height", barFocusRing().height)}${$.attr("rx", barFocusRing().radius)}></rect><rect class="cinder-bar-chart__focus-ring"${$.attr("x", barFocusRing().x)}${$.attr("y", barFocusRing().y)}${$.attr("width", barFocusRing().width)}${$.attr("height", barFocusRing().height)}${$.attr("rx", barFocusRing().radius)}></rect></g>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></g></svg> `);
+    if (interaction.activeTarget) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div${$.attr("id", `${$.stringify(rootId())}-tooltip`)} role="tooltip" class="cinder-bar-chart__tooltip"${$.attr_style("", {
+        left: `${$.stringify(model().geometry.marginLeft + interaction.activeTarget.x)}px`,
+        top: `${$.stringify(model().geometry.marginTop + interaction.activeTarget.y)}px`
+      })}><strong>${$.escape(interaction.activeTarget.seriesLabel)}</strong><span>${$.escape(interaction.activeTarget.xLabel)}: ${$.escape(interaction.activeTarget.valueLabel)}</span></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div> `);
+    if (guidanceId()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p${$.attr("id", guidanceId())} class="cinder-sr-only">Use the data table to inspect this chart with a keyboard.</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (hasDataTable()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<table${$.attr_class($.clsx(dataTableClass(dataTableVisibility)))}${$.attr("aria-describedby", guidanceId())}><caption>${$.escape(dataTableCaption ?? label)}</caption><thead><tr><th scope="col">Category</th><th scope="col">Series</th><th scope="col">Value</th></tr></thead><tbody><!--[-->`);
+      const each_array_5 = $.ensure_array_like(model().tableRows);
+      for (let $$index_6 = 0, $$length = each_array_5.length;$$index_6 < $$length; $$index_6++) {
+        let row = each_array_5[$$index_6];
+        $$renderer2.push(`<!--[-->`);
+        const each_array_6 = $.ensure_array_like(row.values);
+        for (let $$index_5 = 0, $$length2 = each_array_6.length;$$index_5 < $$length2; $$index_5++) {
+          let value = each_array_6[$$index_5];
+          $$renderer2.push(`<tr><th scope="row">${$.escape(row.categoryLabel)}</th><td>${$.escape(value.seriesLabel)}</td><td>${$.escape(value.valueLabel)}</td></tr>`);
+        }
+        $$renderer2.push(`<!--]-->`);
+      }
+      $$renderer2.push(`<!--]--></tbody></table>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (legendVisible(legendPosition, series.length) && legendPosition === "bottom") {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-bar-chart__legend" aria-label="Series"><!--[-->`);
+      const each_array_7 = $.ensure_array_like(series);
+      for (let index = 0, $$length = each_array_7.length;index < $$length; index++) {
+        let item = each_array_7[index];
+        $$renderer2.push(`<button type="button"${$.attr("aria-pressed", !hiddenSeriesIds.includes(item.id))}><span${$.attr_style("", { background: item.color ?? chartPaletteColor(index) })}></span>${$.escape(item.label)}</button>`);
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></figure>`);
+    $.bind_props($$props, { hiddenSeriesIds });
+  });
+}
+
+// src/components/bar-chart/index.ts
+var bar_chart_default = Bar_chart;
+export { Bar_chart, bar_chart_default };
+
+//# debugId=A14D0E13F133BDF964756E2164756E21