@lostgradient/cinder 0.4.0 → 0.4.1

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

@@ -0,0 +1,294 @@
+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/line-chart/line-chart.svelte
+import * as $ from "svelte/internal/server";
+function Line_chart($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const generatedId = $.props_id($$renderer2);
+    let {
+      label,
+      description,
+      series,
+      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: "line-chart",
+      series,
+      hiddenSeriesIds,
+      width: interaction.measuredWidth,
+      height,
+      xAxis,
+      yAxis
+    }));
+    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-line-chart", customClassName)),
+      "aria-label": label,
+      "aria-describedby": descriptionId()
+    })}>`);
+    if (description) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p${$.attr("id", descriptionId())} class="cinder-line-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-line-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-line-chart__viewport"${$.attr("data-cinder-loading", loading || undefined)}${$.attr_style("", { height: `${$.stringify(height)}px` })}>`);
+    if (loading) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-line-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-line-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-line-chart__gridline" x1="0"${$.attr("x2", model().geometry.plotWidth)}${$.attr("y1", tickY)}${$.attr("y2", tickY)} aria-hidden="true"></line><text class="cinder-line-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-line-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_4 = 0, $$length = each_array_3.length;$$index_4 < $$length; $$index_4++) {
+      let item = each_array_3[$$index_4];
+      if (!item.hidden && item.path) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<path class="cinder-line-chart__line"${$.attr("d", item.path)}${$.attr("stroke", item.color)} aria-hidden="true"${$.attr("data-cinder-series", item.id)}></path><!--[-->`);
+        const each_array_4 = $.ensure_array_like(item.points);
+        for (let $$index_3 = 0, $$length2 = each_array_4.length;$$index_3 < $$length2; $$index_3++) {
+          let point = each_array_4[$$index_3];
+          if (point.y !== null) {
+            $$renderer2.push("<!--[0-->");
+            $$renderer2.push(`<circle class="cinder-line-chart__point"${$.attr("cx", point.pixelX)}${$.attr("cy", point.pixelY)} r="3"${$.attr("fill", item.color)} aria-hidden="true"${$.attr("data-cinder-series", item.id)}></circle>`);
+          } else {
+            $$renderer2.push("<!--[-1-->");
+          }
+          $$renderer2.push(`<!--]-->`);
+        }
+        $$renderer2.push(`<!--]-->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]-->`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    if (interaction.activeTarget) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<line class="cinder-line-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-line-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_5 = $.ensure_array_like(model().targets);
+        for (let $$index_5 = 0, $$length = each_array_5.length;$$index_5 < $$length; $$index_5++) {
+          let target = each_array_5[$$index_5];
+          $$renderer2.push(`<circle class="cinder-line-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-line-chart__focus-ring-layer" aria-hidden="true">`);
+      if (pointFocusRing().kind === "point") {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<circle class="cinder-line-chart__focus-ring-halo"${$.attr("cx", pointFocusRing().cx)}${$.attr("cy", pointFocusRing().cy)}${$.attr("r", pointFocusRing().radius)}></circle><circle class="cinder-line-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-line-chart__focus-ring-connector cinder-line-chart__focus-ring-halo"${$.attr("d", `M ${pointFocusRing().connector.x1} ${pointFocusRing().connector.y1} L ${pointFocusRing().connector.x2} ${pointFocusRing().connector.y2}`)}></path><path class="cinder-line-chart__focus-ring-connector cinder-line-chart__focus-ring"${$.attr("d", `M ${pointFocusRing().connector.x1} ${pointFocusRing().connector.y1} L ${pointFocusRing().connector.x2} ${pointFocusRing().connector.y2}`)}></path><circle class="cinder-line-chart__focus-ring-dot cinder-line-chart__focus-ring-halo"${$.attr("cx", pointFocusRing().dot.cx)}${$.attr("cy", pointFocusRing().dot.cy)}${$.attr("r", pointFocusRing().dot.radius)}></circle><circle class="cinder-line-chart__focus-ring-dot cinder-line-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-line-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-line-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-line-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_6 = $.ensure_array_like(model().tableRows);
+      for (let $$index_6 = 0, $$length = each_array_6.length;$$index_6 < $$length; $$index_6++) {
+        let row = each_array_6[$$index_6];
+        $$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-line-chart__legend" aria-label="Series"><!--[-->`);
+      const each_array_7 = $.ensure_array_like(series);
+      for (let index = 0, $$length = each_array_7.length;index < $$length; index++) {
+        let item = each_array_7[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/line-chart/index.ts
+var line_chart_default = Line_chart;
+export { Line_chart, line_chart_default };
+
+//# debugId=E921EBAA8700263F64756E2164756E21

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

@@ -0,0 +1,9 @@
+import {
+  Avatar
+} from "./index.server-dyryxwe8.js";
+
+// src/components/avatar/index.ts
+var avatar_default = Avatar;
+export { avatar_default };
+
+//# debugId=E96E566F27BA026C64756E2164756E21

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

@@ -0,0 +1,291 @@
+import {
+  getFormFieldContext
+} from "./index.server-weae7gs2.js";
+import {
+  ariaInvalid,
+  composeDescribedBy,
+  describeId,
+  errorId
+} from "./index.server-abm21gz1.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/rating/rating.svelte
+import * as $ from "svelte/internal/server";
+function Rating($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      id,
+      value = 0,
+      count = 5,
+      precision = "whole",
+      label,
+      hideLabel = false,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      description,
+      error,
+      disabled,
+      readonly = false,
+      required,
+      name,
+      class: className,
+      onchange
+    } = $$props;
+    const context = getFormFieldContext();
+    const normalizedCount = $.derived(() => {
+      if (!Number.isFinite(count))
+        return 5;
+      const truncated = Math.trunc(count);
+      if (truncated < 1)
+        return 1;
+      if (truncated > 10)
+        return 10;
+      return truncated;
+    });
+    const stepSize = $.derived(() => precision === "half" ? 0.5 : 1);
+    const valueOptions = $.derived(() => {
+      const out = [];
+      for (let step = stepSize();step <= normalizedCount() + stepSize() / 2; step += stepSize()) {
+        out.push(Number(step.toFixed(2)));
+      }
+      return out;
+    });
+    function snapToOption(raw) {
+      if (!Number.isFinite(raw) || raw <= 0)
+        return 0;
+      if (raw >= normalizedCount())
+        return normalizedCount();
+      const stepped = Math.round(raw / stepSize()) * stepSize();
+      const rounded = Number(stepped.toFixed(2));
+      return Math.max(0, Math.min(normalizedCount(), rounded));
+    }
+    const resolvedValue = $.derived(() => snapToOption(value ?? 0));
+    let hoverValue = null;
+    const displayValue = $.derived(() => hoverValue ?? resolvedValue());
+    const groupLabelId = $.derived(() => label ? `${id}-label` : undefined);
+    const defaultDescriptionId = $.derived(() => describeId(id, !!description));
+    const defaultErrorId = $.derived(() => errorId(id, !!error));
+    const ownDescriptionId = $.derived(() => description && defaultDescriptionId() === context?.descriptionId ? `${id}-rating-description` : defaultDescriptionId());
+    const ownErrorId = $.derived(() => error && defaultErrorId() === context?.errorId ? `${id}-rating-error` : defaultErrorId());
+    const resolvedDescriptionId = $.derived(() => ownDescriptionId() ?? context?.descriptionId);
+    const resolvedErrorId = $.derived(() => ownErrorId() ?? context?.errorId);
+    const describedBy = $.derived(() => composeDescribedBy(resolvedDescriptionId(), resolvedErrorId()));
+    const resolvedAriaInvalid = $.derived(() => error ? ariaInvalid(true) : context?.invalid);
+    const resolvedRequired = $.derived(() => required ?? context?.required ?? false);
+    const resolvedDisabled = $.derived(() => disabled ?? context?.disabled ?? false);
+    const resolvedGroupLabelledBy = $.derived(() => {
+      if (groupLabelId())
+        return groupLabelId();
+      if (context?.labelId)
+        return context.labelId;
+      if (ariaLabelledBy)
+        return ariaLabelledBy;
+      return;
+    });
+    const groupAriaLabel = $.derived(() => !resolvedGroupLabelledBy() && !ariaLabelledBy ? ariaLabel : undefined);
+    const hasGroupAccessibleName = $.derived(() => !!label || !!context?.labelId || !!ariaLabelledBy || !!ariaLabel);
+    function optionId(option) {
+      return `${id}-option-${String(option).replace(".", "_")}`;
+    }
+    function describeOption(option) {
+      const noun = option === 1 ? "star" : "stars";
+      return `${option} ${noun} of ${normalizedCount()}`;
+    }
+    function readableValueText() {
+      if (resolvedValue() === 0)
+        return `Unrated, out of ${normalizedCount()}`;
+      const noun = resolvedValue() === 1 ? "star" : "stars";
+      return `${resolvedValue()} ${noun} out of ${normalizedCount()}`;
+    }
+    const readonlyValueTextId = $.derived(() => `${id}-rating-value`);
+    const readonlyLabelledBy = $.derived(() => resolvedGroupLabelledBy() ? `${resolvedGroupLabelledBy()} ${readonlyValueTextId()}` : ariaLabelledBy ? `${ariaLabelledBy} ${readonlyValueTextId()}` : undefined);
+    const readonlyAriaLabel = $.derived(() => {
+      if (readonlyLabelledBy())
+        return;
+      const consumerLabel = ariaLabel;
+      if (consumerLabel)
+        return `${consumerLabel}: ${readableValueText()}`;
+      return readableValueText();
+    });
+    function commit(next) {
+      const snapped = snapToOption(next);
+      if (snapped !== resolvedValue()) {
+        value = snapped;
+        onchange?.(snapped);
+      } else {}
+    }
+    function focusOption(option) {
+      if (typeof document === "undefined")
+        return;
+      const element = document.getElementById(optionId(option));
+      if (element instanceof HTMLElement)
+        element.focus();
+    }
+    function activeFocusTarget() {
+      if (resolvedValue() > 0)
+        return resolvedValue();
+      const first = valueOptions()[0];
+      return first ?? stepSize();
+    }
+    function handleClick(option) {
+      if (resolvedDisabled() || readonly)
+        return;
+      commit(option);
+    }
+    function handleKeyDown(event, option) {
+      if (resolvedDisabled() || readonly)
+        return;
+      const index = valueOptions().indexOf(option);
+      if (index === -1)
+        return;
+      let nextIndex = index;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowUp": {
+          nextIndex = (index + 1) % valueOptions().length;
+          if (resolvedValue() === 0) {
+            event.preventDefault();
+            const first = valueOptions()[0];
+            commit(first);
+            focusOption(first);
+            return;
+          }
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowDown": {
+          if (resolvedValue() === 0) {
+            event.preventDefault();
+            const last = valueOptions().at(-1);
+            commit(last);
+            focusOption(last);
+            return;
+          }
+          nextIndex = (index - 1 + valueOptions().length) % valueOptions().length;
+          break;
+        }
+        case "Home": {
+          nextIndex = 0;
+          break;
+        }
+        case "End": {
+          nextIndex = valueOptions().length - 1;
+          break;
+        }
+        case " ":
+        case "Enter":
+        case "Spacebar": {
+          if (resolvedValue() === 0) {
+            event.preventDefault();
+            const first = valueOptions()[0];
+            commit(first);
+            focusOption(first);
+            return;
+          }
+          event.preventDefault();
+          commit(option);
+          return;
+        }
+        default:
+          return;
+      }
+      event.preventDefault();
+      const next = valueOptions()[nextIndex];
+      commit(next);
+      focusOption(next);
+    }
+    function handlePointerEnter(option) {
+      if (resolvedDisabled() || readonly)
+        return;
+      hoverValue = option;
+    }
+    function handlePointerLeave() {
+      hoverValue = null;
+    }
+    function fillPercentForSlot(slot) {
+      const diff = displayValue() - (slot - 1);
+      if (diff <= 0)
+        return 0;
+      if (diff >= 1)
+        return 100;
+      return diff * 100;
+    }
+    function isOptionChecked(option) {
+      return resolvedValue() === option;
+    }
+    function tabIndexFor(option) {
+      if (resolvedDisabled())
+        return -1;
+      const focusTarget = activeFocusTarget();
+      return option === focusTarget ? 0 : -1;
+    }
+    $$renderer2.push(`<div${$.attr_class($.clsx(classNames("cinder-rating-field", readonly && "cinder-rating-field--readonly", className)))}${$.attr("data-cinder-disabled", resolvedDisabled() || undefined)}>`);
+    if (label) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span${$.attr("id", groupLabelId())}${$.attr_class($.clsx(classNames("cinder-rating-field__label", hideLabel && "cinder-sr-only")))}${$.attr("data-disabled", resolvedDisabled() || undefined)}>${$.escape(label)}</span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (readonly) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-rating cinder-rating--readonly" role="img"${$.attr("aria-labelledby", readonlyLabelledBy())}${$.attr("aria-label", readonlyAriaLabel())}${$.attr("aria-describedby", describedBy())}><!--[-->`);
+      const each_array = $.ensure_array_like(Array.from({ length: normalizedCount() }, (_, i) => i + 1));
+      for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+        let slot = each_array[$$index];
+        $$renderer2.push(`<span class="cinder-rating__star" aria-hidden="true"><span class="cinder-rating__star-fill"${$.attr_style("", {
+          "--_cinder-rating-fill": `${$.stringify(fillPercentForSlot(slot))}%`
+        })}></span></span>`);
+      }
+      $$renderer2.push(`<!--]--> <span${$.attr("id", readonlyValueTextId())} class="cinder-sr-only">${$.escape(readableValueText())}</span></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div class="cinder-rating" role="radiogroup" tabindex="-1"${$.attr("aria-labelledby", resolvedGroupLabelledBy())}${$.attr("aria-label", groupAriaLabel())}${$.attr("aria-describedby", describedBy())}${$.attr("aria-invalid", resolvedAriaInvalid())}${$.attr("aria-required", resolvedRequired() || undefined)}${$.attr("aria-disabled", resolvedDisabled() || undefined)}><!--[-->`);
+      const each_array_1 = $.ensure_array_like(Array.from({ length: normalizedCount() }, (_, i) => i + 1));
+      for (let $$index_1 = 0, $$length = each_array_1.length;$$index_1 < $$length; $$index_1++) {
+        let slot = each_array_1[$$index_1];
+        $$renderer2.push(`<span class="cinder-rating__star" aria-hidden="true"><span class="cinder-rating__star-fill"${$.attr_style("", {
+          "--_cinder-rating-fill": `${$.stringify(fillPercentForSlot(slot))}%`
+        })}></span></span>`);
+      }
+      $$renderer2.push(`<!--]--> <div class="cinder-rating__hit-area"><!--[-->`);
+      const each_array_2 = $.ensure_array_like(valueOptions());
+      for (let $$index_2 = 0, $$length = each_array_2.length;$$index_2 < $$length; $$index_2++) {
+        let option = each_array_2[$$index_2];
+        $$renderer2.push(`<button${$.attr("id", optionId(option))} class="cinder-rating__option" type="button" role="radio"${$.attr("aria-checked", isOptionChecked(option))}${$.attr("aria-label", describeOption(option))}${$.attr("tabindex", tabIndexFor(option))}${$.attr("disabled", resolvedDisabled() || undefined, true)}${$.attr("data-cinder-rating-option", option)}></button>`);
+      }
+      $$renderer2.push(`<!--]--></div></div>`);
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (name) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<input type="hidden"${$.attr("name", name)}${$.attr("value", resolvedValue())}${$.attr("required", resolvedRequired(), true)}${$.attr("disabled", resolvedDisabled(), true)}/>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (description) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p${$.attr("id", ownDescriptionId())} class="cinder-rating-field__description">${$.escape(description)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (error) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p${$.attr("id", ownErrorId())} class="cinder-rating-field__error" aria-live="polite" aria-atomic="true">${$.escape(error)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+    $.bind_props($$props, { value });
+  });
+}
+
+// src/components/rating/index.ts
+var rating_default = Rating;
+export { Rating, rating_default };
+
+//# debugId=9B1360497350AC6464756E2164756E21

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

@@ -0,0 +1,35 @@
+import {
+  Dropdown_label
+} from "./index.server-zdg2zpx1.js";
+import {
+  Dropdown_separator
+} from "./index.server-1k7j69zg.js";
+import {
+  Dropdown_group
+} from "./index.server-rpenapvz.js";
+import {
+  Dropdown
+} from "./index.server-kjtb596w.js";
+import {
+  Dropdown_trigger
+} from "./index.server-77gpgvab.js";
+import {
+  Dropdown_item
+} from "./index.server-r0wzpqh7.js";
+import {
+  Dropdown_menu
+} from "./index.server-4jc5ny87.js";
+
+// src/components/dropdown/index.ts
+var Dropdown2 = Object.assign(Dropdown, {
+  Trigger: Dropdown_trigger,
+  Menu: Dropdown_menu,
+  Item: Dropdown_item,
+  Label: Dropdown_label,
+  Separator: Dropdown_separator,
+  Group: Dropdown_group
+});
+var dropdown_default = Dropdown2;
+export { Dropdown2 as Dropdown, dropdown_default };
+
+//# debugId=4AD75212C41AB8F664756E2164756E21