@lostgradient/cinder 0.1.0

package/dist/components/stat/index.js

@@ -0,0 +1,179 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  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: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+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/stat/index.ts
+import"@lostgradient/cinder/stat/styles";
+
+// src/components/stat/stat.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/utilities/format-number.ts
+function formatNumber(value, locale = "en-US", options) {
+  return new Intl.NumberFormat(locale, options).format(value);
+}
+
+// src/components/stat/stat.svelte
+var root_1 = $.from_html(`<span class="cinder-stat__icon" aria-hidden="true"><!></span>`);
+var root_3 = $.from_html(`<span class="cinder-stat__change-description" aria-hidden="true"> </span>`);
+var root_2 = $.from_html(`<span class="cinder-stat__change"><span class="cinder-sr-only"> </span> <span class="cinder-stat__change-icon" aria-hidden="true"> </span> <span class="cinder-stat__change-value" aria-hidden="true"> </span> <!></span>`);
+var root = $.from_html(`<div><!> <span class="cinder-stat__label"> </span> <span class="cinder-stat__value"> </span> <!></div>`);
+function Stat($$anchor, $$props) {
+  const generatedId = $.props_id();
+  $.push($$props, true);
+  let rest = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "label",
+    "value",
+    "change",
+    "icon",
+    "valueFormatOptions",
+    "valueLocale",
+    "class",
+    "id"
+  ]);
+  const stableId = $.derived(() => $$props.id ?? generatedId);
+  const labelId = $.derived(() => `${$.get(stableId)}-label`);
+  const valueId = $.derived(() => `${$.get(stableId)}-value`);
+  const displayValue = $.derived(() => typeof $$props.value === "number" ? formatNumber($$props.value, $$props.valueLocale, $$props.valueFormatOptions) : $$props.value);
+  const arrowGlyph = $.derived(() => $$props.change?.direction === "up" ? "↑" : $$props.change?.direction === "down" ? "↓" : "→");
+  const changeAccessibleText = $.derived(() => {
+    if (!$$props.change)
+      return "";
+    if ($$props.change.ariaLabel)
+      return $$props.change.ariaLabel;
+    const suffix = $$props.change.description ? ` ${$$props.change.description}` : "";
+    if ($$props.change.direction === "up")
+      return `increased by ${$$props.change.value}${suffix}`;
+    if ($$props.change.direction === "down")
+      return `decreased by ${$$props.change.value}${suffix}`;
+    return `no change, ${$$props.change.value}${suffix}`;
+  });
+  var div = root();
+  $.attribute_effect(div, ($0) => ({
+    ...rest,
+    id: $$props.id,
+    class: $0,
+    role: "group",
+    "aria-labelledby": `${$.get(labelId)} ${$.get(valueId)}`,
+    "data-cinder-has-icon": $$props.icon ? "" : undefined
+  }), [() => classNames("cinder-stat", $$props.class)]);
+  var node = $.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var span = root_1();
+      var node_1 = $.child(span);
+      $.snippet(node_1, () => $$props.icon);
+      $.reset(span);
+      $.append($$anchor2, span);
+    };
+    $.if(node, ($$render) => {
+      if ($$props.icon)
+        $$render(consequent);
+    });
+  }
+  var span_1 = $.sibling(node, 2);
+  var text = $.child(span_1, true);
+  $.reset(span_1);
+  var span_2 = $.sibling(span_1, 2);
+  var text_1 = $.child(span_2, true);
+  $.reset(span_2);
+  var node_2 = $.sibling(span_2, 2);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var span_3 = root_2();
+      var span_4 = $.child(span_3);
+      var text_2 = $.child(span_4, true);
+      $.reset(span_4);
+      var span_5 = $.sibling(span_4, 2);
+      var text_3 = $.child(span_5, true);
+      $.reset(span_5);
+      var span_6 = $.sibling(span_5, 2);
+      var text_4 = $.child(span_6, true);
+      $.reset(span_6);
+      var node_3 = $.sibling(span_6, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var span_7 = root_3();
+          var text_5 = $.child(span_7, true);
+          $.reset(span_7);
+          $.template_effect(() => $.set_text(text_5, $$props.change.description));
+          $.append($$anchor3, span_7);
+        };
+        $.if(node_3, ($$render) => {
+          if ($$props.change.description)
+            $$render(consequent_1);
+        });
+      }
+      $.reset(span_3);
+      $.template_effect(() => {
+        $.set_attribute(span_3, "data-cinder-direction", $$props.change.direction);
+        $.set_text(text_2, $.get(changeAccessibleText));
+        $.set_text(text_3, $.get(arrowGlyph));
+        $.set_text(text_4, $$props.change.value);
+      });
+      $.append($$anchor2, span_3);
+    };
+    $.if(node_2, ($$render) => {
+      if ($$props.change)
+        $$render(consequent_2);
+    });
+  }
+  $.reset(div);
+  $.template_effect(() => {
+    $.set_attribute(span_1, "id", $.get(labelId));
+    $.set_text(text, $$props.label);
+    $.set_attribute(span_2, "id", $.get(valueId));
+    $.set_text(text_1, $.get(displayValue));
+  });
+  $.append($$anchor, div);
+  $.pop();
+}
+
+// src/components/stat/index.ts
+var stat_default = Stat;
+export {
+  stat_default as default,
+  Stat
+};
+
+//# debugId=B14188A9F28886B864756E2164756E21

package/dist/components/stat/stat.css

@@ -0,0 +1,73 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-stat {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    row-gap: var(--cinder-space-1, 0.25rem);
+    align-items: start;
+    color: var(--cinder-text);
+  }
+
+  .cinder-stat[data-cinder-has-icon] {
+    grid-template-columns: auto 1fr;
+    column-gap: var(--cinder-space-3, 0.75rem);
+  }
+
+  .cinder-stat__icon {
+    /* Span the label and value rows so the icon visually anchors the metric, not the change text. */
+    grid-row: 1 / 3;
+    grid-column: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-stat__label {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-stat[data-cinder-has-icon] .cinder-stat__label {
+    grid-column: 2;
+  }
+
+  .cinder-stat__value {
+    font-size: var(--cinder-text-4xl);
+    font-weight: var(--cinder-font-semibold);
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+  }
+
+  .cinder-stat[data-cinder-has-icon] .cinder-stat__value {
+    grid-column: 2;
+  }
+
+  .cinder-stat__change {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1, 0.25rem);
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-stat[data-cinder-has-icon] .cinder-stat__change {
+    grid-column: 2;
+  }
+
+  .cinder-stat__change[data-cinder-direction='up'] {
+    color: var(--cinder-success);
+  }
+
+  .cinder-stat__change[data-cinder-direction='down'] {
+    color: var(--cinder-danger);
+  }
+
+  .cinder-stat__change[data-cinder-direction='neutral'] {
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-stat__change-description {
+    color: var(--cinder-text-muted);
+  }
+}

package/dist/components/stat/stat.schema.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentSchema } from '../../schema-types';
+declare const _default: ComponentSchema;
+export default _default;

package/dist/components/stat/stat.schema.js

@@ -0,0 +1,89 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  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: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+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/stat/stat.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    label: {
+      type: "string",
+      description: 'Short label describing the metric, e.g. "Monthly Revenue".'
+    },
+    value: {
+      anyOf: [
+        {
+          type: "string"
+        },
+        {
+          type: "number"
+        }
+      ],
+      description: "The statistic. Strings rendered verbatim; numbers formatted via formatNumber."
+    },
+    valueLocale: {
+      type: "string",
+      description: "Locale forwarded to formatNumber (defaults to en-US)."
+    },
+    class: {
+      type: "string",
+      description: "Additional class names merged with `.cinder-stat`."
+    }
+  },
+  additionalProperties: false,
+  required: ["label", "value"],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "change",
+        reason: "unknown-shape"
+      },
+      {
+        name: "icon",
+        reason: "function-or-snippet"
+      },
+      {
+        name: "valueFormatOptions",
+        reason: "unknown-shape"
+      }
+    ]
+  }
+};
+var stat_schema_default = schema;
+export {
+  stat_schema_default as default
+};
+
+//# debugId=759185C3ABDEFF5464756E2164756E21

package/dist/components/stat/stat.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @cinder
+ * @category data-display
+ * @status stable
+ * @purpose Single key metric with a label, formatted value, and optional change indicator that pairs into a stat-group dashboard tile.
+ * @tag data-display
+ * @tag metric
+ * @useWhen Highlighting one important number such as revenue, signups, or error rate.
+ * @useWhen Composing a dashboard tile alongside other Stat instances inside stat-group.
+ * @avoidWhen Conveying status with a short label or icon — use badge instead.
+ * @avoidWhen Showing tabular numeric breakdowns — use table or data-list instead.
+ * @related stat-group, badge
+ */
+export type { StatChange, StatChangeDirection, StatProps } from './stat.types.ts';
+import type { StatProps } from './stat.types.ts';
+declare const Stat: import("svelte").Component<StatProps, {}, "">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** Direction of a stat change indicator. */
+export type StatChangeDirection = 'up' | 'down' | 'neutral';
+/** Data for the optional change indicator rendered below the stat value. */
+export type StatChange = {
+    /** The change magnitude as a display string, e.g. "4.75%", "+$120", "12". */
+    value: string;
+    /** Direction of change — drives icon + color. */
+    direction: StatChangeDirection;
+    /** Optional visible description, e.g. "from last month". Rendered aria-hidden. */
+    description?: string;
+    /**
+     * Optional fully-worded accessible label for the change indicator.
+     * When omitted, a phrase is synthesized from `direction` + `value` (+ optional `description`).
+     * When provided, used verbatim — the caller owns the full wording.
+     */
+    ariaLabel?: string;
+};
+export type StatProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+    /** Short label describing the metric, e.g. "Monthly Revenue". */
+    label: string;
+    /** The statistic. Strings rendered verbatim; numbers formatted via formatNumber. */
+    value: string | number;
+    /** Optional change indicator with direction and accessible wording. */
+    change?: StatChange;
+    /** Optional leading icon snippet (decorative — wrapper is aria-hidden). */
+    icon?: Snippet;
+    /** Intl.NumberFormat options applied only when `value` is a number. */
+    valueFormatOptions?: Intl.NumberFormatOptions;
+    /** Locale forwarded to formatNumber (defaults to en-US). */
+    valueLocale?: string;
+    /** Additional class names merged with `.cinder-stat`. */
+    class?: string;
+};

package/dist/components/stat/stat.variables.d.ts

@@ -0,0 +1,2 @@
+declare const variables: readonly string[];
+export default variables;

package/dist/components/stat/stat.variables.js

@@ -0,0 +1,43 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  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: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+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/stat/stat.variables.ts
+var variables = [];
+var stat_variables_default = variables;
+export {
+  stat_variables_default as default
+};
+
+//# debugId=704B19A76A8CB8AB64756E2164756E21

package/dist/components/stat-group/index.d.ts

@@ -0,0 +1,12 @@
+import './stat-group.css';
+/**
+ * `StatGroup` is the parent compound component and a namespace exposing the
+ * `StatGroup.Stat` leaf. The leaf remains importable individually via
+ * `@lostgradient/cinder/stat`.
+ */
+declare const StatGroup: import("svelte").Component<import("./stat-group.types.ts").StatGroupProps, {}, ""> & {
+    Stat: import("svelte").Component<import("../stat").StatProps, {}, "">;
+};
+export default StatGroup;
+export type { StatGroupColumns, StatGroupProps, StatGroupVariant } from './stat-group.types.ts';
+export { StatGroup };

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

@@ -0,0 +1,221 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  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: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+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/stat-group/index.ts
+import"@lostgradient/cinder/stat-group/styles";
+
+// src/components/stat/stat.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/utilities/format-number.ts
+function formatNumber(value, locale = "en-US", options) {
+  return new Intl.NumberFormat(locale, options).format(value);
+}
+
+// src/components/stat/stat.svelte
+var root_1 = $.from_html(`<span class="cinder-stat__icon" aria-hidden="true"><!></span>`);
+var root_3 = $.from_html(`<span class="cinder-stat__change-description" aria-hidden="true"> </span>`);
+var root_2 = $.from_html(`<span class="cinder-stat__change"><span class="cinder-sr-only"> </span> <span class="cinder-stat__change-icon" aria-hidden="true"> </span> <span class="cinder-stat__change-value" aria-hidden="true"> </span> <!></span>`);
+var root = $.from_html(`<div><!> <span class="cinder-stat__label"> </span> <span class="cinder-stat__value"> </span> <!></div>`);
+function Stat($$anchor, $$props) {
+  const generatedId = $.props_id();
+  $.push($$props, true);
+  let rest = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "label",
+    "value",
+    "change",
+    "icon",
+    "valueFormatOptions",
+    "valueLocale",
+    "class",
+    "id"
+  ]);
+  const stableId = $.derived(() => $$props.id ?? generatedId);
+  const labelId = $.derived(() => `${$.get(stableId)}-label`);
+  const valueId = $.derived(() => `${$.get(stableId)}-value`);
+  const displayValue = $.derived(() => typeof $$props.value === "number" ? formatNumber($$props.value, $$props.valueLocale, $$props.valueFormatOptions) : $$props.value);
+  const arrowGlyph = $.derived(() => $$props.change?.direction === "up" ? "↑" : $$props.change?.direction === "down" ? "↓" : "→");
+  const changeAccessibleText = $.derived(() => {
+    if (!$$props.change)
+      return "";
+    if ($$props.change.ariaLabel)
+      return $$props.change.ariaLabel;
+    const suffix = $$props.change.description ? ` ${$$props.change.description}` : "";
+    if ($$props.change.direction === "up")
+      return `increased by ${$$props.change.value}${suffix}`;
+    if ($$props.change.direction === "down")
+      return `decreased by ${$$props.change.value}${suffix}`;
+    return `no change, ${$$props.change.value}${suffix}`;
+  });
+  var div = root();
+  $.attribute_effect(div, ($0) => ({
+    ...rest,
+    id: $$props.id,
+    class: $0,
+    role: "group",
+    "aria-labelledby": `${$.get(labelId)} ${$.get(valueId)}`,
+    "data-cinder-has-icon": $$props.icon ? "" : undefined
+  }), [() => classNames("cinder-stat", $$props.class)]);
+  var node = $.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var span = root_1();
+      var node_1 = $.child(span);
+      $.snippet(node_1, () => $$props.icon);
+      $.reset(span);
+      $.append($$anchor2, span);
+    };
+    $.if(node, ($$render) => {
+      if ($$props.icon)
+        $$render(consequent);
+    });
+  }
+  var span_1 = $.sibling(node, 2);
+  var text = $.child(span_1, true);
+  $.reset(span_1);
+  var span_2 = $.sibling(span_1, 2);
+  var text_1 = $.child(span_2, true);
+  $.reset(span_2);
+  var node_2 = $.sibling(span_2, 2);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var span_3 = root_2();
+      var span_4 = $.child(span_3);
+      var text_2 = $.child(span_4, true);
+      $.reset(span_4);
+      var span_5 = $.sibling(span_4, 2);
+      var text_3 = $.child(span_5, true);
+      $.reset(span_5);
+      var span_6 = $.sibling(span_5, 2);
+      var text_4 = $.child(span_6, true);
+      $.reset(span_6);
+      var node_3 = $.sibling(span_6, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var span_7 = root_3();
+          var text_5 = $.child(span_7, true);
+          $.reset(span_7);
+          $.template_effect(() => $.set_text(text_5, $$props.change.description));
+          $.append($$anchor3, span_7);
+        };
+        $.if(node_3, ($$render) => {
+          if ($$props.change.description)
+            $$render(consequent_1);
+        });
+      }
+      $.reset(span_3);
+      $.template_effect(() => {
+        $.set_attribute(span_3, "data-cinder-direction", $$props.change.direction);
+        $.set_text(text_2, $.get(changeAccessibleText));
+        $.set_text(text_3, $.get(arrowGlyph));
+        $.set_text(text_4, $$props.change.value);
+      });
+      $.append($$anchor2, span_3);
+    };
+    $.if(node_2, ($$render) => {
+      if ($$props.change)
+        $$render(consequent_2);
+    });
+  }
+  $.reset(div);
+  $.template_effect(() => {
+    $.set_attribute(span_1, "id", $.get(labelId));
+    $.set_text(text, $$props.label);
+    $.set_attribute(span_2, "id", $.get(valueId));
+    $.set_text(text_1, $.get(displayValue));
+  });
+  $.append($$anchor, div);
+  $.pop();
+}
+
+// src/components/stat-group/stat-group.svelte
+import"svelte/internal/disclose-version";
+import * as $2 from "svelte/internal/client";
+var root2 = $2.from_html(`<div><!></div>`);
+function Stat_group($$anchor, $$props) {
+  $2.push($$props, true);
+  let columns = $2.prop($$props, "columns", 3, "auto"), variant = $2.prop($$props, "variant", 3, "default"), rest = $2.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "columns",
+    "variant",
+    "children",
+    "class",
+    "label",
+    "role",
+    "aria-label"
+  ]);
+  const groupRole = $2.derived(() => $$props.label ? "group" : $$props.role);
+  const groupAriaLabel = $2.derived(() => $$props.label || $$props["aria-label"]);
+  var div = root2();
+  $2.attribute_effect(div, ($0, $1) => ({
+    ...rest,
+    role: $2.get(groupRole),
+    "aria-label": $2.get(groupAriaLabel),
+    class: $0,
+    "data-cinder-variant": variant(),
+    "data-cinder-columns": $1
+  }), [
+    () => classNames("cinder-stat-group", $$props.class),
+    () => String(columns())
+  ]);
+  var node = $2.child(div);
+  $2.snippet(node, () => $$props.children);
+  $2.reset(div);
+  $2.append($$anchor, div);
+  $2.pop();
+}
+
+// src/components/stat-group/index.ts
+var StatGroup = Object.assign(Stat_group, {
+  Stat
+});
+var stat_group_default = StatGroup;
+export {
+  stat_group_default as default,
+  StatGroup
+};
+
+//# debugId=E046F1D402D03F6564756E2164756E21