@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/components/data-table/index.js

@@ -0,0 +1,591 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/data-table/index.ts
+import"@lostgradient/cinder/data-table/styles";
+
+// src/components/data-table/data-table.svelte
+import"svelte/internal/disclose-version";
+import * as $7 from "svelte/internal/client";
+
+// src/components/table-body/table-body.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+
+// src/components/table/table.context.ts
+import { createContext } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/components/table/table.context.ts
+var [getTableContextStrict, setTableContext] = createContext();
+var getTableContext = getTableContextStrict;
+var tryGetTableContext = optionalContext(getTableContextStrict);
+var [getTableSectionContextStrict, setTableSectionContext] = createContext();
+var tryGetTableSectionContext = optionalContext(getTableSectionContextStrict);
+var [getTableHeaderSelectionContextStrict, setTableHeaderSelectionContext] = createContext();
+var tryGetTableHeaderSelectionContext = optionalContext(getTableHeaderSelectionContextStrict);
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/table-body/table-body.svelte
+var root = $.from_html(`<tbody><!></tbody>`);
+function Table_body($$anchor, $$props) {
+  $.push($$props, true);
+  setTableSectionContext("body");
+  var tbody = root();
+  var node = $.child(tbody);
+  $.snippet(node, () => $$props.children);
+  $.reset(tbody);
+  $.template_effect(($0) => $.set_class(tbody, 1, $0), [
+    () => $.clsx(classNames("cinder-table__body", $$props.class))
+  ]);
+  $.append($$anchor, tbody);
+  $.pop();
+}
+
+// src/components/table-cell/table-cell.svelte
+import"svelte/internal/disclose-version";
+import * as $2 from "svelte/internal/client";
+function Table_cell($$anchor, $$props) {
+  $2.push($$props, true);
+  let align = $2.prop($$props, "align", 3, "left"), as = $2.prop($$props, "as", 3, "td"), rest = $2.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "align",
+    "as",
+    "class",
+    "children"
+  ]);
+  var fragment = $2.comment();
+  var node = $2.first_child(fragment);
+  $2.element(node, as, false, ($$element, $$anchor2) => {
+    $2.attribute_effect($$element, ($0) => ({
+      ...rest,
+      scope: as() === "th" ? "row" : undefined,
+      class: $0,
+      "data-cinder-align": align()
+    }), [() => classNames("cinder-table__cell", $$props.class)]);
+    var fragment_1 = $2.comment();
+    var node_1 = $2.first_child(fragment_1);
+    $2.snippet(node_1, () => $$props.children ?? $2.noop);
+    $2.append($$anchor2, fragment_1);
+  });
+  $2.append($$anchor, fragment);
+  $2.pop();
+}
+
+// src/components/table-header-cell/table-header-cell.svelte
+import"svelte/internal/disclose-version";
+import * as $3 from "svelte/internal/client";
+var root_1 = $3.from_html(`<button type="button" class="cinder-table__sort-button"><!> <span class="cinder-table__sort-indicator" aria-hidden="true"><svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline class="cinder-table__sort-chevron-up" points="4 7 8 4 12 7"></polyline><polyline class="cinder-table__sort-chevron-down" points="4 9 8 12 12 9"></polyline></svg></span></button>`);
+var root2 = $3.from_html(`<th><!></th>`);
+function Table_header_cell($$anchor, $$props) {
+  $3.push($$props, true);
+  let sortable = $3.prop($$props, "sortable", 3, false), scope = $3.prop($$props, "scope", 3, "col"), align = $3.prop($$props, "align", 3, "left"), rest = $3.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "column",
+    "sortable",
+    "scope",
+    "align",
+    "class",
+    "children"
+  ]);
+  const table = getTableContext();
+  const isSortable = $3.derived(() => sortable() && !!$$props.column);
+  const ariaSort = $3.derived(() => $3.get(isSortable) && table.sort?.column === $$props.column ? table.sort?.direction : $3.get(isSortable) ? "none" : undefined);
+  function handleClick() {
+    if (!sortable() || !$$props.column)
+      return;
+    table.onSortChange($$props.column);
+  }
+  var th = root2();
+  $3.attribute_effect(th, ($0) => ({
+    ...rest,
+    scope: scope(),
+    class: $0,
+    "data-cinder-align": align(),
+    "data-cinder-sortable": $3.get(isSortable) || undefined,
+    "aria-sort": $3.get(ariaSort)
+  }), [() => classNames("cinder-table__header-cell", $$props.class)]);
+  var node = $3.child(th);
+  {
+    var consequent = ($$anchor2) => {
+      var button = root_1();
+      var node_1 = $3.child(button);
+      $3.snippet(node_1, () => $$props.children);
+      var span = $3.sibling(node_1, 2);
+      $3.reset(button);
+      $3.template_effect(() => $3.set_attribute(span, "data-cinder-direction", $3.get(ariaSort)));
+      $3.delegated("click", button, handleClick);
+      $3.append($$anchor2, button);
+    };
+    var alternate = ($$anchor2) => {
+      var fragment = $3.comment();
+      var node_2 = $3.first_child(fragment);
+      $3.snippet(node_2, () => $$props.children);
+      $3.append($$anchor2, fragment);
+    };
+    $3.if(node, ($$render) => {
+      if ($3.get(isSortable))
+        $$render(consequent);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  $3.reset(th);
+  $3.append($$anchor, th);
+  $3.pop();
+}
+$3.delegate(["click"]);
+
+// src/components/table-header/table-header.svelte
+import"svelte/internal/disclose-version";
+import * as $4 from "svelte/internal/client";
+import { untrack } from "svelte";
+var root3 = $4.from_html(`<thead><!></thead>`);
+function Table_header($$anchor, $$props) {
+  $4.push($$props, true);
+  let selectAllLabel = $4.prop($$props, "selectAllLabel", 3, "Select all rows");
+  const table = tryGetTableContext();
+  const selectionEnabled = table?.selectionEnabled ?? false;
+  if (selectionEnabled && untrack(() => $$props.allSelected === undefined || $$props.someSelected === undefined || !$$props.onSelectAll)) {
+    throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onSelectAll` are required when Table.selectable is true.");
+  }
+  let hasSelectionHeaderCell = false;
+  function claimSelectionHeaderCell() {
+    if (hasSelectionHeaderCell) {
+      throw new Error("[Cinder] TableHeader: Table.selectable supports exactly one TableRow inside TableHeader.");
+    }
+    hasSelectionHeaderCell = true;
+  }
+  setTableSectionContext("header");
+  setTableHeaderSelectionContext({
+    get allSelected() {
+      return $$props.allSelected ?? false;
+    },
+    get someSelected() {
+      return $$props.someSelected ?? false;
+    },
+    get onSelectAll() {
+      return $$props.onSelectAll ?? (() => {});
+    },
+    get selectAllLabel() {
+      return selectAllLabel();
+    },
+    claimSelectionHeaderCell
+  });
+  var thead = root3();
+  var node = $4.child(thead);
+  $4.snippet(node, () => $$props.children);
+  $4.reset(thead);
+  $4.template_effect(($0) => $4.set_class(thead, 1, $0), [
+    () => $4.clsx(classNames("cinder-table__header", $$props.class))
+  ]);
+  $4.append($$anchor, thead);
+  $4.pop();
+}
+
+// src/components/table-row/table-row.svelte
+import"svelte/internal/disclose-version";
+import * as $5 from "svelte/internal/client";
+import { untrack as untrack2 } from "svelte";
+
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
+// src/components/table-row/table-row.svelte
+var root_12 = $5.from_html(`<th scope="col" class="cinder-table__header-cell cinder-table__header-cell--selection"><input type="checkbox" class="cinder-table__selection-checkbox"/></th>`);
+var root_3 = $5.from_html(`<td class="cinder-table__cell cinder-table__cell--selection cinder-table__cell--selection-disabled"><input type="checkbox" class="cinder-table__selection-checkbox" disabled=""/></td>`);
+var root_4 = $5.from_html(`<td class="cinder-table__cell cinder-table__cell--selection"><input type="checkbox" class="cinder-table__selection-checkbox"/></td>`);
+var root4 = $5.from_html(`<tr><!><!><!></tr>`);
+function Table_row($$anchor, $$props) {
+  $5.push($$props, true);
+  const table = tryGetTableContext();
+  const selectionEnabled = table?.selectionEnabled ?? false;
+  const section = tryGetTableSectionContext();
+  const headerSelection = tryGetTableHeaderSelectionContext();
+  if (selectionEnabled && section === "body") {
+    untrack2(() => {
+      const hasDisabled = $$props.selectionDisabled === true;
+      if (!hasDisabled) {
+        const hasSelected = $$props.selected !== undefined;
+        const hasOnChange = $$props.onSelectedChange !== undefined;
+        const hasLabel = $$props.selectionLabel !== undefined;
+        if (!hasSelected || !hasOnChange || !hasLabel) {
+          throw new Error("[Cinder] TableRow: when Table.selectable is true, each body row must supply " + "selected + onSelectedChange + selectionLabel together, or set selectionDisabled={true}. " + `Missing: ${[
+            !hasSelected && "selected",
+            !hasOnChange && "onSelectedChange",
+            !hasLabel && "selectionLabel"
+          ].filter(Boolean).join(", ")}.`);
+        }
+      }
+    });
+  }
+  if (selectionEnabled && section === undefined) {
+    devWarn("[Cinder] TableRow: rendered outside TableHeader or TableBody while Table.selectable is true. " + "The leading selection cell will not be rendered.");
+  }
+  function handleSelectAllChange(event) {
+    const input = event.currentTarget;
+    headerSelection?.onSelectAll(input.checked);
+  }
+  function handleRowChange(event) {
+    const input = event.currentTarget;
+    $$props.onSelectedChange?.(input.checked);
+  }
+  const shouldRenderHeaderSelectionCell = selectionEnabled && section === "header" && headerSelection !== undefined;
+  if (shouldRenderHeaderSelectionCell) {
+    headerSelection?.claimSelectionHeaderCell();
+  }
+  var tr = root4();
+  var node_1 = $5.child(tr);
+  {
+    var consequent = ($$anchor2) => {
+      var th = root_12();
+      var input_1 = $5.child(th);
+      $5.remove_input_defaults(input_1);
+      $5.attach(input_1, () => (node) => {
+        $5.user_effect(() => {
+          node.indeterminate = headerSelection.someSelected && !headerSelection.allSelected;
+        });
+      });
+      $5.reset(th);
+      $5.template_effect(() => {
+        $5.set_checked(input_1, headerSelection.allSelected);
+        $5.set_attribute(input_1, "aria-label", headerSelection.selectAllLabel);
+      });
+      $5.delegated("change", input_1, handleSelectAllChange);
+      $5.append($$anchor2, th);
+    };
+    $5.if(node_1, ($$render) => {
+      if (shouldRenderHeaderSelectionCell && headerSelection)
+        $$render(consequent);
+    });
+  }
+  var node_2 = $5.sibling(node_1);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var fragment = $5.comment();
+      var node_3 = $5.first_child(fragment);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var td = root_3();
+          var input_2 = $5.child(td);
+          $5.reset(td);
+          $5.template_effect(() => $5.set_attribute(input_2, "aria-label", $$props.selectionLabel ?? "Selection not allowed for this row"));
+          $5.append($$anchor3, td);
+        };
+        var alternate = ($$anchor3) => {
+          var td_1 = root_4();
+          var input_3 = $5.child(td_1);
+          $5.remove_input_defaults(input_3);
+          $5.reset(td_1);
+          $5.template_effect(() => {
+            $5.set_checked(input_3, $$props.selected);
+            $5.set_attribute(input_3, "aria-label", $$props.selectionLabel);
+          });
+          $5.delegated("change", input_3, handleRowChange);
+          $5.append($$anchor3, td_1);
+        };
+        $5.if(node_3, ($$render) => {
+          if ($$props.selectionDisabled)
+            $$render(consequent_1);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      $5.append($$anchor2, fragment);
+    };
+    $5.if(node_2, ($$render) => {
+      if (selectionEnabled && section === "body")
+        $$render(consequent_2);
+    });
+  }
+  var node_4 = $5.sibling(node_2);
+  $5.snippet(node_4, () => $$props.children);
+  $5.reset(tr);
+  $5.template_effect(($0) => $5.set_class(tr, 1, $0), [() => $5.clsx(classNames("cinder-table__row", $$props.class))]);
+  $5.append($$anchor, tr);
+  $5.pop();
+}
+$5.delegate(["change"]);
+
+// src/components/table/table.svelte
+import"svelte/internal/disclose-version";
+import * as $6 from "svelte/internal/client";
+var root_13 = $6.from_html(`<caption class="cinder-table__caption"> </caption>`);
+var root5 = $6.from_html(`<table><!><!></table>`);
+function Table($$anchor, $$props) {
+  $6.push($$props, true);
+  let sort = $6.prop($$props, "sort", 15), stickyHeader = $6.prop($$props, "stickyHeader", 3, false), density = $6.prop($$props, "density", 3, "comfortable"), selectable = $6.prop($$props, "selectable", 3, false);
+  function onSortChange(column) {
+    if (!sort() || sort().column !== column) {
+      sort({ column, direction: "ascending" });
+      return;
+    }
+    sort({
+      column,
+      direction: sort().direction === "ascending" ? "descending" : "ascending"
+    });
+  }
+  setTableContext({
+    get sort() {
+      return sort();
+    },
+    get selectionEnabled() {
+      return selectable();
+    },
+    onSortChange
+  });
+  var table = root5();
+  var node = $6.child(table);
+  {
+    var consequent = ($$anchor2) => {
+      var caption_1 = root_13();
+      var text = $6.child(caption_1, true);
+      $6.reset(caption_1);
+      $6.template_effect(() => $6.set_text(text, $$props.caption));
+      $6.append($$anchor2, caption_1);
+    };
+    $6.if(node, ($$render) => {
+      if ($$props.caption)
+        $$render(consequent);
+    });
+  }
+  var node_1 = $6.sibling(node);
+  $6.snippet(node_1, () => $$props.children);
+  $6.reset(table);
+  $6.template_effect(($0) => {
+    $6.set_class(table, 1, $0);
+    $6.set_attribute(table, "data-cinder-sticky-header", stickyHeader() || undefined);
+    $6.set_attribute(table, "data-cinder-density", density());
+    $6.set_attribute(table, "data-cinder-selectable", selectable() || undefined);
+  }, [() => $6.clsx(classNames("cinder-table", $$props.class))]);
+  $6.append($$anchor, table);
+  $6.pop();
+}
+
+// src/components/data-table/data-table.svelte
+var root_2 = $7.from_html(`<!> <!>`, 1);
+var root_122 = $7.from_html(`<div><!></div>`);
+var root_132 = $7.from_html(`<div><!></div>`);
+function Data_table($$anchor, $$props) {
+  $7.push($$props, true);
+  const table = ($$anchor2) => {
+    Table($$anchor2, $7.spread_props(() => $$props.caption !== undefined ? { caption: $$props.caption } : {}, {
+      get stickyHeader() {
+        return stickyHeader();
+      },
+      get density() {
+        return density();
+      },
+      get sort() {
+        return sort();
+      },
+      set sort($$value) {
+        sort($$value);
+      },
+      children: ($$anchor3, $$slotProps) => {
+        var fragment_1 = root_2();
+        var node = $7.first_child(fragment_1);
+        Table_header(node, {
+          children: ($$anchor4, $$slotProps2) => {
+            Table_row($$anchor4, {
+              children: ($$anchor5, $$slotProps3) => {
+                var fragment_3 = $7.comment();
+                var node_1 = $7.first_child(fragment_3);
+                $7.each(node_1, 17, () => $$props.columns, (column) => column.key, ($$anchor6, column) => {
+                  {
+                    let $0 = $7.derived(() => $7.get(column).sortable ?? false);
+                    let $1 = $7.derived(() => mapAlign($7.get(column).align) ?? "left");
+                    Table_header_cell($$anchor6, $7.spread_props(() => $7.get(column).sortable ? { column: $7.get(column).key } : {}, {
+                      get sortable() {
+                        return $7.get($0);
+                      },
+                      get align() {
+                        return $7.get($1);
+                      },
+                      children: ($$anchor7, $$slotProps4) => {
+                        $7.next();
+                        var text2 = $7.text();
+                        $7.template_effect(() => $7.set_text(text2, $7.get(column).label));
+                        $7.append($$anchor7, text2);
+                      },
+                      $$slots: { default: true }
+                    }));
+                  }
+                });
+                $7.append($$anchor5, fragment_3);
+              },
+              $$slots: { default: true }
+            });
+          },
+          $$slots: { default: true }
+        });
+        var node_2 = $7.sibling(node, 2);
+        Table_body(node_2, {
+          children: ($$anchor4, $$slotProps2) => {
+            var fragment_6 = $7.comment();
+            var node_3 = $7.first_child(fragment_6);
+            $7.each(node_3, 17, () => $$props.rows, $7.index, ($$anchor5, row) => {
+              Table_row($$anchor5, {
+                children: ($$anchor6, $$slotProps3) => {
+                  var fragment_8 = $7.comment();
+                  var node_4 = $7.first_child(fragment_8);
+                  $7.each(node_4, 17, () => $$props.columns, (column) => column.key, ($$anchor7, column) => {
+                    {
+                      let $0 = $7.derived(() => $7.get(column).key === $7.get(rowHeaderKey) ? "th" : "td");
+                      let $1 = $7.derived(() => mapAlign($7.get(column).align) ?? "left");
+                      Table_cell($$anchor7, {
+                        get as() {
+                          return $7.get($0);
+                        },
+                        get align() {
+                          return $7.get($1);
+                        },
+                        children: ($$anchor8, $$slotProps4) => {
+                          $7.next();
+                          var text_1 = $7.text();
+                          $7.template_effect(() => $7.set_text(text_1, $7.get(row)[$7.get(column).key]));
+                          $7.append($$anchor8, text_1);
+                        },
+                        $$slots: { default: true }
+                      });
+                    }
+                  });
+                  $7.append($$anchor6, fragment_8);
+                },
+                $$slots: { default: true }
+              });
+            });
+            $7.append($$anchor4, fragment_6);
+          },
+          $$slots: { default: true }
+        });
+        $7.append($$anchor3, fragment_1);
+      },
+      $$slots: { default: true }
+    }));
+  };
+  let sort = $7.prop($$props, "sort", 15), stickyHeader = $7.prop($$props, "stickyHeader", 3, false), density = $7.prop($$props, "density", 3, "comfortable"), scrollable = $7.prop($$props, "scrollable", 3, false);
+  const rowHeaderKey = $7.derived(() => ($$props.columns.find((column) => column.rowHeader === true) ?? $$props.columns[0])?.key);
+  function mapAlign(align) {
+    if (align === "start")
+      return "left";
+    if (align === "end")
+      return "right";
+    if (align === "center")
+      return "center";
+    return;
+  }
+  var fragment_11 = $7.comment();
+  var node_5 = $7.first_child(fragment_11);
+  {
+    var consequent = ($$anchor2) => {
+      var div = root_122();
+      var node_6 = $7.child(div);
+      table(node_6);
+      $7.reset(div);
+      $7.template_effect(($0) => $7.set_class(div, 1, $0), [
+        () => $7.clsx(classNames("cinder-data-table", "cinder-table-scroll", $$props.class))
+      ]);
+      $7.append($$anchor2, div);
+    };
+    var alternate = ($$anchor2) => {
+      var div_1 = root_132();
+      var node_7 = $7.child(div_1);
+      table(node_7);
+      $7.reset(div_1);
+      $7.template_effect(($0) => $7.set_class(div_1, 1, $0), [() => $7.clsx(classNames("cinder-data-table", $$props.class))]);
+      $7.append($$anchor2, div_1);
+    };
+    $7.if(node_5, ($$render) => {
+      if (scrollable())
+        $$render(consequent);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  $7.append($$anchor, fragment_11);
+  $7.pop();
+}
+
+// src/components/data-table/index.ts
+var data_table_default = Data_table;
+export {
+  data_table_default as default,
+  Data_table as DataTable
+};
+
+//# debugId=EF2248335063999264756E2164756E21

package/dist/components/diff-viewer/index.js

@@ -190,7 +190,10 @@ function Button($$anchor, $$props) {
     "aria-disabled",
     "aria-busy",
     "aria-label",
-    "aria-labelledby"
+    "aria-labelledby",
+    "aria-expanded",
+    "aria-controls",
+    "aria-haspopup"
   ]);
   const mergedClassName = $.derived(() => classNames("cinder-button", $$props.class));
   const dataAttributes = $.derived(() => ({
@@ -248,6 +251,9 @@ function Button($$anchor, $$props) {
         "aria-busy": $.get(resolvedAriaBusy),
         "aria-label": $.get(resolvedAriaLabel),
         "aria-labelledby": $.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
         onclick: handleClick
       }));
       var node_10 = $.child(a);
@@ -267,6 +273,9 @@ function Button($$anchor, $$props) {
         "aria-busy": $.get(resolvedAriaBusy),
         "aria-label": $.get(resolvedAriaLabel),
         "aria-labelledby": $.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
         onclick: handleClick
       }));
       var node_11 = $.child(button);
@@ -630,12 +639,13 @@ import * as $6 from "svelte/internal/client";
 var root3 = $6.from_html(`<span><!></span>`);
 function Badge($$anchor, $$props) {
   $6.push($$props, true);
-  let variant = $6.prop($$props, "variant", 3, "neutral"), size = $6.prop($$props, "size", 3, "md"), rest = $6.rest_props($$props, [
+  let variant = $6.prop($$props, "variant", 3, "neutral"), size = $6.prop($$props, "size", 3, "md"), mono = $6.prop($$props, "mono", 3, false), rest = $6.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "variant",
     "size",
+    "mono",
     "class",
     "children"
   ]);
@@ -644,6 +654,7 @@ function Badge($$anchor, $$props) {
     class: $0,
     "data-cinder-variant": variant(),
     "data-cinder-size": size(),
+    "data-cinder-mono": mono() ? "" : undefined,
     ...rest
   }), [() => classNames("cinder-badge", $$props.class)]);
   var node = $6.child(span);
@@ -2547,4 +2558,4 @@ export {
   Diff_viewer as DiffViewer
 };
 
-//# debugId=EB3D20850618DBD964756E2164756E21
+//# debugId=BC450189F98F76E364756E2164756E21