@cfasim-ui/docs 0.6.3 → 0.7.0

package/charts/DataTable/DataTable.vue

@@ -9,6 +9,7 @@ import {
 import ChartMenu from "../ChartMenu/ChartMenu.vue";
 import type { ChartMenuItem } from "../ChartMenu/ChartMenu.vue";
 import { downloadCsv } from "../ChartMenu/download.js";
+import { escapeCsvField } from "../_shared/seriesCsv.js";
 
 export type TableRecord = Record<string, ArrayLike<number | string | boolean>>;
 export type TableData = TableRecord | ModelOutput;
@@ -193,13 +194,6 @@ function menuFilename() {
   return typeof props.menu === "string" ? props.menu : "data";
 }
 
-function escapeCsvField(val: string): string {
-  if (val.includes(",") || val.includes('"') || val.includes("\n")) {
-    return `"${val.replace(/"/g, '""')}"`;
-  }
-  return val;
-}
-
 function toCsv(): string {
   if (typeof props.csv === "function") return props.csv();
   if (typeof props.csv === "string") return props.csv;

package/charts/LineChart/LineChart.md

@@ -1115,11 +1115,11 @@ until the user clicks Download:
 
 ## Accessibility
 
-The chart's individual marks aren't exposed to assistive tech, so the chart
-announces itself with a single accessible name. When the chart has a `title`,
-its root element gets `role="figure"` and an `aria-label` set to the title, so
-screen readers announce it as a labeled figure while the menu and download
-controls stay reachable.
+The chart's `<svg>` is exposed as a single labeled image so screen readers
+announce one accessible name instead of wandering through the individual marks.
+When the chart has a `title`, the `<svg>` gets `role="img"` and an `aria-label`
+set to the title. The menu and download controls live outside the `<svg>`, so
+they stay reachable regardless.
 
 Set `ariaLabel` to give screen readers a fuller summary than the visible title
 (it overrides `title` for the accessible name only):
@@ -1132,9 +1132,8 @@ Set `ariaLabel` to give screen readers a fuller summary than the visible title
 />
 ```
 
-Pass `role` to override the default, e.g. `role="img"` to expose the chart as a
-single image (note this hides the inner menu/download controls from assistive
-tech).
+Pass `role` to override the default `"img"` (e.g. `role="figure"`, or a role of
+your own).
 
 ## Props
 

package/charts/LineChart/LineChart.vue

@@ -240,12 +240,14 @@ const props = withDefaults(defineProps<LineChartProps>(), {
   yScaleType: "linear",
 });
 
-// Accessible name for the whole chart; falls back to the visible title.
+// Accessible name for the chart; falls back to the visible title.
 const chartAriaLabel = computed(() => props.ariaLabel ?? props.title);
-// Label the chart as a figure when it has a name (keeps inner controls
-// reachable, unlike role="img"). An explicit `role` prop always wins.
+// Expose the <svg> as a single labeled image so screen readers announce the
+// name instead of wandering through the individual marks. The menu/download
+// controls live outside the <svg>, so they stay reachable. An explicit `role`
+// prop always wins.
 const chartRole = computed(
-  () => props.role ?? (chartAriaLabel.value ? "figure" : undefined),
+  () => props.role ?? (chartAriaLabel.value ? "img" : undefined),
 );
 
 // The template root is a <Teleport>, so fallthrough attrs (class, style,
@@ -1056,8 +1058,6 @@ const positionedLegendItems = computed(() => {
       class="line-chart-wrapper"
       :class="{ 'is-fullscreen': isFullscreen }"
       :style="fullscreenStyle"
-      :role="chartRole || undefined"
-      :aria-label="chartAriaLabel || undefined"
     >
       <ChartMenu
         v-if="menu"
@@ -1068,7 +1068,13 @@ const positionedLegendItems = computed(() => {
       <div class="chart-sr-only" aria-live="polite">
         {{ isFullscreen ? "Chart expanded to fill window" : "" }}
       </div>
-      <svg ref="svgRef" :width="width" :height="totalHeight">
+      <svg
+        ref="svgRef"
+        :width="width"
+        :height="totalHeight"
+        :role="chartRole || undefined"
+        :aria-label="chartAriaLabel || undefined"
+      >
         <!-- title -->
         <text
           v-if="title"

package/charts/_shared/ChartZoomControls.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    canZoomIn?: boolean;
+    canZoomOut?: boolean;
+    /** Reset is a no-op at the identity transform — disable it there. */
+    canReset?: boolean;
+    /** Insets the stack further from the corner while the chart fills the
+     * window, matching the ChartMenu trigger area. */
+    isFullscreen?: boolean;
+  }>(),
+  { canZoomIn: true, canZoomOut: true, canReset: true, isFullscreen: false },
+);
+
+const emit = defineEmits<{
+  (e: "zoomIn"): void;
+  (e: "zoomOut"): void;
+  (e: "reset"): void;
+}>();
+</script>
+
+<template>
+  <div
+    class="chart-zoom-controls"
+    :class="{ 'chart-zoom-controls--expanded': isFullscreen }"
+  >
+    <button
+      type="button"
+      class="chart-zoom-button"
+      aria-label="Zoom in"
+      :disabled="!canZoomIn"
+      @click="emit('zoomIn')"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        aria-hidden="true"
+      >
+        <path d="M7 2v10M2 7h10" />
+      </svg>
+    </button>
+    <button
+      type="button"
+      class="chart-zoom-button"
+      aria-label="Zoom out"
+      :disabled="!canZoomOut"
+      @click="emit('zoomOut')"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        aria-hidden="true"
+      >
+        <path d="M2 7h10" />
+      </svg>
+    </button>
+    <button
+      type="button"
+      class="chart-zoom-button"
+      aria-label="Reset view"
+      :disabled="!canReset"
+      @click="emit('reset')"
+    >
+      <!-- Counterclockwise "reset" arrow (rotate-ccw). -->
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path
+          d="M1.75 7a5.25 5.25 0 1 0 5.25-5.25c-1.48 0-2.9.6-3.94 1.6L1.75 4.7"
+        />
+        <path d="M1.75 1.75v2.95h2.95" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.chart-zoom-controls {
+  position: absolute;
+  top: 0.5em;
+  left: 0.5em;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Mirror .chart-menu-trigger-area--expanded: while the chart fills the
+   window the wrapper's padding doesn't move absolute children, so inset
+   further for modal-style breathing room. */
+.chart-zoom-controls--expanded {
+  top: 1.25em;
+  left: 1.25em;
+}
+
+/* Same look as .chart-menu-button, but always visible — no hover reveal. */
+.chart-zoom-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: 0.25em;
+  background: var(--color-bg-0, #fff);
+  color: var(--color-text-secondary, #555);
+  cursor: pointer;
+}
+
+.chart-zoom-button:hover:not(:disabled) {
+  background: var(--color-bg-1, rgba(0, 0, 0, 0.05));
+  color: var(--color-text);
+}
+
+.chart-zoom-button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+</style>

package/charts/_shared/chartProps.ts

@@ -104,16 +104,16 @@ export interface ChartCommonProps {
   /** Styling for the chart title. See `TitleStyle`. */
   titleStyle?: TitleStyle;
   /**
-   * ARIA role for the chart's root element. Defaults to `"figure"` when an
-   * accessible name is present (from `ariaLabel` or `title`), so screen
-   * readers announce the chart as a labeled figure while its controls (menu,
-   * download) stay reachable. Pass `"img"` to expose it as a single image
-   * (which hides the inner controls from assistive tech), or your own role.
+   * ARIA role for the chart's `<svg>`. Defaults to `"img"` when an accessible
+   * name is present (from `ariaLabel` or `title`), so screen readers announce
+   * the chart as a single labeled image instead of exposing the individual
+   * marks. The menu and download controls sit outside the `<svg>`, so they
+   * stay reachable regardless. Pass your own role to override.
    */
   role?: string;
   /**
-   * Accessible name for the chart, announced by screen readers via the root
-   * element's `aria-label`. Defaults to the `title` prop. The individual
+   * Accessible name for the chart, announced by screen readers via the
+   * `<svg>`'s `aria-label`. Defaults to the `title` prop. The individual
    * marks aren't exposed to assistive tech, so set this to a short summary of
    * what the chart shows.
    */

package/charts/_shared/index.ts

@@ -1,16 +1,9 @@
-export {
-  snap,
-  niceStep,
-  intervalValues,
-  formatTick,
-  type ChartData,
-} from "./axes.js";
+export { snap, formatTick, type ChartData } from "./axes.js";
 export { computeTickValues, type TickValueOptions } from "./computeTicks.js";
 export {
   scaleFraction,
   clampExtentForScale,
   computeLogTickValues,
-  LOG_FLOOR,
   type ScaleType,
 } from "./scale.js";
 export { useChartSize, type ChartSizeOptions } from "./useChartSize.js";
@@ -36,6 +29,8 @@ export {
 } from "./useChartTooltip.js";
 export { useChartMenu, type ChartMenuOptions } from "./useChartMenu.js";
 export { useChartFullscreen } from "./useChartFullscreen.js";
+export { isTouchDevice } from "./touch.js";
+export { default as ChartZoomControls } from "./ChartZoomControls.vue";
 export { seriesToCsv, categoricalToCsv, type CsvSeries } from "./seriesCsv.js";
 export { default as ChartAnnotations } from "./ChartAnnotations.vue";
 export type { ChartAnnotation } from "./annotations.js";
@@ -54,13 +49,7 @@ export type {
   BlendMode,
   LineMarkStyle,
 } from "./chartProps.js";
-export {
-  parseRgb,
-  relativeLuminance,
-  resolveColorToRgb,
-  pickContrastColor,
-  type Rgb,
-} from "./contrast.js";
+export { resolveColorToRgb, pickContrastColor, type Rgb } from "./contrast.js";
 export {
   parseDate,
   isDateLike,

package/charts/_shared/seriesCsv.ts

@@ -51,7 +51,7 @@ export function categoricalToCsv(
       : [categoryHeader, ...series.map((s, i) => s.label || `series_${i}`)];
   const rows = [headers.join(",")];
   for (let r = 0; r < categories.length; r++) {
-    const cells = [escapeCsv(categories[r])];
+    const cells = [escapeCsvField(categories[r])];
     for (const s of series) {
       cells.push(r < s.data.length ? String(s.data[r]) : "");
     }
@@ -60,7 +60,7 @@ export function categoricalToCsv(
   return rows.join("\n");
 }
 
-function escapeCsv(value: string): string {
+export function escapeCsvField(value: string): string {
   if (value.includes(",") || value.includes('"') || value.includes("\n")) {
     return `"${value.replace(/"/g, '""')}"`;
   }

package/charts/_shared/touch.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether the current device has a touch screen. A function (not a
+ * module-level constant) so unit tests can mock it per-case and so SSR
+ * evaluation is deferred until an event actually needs the answer.
+ */
+export function isTouchDevice(): boolean {
+  return typeof window !== "undefined" && "ontouchstart" in window;
+}

package/charts/_shared/useChartFoundation.ts

@@ -153,7 +153,6 @@ export function useChartFoundation(opts: ChartFoundationOptions) {
     fullscreenStyle,
     teleportTarget,
     exitFullscreen,
-    measuredHeight,
   };
 }
 

package/components/MultiSelect/MultiSelect.md

@@ -128,9 +128,9 @@ MultiSelect is built on reka-ui's Combobox, which implements the
 | `label` | `string` | No | — |
 | `hideLabel` | `boolean` | No | — |
 | `ariaLabel` | `string` | No | — |
+| `hint` | `string` | No | — |
 | `options` | `MultiSelectOption[]` | Yes | — |
 | `placeholder` | `string` | No | — |
-| `hint` | `string` | No | — |
 
 
 ### MultiSelectOption

package/components/MultiSelect/MultiSelect.vue

@@ -10,11 +10,12 @@ import {
   ComboboxRoot,
   ComboboxTrigger,
   ComboboxViewport,
-  useId,
 } from "reka-ui";
 import { computed, nextTick, ref, watch } from "vue";
 import Icon from "../Icon/Icon.vue";
-import Hint from "../Hint/Hint.vue";
+import FieldLabel from "../_internal/FieldLabel.vue";
+import { useField, type FieldProps } from "../_internal/field";
+import "../_internal/listbox.css";
 
 export interface MultiSelectOption {
   value: string;
@@ -23,16 +24,14 @@ export interface MultiSelectOption {
 
 const model = defineModel<string[]>({ default: () => [] });
 
-const props = defineProps<{
-  label?: string;
-  hideLabel?: boolean;
-  ariaLabel?: string;
+interface Props extends FieldProps {
   options: MultiSelectOption[];
   placeholder?: string;
-  hint?: string;
-}>();
+}
+
+const props = defineProps<Props>();
 
-const id = useId();
+const { labelId, ariaProps } = useField(props);
 const fieldRef = ref<HTMLElement | null>(null);
 
 // In multiple mode the list stays open after a selection, so reka keeps
@@ -70,15 +69,13 @@ function onInputKeydown(event: KeyboardEvent) {
 
 <template>
   <div class="multi-select">
-    <label
-      v-if="label"
-      :id="`${id}-label`"
+    <FieldLabel
       class="multi-select-label"
-      :class="{ 'visually-hidden': hideLabel }"
-    >
-      {{ label }}
-      <Hint v-if="hint && !hideLabel" :text="hint" />
-    </label>
+      :label="label"
+      :label-id="labelId"
+      :hide-label="hideLabel"
+      :hint="hint"
+    />
     <ComboboxRoot
       v-model="model"
       multiple
@@ -107,8 +104,7 @@ function onInputKeydown(event: KeyboardEvent) {
           <ComboboxInput
             class="multi-select-input"
             :placeholder="selectedOptions.length ? undefined : placeholder"
-            :aria-labelledby="label ? `${id}-label` : undefined"
-            :aria-label="!label ? ariaLabel : undefined"
+            v-bind="ariaProps"
             @keydown="onInputKeydown"
           />
         </div>
@@ -117,38 +113,29 @@ function onInputKeydown(event: KeyboardEvent) {
           aria-label="Toggle options"
         >
           <span class="multi-select-icon" aria-hidden="true">
-            <svg
-              width="12"
-              height="12"
-              viewBox="0 0 12 12"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M3 4.5L6 7.5L9 4.5" />
-            </svg>
+            <Icon icon="keyboard_arrow_down" :size="16" />
           </span>
         </ComboboxTrigger>
       </ComboboxAnchor>
       <ComboboxPortal>
         <ComboboxContent
-          class="multi-select-content"
+          class="cfasim-listbox-content multi-select-content"
           position="popper"
           :side-offset="4"
           :body-lock="false"
         >
-          <ComboboxViewport class="multi-select-viewport">
-            <ComboboxEmpty class="multi-select-empty">No matches</ComboboxEmpty>
+          <ComboboxViewport class="cfasim-listbox-viewport">
+            <ComboboxEmpty class="cfasim-listbox-empty">
+              No matches
+            </ComboboxEmpty>
             <ComboboxItem
               v-for="opt in options"
               :key="opt.value"
               :value="opt.value"
-              class="multi-select-item"
+              class="cfasim-listbox-item"
             >
               <span>{{ opt.label }}</span>
-              <ComboboxItemIndicator class="multi-select-indicator">
+              <ComboboxItemIndicator class="cfasim-listbox-indicator">
                 <Icon icon="check" :size="14" />
               </ComboboxItemIndicator>
             </ComboboxItem>
@@ -284,55 +271,9 @@ function onInputKeydown(event: KeyboardEvent) {
 </style>
 
 <style>
+/* Sizing only — the dropdown skin lives in _internal/listbox.css. */
 .multi-select-content {
-  z-index: 100;
-  background: var(--color-bg-0);
-  border: 1px solid var(--color-border);
-  border-radius: 0.25em;
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -2px rgba(0, 0, 0, 0.1);
   width: var(--reka-combobox-trigger-width);
   max-height: var(--reka-combobox-content-available-height);
 }
-
-.multi-select-viewport {
-  padding: 0.25em;
-}
-
-.multi-select-empty {
-  padding: 0.5em;
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  text-align: center;
-}
-
-.multi-select-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5em;
-  padding: 0.25em 0.5em;
-  border-radius: 0.25em;
-  font-size: var(--font-size-sm);
-  white-space: nowrap;
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-}
-
-.multi-select-item[data-highlighted] {
-  background: var(--color-primary);
-  color: white;
-}
-
-.multi-select-item[data-state="checked"] {
-  font-weight: 600;
-}
-
-.multi-select-indicator {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
 </style>

package/components/NumberInput/NumberInput.md

@@ -467,19 +467,19 @@ the input visually.
 |------|------|----------|---------|
 | `label` | `string` | No | — |
 | `hideLabel` | `boolean` | No | — |
+| `ariaLabel` | `string` | No | — |
+| `hint` | `string` | No | — |
 | `placeholder` | `string` | No | — |
 | `step` | `number` | No | — |
 | `min` | `number` | No | — |
 | `max` | `number` | No | — |
-| `hint` | `string` | No | — |
-| `percent` | `boolean` | No | — |
+| `percent` | `1"`) may not round-trip through the text input — use
+  // `percent: true` for value scaling and `format` for display shaping.
+  format?: NumberFormat` | Yes | — |
 | `slider` | `boolean` | No | — |
 | `live` | `boolean` | No | — |
 | `numberType` | `"integer" \| "float"` | No | — |
 | `required` | `boolean` | No | — |
 | `decimals` | `number` | No | — |
-| `percent` | `1"`) may not round-trip through the text input — use
-  // `percent: true` for value scaling and `format` for display shaping.
-  format?: NumberFormat` | Yes | — |
 | `sliderDisplay` | `(value: number) => string` | No | — |