@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/server/components/line-chart/index.js

@@ -361,6 +361,7 @@ function createBarModel(options) {
   const categoryTicks = sortedCategories.map((category, index) => {
     const categoryPosition = categoryScale(category.key) ?? 0;
     return {
+      categoryKey: category.key,
       label: formatXValue(category, orientation === "vertical" ? xAxis : yAxis, { index }),
       x: orientation === "vertical" ? categoryPosition + categoryScale.bandwidth() / 2 : -8,
       y: orientation === "vertical" ? geometry.plotHeight + 20 : categoryPosition + categoryScale.bandwidth() / 2
@@ -446,6 +447,7 @@ function createBarModel(options) {
     });
     if (rowValues.length > 0) {
       tableRows.push({
+        categoryKey: category.key,
         categoryLabel: formatXValue(category, orientation === "vertical" ? xAxis : yAxis, {
           index: tableRows.length
         }),
@@ -686,6 +688,125 @@ function formatPathNumber(value) {
   return Number(value.toFixed(3)).toString();
 }
 
+// src/_internal/chart/chart-focus-ring.ts
+var DEFAULT_CHART_FOCUS_RING_STROKE_PADDING = 8;
+var DEFAULT_POINT_FOCUS_RING_RADIUS = 10;
+var MINIMUM_FOCUS_RING_SIZE = 2;
+var MINIMUM_BAR_FOCUS_RING_SIZE = 12;
+var FOCUS_RING_DOT_RADIUS = 2.5;
+function createPointFocusRingGeometry(options) {
+  const {
+    target,
+    plotWidth,
+    plotHeight,
+    strokePadding = DEFAULT_CHART_FOCUS_RING_STROKE_PADDING,
+    radius = DEFAULT_POINT_FOCUS_RING_RADIUS
+  } = options;
+  if (plotWidth <= 0 || plotHeight <= 0)
+    return null;
+  const drawableWidth = plotWidth - strokePadding * 2;
+  const drawableHeight = plotHeight - strokePadding * 2;
+  const largestDrawableRadius = Math.min(drawableWidth, drawableHeight) / 2;
+  if (largestDrawableRadius < MINIMUM_FOCUS_RING_SIZE || drawableWidth < FOCUS_RING_DOT_RADIUS * 2 || drawableHeight < FOCUS_RING_DOT_RADIUS * 2) {
+    return createPlotFrameFocusRingGeometry(plotWidth, plotHeight, strokePadding);
+  }
+  const resolvedRadius = Math.min(Math.max(radius, MINIMUM_FOCUS_RING_SIZE), largestDrawableRadius);
+  const minimumCenterX = strokePadding + resolvedRadius;
+  const maximumCenterX = plotWidth - strokePadding - resolvedRadius;
+  const minimumCenterY = strokePadding + resolvedRadius;
+  const maximumCenterY = plotHeight - strokePadding - resolvedRadius;
+  const cx = clamp(target.x, minimumCenterX, maximumCenterX);
+  const cy = clamp(target.y, minimumCenterY, maximumCenterY);
+  const dotInset = strokePadding + FOCUS_RING_DOT_RADIUS;
+  let targetX = clamp(target.x, dotInset, plotWidth - dotInset);
+  let targetY = clamp(target.y, dotInset, plotHeight - dotInset);
+  const initialOffsetX = targetX - cx;
+  const initialOffsetY = targetY - cy;
+  const initialOffsetDistance = Math.hypot(initialOffsetX, initialOffsetY);
+  if (initialOffsetDistance > resolvedRadius) {
+    const scale = resolvedRadius / initialOffsetDistance;
+    targetX = cx + initialOffsetX * scale;
+    targetY = cy + initialOffsetY * scale;
+  }
+  const offsetX = targetX - cx;
+  const offsetY = targetY - cy;
+  const offsetDistance = Math.hypot(offsetX, offsetY);
+  const geometry = {
+    kind: "point",
+    cx,
+    cy,
+    radius: resolvedRadius,
+    targetX,
+    targetY,
+    offsetX,
+    offsetY,
+    offsetDistance
+  };
+  if (offsetDistance <= 0)
+    return geometry;
+  return {
+    ...geometry,
+    connector: {
+      x1: targetX,
+      y1: targetY,
+      x2: cx,
+      y2: cy
+    },
+    dot: {
+      cx: targetX,
+      cy: targetY,
+      radius: FOCUS_RING_DOT_RADIUS
+    }
+  };
+}
+function createBarFocusRingGeometry(options) {
+  const {
+    target,
+    plotWidth,
+    plotHeight,
+    strokePadding = DEFAULT_CHART_FOCUS_RING_STROKE_PADDING,
+    minimumWidth = MINIMUM_BAR_FOCUS_RING_SIZE,
+    minimumHeight = MINIMUM_BAR_FOCUS_RING_SIZE
+  } = options;
+  if (plotWidth <= 0 || plotHeight <= 0)
+    return null;
+  const requestedWidth = Math.max(target.width ?? 0, minimumWidth);
+  const requestedHeight = Math.max(target.height ?? 0, minimumHeight);
+  const drawableWidth = plotWidth - strokePadding * 2;
+  const drawableHeight = plotHeight - strokePadding * 2;
+  if (drawableWidth < MINIMUM_FOCUS_RING_SIZE || drawableHeight < MINIMUM_FOCUS_RING_SIZE) {
+    return createPlotFrameFocusRingGeometry(plotWidth, plotHeight, strokePadding);
+  }
+  const width = Math.min(requestedWidth, drawableWidth);
+  const height = Math.min(requestedHeight, drawableHeight);
+  const x = clamp(target.x - width / 2, strokePadding, plotWidth - width - strokePadding);
+  const y = clamp(target.y - height / 2, strokePadding, plotHeight - height - strokePadding);
+  return {
+    kind: "bar",
+    x,
+    y,
+    width,
+    height,
+    radius: Math.min(4, width / 2, height / 2)
+  };
+}
+function createPlotFrameFocusRingGeometry(plotWidth, plotHeight, strokePadding) {
+  const inset = Math.min(strokePadding, Math.max(0, plotWidth - MINIMUM_FOCUS_RING_SIZE) / 2, Math.max(0, plotHeight - MINIMUM_FOCUS_RING_SIZE) / 2);
+  return {
+    kind: "plot-frame",
+    x: inset,
+    y: inset,
+    width: Math.max(0, plotWidth - inset * 2),
+    height: Math.max(0, plotHeight - inset * 2),
+    radius: 0
+  };
+}
+function clamp(value, minimum, maximum) {
+  if (maximum < minimum)
+    return (minimum + maximum) / 2;
+  return Math.min(Math.max(value, minimum), maximum);
+}
+
 // src/_internal/chart/chart-interaction.svelte.ts
 import * as $ from "svelte/internal/server";
 class ChartInteraction {
@@ -821,6 +942,42 @@ function Line_chart($$renderer, $$props) {
     const keyboardEnabled = $2.derived(() => model().targets.length > 0 && model().targets.length <= maximumInteractivePoints);
     const hasDataTable = $2.derived(() => dataTableVisibility !== "hidden");
     const guidanceId = $2.derived(() => !keyboardEnabled() && hasDataTable() && model().targets.length > 0 ? `${rootId()}-table-guidance` : undefined);
+    const focusedTarget = $2.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 = $2.derived(() => keyboardFocusModality && focusedTarget() && focusVisibleTargetId === focusedTarget().id ? focusedTarget() : undefined);
+    const pointFocusRing = $2.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${$2.attributes({
       ...rest,
       id: rootId(),
@@ -936,7 +1093,7 @@ function Line_chart($$renderer, $$props) {
         const each_array_5 = $2.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"${$2.attr("cx", target.x)}${$2.attr("cy", target.y)} r="8" tabindex="0" role="button"${$2.attr("data-cinder-target-id", target.id)}${$2.attr("aria-label", `${target.seriesLabel}, ${target.xLabel}, ${target.valueLabel}`)}${$2.attr("aria-describedby", interaction.activeTarget?.id === target.id ? `${rootId()}-tooltip` : undefined)}></circle>`);
+          $$renderer2.push(`<circle class="cinder-line-chart__focus-target"${$2.attr("cx", target.x)}${$2.attr("cy", target.y)} r="8" tabindex="0" role="button"${$2.attr("data-cinder-target-id", target.id)}${$2.attr("data-cinder-series-id", target.seriesId)}${$2.attr("data-cinder-focus-ring-active", pointFocusRing() && focusRingTarget()?.id === target.id ? "true" : undefined)}${$2.attr("aria-label", `${target.seriesLabel}, ${target.xLabel}, ${target.valueLabel}`)}${$2.attr("aria-describedby", interaction.activeTarget?.id === target.id ? `${rootId()}-tooltip` : undefined)}></circle>`);
         }
         $$renderer2.push(`<!--]-->`);
       } else {
@@ -946,6 +1103,28 @@ function Line_chart($$renderer, $$props) {
     } 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"${$2.attr("cx", pointFocusRing().cx)}${$2.attr("cy", pointFocusRing().cy)}${$2.attr("r", pointFocusRing().radius)}></circle><circle class="cinder-line-chart__focus-ring"${$2.attr("cx", pointFocusRing().cx)}${$2.attr("cy", pointFocusRing().cy)}${$2.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"${$2.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"${$2.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"${$2.attr("cx", pointFocusRing().dot.cx)}${$2.attr("cy", pointFocusRing().dot.cy)}${$2.attr("r", pointFocusRing().dot.radius)}></circle><circle class="cinder-line-chart__focus-ring-dot cinder-line-chart__focus-ring"${$2.attr("cx", pointFocusRing().dot.cx)}${$2.attr("cy", pointFocusRing().dot.cy)}${$2.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"${$2.attr("x", pointFocusRing().x)}${$2.attr("y", pointFocusRing().y)}${$2.attr("width", pointFocusRing().width)}${$2.attr("height", pointFocusRing().height)}${$2.attr("rx", pointFocusRing().radius)}></rect><rect class="cinder-line-chart__focus-ring"${$2.attr("x", pointFocusRing().x)}${$2.attr("y", pointFocusRing().y)}${$2.attr("width", pointFocusRing().width)}${$2.attr("height", pointFocusRing().height)}${$2.attr("rx", pointFocusRing().radius)}></rect>`);
+      }
+      $$renderer2.push(`<!--]--></g>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
     $$renderer2.push(`<!--]--></g></svg> `);
     if (interaction.activeTarget) {
       $$renderer2.push("<!--[0-->");
@@ -1001,4 +1180,4 @@ export {
   Line_chart as LineChart
 };
 
-//# debugId=FC6FFCF8AAF3235F64756E2164756E21
+//# debugId=4D1E285171277CF764756E2164756E21

package/dist/server/components/markdown-editor/index.js

@@ -2360,40 +2360,90 @@ function Dropdown_item($$renderer, $$props) {
       closeOnSelect = true,
       class: customClassName,
       onclick,
+      onkeydown,
+      href,
       children,
       $$slots,
       $$events,
       ...rest
     } = $$props;
     const context = getDropdownContext();
+    const isLink = $34.derived(() => href !== undefined);
+    const sharedClass = $34.derived(() => classNames("cinder-_option-row", "cinder-dropdown-item", inset && "cinder-dropdown-item--inset", customClassName));
     function handleClick(event) {
-      if (disabled)
+      if (disabled) {
+        event.preventDefault();
         return;
+      }
       if (typeof onclick === "function") {
-        onclick(event);
+        if (isLink()) {
+          onclick(event);
+        } else {
+          onclick(event);
+        }
       }
       if (closeOnSelect) {
         context.close();
       }
     }
-    $$renderer2.push(`<button${$34.attributes({
-      ...rest,
-      type: "button",
-      role: "menuitem",
-      class: $34.clsx(classNames("cinder-_option-row", "cinder-dropdown-item", inset && "cinder-dropdown-item--inset", customClassName)),
-      "data-cinder-variant": variant,
-      tabindex: -1,
-      "data-disabled": disabled ? "" : undefined,
-      "aria-disabled": disabled ? "true" : undefined
-    })}>`);
-    if (children) {
+    function handleAnchorKeydown(event) {
+      if (typeof onkeydown === "function") {
+        onkeydown(event);
+      }
+      if (event.defaultPrevented)
+        return;
+      if (event.key !== " " && event.key !== "Spacebar")
+        return;
+      event.preventDefault();
+      if (disabled)
+        return;
+      event.currentTarget.click();
+    }
+    const anchorAttributes = rest;
+    const buttonAttributes = rest;
+    const buttonType = $34.derived(() => rest.type ?? "button");
+    if (isLink()) {
       $$renderer2.push("<!--[0-->");
-      children($$renderer2);
-      $$renderer2.push(`<!---->`);
+      $$renderer2.push(`<a${$34.attributes({
+        ...anchorAttributes,
+        href,
+        role: "menuitem",
+        class: $34.clsx(sharedClass()),
+        "data-cinder-variant": variant,
+        tabindex: -1,
+        "data-disabled": disabled ? "" : undefined,
+        "aria-disabled": disabled ? "true" : undefined
+      })}>`);
+      if (children) {
+        $$renderer2.push("<!--[0-->");
+        children($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></a>`);
     } else {
       $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<button${$34.attributes({
+        ...buttonAttributes,
+        type: buttonType(),
+        role: "menuitem",
+        class: $34.clsx(sharedClass()),
+        "data-cinder-variant": variant,
+        tabindex: -1,
+        "data-disabled": disabled ? "" : undefined,
+        "aria-disabled": disabled ? "true" : undefined
+      })}>`);
+      if (children) {
+        $$renderer2.push("<!--[0-->");
+        children($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></button>`);
     }
-    $$renderer2.push(`<!--]--></button>`);
+    $$renderer2.push(`<!--]-->`);
   });
 }
 
@@ -2756,6 +2806,9 @@ function Button($$renderer, $$props) {
       "aria-busy": consumerAriaBusy,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
+      "aria-expanded": ariaExpanded,
+      "aria-controls": ariaControls,
+      "aria-haspopup": ariaHaspopup,
       $$slots,
       $$events,
       ...rest
@@ -2844,7 +2897,10 @@ function Button($$renderer, $$props) {
         "aria-disabled": resolvedAriaDisabled(),
         "aria-busy": resolvedAriaBusy(),
         "aria-label": resolvedAriaLabel(),
-        "aria-labelledby": resolvedAriaLabelledBy()
+        "aria-labelledby": resolvedAriaLabelledBy(),
+        "aria-expanded": ariaExpanded,
+        "aria-controls": ariaControls,
+        "aria-haspopup": ariaHaspopup
       })}>`);
       buttonContent($$renderer2);
       $$renderer2.push(`<!----></a>`);
@@ -2859,7 +2915,10 @@ function Button($$renderer, $$props) {
         "aria-disabled": resolvedAriaDisabled(),
         "aria-busy": resolvedAriaBusy(),
         "aria-label": resolvedAriaLabel(),
-        "aria-labelledby": resolvedAriaLabelledBy()
+        "aria-labelledby": resolvedAriaLabelledBy(),
+        "aria-expanded": ariaExpanded,
+        "aria-controls": ariaControls,
+        "aria-haspopup": ariaHaspopup
       })}>`);
       buttonContent($$renderer2);
       $$renderer2.push(`<!----></button>`);
@@ -3734,4 +3793,4 @@ export {
   Markdown_editor as MarkdownEditor
 };
 
-//# debugId=A49291D9D785873E64756E2164756E21
+//# debugId=D36AE556B500E10A64756E2164756E21

package/dist/server/components/matrix-chart/index.css

@@ -0,0 +1,52 @@
+/* src/components/matrix-chart/matrix-chart.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-matrix-chart {
+    display: grid;
+    gap: var(--cinder-space-3);
+    color: var(--cinder-text);
+  }
+
+  .cinder-matrix-chart__description {
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+    margin: 0;
+  }
+
+  .cinder-matrix-chart__viewport {
+    position: relative;
+  }
+
+  .cinder-matrix-chart svg {
+    display: block;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .cinder-matrix-chart__cell {
+    rx: 2;
+    stroke: var(--cinder-surface);
+    stroke-width: 1.5;
+  }
+
+  .cinder-matrix-chart__cell-label {
+    font-size: var(--cinder-text-xs);
+    pointer-events: none;
+  }
+
+  .cinder-matrix-chart__tick-label {
+    fill: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-matrix-chart__state {
+    position: absolute;
+    display: grid;
+    color: var(--cinder-text-muted);
+    background: color-mix(in oklch, var(--cinder-surface) 88%, transparent);
+    z-index: 1;
+    place-items:  center;
+    inset: 0;
+  }
+}