@lostgradient/cinder 0.5.0 → 0.6.0

package/dist/components/card/card.css

@@ -19,6 +19,16 @@
     box-shadow: none;
   }
 
+  .cinder-card[data-cinder-tone='danger'] {
+    background: var(--cinder-color-danger-bg);
+    border-color: var(--cinder-color-danger-border);
+    box-shadow: none;
+  }
+
+  .cinder-card[data-cinder-tone='danger'][data-cinder-variant='well'] {
+    background: var(--cinder-color-danger-bg);
+  }
+
   /* ----------------------------------------
  * Header
  * ---------------------------------------- */
@@ -31,10 +41,27 @@
     border-bottom: 1px solid var(--cinder-border-muted);
   }
 
+  .cinder-card[data-cinder-tone='danger'] > .cinder-card__header {
+    border-bottom-color: var(--cinder-color-danger-border);
+  }
+
   /* ----------------------------------------
  * Title & description (title arm)
  * ---------------------------------------- */
 
+  .cinder-card__title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+    min-inline-size: 0;
+  }
+
+  .cinder-card__risk-icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    color: var(--cinder-danger);
+  }
+
   .cinder-card__title {
     font-size: var(--cinder-text-sm);
     font-weight: var(--cinder-font-medium);
@@ -42,6 +69,10 @@
     margin: 0;
   }
 
+  .cinder-card[data-cinder-tone='danger'] > .cinder-card__header .cinder-card__title {
+    color: var(--cinder-color-danger-fg);
+  }
+
   .cinder-card__description {
     font-size: var(--cinder-text-sm);
     color: var(--cinder-text-subtle);
@@ -64,7 +95,7 @@
     padding: 0;
   }
 
-  .cinder-card[data-cinder-variant='well'] .cinder-card__body {
+  .cinder-card[data-cinder-variant='well'] > .cinder-card__body {
     background: var(--cinder-surface-inset);
   }
 
@@ -81,10 +112,31 @@
     border-top: 1px solid var(--cinder-border-muted);
   }
 
+  .cinder-card[data-cinder-tone='danger'] > .cinder-card__footer {
+    border-top-color: var(--cinder-color-danger-border);
+  }
+
   .cinder-card__footer[data-cinder-tone='muted'] {
     background: var(--cinder-surface-inset);
   }
 
+  @media (forced-colors: active) {
+    .cinder-card[data-cinder-tone='danger'] {
+      background: Canvas;
+      border-color: CanvasText;
+    }
+
+    .cinder-card[data-cinder-tone='danger'] .cinder-card__header,
+    .cinder-card[data-cinder-tone='danger'] .cinder-card__footer {
+      border-color: CanvasText;
+    }
+
+    .cinder-card[data-cinder-tone='danger'] .cinder-card__title,
+    .cinder-card__risk-icon {
+      color: CanvasText;
+    }
+  }
+
   @media (width < 640px) {
     .cinder-card[data-cinder-edge-to-edge-mobile] {
       --cinder-card-mobile-bleed: var(--cinder-space-4);

package/dist/components/card/card.schema.js

@@ -64,6 +64,10 @@ var schema = {
       enum: ["card", "well"],
       description: "Visual container style. `card` is raised; `well` is flatter and inset."
     },
+    tone: {
+      enum: ["default", "danger"],
+      description: "Container risk treatment. `danger` renders a danger-zone surface for high-risk settings or destructive actions."
+    },
     bodyTone: {
       enum: ["default", "muted"],
       description: "Body surface treatment. `muted` renders a grey/inset body region."
@@ -117,4 +121,4 @@ export {
   card_schema_default as default
 };
 
-//# debugId=25185088CC01395364756E2164756E21
+//# debugId=F6D9BA0707365EC764756E2164756E21

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

@@ -11,7 +11,7 @@
  * @avoidWhen Presenting a single key metric — use stat or stat-group instead.
  * @related surface, stat, stacked-list-item, section-heading
  */
-export type { CardHeadingLevel, CardPadding, CardProps, CardTone, CardVariant, } from './card.types.ts';
+export type { CardHeadingLevel, CardPadding, CardProps, CardSurfaceTone, CardTone, CardVariant, } from './card.types.ts';
 import type { CardProps } from './card.types.ts';
 declare const Card: import("svelte").Component<CardProps, {}, "">;
 type Card = ReturnType<typeof Card>;

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

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export type CardVariant = 'card' | 'well';
 export type CardTone = 'default' | 'muted';
+export type CardSurfaceTone = 'default' | 'danger';
 /** Controls body padding. `none` removes all padding for flush/full-bleed content. Future values like `compact` may be added. */
 export type CardPadding = 'default' | 'none';
 /** Heading level for the generated card title, so the document outline stays correct. */
@@ -10,6 +11,8 @@ type CardBase = HTMLAttributes<HTMLDivElement> & {
     class?: string;
     /** Visual container style. `card` is raised; `well` is flatter and inset. */
     variant?: CardVariant;
+    /** Container risk treatment. `danger` renders a danger-zone surface for high-risk settings or destructive actions. */
+    tone?: CardSurfaceTone;
     /** Body surface treatment. `muted` renders a grey/inset body region. */
     bodyTone?: CardTone;
     /** Footer surface treatment. `muted` renders a grey/inset footer region. */

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

@@ -1,5 +1,5 @@
 import './card.css';
 import Card from './card.svelte';
 export default Card;
-export type { CardPadding, CardProps, CardTone, CardVariant } from './card.types.ts';
+export type { CardPadding, CardProps, CardSurfaceTone, CardTone, CardVariant, } from './card.types.ts';
 export { Card };

package/dist/components/card/index.js

@@ -56,22 +56,165 @@ import"@lostgradient/cinder/card/styles";
 
 // src/components/card/card.svelte
 import"svelte/internal/disclose-version";
+import * as $3 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/icons/circle-alert.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $2 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
 import * as $ from "svelte/internal/client";
 
+// ../../node_modules/lucide-svelte/dist/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+var defaultAttributes_default = defaultAttributes;
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+var root = $.from_svg(`<svg><!><!></svg>`);
+function Icon($$anchor, $$props) {
+  const $$sanitized_props = $.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const $$restProps = $.legacy_rest_props($$sanitized_props, [
+    "name",
+    "color",
+    "size",
+    "strokeWidth",
+    "absoluteStrokeWidth",
+    "iconNode"
+  ]);
+  $.push($$props, false);
+  let name = $.prop($$props, "name", 8, undefined);
+  let color = $.prop($$props, "color", 8, "currentColor");
+  let size = $.prop($$props, "size", 8, 24);
+  let strokeWidth = $.prop($$props, "strokeWidth", 8, 2);
+  let absoluteStrokeWidth = $.prop($$props, "absoluteStrokeWidth", 8, false);
+  let iconNode = $.prop($$props, "iconNode", 24, () => []);
+  const mergeClasses = (...classes) => classes.filter((className, index2, array) => {
+    return Boolean(className) && array.indexOf(className) === index2;
+  }).join(" ");
+  $.init();
+  var svg = root();
+  $.attribute_effect(svg, ($0, $1) => ({
+    ...defaultAttributes_default,
+    ...$$restProps,
+    width: size(),
+    height: size(),
+    stroke: color(),
+    "stroke-width": $0,
+    class: $1
+  }), [
+    () => ($.deep_read_state(absoluteStrokeWidth()), $.deep_read_state(strokeWidth()), $.deep_read_state(size()), $.untrack(() => absoluteStrokeWidth() ? Number(strokeWidth()) * 24 / Number(size()) : strokeWidth())),
+    () => ($.deep_read_state(name()), $.deep_read_state($$sanitized_props), $.untrack(() => mergeClasses("lucide-icon", "lucide", name() ? `lucide-${name()}` : "", $$sanitized_props.class)))
+  ]);
+  var node = $.child(svg);
+  $.each(node, 1, iconNode, $.index, ($$anchor2, $$item) => {
+    var $$array = $.derived(() => $.to_array($.get($$item), 2));
+    let tag = () => $.get($$array)[0];
+    let attrs = () => $.get($$array)[1];
+    var fragment = $.comment();
+    var node_1 = $.first_child(fragment);
+    $.element(node_1, tag, true, ($$element, $$anchor3) => {
+      $.attribute_effect($$element, () => ({ ...attrs() }));
+    });
+    $.append($$anchor2, fragment);
+  });
+  var node_2 = $.sibling(node);
+  $.slot(node_2, $$props, "default", {}, null);
+  $.reset(svg);
+  $.append($$anchor, svg);
+  $.pop();
+}
+
+// ../../node_modules/lucide-svelte/dist/icons/circle-alert.svelte
+function Circle_alert($$anchor, $$props) {
+  const $$sanitized_props = $2.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [
+    ["circle", { cx: "12", cy: "12", r: "10" }],
+    ["line", { x1: "12", x2: "12", y1: "8", y2: "12" }],
+    [
+      "line",
+      { x1: "12", x2: "12.01", y1: "16", y2: "16" }
+    ]
+  ];
+  Icon($$anchor, $2.spread_props({ name: "circle-alert" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $2.comment();
+      var node = $2.first_child(fragment_1);
+      $2.slot(node, $$props, "default", {}, null);
+      $2.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// src/_internal/field-control.ts
+function describeId(fieldId, hasDescription) {
+  return hasDescription ? `${fieldId}-description` : undefined;
+}
+function errorId(fieldId, hasError) {
+  return hasError ? `${fieldId}-error` : undefined;
+}
+function composeDescribedBy(...ids) {
+  const filtered = ids.flatMap((id) => typeof id === "string" ? id.trim().split(/\s+/).filter(Boolean) : []);
+  const unique = Array.from(new Set(filtered));
+  return unique.length > 0 ? unique.join(" ") : undefined;
+}
+function ariaInvalid(hasError) {
+  return hasError ? "true" : undefined;
+}
+function resolveFieldControl(input) {
+  const resolvedId = input.id ?? input.context?.controlId ?? input.generatedId;
+  const defaultDescriptionId = describeId(resolvedId, input.hasDescription ?? false);
+  const defaultErrorId = errorId(resolvedId, input.hasError ?? false);
+  const ownDescriptionId = defaultDescriptionId && defaultDescriptionId === input.context?.descriptionId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-description` : defaultDescriptionId;
+  const ownErrorId = defaultErrorId && defaultErrorId === input.context?.errorId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-error` : defaultErrorId;
+  const descriptionId = ownDescriptionId ?? input.context?.descriptionId;
+  const resolvedErrorId = ownErrorId ?? input.context?.errorId;
+  const explicitInvalid = ariaInvalid(input.hasError ?? false);
+  const consumerInvalid = input.consumerInvalid === true ? "true" : input.consumerInvalid === false ? undefined : input.consumerInvalid ?? undefined;
+  return {
+    id: resolvedId,
+    ownDescriptionId,
+    ownErrorId,
+    descriptionId,
+    errorId: resolvedErrorId,
+    describedBy: composeDescribedBy(descriptionId, ...input.additionalDescribedBy ?? [], resolvedErrorId, input.context?.describedBy, input.consumerDescribedBy),
+    ariaInvalid: explicitInvalid ?? input.context?.invalid ?? consumerInvalid,
+    required: input.required ?? input.context?.required ?? false,
+    disabled: input.disabled ?? input.context?.disabled ?? false
+  };
+}
+
 // src/utilities/class-names.ts
 function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
 // src/components/card/card.svelte
-var root_1 = $.from_html(`<div class="cinder-card__header"><!></div>`);
-var root_4 = $.from_html(`<p class="cinder-card__description"> </p>`);
-var root_2 = $.from_html(`<div class="cinder-card__header"><!> <!></div>`);
-var root_5 = $.from_html(`<div class="cinder-card__footer"><!></div>`);
-var root = $.from_html(`<div><!> <div class="cinder-card__body"><!></div> <!></div>`);
+var root_1 = $3.from_html(`<div class="cinder-card__header"><!></div>`);
+var root_3 = $3.from_html(`<span class="cinder-card__risk-icon" aria-hidden="true"><!></span>`);
+var root_5 = $3.from_html(`<p class="cinder-card__description"> </p>`);
+var root_2 = $3.from_html(`<div class="cinder-card__header"><div class="cinder-card__title-row"><!> <!></div> <!></div>`);
+var root_6 = $3.from_html(`<div class="cinder-card__footer"><!></div>`);
+var root2 = $3.from_html(`<div><!> <div class="cinder-card__body"><!></div> <!></div>`);
 function Card($$anchor, $$props) {
-  $.push($$props, true);
-  let headingLevel = $.prop($$props, "headingLevel", 3, 3), variant = $.prop($$props, "variant", 3, "card"), bodyTone = $.prop($$props, "bodyTone", 3, "default"), footerTone = $.prop($$props, "footerTone", 3, "default"), edgeToEdgeOnMobile = $.prop($$props, "edgeToEdgeOnMobile", 3, false), padding = $.prop($$props, "padding", 3, "default"), rest = $.rest_props($$props, [
+  const generatedId = $3.props_id();
+  $3.push($$props, true);
+  let headingLevel = $3.prop($$props, "headingLevel", 3, 3), variant = $3.prop($$props, "variant", 3, "card"), tone = $3.prop($$props, "tone", 3, "default"), bodyTone = $3.prop($$props, "bodyTone", 3, "default"), footerTone = $3.prop($$props, "footerTone", 3, "default"), edgeToEdgeOnMobile = $3.prop($$props, "edgeToEdgeOnMobile", 3, false), padding = $3.prop($$props, "padding", 3, "default"), rest = $3.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -83,88 +226,121 @@ function Card($$anchor, $$props) {
     "description",
     "footer",
     "variant",
+    "tone",
     "bodyTone",
     "footerTone",
     "edgeToEdgeOnMobile",
     "padding"
   ]);
-  const resolvedHeadingLevel = $.derived(() => Number.isFinite(Math.trunc(Number(headingLevel()))) ? Math.min(6, Math.max(1, Math.trunc(Number(headingLevel())))) : 3);
-  const titleTag = $.derived(() => `h${$.get(resolvedHeadingLevel)}`);
-  var div = root();
-  $.attribute_effect(div, ($0) => ({
+  const resolvedHeadingLevel = $3.derived(() => Number.isFinite(Math.trunc(Number(headingLevel()))) ? Math.min(6, Math.max(1, Math.trunc(Number(headingLevel())))) : 3);
+  const titleTag = $3.derived(() => `h${$3.get(resolvedHeadingLevel)}`);
+  const hasGeneratedHeader = $3.derived(() => Boolean($$props.title && !$$props.header));
+  const titleId = $3.derived(() => $3.get(hasGeneratedHeader) ? `${generatedId}-title` : undefined);
+  const descriptionId = $3.derived(() => $3.get(hasGeneratedHeader) && $$props.description ? `${generatedId}-description` : undefined);
+  const hasExternalRole = $3.derived(() => typeof $$props.role === "string" && $$props.role.trim().length > 0);
+  const hasExternalLabel = $3.derived(() => typeof rest["aria-labelledby"] === "string" && rest["aria-labelledby"].trim().length > 0 || typeof rest["aria-label"] === "string" && rest["aria-label"].trim().length > 0);
+  const describedBy = $3.derived(() => composeDescribedBy($3.get(descriptionId), rest["aria-describedby"]));
+  const labelAttributes = $3.derived(() => $3.get(hasGeneratedHeader) ? {
+    ...!$3.get(hasExternalRole) ? { role: "group" } : {},
+    ...!$3.get(hasExternalLabel) ? { "aria-labelledby": $3.get(titleId) } : {},
+    ...$3.get(describedBy) ? { "aria-describedby": $3.get(describedBy) } : {}
+  } : {});
+  var div = root2();
+  $3.attribute_effect(div, ($0) => ({
+    ...rest,
     class: $0,
     "data-cinder-variant": variant(),
+    "data-cinder-tone": tone(),
     "data-cinder-edge-to-edge-mobile": edgeToEdgeOnMobile() ? "" : undefined,
-    ...rest
+    ...$3.get(labelAttributes)
   }), [() => classNames("cinder-card", $$props.class)]);
-  var node = $.child(div);
+  var node = $3.child(div);
   {
     var consequent = ($$anchor2) => {
       var div_1 = root_1();
-      var node_1 = $.child(div_1);
-      $.snippet(node_1, () => $$props.header);
-      $.reset(div_1);
-      $.append($$anchor2, div_1);
+      var node_1 = $3.child(div_1);
+      $3.snippet(node_1, () => $$props.header);
+      $3.reset(div_1);
+      $3.append($$anchor2, div_1);
     };
-    var consequent_2 = ($$anchor2) => {
+    var consequent_3 = ($$anchor2) => {
       var div_2 = root_2();
-      var node_2 = $.child(div_2);
-      $.element(node_2, () => $.get(titleTag), false, ($$element, $$anchor3) => {
-        $.set_class($$element, 0, "cinder-card__title");
-        var text2 = $.text();
-        $.template_effect(() => $.set_text(text2, $$props.title));
-        $.append($$anchor3, text2);
-      });
-      var node_3 = $.sibling(node_2, 2);
+      var div_3 = $3.child(div_2);
+      var node_2 = $3.child(div_3);
       {
         var consequent_1 = ($$anchor3) => {
-          var p = root_4();
-          var text_1 = $.child(p, true);
-          $.reset(p);
-          $.template_effect(() => $.set_text(text_1, $$props.description));
-          $.append($$anchor3, p);
+          var span = root_3();
+          var node_3 = $3.child(span);
+          Circle_alert(node_3, { size: 18, strokeWidth: 2.25 });
+          $3.reset(span);
+          $3.append($$anchor3, span);
         };
-        $.if(node_3, ($$render) => {
-          if ($$props.description)
+        $3.if(node_2, ($$render) => {
+          if (tone() === "danger")
             $$render(consequent_1);
         });
       }
-      $.reset(div_2);
-      $.append($$anchor2, div_2);
+      var node_4 = $3.sibling(node_2, 2);
+      $3.element(node_4, () => $3.get(titleTag), false, ($$element, $$anchor3) => {
+        $3.attribute_effect($$element, () => ({ id: $3.get(titleId), class: "cinder-card__title" }));
+        var text2 = $3.text();
+        $3.template_effect(() => $3.set_text(text2, $$props.title));
+        $3.append($$anchor3, text2);
+      });
+      $3.reset(div_3);
+      var node_5 = $3.sibling(div_3, 2);
+      {
+        var consequent_2 = ($$anchor3) => {
+          var p = root_5();
+          var text_1 = $3.child(p, true);
+          $3.reset(p);
+          $3.template_effect(() => {
+            $3.set_attribute(p, "id", $3.get(descriptionId));
+            $3.set_text(text_1, $$props.description);
+          });
+          $3.append($$anchor3, p);
+        };
+        $3.if(node_5, ($$render) => {
+          if ($$props.description)
+            $$render(consequent_2);
+        });
+      }
+      $3.reset(div_2);
+      $3.append($$anchor2, div_2);
     };
-    $.if(node, ($$render) => {
+    $3.if(node, ($$render) => {
       if ($$props.header)
         $$render(consequent);
       else if ($$props.title)
-        $$render(consequent_2, 1);
+        $$render(consequent_3, 1);
     });
   }
-  var div_3 = $.sibling(node, 2);
-  var node_4 = $.child(div_3);
-  $.snippet(node_4, () => $$props.children);
-  $.reset(div_3);
-  var node_5 = $.sibling(div_3, 2);
+  var div_4 = $3.sibling(node, 2);
+  var node_6 = $3.child(div_4);
+  $3.snippet(node_6, () => $$props.children);
+  $3.reset(div_4);
+  var node_7 = $3.sibling(div_4, 2);
   {
-    var consequent_3 = ($$anchor2) => {
-      var div_4 = root_5();
-      var node_6 = $.child(div_4);
-      $.snippet(node_6, () => $$props.footer);
-      $.reset(div_4);
-      $.template_effect(() => $.set_attribute(div_4, "data-cinder-tone", footerTone()));
-      $.append($$anchor2, div_4);
+    var consequent_4 = ($$anchor2) => {
+      var div_5 = root_6();
+      var node_8 = $3.child(div_5);
+      $3.snippet(node_8, () => $$props.footer);
+      $3.reset(div_5);
+      $3.template_effect(() => $3.set_attribute(div_5, "data-cinder-tone", footerTone()));
+      $3.append($$anchor2, div_5);
     };
-    $.if(node_5, ($$render) => {
+    $3.if(node_7, ($$render) => {
       if ($$props.footer)
-        $$render(consequent_3);
+        $$render(consequent_4);
     });
   }
-  $.reset(div);
-  $.template_effect(() => {
-    $.set_attribute(div_3, "data-cinder-tone", bodyTone());
-    $.set_attribute(div_3, "data-cinder-padding", padding());
+  $3.reset(div);
+  $3.template_effect(() => {
+    $3.set_attribute(div_4, "data-cinder-tone", bodyTone());
+    $3.set_attribute(div_4, "data-cinder-padding", padding());
   });
-  $.append($$anchor, div);
-  $.pop();
+  $3.append($$anchor, div);
+  $3.pop();
 }
 
 // src/components/card/index.ts
@@ -174,4 +350,4 @@ export {
   Card
 };
 
-//# debugId=3543CC48E5A87AF464756E2164756E21
+//# debugId=D66F4ACCD25B131964756E2164756E21