@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/data-list/index.js

@@ -57,26 +57,12 @@ function Data_list($$renderer, $$props) {
     })}>`);
     if (items.length > 0) {
       $$renderer2.push("<!--[0-->");
-      if (key) {
-        $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<!--[-->`);
-        const each_array = $.ensure_array_like(items);
-        for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
-          let entry = each_array[$$index];
-          children($$renderer2, entry);
-          $$renderer2.push(`<!---->`);
-        }
-        $$renderer2.push(`<!--]-->`);
-      } else {
-        $$renderer2.push("<!--[-1-->");
-        $$renderer2.push(`<!--[-->`);
-        const each_array_1 = $.ensure_array_like(items);
-        for (let $$index_1 = 0, $$length = each_array_1.length;$$index_1 < $$length; $$index_1++) {
-          let entry = each_array_1[$$index_1];
-          children($$renderer2, entry);
-          $$renderer2.push(`<!---->`);
-        }
-        $$renderer2.push(`<!--]-->`);
+      $$renderer2.push(`<!--[-->`);
+      const each_array = $.ensure_array_like(items);
+      for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+        let entry = each_array[$$index];
+        children($$renderer2, entry);
+        $$renderer2.push(`<!---->`);
       }
       $$renderer2.push(`<!--]-->`);
     } else if (empty) {
@@ -98,4 +84,4 @@ export {
   Data_list as DataList
 };
 
-//# debugId=1DC24917CF09B75464756E2164756E21
+//# debugId=F15EBEC269BD9B7964756E2164756E21

package/dist/server/components/data-table/index.css

@@ -125,6 +125,14 @@
     z-index: 2;
   }
 
+  @media (forced-colors: active) {
+    .cinder-table__sort-button:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+
   @media (hover: hover) {
     .cinder-table__sort-button:hover {
       background: var(--cinder-surface-hover);
@@ -203,11 +211,23 @@
     block-size: var(--_cinder-data-table-row-height, 44px);
   }
 
+  .cinder-data-table tbody .cinder-table__row:focus-within {
+    background: var(--cinder-surface-hover);
+  }
+
   .cinder-data-table[data-cinder-virtualized] .cinder-table__row[data-cinder-virtual-row]:focus-visible {
     outline: var(--cinder-ring-width) solid transparent;
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-data-table[data-cinder-virtualized] .cinder-table__row[data-cinder-virtual-row]:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: calc(-1 * var(--cinder-ring-width));
+      box-shadow: none;
+    }
+  }
+
   .cinder-data-table__virtual-spacer-cell {
     border: 0;
     padding: 0;

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

@@ -93,10 +93,12 @@ function Table_header_cell($$renderer, $$props) {
     const table = getTableContext();
     const isSortable = $3.derived(() => sortable && !!column);
     const ariaSort = $3.derived(() => isSortable() && table.sort?.column === column ? table.sort?.direction : isSortable() ? "none" : undefined);
+    const nextSortDescription = $3.derived(() => ariaSort() === "ascending" ? "Activate to sort descending" : "Activate to sort ascending");
+    const sortButtonDescriptionAttributes = $3.derived(() => ({ "aria-description": nextSortDescription() }));
     function handleClick() {
       if (!sortable || !column)
         return;
-      table.onSortChange(column);
+      table.onsortchange(column);
     }
     $$renderer2.push(`<th${$3.attributes({
       ...rest,
@@ -108,7 +110,11 @@ function Table_header_cell($$renderer, $$props) {
     })}>`);
     if (isSortable()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<button type="button" class="cinder-table__sort-button">`);
+      $$renderer2.push(`<button${$3.attributes({
+        ...sortButtonDescriptionAttributes(),
+        type: "button",
+        class: "cinder-table__sort-button"
+      })}>`);
       children($$renderer2);
       $$renderer2.push(`<!----> <span class="cinder-table__sort-indicator" aria-hidden="true"${$3.attr("data-cinder-direction", ariaSort())}><svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline class="cinder-table__sort-chevron-up" points="4 7 8 4 12 7"></polyline><polyline class="cinder-table__sort-chevron-down" points="4 9 8 12 12 9"></polyline></svg></span></button>`);
     } else {
@@ -130,13 +136,13 @@ function Table_header($$renderer, $$props) {
       children,
       allSelected,
       someSelected,
-      onSelectAll,
+      onselectall,
       selectAllLabel = "Select all rows"
     } = $$props;
     const table = tryGetTableContext();
     const selectionEnabled = table?.selectionEnabled ?? false;
-    if (selectionEnabled && untrack(() => allSelected === undefined || someSelected === undefined || !onSelectAll)) {
-      throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onSelectAll` are required when Table.selectable is true.");
+    if (selectionEnabled && untrack(() => allSelected === undefined || someSelected === undefined || !onselectall)) {
+      throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onselectall` are required when Table.selectable is true.");
     }
     let hasSelectionHeaderCell = false;
     function claimSelectionHeaderCell() {
@@ -153,8 +159,8 @@ function Table_header($$renderer, $$props) {
       get someSelected() {
         return someSelected ?? false;
       },
-      get onSelectAll() {
-        return onSelectAll ?? (() => {});
+      get onselectall() {
+        return onselectall ?? (() => {});
       },
       get selectAllLabel() {
         return selectAllLabel;
@@ -189,7 +195,7 @@ function Table_row($$renderer, $$props) {
       class: className,
       children,
       selected,
-      onSelectedChange,
+      onselectedchange,
       selectionLabel,
       selectionDisabled,
       $$slots,
@@ -205,12 +211,12 @@ function Table_row($$renderer, $$props) {
         const hasDisabled = selectionDisabled === true;
         if (!hasDisabled) {
           const hasSelected = selected !== undefined;
-          const hasOnChange = onSelectedChange !== undefined;
+          const hasOnChange = onselectedchange !== undefined;
           const hasLabel = selectionLabel !== undefined;
           if (!hasSelected || !hasOnChange || !hasLabel) {
-            throw new Error("[Cinder] TableRow: when Table.selectable is true, each body row must supply " + "selected + onSelectedChange + selectionLabel together, or set selectionDisabled={true}. " + `Missing: ${[
+            throw new Error("[Cinder] TableRow: when Table.selectable is true, each body row must supply " + "selected + onselectedchange + selectionLabel together, or set selectionDisabled={true}. " + `Missing: ${[
               !hasSelected && "selected",
-              !hasOnChange && "onSelectedChange",
+              !hasOnChange && "onselectedchange",
               !hasLabel && "selectionLabel"
             ].filter(Boolean).join(", ")}.`);
           }
@@ -222,11 +228,11 @@ function Table_row($$renderer, $$props) {
     }
     function handleSelectAllChange(event) {
       const input = event.currentTarget;
-      headerSelection?.onSelectAll(input.checked);
+      headerSelection?.onselectall(input.checked);
     }
     function handleRowChange(event) {
       const input = event.currentTarget;
-      onSelectedChange?.(input.checked);
+      onselectedchange?.(input.checked);
     }
     const shouldRenderHeaderSelectionCell = selectionEnabled && section === "header" && headerSelection !== undefined;
     if (shouldRenderHeaderSelectionCell) {
@@ -306,7 +312,7 @@ function Table($$renderer, $$props) {
         return;
       captionHeight = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
     }, { box: "border-box", enabled: () => stickyHeader });
-    function onSortChange(column) {
+    function onsortchange(column) {
       if (!sort || sort.column !== column) {
         sort = { column, direction: "ascending" };
         return;
@@ -323,7 +329,7 @@ function Table($$renderer, $$props) {
       get selectionEnabled() {
         return selectable;
       },
-      onSortChange
+      onsortchange
     });
     $$renderer2.push(`<table${$7.attributes({
       ...rest,
@@ -481,6 +487,10 @@ function Data_table($$renderer, $$props) {
         return "center";
       return;
     }
+    const observeWrapperResize = useResizeObserver(() => {
+      if (wrapperElement && shouldVirtualizeRows())
+        syncScrollMetrics(wrapperElement);
+    });
     function estimateViewportHeight(value, fallbackRowHeight) {
       return parsePixelLength(value) ?? fallbackRowHeight * 10;
     }
@@ -713,4 +723,4 @@ export {
   Data_table as DataTable
 };
 
-//# debugId=74EE5DCC206C592D64756E2164756E21
+//# debugId=4B628CD59DDF2ADA64756E2164756E21

package/dist/server/components/date-range-field/date-range-field.schema.js

@@ -17,11 +17,15 @@ var schema = {
     },
     startLabel: {
       type: "string",
-      description: 'Accessible label for the start date input. Defaults to "Start date".'
+      description: 'Accessible label for the start input. Defaults to "Start date" for day granularity and "Start date and time" for datetime granularities.'
     },
     endLabel: {
       type: "string",
-      description: 'Accessible label for the end date input. Defaults to "End date".'
+      description: 'Accessible label for the end input. Defaults to "End date" for day granularity and "End date and time" for datetime granularities.'
+    },
+    granularity: {
+      enum: ["day", "hour", "minute", "second"],
+      description: "Date-time precision. Defaults to day precision."
     },
     hidePresets: {
       type: "boolean",
@@ -73,4 +77,4 @@ export {
   date_range_field_schema_default as default
 };
 
-//# debugId=90D342CCEA96B91064756E2164756E21
+//# debugId=D32201331B9495B164756E2164756E21

package/dist/server/components/date-range-field/index.js

@@ -56,8 +56,9 @@ function Date_range_field($$renderer, $$props) {
       id,
       value = { start: undefined, end: undefined },
       label,
-      startLabel = "Start date",
-      endLabel = "End date",
+      startLabel,
+      endLabel,
+      granularity = "day",
       presets,
       hidePresets = false,
       description,
@@ -76,7 +77,10 @@ function Date_range_field($$renderer, $$props) {
         label: "Today",
         resolve: () => {
           const now = new Date;
-          return { start: toISODate(now), end: toISODate(now) };
+          return {
+            start: formatDateRangePresetValue(startOfDay(now), granularity),
+            end: formatDateRangePresetEndValue(now, granularity)
+          };
         }
       },
       {
@@ -86,7 +90,10 @@ function Date_range_field($$renderer, $$props) {
           const now = new Date;
           const yesterday = new Date(now);
           yesterday.setDate(now.getDate() - 1);
-          return { start: toISODate(yesterday), end: toISODate(now) };
+          return {
+            start: formatDateRangePresetValue(startOfDay(yesterday), granularity),
+            end: formatDateRangePresetEndValue(now, granularity)
+          };
         }
       },
       {
@@ -96,11 +103,15 @@ function Date_range_field($$renderer, $$props) {
           const now = new Date;
           const sixDaysAgo = new Date(now);
           sixDaysAgo.setDate(now.getDate() - 6);
-          return { start: toISODate(sixDaysAgo), end: toISODate(now) };
+          return {
+            start: formatDateRangePresetValue(startOfDay(sixDaysAgo), granularity),
+            end: formatDateRangePresetEndValue(now, granularity)
+          };
         }
       }
     ];
     const resolvedPresets = $.derived(() => presets ?? defaultPresets);
+    let selectedPresetSnapshot = null;
     const rootId = $.derived(() => id ?? generatedId);
     const startId = $.derived(() => `${rootId()}-start`);
     const endId = $.derived(() => `${rootId()}-end`);
@@ -109,9 +120,19 @@ function Date_range_field($$renderer, $$props) {
     const errId = $.derived(() => errorId(rootId(), !!error));
     const describedBy = $.derived(() => composeDescribedBy(descriptionId(), errId(), consumerDescribedBy));
     const activePresetId = $.derived(() => {
+      const normalizedValue2 = normalizeDateRangeValue(value, granularity);
+      const snapshot = selectedPresetSnapshot;
+      if (snapshot && dateRangeValuesMatch(snapshot.value, normalizedValue2)) {
+        const selectedPreset = resolvedPresets().find((preset) => {
+          return preset.id === snapshot.id && preset === snapshot.preset;
+        });
+        if (selectedPreset) {
+          return snapshot.id;
+        }
+      }
       const match = resolvedPresets().find((preset) => {
-        const resolved = preset.resolve();
-        return resolved.start === value.start && resolved.end === value.end;
+        const resolved = normalizeDateRangeValue(preset.resolve(), granularity);
+        return dateRangeValuesMatch(resolved, normalizedValue2);
       });
       return match?.id;
     });
@@ -121,22 +142,135 @@ function Date_range_field($$renderer, $$props) {
       const day = String(d.getDate()).padStart(2, "0");
       return `${year}-${month}-${day}`;
     }
+    function startOfDay(date) {
+      const next = new Date(date);
+      next.setHours(0, 0, 0, 0);
+      return next;
+    }
+    function toISODateTime(date, nextGranularity) {
+      const hours = String(date.getHours()).padStart(2, "0");
+      const minutes = String(date.getMinutes()).padStart(2, "0");
+      if (nextGranularity === "hour")
+        return `${toISODate(date)}T${hours}:00`;
+      const base = `${toISODate(date)}T${hours}:${minutes}`;
+      if (nextGranularity === "second") {
+        return `${base}:${String(date.getSeconds()).padStart(2, "0")}`;
+      }
+      return base;
+    }
+    function formatDateRangePresetValue(date, nextGranularity) {
+      return nextGranularity === "day" ? toISODate(date) : toISODateTime(date, nextGranularity);
+    }
+    function endOfActiveHour(date) {
+      const next = new Date(date);
+      if (next.getMinutes() > 0 || next.getSeconds() > 0 || next.getMilliseconds() > 0) {
+        next.setHours(Math.min(next.getHours() + 1, 23), 0, 0, 0);
+      }
+      return next;
+    }
+    function formatDateRangePresetEndValue(date, nextGranularity) {
+      return formatDateRangePresetValue(nextGranularity === "hour" ? endOfActiveHour(date) : date, nextGranularity);
+    }
+    function dateRangeValuesMatch(left, right) {
+      return left.start === right.start && left.end === right.end;
+    }
+    function inputTypeFor(nextGranularity) {
+      return nextGranularity === "day" ? "date" : "datetime-local";
+    }
+    function inputStepFor(nextGranularity) {
+      if (nextGranularity === "hour")
+        return 3600;
+      if (nextGranularity === "minute")
+        return 60;
+      if (nextGranularity === "second")
+        return 1;
+      return;
+    }
+    function isLeapYear(year) {
+      return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+    }
+    function daysInMonth(year, month) {
+      if (month === 2)
+        return isLeapYear(year) ? 29 : 28;
+      if ([4, 6, 9, 11].includes(month))
+        return 30;
+      return 31;
+    }
+    function isValidDatePart(datePart) {
+      const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(datePart);
+      if (!match)
+        return false;
+      const [, rawYear, rawMonth, rawDay] = match;
+      const year = Number(rawYear);
+      const month = Number(rawMonth);
+      const day = Number(rawDay);
+      return month >= 1 && month <= 12 && day >= 1 && day <= daysInMonth(year, month);
+    }
+    function isValidTimePart(timePart) {
+      const match = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(timePart);
+      if (!match)
+        return false;
+      const [, rawHour, rawMinute, rawSecond = "00"] = match;
+      const hour = Number(rawHour);
+      const minute = Number(rawMinute);
+      const second = Number(rawSecond);
+      return hour <= 23 && minute <= 59 && second <= 59;
+    }
+    function normalizeInputValue(nextValue, nextGranularity) {
+      if (!nextValue)
+        return;
+      const datePart = nextValue.slice(0, 10);
+      if (!isValidDatePart(datePart))
+        return;
+      if (nextGranularity === "day")
+        return datePart;
+      const timePart = nextValue.length === 10 ? "00:00" : nextValue[10] === "T" ? nextValue.slice(11) : undefined;
+      if (!timePart)
+        return;
+      if (!isValidTimePart(timePart))
+        return;
+      const [rawHour = "00", rawMinute = "00", rawSecond = "00"] = timePart.split(":");
+      const hour = rawHour.padStart(2, "0").slice(0, 2);
+      const minute = rawMinute.padStart(2, "0").slice(0, 2);
+      const second = rawSecond.padStart(2, "0").slice(0, 2);
+      if (nextGranularity === "hour")
+        return `${datePart}T${hour}:00`;
+      if (nextGranularity === "minute")
+        return `${datePart}T${hour}:${minute}`;
+      return `${datePart}T${hour}:${minute}:${second}`;
+    }
+    function normalizeDateRangeValue(nextValue, nextGranularity) {
+      return {
+        start: nextValue.start ? normalizeInputValue(nextValue.start, nextGranularity) : undefined,
+        end: nextValue.end ? normalizeInputValue(nextValue.end, nextGranularity) : undefined
+      };
+    }
+    const inputType = $.derived(() => inputTypeFor(granularity));
+    const inputStep = $.derived(() => inputStepFor(granularity));
+    const normalizedValue = $.derived(() => normalizeDateRangeValue(value, granularity));
+    const defaultStartLabel = $.derived(() => granularity === "day" ? "Start date" : "Start date and time");
+    const defaultEndLabel = $.derived(() => granularity === "day" ? "End date" : "End date and time");
+    const resolvedStartLabel = $.derived(() => startLabel ?? defaultStartLabel());
+    const resolvedEndLabel = $.derived(() => endLabel ?? defaultEndLabel());
     function handlePresetClick(preset) {
       if (disabled)
         return;
-      const next = preset.resolve();
+      const next = normalizeDateRangeValue(preset.resolve(), granularity);
+      selectedPresetSnapshot = { id: preset.id, preset, value: next };
       value = next;
       onchange?.(next);
     }
     function handleStartChange(event) {
       const target = event.target;
-      const next = { start: target.value || undefined, end: value.end };
+      const next = normalizeDateRangeValue({ start: target.value, end: value.end }, granularity);
+      selectedPresetSnapshot = null;
       value = next;
       onchange?.(next);
     }
     function handleEndChange(event) {
       const target = event.target;
-      const next = { start: value.start, end: target.value || undefined };
+      const next = normalizeDateRangeValue({ start: value.start, end: target.value }, granularity);
+      selectedPresetSnapshot = null;
       value = next;
       onchange?.(next);
     }
@@ -167,7 +301,7 @@ function Date_range_field($$renderer, $$props) {
     } else {
       $$renderer2.push("<!--[-1-->");
     }
-    $$renderer2.push(`<!--]--> <div class="cinder-date-range-field__inputs"><div class="cinder-date-range-field__input-group"><label${$.attr("for", startId())} class="cinder-date-range-field__input-label"${$.attr("data-disabled", disabled || undefined)}>${$.escape(startLabel)}</label> <input${$.attr("id", startId())} type="date" class="cinder-date-range-field__date-input"${$.attr("value", value.start ?? "")}${$.attr("max", value.end ?? undefined)}${$.attr("disabled", disabled, true)}${$.attr("aria-invalid", invalid())}${$.attr("aria-describedby", describedBy())}/></div> <span class="cinder-date-range-field__separator" aria-hidden="true">–</span> <div class="cinder-date-range-field__input-group"><label${$.attr("for", endId())} class="cinder-date-range-field__input-label"${$.attr("data-disabled", disabled || undefined)}>${$.escape(endLabel)}</label> <input${$.attr("id", endId())} type="date" class="cinder-date-range-field__date-input"${$.attr("value", value.end ?? "")}${$.attr("min", value.start ?? undefined)}${$.attr("disabled", disabled, true)}${$.attr("aria-invalid", invalid())}${$.attr("aria-describedby", describedBy())}/></div></div> `);
+    $$renderer2.push(`<!--]--> <div class="cinder-date-range-field__inputs"><div class="cinder-date-range-field__input-group"><label${$.attr("for", startId())} class="cinder-date-range-field__input-label"${$.attr("data-disabled", disabled || undefined)}>${$.escape(resolvedStartLabel())}</label> <input${$.attr("id", startId())}${$.attr("type", inputType())} class="cinder-date-range-field__date-input"${$.attr("value", normalizedValue().start ?? "")}${$.attr("max", normalizedValue().end ?? undefined)}${$.attr("step", inputStep())}${$.attr("disabled", disabled, true)}${$.attr("aria-invalid", invalid())}${$.attr("aria-describedby", describedBy())}/></div> <span class="cinder-date-range-field__separator" aria-hidden="true">–</span> <div class="cinder-date-range-field__input-group"><label${$.attr("for", endId())} class="cinder-date-range-field__input-label"${$.attr("data-disabled", disabled || undefined)}>${$.escape(resolvedEndLabel())}</label> <input${$.attr("id", endId())}${$.attr("type", inputType())} class="cinder-date-range-field__date-input"${$.attr("value", normalizedValue().end ?? "")}${$.attr("min", normalizedValue().start ?? undefined)}${$.attr("step", inputStep())}${$.attr("disabled", disabled, true)}${$.attr("aria-invalid", invalid())}${$.attr("aria-describedby", describedBy())}/></div></div> `);
     if (description) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<p${$.attr("id", descriptionId())} class="cinder-date-range-field__description">${$.escape(description)}</p>`);
@@ -186,4 +320,4 @@ export {
   Date_range_field as DateRangeField
 };
 
-//# debugId=3A4A816880FCA42A64756E2164756E21
+//# debugId=F5F8F3A401884B1764756E2164756E21

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

@@ -482,25 +482,92 @@ import * as $10 from "svelte/internal/server";
 import * as $6 from "svelte/internal/server";
 function Badge($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
+    const subscriptionStateConfigurations = {
+      active: { variant: "success", label: "Active" },
+      trialing: { variant: "info", label: "Trialing" },
+      "past-due": { variant: "warning", label: "Past due" },
+      canceled: { variant: "neutral", label: "Canceled" },
+      expired: { variant: "danger", label: "Expired" },
+      refunded: { variant: "neutral", label: "Refunded" }
+    };
+    const subscriptionStateIconPaths = {
+      active: ["M21.801 10A10 10 0 1 1 17 3.335", "m9 11 3 3L22 4"],
+      trialing: ["M12 6v6l4 2", "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"],
+      "past-due": [
+        "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",
+        "M12 9v4",
+        "M12 17h.01"
+      ],
+      canceled: [
+        "M15 9 9 15",
+        "M9 9l6 6",
+        "M22 12A10 10 0 1 1 12 2a10 10 0 0 1 10 10Z"
+      ],
+      expired: [
+        "M8 2v4",
+        "M16 2v4",
+        "M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8",
+        "M3 10h18",
+        "m17 14-5-5",
+        "m12 14 5 5"
+      ],
+      refunded: [
+        "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+        "M3 3v5h5"
+      ]
+    };
     let {
       variant = "neutral",
       size = "md",
       mono = false,
+      subscriptionState,
       class: customClassName,
       children,
       $$slots,
       $$events,
       ...rest
     } = $$props;
+    const subscriptionStateConfiguration = $6.derived(() => subscriptionState === undefined ? undefined : subscriptionStateConfigurations[subscriptionState]);
+    const resolvedVariant = $6.derived(() => subscriptionStateConfiguration()?.variant ?? variant);
+    const resolvedSubscriptionIconPaths = $6.derived(() => subscriptionState === undefined ? undefined : subscriptionStateIconPaths[subscriptionState]);
     $$renderer2.push(`<span${$6.attributes({
       class: $6.clsx(classNames("cinder-badge", customClassName)),
-      "data-cinder-variant": variant,
+      "data-cinder-variant": resolvedVariant(),
       "data-cinder-size": size,
       "data-cinder-mono": mono ? "" : undefined,
+      "data-cinder-subscription-state": subscriptionState,
       ...rest
     })}>`);
-    children?.($$renderer2);
-    $$renderer2.push(`<!----></span>`);
+    if (subscriptionStateConfiguration()) {
+      $$renderer2.push("<!--[0-->");
+      if (resolvedSubscriptionIconPaths()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<svg class="icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><!--[-->`);
+        const each_array = $6.ensure_array_like(resolvedSubscriptionIconPaths());
+        for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+          let iconPath = each_array[$$index];
+          $$renderer2.push(`<path${$6.attr("d", iconPath)}></path>`);
+        }
+        $$renderer2.push(`<!--]--></svg>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (children) {
+        $$renderer2.push("<!--[0-->");
+        children($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`${$6.escape(subscriptionStateConfiguration().label)}`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      children?.($$renderer2);
+      $$renderer2.push(`<!---->`);
+    }
+    $$renderer2.push(`<!--]--></span>`);
   });
 }
 
@@ -664,6 +731,11 @@ function Diff_line($$renderer, $$props) {
       return true;
     });
     const isInteractive = $11.derived(() => diff.type !== "same" && onselect !== undefined);
+    const accessibleLineLabel = $11.derived(() => {
+      const text = diff.type === "modified" ? viewMode === "original" ? diff.oldText : viewMode === "final" ? diff.newText : `${diff.oldText} changed to ${diff.newText}` : diff.text;
+      const typeLabel = diff.type === "added" ? "Added line" : diff.type === "removed" ? "Removed line" : "Modified line";
+      return `${typeLabel}: ${text || "blank line"}`;
+    });
     if (isVisible()) {
       $$renderer2.push("<!--[0-->");
       if (diff.type === "same") {
@@ -673,7 +745,7 @@ function Diff_line($$renderer, $$props) {
         $$renderer2.push("<!--[1-->");
         if (isInteractive()) {
           $$renderer2.push("<!--[0-->");
-          $$renderer2.push(`<button${$11.attr_class($11.clsx(classNames("diff-line diff-line-added", className)), "svelte-hc3elb")}${$11.attr("data-selected", selected)} type="button"><span class="diff-gutter svelte-hc3elb">+</span> <span class="diff-text svelte-hc3elb">${$11.escape(diff.text || " ")}</span></button>`);
+          $$renderer2.push(`<button${$11.attr_class($11.clsx(classNames("diff-line diff-line-added", className)), "svelte-hc3elb")}${$11.attr("data-selected", selected)}${$11.attr("aria-label", accessibleLineLabel())} type="button"><span class="diff-gutter svelte-hc3elb">+</span> <span class="diff-text svelte-hc3elb">${$11.escape(diff.text || " ")}</span></button>`);
         } else {
           $$renderer2.push("<!--[-1-->");
           $$renderer2.push(`<div${$11.attr_class($11.clsx(classNames("diff-line diff-line-added", className)), "svelte-hc3elb")}${$11.attr("data-selected", selected)}><span class="diff-gutter svelte-hc3elb">+</span> <span class="diff-text svelte-hc3elb">${$11.escape(diff.text || " ")}</span></div>`);
@@ -684,7 +756,7 @@ function Diff_line($$renderer, $$props) {
         const showStrikethrough = viewMode === "unified";
         if (isInteractive()) {
           $$renderer2.push("<!--[0-->");
-          $$renderer2.push(`<button${$11.attr_class($11.clsx(classNames("diff-line", showStrikethrough ? "diff-line-removed" : "diff-line-removed-original", className)), "svelte-hc3elb")}${$11.attr("data-selected", selected)} type="button"><span class="diff-gutter svelte-hc3elb">${$11.escape(showStrikethrough ? "-" : "")}</span> <span class="diff-text svelte-hc3elb">`);
+          $$renderer2.push(`<button${$11.attr_class($11.clsx(classNames("diff-line", showStrikethrough ? "diff-line-removed" : "diff-line-removed-original", className)), "svelte-hc3elb")}${$11.attr("data-selected", selected)}${$11.attr("aria-label", accessibleLineLabel())} type="button"><span class="diff-gutter svelte-hc3elb">${$11.escape(showStrikethrough ? "-" : "")}</span> <span class="diff-text svelte-hc3elb">`);
           if (showStrikethrough) {
             $$renderer2.push("<!--[0-->");
             $$renderer2.push(`<del class="svelte-hc3elb">${$11.escape(diff.text || " ")}</del>`);
@@ -712,7 +784,7 @@ function Diff_line($$renderer, $$props) {
         const displayText = viewMode === "unified" ? null : viewMode === "final" ? diff.newText : diff.oldText;
         if (isInteractive()) {
           $$renderer2.push("<!--[0-->");
-          $$renderer2.push(`<button${$11.attr_class($11.clsx(classNames("diff-line", lineClass, className)), "svelte-hc3elb")}${$11.attr("data-selected", selected)} type="button"><span class="diff-gutter svelte-hc3elb">~</span> <span class="diff-text svelte-hc3elb">`);
+          $$renderer2.push(`<button${$11.attr_class($11.clsx(classNames("diff-line", lineClass, className)), "svelte-hc3elb")}${$11.attr("data-selected", selected)}${$11.attr("aria-label", accessibleLineLabel())} type="button"><span class="diff-gutter svelte-hc3elb">~</span> <span class="diff-text svelte-hc3elb">`);
           if (viewMode === "unified") {
             $$renderer2.push("<!--[0-->");
             if (wordChangeRenderer) {
@@ -1876,4 +1948,4 @@ export {
   Diff_viewer as DiffViewer
 };
 
-//# debugId=CC9A12096F8D766664756E2164756E21
+//# debugId=B1146CBD5B19F30964756E2164756E21