@lostgradient/cinder 0.4.0 → 0.4.1

package/dist/server/index.server-ezn8d6zv.js

@@ -0,0 +1,285 @@
+import {
+  ChartInteraction,
+  DEFAULT_CHART_FOCUS_RING_STROKE_PADDING,
+  createPointFocusRingGeometry
+} from "./index.server-gw4atb82.js";
+import {
+  chartPaletteColor,
+  createCartesianModel,
+  dataTableClass,
+  formatNumericValue,
+  legendVisible
+} from "./index.server-chj73na5.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/area-chart/area-chart.svelte
+import * as $ from "svelte/internal/server";
+function Area_chart($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const generatedId = $.props_id($$renderer2);
+    let {
+      label,
+      description,
+      series,
+      mode = "single",
+      height = 280,
+      xAxis,
+      yAxis,
+      legendPosition = "top",
+      hiddenSeriesIds = [],
+      loading = false,
+      dataTableCaption,
+      dataTableVisibility = "screen-reader-only",
+      maximumInteractivePoints = 500,
+      class: customClassName,
+      empty,
+      loadingContent,
+      id,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const rootId = $.derived(() => id ?? generatedId);
+    const descriptionId = $.derived(() => description ? `${rootId()}-description` : undefined);
+    const interaction = new ChartInteraction;
+    let rootElement = undefined;
+    const model = $.derived(() => createCartesianModel({
+      componentId: "area-chart",
+      series,
+      hiddenSeriesIds,
+      width: interaction.measuredWidth,
+      height,
+      xAxis,
+      yAxis,
+      stackedArea: mode === "stacked"
+    }));
+    const keyboardEnabled = $.derived(() => model().targets.length > 0 && model().targets.length <= maximumInteractivePoints);
+    const hasDataTable = $.derived(() => dataTableVisibility !== "hidden");
+    const guidanceId = $.derived(() => !keyboardEnabled() && hasDataTable() && model().targets.length > 0 ? `${rootId()}-table-guidance` : undefined);
+    const focusedTarget = $.derived(() => {
+      const currentTarget = interaction.focusedTarget;
+      if (!currentTarget)
+        return;
+      return model().targets.find((target) => target.id === currentTarget.id);
+    });
+    let keyboardFocusModality = false;
+    let focusVisibleTargetId = undefined;
+    const focusRingTarget = $.derived(() => keyboardFocusModality && focusedTarget() && focusVisibleTargetId === focusedTarget().id ? focusedTarget() : undefined);
+    const pointFocusRing = $.derived(() => focusRingTarget() ? createPointFocusRingGeometry({
+      target: focusRingTarget(),
+      plotWidth: model().geometry.plotWidth,
+      plotHeight: model().geometry.plotHeight,
+      strokePadding: DEFAULT_CHART_FOCUS_RING_STROKE_PADDING
+    }) : null);
+    function rememberKeyboardFocusModality(event) {
+      if (event.key === "Tab" || event.key === "Home" || event.key === "End" || event.key.startsWith("Arrow")) {
+        keyboardFocusModality = true;
+      }
+    }
+    function clearKeyboardFocusModality() {
+      keyboardFocusModality = false;
+      focusVisibleTargetId = undefined;
+    }
+    function handleTargetFocus(target) {
+      interaction.focusedTarget = target;
+      focusVisibleTargetId = keyboardFocusModality ? target.id : undefined;
+    }
+    function handleTargetBlur() {
+      interaction.focusedTarget = undefined;
+      focusVisibleTargetId = undefined;
+    }
+    function handleTargetKeydown(event) {
+      rememberKeyboardFocusModality(event);
+      interaction.activateByKeyboard(event, rootElement, model().targets, keyboardEnabled());
+    }
+    $$renderer2.push(`<figure${$.attributes({
+      ...rest,
+      id: rootId(),
+      class: $.clsx(classNames("cinder-area-chart", customClassName)),
+      "aria-label": label,
+      "aria-describedby": descriptionId(),
+      "data-cinder-mode": mode
+    })}>`);
+    if (description) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p${$.attr("id", descriptionId())} class="cinder-area-chart__description">${$.escape(description)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (legendVisible(legendPosition, series.length) && legendPosition === "top") {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-area-chart__legend" aria-label="Series"><!--[-->`);
+      const each_array = $.ensure_array_like(series);
+      for (let index = 0, $$length = each_array.length;index < $$length; index++) {
+        let item = each_array[index];
+        $$renderer2.push(`<button type="button"${$.attr("aria-pressed", !hiddenSeriesIds.includes(item.id))}><span${$.attr_style("", { background: item.color ?? chartPaletteColor(index) })}></span>${$.escape(item.label)}</button>`);
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <div class="cinder-area-chart__viewport"${$.attr("data-cinder-loading", loading || undefined)}${$.attr_style("", { height: `${$.stringify(height)}px` })}>`);
+    if (loading) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-area-chart__state">`);
+      if (loadingContent) {
+        $$renderer2.push("<!--[0-->");
+        loadingContent($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`Loading chart…`);
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else if (model().empty) {
+      $$renderer2.push("<!--[1-->");
+      $$renderer2.push(`<div class="cinder-area-chart__state">`);
+      if (empty) {
+        $$renderer2.push("<!--[0-->");
+        empty($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`No chart data`);
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <svg${$.attr("viewBox", `0 0 ${interaction.measuredWidth} ${height}`)}${$.attr("aria-hidden", loading || model().empty ? "true" : undefined)}${$.attr("aria-labelledby", !loading && !model().empty ? `${rootId()}-svg-title` : undefined)}>`);
+    if (!loading && !model().empty) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<title${$.attr("id", `${$.stringify(rootId())}-svg-title`)}>${$.escape(label)}</title>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--><g${$.attr("transform", `translate(${model().geometry.marginLeft}, ${model().geometry.marginTop})`)}><!--[-->`);
+    const each_array_1 = $.ensure_array_like(model().yTicks);
+    for (let index = 0, $$length = each_array_1.length;index < $$length; index++) {
+      let tick = each_array_1[index];
+      const tickY = model().geometry.plotHeight - (tick - model().yDomain[0]) / (model().yDomain[1] - model().yDomain[0]) * model().geometry.plotHeight;
+      $$renderer2.push(`<line class="cinder-area-chart__gridline" x1="0"${$.attr("x2", model().geometry.plotWidth)}${$.attr("y1", tickY)}${$.attr("y2", tickY)} aria-hidden="true"></line><text class="cinder-area-chart__tick-label" x="-8"${$.attr("y", tickY)} text-anchor="end" dominant-baseline="middle">${$.escape(formatNumericValue(tick, yAxis, undefined, { index }))}</text>`);
+    }
+    $$renderer2.push(`<!--]--><!--[-->`);
+    const each_array_2 = $.ensure_array_like(model().xTicks);
+    for (let $$index_2 = 0, $$length = each_array_2.length;$$index_2 < $$length; $$index_2++) {
+      let tick = each_array_2[$$index_2];
+      $$renderer2.push(`<text class="cinder-area-chart__tick-label"${$.attr("x", tick.x)}${$.attr("y", model().geometry.plotHeight + 20)} text-anchor="middle">${$.escape(tick.label)}</text>`);
+    }
+    $$renderer2.push(`<!--]--><!--[-->`);
+    const each_array_3 = $.ensure_array_like(model().normalizedSeries);
+    for (let $$index_3 = 0, $$length = each_array_3.length;$$index_3 < $$length; $$index_3++) {
+      let item = each_array_3[$$index_3];
+      if (!item.hidden && item.areaPath) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<path class="cinder-area-chart__area"${$.attr("d", item.areaPath)}${$.attr("fill", item.color)} aria-hidden="true"${$.attr("data-cinder-series", item.id)}></path><path class="cinder-area-chart__line"${$.attr("d", item.path)}${$.attr("stroke", item.color)} aria-hidden="true"${$.attr("data-cinder-series", item.id)}></path>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]-->`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    if (interaction.activeTarget) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<line class="cinder-area-chart__crosshair"${$.attr("x1", interaction.activeTarget.x)}${$.attr("x2", interaction.activeTarget.x)} y1="0"${$.attr("y2", model().geometry.plotHeight)} aria-hidden="true"></line>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    if (model().targets.length > 0) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<rect class="cinder-area-chart__hit-surface" role="presentation"${$.attr("width", model().geometry.plotWidth)}${$.attr("height", model().geometry.plotHeight)}></rect>`);
+      if (keyboardEnabled()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<!--[-->`);
+        const each_array_4 = $.ensure_array_like(model().targets);
+        for (let $$index_4 = 0, $$length = each_array_4.length;$$index_4 < $$length; $$index_4++) {
+          let target = each_array_4[$$index_4];
+          $$renderer2.push(`<circle class="cinder-area-chart__focus-target"${$.attr("cx", target.x)}${$.attr("cy", target.y)} r="8" tabindex="0" role="button"${$.attr("data-cinder-target-id", target.id)}${$.attr("data-cinder-series-id", target.seriesId)}${$.attr("data-cinder-focus-ring-active", pointFocusRing() && focusRingTarget()?.id === target.id ? "true" : undefined)}${$.attr("aria-label", `${target.seriesLabel}, ${target.xLabel}, ${target.valueLabel}`)}${$.attr("aria-describedby", interaction.activeTarget?.id === target.id ? `${rootId()}-tooltip` : undefined)}></circle>`);
+        }
+        $$renderer2.push(`<!--]-->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    if (pointFocusRing()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<g class="cinder-area-chart__focus-ring-layer" aria-hidden="true">`);
+      if (pointFocusRing().kind === "point") {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<circle class="cinder-area-chart__focus-ring-halo"${$.attr("cx", pointFocusRing().cx)}${$.attr("cy", pointFocusRing().cy)}${$.attr("r", pointFocusRing().radius)}></circle><circle class="cinder-area-chart__focus-ring"${$.attr("cx", pointFocusRing().cx)}${$.attr("cy", pointFocusRing().cy)}${$.attr("r", pointFocusRing().radius)}></circle>`);
+        if (pointFocusRing().connector && pointFocusRing().dot) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<path class="cinder-area-chart__focus-ring-connector cinder-area-chart__focus-ring-halo"${$.attr("d", `M ${pointFocusRing().connector.x1} ${pointFocusRing().connector.y1} L ${pointFocusRing().connector.x2} ${pointFocusRing().connector.y2}`)}></path><path class="cinder-area-chart__focus-ring-connector cinder-area-chart__focus-ring"${$.attr("d", `M ${pointFocusRing().connector.x1} ${pointFocusRing().connector.y1} L ${pointFocusRing().connector.x2} ${pointFocusRing().connector.y2}`)}></path><circle class="cinder-area-chart__focus-ring-dot cinder-area-chart__focus-ring-halo"${$.attr("cx", pointFocusRing().dot.cx)}${$.attr("cy", pointFocusRing().dot.cy)}${$.attr("r", pointFocusRing().dot.radius)}></circle><circle class="cinder-area-chart__focus-ring-dot cinder-area-chart__focus-ring"${$.attr("cx", pointFocusRing().dot.cx)}${$.attr("cy", pointFocusRing().dot.cy)}${$.attr("r", pointFocusRing().dot.radius)}></circle>`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]-->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<rect class="cinder-area-chart__focus-ring-halo"${$.attr("x", pointFocusRing().x)}${$.attr("y", pointFocusRing().y)}${$.attr("width", pointFocusRing().width)}${$.attr("height", pointFocusRing().height)}${$.attr("rx", pointFocusRing().radius)}></rect><rect class="cinder-area-chart__focus-ring"${$.attr("x", pointFocusRing().x)}${$.attr("y", pointFocusRing().y)}${$.attr("width", pointFocusRing().width)}${$.attr("height", pointFocusRing().height)}${$.attr("rx", pointFocusRing().radius)}></rect>`);
+      }
+      $$renderer2.push(`<!--]--></g>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></g></svg> `);
+    if (interaction.activeTarget) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div${$.attr("id", `${$.stringify(rootId())}-tooltip`)} role="tooltip" class="cinder-area-chart__tooltip"${$.attr_style("", {
+        left: `${$.stringify(model().geometry.marginLeft + interaction.activeTarget.x)}px`,
+        top: `${$.stringify(model().geometry.marginTop + interaction.activeTarget.y)}px`
+      })}><strong>${$.escape(interaction.activeTarget.seriesLabel)}</strong><span>${$.escape(interaction.activeTarget.xLabel)}: ${$.escape(interaction.activeTarget.valueLabel)}</span></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div> `);
+    if (guidanceId()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p${$.attr("id", guidanceId())} class="cinder-sr-only">Use the data table to inspect this chart with a keyboard.</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (hasDataTable()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<table${$.attr_class($.clsx(dataTableClass(dataTableVisibility)))}${$.attr("aria-describedby", guidanceId())}><caption>${$.escape(dataTableCaption ?? label)}</caption><thead><tr><th scope="col">Series</th><th scope="col">X</th><th scope="col">Value</th></tr></thead><tbody><!--[-->`);
+      const each_array_5 = $.ensure_array_like(model().tableRows);
+      for (let $$index_5 = 0, $$length = each_array_5.length;$$index_5 < $$length; $$index_5++) {
+        let row = each_array_5[$$index_5];
+        $$renderer2.push(`<tr><th scope="row">${$.escape(row.seriesLabel)}</th><td>${$.escape(row.xLabel)}</td><td>${$.escape(row.valueLabel)}</td></tr>`);
+      }
+      $$renderer2.push(`<!--]--></tbody></table>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (legendVisible(legendPosition, series.length) && legendPosition === "bottom") {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-area-chart__legend" aria-label="Series"><!--[-->`);
+      const each_array_6 = $.ensure_array_like(series);
+      for (let index = 0, $$length = each_array_6.length;index < $$length; index++) {
+        let item = each_array_6[index];
+        $$renderer2.push(`<button type="button"${$.attr("aria-pressed", !hiddenSeriesIds.includes(item.id))}><span${$.attr_style("", { background: item.color ?? chartPaletteColor(index) })}></span>${$.escape(item.label)}</button>`);
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></figure>`);
+    $.bind_props($$props, { hiddenSeriesIds });
+  });
+}
+
+// src/components/area-chart/index.ts
+var area_chart_default = Area_chart;
+export { Area_chart, area_chart_default };
+
+//# debugId=51673CAE71DF6FCC64756E2164756E21

package/dist/server/index.server-f1j0pjt8.js

@@ -0,0 +1,99 @@
+import {
+  getDataListContext
+} from "./index.server-2h3y9v3e.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/stacked-list-item/stacked-list-item.svelte
+import * as $ from "svelte/internal/server";
+var BLOCKED_ATTRS = new Set(["role", "tabindex"]);
+function Stacked_list_item($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      density,
+      class: className,
+      leading,
+      title,
+      description,
+      meta,
+      trailing,
+      href,
+      target,
+      rel,
+      hreflang,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const dataListContext = getDataListContext();
+    const resolvedDensity = $.derived(() => density ?? dataListContext?.density ?? "comfortable");
+    const safeRest = $.derived(() => Object.fromEntries(Object.entries(rest).filter(([key]) => !key.startsWith("on") && !BLOCKED_ATTRS.has(key))));
+    const resolvedRel = $.derived(() => {
+      if (target?.toLowerCase() !== "_blank")
+        return rel;
+      const tokens = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+      tokens.add("noopener");
+      tokens.add("noreferrer");
+      return [...tokens].join(" ");
+    });
+    $$renderer2.push(`<li${$.attributes({
+      class: $.clsx(classNames("cinder-stacked-list-item", leading && "cinder-stacked-list-item--has-leading", trailing && "cinder-stacked-list-item--has-trailing", className)),
+      "data-cinder-density": resolvedDensity(),
+      ...safeRest()
+    })}><div class="cinder-stacked-list-item__layout">`);
+    if (leading) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-stacked-list-item__leading">`);
+      leading($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <div class="cinder-stacked-list-item__body"><div class="cinder-stacked-list-item__title">`);
+    if (href !== undefined) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<a class="cinder-stacked-list-item__title-link"${$.attr("href", href)}${$.attr("target", target)}${$.attr("rel", resolvedRel())}${$.attr("hreflang", hreflang)}>`);
+      title($$renderer2);
+      $$renderer2.push(`<!----></a>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      title($$renderer2);
+      $$renderer2.push(`<!---->`);
+    }
+    $$renderer2.push(`<!--]--></div> `);
+    if (description) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-stacked-list-item__description">`);
+      description($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (meta) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-stacked-list-item__meta">`);
+      meta($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div> `);
+    if (trailing) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-stacked-list-item__trailing">`);
+      trailing($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div></li>`);
+  });
+}
+
+// src/components/stacked-list-item/index.ts
+var stacked_list_item_default = Stacked_list_item;
+export { Stacked_list_item, stacked_list_item_default };
+
+//# debugId=4E555E8CC847926F64756E2164756E21

package/dist/server/index.server-f42dvea7.js

@@ -0,0 +1,294 @@
+import {
+  parseColor
+} from "./index.server-7wsshxkg.js";
+import {
+  Input
+} from "./index.server-8gakk9d5.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/color-field/color-field.svelte
+import * as $ from "svelte/internal/server";
+import { untrack } from "svelte";
+function Color_field($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      id,
+      class: className,
+      value,
+      defaultValue,
+      alpha = false,
+      formats = ["hex", "rgb", "hsl"],
+      disabled = false,
+      required = false,
+      readonly = false,
+      name,
+      placeholder,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      errorMessage,
+      enterBehavior = "commit-then-submit",
+      onchange
+    } = $$props;
+    const isControlled = untrack(() => value) !== undefined;
+    let visibleText = "";
+    let committedHex = "";
+    let committedRgba = null;
+    let parseError = null;
+    let anchorInput = null;
+    let lastReconciledValue = "";
+    function toHex2(n) {
+      return Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+    }
+    function normalizeHex(parts, emitAlpha) {
+      const base = `#${toHex2(parts.r)}${toHex2(parts.g)}${toHex2(parts.b)}`;
+      if (emitAlpha)
+        return base + toHex2(parts.a * 255);
+      return base;
+    }
+    function emitFor(parts) {
+      return normalizeHex(parts, alpha && parts.a < 1);
+    }
+    const HEX_RE = /^#[0-9a-f]{3}([0-9a-f]([0-9a-f]{2})?([0-9a-f]{2})?)?$/i;
+    const RGB_RE = /^rgba?\s*\([^)]*\)\s*$/i;
+    const HSL_RE = /^hsla?\s*\([^)]*\)\s*$/i;
+    const DEFAULT_FORMATS = ["hex", "rgb", "hsl"];
+    const acceptedFormats = $.derived(() => formats.length === 0 ? DEFAULT_FORMATS : formats);
+    function passesFormatGate(text) {
+      if (HEX_RE.test(text))
+        return acceptedFormats().includes("hex");
+      if (RGB_RE.test(text))
+        return acceptedFormats().includes("rgb");
+      if (HSL_RE.test(text))
+        return acceptedFormats().includes("hsl");
+      return false;
+    }
+    function defaultErrorMessage() {
+      if (errorMessage !== undefined)
+        return errorMessage;
+      const labels = { hex: "hex", rgb: "rgb()", hsl: "hsl()" };
+      const accepted = acceptedFormats().map((format) => labels[format]);
+      if (accepted.length === 1)
+        return `Enter a valid ${accepted[0]} color.`;
+      if (accepted.length === 2)
+        return `Enter a valid ${accepted[0]} or ${accepted[1]} color.`;
+      return `Enter a valid ${accepted.slice(0, -1).join(", ")}, or ${accepted.at(-1)} color.`;
+    }
+    function seedFromParts(parts) {
+      committedRgba = parts;
+      committedHex = emitFor(parts);
+      visibleText = committedHex;
+    }
+    function clearAll() {
+      committedRgba = null;
+      committedHex = "";
+      visibleText = "";
+    }
+    const initialValue = untrack(() => value);
+    const initialDefaultValue = untrack(() => defaultValue);
+    if (isControlled) {
+      if (initialValue !== undefined && initialValue !== "") {
+        const trimmedInitial = initialValue.trim();
+        if (trimmedInitial !== "" && passesFormatGate(trimmedInitial)) {
+          const parsed = parseColor(trimmedInitial);
+          if (parsed !== null) {
+            seedFromParts(parsed);
+            lastReconciledValue = initialValue;
+          } else {
+            visibleText = initialValue;
+            committedHex = "";
+            committedRgba = null;
+            parseError = defaultErrorMessage();
+          }
+        } else {
+          visibleText = initialValue;
+          committedHex = "";
+          committedRgba = null;
+          parseError = defaultErrorMessage();
+        }
+      }
+    } else if (initialDefaultValue !== undefined && initialDefaultValue !== "") {
+      const trimmedDefault = initialDefaultValue.trim();
+      if (trimmedDefault !== "" && passesFormatGate(trimmedDefault)) {
+        const parsed = parseColor(trimmedDefault);
+        if (parsed !== null) {
+          seedFromParts(parsed);
+        }
+      }
+    }
+    function reconcileFromValue(next) {
+      const trimmed = next.trim();
+      if (trimmed === "") {
+        clearAll();
+        parseError = null;
+      } else if (!passesFormatGate(trimmed)) {
+        visibleText = next;
+        committedHex = "";
+        committedRgba = null;
+        parseError = defaultErrorMessage();
+      } else {
+        const parsed = parseColor(trimmed);
+        if (parsed === null) {
+          visibleText = next;
+          committedHex = "";
+          committedRgba = null;
+          parseError = defaultErrorMessage();
+        } else {
+          seedFromParts(parsed);
+          parseError = null;
+        }
+      }
+      syncCustomValidity();
+    }
+    function runCommit() {
+      const trimmed = visibleText.trim();
+      if (trimmed === "") {
+        const hadCommitted = committedHex !== "";
+        const hadError = parseError !== null;
+        clearAll();
+        parseError = null;
+        if (hadCommitted) {
+          onchange?.("");
+          return { committed: true, emittedHex: "" };
+        }
+        return { committed: hadError, emittedHex: null };
+      }
+      if (trimmed === committedHex) {
+        visibleText = committedHex;
+        parseError = null;
+        return { committed: false, emittedHex: null };
+      }
+      if (!passesFormatGate(trimmed)) {
+        parseError = defaultErrorMessage();
+        return { committed: false, emittedHex: null };
+      }
+      const parsed = parseColor(trimmed);
+      if (parsed === null) {
+        parseError = defaultErrorMessage();
+        return { committed: false, emittedHex: null };
+      }
+      const normalized = emitFor(parsed);
+      const previousHex = committedHex;
+      parseError = null;
+      visibleText = normalized;
+      if (!isControlled) {
+        committedRgba = parsed;
+        committedHex = normalized;
+        if (normalized !== previousHex) {
+          onchange?.(normalized);
+          return { committed: true, emittedHex: normalized };
+        }
+        return { committed: true, emittedHex: null };
+      }
+      if (normalized !== previousHex) {
+        committedRgba = parsed;
+        committedHex = normalized;
+        onchange?.(normalized);
+        return { committed: true, emittedHex: normalized };
+      }
+      return { committed: false, emittedHex: null };
+    }
+    function syncCustomValidity() {
+      if (anchorInput === null)
+        return;
+      const wrapper = anchorInput.closest(".cinder-color-field");
+      if (wrapper === null)
+        return;
+      const nativeInput = wrapper.querySelector("input.cinder-input");
+      if (nativeInput === null)
+        return;
+      nativeInput.setCustomValidity(parseError ?? "");
+    }
+    function handleBlur() {
+      runCommit();
+      syncCustomValidity();
+    }
+    function handleKeydown(event) {
+      if (event.key !== "Enter")
+        return;
+      event.preventDefault();
+      runCommit();
+      syncCustomValidity();
+      if (anchorInput !== null) {
+        anchorInput.value = committedHex;
+      }
+      if (parseError !== null)
+        return;
+      if (enterBehavior !== "commit-then-submit")
+        return;
+      const form = anchorInput?.form ?? null;
+      if (form === null)
+        return;
+      const submitter = form.querySelector('button:not([type]):not([disabled]), button[type="submit"]:not([disabled]), input[type="submit"]:not([disabled])');
+      form.requestSubmit(submitter ?? undefined);
+    }
+    function onFormReset() {
+      if (isControlled)
+        return;
+      parseError = null;
+      if (defaultValue === undefined || defaultValue === "") {
+        clearAll();
+        syncCustomValidity();
+        return;
+      }
+      const trimmedDefault = defaultValue.trim();
+      if (trimmedDefault === "" || !passesFormatGate(trimmedDefault)) {
+        clearAll();
+        syncCustomValidity();
+        return;
+      }
+      const parsed = parseColor(trimmedDefault);
+      if (parsed === null) {
+        clearAll();
+        syncCustomValidity();
+        return;
+      }
+      seedFromParts(parsed);
+      syncCustomValidity();
+    }
+    const swatchEmpty = $.derived(() => committedHex === "");
+    const swatchColor = $.derived(() => committedHex === "" ? "transparent" : committedHex);
+    function swatch($$renderer3) {
+      $$renderer3.push(`<span class="cinder-color-field__swatch"${$.attr("data-cinder-empty", swatchEmpty() ? "" : undefined)}${$.attr("data-cinder-alpha", alpha ? "" : undefined)} aria-hidden="true"${$.attr_style(`--cinder-color-field-swatch: ${$.stringify(swatchColor())};`)}></span>`);
+    }
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<div${$.attr_class($.clsx(classNames("cinder-color-field", className)))}${$.attr("data-cinder-disabled", disabled ? "" : undefined)}>`);
+      Input($$renderer3, {
+        id,
+        disabled,
+        required,
+        readonly,
+        placeholder: placeholder ?? "",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        error: parseError ?? "",
+        onblur: handleBlur,
+        onkeydown: handleKeydown,
+        trailing: swatch,
+        get value() {
+          return visibleText;
+        },
+        set value($$value) {
+          visibleText = $$value;
+          $$settled = false;
+        }
+      });
+      $$renderer3.push(`<!----> <input type="hidden"${$.attr("name", name)}${$.attr("disabled", disabled || undefined, true)}${$.attr("value", committedHex)} aria-hidden="true"/></div>`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+  });
+}
+
+// src/components/color-field/index.ts
+var color_field_default = Color_field;
+export { Color_field, color_field_default };
+
+//# debugId=89969DA4C1FE4D0964756E2164756E21