@lostgradient/cinder 0.5.0 → 0.7.0

package/dist/components/checkbox/checkbox.schema.js

@@ -83,6 +83,10 @@ var schema = {
     error: {
       type: "string",
       description: 'Validation error message; sets `aria-invalid="true"` and `aria-describedby`.'
+    },
+    fieldClass: {
+      type: "string",
+      description: "Extra class names merged with the outer checkbox field wrapper."
     }
   },
   additionalProperties: false,
@@ -106,4 +110,4 @@ export {
   checkbox_schema_default as default
 };
 
-//# debugId=97D1AE938CADCE0364756E2164756E21
+//# debugId=6C685CB73CCB0C8C64756E2164756E21

package/dist/components/checkbox/checkbox.types.d.ts

@@ -32,6 +32,8 @@ export type CheckboxProps = HTMLInputAttributes & {
     error?: string;
     /** Disables the checkbox. */
     disabled?: boolean;
+    /** Extra class names merged with the outer checkbox field wrapper. */
+    fieldClass?: string;
     /** Extra class names merged with `.cinder-checkbox`. */
     class?: string;
 };

package/dist/components/checkbox/index.js

@@ -139,32 +139,34 @@ function commitValue(proposed, onValueChange, setValue) {
 }
 
 // src/components/checkbox/checkbox.svelte
-var root_2 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "checked",
+  "onValueChange",
+  "indeterminate",
+  "label",
+  "description",
+  "error",
+  "disabled",
+  "required",
+  "fieldClass",
+  "class",
+  "aria-describedby",
+  "aria-invalid",
+  "onchange"
+]);
+var root = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
 var root_1 = $.from_html(`<label class="cinder-checkbox-field__label"> <!></label>`);
-var root_3 = $.from_html(`<p class="cinder-checkbox-field__description"> </p>`);
-var root_4 = $.from_html(`<p class="cinder-checkbox-field__error" aria-live="polite"> </p>`);
-var root = $.from_html(`<div class="cinder-checkbox-field"><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> <!></div> <!> <!></div>`);
+var root_2 = $.from_html(`<p class="cinder-checkbox-field__description"> </p>`);
+var root_3 = $.from_html(`<p class="cinder-checkbox-field__error" aria-live="polite"> </p>`);
+var root_4 = $.from_html(`<div><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> <!></div> <!> <!></div>`);
 function Checkbox($$anchor, $$props) {
   const generatedId = $.props_id();
   $.push($$props, true);
-  let checked = $.prop($$props, "checked", 15, false), indeterminate = $.prop($$props, "indeterminate", 11, false), rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "checked",
-    "onValueChange",
-    "indeterminate",
-    "label",
-    "description",
-    "error",
-    "disabled",
-    "required",
-    "class",
-    "aria-describedby",
-    "aria-invalid",
-    "onchange"
-  ]);
+  let checked = $.prop($$props, "checked", 15, false), indeterminate = $.prop($$props, "indeterminate", 11, false), rest = $.rest_props($$props, rest_excludes);
   const context = getFormFieldContext();
   const field = $.derived(() => resolveFieldControl({
     ...$$props.id !== undefined ? { id: $$props.id } : {},
@@ -223,7 +225,7 @@ function Checkbox($$anchor, $$props) {
     target.indeterminate = indeterminate() && !committed;
     $$props.onchange?.(event);
   }
-  var div = root();
+  var div = root_4();
   var div_1 = $.child(div);
   var span = $.child(div_1);
   var input = $.child(span);
@@ -250,7 +252,7 @@ function Checkbox($$anchor, $$props) {
       var node_1 = $.sibling(text);
       {
         var consequent = ($$anchor3) => {
-          var span_1 = root_2();
+          var span_1 = root();
           $.append($$anchor3, span_1);
         };
         $.if(node_1, ($$render) => {
@@ -275,7 +277,7 @@ function Checkbox($$anchor, $$props) {
   var node_2 = $.sibling(div_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var p = root_3();
+      var p = root_2();
       var text_1 = $.child(p, true);
       $.reset(p);
       $.template_effect(() => {
@@ -292,7 +294,7 @@ function Checkbox($$anchor, $$props) {
   var node_3 = $.sibling(node_2, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var p_1 = root_4();
+      var p_1 = root_3();
       var text_2 = $.child(p_1, true);
       $.reset(p_1);
       $.template_effect(() => {
@@ -307,6 +309,9 @@ function Checkbox($$anchor, $$props) {
     });
   }
   $.reset(div);
+  $.template_effect(($0) => $.set_class(div, 1, $0), [
+    () => $.clsx(classNames("cinder-checkbox-field", $$props.fieldClass))
+  ]);
   $.append($$anchor, div);
   $.pop();
 }
@@ -318,4 +323,4 @@ export {
   Checkbox
 };
 
-//# debugId=58E339CDC4566D7764756E2164756E21
+//# debugId=59B5755AAD8FA45B64756E2164756E21

package/dist/components/checkbox-group/index.js

@@ -111,11 +111,11 @@ function devWarn(message, ...args) {
 }
 
 // src/components/checkbox-group/checkbox-group.svelte
-var root_2 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
 var root_1 = $.from_html(`<legend class="cinder-checkbox-group__legend"> <!></legend>`);
-var root_3 = $.from_html(`<p class="cinder-checkbox-group__description"> </p>`);
-var root_4 = $.from_html(`<p class="cinder-checkbox-group__error" aria-live="polite"> </p>`);
-var root = $.from_html(`<fieldset><!> <div class="cinder-checkbox-group__items"><!></div> <!> <!></fieldset>`);
+var root_2 = $.from_html(`<p class="cinder-checkbox-group__description"> </p>`);
+var root_3 = $.from_html(`<p class="cinder-checkbox-group__error" aria-live="polite"> </p>`);
+var root_4 = $.from_html(`<fieldset><!> <div class="cinder-checkbox-group__items"><!></div> <!> <!></fieldset>`);
 function Checkbox_group($$anchor, $$props) {
   const groupId = $.props_id();
   $.push($$props, true);
@@ -130,7 +130,7 @@ function Checkbox_group($$anchor, $$props) {
       devWarn("[cinder/CheckboxGroup] A <fieldset> was rendered without a label prop. The fieldset will have no <legend>, which makes it inaccessible. Provide a label prop to describe the group.");
     }
   });
-  var fieldset = root();
+  var fieldset = root_4();
   var node = $.child(fieldset);
   {
     var consequent_1 = ($$anchor2) => {
@@ -139,7 +139,7 @@ function Checkbox_group($$anchor, $$props) {
       var node_1 = $.sibling(text);
       {
         var consequent = ($$anchor3) => {
-          var span = root_2();
+          var span = root();
           $.append($$anchor3, span);
         };
         $.if(node_1, ($$render) => {
@@ -163,7 +163,7 @@ function Checkbox_group($$anchor, $$props) {
   var node_3 = $.sibling(div, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var p = root_3();
+      var p = root_2();
       var text_1 = $.child(p, true);
       $.reset(p);
       $.template_effect(() => {
@@ -180,7 +180,7 @@ function Checkbox_group($$anchor, $$props) {
   var node_4 = $.sibling(node_3, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var p_1 = root_4();
+      var p_1 = root_3();
       var text_2 = $.child(p_1, true);
       $.reset(p_1);
       $.template_effect(() => {
@@ -219,4 +219,4 @@ export {
   Checkbox_group as CheckboxGroup
 };
 
-//# debugId=1C7ABF6CC412BF0064756E2164756E21
+//# debugId=B80BA7F14B09138764756E2164756E21

package/dist/components/chip/index.js

@@ -64,15 +64,14 @@ function classNames(...parts) {
 }
 
 // src/components/chip/chip.svelte
-var root_2 = $.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
+var rest_excludes = new Set(["$$slots", "$$events", "$$legacy"]);
+var root = $.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
 var root_1 = $.from_html(`<button><!> <span class="cinder-chip__label"> </span></button>`);
-var root_4 = $.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
-var root_3 = $.from_html(`<span><!> <span class="cinder-chip__label"> </span> <button type="button" class="cinder-chip__remove"><span aria-hidden="true">×</span></button></span>`);
-var root_6 = $.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
-var root_5 = $.from_html(`<span><!> <span class="cinder-chip__label"> </span></span>`);
+var root_2 = $.from_html(`<span><!> <span class="cinder-chip__label"> </span> <button type="button" class="cinder-chip__remove"><span aria-hidden="true">×</span></button></span>`);
+var root_3 = $.from_html(`<span><!> <span class="cinder-chip__label"> </span></span>`);
 function Chip($$anchor, $$props) {
   $.push($$props, true);
-  let props = $.rest_props($$props, ["$$slots", "$$events", "$$legacy"]);
+  let props = $.rest_props($$props, rest_excludes);
   const mode = $.derived(() => $$props.mode ?? "display");
   const label = $.derived(() => $$props.label);
   const variant = $.derived(() => $$props.variant ?? "neutral");
@@ -149,7 +148,7 @@ function Chip($$anchor, $$props) {
       var node_1 = $.child(button);
       {
         var consequent = ($$anchor3) => {
-          var span = root_2();
+          var span = root();
           var node_2 = $.child(span);
           $.snippet(node_2, () => $.get(leadingIcon));
           $.reset(span);
@@ -168,7 +167,7 @@ function Chip($$anchor, $$props) {
       $.append($$anchor2, button);
     };
     var consequent_3 = ($$anchor2) => {
-      var span_2 = root_3();
+      var span_2 = root_2();
       $.attribute_effect(span_2, ($0) => ({
         ...$.get(rest),
         role: "group",
@@ -184,7 +183,7 @@ function Chip($$anchor, $$props) {
       var node_3 = $.child(span_2);
       {
         var consequent_2 = ($$anchor3) => {
-          var span_3 = root_4();
+          var span_3 = root();
           var node_4 = $.child(span_3);
           $.snippet(node_4, () => $.get(leadingIcon));
           $.reset(span_3);
@@ -212,7 +211,7 @@ function Chip($$anchor, $$props) {
       $.append($$anchor2, span_2);
     };
     var alternate = ($$anchor2) => {
-      var span_5 = root_5();
+      var span_5 = root_3();
       $.attribute_effect(span_5, ($0) => ({
         ...$.get(rest),
         "data-cinder-mode": "display",
@@ -224,7 +223,7 @@ function Chip($$anchor, $$props) {
       var node_5 = $.child(span_5);
       {
         var consequent_4 = ($$anchor3) => {
-          var span_6 = root_6();
+          var span_6 = root();
           var node_6 = $.child(span_6);
           $.snippet(node_6, () => $.get(leadingIcon));
           $.reset(span_6);
@@ -263,4 +262,4 @@ export {
   Chip
 };
 
-//# debugId=599520A54C5201F764756E2164756E21
+//# debugId=AF190B89B2A2DBE264756E2164756E21

package/dist/components/choice-grid/index.js

@@ -268,24 +268,25 @@ function getFocusableIndex(selectedIndex, length, isDisabled) {
 }
 
 // src/components/choice-grid/choice-grid.svelte
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "value",
+  "values",
+  "multiple",
+  "columns",
+  "minColumnWidth",
+  "ariaLabel",
+  "ariaLabelledby",
+  "disabled",
+  "class",
+  "children"
+]);
 var root2 = $2.from_html(`<div><!></div>`);
 function Choice_grid($$anchor, $$props) {
   $2.push($$props, true);
-  let value = $2.prop($$props, "value", 15, null), values = $2.prop($$props, "values", 31, () => $2.proxy([])), multiple = $2.prop($$props, "multiple", 3, false), columns = $2.prop($$props, "columns", 3, "responsive"), minColumnWidth = $2.prop($$props, "minColumnWidth", 3, "10rem"), disabled = $2.prop($$props, "disabled", 3, false), rest = $2.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "value",
-    "values",
-    "multiple",
-    "columns",
-    "minColumnWidth",
-    "ariaLabel",
-    "ariaLabelledby",
-    "disabled",
-    "class",
-    "children"
-  ]);
+  let value = $2.prop($$props, "value", 15, null), values = $2.prop($$props, "values", 31, () => $2.proxy([])), multiple = $2.prop($$props, "multiple", 3, false), columns = $2.prop($$props, "columns", 3, "responsive"), minColumnWidth = $2.prop($$props, "minColumnWidth", 3, "10rem"), disabled = $2.prop($$props, "disabled", 3, false), rest = $2.rest_props($$props, rest_excludes);
   const items = new Map;
   let version = $2.state(0);
   const singleSelection = $2.derived(() => createSingleSelection(() => value() ?? null, (next) => {
@@ -463,4 +464,4 @@ export {
   ChoiceGrid
 };
 
-//# debugId=D4B8EBC710E194BB64756E2164756E21
+//# debugId=96731DC9823A94C764756E2164756E21

package/dist/components/click-away-listener/index.js

@@ -61,18 +61,19 @@ function classNames(...parts) {
 }
 
 // src/components/click-away-listener/click-away-listener.svelte
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "onclickaway",
+  "enabled",
+  "class",
+  "children"
+]);
 var root = $.from_html(`<div><!></div>`);
 function Click_away_listener($$anchor, $$props) {
   $.push($$props, true);
-  let enabled = $.prop($$props, "enabled", 3, true), rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "onclickaway",
-    "enabled",
-    "class",
-    "children"
-  ]);
+  let enabled = $.prop($$props, "enabled", 3, true), rest = $.rest_props($$props, rest_excludes);
   let rootElement = $.state(undefined);
   $.user_effect(() => {
     if (!enabled())
@@ -117,4 +118,4 @@ export {
   Click_away_listener as ClickAwayListener
 };
 
-//# debugId=E7EE75734D63F1F864756E2164756E21
+//# debugId=6916F9D6AFE9914B64756E2164756E21

package/dist/components/code-block/code-block.css

@@ -126,7 +126,34 @@
    * selector and is (correctly) rejected here. */
 
   /* Explicit dark choice. */
-  [data-cinder-theme='dark'] .cinder-code-block :where(pre.shiki) span {
+  [data-cinder-theme='dark']
+    .cinder-code-block
+    :where(pre.shiki)
+    span:not(
+      [data-cinder-theme='dark'] [data-theme='light'] .cinder-code-block :where(pre.shiki) span
+    ),
+  [data-cinder-theme='dark']
+    [data-theme='light']
+    [data-theme='dark']
+    .cinder-code-block
+    :where(pre.shiki)
+    span:not(
+      [data-cinder-theme='dark']
+        [data-theme='light']
+        [data-theme='dark']
+        [data-theme='light']
+        .cinder-code-block
+        :where(pre.shiki)
+        span
+    ),
+  [data-cinder-theme='dark']
+    [data-theme='light']
+    [data-theme='dark']
+    [data-theme='light']
+    [data-theme='dark']
+    .cinder-code-block
+    :where(pre.shiki)
+    span {
     color: var(--shiki-dark, inherit) !important;
   }
 
@@ -134,7 +161,34 @@
    * `data-cinder-theme="system"` and leaves `color-scheme: light dark` to follow
    * `prefers-color-scheme`, so we mirror that here for the inline-style swap. */
   @media (prefers-color-scheme: dark) {
-    [data-cinder-theme='system'] .cinder-code-block :where(pre.shiki) span {
+    [data-cinder-theme='system']
+      .cinder-code-block
+      :where(pre.shiki)
+      span:not(
+        [data-cinder-theme='system'] [data-theme='light'] .cinder-code-block :where(pre.shiki) span
+      ),
+    [data-cinder-theme='system']
+      [data-theme='light']
+      [data-theme='dark']
+      .cinder-code-block
+      :where(pre.shiki)
+      span:not(
+        [data-cinder-theme='system']
+          [data-theme='light']
+          [data-theme='dark']
+          [data-theme='light']
+          .cinder-code-block
+          :where(pre.shiki)
+          span
+      ),
+    [data-cinder-theme='system']
+      [data-theme='light']
+      [data-theme='dark']
+      [data-theme='light']
+      [data-theme='dark']
+      .cinder-code-block
+      :where(pre.shiki)
+      span {
       color: var(--shiki-dark, inherit) !important;
     }
   }

package/dist/components/code-block/index.js

@@ -407,22 +407,23 @@ function _visually_hidden_live_region($$anchor, $$props) {
 }
 
 // src/components/copy-button/copy-button.svelte
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "value",
+  "confirmDuration",
+  "label",
+  "copiedLabel",
+  "iconOnly",
+  "class",
+  "children",
+  "confirmation"
+]);
 var root3 = $5.from_html(`<button><!></button> <!>`, 1);
 function Copy_button($$anchor, $$props) {
   $5.push($$props, true);
-  let confirmDuration = $5.prop($$props, "confirmDuration", 3, 1500), iconOnly = $5.prop($$props, "iconOnly", 3, false), rest = $5.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "value",
-    "confirmDuration",
-    "label",
-    "copiedLabel",
-    "iconOnly",
-    "class",
-    "children",
-    "confirmation"
-  ]);
+  let confirmDuration = $5.prop($$props, "confirmDuration", 3, 1500), iconOnly = $5.prop($$props, "iconOnly", 3, false), rest = $5.rest_props($$props, rest_excludes);
   let copied = $5.state(false);
   let resetTimer;
   const copiedAnnouncement = $5.derived(() => $5.get(copied) ? $$props.copiedLabel ?? "Copied" : "");
@@ -462,7 +463,7 @@ function Copy_button($$anchor, $$props) {
       $5.append($$anchor2, fragment_1);
     };
     var consequent_1 = ($$anchor2) => {
-      Check($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
+      Check($$anchor2, { class: "cinder-icon-sm", "aria-hidden": "true" });
     };
     var consequent_2 = ($$anchor2) => {
       var text2 = $5.text("Copied");
@@ -475,7 +476,7 @@ function Copy_button($$anchor, $$props) {
       $5.append($$anchor2, fragment_3);
     };
     var consequent_4 = ($$anchor2) => {
-      Copy($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
+      Copy($$anchor2, { class: "cinder-icon-sm", "aria-hidden": "true" });
     };
     var alternate = ($$anchor2) => {
       var text_1 = $5.text("Copy");
@@ -508,12 +509,11 @@ function Copy_button($$anchor, $$props) {
 }
 
 // src/components/code-block/code-block.svelte
-var root_2 = $6.from_html(`<span class="cinder-code-block__language"> </span>`);
+var root4 = $6.from_html(`<span class="cinder-code-block__language"> </span>`);
 var root_1 = $6.from_html(`<header class="cinder-code-block__header"><!> <!></header>`);
-var root_4 = $6.from_html(`<pre class="cinder-code-block__pre"><code class="cinder-code-block__code"> </code></pre>`);
-var root_6 = $6.from_html(`<div class="cinder-code-block__highlighted"></div>`);
-var root_7 = $6.from_html(`<pre class="cinder-code-block__pre"><code class="cinder-code-block__code"> </code></pre>`);
-var root4 = $6.from_html(`<div><!> <div class="cinder-code-block__viewport" tabindex="0"><!></div></div>`);
+var root_2 = $6.from_html(`<pre class="cinder-code-block__pre"><code class="cinder-code-block__code"> </code></pre>`);
+var root_3 = $6.from_html(`<div class="cinder-code-block__highlighted"></div>`);
+var root_4 = $6.from_html(`<div><!> <div class="cinder-code-block__viewport" tabindex="0"><!></div></div>`);
 function Code_block($$anchor, $$props) {
   $6.push($$props, true);
   let copyable = $6.prop($$props, "copyable", 3, false);
@@ -547,7 +547,7 @@ function Code_block($$anchor, $$props) {
       cancelled = true;
     };
   });
-  var div = root4();
+  var div = root_4();
   var node = $6.child(div);
   {
     var consequent_2 = ($$anchor2) => {
@@ -555,7 +555,7 @@ function Code_block($$anchor, $$props) {
       var node_1 = $6.child(header);
       {
         var consequent = ($$anchor3) => {
-          var span = root_2();
+          var span = root4();
           var text2 = $6.child(span, true);
           $6.reset(span);
           $6.template_effect(() => $6.set_text(text2, $$props.language));
@@ -596,7 +596,7 @@ function Code_block($$anchor, $$props) {
   var node_3 = $6.child(div_1);
   {
     const failed = ($$anchor2) => {
-      var pre = root_4();
+      var pre = root_2();
       var code_1 = $6.child(pre);
       var text_1 = $6.child(code_1, true);
       $6.reset(code_1);
@@ -609,13 +609,13 @@ function Code_block($$anchor, $$props) {
       var node_4 = $6.first_child(fragment_1);
       {
         var consequent_3 = ($$anchor3) => {
-          var div_2 = root_6();
+          var div_2 = root_3();
           $6.html(div_2, () => $6.get(highlighted), true);
           $6.reset(div_2);
           $6.append($$anchor3, div_2);
         };
         var alternate = ($$anchor3) => {
-          var pre_1 = root_7();
+          var pre_1 = root_2();
           var code_2 = $6.child(pre_1);
           var text_2 = $6.child(code_2, true);
           $6.reset(code_2);
@@ -647,4 +647,4 @@ export {
   Code_block as CodeBlock
 };
 
-//# debugId=B4C0B65783D45F1964756E2164756E21
+//# debugId=19A9E27608520E6264756E2164756E21

package/dist/components/collapsible/index.js

@@ -80,26 +80,27 @@ function useReducedMotion() {
 }
 
 // src/components/collapsible/collapsible.svelte
-var root_1 = $2.from_html(`<span> </span>`);
-var root_2 = $2.from_html(`<span><!></span>`);
-var root_3 = $2.from_html(`<div role="region" class="cinder-collapsible__panel"><div class="cinder-collapsible__panel-inner"><!></div></div>`);
-var root = $2.from_html(`<div><button type="button" class="cinder-collapsible__trigger"><span class="cinder-collapsible__label"><!></span> <svg class="cinder-collapsible__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"></path></svg></button> <!></div>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "trigger",
+  "children",
+  "open",
+  "ontoggle",
+  "disabled",
+  "triggerAriaLabel",
+  "idBase",
+  "class"
+]);
+var root = $2.from_html(`<span> </span>`);
+var root_1 = $2.from_html(`<span><!></span>`);
+var root_2 = $2.from_html(`<div role="region" class="cinder-collapsible__panel"><div class="cinder-collapsible__panel-inner"><!></div></div>`);
+var root_3 = $2.from_html(`<div><button type="button" class="cinder-collapsible__trigger"><span class="cinder-collapsible__label"><!></span> <svg class="cinder-collapsible__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"></path></svg></button> <!></div>`);
 function Collapsible($$anchor, $$props) {
   const autoId = $2.props_id();
   $2.push($$props, true);
-  let open = $2.prop($$props, "open", 15, false), disabled = $2.prop($$props, "disabled", 3, false), rest = $2.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "trigger",
-    "children",
-    "open",
-    "ontoggle",
-    "disabled",
-    "triggerAriaLabel",
-    "idBase",
-    "class"
-  ]);
+  let open = $2.prop($$props, "open", 15, false), disabled = $2.prop($$props, "disabled", 3, false), rest = $2.rest_props($$props, rest_excludes);
   const SLIDE_MS = 200;
   const motion = useReducedMotion();
   const slideMs = $2.derived(() => motion.current ? 0 : SLIDE_MS);
@@ -116,7 +117,7 @@ function Collapsible($$anchor, $$props) {
     open(next2);
     $$props.ontoggle?.(next2);
   }
-  var div = root();
+  var div = root_3();
   $2.attribute_effect(div, ($0) => ({
     ...rest,
     class: $0,
@@ -128,7 +129,7 @@ function Collapsible($$anchor, $$props) {
   var node = $2.child(span);
   {
     var consequent = ($$anchor2) => {
-      var span_1 = root_1();
+      var span_1 = root();
       var text = $2.child(span_1, true);
       $2.reset(span_1);
       $2.template_effect(() => {
@@ -138,7 +139,7 @@ function Collapsible($$anchor, $$props) {
       $2.append($$anchor2, span_1);
     };
     var alternate = ($$anchor2) => {
-      var span_2 = root_2();
+      var span_2 = root_1();
       var node_1 = $2.child(span_2);
       $2.snippet(node_1, () => $$props.trigger, () => ({ open: open(), disabled: disabled() }));
       $2.reset(span_2);
@@ -158,7 +159,7 @@ function Collapsible($$anchor, $$props) {
   var node_2 = $2.sibling(button, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var div_1 = root_3();
+      var div_1 = root_2();
       var div_2 = $2.child(div_1);
       var node_3 = $2.child(div_2);
       $2.snippet(node_3, () => $$props.children);
@@ -197,4 +198,4 @@ export {
   Collapsible
 };
 
-//# debugId=C990BCDB6A6EA80F64756E2164756E21
+//# debugId=A9C45BF08DABEDFF64756E2164756E21