@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/slider/index.css

@@ -32,17 +32,17 @@
 
   .cinder-slider__range {
     position: absolute;
-    inset-block: 0;
-    left: var(--_cinder-slider-low);
-    right: calc(100% - var(--_cinder-slider-high));
     background: var(--cinder-accent);
     border-radius: var(--cinder-radius-full);
-    transition: left var(--cinder-duration-fast, .12s) var(--cinder-ease-standard, ease), right var(--cinder-duration-fast, .12s) var(--cinder-ease-standard, ease);
+    transition: inset-inline-start var(--cinder-duration-fast, .12s) var(--cinder-ease-standard, ease), inset-inline-end var(--cinder-duration-fast, .12s) var(--cinder-ease-standard, ease);
+    inset-block: 0;
+    inset-inline-start: var(--_cinder-slider-low);
+    inset-inline-end: calc(100% - var(--_cinder-slider-high));
   }
 
   .cinder-slider:not(.cinder-slider--range) .cinder-slider__range {
-    left: 0;
-    right: calc(100% - var(--_cinder-slider-low));
+    inset-inline-start: 0;
+    inset-inline-end: calc(100% - var(--_cinder-slider-low));
   }
 
   .cinder-slider__ticks {
@@ -54,19 +54,18 @@
   .cinder-slider__tick {
     position: absolute;
     top: 50%;
-    left: var(--_cinder-slider-tick);
     background: var(--cinder-border, currentColor);
     border-radius: var(--cinder-radius-full);
     opacity: .6;
     width: 2px;
     height: .5rem;
+    inset-inline-start: var(--_cinder-slider-tick);
     transform: translate(-50%, -50%);
   }
 
   .cinder-slider__thumb {
     position: absolute;
     top: 50%;
-    left: var(--_cinder-slider-pos);
     width: var(--_cinder-slider-thumb-size);
     height: var(--_cinder-slider-thumb-size);
     background: var(--cinder-surface-raised, white);
@@ -75,10 +74,15 @@
     cursor: grab;
     box-shadow: var(--cinder-shadow-sm);
     touch-action: none;
-    transition: left var(--cinder-duration-fast, .12s) var(--cinder-ease-standard, ease), box-shadow var(--cinder-duration-fast, .12s) var(--cinder-ease-standard, ease);
+    transition: inset-inline-start var(--cinder-duration-fast, .12s) var(--cinder-ease-standard, ease), box-shadow var(--cinder-duration-fast, .12s) var(--cinder-ease-standard, ease);
+    inset-inline-start: var(--_cinder-slider-pos);
     transform: translate(-50%, -50%);
   }
 
+  .cinder-slider__tick:dir(rtl), .cinder-slider__thumb:dir(rtl) {
+    transform: translate(50%, -50%);
+  }
+
   .cinder-slider__thumb[data-cinder-active] {
     z-index: 2;
   }

package/dist/server/components/slider/index.js

@@ -27,6 +27,157 @@ function setFormFieldContext(context) {
 }
 var getFormFieldContext = optionalContext(getFormFieldContextStrict);
 
+// src/_internal/locale-context.ts
+import { createContext as createContext2 } from "svelte";
+var [getLocaleContextStrict, setLocaleContextRaw] = createContext2();
+function setLocaleContext(context) {
+  setLocaleContextRaw(context);
+}
+var getLocaleContext = optionalContext(getLocaleContextStrict);
+
+// src/_internal/text-direction.ts
+function resolveTextDirection(element, fallback) {
+  let currentElement = element ?? null;
+  let documentDirection;
+  let styledDirectionElement = null;
+  while (currentElement) {
+    const direction = currentElement.getAttribute("dir")?.toLowerCase();
+    if (direction === "rtl" || direction === "ltr") {
+      if (typeof getComputedStyle === "function" && styledDirectionElement) {
+        const styledDirection2 = getComputedStyle(styledDirectionElement).direction;
+        if (styledDirection2 === "rtl" || styledDirection2 === "ltr")
+          return styledDirection2;
+      }
+      if (currentElement === currentElement.ownerDocument.documentElement) {
+        documentDirection = direction;
+        break;
+      }
+      return direction;
+    }
+    if (direction === "auto" && typeof getComputedStyle === "function") {
+      const computedDirection2 = getComputedStyle(currentElement).direction;
+      if (computedDirection2 === "rtl" || computedDirection2 === "ltr")
+        return computedDirection2;
+    }
+    const styledDirection = currentElement.style.direction;
+    if (!styledDirectionElement && (styledDirection === "rtl" || styledDirection === "ltr")) {
+      styledDirectionElement = currentElement;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  if (typeof getComputedStyle === "function" && styledDirectionElement) {
+    const direction = getComputedStyle(styledDirectionElement).direction;
+    if (direction === "rtl" || direction === "ltr")
+      return direction;
+  }
+  const computedDirection = readComputedTextDirection(element);
+  const rootComputedDirection = readComputedTextDirection(element?.ownerDocument.documentElement);
+  if (computedDirection && computedDirection !== rootComputedDirection)
+    return computedDirection;
+  if (computedDirection && fallback && computedDirection !== fallback && hasDirectionStylingHint(element)) {
+    return computedDirection;
+  }
+  if (!fallback && computedDirection === "rtl")
+    return computedDirection;
+  if (fallback)
+    return fallback;
+  if (documentDirection)
+    return documentDirection;
+  return;
+}
+function readComputedTextDirection(element) {
+  if (!element || typeof getComputedStyle !== "function")
+    return;
+  const direction = getComputedStyle(element).direction;
+  return direction === "rtl" || direction === "ltr" ? direction : undefined;
+}
+function hasDirectionStylingHint(element) {
+  let currentElement = element?.parentElement;
+  while (currentElement && currentElement !== currentElement.ownerDocument.documentElement) {
+    if (currentElement.style.direction)
+      return true;
+    if (matchesDirectionStyleRule(currentElement))
+      return true;
+    currentElement = currentElement.parentElement;
+  }
+  return false;
+}
+function matchesDirectionStyleRule(element) {
+  for (const sheet of Array.from(element.ownerDocument.styleSheets)) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (matchesDirectionStyleRuleList(element, rules))
+      return true;
+  }
+  return false;
+}
+function matchesDirectionStyleRuleList(element, rules) {
+  for (const rule of Array.from(rules)) {
+    if (isCssStyleRule(rule)) {
+      if (!rule.style.direction) {
+        const nestedRules2 = readNestedCssRules(rule);
+        if (nestedRules2 && matchesDirectionStyleRuleList(element, nestedRules2))
+          return true;
+        continue;
+      }
+      try {
+        if (element.matches(rule.selectorText))
+          return true;
+      } catch {
+        continue;
+      }
+    }
+    const nestedRules = readNestedCssRules(rule);
+    if (nestedRules && isConditionalRuleActive(rule) && matchesDirectionStyleRuleList(element, nestedRules)) {
+      return true;
+    }
+  }
+  return false;
+}
+function readNestedCssRules(rule) {
+  if (!("cssRules" in rule))
+    return;
+  try {
+    const nestedRules = Reflect.get(rule, "cssRules");
+    return isCssRuleCollection(nestedRules) ? nestedRules : undefined;
+  } catch {
+    return;
+  }
+}
+function isCssRuleCollection(value) {
+  if (typeof CSSRuleList !== "undefined" && value instanceof CSSRuleList)
+    return true;
+  return Array.isArray(value) && value.every(isCssRule);
+}
+function isCssRule(value) {
+  return typeof value === "object" && value !== null && typeof Reflect.get(value, "cssText") === "string" && typeof Reflect.get(value, "type") === "number";
+}
+function isCssStyleRule(rule) {
+  return typeof Reflect.get(rule, "selectorText") === "string" && typeof Reflect.get(rule, "style") === "object" && Reflect.get(rule, "style") !== null;
+}
+function isConditionalRuleActive(rule) {
+  const conditionText = Reflect.get(rule, "conditionText");
+  if (typeof conditionText !== "string" || !conditionText.trim())
+    return true;
+  if (isMediaRule(rule) && typeof matchMedia === "function") {
+    return matchMedia(conditionText).matches;
+  }
+  if (isSupportsRule(rule) && typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+    return CSS.supports(conditionText);
+  }
+  return true;
+}
+function isMediaRule(rule) {
+  return typeof Reflect.get(rule, "media") === "object" && Reflect.get(rule, "media") !== null;
+}
+function isSupportsRule(rule) {
+  return rule.constructor.name === "CSSSupportsRule" || Reflect.get(rule, "type") === 12;
+}
+
 // src/utilities/class-names.ts
 function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
@@ -64,7 +215,15 @@ function Slider($$renderer, $$props) {
       onchange
     } = $$props;
     const formField = getFormFieldContext();
+    const localeContext = getLocaleContext();
     const disabled = $.derived(() => disabledProp || (formField?.disabled ?? false));
+    let rootElement = null;
+    let directionRevision = 0;
+    const resolvedDirection = $.derived(() => {
+      return rootElement ? resolveTextDirection(rootElement.parentElement, localeContext?.direction) : localeContext?.direction;
+    });
+    const rootDirection = $.derived(() => localeContext?.direction ? resolvedDirection() : null);
+    const isRightToLeft = $.derived(() => resolvedDirection() === "rtl");
     const safeStep = $.derived(() => !Number.isFinite(step) || step <= 0 ? 1 : step);
     const safePageStep = $.derived(() => {
       if (pageStep === undefined)
@@ -191,13 +350,18 @@ function Slider($$renderer, $$props) {
         return;
       const current = thumb === "high" ? highValue() : lowValue();
       const hasTickArray = tickList() !== null && tickList().length > 0;
+      const horizontalStepDirection = isRightToLeft() ? -1 : 1;
       let next = current;
       switch (event.key) {
         case "ArrowRight":
+          next = hasTickArray ? neighborTick(current, horizontalStepDirection) : current + horizontalStepDirection * safeStep();
+          break;
+        case "ArrowLeft":
+          next = hasTickArray ? neighborTick(current, horizontalStepDirection === 1 ? -1 : 1) : current - horizontalStepDirection * safeStep();
+          break;
         case "ArrowUp":
           next = hasTickArray ? neighborTick(current, 1) : current + safeStep();
           break;
-        case "ArrowLeft":
         case "ArrowDown":
           next = hasTickArray ? neighborTick(current, -1) : current - safeStep();
           break;
@@ -233,7 +397,8 @@ function Slider($$renderer, $$props) {
       const rect = trackElement.getBoundingClientRect();
       if (rect.width === 0)
         return min;
-      const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      const physicalRatio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      const ratio = isRightToLeft() ? 1 - physicalRatio : physicalRatio;
       return min + ratio * (max - min);
     }
     function chooseNearestThumb(raw) {
@@ -334,7 +499,11 @@ function Slider($$renderer, $$props) {
       }
       return out;
     });
-    $$renderer2.push(`<div${$.attr_class($.clsx(classNames("cinder-slider", isRange() && "cinder-slider--range", className)))}${$.attr("data-cinder-disabled", disabled() || undefined)}>`);
+    $$renderer2.push(`<div${$.attributes({
+      class: $.clsx(classNames("cinder-slider", isRange() && "cinder-slider--range", className)),
+      "data-cinder-disabled": disabled() || undefined,
+      ...rootDirection() ? { dir: rootDirection() } : {}
+    })}>`);
     if (isRange()) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<span${$.attr("id", lowQualifierId)} class="cinder-sr-only">${$.escape(qualifierFor("low"))}</span> <span${$.attr("id", highQualifierId)} class="cinder-sr-only">${$.escape(qualifierFor("high"))}</span>`);
@@ -396,4 +565,4 @@ export {
   Slider
 };
 
-//# debugId=30C0CB128F00EC5D64756E2164756E21
+//# debugId=1AC69712EC59719164756E2164756E21

package/dist/server/components/sortable-list/index.css

@@ -35,7 +35,7 @@
   }
 
   .cinder-sortable-item--shifting {
-    transition: transform .15s;
+    transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/server/components/spectrogram/index.js

@@ -3,7 +3,7 @@ var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/components/spectrogram/spectrogram.svelte
-import * as $ from "svelte/internal/server";
+import * as $2 from "svelte/internal/server";
 
 // src/_internal/chart/chart-utilities.ts
 var chartPalette = [
@@ -744,10 +744,29 @@ function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
+// src/utilities/use-resize-observer.svelte.ts
+import * as $ from "svelte/internal/server";
+function useResizeObserver(onResize, options = {}) {
+  const { box, enabled = () => true } = options;
+  return (node) => {
+    if (typeof ResizeObserver === "undefined") {
+      return () => {};
+    }
+    let observer = null;
+    const disconnectObserver = () => {
+      observer?.disconnect();
+      observer = null;
+    };
+    return () => {
+      disconnectObserver();
+    };
+  };
+}
+
 // src/components/spectrogram/spectrogram.svelte
 function Spectrogram($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    const generatedId = $.props_id($$renderer2);
+    const generatedId = $2.props_id($$renderer2);
     let {
       label,
       description,
@@ -765,64 +784,68 @@ function Spectrogram($$renderer, $$props) {
       $$events,
       ...rest
     } = $$props;
-    const rootId = $.derived(() => id ?? generatedId);
-    const descriptionId = $.derived(() => description ? `${rootId()}-description` : undefined);
+    const rootId = $2.derived(() => id ?? generatedId);
+    const descriptionId = $2.derived(() => description ? `${rootId()}-description` : undefined);
     const marginTop = 8;
     const marginRight = 16;
     const marginBottom = 32;
     const marginLeft = 60;
     let measuredWidth = 400;
-    let rootElement = undefined;
-    const plotWidth = $.derived(() => Math.max(1, measuredWidth - marginLeft - marginRight));
-    const plotHeight = $.derived(() => Math.max(1, height - marginTop - marginBottom));
-    const binCount = $.derived(() => frames.reduce((max, frame) => Math.max(max, frame.bins.length), 0));
-    const binIndices = $.derived(() => Array.from({ length: binCount() }, (_, index) => index));
-    const isEmpty = $.derived(() => frames.length === 0 || binCount() === 0);
-    const cellWidth = $.derived(() => frames.length > 0 ? plotWidth() / frames.length : 0);
-    const cellHeight = $.derived(() => binCount() > 0 ? plotHeight() / binCount() : 0);
+    const observeResize = useResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry && entry.contentRect.width > 0)
+        measuredWidth = entry.contentRect.width;
+    });
+    const plotWidth = $2.derived(() => Math.max(1, measuredWidth - marginLeft - marginRight));
+    const plotHeight = $2.derived(() => Math.max(1, height - marginTop - marginBottom));
+    const binCount = $2.derived(() => frames.reduce((max, frame) => Math.max(max, frame.bins.length), 0));
+    const binIndices = $2.derived(() => Array.from({ length: binCount() }, (_, index) => index));
+    const isEmpty = $2.derived(() => frames.length === 0 || binCount() === 0);
+    const cellWidth = $2.derived(() => frames.length > 0 ? plotWidth() / frames.length : 0);
+    const cellHeight = $2.derived(() => binCount() > 0 ? plotHeight() / binCount() : 0);
     function binValueAt(frameIndex, binIndex) {
       return toFiniteOrNull(frames[frameIndex]?.bins[binIndex]);
     }
-    const domain = $.derived(() => heatmapDomainOfRows(frames.map((frame) => frame.bins)));
+    const domain = $2.derived(() => heatmapDomainOfRows(frames.map((frame) => frame.bins)));
     function cellFill(value) {
       return heatmapCellFill(value, domain(), "sequential");
     }
     function binY(binIndex) {
       return plotHeight() - (binIndex + 1) * cellHeight();
     }
-    const yLabels = $.derived(() => Array.from({ length: binCount() }, (_, index) => frequencyLabels?.[index] ?? String(index)));
+    const yLabels = $2.derived(() => Array.from({ length: binCount() }, (_, index) => frequencyLabels?.[index] ?? String(index)));
     const maxYLabels = 8;
-    const yLabelStep = $.derived(() => Math.max(1, Math.ceil(binCount() / maxYLabels)));
+    const yLabelStep = $2.derived(() => Math.max(1, Math.ceil(binCount() / maxYLabels)));
     const maxXLabels = 10;
-    const xLabelStep = $.derived(() => Math.max(1, Math.ceil(frames.length / maxXLabels)));
-    const hasDataTable = $.derived(() => dataTableVisibility !== "hidden");
+    const xLabelStep = $2.derived(() => Math.max(1, Math.ceil(frames.length / maxXLabels)));
+    const hasDataTable = $2.derived(() => dataTableVisibility !== "hidden");
     const maxTableFrames = 10;
     const maxTableBins = 10;
-    const tableFrameStep = $.derived(() => Math.max(1, Math.ceil(frames.length / maxTableFrames)));
-    const tableBinStep = $.derived(() => Math.max(1, Math.ceil(binCount() / maxTableBins)));
-    const tableFrames = $.derived(() => frames.map((frame, frameIndex) => ({ frame, frameIndex })).filter((_, index) => index % tableFrameStep() === 0).slice(0, maxTableFrames));
-    const tableBinIndices = $.derived(() => Array.from({ length: binCount() }, (_, index) => index).filter((index) => index % tableBinStep() === 0).slice(0, maxTableBins).reverse());
-    const isTruncated = $.derived(() => frames.length > maxTableFrames || binCount() > maxTableBins);
-    const tableCaption = $.derived(() => isTruncated() ? `${dataTableCaption ?? label} (showing ${tableFrames().length} of ${frames.length} frames, ${tableBinIndices().length} of ${binCount()} bins)` : dataTableCaption ?? label);
+    const tableFrameStep = $2.derived(() => Math.max(1, Math.ceil(frames.length / maxTableFrames)));
+    const tableBinStep = $2.derived(() => Math.max(1, Math.ceil(binCount() / maxTableBins)));
+    const tableFrames = $2.derived(() => frames.map((frame, frameIndex) => ({ frame, frameIndex })).filter((_, index) => index % tableFrameStep() === 0).slice(0, maxTableFrames));
+    const tableBinIndices = $2.derived(() => Array.from({ length: binCount() }, (_, index) => index).filter((index) => index % tableBinStep() === 0).slice(0, maxTableBins).reverse());
+    const isTruncated = $2.derived(() => frames.length > maxTableFrames || binCount() > maxTableBins);
+    const tableCaption = $2.derived(() => isTruncated() ? `${dataTableCaption ?? label} (showing ${tableFrames().length} of ${frames.length} frames, ${tableBinIndices().length} of ${binCount()} bins)` : dataTableCaption ?? label);
     function formatValue(value) {
       if (value === null)
         return "—";
       return new Intl.NumberFormat(undefined, { maximumFractionDigits: 3 }).format(value);
     }
-    $$renderer2.push(`<figure${$.attributes({
+    $$renderer2.push(`<figure${$2.attributes({
       ...rest,
       id: rootId(),
-      class: $.clsx(classNames("cinder-spectrogram", customClassName)),
+      class: $2.clsx(classNames("cinder-spectrogram", customClassName)),
       "aria-label": label,
       "aria-describedby": descriptionId()
     })}>`);
     if (description) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<p${$.attr("id", descriptionId())} class="cinder-spectrogram__description">${$.escape(description)}</p>`);
+      $$renderer2.push(`<p${$2.attr("id", descriptionId())} class="cinder-spectrogram__description">${$2.escape(description)}</p>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
-    $$renderer2.push(`<!--]--> <div class="cinder-spectrogram__viewport"${$.attr("data-cinder-loading", loading || undefined)}${$.attr_style("", { height: `${$.stringify(height)}px` })}>`);
+    $$renderer2.push(`<!--]--> <div class="cinder-spectrogram__viewport"${$2.attr("data-cinder-loading", loading || undefined)}${$2.attr_style("", { height: `${$2.stringify(height)}px` })}>`);
     if (loading) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<div class="cinder-spectrogram__state">`);
@@ -850,47 +873,47 @@ function Spectrogram($$renderer, $$props) {
     } 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)}>`);
+    $$renderer2.push(`<!--]--> <svg role="img"${$2.attr("viewBox", `0 0 ${measuredWidth} ${height}`)}${$2.attr("aria-hidden", loading || isEmpty() ? "true" : undefined)}${$2.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>`);
+      $$renderer2.push(`<title${$2.attr("id", `${$2.stringify(rootId())}-svg-title`)}>${$2.escape(label)}</title>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
     $$renderer2.push(`<!--]-->`);
     if (!loading && !isEmpty()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<g${$.attr("transform", `translate(${marginLeft}, ${marginTop})`)}><!--[-->`);
-      const each_array = $.ensure_array_like(frames);
+      $$renderer2.push(`<g${$2.attr("transform", `translate(${marginLeft}, ${marginTop})`)}><!--[-->`);
+      const each_array = $2.ensure_array_like(frames);
       for (let frameIndex = 0, $$length = each_array.length;frameIndex < $$length; frameIndex++) {
         let _frame = each_array[frameIndex];
         $$renderer2.push(`<!--[-->`);
-        const each_array_1 = $.ensure_array_like(binIndices());
+        const each_array_1 = $2.ensure_array_like(binIndices());
         for (let $$index = 0, $$length2 = each_array_1.length;$$index < $$length2; $$index++) {
           let binIndex = each_array_1[$$index];
-          $$renderer2.push(`<rect class="cinder-spectrogram__cell"${$.attr("x", frameIndex * cellWidth())}${$.attr("y", binY(binIndex))}${$.attr("width", cellWidth())}${$.attr("height", cellHeight())}${$.attr("fill", cellFill(binValueAt(frameIndex, binIndex)))} aria-hidden="true"></rect>`);
+          $$renderer2.push(`<rect class="cinder-spectrogram__cell"${$2.attr("x", frameIndex * cellWidth())}${$2.attr("y", binY(binIndex))}${$2.attr("width", cellWidth())}${$2.attr("height", cellHeight())}${$2.attr("fill", cellFill(binValueAt(frameIndex, binIndex)))} aria-hidden="true"></rect>`);
         }
         $$renderer2.push(`<!--]-->`);
       }
       $$renderer2.push(`<!--]--><!--[-->`);
-      const each_array_2 = $.ensure_array_like(yLabels());
+      const each_array_2 = $2.ensure_array_like(yLabels());
       for (let index = 0, $$length = each_array_2.length;index < $$length; index++) {
         let yLabel = each_array_2[index];
         if (index % yLabelStep() === 0) {
           $$renderer2.push("<!--[0-->");
-          $$renderer2.push(`<text class="cinder-spectrogram__tick-label"${$.attr("x", -6)}${$.attr("y", binY(index) + cellHeight() / 2)} text-anchor="end" dominant-baseline="middle">${$.escape(yLabel)}</text>`);
+          $$renderer2.push(`<text class="cinder-spectrogram__tick-label"${$2.attr("x", -6)}${$2.attr("y", binY(index) + cellHeight() / 2)} text-anchor="end" dominant-baseline="middle">${$2.escape(yLabel)}</text>`);
         } else {
           $$renderer2.push("<!--[-1-->");
         }
         $$renderer2.push(`<!--]-->`);
       }
       $$renderer2.push(`<!--]--><!--[-->`);
-      const each_array_3 = $.ensure_array_like(frames);
+      const each_array_3 = $2.ensure_array_like(frames);
       for (let index = 0, $$length = each_array_3.length;index < $$length; index++) {
         let frame = each_array_3[index];
         if (index % xLabelStep() === 0) {
           $$renderer2.push("<!--[0-->");
-          $$renderer2.push(`<text class="cinder-spectrogram__tick-label"${$.attr("x", index * cellWidth() + cellWidth() / 2)}${$.attr("y", plotHeight() + 16)} text-anchor="middle" dominant-baseline="auto">${$.escape(frame.label)}</text>`);
+          $$renderer2.push(`<text class="cinder-spectrogram__tick-label"${$2.attr("x", index * cellWidth() + cellWidth() / 2)}${$2.attr("y", plotHeight() + 16)} text-anchor="middle" dominant-baseline="auto">${$2.escape(frame.label)}</text>`);
         } else {
           $$renderer2.push("<!--[-1-->");
         }
@@ -903,21 +926,21 @@ function Spectrogram($$renderer, $$props) {
     $$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">Frequency bin</th><!--[-->`);
-      const each_array_4 = $.ensure_array_like(tableFrames());
+      $$renderer2.push(`<table${$2.attr_class($2.clsx(dataTableClass(dataTableVisibility)))}><caption>${$2.escape(tableCaption())}</caption><thead><tr><th scope="col">Frequency bin</th><!--[-->`);
+      const each_array_4 = $2.ensure_array_like(tableFrames());
       for (let $$index_4 = 0, $$length = each_array_4.length;$$index_4 < $$length; $$index_4++) {
         let entry = each_array_4[$$index_4];
-        $$renderer2.push(`<th scope="col">${$.escape(entry.frame.label)}</th>`);
+        $$renderer2.push(`<th scope="col">${$2.escape(entry.frame.label)}</th>`);
       }
       $$renderer2.push(`<!--]--></tr></thead><tbody><!--[-->`);
-      const each_array_5 = $.ensure_array_like(tableBinIndices());
+      const each_array_5 = $2.ensure_array_like(tableBinIndices());
       for (let $$index_6 = 0, $$length = each_array_5.length;$$index_6 < $$length; $$index_6++) {
         let binIndex = each_array_5[$$index_6];
-        $$renderer2.push(`<tr><th scope="row">${$.escape(yLabels()[binIndex] ?? binIndex)}</th><!--[-->`);
-        const each_array_6 = $.ensure_array_like(tableFrames());
+        $$renderer2.push(`<tr><th scope="row">${$2.escape(yLabels()[binIndex] ?? binIndex)}</th><!--[-->`);
+        const each_array_6 = $2.ensure_array_like(tableFrames());
         for (let $$index_5 = 0, $$length2 = each_array_6.length;$$index_5 < $$length2; $$index_5++) {
           let entry = each_array_6[$$index_5];
-          $$renderer2.push(`<td>${$.escape(formatValue(binValueAt(entry.frameIndex, binIndex)))}</td>`);
+          $$renderer2.push(`<td>${$2.escape(formatValue(binValueAt(entry.frameIndex, binIndex)))}</td>`);
         }
         $$renderer2.push(`<!--]--></tr>`);
       }
@@ -936,4 +959,4 @@ export {
   Spectrogram
 };
 
-//# debugId=DEE6AC59988A5CC164756E2164756E21
+//# debugId=F1AEA9C67180366364756E2164756E21