@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/autocomplete/autocomplete.css

@@ -6,6 +6,9 @@
   }
 
   .cinder-autocomplete__label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
     color: var(--cinder-text);
     font-size: var(--cinder-text-sm);
     font-weight: var(--cinder-font-medium);
@@ -27,6 +30,14 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-autocomplete__input:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-autocomplete__description,
   .cinder-autocomplete__error {
     margin: 0;
@@ -99,7 +110,7 @@
     border-radius: var(--cinder-radius-sm);
     background: var(--cinder-color-warning-bg);
     color: var(--cinder-color-warning-fg);
-    font-weight: 600;
+    font-weight: var(--cinder-font-semibold);
   }
 
   .cinder-autocomplete__status {

package/dist/components/autocomplete/index.js

@@ -1902,7 +1902,8 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   dir: element.getAttribute("dir"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const inheritedDir = inheritAttributes && source ? source.closest("[dir]")?.getAttribute("dir") : null;
+  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
     element.setAttribute("dir", nextDir);
@@ -2338,6 +2339,10 @@ function createBodyScrollLock() {
     return release;
   };
 }
+function isInsideEventPath(event, element) {
+  const path = event.composedPath();
+  return path.some((entry) => entry instanceof Node && element.contains(entry));
+}
 function createClickOutside(options) {
   const { handler, enabled = true, eventType = "click", capture = true, ignoreRefs } = options;
   return (node) => {
@@ -2345,17 +2350,19 @@ function createClickOutside(options) {
       const isEnabled = typeof enabled === "function" ? enabled() : enabled;
       if (!isEnabled)
         return;
+      if (event.type === "touchstart" && !event.cancelable)
+        return;
       const target = event.target;
       if (!(target instanceof Node)) {
         handler();
         return;
       }
-      if (node.contains(target))
+      if (isInsideEventPath(event, node))
         return;
       if (ignoreRefs) {
         for (const ref of ignoreRefs) {
           const element = ref();
-          if (element && element.contains(target))
+          if (element && isInsideEventPath(event, element))
             return;
         }
       }
@@ -2712,14 +2719,15 @@ function _visually_hidden_live_region($$anchor, $$props) {
 }
 
 // src/components/autocomplete/autocomplete.svelte
-var root_12 = $6.from_html(`<label class="cinder-autocomplete__label"> </label>`);
-var root_22 = $6.from_html(`<p class="cinder-autocomplete__description"> </p>`);
-var root_32 = $6.from_html(`<p class="cinder-autocomplete__error" aria-live="polite"> </p>`);
-var root_5 = $6.from_html(`<div role="option" tabindex="-1" class="cinder-_option-row cinder-autocomplete__option cinder-autocomplete__status" aria-selected="false" aria-disabled="true"> </div>`);
+var root_22 = $6.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_12 = $6.from_html(`<label class="cinder-autocomplete__label"> <!></label>`);
+var root_32 = $6.from_html(`<p class="cinder-autocomplete__description"> </p>`);
+var root_4 = $6.from_html(`<p class="cinder-autocomplete__error" aria-live="polite"> </p>`);
 var root_6 = $6.from_html(`<div role="option" tabindex="-1" class="cinder-_option-row cinder-autocomplete__option cinder-autocomplete__status" aria-selected="false" aria-disabled="true"> </div>`);
-var root_9 = $6.from_html(` <mark class="cinder-autocomplete__match"> </mark> `, 1);
-var root_11 = $6.from_html(`<span class="cinder-autocomplete__option-description"> </span>`);
-var root_8 = $6.from_html(`<div role="option" tabindex="-1" class="cinder-_option-row cinder-autocomplete__option"><span class="cinder-autocomplete__option-text"><span class="cinder-autocomplete__option-label"><!></span> <!></span></div>`);
+var root_7 = $6.from_html(`<div role="option" tabindex="-1" class="cinder-_option-row cinder-autocomplete__option cinder-autocomplete__status" aria-selected="false" aria-disabled="true"> </div>`);
+var root_10 = $6.from_html(` <mark class="cinder-autocomplete__match"> </mark> `, 1);
+var root_122 = $6.from_html(`<span class="cinder-autocomplete__option-description"> </span>`);
+var root_9 = $6.from_html(`<div role="option" tabindex="-1" class="cinder-_option-row cinder-autocomplete__option"><span class="cinder-autocomplete__option-text"><span class="cinder-autocomplete__option-label"><!></span> <!></span></div>`);
 var root4 = $6.from_html(`<div><!> <input/> <!> <!> <!></div> <!>`, 1);
 function Autocomplete($$anchor, $$props) {
   const generatedId = $6.props_id();
@@ -2776,7 +2784,7 @@ function Autocomplete($$anchor, $$props) {
   let composing = $6.state(false);
   let inputFocused = $6.state(false);
   let suggestions = $6.state($6.proxy([]));
-  let activeIndex = $6.state(null);
+  let rawActiveIndex = $6.state(null);
   let suppressNextQuery = false;
   let ignoreSyntheticInput = false;
   let completionPointerIndex = $6.state(null);
@@ -2786,6 +2794,13 @@ function Autocomplete($$anchor, $$props) {
   let requestVersion = 0;
   const renderedSuggestions = $6.derived(() => $6.get(suggestions).slice(0, $6.get(resolvedMaxVisibleSuggestions)));
   const enabledIndexes = $6.derived(() => getEnabledIndexes($6.get(renderedSuggestions)));
+  const activeIndex = $6.derived(() => {
+    if ($6.get(enabledIndexes).length === 0)
+      return null;
+    if ($6.get(rawActiveIndex) !== null && $6.get(enabledIndexes).includes($6.get(rawActiveIndex)))
+      return $6.get(rawActiveIndex);
+    return $6.get(enabledIndexes)[0] ?? null;
+  });
   const activeDescendant = $6.derived(() => $6.get(activeIndex) === null ? undefined : `${$6.get(resolvedId)}-option-${$6.get(activeIndex)}`);
   const statusMessage = $6.derived(() => $6.get(loading) ? loadingMessage() : $6.get(open) && $6.get(renderedSuggestions).length === 0 ? emptyMessage() : "");
   function isEligibleQuery(query) {
@@ -2804,20 +2819,6 @@ function Autocomplete($$anchor, $$props) {
     });
     return indexes;
   }
-  function clampActiveIndex(list) {
-    const availableEnabledIndexes = list === $6.get(renderedSuggestions) ? $6.get(enabledIndexes) : getEnabledIndexes(list);
-    if (availableEnabledIndexes.length === 0) {
-      $6.set(activeIndex, null);
-      return;
-    }
-    if ($6.get(activeIndex) !== null && availableEnabledIndexes.includes($6.get(activeIndex)))
-      return;
-    $6.set(activeIndex, availableEnabledIndexes[0] ?? null, true);
-  }
-  $6.user_effect(() => {
-    $6.get(renderedSuggestions);
-    clampActiveIndex($6.get(renderedSuggestions));
-  });
   $6.user_effect(() => {
     const wasOpen = previousOpen;
     previousOpen = $6.get(open);
@@ -2828,7 +2829,7 @@ function Autocomplete($$anchor, $$props) {
     requestVersion += 1;
     autocompleteDismissed = true;
     $6.set(loading, false);
-    $6.set(activeIndex, null);
+    $6.set(rawActiveIndex, null);
     $6.set(suggestions, [], true);
   });
   function closePopup() {
@@ -2838,7 +2839,7 @@ function Autocomplete($$anchor, $$props) {
     autocompleteDismissed = true;
     $6.set(open, false);
     $6.set(loading, false);
-    $6.set(activeIndex, null);
+    $6.set(rawActiveIndex, null);
     $6.set(suggestions, [], true);
   }
   $6.user_effect(() => {
@@ -2861,7 +2862,7 @@ function Autocomplete($$anchor, $$props) {
     $6.set(loading, true);
     $6.set(open, true);
     $6.set(suggestions, [], true);
-    $6.set(activeIndex, null);
+    $6.set(rawActiveIndex, null);
     let result;
     try {
       if (controller.signal.aborted || currentVersion !== requestVersion)
@@ -2879,10 +2880,23 @@ function Autocomplete($$anchor, $$props) {
       if (controller.signal.aborted || currentVersion !== requestVersion || autocompleteDismissed) {
         return;
       }
-      $6.set(suggestions, nextSuggestions, true);
+      const seen = new Set;
+      const deduped = [];
+      let hasDuplicates = false;
+      for (const suggestion of nextSuggestions) {
+        if (seen.has(suggestion.value)) {
+          hasDuplicates = true;
+        } else {
+          seen.add(suggestion.value);
+          deduped.push(suggestion);
+        }
+      }
+      if (hasDuplicates) {
+        devWarn("[cinder/Autocomplete] Duplicate suggestion values detected. Each rendered suggestion must have a unique value. Duplicates were removed; only the first occurrence of each value is shown.");
+      }
+      $6.set(suggestions, deduped, true);
       $6.set(loading, false);
       $6.set(open, true);
-      clampActiveIndex(nextSuggestions.slice(0, $6.get(resolvedMaxVisibleSuggestions)));
     }).catch((errorValue) => {
       if (controller.signal.aborted || currentVersion !== requestVersion || autocompleteDismissed) {
         return;
@@ -2921,19 +2935,19 @@ function Autocomplete($$anchor, $$props) {
       return;
     $6.set(open, true);
     if ($6.get(activeIndex) === null) {
-      $6.set(activeIndex, direction === 1 ? $6.get(enabledIndexes)[0] ?? null : $6.get(enabledIndexes).at(-1) ?? null, true);
+      $6.set(rawActiveIndex, direction === 1 ? $6.get(enabledIndexes)[0] ?? null : $6.get(enabledIndexes).at(-1) ?? null, true);
       return;
     }
     const currentPosition = $6.get(enabledIndexes).indexOf($6.get(activeIndex));
     const nextPosition = currentPosition < 0 ? 0 : (currentPosition + direction + $6.get(enabledIndexes).length) % $6.get(enabledIndexes).length;
-    $6.set(activeIndex, $6.get(enabledIndexes)[nextPosition] ?? null, true);
+    $6.set(rawActiveIndex, $6.get(enabledIndexes)[nextPosition] ?? null, true);
   }
   function moveToBoundary(direction) {
     if (!$6.get(open))
       return;
     if ($6.get(enabledIndexes).length === 0)
       return;
-    $6.set(activeIndex, direction === "start" ? $6.get(enabledIndexes)[0] ?? null : $6.get(enabledIndexes).at(-1) ?? null, true);
+    $6.set(rawActiveIndex, direction === "start" ? $6.get(enabledIndexes)[0] ?? null : $6.get(enabledIndexes).at(-1) ?? null, true);
   }
   function dispatchCompletionInputEvent() {
     if (!$6.get(inputElement))
@@ -3038,20 +3052,31 @@ function Autocomplete($$anchor, $$props) {
   var div = $6.first_child(fragment);
   var node = $6.child(div);
   {
-    var consequent = ($$anchor2) => {
+    var consequent_1 = ($$anchor2) => {
       var label_1 = root_12();
-      var text_1 = $6.child(label_1, true);
+      var text_1 = $6.child(label_1);
+      var node_1 = $6.sibling(text_1);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_22();
+          $6.append($$anchor3, span);
+        };
+        $6.if(node_1, ($$render) => {
+          if ($6.get(field).required)
+            $$render(consequent);
+        });
+      }
       $6.reset(label_1);
       $6.template_effect(() => {
         $6.set_attribute(label_1, "for", $6.get(resolvedId));
         $6.set_attribute(label_1, "data-disabled", $6.get(field).disabled || undefined);
-        $6.set_text(text_1, $$props.label);
+        $6.set_text(text_1, `${$$props.label ?? ""} `);
       });
       $6.append($$anchor2, label_1);
     };
     $6.if(node, ($$render) => {
       if ($$props.label)
-        $$render(consequent);
+        $$render(consequent_1);
     });
   }
   var input = $6.sibling(node, 2);
@@ -3088,10 +3113,10 @@ function Autocomplete($$anchor, $$props) {
     oncompositionend: event_handler_1
   }), undefined, undefined, undefined, undefined, true);
   $6.bind_this(input, ($$value) => $6.set(inputElement, $$value), () => $6.get(inputElement));
-  var node_1 = $6.sibling(input, 2);
+  var node_2 = $6.sibling(input, 2);
   {
-    var consequent_1 = ($$anchor2) => {
-      var p = root_22();
+    var consequent_2 = ($$anchor2) => {
+      var p = root_32();
       var text_2 = $6.child(p, true);
       $6.reset(p);
       $6.template_effect(() => {
@@ -3100,15 +3125,15 @@ function Autocomplete($$anchor, $$props) {
       });
       $6.append($$anchor2, p);
     };
-    $6.if(node_1, ($$render) => {
+    $6.if(node_2, ($$render) => {
       if ($$props.description)
-        $$render(consequent_1);
+        $$render(consequent_2);
     });
   }
-  var node_2 = $6.sibling(node_1, 2);
+  var node_3 = $6.sibling(node_2, 2);
   {
-    var consequent_2 = ($$anchor2) => {
-      var p_1 = root_32();
+    var consequent_3 = ($$anchor2) => {
+      var p_1 = root_4();
       var text_3 = $6.child(p_1, true);
       $6.reset(p_1);
       $6.template_effect(() => {
@@ -3117,20 +3142,20 @@ function Autocomplete($$anchor, $$props) {
       });
       $6.append($$anchor2, p_1);
     };
-    $6.if(node_2, ($$render) => {
+    $6.if(node_3, ($$render) => {
       if ($$props.error)
-        $$render(consequent_2);
+        $$render(consequent_3);
     });
   }
-  var node_3 = $6.sibling(node_2, 2);
-  _visually_hidden_live_region(node_3, {
+  var node_4 = $6.sibling(node_3, 2);
+  _visually_hidden_live_region(node_4, {
     get message() {
       return $6.get(statusMessage);
     }
   });
   $6.reset(div);
-  var node_4 = $6.sibling(div, 2);
-  Popover(node_4, {
+  var node_5 = $6.sibling(div, 2);
+  Popover(node_5, {
     get id() {
       return $6.get(listboxId);
     },
@@ -3150,10 +3175,10 @@ function Autocomplete($$anchor, $$props) {
     },
     children: ($$anchor2, $$slotProps) => {
       var fragment_1 = $6.comment();
-      var node_5 = $6.first_child(fragment_1);
+      var node_6 = $6.first_child(fragment_1);
       {
-        var consequent_3 = ($$anchor3) => {
-          var div_1 = root_5();
+        var consequent_4 = ($$anchor3) => {
+          var div_1 = root_6();
           var text_4 = $6.child(div_1, true);
           $6.reset(div_1);
           $6.template_effect(() => {
@@ -3162,8 +3187,8 @@ function Autocomplete($$anchor, $$props) {
           });
           $6.append($$anchor3, div_1);
         };
-        var consequent_4 = ($$anchor3) => {
-          var div_2 = root_6();
+        var consequent_5 = ($$anchor3) => {
+          var div_2 = root_7();
           var text_5 = $6.child(div_2, true);
           $6.reset(div_2);
           $6.template_effect(() => {
@@ -3174,17 +3199,17 @@ function Autocomplete($$anchor, $$props) {
         };
         var alternate_1 = ($$anchor3) => {
           var fragment_2 = $6.comment();
-          var node_6 = $6.first_child(fragment_2);
-          $6.each(node_6, 19, () => $6.get(renderedSuggestions), (suggestion, index) => `${suggestion.value}-${index}`, ($$anchor4, suggestion, index) => {
+          var node_7 = $6.first_child(fragment_2);
+          $6.each(node_7, 19, () => $6.get(renderedSuggestions), (suggestion) => suggestion.value, ($$anchor4, suggestion, index) => {
             const suggestionLabel = $6.derived(() => $6.get(suggestion).label ?? $6.get(suggestion).value);
             const parts = $6.derived(() => highlightParts($6.get(suggestionLabel), value()));
-            var div_3 = root_8();
-            var span = $6.child(div_3);
-            var span_1 = $6.child(span);
-            var node_7 = $6.child(span_1);
+            var div_3 = root_9();
+            var span_1 = $6.child(div_3);
+            var span_2 = $6.child(span_1);
+            var node_8 = $6.child(span_2);
             {
-              var consequent_5 = ($$anchor5) => {
-                var fragment_3 = root_9();
+              var consequent_6 = ($$anchor5) => {
+                var fragment_3 = root_10();
                 var text_6 = $6.first_child(fragment_3, true);
                 var mark = $6.sibling(text_6);
                 var text_7 = $6.child(mark, true);
@@ -3202,29 +3227,29 @@ function Autocomplete($$anchor, $$props) {
                 $6.template_effect(() => $6.set_text(text_9, $6.get(suggestionLabel)));
                 $6.append($$anchor5, text_9);
               };
-              $6.if(node_7, ($$render) => {
+              $6.if(node_8, ($$render) => {
                 if ($6.get(parts))
-                  $$render(consequent_5);
+                  $$render(consequent_6);
                 else
                   $$render(alternate, -1);
               });
             }
-            $6.reset(span_1);
-            var node_8 = $6.sibling(span_1, 2);
+            $6.reset(span_2);
+            var node_9 = $6.sibling(span_2, 2);
             {
-              var consequent_6 = ($$anchor5) => {
-                var span_2 = root_11();
-                var text_10 = $6.child(span_2, true);
-                $6.reset(span_2);
+              var consequent_7 = ($$anchor5) => {
+                var span_3 = root_122();
+                var text_10 = $6.child(span_3, true);
+                $6.reset(span_3);
                 $6.template_effect(() => $6.set_text(text_10, $6.get(suggestion).description));
-                $6.append($$anchor5, span_2);
+                $6.append($$anchor5, span_3);
               };
-              $6.if(node_8, ($$render) => {
+              $6.if(node_9, ($$render) => {
                 if ($6.get(suggestion).description)
-                  $$render(consequent_6);
+                  $$render(consequent_7);
               });
             }
-            $6.reset(span);
+            $6.reset(span_1);
             $6.reset(div_3);
             $6.template_effect(() => {
               $6.set_attribute(div_3, "id", `${$6.get(resolvedId)}-option-${$6.get(index)}`);
@@ -3241,17 +3266,17 @@ function Autocomplete($$anchor, $$props) {
             });
             $6.event("mouseenter", div_3, () => {
               if (!$6.get(suggestion).disabled)
-                $6.set(activeIndex, $6.get(index), true);
+                $6.set(rawActiveIndex, $6.get(index), true);
             });
             $6.append($$anchor4, div_3);
           });
           $6.append($$anchor3, fragment_2);
         };
-        $6.if(node_5, ($$render) => {
+        $6.if(node_6, ($$render) => {
           if ($6.get(loading))
-            $$render(consequent_3);
+            $$render(consequent_4);
           else if ($6.get(renderedSuggestions).length === 0)
-            $$render(consequent_4, 1);
+            $$render(consequent_5, 1);
           else
             $$render(alternate_1, -1);
         });
@@ -3278,4 +3303,4 @@ export {
   autocomplete_default as default
 };
 
-//# debugId=2B45C5A7A1013E5464756E2164756E21
+//# debugId=1531916F33B9D65B64756E2164756E21

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

@@ -1902,7 +1902,8 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   dir: element.getAttribute("dir"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const inheritedDir = inheritAttributes && source ? source.closest("[dir]")?.getAttribute("dir") : null;
+  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
     element.setAttribute("dir", nextDir);
@@ -2665,4 +2666,4 @@ export {
   Avatar_group as AvatarGroup
 };
 
-//# debugId=5148B3663545E71564756E2164756E21
+//# debugId=BBB3CC05AF128D0F64756E2164756E21

package/dist/components/badge/badge.schema.js

@@ -41,6 +41,10 @@ var schema = {
       description: "Render the badge label in a monospace font. Useful for version strings, error codes, or other technical labels.",
       default: false
     },
+    subscriptionState: {
+      enum: ["active", "trialing", "past-due", "canceled", "expired", "refunded"],
+      description: "Render a standardized subscription lifecycle badge without hand-wiring tone, icon, and label."
+    },
     class: {
       type: "string",
       description: "Custom class merged with `.cinder-badge`."
@@ -52,8 +56,7 @@ var schema = {
       {
         name: "children",
         reason: "function-or-snippet",
-        required: true,
-        description: "Badge content — intentionally required. A badge without content is\nsemantically meaningless. The render site uses optional chaining\n(`children?.()`) as a runtime safety net for JS consumers."
+        description: "Required badge content unless subscriptionState is provided; optional content override for the subscription preset label."
       }
     ]
   }
@@ -63,4 +66,4 @@ export {
   badge_schema_default as default
 };
 
-//# debugId=78BCD0A6CDE0F65664756E2164756E21
+//# debugId=C3EE728A5127F99F64756E2164756E21

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

@@ -3,10 +3,14 @@
  * @category data-display
  * @status stable
  * @purpose Compact non-interactive label that annotates an adjacent element with a short status, count, or category.
+ * @tag billing
  * @tag label
  * @tag indicator
+ * @tag subscription
  * @useWhen Annotating a value with a short status word like "new" or "beta".
  * @useWhen Displaying a numeric count next to an icon or title.
+ * @useWhen Displaying the billing state of a subscription in a dashboard, invoice list, or account settings page.
+ * @useWhen Annotating a plan name, customer row, or invoice line with its current payment lifecycle state.
  * @avoidWhen The label must be interactive or removable — use chip instead.
  * @avoidWhen Showing only a colored dot for presence — use status-dot instead.
  * @related chip, status-dot

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

@@ -4,20 +4,32 @@ import type { HTMLAttributes } from 'svelte/elements';
 export type BadgeVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'accent';
 /** Size of the badge. */
 export type BadgeSize = 'xs' | 'sm' | 'md';
+/** Billing lifecycle states that Badge can render as an opinionated preset. */
+export type BadgeSubscriptionState = 'active' | 'trialing' | 'past-due' | 'canceled' | 'expired' | 'refunded';
 /** Props for the Badge component. */
-export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+export type BadgeProps = (HTMLAttributes<HTMLSpanElement> & {
     variant?: BadgeVariant;
     size?: BadgeSize;
     /** Render the badge label in a monospace font. */
     mono?: boolean;
     class?: string;
+    /** Render a standardized subscription lifecycle badge without hand-wiring tone, icon, and label. */
+    subscriptionState: BadgeSubscriptionState;
+    /** Required badge content unless subscriptionState is provided; optional content override for the subscription preset label. */
+    children?: Snippet;
+}) | (HTMLAttributes<HTMLSpanElement> & {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    /** Render the badge label in a monospace font. */
+    mono?: boolean;
+    class?: string;
+    subscriptionState?: undefined;
     /**
      * Badge content — intentionally required. A badge without content is
-     * semantically meaningless. The render site uses optional chaining
-     * (`children?.()`) as a runtime safety net for JS consumers.
+     * semantically meaningless.
      */
     children: Snippet;
-};
+});
 /** Cinder-specific props for the Badge component, used by the schema generator. */
 export interface BadgeSchemaProps {
     /**
@@ -35,6 +47,8 @@ export interface BadgeSchemaProps {
      * @default false
      */
     mono?: boolean;
+    /** Render a standardized subscription lifecycle badge without hand-wiring tone, icon, and label. */
+    subscriptionState?: BadgeSubscriptionState;
     /** Custom class merged with `.cinder-badge`. */
     class?: string;
 }

package/dist/components/badge/index.d.ts

@@ -1,5 +1,5 @@
 import './badge.css';
 import Badge from './badge.svelte';
 export default Badge;
-export type { BadgeProps, BadgeSize, BadgeVariant } from './badge.types.ts';
+export type { BadgeProps, BadgeSize, BadgeSubscriptionState, BadgeVariant } from './badge.types.ts';
 export { Badge };