@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/spectrum-chart/index.js

@@ -26,7 +26,7 @@ import"@lostgradient/cinder/spectrum-chart/styles";
 
 // src/components/spectrum-chart/spectrum-chart.svelte
 import"svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
+import * as $2 from "svelte/internal/client";
 
 // src/_internal/chart/chart-utilities.ts
 var chartPalette = [
@@ -690,22 +690,57 @@ 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/client";
+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;
+    };
+    $.user_effect(() => {
+      if (!enabled()) {
+        disconnectObserver();
+        return;
+      }
+      observer = new ResizeObserver((entries) => {
+        if (!enabled()) {
+          return;
+        }
+        onResize(entries);
+      });
+      observer.observe(node, box !== undefined ? { box } : undefined);
+      return () => {
+        disconnectObserver();
+      };
+    });
+    return () => {
+      disconnectObserver();
+    };
+  };
+}
+
 // src/components/spectrum-chart/spectrum-chart.svelte
-var root_1 = $.from_html(`<p class="cinder-spectrum-chart__description"> </p>`);
-var root_2 = $.from_html(`<div class="cinder-spectrum-chart__state"><!></div>`);
-var root_5 = $.from_html(`<div class="cinder-spectrum-chart__state"><!></div>`);
-var root_8 = $.from_svg(`<title> </title>`);
-var root_10 = $.from_svg(`<text class="cinder-spectrum-chart__tick-label" text-anchor="end" dominant-baseline="middle"> </text><line class="cinder-spectrum-chart__grid-line" x1="0" aria-hidden="true"></line>`, 1);
-var root_11 = $.from_svg(`<rect class="cinder-spectrum-chart__bar" aria-hidden="true"></rect>`);
-var root_13 = $.from_svg(`<text class="cinder-spectrum-chart__tick-label" text-anchor="middle" dominant-baseline="auto"> </text>`);
-var root_9 = $.from_svg(`<g><!><!><!></g>`);
-var root_15 = $.from_html(`<tr><td> </td><td> </td></tr>`);
-var root_14 = $.from_html(`<table><caption> </caption><thead><tr><th scope="col">Frequency</th><th scope="col">Magnitude</th></tr></thead><tbody></tbody></table>`);
-var root = $.from_html(`<figure><!> <div class="cinder-spectrum-chart__viewport"><!> <svg role="img"><!><!></svg></div> <!></figure>`);
+var root_1 = $2.from_html(`<p class="cinder-spectrum-chart__description"> </p>`);
+var root_2 = $2.from_html(`<div class="cinder-spectrum-chart__state"><!></div>`);
+var root_5 = $2.from_html(`<div class="cinder-spectrum-chart__state"><!></div>`);
+var root_8 = $2.from_svg(`<title> </title>`);
+var root_10 = $2.from_svg(`<text class="cinder-spectrum-chart__tick-label" text-anchor="end" dominant-baseline="middle"> </text><line class="cinder-spectrum-chart__grid-line" x1="0" aria-hidden="true"></line>`, 1);
+var root_11 = $2.from_svg(`<rect class="cinder-spectrum-chart__bar" aria-hidden="true"></rect>`);
+var root_13 = $2.from_svg(`<text class="cinder-spectrum-chart__tick-label" text-anchor="middle" dominant-baseline="auto"> </text>`);
+var root_9 = $2.from_svg(`<g><!><!><!></g>`);
+var root_15 = $2.from_html(`<tr><td> </td><td> </td></tr>`);
+var root_14 = $2.from_html(`<table><caption> </caption><thead><tr><th scope="col">Frequency</th><th scope="col">Magnitude</th></tr></thead><tbody></tbody></table>`);
+var root = $2.from_html(`<figure><!> <div class="cinder-spectrum-chart__viewport"><!> <svg role="img"><!><!></svg></div> <!></figure>`);
 function Spectrum_chart($$anchor, $$props) {
-  const generatedId = $.props_id();
-  $.push($$props, true);
-  let height = $.prop($$props, "height", 3, 160), loading = $.prop($$props, "loading", 3, false), dataTableVisibility = $.prop($$props, "dataTableVisibility", 3, "screen-reader-only"), rest = $.rest_props($$props, [
+  const generatedId = $2.props_id();
+  $2.push($$props, true);
+  let height = $2.prop($$props, "height", 3, 160), loading = $2.prop($$props, "loading", 3, false), dataTableVisibility = $2.prop($$props, "dataTableVisibility", 3, "screen-reader-only"), rest = $2.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -721,39 +756,25 @@ function Spectrum_chart($$anchor, $$props) {
     "loadingContent",
     "id"
   ]);
-  const rootId = $.derived(() => $$props.id ?? generatedId);
-  const descriptionId = $.derived(() => $$props.description ? `${$.get(rootId)}-description` : undefined);
+  const rootId = $2.derived(() => $$props.id ?? generatedId);
+  const descriptionId = $2.derived(() => $$props.description ? `${$2.get(rootId)}-description` : undefined);
   const marginTop = 8;
   const marginRight = 8;
   const marginBottom = 32;
   const marginLeft = 40;
-  let measuredWidth = $.state(400);
-  let rootElement = $.state(undefined);
-  $.user_effect(() => {
-    const element = $.get(rootElement);
-    if (!element)
-      return;
-    if (typeof ResizeObserver === "undefined") {
-      const rect = element.getBoundingClientRect();
-      if (rect.width > 0)
-        $.set(measuredWidth, rect.width, true);
-      return;
-    }
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry && entry.contentRect.width > 0)
-        $.set(measuredWidth, entry.contentRect.width, true);
-    });
-    observer.observe(element);
-    return () => observer.disconnect();
+  let measuredWidth = $2.state(400);
+  const observeResize = useResizeObserver((entries) => {
+    const entry = entries[0];
+    if (entry && entry.contentRect.width > 0)
+      $2.set(measuredWidth, entry.contentRect.width, true);
   });
-  const plotWidth = $.derived(() => Math.max(1, $.get(measuredWidth) - marginLeft - marginRight));
-  const plotHeight = $.derived(() => Math.max(1, height() - marginTop - marginBottom));
-  const isEmpty = $.derived(() => $$props.bins.length === 0);
+  const plotWidth = $2.derived(() => Math.max(1, $2.get(measuredWidth) - marginLeft - marginRight));
+  const plotHeight = $2.derived(() => Math.max(1, height() - marginTop - marginBottom));
+  const isEmpty = $2.derived(() => $$props.bins.length === 0);
   function sanitizeMagnitude(value) {
     return Number.isFinite(value) && value > 0 ? value : 0;
   }
-  const maxValue = $.derived(() => {
+  const maxValue = $2.derived(() => {
     let max = 0;
     for (const bin of $$props.bins) {
       const magnitude = sanitizeMagnitude(bin.value);
@@ -763,257 +784,257 @@ function Spectrum_chart($$anchor, $$props) {
     return max;
   });
   const tickCount = 5;
-  const yTicks = $.derived(() => {
-    if ($.get(maxValue) <= 0)
+  const yTicks = $2.derived(() => {
+    if ($2.get(maxValue) <= 0)
       return [0];
-    return Array.from({ length: tickCount }, (_, index2) => $.get(maxValue) * index2 / (tickCount - 1));
+    return Array.from({ length: tickCount }, (_, index2) => $2.get(maxValue) * index2 / (tickCount - 1));
   });
   function scaleY(value) {
-    if ($.get(maxValue) <= 0)
-      return $.get(plotHeight);
-    return $.get(plotHeight) - value / $.get(maxValue) * $.get(plotHeight);
+    if ($2.get(maxValue) <= 0)
+      return $2.get(plotHeight);
+    return $2.get(plotHeight) - value / $2.get(maxValue) * $2.get(plotHeight);
   }
-  const barWidth = $.derived(() => $$props.bins.length > 0 ? $.get(plotWidth) / $$props.bins.length : 0);
-  const spectrumBars = $.derived(() => {
+  const barWidth = $2.derived(() => $$props.bins.length > 0 ? $2.get(plotWidth) / $$props.bins.length : 0);
+  const spectrumBars = $2.derived(() => {
     return $$props.bins.map((bin, index2) => {
       const magnitude = sanitizeMagnitude(bin.value);
-      const barHeight = $.get(maxValue) > 0 ? magnitude / $.get(maxValue) * $.get(plotHeight) : 0;
+      const barHeight = $2.get(maxValue) > 0 ? magnitude / $2.get(maxValue) * $2.get(plotHeight) : 0;
       return {
-        x: index2 * $.get(barWidth) + 1,
-        y: $.get(plotHeight) - barHeight,
+        x: index2 * $2.get(barWidth) + 1,
+        y: $2.get(plotHeight) - barHeight,
         barHeight,
-        barWidth: Math.max(1, $.get(barWidth) - 2),
+        barWidth: Math.max(1, $2.get(barWidth) - 2),
         label: bin.label,
         value: magnitude
       };
     });
   });
   const maxXLabels = 8;
-  const xLabelStep = $.derived(() => Math.max(1, Math.ceil($$props.bins.length / maxXLabels)));
-  const hasDataTable = $.derived(() => dataTableVisibility() !== "hidden");
+  const xLabelStep = $2.derived(() => Math.max(1, Math.ceil($$props.bins.length / maxXLabels)));
+  const hasDataTable = $2.derived(() => dataTableVisibility() !== "hidden");
   var figure = root();
-  $.attribute_effect(figure, ($0) => ({
+  $2.attribute_effect(figure, ($0) => ({
     ...rest,
-    id: $.get(rootId),
+    id: $2.get(rootId),
     class: $0,
     "aria-label": $$props.label,
-    "aria-describedby": $.get(descriptionId)
+    "aria-describedby": $2.get(descriptionId)
   }), [() => classNames("cinder-spectrum-chart", $$props.class)]);
-  var node = $.child(figure);
+  var node = $2.child(figure);
   {
     var consequent = ($$anchor2) => {
       var p = root_1();
-      var text2 = $.child(p, true);
-      $.reset(p);
-      $.template_effect(() => {
-        $.set_attribute(p, "id", $.get(descriptionId));
-        $.set_text(text2, $$props.description);
+      var text2 = $2.child(p, true);
+      $2.reset(p);
+      $2.template_effect(() => {
+        $2.set_attribute(p, "id", $2.get(descriptionId));
+        $2.set_text(text2, $$props.description);
       });
-      $.append($$anchor2, p);
+      $2.append($$anchor2, p);
     };
-    $.if(node, ($$render) => {
+    $2.if(node, ($$render) => {
       if ($$props.description)
         $$render(consequent);
     });
   }
-  var div = $.sibling(node, 2);
+  var div = $2.sibling(node, 2);
   let styles;
-  var node_1 = $.child(div);
+  var node_1 = $2.child(div);
   {
     var consequent_2 = ($$anchor2) => {
       var div_1 = root_2();
-      var node_2 = $.child(div_1);
+      var node_2 = $2.child(div_1);
       {
         var consequent_1 = ($$anchor3) => {
-          var fragment = $.comment();
-          var node_3 = $.first_child(fragment);
-          $.snippet(node_3, () => $$props.loadingContent);
-          $.append($$anchor3, fragment);
+          var fragment = $2.comment();
+          var node_3 = $2.first_child(fragment);
+          $2.snippet(node_3, () => $$props.loadingContent);
+          $2.append($$anchor3, fragment);
         };
         var alternate = ($$anchor3) => {
-          var text_1 = $.text("Loading…");
-          $.append($$anchor3, text_1);
+          var text_1 = $2.text("Loading…");
+          $2.append($$anchor3, text_1);
         };
-        $.if(node_2, ($$render) => {
+        $2.if(node_2, ($$render) => {
           if ($$props.loadingContent)
             $$render(consequent_1);
           else
             $$render(alternate, -1);
         });
       }
-      $.reset(div_1);
-      $.append($$anchor2, div_1);
+      $2.reset(div_1);
+      $2.append($$anchor2, div_1);
     };
     var consequent_4 = ($$anchor2) => {
       var div_2 = root_5();
-      var node_4 = $.child(div_2);
+      var node_4 = $2.child(div_2);
       {
         var consequent_3 = ($$anchor3) => {
-          var fragment_1 = $.comment();
-          var node_5 = $.first_child(fragment_1);
-          $.snippet(node_5, () => $$props.empty);
-          $.append($$anchor3, fragment_1);
+          var fragment_1 = $2.comment();
+          var node_5 = $2.first_child(fragment_1);
+          $2.snippet(node_5, () => $$props.empty);
+          $2.append($$anchor3, fragment_1);
         };
         var alternate_1 = ($$anchor3) => {
-          var text_2 = $.text("No spectrum data");
-          $.append($$anchor3, text_2);
+          var text_2 = $2.text("No spectrum data");
+          $2.append($$anchor3, text_2);
         };
-        $.if(node_4, ($$render) => {
+        $2.if(node_4, ($$render) => {
           if ($$props.empty)
             $$render(consequent_3);
           else
             $$render(alternate_1, -1);
         });
       }
-      $.reset(div_2);
-      $.append($$anchor2, div_2);
+      $2.reset(div_2);
+      $2.append($$anchor2, div_2);
     };
-    $.if(node_1, ($$render) => {
+    $2.if(node_1, ($$render) => {
       if (loading())
         $$render(consequent_2);
-      else if ($.get(isEmpty))
+      else if ($2.get(isEmpty))
         $$render(consequent_4, 1);
     });
   }
-  var svg = $.sibling(node_1, 2);
-  var node_6 = $.child(svg);
+  var svg = $2.sibling(node_1, 2);
+  var node_6 = $2.child(svg);
   {
     var consequent_5 = ($$anchor2) => {
       var title = root_8();
-      var text_3 = $.child(title, true);
-      $.reset(title);
-      $.template_effect(() => {
-        $.set_attribute(title, "id", `${$.get(rootId) ?? ""}-svg-title`);
-        $.set_text(text_3, $$props.label);
+      var text_3 = $2.child(title, true);
+      $2.reset(title);
+      $2.template_effect(() => {
+        $2.set_attribute(title, "id", `${$2.get(rootId) ?? ""}-svg-title`);
+        $2.set_text(text_3, $$props.label);
       });
-      $.append($$anchor2, title);
+      $2.append($$anchor2, title);
     };
-    $.if(node_6, ($$render) => {
-      if (!loading() && !$.get(isEmpty))
+    $2.if(node_6, ($$render) => {
+      if (!loading() && !$2.get(isEmpty))
         $$render(consequent_5);
     });
   }
-  var node_7 = $.sibling(node_6);
+  var node_7 = $2.sibling(node_6);
   {
     var consequent_7 = ($$anchor2) => {
       var g = root_9();
-      $.set_attribute(g, "transform", `translate(${marginLeft}, ${marginTop})`);
-      var node_8 = $.child(g);
-      $.each(node_8, 17, () => $.get(yTicks), $.index, ($$anchor3, tick, index2) => {
+      $2.set_attribute(g, "transform", `translate(${marginLeft}, ${marginTop})`);
+      var node_8 = $2.child(g);
+      $2.each(node_8, 17, () => $2.get(yTicks), $2.index, ($$anchor3, tick, index2) => {
         var fragment_2 = root_10();
-        var text_4 = $.first_child(fragment_2);
-        $.set_attribute(text_4, "x", -6);
-        var text_5 = $.child(text_4, true);
-        $.reset(text_4);
-        var line = $.sibling(text_4);
-        $.template_effect(($0, $1, $2, $3) => {
-          $.set_attribute(text_4, "y", $0);
-          $.set_text(text_5, $1);
-          $.set_attribute(line, "x2", $.get(plotWidth));
-          $.set_attribute(line, "y1", $2);
-          $.set_attribute(line, "y2", $3);
+        var text_4 = $2.first_child(fragment_2);
+        $2.set_attribute(text_4, "x", -6);
+        var text_5 = $2.child(text_4, true);
+        $2.reset(text_4);
+        var line = $2.sibling(text_4);
+        $2.template_effect(($0, $1, $22, $3) => {
+          $2.set_attribute(text_4, "y", $0);
+          $2.set_text(text_5, $1);
+          $2.set_attribute(line, "x2", $2.get(plotWidth));
+          $2.set_attribute(line, "y1", $22);
+          $2.set_attribute(line, "y2", $3);
         }, [
-          () => scaleY($.get(tick)),
-          () => formatNumericValue($.get(tick), undefined, undefined, { index: index2 }),
-          () => scaleY($.get(tick)),
-          () => scaleY($.get(tick))
+          () => scaleY($2.get(tick)),
+          () => formatNumericValue($2.get(tick), undefined, undefined, { index: index2 }),
+          () => scaleY($2.get(tick)),
+          () => scaleY($2.get(tick))
         ]);
-        $.append($$anchor3, fragment_2);
+        $2.append($$anchor3, fragment_2);
       });
-      var node_9 = $.sibling(node_8);
-      $.each(node_9, 17, () => $.get(spectrumBars), $.index, ($$anchor3, bar) => {
-        var rect_1 = root_11();
-        $.template_effect(() => {
-          $.set_attribute(rect_1, "x", $.get(bar).x);
-          $.set_attribute(rect_1, "y", $.get(bar).y);
-          $.set_attribute(rect_1, "width", $.get(bar).barWidth);
-          $.set_attribute(rect_1, "height", $.get(bar).barHeight);
-          $.set_attribute(rect_1, "data-cinder-bin", $.get(bar).label);
+      var node_9 = $2.sibling(node_8);
+      $2.each(node_9, 17, () => $2.get(spectrumBars), $2.index, ($$anchor3, bar) => {
+        var rect = root_11();
+        $2.template_effect(() => {
+          $2.set_attribute(rect, "x", $2.get(bar).x);
+          $2.set_attribute(rect, "y", $2.get(bar).y);
+          $2.set_attribute(rect, "width", $2.get(bar).barWidth);
+          $2.set_attribute(rect, "height", $2.get(bar).barHeight);
+          $2.set_attribute(rect, "data-cinder-bin", $2.get(bar).label);
         });
-        $.append($$anchor3, rect_1);
+        $2.append($$anchor3, rect);
       });
-      var node_10 = $.sibling(node_9);
-      $.each(node_10, 17, () => $.get(spectrumBars), $.index, ($$anchor3, bar, index2) => {
-        var fragment_3 = $.comment();
-        var node_11 = $.first_child(fragment_3);
+      var node_10 = $2.sibling(node_9);
+      $2.each(node_10, 17, () => $2.get(spectrumBars), $2.index, ($$anchor3, bar, index2) => {
+        var fragment_3 = $2.comment();
+        var node_11 = $2.first_child(fragment_3);
         {
           var consequent_6 = ($$anchor4) => {
             var text_6 = root_13();
-            var text_7 = $.child(text_6, true);
-            $.reset(text_6);
-            $.template_effect(() => {
-              $.set_attribute(text_6, "x", $.get(bar).x + $.get(bar).barWidth / 2);
-              $.set_attribute(text_6, "y", $.get(plotHeight) + 16);
-              $.set_text(text_7, $.get(bar).label);
+            var text_7 = $2.child(text_6, true);
+            $2.reset(text_6);
+            $2.template_effect(() => {
+              $2.set_attribute(text_6, "x", $2.get(bar).x + $2.get(bar).barWidth / 2);
+              $2.set_attribute(text_6, "y", $2.get(plotHeight) + 16);
+              $2.set_text(text_7, $2.get(bar).label);
             });
-            $.append($$anchor4, text_6);
+            $2.append($$anchor4, text_6);
           };
-          $.if(node_11, ($$render) => {
-            if (index2 % $.get(xLabelStep) === 0)
+          $2.if(node_11, ($$render) => {
+            if (index2 % $2.get(xLabelStep) === 0)
               $$render(consequent_6);
           });
         }
-        $.append($$anchor3, fragment_3);
+        $2.append($$anchor3, fragment_3);
       });
-      $.reset(g);
-      $.append($$anchor2, g);
+      $2.reset(g);
+      $2.append($$anchor2, g);
     };
-    $.if(node_7, ($$render) => {
-      if (!loading() && !$.get(isEmpty))
+    $2.if(node_7, ($$render) => {
+      if (!loading() && !$2.get(isEmpty))
         $$render(consequent_7);
     });
   }
-  $.reset(svg);
-  $.reset(div);
-  var node_12 = $.sibling(div, 2);
+  $2.reset(svg);
+  $2.reset(div);
+  var node_12 = $2.sibling(div, 2);
   {
     var consequent_8 = ($$anchor2) => {
       var table = root_14();
-      var caption = $.child(table);
-      var text_8 = $.child(caption, true);
-      $.reset(caption);
-      var tbody = $.sibling(caption, 2);
-      $.each(tbody, 21, () => $.get(spectrumBars), $.index, ($$anchor3, bar, index2) => {
+      var caption = $2.child(table);
+      var text_8 = $2.child(caption, true);
+      $2.reset(caption);
+      var tbody = $2.sibling(caption, 2);
+      $2.each(tbody, 21, () => $2.get(spectrumBars), $2.index, ($$anchor3, bar, index2) => {
         var tr = root_15();
-        var td = $.child(tr);
-        var text_9 = $.child(td, true);
-        $.reset(td);
-        var td_1 = $.sibling(td);
-        var text_10 = $.child(td_1, true);
-        $.reset(td_1);
-        $.reset(tr);
-        $.template_effect(($0) => {
-          $.set_text(text_9, $.get(bar).label);
-          $.set_text(text_10, $0);
+        var td = $2.child(tr);
+        var text_9 = $2.child(td, true);
+        $2.reset(td);
+        var td_1 = $2.sibling(td);
+        var text_10 = $2.child(td_1, true);
+        $2.reset(td_1);
+        $2.reset(tr);
+        $2.template_effect(($0) => {
+          $2.set_text(text_9, $2.get(bar).label);
+          $2.set_text(text_10, $0);
         }, [
-          () => formatNumericValue($.get(bar).value, undefined, undefined, { index: index2 })
+          () => formatNumericValue($2.get(bar).value, undefined, undefined, { index: index2 })
         ]);
-        $.append($$anchor3, tr);
+        $2.append($$anchor3, tr);
       });
-      $.reset(tbody);
-      $.reset(table);
-      $.template_effect(($0) => {
-        $.set_class(table, 1, $0);
-        $.set_text(text_8, $$props.dataTableCaption ?? $$props.label);
-      }, [() => $.clsx(dataTableClass(dataTableVisibility()))]);
-      $.append($$anchor2, table);
+      $2.reset(tbody);
+      $2.reset(table);
+      $2.template_effect(($0) => {
+        $2.set_class(table, 1, $0);
+        $2.set_text(text_8, $$props.dataTableCaption ?? $$props.label);
+      }, [() => $2.clsx(dataTableClass(dataTableVisibility()))]);
+      $2.append($$anchor2, table);
     };
-    $.if(node_12, ($$render) => {
-      if ($.get(hasDataTable))
+    $2.if(node_12, ($$render) => {
+      if ($2.get(hasDataTable))
         $$render(consequent_8);
     });
   }
-  $.reset(figure);
-  $.bind_this(figure, ($$value) => $.set(rootElement, $$value), () => $.get(rootElement));
-  $.template_effect(() => {
-    $.set_attribute(div, "data-cinder-loading", loading() || undefined);
-    styles = $.set_style(div, "", styles, { height: `${height() ?? ""}px` });
-    $.set_attribute(svg, "viewBox", `0 0 ${$.get(measuredWidth)} ${height()}`);
-    $.set_attribute(svg, "aria-hidden", loading() || $.get(isEmpty) ? "true" : undefined);
-    $.set_attribute(svg, "aria-labelledby", !loading() && !$.get(isEmpty) ? `${$.get(rootId)}-svg-title` : undefined);
+  $2.reset(figure);
+  $2.attach(figure, () => observeResize);
+  $2.template_effect(() => {
+    $2.set_attribute(div, "data-cinder-loading", loading() || undefined);
+    styles = $2.set_style(div, "", styles, { height: `${height() ?? ""}px` });
+    $2.set_attribute(svg, "viewBox", `0 0 ${$2.get(measuredWidth)} ${height()}`);
+    $2.set_attribute(svg, "aria-hidden", loading() || $2.get(isEmpty) ? "true" : undefined);
+    $2.set_attribute(svg, "aria-labelledby", !loading() && !$2.get(isEmpty) ? `${$2.get(rootId)}-svg-title` : undefined);
   });
-  $.append($$anchor, figure);
-  $.pop();
+  $2.append($$anchor, figure);
+  $2.pop();
 }
 
 // src/components/spectrum-chart/index.ts
@@ -1023,4 +1044,4 @@ export {
   Spectrum_chart as SpectrumChart
 };
 
-//# debugId=8DC74BE59C9DDDE564756E2164756E21
+//# debugId=F7E5CBE3E136828B64756E2164756E21

package/dist/components/speed-dial/index.js

@@ -51,13 +51,13 @@ var root_1 = $.from_html(`<a><!></a>`);
 var root_3 = $.from_html(`<button><!></button>`);
 function Floating_action_button($$anchor, $$props) {
   $.push($$props, true);
-  const variant = $.prop($$props, "variant", 3, "filled"), size = $.prop($$props, "size", 3, "md"), color = $.prop($$props, "color", 3, "primary"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, [
+  const shape = $.prop($$props, "shape", 3, "filled"), size = $.prop($$props, "size", 3, "md"), variant = $.prop($$props, "variant", 3, "primary"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
-    "variant",
+    "shape",
     "size",
-    "color",
+    "variant",
     "disabled",
     "children",
     "class",
@@ -70,9 +70,9 @@ function Floating_action_button($$anchor, $$props) {
   const resolvedTabindex = $.derived(() => disabled() ? -1 : $$props.tabindex);
   const mergedClassName = $.derived(() => classNames("cinder-fab", $$props.class));
   const dataAttributes = $.derived(() => ({
-    "data-cinder-variant": variant(),
+    "data-cinder-shape": shape(),
     "data-cinder-size": size(),
-    "data-cinder-color": color()
+    "data-cinder-variant": variant()
   }));
   const resolvedAriaLabel = $.derived(() => typeof $$props["aria-label"] === "string" && $$props["aria-label"].trim().length > 0 ? $$props["aria-label"] : undefined);
   const resolvedAriaLabelledBy = $.derived(() => typeof $$props["aria-labelledby"] === "string" && $$props["aria-labelledby"].trim().length > 0 ? $$props["aria-labelledby"] : undefined);
@@ -81,8 +81,8 @@ function Floating_action_button($$anchor, $$props) {
   $.user_effect(() => {
     const hasAriaLabel = $.get(resolvedAriaLabel) !== undefined;
     const hasAriaLabelledBy = $.get(resolvedAriaLabelledBy) !== undefined;
-    if (variant() === "filled" && !hasAriaLabel && !hasAriaLabelledBy) {
-      devWarn("[cinder/FloatingActionButton] filled variant requires aria-label or aria-labelledby — the icon alone does not provide an accessible name.");
+    if (shape() === "filled" && !hasAriaLabel && !hasAriaLabelledBy) {
+      devWarn("[cinder/FloatingActionButton] filled shape requires aria-label or aria-labelledby — the icon alone does not provide an accessible name.");
     }
     if (!hasAriaLabel && !hasAriaLabelledBy && !$$props.children) {
       devWarn("[cinder/FloatingActionButton] rendered without an accessible name — pass aria-label, aria-labelledby, or children.");
@@ -248,7 +248,7 @@ function Speed_dial_action($$anchor, $$props) {
   $2.template_effect(($0) => {
     $2.set_class(div, 1, $0);
     $2.set_attribute(div, "data-cinder-label-placement", labelPlacement());
-    $2.set_attribute(div, "data-cinder-open", context.isOpen ? "true" : "false");
+    $2.set_attribute(div, "data-cinder-open", context.isOpen ? "" : undefined);
     $2.set_attribute(div, "data-cinder-direction", context.direction);
   }, [
     () => $2.clsx(classNames("cinder-speed-dial-action", $$props.class))
@@ -460,7 +460,7 @@ function Speed_dial($$anchor, $$props) {
     "aria-hidden": hidden() ? "true" : undefined,
     inert: hidden() ? true : undefined,
     class: $0,
-    "data-cinder-open": open() ? "true" : "false",
+    "data-cinder-open": open() ? "" : undefined,
     "data-cinder-direction": direction(),
     "data-cinder-hidden": hidden() ? "true" : undefined
   }), [() => classNames("cinder-speed-dial", $$props.class)]);
@@ -507,7 +507,7 @@ function Speed_dial($$anchor, $$props) {
   $3.template_effect(() => {
     $3.set_attribute(div_1, "id", actionsId);
     $3.set_attribute(div_1, "aria-orientation", $3.get(orientation));
-    $3.set_attribute(div_1, "data-cinder-open", open() ? "true" : "false");
+    $3.set_attribute(div_1, "data-cinder-open", open() ? "" : undefined);
     div_1.inert = !open() ? true : undefined;
   });
   $3.delegated("keydown", div_1, handleActionsKeydown);
@@ -526,4 +526,4 @@ export {
   SpeedDial
 };
 
-//# debugId=BAE006E69210742664756E2164756E21
+//# debugId=C0F5DB0EE8F8B85A64756E2164756E21

package/dist/components/speed-dial/speed-dial.css

@@ -47,7 +47,7 @@
     transform: translateY(-50%);
   }
 
-  .cinder-speed-dial[data-cinder-open='true'] .cinder-speed-dial__actions {
+  .cinder-speed-dial[data-cinder-open] .cinder-speed-dial__actions {
     pointer-events: auto;
   }
 
@@ -62,7 +62,7 @@
       transform var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 
-  .cinder-speed-dial[data-cinder-open='true'] .cinder-speed-dial-action {
+  .cinder-speed-dial[data-cinder-open] .cinder-speed-dial-action {
     opacity: 1;
     transform: none;
   }
@@ -100,7 +100,7 @@
     white-space: nowrap;
   }
 
-  .cinder-speed-dial[data-cinder-open='false'] .cinder-speed-dial-action {
+  .cinder-speed-dial:not([data-cinder-open]) .cinder-speed-dial-action {
     pointer-events: none;
   }