@lostgradient/cinder 0.5.0 → 0.7.0

package/dist/components/marquee/index.js

@@ -64,22 +64,23 @@ function classNames(...parts) {
 }
 
 // src/components/marquee/marquee.svelte
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "direction",
+  "duration",
+  "gap",
+  "label",
+  "pauseOnHover",
+  "pauseOnFocus",
+  "class",
+  "children"
+]);
 var root_1 = $.from_html(`<div><div class="cinder-marquee__viewport" role="group" tabindex="0"><button type="button" class="cinder-marquee__control"> </button> <div class="cinder-marquee__track"><div class="cinder-marquee__item"><!></div> <div class="cinder-marquee__item" aria-hidden="true" inert=""></div></div></div></div>`);
 function Marquee($$anchor, $$props) {
   $.push($$props, true);
-  let direction = $.prop($$props, "direction", 3, "horizontal"), duration = $.prop($$props, "duration", 3, "24s"), gap = $.prop($$props, "gap", 3, "1.5rem"), pauseOnHover = $.prop($$props, "pauseOnHover", 3, true), pauseOnFocus = $.prop($$props, "pauseOnFocus", 3, true), rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "direction",
-    "duration",
-    "gap",
-    "label",
-    "pauseOnHover",
-    "pauseOnFocus",
-    "class",
-    "children"
-  ]);
+  let direction = $.prop($$props, "direction", 3, "horizontal"), duration = $.prop($$props, "duration", 3, "24s"), gap = $.prop($$props, "gap", 3, "1.5rem"), pauseOnHover = $.prop($$props, "pauseOnHover", 3, true), pauseOnFocus = $.prop($$props, "pauseOnFocus", 3, true), rest = $.rest_props($$props, rest_excludes);
   const mergedClassName = $.derived(() => classNames("cinder-marquee", $$props.class));
   const normalizedLabel = $.derived(() => typeof $$props.label === "string" && $$props.label.trim().length > 0 ? $$props.label.trim() : undefined);
   const ariaLabelledby = $.derived(() => rest["aria-labelledby"]);
@@ -283,4 +284,4 @@ export {
   Marquee
 };
 
-//# debugId=0C86F7D54665437964756E2164756E21
+//# debugId=6E9D4E6E514BE9B664756E2164756E21

package/dist/components/masonry/index.js

@@ -64,18 +64,19 @@ function classNames(...parts) {
 }
 
 // src/components/masonry/masonry.svelte
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "columns",
+  "gap",
+  "as",
+  "class",
+  "children"
+]);
 function Masonry($$anchor, $$props) {
   $.push($$props, true);
-  let as = $.prop($$props, "as", 3, "div"), rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "columns",
-    "gap",
-    "as",
-    "class",
-    "children"
-  ]);
+  let as = $.prop($$props, "as", 3, "div"), rest = $.rest_props($$props, rest_excludes);
   var fragment = $.comment();
   var node = $.first_child(fragment);
   $.element(node, as, false, ($$element, $$anchor2) => {
@@ -103,4 +104,4 @@ export {
   Masonry
 };
 
-//# debugId=9705FD49C4155EBC64756E2164756E21
+//# debugId=76B151277492DAA564756E2164756E21

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

@@ -839,44 +839,44 @@ function useResizeObserver(onResize, options = {}) {
 }
 
 // src/components/matrix-chart/matrix-chart.svelte
-var root_1 = $2.from_html(`<p class="cinder-matrix-chart__description"> </p>`);
-var root_2 = $2.from_html(`<div class="cinder-matrix-chart__state"><!></div>`);
-var root_5 = $2.from_html(`<div class="cinder-matrix-chart__state"><!></div>`);
-var root_8 = $2.from_svg(`<title> </title>`);
-var root_10 = $2.from_svg(`<text class="cinder-matrix-chart__tick-label" text-anchor="middle" dominant-baseline="auto"> </text>`);
-var root_11 = $2.from_svg(`<text class="cinder-matrix-chart__tick-label" text-anchor="end" dominant-baseline="middle"> </text>`);
-var root_13 = $2.from_svg(`<text class="cinder-matrix-chart__cell-label" text-anchor="middle" dominant-baseline="middle" aria-hidden="true"> </text>`);
-var root_12 = $2.from_svg(`<g><rect class="cinder-matrix-chart__cell" aria-hidden="true"><title> </title></rect><!></g>`);
-var root_9 = $2.from_svg(`<g role="presentation"><!><!><!></g>`);
-var root_15 = $2.from_html(`<th scope="col"> </th>`);
-var root_17 = $2.from_html(`<td> </td>`);
-var root_16 = $2.from_html(`<tr><th scope="row"> </th><!></tr>`);
-var root_14 = $2.from_html(`<table><caption> </caption><thead><tr><th scope="col"> </th><!></tr></thead><tbody></tbody></table>`);
-var root = $2.from_html(`<figure><!> <div class="cinder-matrix-chart__viewport"><!> <svg role="img"><!><!></svg></div> <!></figure>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "label",
+  "description",
+  "data",
+  "xField",
+  "yField",
+  "valueField",
+  "colorScale",
+  "showCellLabels",
+  "height",
+  "loading",
+  "dataTableCaption",
+  "dataTableVisibility",
+  "class",
+  "empty",
+  "loadingContent",
+  "id"
+]);
+var root = $2.from_html(`<p class="cinder-matrix-chart__description"> </p>`);
+var root_1 = $2.from_html(`<div class="cinder-matrix-chart__state"><!></div>`);
+var root_2 = $2.from_svg(`<title> </title>`);
+var root_3 = $2.from_svg(`<text class="cinder-matrix-chart__tick-label" text-anchor="middle" dominant-baseline="auto"> </text>`);
+var root_4 = $2.from_svg(`<text class="cinder-matrix-chart__tick-label" text-anchor="end" dominant-baseline="middle"> </text>`);
+var root_5 = $2.from_svg(`<text class="cinder-matrix-chart__cell-label" text-anchor="middle" dominant-baseline="middle" aria-hidden="true"> </text>`);
+var root_6 = $2.from_svg(`<g><rect class="cinder-matrix-chart__cell" aria-hidden="true"><title> </title></rect><!></g>`);
+var root_7 = $2.from_svg(`<g role="presentation"><!><!><!></g>`);
+var root_8 = $2.from_html(`<th scope="col"> </th>`);
+var root_9 = $2.from_html(`<td> </td>`);
+var root_10 = $2.from_html(`<tr><th scope="row"> </th><!></tr>`);
+var root_11 = $2.from_html(`<table><caption> </caption><thead><tr><th scope="col"> </th><!></tr></thead><tbody></tbody></table>`);
+var root_12 = $2.from_html(`<figure><!> <div class="cinder-matrix-chart__viewport"><!> <svg role="img"><!><!></svg></div> <!></figure>`);
 function Matrix_chart($$anchor, $$props) {
   const generatedId = $2.props_id();
   $2.push($$props, true);
-  let colorScale = $2.prop($$props, "colorScale", 3, "sequential"), showCellLabels = $2.prop($$props, "showCellLabels", 3, true), height = $2.prop($$props, "height", 3, 280), loading = $2.prop($$props, "loading", 3, false), dataTableVisibility = $2.prop($$props, "dataTableVisibility", 3, "screen-reader-only"), rest = $2.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "label",
-    "description",
-    "data",
-    "xField",
-    "yField",
-    "valueField",
-    "colorScale",
-    "showCellLabels",
-    "height",
-    "loading",
-    "dataTableCaption",
-    "dataTableVisibility",
-    "class",
-    "empty",
-    "loadingContent",
-    "id"
-  ]);
+  let colorScale = $2.prop($$props, "colorScale", 3, "sequential"), showCellLabels = $2.prop($$props, "showCellLabels", 3, true), height = $2.prop($$props, "height", 3, 280), loading = $2.prop($$props, "loading", 3, false), dataTableVisibility = $2.prop($$props, "dataTableVisibility", 3, "screen-reader-only"), rest = $2.rest_props($$props, rest_excludes);
   const rootId = $2.derived(() => $$props.id ?? generatedId);
   const descriptionId = $2.derived(() => $$props.description ? `${$2.get(rootId)}-description` : undefined);
   const marginTop = 40;
@@ -991,7 +991,7 @@ function Matrix_chart($$anchor, $$props) {
       return { yLabel: currentYLabel, values };
     });
   });
-  var figure = root();
+  var figure = root_12();
   $2.attribute_effect(figure, ($0) => ({
     ...rest,
     id: $2.get(rootId),
@@ -1003,7 +1003,7 @@ function Matrix_chart($$anchor, $$props) {
   var node = $2.child(figure);
   {
     var consequent = ($$anchor2) => {
-      var p = root_1();
+      var p = root();
       var text2 = $2.child(p, true);
       $2.reset(p);
       $2.template_effect(() => {
@@ -1022,7 +1022,7 @@ function Matrix_chart($$anchor, $$props) {
   var node_1 = $2.child(div);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_1 = root_2();
+      var div_1 = root_1();
       var node_2 = $2.child(div_1);
       {
         var consequent_1 = ($$anchor3) => {
@@ -1046,7 +1046,7 @@ function Matrix_chart($$anchor, $$props) {
       $2.append($$anchor2, div_1);
     };
     var consequent_4 = ($$anchor2) => {
-      var div_2 = root_5();
+      var div_2 = root_1();
       var node_4 = $2.child(div_2);
       {
         var consequent_3 = ($$anchor3) => {
@@ -1080,7 +1080,7 @@ function Matrix_chart($$anchor, $$props) {
   var node_6 = $2.child(svg);
   {
     var consequent_5 = ($$anchor2) => {
-      var title = root_8();
+      var title = root_2();
       var text_3 = $2.child(title, true);
       $2.reset(title);
       $2.template_effect(() => {
@@ -1097,11 +1097,11 @@ function Matrix_chart($$anchor, $$props) {
   var node_7 = $2.sibling(node_6);
   {
     var consequent_7 = ($$anchor2) => {
-      var g = root_9();
+      var g = root_7();
       $2.set_attribute(g, "transform", `translate(${marginLeft}, ${marginTop})`);
       var node_8 = $2.child(g);
       $2.each(node_8, 18, () => $2.get(xLabels), (xLabel) => xLabel, ($$anchor3, xLabel, index) => {
-        var text_4 = root_10();
+        var text_4 = root_3();
         $2.set_attribute(text_4, "y", -8);
         var text_5 = $2.child(text_4, true);
         $2.reset(text_4);
@@ -1113,7 +1113,7 @@ function Matrix_chart($$anchor, $$props) {
       });
       var node_9 = $2.sibling(node_8);
       $2.each(node_9, 18, () => $2.get(yLabels), (yLabel) => yLabel, ($$anchor3, yLabel, index) => {
-        var text_6 = root_11();
+        var text_6 = root_4();
         $2.set_attribute(text_6, "x", -8);
         var text_7 = $2.child(text_6, true);
         $2.reset(text_6);
@@ -1125,7 +1125,7 @@ function Matrix_chart($$anchor, $$props) {
       });
       var node_10 = $2.sibling(node_9);
       $2.each(node_10, 17, () => $2.get(cells), (cell) => cell.key, ($$anchor3, cell) => {
-        var g_1 = root_12();
+        var g_1 = root_6();
         var rect = $2.child(g_1);
         var title_1 = $2.child(rect);
         var text_8 = $2.child(title_1);
@@ -1134,7 +1134,7 @@ function Matrix_chart($$anchor, $$props) {
         var node_11 = $2.sibling(rect);
         {
           var consequent_6 = ($$anchor4) => {
-            var text_9 = root_13();
+            var text_9 = root_5();
             var text_10 = $2.child(text_9, true);
             $2.reset(text_9);
             $2.template_effect(($0, $1) => {
@@ -1185,7 +1185,7 @@ function Matrix_chart($$anchor, $$props) {
   var node_12 = $2.sibling(div, 2);
   {
     var consequent_8 = ($$anchor2) => {
-      var table = root_14();
+      var table = root_11();
       var caption = $2.child(table);
       var text_11 = $2.child(caption, true);
       $2.reset(caption);
@@ -1196,7 +1196,7 @@ function Matrix_chart($$anchor, $$props) {
       $2.reset(th);
       var node_13 = $2.sibling(th);
       $2.each(node_13, 16, () => $2.get(xLabels), (xLabel) => xLabel, ($$anchor3, xLabel) => {
-        var th_1 = root_15();
+        var th_1 = root_8();
         var text_13 = $2.child(th_1, true);
         $2.reset(th_1);
         $2.template_effect(() => $2.set_text(text_13, xLabel));
@@ -1206,13 +1206,13 @@ function Matrix_chart($$anchor, $$props) {
       $2.reset(thead);
       var tbody = $2.sibling(thead);
       $2.each(tbody, 21, () => $2.get(tableRows), (row) => row.yLabel, ($$anchor3, row) => {
-        var tr_1 = root_16();
+        var tr_1 = root_10();
         var th_2 = $2.child(tr_1);
         var text_14 = $2.child(th_2, true);
         $2.reset(th_2);
         var node_14 = $2.sibling(th_2);
         $2.each(node_14, 17, () => $2.get(row).values, (cell) => cell.xLabel, ($$anchor4, cell) => {
-          var td = root_17();
+          var td = root_9();
           var text_15 = $2.child(td, true);
           $2.reset(td);
           $2.template_effect(($0) => $2.set_text(text_15, $0), [
@@ -1258,4 +1258,4 @@ export {
   Matrix_chart as MatrixChart
 };
 
-//# debugId=F71F0D330387A58564756E2164756E21
+//# debugId=B1D22AD008A4040D64756E2164756E21

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

@@ -115,37 +115,38 @@ function _visually_hidden_live_region($$anchor, $$props) {
 }
 
 // src/components/media-controls/media-controls.svelte
-var root_2 = $2.from_html(`<span class="cinder-media-controls__label">Loading</span>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "playing",
+  "replay",
+  "disabled",
+  "loading",
+  "unavailable",
+  "progress",
+  "progressLabel",
+  "layout",
+  "onplay",
+  "onpause",
+  "onreplay",
+  "class"
+]);
+var root2 = $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_2 = $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_4 = $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_6 = $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_8 = $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);
+var root_10 = $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 root_11 = $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"
-  ]);
+  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, rest_excludes);
   const isDisabled = $2.derived(() => disabled() || loading() || unavailable());
   const iconOnly = $2.derived(() => layout() === "compact");
   const hasProgress = $2.derived(() => Number.isFinite($$props.progress));
@@ -182,7 +183,7 @@ function Media_controls($$anchor, $$props) {
   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 fragment = root_11();
   var div = $2.first_child(fragment);
   $2.attribute_effect(div, ($0) => ({
     ...rest,
@@ -200,7 +201,7 @@ function Media_controls($$anchor, $$props) {
       var node_1 = $2.sibling($2.first_child(fragment_1), 2);
       {
         var consequent = ($$anchor3) => {
-          var span = root_2();
+          var span = root2();
           $2.append($$anchor3, span);
         };
         $2.if(node_1, ($$render) => {
@@ -215,7 +216,7 @@ function Media_controls($$anchor, $$props) {
       var node_2 = $2.sibling($2.first_child(fragment_2), 2);
       {
         var consequent_2 = ($$anchor3) => {
-          var span_1 = root_4();
+          var span_1 = root_2();
           $2.append($$anchor3, span_1);
         };
         $2.if(node_2, ($$render) => {
@@ -230,7 +231,7 @@ function Media_controls($$anchor, $$props) {
       var node_3 = $2.sibling($2.first_child(fragment_3), 2);
       {
         var consequent_4 = ($$anchor3) => {
-          var span_2 = root_6();
+          var span_2 = root_4();
           $2.append($$anchor3, span_2);
         };
         $2.if(node_3, ($$render) => {
@@ -245,7 +246,7 @@ function Media_controls($$anchor, $$props) {
       var node_4 = $2.sibling($2.first_child(fragment_4), 2);
       {
         var consequent_6 = ($$anchor3) => {
-          var span_3 = root_8();
+          var span_3 = root_6();
           $2.append($$anchor3, span_3);
         };
         $2.if(node_4, ($$render) => {
@@ -260,7 +261,7 @@ function Media_controls($$anchor, $$props) {
       var node_5 = $2.sibling($2.first_child(fragment_5), 2);
       {
         var consequent_8 = ($$anchor3) => {
-          var span_4 = root_10();
+          var span_4 = root_8();
           $2.append($$anchor3, span_4);
         };
         $2.if(node_5, ($$render) => {
@@ -287,7 +288,7 @@ function Media_controls($$anchor, $$props) {
   var node_6 = $2.sibling(button, 2);
   {
     var consequent_9 = ($$anchor2) => {
-      var div_1 = root_11();
+      var div_1 = root_10();
       $2.set_attribute(div_1, "aria-valuemin", 0);
       $2.set_attribute(div_1, "aria-valuemax", 100);
       var div_2 = $2.child(div_1);
@@ -336,4 +337,4 @@ export {
   Media_controls as MediaControls
 };
 
-//# debugId=A5151B72075872CB64756E2164756E21
+//# debugId=3CE6055AD553DDE864756E2164756E21

package/dist/components/mega-menu/index.js

@@ -65,36 +65,34 @@ function classNames(...parts) {
 }
 
 // src/components/mega-menu/mega-menu.svelte
-var root_1 = $.from_html(`<li><button type="button" class="cinder-mega-menu__trigger"> </button></li>`);
-var root_2 = $.from_html(`<div class="cinder-mega-menu__indicator-track" aria-hidden="true"><div class="cinder-mega-menu__indicator"></div></div>`);
-var root_5 = $.from_html(`<h3 class="cinder-mega-menu__section-title"> </h3>`);
-var root_7 = $.from_html(`<span class="cinder-mega-menu__link-description"> </span>`);
-var root_6 = $.from_html(`<li><a class="cinder-mega-menu__link"><span> </span> <!></a></li>`);
-var root_4 = $.from_html(`<section><!> <ul class="cinder-mega-menu__links"></ul></section>`);
-var root_9 = $.from_html(`<li><button type="button" class="cinder-mega-menu__submenu-trigger"> </button></li>`);
-var root_12 = $.from_html(`<h4 class="cinder-mega-menu__section-title"> </h4>`);
-var root_14 = $.from_html(`<span class="cinder-mega-menu__link-description"> </span>`);
-var root_13 = $.from_html(`<li><a class="cinder-mega-menu__link"><span> </span> <!></a></li>`);
-var root_11 = $.from_html(`<section><!> <ul class="cinder-mega-menu__links"></ul></section>`);
-var root_10 = $.from_html(`<div class="cinder-mega-menu__sections"></div>`);
-var root_8 = $.from_html(`<section class="cinder-mega-menu__sub"><ul class="cinder-mega-menu__submenu-list"></ul> <!></section>`);
-var root_3 = $.from_html(`<div><section class="cinder-mega-menu__content" role="group" tabindex="-1"><div class="cinder-mega-menu__sections"></div> <!></section></div>`);
-var root = $.from_html(`<nav><ul class="cinder-mega-menu__list"></ul> <!> <!></nav>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "items",
+  "openOnHover",
+  "showViewport",
+  "showIndicator",
+  "label",
+  "class"
+]);
+var root = $.from_html(`<li><button type="button" class="cinder-mega-menu__trigger"> </button></li>`);
+var root_1 = $.from_html(`<div class="cinder-mega-menu__indicator-track" aria-hidden="true"><div class="cinder-mega-menu__indicator"></div></div>`);
+var root_2 = $.from_html(`<h3 class="cinder-mega-menu__section-title"> </h3>`);
+var root_3 = $.from_html(`<span class="cinder-mega-menu__link-description"> </span>`);
+var root_4 = $.from_html(`<li><a class="cinder-mega-menu__link"><span> </span> <!></a></li>`);
+var root_5 = $.from_html(`<section><!> <ul class="cinder-mega-menu__links"></ul></section>`);
+var root_6 = $.from_html(`<li><button type="button" class="cinder-mega-menu__submenu-trigger"> </button></li>`);
+var root_7 = $.from_html(`<h4 class="cinder-mega-menu__section-title"> </h4>`);
+var root_8 = $.from_html(`<div class="cinder-mega-menu__sections"></div>`);
+var root_9 = $.from_html(`<section class="cinder-mega-menu__sub"><ul class="cinder-mega-menu__submenu-list"></ul> <!></section>`);
+var root_10 = $.from_html(`<div><section class="cinder-mega-menu__content" role="group" tabindex="-1"><div class="cinder-mega-menu__sections"></div> <!></section></div>`);
+var root_11 = $.from_html(`<nav><ul class="cinder-mega-menu__list"></ul> <!> <!></nav>`);
 function Mega_menu($$anchor, $$props) {
   const generatedId = $.props_id();
   $.push($$props, true);
-  let openOnHover = $.prop($$props, "openOnHover", 3, false), showViewport = $.prop($$props, "showViewport", 3, true), showIndicator = $.prop($$props, "showIndicator", 3, true), label = $.prop($$props, "label", 3, "Main navigation"), rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "items",
-    "openOnHover",
-    "showViewport",
-    "showIndicator",
-    "label",
-    "class"
-  ]);
+  let openOnHover = $.prop($$props, "openOnHover", 3, false), showViewport = $.prop($$props, "showViewport", 3, true), showIndicator = $.prop($$props, "showIndicator", 3, true), label = $.prop($$props, "label", 3, "Main navigation"), rest = $.rest_props($$props, rest_excludes);
   let navElement = $.state(null);
   let openItemId = $.state(null);
   let previousOpenIndex = $.state(null);
@@ -326,7 +324,7 @@ function Mega_menu($$anchor, $$props) {
   function sections(item) {
     return item?.sections ?? [];
   }
-  var nav = root();
+  var nav = root_11();
   $.attribute_effect(nav, ($0) => ({
     id: $$props.id,
     ...rest,
@@ -336,7 +334,7 @@ function Mega_menu($$anchor, $$props) {
   }), [() => classNames("cinder-mega-menu", $$props.class)]);
   var ul = $.child(nav);
   $.each(ul, 23, () => $$props.items, (item) => item.id, ($$anchor2, item, index) => {
-    var li = root_1();
+    var li = root();
     var button = $.child(li);
     var text = $.child(button, true);
     $.reset(button);
@@ -359,7 +357,7 @@ function Mega_menu($$anchor, $$props) {
   var node = $.sibling(ul, 2);
   {
     var consequent = ($$anchor2) => {
-      var div = root_2();
+      var div = root_1();
       var div_1 = $.child(div);
       $.reset(div);
       $.template_effect(() => $.set_style(div_1, $.get(indicatorStyle)));
@@ -373,15 +371,15 @@ function Mega_menu($$anchor, $$props) {
   var node_1 = $.sibling(node, 2);
   {
     var consequent_7 = ($$anchor2) => {
-      var div_2 = root_3();
+      var div_2 = root_10();
       var section_1 = $.child(div_2);
       var div_3 = $.child(section_1);
       $.each(div_3, 21, () => sections($.get(openItem)), (section) => section.id, ($$anchor3, section) => {
-        var section_2 = root_4();
+        var section_2 = root_5();
         var node_2 = $.child(section_2);
         {
           var consequent_1 = ($$anchor4) => {
-            var h3 = root_5();
+            var h3 = root_2();
             var text_1 = $.child(h3, true);
             $.reset(h3);
             $.template_effect(() => $.set_text(text_1, $.get(section).title));
@@ -394,7 +392,7 @@ function Mega_menu($$anchor, $$props) {
         }
         var ul_1 = $.sibling(node_2, 2);
         $.each(ul_1, 21, () => $.get(section).links, (link) => link.id, ($$anchor4, link) => {
-          var li_1 = root_6();
+          var li_1 = root_4();
           var a = $.child(li_1);
           var span = $.child(a);
           var text_2 = $.child(span, true);
@@ -402,7 +400,7 @@ function Mega_menu($$anchor, $$props) {
           var node_3 = $.sibling(span, 2);
           {
             var consequent_2 = ($$anchor5) => {
-              var span_1 = root_7();
+              var span_1 = root_3();
               var text_3 = $.child(span_1, true);
               $.reset(span_1);
               $.template_effect(() => $.set_text(text_3, $.get(link).description));
@@ -429,10 +427,10 @@ function Mega_menu($$anchor, $$props) {
       var node_4 = $.sibling(div_3, 2);
       {
         var consequent_6 = ($$anchor3) => {
-          var section_3 = root_8();
+          var section_3 = root_9();
           var ul_2 = $.child(section_3);
           $.each(ul_2, 21, () => $.get(openItem).submenu, (sub) => sub.id, ($$anchor4, sub) => {
-            var li_2 = root_9();
+            var li_2 = root_6();
             var button_1 = $.child(li_2);
             var text_4 = $.child(button_1, true);
             $.reset(button_1);
@@ -449,13 +447,13 @@ function Mega_menu($$anchor, $$props) {
           var node_5 = $.sibling(ul_2, 2);
           {
             var consequent_5 = ($$anchor4) => {
-              var div_4 = root_10();
+              var div_4 = root_8();
               $.each(div_4, 21, () => sections($.get(openSubmenu)), (section) => section.id, ($$anchor5, section) => {
-                var section_4 = root_11();
+                var section_4 = root_5();
                 var node_6 = $.child(section_4);
                 {
                   var consequent_3 = ($$anchor6) => {
-                    var h4 = root_12();
+                    var h4 = root_7();
                     var text_5 = $.child(h4, true);
                     $.reset(h4);
                     $.template_effect(() => $.set_text(text_5, $.get(section).title));
@@ -468,7 +466,7 @@ function Mega_menu($$anchor, $$props) {
                 }
                 var ul_3 = $.sibling(node_6, 2);
                 $.each(ul_3, 21, () => $.get(section).links, (link) => link.id, ($$anchor6, link) => {
-                  var li_3 = root_13();
+                  var li_3 = root_4();
                   var a_1 = $.child(li_3);
                   var span_2 = $.child(a_1);
                   var text_6 = $.child(span_2, true);
@@ -476,7 +474,7 @@ function Mega_menu($$anchor, $$props) {
                   var node_7 = $.sibling(span_2, 2);
                   {
                     var consequent_4 = ($$anchor7) => {
-                      var span_3 = root_14();
+                      var span_3 = root_3();
                       var text_7 = $.child(span_3, true);
                       $.reset(span_3);
                       $.template_effect(() => $.set_text(text_7, $.get(link).description));
@@ -549,4 +547,4 @@ export {
   Mega_menu as MegaMenu
 };
 
-//# debugId=73557DB8F8F17E9964756E2164756E21
+//# debugId=94EEEC1FEE9039EC64756E2164756E21