@lostgradient/cinder 0.5.0 → 0.7.0

package/dist/components/breadcrumbs/index.js

@@ -64,29 +64,29 @@ function classNames(...parts) {
 }
 
 // src/components/breadcrumbs/breadcrumbs.svelte
-var root_2 = $.from_html(`<span aria-current="page" class="cinder-breadcrumbs__current"> </span>`);
-var root_3 = $.from_html(`<a class="cinder-breadcrumbs__link"> </a> <span class="cinder-breadcrumbs__separator" aria-hidden="true"><!></span>`, 1);
-var root_1 = $.from_html(`<li class="cinder-breadcrumbs__item"><!></li>`);
-var root = $.from_html(`<nav><ol class="cinder-breadcrumbs__list"></ol></nav>`);
+var root = $.from_html(`<span aria-current="page" class="cinder-breadcrumbs__current"> </span>`);
+var root_1 = $.from_html(`<a class="cinder-breadcrumbs__link"> </a> <span class="cinder-breadcrumbs__separator" aria-hidden="true"><!></span>`, 1);
+var root_2 = $.from_html(`<li class="cinder-breadcrumbs__item"><!></li>`);
+var root_3 = $.from_html(`<nav><ol class="cinder-breadcrumbs__list"></ol></nav>`);
 function Breadcrumbs($$anchor, $$props) {
   $.push($$props, true);
   let separator = $.prop($$props, "separator", 3, "/"), label = $.prop($$props, "label", 3, "Breadcrumb");
-  var nav = root();
+  var nav = root_3();
   var ol = $.child(nav);
   $.each(ol, 21, () => $$props.items, $.index, ($$anchor2, item, index2) => {
     const isLast = $.derived(() => index2 === $$props.items.length - 1);
-    var li = root_1();
+    var li = root_2();
     var node = $.child(li);
     {
       var consequent = ($$anchor3) => {
-        var span = root_2();
+        var span = root();
         var text2 = $.child(span, true);
         $.reset(span);
         $.template_effect(() => $.set_text(text2, $.get(item).label));
         $.append($$anchor3, span);
       };
       var alternate_1 = ($$anchor3) => {
-        var fragment = root_3();
+        var fragment = root_1();
         var a = $.first_child(fragment);
         var text_1 = $.child(a, true);
         $.reset(a);
@@ -147,4 +147,4 @@ export {
   Breadcrumbs
 };
 
-//# debugId=E5C220C3BBB5EEAE64756E2164756E21
+//# debugId=F4E841DDB9803CCD64756E2164756E21

package/dist/components/button/index.js

@@ -73,22 +73,44 @@ function devWarn(message, ...args) {
 }
 
 // src/components/button/button.svelte
-var root_2 = $.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
-var root_4 = $.from_html(`<span class="cinder-sr-only"> </span>`);
-var root_5 = $.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
-var root_3 = $.from_html(`<!> <!>`, 1);
-var root_8 = $.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
-var root_1 = $.from_html(`<!> <!> <!>`, 1);
-var root_9 = $.from_html(`<a><!></a>`);
-var root_10 = $.from_html(`<button><!></button>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "variant",
+  "size",
+  "fullWidth",
+  "loading",
+  "iconOnly",
+  "leadingIcon",
+  "trailingIcon",
+  "children",
+  "label",
+  "class",
+  "href",
+  "onclick",
+  "aria-disabled",
+  "aria-busy",
+  "aria-label",
+  "aria-labelledby",
+  "aria-expanded",
+  "aria-controls",
+  "aria-haspopup"
+]);
+var root = $.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
+var root_1 = $.from_html(`<span class="cinder-sr-only"> </span>`);
+var root_2 = $.from_html(`<!> <!>`, 1);
+var root_3 = $.from_html(`<!> <!> <!>`, 1);
+var root_4 = $.from_html(`<a><!></a>`);
+var root_5 = $.from_html(`<button><!></button>`);
 function Button($$anchor, $$props) {
   $.push($$props, true);
   const buttonContent = ($$anchor2) => {
-    var fragment = root_1();
+    var fragment = root_3();
     var node = $.first_child(fragment);
     {
       var consequent = ($$anchor3) => {
-        var span = root_2();
+        var span = root();
         var node_1 = $.child(span);
         $.snippet(node_1, () => $$props.leadingIcon);
         $.reset(span);
@@ -102,11 +124,11 @@ function Button($$anchor, $$props) {
     var node_2 = $.sibling(node, 2);
     {
       var consequent_3 = ($$anchor3) => {
-        var fragment_1 = root_3();
+        var fragment_1 = root_2();
         var node_3 = $.first_child(fragment_1);
         {
           var consequent_1 = ($$anchor4) => {
-            var span_1 = root_4();
+            var span_1 = root_1();
             var text2 = $.child(span_1, true);
             $.reset(span_1);
             $.template_effect(() => $.set_text(text2, $$props.label));
@@ -120,7 +142,7 @@ function Button($$anchor, $$props) {
         var node_4 = $.sibling(node_3, 2);
         {
           var consequent_2 = ($$anchor4) => {
-            var span_2 = root_5();
+            var span_2 = root();
             var node_5 = $.child(span_2);
             $.snippet(node_5, () => $$props.children);
             $.reset(span_2);
@@ -156,7 +178,7 @@ function Button($$anchor, $$props) {
     var node_7 = $.sibling(node_2, 2);
     {
       var consequent_5 = ($$anchor3) => {
-        var span_3 = root_8();
+        var span_3 = root();
         var node_8 = $.child(span_3);
         $.snippet(node_8, () => $$props.trailingIcon);
         $.reset(span_3);
@@ -169,30 +191,7 @@ function Button($$anchor, $$props) {
     }
     $.append($$anchor2, fragment);
   };
-  const variant = $.prop($$props, "variant", 3, "secondary"), size = $.prop($$props, "size", 3, "md"), fullWidth = $.prop($$props, "fullWidth", 3, false), loading = $.prop($$props, "loading", 3, false), iconOnly = $.prop($$props, "iconOnly", 3, false), rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "variant",
-    "size",
-    "fullWidth",
-    "loading",
-    "iconOnly",
-    "leadingIcon",
-    "trailingIcon",
-    "children",
-    "label",
-    "class",
-    "href",
-    "onclick",
-    "aria-disabled",
-    "aria-busy",
-    "aria-label",
-    "aria-labelledby",
-    "aria-expanded",
-    "aria-controls",
-    "aria-haspopup"
-  ]);
+  const variant = $.prop($$props, "variant", 3, "secondary"), size = $.prop($$props, "size", 3, "md"), fullWidth = $.prop($$props, "fullWidth", 3, false), loading = $.prop($$props, "loading", 3, false), iconOnly = $.prop($$props, "iconOnly", 3, false), rest = $.rest_props($$props, rest_excludes);
   const mergedClassName = $.derived(() => classNames("cinder-button", $$props.class));
   const dataAttributes = $.derived(() => ({
     "data-cinder-variant": variant(),
@@ -238,7 +237,7 @@ function Button($$anchor, $$props) {
   var node_9 = $.first_child(fragment_4);
   {
     var consequent_6 = ($$anchor2) => {
-      var a = root_9();
+      var a = root_4();
       $.attribute_effect(a, () => ({
         ...anchorAttributes,
         href: loading() ? undefined : $$props.href,
@@ -260,7 +259,7 @@ function Button($$anchor, $$props) {
       $.append($$anchor2, a);
     };
     var alternate_1 = ($$anchor2) => {
-      var button = root_10();
+      var button = root_5();
       $.attribute_effect(button, () => ({
         ...buttonAttributes,
         type: $.get(buttonType) ?? "button",
@@ -299,4 +298,4 @@ export {
   Button
 };
 
-//# debugId=EE1D1546C33F459A64756E2164756E21
+//# debugId=212895C6E3C2175664756E2164756E21

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

@@ -136,19 +136,20 @@ function useMutationObserver(onMutate, options = {}) {
 
 // src/components/button-group/button-group.svelte
 var groupIdCounter = 0;
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "label",
+  "labelledBy",
+  "orientation",
+  "class",
+  "children"
+]);
 var root = $2.from_html(`<div><!></div>`);
 function Button_group($$anchor, $$props) {
   $2.push($$props, true);
-  let orientation = $2.prop($$props, "orientation", 3, "horizontal"), rest = $2.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "label",
-    "labelledBy",
-    "orientation",
-    "class",
-    "children"
-  ]);
+  let orientation = $2.prop($$props, "orientation", 3, "horizontal"), rest = $2.rest_props($$props, rest_excludes);
   const mergedClassName = $2.derived(() => classNames("cinder-button-group", $$props.class));
   const ariaLabelAttribute = $2.derived(() => typeof $$props.label === "string" ? $$props.label : undefined);
   const ariaLabelledByAttribute = $2.derived(() => typeof $$props.labelledBy === "string" ? $$props.labelledBy : undefined);
@@ -220,4 +221,4 @@ export {
   Button_group as ButtonGroup
 };
 
-//# debugId=4AFCBFBD400E812764756E2164756E21
+//# debugId=E98F96B6777B071F64756E2164756E21

package/dist/components/calendar/index.js

@@ -65,31 +65,32 @@ function classNames(...parts) {
 }
 
 // src/components/calendar/calendar.svelte
-var root_1 = $.from_html(`<span class="cinder-calendar__weekday"> </span>`);
-var root_3 = $.from_html(`<div role="gridcell" class="cinder-calendar__gridcell"><button type="button" class="cinder-calendar__day"> </button></div>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "value",
+  "month",
+  "min",
+  "max",
+  "firstDayOfWeek",
+  "locale",
+  "label",
+  "disabled",
+  "class",
+  "onchange",
+  "disabledDate"
+]);
+var root = $.from_html(`<span class="cinder-calendar__weekday"> </span>`);
+var root_1 = $.from_html(`<div role="gridcell" class="cinder-calendar__gridcell"><button type="button" class="cinder-calendar__day"> </button></div>`);
 var root_2 = $.from_html(`<div role="row" class="cinder-calendar__grid-row"></div>`);
-var root = $.from_html(`<div><div class="cinder-calendar__header"><button type="button" class="cinder-calendar__nav" aria-label="Previous month">‹</button> <p class="cinder-calendar__title"> </p> <button type="button" class="cinder-calendar__nav" aria-label="Next month">›</button></div> <div class="cinder-calendar__weekdays" aria-hidden="true"></div> <div class="cinder-calendar__grid" role="grid" tabindex="-1"></div></div>`);
+var root_3 = $.from_html(`<div><div class="cinder-calendar__header"><button type="button" class="cinder-calendar__nav" aria-label="Previous month">‹</button> <p class="cinder-calendar__title"> </p> <button type="button" class="cinder-calendar__nav" aria-label="Next month">›</button></div> <div class="cinder-calendar__weekdays" aria-hidden="true"></div> <div class="cinder-calendar__grid" role="grid" tabindex="-1"></div></div>`);
 function Calendar($$anchor, $$props) {
   const generatedId = $.props_id();
   $.push($$props, true);
   const WEEKDAY_INDEXES = [0, 1, 2, 3, 4, 5, 6];
-  let value = $.prop($$props, "value", 15, undefined), firstDayOfWeek = $.prop($$props, "firstDayOfWeek", 3, 0), locale = $.prop($$props, "locale", 3, "en-US"), label = $.prop($$props, "label", 3, "Calendar"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "value",
-    "month",
-    "min",
-    "max",
-    "firstDayOfWeek",
-    "locale",
-    "label",
-    "disabled",
-    "class",
-    "onchange",
-    "disabledDate"
-  ]);
+  let value = $.prop($$props, "value", 15, undefined), firstDayOfWeek = $.prop($$props, "firstDayOfWeek", 3, 0), locale = $.prop($$props, "locale", 3, "en-US"), label = $.prop($$props, "label", 3, "Calendar"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
   const rootId = $.derived(() => $$props.id ?? generatedId);
   const titleId = $.derived(() => `${$.get(rootId)}-title`);
   const monthGridId = $.derived(() => `${$.get(rootId)}-grid`);
@@ -309,7 +310,7 @@ function Calendar($$anchor, $$props) {
     const monthStart = new Date(next.getFullYear(), next.getMonth(), 1);
     return toISODate(monthStart) <= $$props.max;
   }
-  var div = root();
+  var div = root_3();
   $.attribute_effect(div, ($0) => ({ ...rest, "aria-label": label(), class: $0 }), [() => classNames("cinder-calendar", $$props.class)]);
   var div_1 = $.child(div);
   var button = $.child(div_1);
@@ -320,7 +321,7 @@ function Calendar($$anchor, $$props) {
   $.reset(div_1);
   var div_2 = $.sibling(div_1, 2);
   $.each(div_2, 20, () => $.get(weekdayLabels), (weekday) => weekday, ($$anchor2, weekday) => {
-    var span = root_1();
+    var span = root();
     var text_1 = $.child(span, true);
     $.reset(span);
     $.template_effect(() => $.set_text(text_1, weekday));
@@ -331,7 +332,7 @@ function Calendar($$anchor, $$props) {
   $.each(div_3, 23, () => $.get(rows), (row, rowIndex) => row[0]?.iso ?? rowIndex, ($$anchor2, row) => {
     var div_4 = root_2();
     $.each(div_4, 21, () => $.get(row), (cell) => cell.iso, ($$anchor3, cell) => {
-      var div_5 = root_3();
+      var div_5 = root_1();
       var button_2 = $.child(div_5);
       var text_2 = $.child(button_2, true);
       $.reset(button_2);
@@ -391,4 +392,4 @@ export {
   Calendar
 };
 
-//# debugId=A323F7504C2D261964756E2164756E21
+//# debugId=AFEE3A1C8AB03B8364756E2164756E21

package/dist/components/callout/callout.schema.js

@@ -58,12 +58,16 @@ var schema = {
   properties: {
     title: {
       type: "string",
-      description: 'Optional title rendered as a `<p class="cinder-callout__title">`.\n\nRendered as a paragraph rather than a heading element so the\ncallout does not inject an entry into the document outline. If a\ncallout genuinely participates in the outline (e.g. it titles a\nstandalone section), wrap it in a `<section>` with its own heading\nrather than promoting this prop to `<h*>`.\n\nWhen supplied and no `aria-label` or `aria-labelledby` is passed\non rest props, the title also becomes the `aria-label` of the\nroot `<aside>` so the landmark has an accessible name.'
+      description: 'Optional title rendered as a `<p class="cinder-callout__title">`.\n\nRendered as a paragraph rather than a heading element so the\ncallout does not inject an entry into the document outline. If a\ncallout genuinely participates in the outline (e.g. it titles a\nstandalone section), wrap it in a `<section>` with its own heading\nrather than promoting this prop to `<h*>`.\n\nWhen supplied and no `aria-label` or `aria-labelledby` is passed\non rest props, the title also becomes the `aria-label` of the\nroot element so the landmark or note has an accessible name.'
     },
     variant: {
       enum: ["info", "success", "warning", "danger"],
       description: "Visual + semantic variant. Default `'info'`."
     },
+    semantic: {
+      enum: ["aside", "note"],
+      description: "Root semantics. Default `'aside'`; use `'note'` for static note semantics without a complementary landmark."
+    },
     class: {
       type: "string",
       description: 'Extra classes appended to the root element. Pass via the explicit\n`class` prop — it is excluded from rest-prop spread, so writing\n`class="x"` inside spread attributes will not reach the root.'
@@ -91,4 +95,4 @@ export {
   callout_schema_default as default
 };
 
-//# debugId=EAD1F8BD19A3351F64756E2164756E21
+//# debugId=EECF77FD6870C2B064756E2164756E21

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

@@ -2,7 +2,7 @@
  * @cinder
  * @category feedback
  * @status stable
- * @purpose Inline aside that highlights supporting commentary alongside body content without claiming live-region urgency.
+ * @purpose Inline static note or aside that highlights supporting commentary alongside body content without claiming live-region urgency.
  * @tag feedback
  * @tag notice
  * @useWhen Drawing attention to tangential information nested inside prose, documentation, or article content.
@@ -11,7 +11,7 @@
  * @avoidWhen Communicating a page-wide system message — use banner so it reads as a landmark region.
  * @related alert, banner
  */
-export type { CalloutProps, CalloutVariant } from './callout.types.ts';
+export type { CalloutProps, CalloutSemantic, CalloutVariant } from './callout.types.ts';
 import type { CalloutProps } from './callout.types.ts';
 declare const Callout: import("svelte").Component<CalloutProps, {}, "">;
 type Callout = ReturnType<typeof Callout>;

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

@@ -9,6 +9,15 @@ import type { HTMLAttributes } from 'svelte/elements';
  * that divergence is tracked in `banner.a11y.md`.
  */
 export type CalloutVariant = 'info' | 'success' | 'warning' | 'danger';
+/**
+ * Root semantics for {@link Callout}.
+ *
+ * - `'aside'` keeps the historical `<aside>` behavior and may expose a
+ *   `complementary` landmark depending on where the callout is placed.
+ * - `'note'` renders a static `<div role="note">` for explanatory notes that
+ *   should not appear in landmark navigation.
+ */
+export type CalloutSemantic = 'aside' | 'note';
 /**
  * Props for the {@link Callout} component — an inline admonition block
  * for documentation and long-form content. See `callout.a11y.md` for
@@ -24,24 +33,27 @@ export type CalloutVariant = 'info' | 'success' | 'warning' | 'danger';
  *
  * Callout is intentionally **not** a live region. It is static content
  * rendered as part of the document, analogous to Markdown admonitions
- * (note / tip / warning / danger). The type omits `role`, `aria-live`,
- * `aria-atomic`, `aria-relevant`, and `aria-busy` from the underlying
- * `HTMLAttributes` so a consumer cannot silently turn a callout into a
- * live region. The runtime also scrubs those attributes from rest
- * props for defense in depth — see banner.svelte for the analogous
- * pattern.
+ * (note / tip / warning / danger). Use `semantic="note"` when the visual
+ * surface should expose `role="note"` instead of an `<aside>`. The type omits
+ * `role`, `aria-live`, `aria-atomic`, `aria-relevant`, and `aria-busy` from
+ * the underlying `HTMLAttributes` so a consumer cannot silently turn a
+ * callout into an alert/status live region or arbitrary landmark. The runtime
+ * also scrubs those attributes from rest props for defense in depth — see
+ * banner.svelte for the analogous pattern.
  *
- * The root is `<aside>`. When placed directly inside `<body>`,
+ * The default root is `<aside>`. When placed directly inside `<body>`,
  * `<main>`, or another sectioning landmark, `<aside>` is exposed as a
- * `complementary` landmark; inside `<article>` or `<section>` the
- * landmark role is suppressed and the element behaves as generic
- * sectioning content. When the callout lands at landmark level, supply
- * `title` (used as the accessible name) or pass `aria-label` /
- * `aria-labelledby` so the landmark has a meaningful name.
+ * `complementary` landmark; inside `<article>` or `<section>` the landmark
+ * role is suppressed and the element behaves as generic sectioning content.
+ * When the callout lands at landmark level, supply `title` (used as the
+ * accessible name) or pass `aria-label` / `aria-labelledby` so the landmark
+ * has a meaningful name.
  */
 export type CalloutProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class' | 'role' | 'aria-live' | 'aria-atomic' | 'aria-relevant' | 'aria-busy'> & {
     /** Visual + semantic variant. Default `'info'`. */
     variant?: CalloutVariant;
+    /** Root semantics. Default `'aside'`; use `'note'` for static note semantics without a complementary landmark. */
+    semantic?: CalloutSemantic;
     /**
      * Optional title rendered as a `<p class="cinder-callout__title">`.
      *
@@ -53,7 +65,7 @@ export type CalloutProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class
      *
      * When supplied and no `aria-label` or `aria-labelledby` is passed
      * on rest props, the title also becomes the `aria-label` of the
-     * root `<aside>` so the landmark has an accessible name.
+     * root element so the landmark or note has an accessible name.
      */
     title?: string;
     /**

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

@@ -1,5 +1,5 @@
 import './callout.css';
 import Callout from './callout.svelte';
 export default Callout;
-export type { CalloutProps, CalloutVariant } from './callout.types.ts';
+export type { CalloutProps, CalloutSemantic, CalloutVariant } from './callout.types.ts';
 export { Callout };

package/dist/components/callout/index.js

@@ -64,21 +64,24 @@ function classNames(...parts) {
 }
 
 // src/components/callout/callout.svelte
-var root_1 = $.from_html(`<div class="cinder-callout__icon" aria-hidden="true"><!></div>`);
-var root_2 = $.from_html(`<p class="cinder-callout__title"> </p>`);
-var root = $.from_html(`<aside><!> <div class="cinder-callout__content"><!> <!></div></aside>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "variant",
+  "semantic",
+  "title",
+  "icon",
+  "class",
+  "children"
+]);
+var root = $.from_html(`<div class="cinder-callout__icon" aria-hidden="true"><!></div>`);
+var root_1 = $.from_html(`<p class="cinder-callout__title"> </p>`);
+var root_2 = $.from_html(`<div><!> <div class="cinder-callout__content"><!> <!></div></div>`);
+var root_3 = $.from_html(`<aside><!> <div class="cinder-callout__content"><!> <!></div></aside>`);
 function Callout($$anchor, $$props) {
   $.push($$props, true);
-  let variant = $.prop($$props, "variant", 3, "info"), rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "variant",
-    "title",
-    "icon",
-    "class",
-    "children"
-  ]);
+  let variant = $.prop($$props, "variant", 3, "info"), semantic = $.prop($$props, "semantic", 3, "aside"), rest = $.rest_props($$props, rest_excludes);
   const restWithoutForbidden = $.derived(() => {
     const {
       role: _role,
@@ -91,49 +94,108 @@ function Callout($$anchor, $$props) {
     return filtered;
   });
   const ariaLabel = $.derived(() => rest["aria-labelledby"] ? undefined : rest["aria-label"] ?? $$props.title);
-  var aside = root();
-  $.attribute_effect(aside, ($0) => ({
-    ...$.get(restWithoutForbidden),
-    class: $0,
-    "data-cinder-variant": variant(),
-    "aria-label": $.get(ariaLabel)
-  }), [
-    () => classNames("cinder-callout", "cinder-_status-surface", "cinder-_status-surface-border", "cinder-_status-surface-stripe", $$props.class)
-  ]);
-  var node = $.child(aside);
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
   {
-    var consequent = ($$anchor2) => {
-      var div = root_1();
+    var consequent_2 = ($$anchor2) => {
+      var div = root_2();
+      $.attribute_effect(div, ($0) => ({
+        ...$.get(restWithoutForbidden),
+        class: $0,
+        "data-cinder-variant": variant(),
+        role: "note",
+        "aria-label": $.get(ariaLabel)
+      }), [
+        () => classNames("cinder-callout", "cinder-_status-surface", "cinder-_status-surface-border", "cinder-_status-surface-stripe", $$props.class)
+      ]);
       var node_1 = $.child(div);
-      $.snippet(node_1, () => $$props.icon);
+      {
+        var consequent = ($$anchor3) => {
+          var div_1 = root();
+          var node_2 = $.child(div_1);
+          $.snippet(node_2, () => $$props.icon);
+          $.reset(div_1);
+          $.append($$anchor3, div_1);
+        };
+        $.if(node_1, ($$render) => {
+          if ($$props.icon)
+            $$render(consequent);
+        });
+      }
+      var div_2 = $.sibling(node_1, 2);
+      var node_3 = $.child(div_2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var p = root_1();
+          var text = $.child(p, true);
+          $.reset(p);
+          $.template_effect(() => $.set_text(text, $$props.title));
+          $.append($$anchor3, p);
+        };
+        $.if(node_3, ($$render) => {
+          if ($$props.title)
+            $$render(consequent_1);
+        });
+      }
+      var node_4 = $.sibling(node_3, 2);
+      $.snippet(node_4, () => $$props.children);
+      $.reset(div_2);
       $.reset(div);
       $.append($$anchor2, div);
     };
-    $.if(node, ($$render) => {
-      if ($$props.icon)
-        $$render(consequent);
-    });
-  }
-  var div_1 = $.sibling(node, 2);
-  var node_2 = $.child(div_1);
-  {
-    var consequent_1 = ($$anchor2) => {
-      var p = root_2();
-      var text = $.child(p, true);
-      $.reset(p);
-      $.template_effect(() => $.set_text(text, $$props.title));
-      $.append($$anchor2, p);
+    var alternate = ($$anchor2) => {
+      var aside = root_3();
+      $.attribute_effect(aside, ($0) => ({
+        ...$.get(restWithoutForbidden),
+        class: $0,
+        "data-cinder-variant": variant(),
+        "aria-label": $.get(ariaLabel)
+      }), [
+        () => classNames("cinder-callout", "cinder-_status-surface", "cinder-_status-surface-border", "cinder-_status-surface-stripe", $$props.class)
+      ]);
+      var node_5 = $.child(aside);
+      {
+        var consequent_3 = ($$anchor3) => {
+          var div_3 = root();
+          var node_6 = $.child(div_3);
+          $.snippet(node_6, () => $$props.icon);
+          $.reset(div_3);
+          $.append($$anchor3, div_3);
+        };
+        $.if(node_5, ($$render) => {
+          if ($$props.icon)
+            $$render(consequent_3);
+        });
+      }
+      var div_4 = $.sibling(node_5, 2);
+      var node_7 = $.child(div_4);
+      {
+        var consequent_4 = ($$anchor3) => {
+          var p_1 = root_1();
+          var text_1 = $.child(p_1, true);
+          $.reset(p_1);
+          $.template_effect(() => $.set_text(text_1, $$props.title));
+          $.append($$anchor3, p_1);
+        };
+        $.if(node_7, ($$render) => {
+          if ($$props.title)
+            $$render(consequent_4);
+        });
+      }
+      var node_8 = $.sibling(node_7, 2);
+      $.snippet(node_8, () => $$props.children);
+      $.reset(div_4);
+      $.reset(aside);
+      $.append($$anchor2, aside);
     };
-    $.if(node_2, ($$render) => {
-      if ($$props.title)
-        $$render(consequent_1);
+    $.if(node, ($$render) => {
+      if (semantic() === "note")
+        $$render(consequent_2);
+      else
+        $$render(alternate, -1);
     });
   }
-  var node_3 = $.sibling(node_2, 2);
-  $.snippet(node_3, () => $$props.children);
-  $.reset(div_1);
-  $.reset(aside);
-  $.append($$anchor, aside);
+  $.append($$anchor, fragment);
   $.pop();
 }
 
@@ -144,4 +206,4 @@ export {
   Callout
 };
 
-//# debugId=405C8428A880914D64756E2164756E21
+//# debugId=B133269CCDE5E97A64756E2164756E21