@cfasim-ui/docs 0.6.0 → 0.6.1

package/charts/LineChart/LineChart.md

@@ -180,6 +180,68 @@ grows automatically for additional lines.
   </template>
 </ComponentDemo>
 
+### Font sizes
+
+Every text element on the chart has its own style prop and default size (in px). The text-styling props (`axisLabelStyle`, `tickLabelStyle`, `legendStyle`) take a `LabelStyle` — `{ fontSize?, color?, fontWeight? }` — and `titleStyle` adds `lineHeight` and `align`. Unset fields fall back to the defaults below.
+
+| Chart part                                  | Prop / field                         | Type         | Default size |
+| ------------------------------------------- | ------------------------------------ | ------------ | -----------: |
+| Title                                       | `titleStyle`                         | `TitleStyle` |           14 |
+| Axis labels (`xLabel` / `yLabel`)           | `axisLabelStyle`                     | `LabelStyle` |           13 |
+| Axis tick labels (the numbers on each axis) | `tickLabelStyle`                     | `LabelStyle` |           10 |
+| Inline legend                               | `legendStyle`                        | `LabelStyle` |           11 |
+| Area section label                          | `areaSection.inlineLabelStyle`       | `LabelStyle` |           11 |
+| Area section description                    | `areaSection.inlineDescriptionStyle` | `LabelStyle` |           11 |
+| Annotation text                             | `annotation.fontSize`                | `number`     |           13 |
+
+These are single styles applied to both axes — there's no separate x vs y font size. The same props (except the LineChart-only area-section fields) exist on `BarChart`, since both compose `ChartCommonProps`.
+
+<ComponentDemo>
+  <LineChart
+    :series="[
+      { data: [0, 12, 28, 45, 60, 55, 40, 25, 12], color: '#0057b7', legend: 'No interventions' },
+      { data: [0, 8, 18, 30, 40, 35, 25, 14, 6], color: '#ef4444', legend: 'Masking + distancing' },
+    ]"
+    :height="240"
+    title="Daily ED visits"
+    x-label="Days"
+    y-label="Cases"
+    :title-style="{ fontSize: 18 }"
+    :axis-label-style="{ fontSize: 15, fontWeight: 700 }"
+    :tick-label-style="{ fontSize: 13 }"
+    :legend-style="{ fontSize: 14 }"
+  />
+
+<template #code>
+
+```vue
+<LineChart
+  :series="[
+    {
+      data: [0, 12, 28, 45, 60, 55, 40, 25, 12],
+      color: '#0057b7',
+      legend: 'No interventions',
+    },
+    {
+      data: [0, 8, 18, 30, 40, 35, 25, 14, 6],
+      color: '#ef4444',
+      legend: 'Masking + distancing',
+    },
+  ]"
+  :height="240"
+  title="Daily ED visits"
+  x-label="Days"
+  y-label="Cases"
+  :title-style="{ fontSize: 18 }"
+  :axis-label-style="{ fontSize: 15, fontWeight: 700 }"
+  :tick-label-style="{ fontSize: 13 }"
+  :legend-style="{ fontSize: 14 }"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
 ### Multiple series
 
 <ComponentDemo>
@@ -628,7 +690,9 @@ inverts. The white `outline`, if any, is unaffected.
 Use the `areas` prop to fill a band between two y-series — useful for
 confidence intervals or min/max envelopes around a mean line. Each `Area`
 takes parallel `upper` and `lower` arrays (and an optional `x` array, just
-like `Series`).
+like `Series`). Set `blendMode` on an `Area` to apply a CSS
+`mix-blend-mode` to its fill so overlapping bands combine their colors
+(e.g. `"multiply"`) instead of the later one obscuring the earlier.
 
 <ComponentDemo>
   <LineChart
@@ -1103,6 +1167,7 @@ interface Area {
   x?: LineChartData; // optional parallel x-values
   color?: string;
   opacity?: number;
+  blendMode?: BlendMode; // CSS mix-blend-mode for the fill
 }
 ```
 

package/charts/LineChart/LineChart.vue

@@ -114,6 +114,12 @@ export interface Area {
   x?: LineChartXInput;
   color?: string;
   opacity?: number;
+  /**
+   * CSS `mix-blend-mode` applied to the area fill. Lets overlapping
+   * areas (e.g. confidence bands) combine their colors instead of one
+   * obscuring the other.
+   */
+  blendMode?: BlendMode;
 }
 
 export interface AreaSection {
@@ -1218,6 +1224,7 @@ const positionedLegendItems = computed(() => {
           :fill="a.color ?? 'currentColor'"
           :fill-opacity="a.opacity ?? 0.2"
           stroke="none"
+          :style="a.blendMode ? { mixBlendMode: a.blendMode } : undefined"
         />
         <!-- data lines and dots -->
         <template v-for="(s, i) in allSeries" :key="i">

package/components/SelectBox/SelectBox.md

@@ -1,12 +1,15 @@
 # SelectBox
 
-A dropdown select built on reka-ui.
+A single-select dropdown built on reka-ui. Set `autocomplete` to turn it into a
+filterable single-select combobox: type to narrow the options, just like
+[MultiSelect](./multi-select) but bound to a single `string`.
 
 ## Examples
 
 <script setup>
 import { ref } from 'vue'
 const interval = ref('weekly')
+const state = ref('')
 </script>
 
 <ComponentDemo>
@@ -83,6 +86,73 @@ DOM.
   </template>
 </ComponentDemo>
 
+### Autocomplete
+
+Add `autocomplete` to make the field filterable. Type to narrow the list; the
+selected option's label fills the input. `v-model` is still a single `string`.
+
+<ComponentDemo>
+  <div style="width: 240px">
+    <SelectBox
+      v-model="state"
+      autocomplete
+      label="State"
+      placeholder="Search states…"
+      :options="[
+        { value: 'ca', label: 'California' },
+        { value: 'ny', label: 'New York' },
+        { value: 'tx', label: 'Texas' },
+        { value: 'wa', label: 'Washington' },
+        { value: 'fl', label: 'Florida' },
+      ]"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const state = ref("");
+</script>
+
+<SelectBox
+  v-model="state"
+  autocomplete
+  label="State"
+  placeholder="Search states…"
+  :options="[
+    { value: 'ca', label: 'California' },
+    { value: 'ny', label: 'New York' },
+    { value: 'tx', label: 'Texas' },
+    { value: 'wa', label: 'Washington' },
+    { value: 'fl', label: 'Florida' },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+## Accessibility
+
+In the default mode the field is a reka-ui Select; with `autocomplete` it's a
+reka-ui Combobox following the
+[ARIA combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/):
+
+- The input has `role="combobox"` with `aria-expanded`, `aria-controls`, and
+  `aria-autocomplete="list"`; the popup is a `role="listbox"` and each option a
+  `role="option"` that reflects its state via `aria-selected`.
+- Keyboard support is handled for you: type to filter, ↑/↓ to move through the
+  list, Enter to select the highlighted option, and Escape to close.
+- Pass `label` so the field is named by a real `<label>`. In autocomplete mode
+  the label is also wired to the input via `for`/`id`, so clicking it focuses
+  the field; use `hide-label` to keep the label for screen readers while hiding
+  it visually, or `aria-label` when there's no visible label text.
+- The chevron is a labelled toggle (`aria-label="Toggle options"`) kept out of
+  the tab order, and native browser autofill is disabled so it can't cover the
+  option list.
+
 ## Model
 
 | Name | Type |
@@ -98,6 +168,7 @@ DOM.
 | `ariaLabel` | `string` | No | — |
 | `options` | `SelectOption[]` | Yes | — |
 | `placeholder` | `string` | No | — |
+| `autocomplete` | `boolean` | No | — |
 
 
 ### SelectOption

package/components/SelectBox/SelectBox.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
 import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport,
   SelectContent,
   SelectItem,
   SelectItemIndicator,
@@ -25,9 +35,16 @@ const props = defineProps<{
   ariaLabel?: string;
   options: SelectOption[];
   placeholder?: string;
+  /** Turn the field into a filterable single-select autocomplete (combobox). */
+  autocomplete?: boolean;
 }>();
 
 const id = useId();
+
+// Shows the selected option's label in the combobox input when not filtering.
+function displayValue(value: string) {
+  return props.options.find((o) => o.value === value)?.label ?? "";
+}
 </script>
 
 <template>
@@ -35,11 +52,81 @@ const id = useId();
     <label
       v-if="label"
       :id="`${id}-label`"
+      :for="autocomplete ? `${id}-input` : undefined"
       class="select-label"
       :class="{ 'visually-hidden': hideLabel }"
       >{{ label }}</label
     >
-    <SelectRoot v-model="model">
+
+    <ComboboxRoot
+      v-if="autocomplete"
+      v-model="model"
+      open-on-click
+      class="select-combobox-root"
+    >
+      <ComboboxAnchor class="select-anchor">
+        <ComboboxInput
+          :id="`${id}-input`"
+          class="select-input"
+          :display-value="displayValue"
+          :placeholder="placeholder"
+          :aria-labelledby="props.label ? `${id}-label` : undefined"
+          :aria-label="!props.label ? props.ariaLabel : undefined"
+        />
+        <ComboboxTrigger class="select-icon-button" aria-label="Toggle options">
+          <span class="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>
+          </span>
+        </ComboboxTrigger>
+      </ComboboxAnchor>
+      <ComboboxPortal>
+        <ComboboxContent
+          class="select-content select-content-autocomplete"
+          position="popper"
+          :side-offset="4"
+          :body-lock="false"
+        >
+          <ComboboxViewport class="select-viewport">
+            <ComboboxEmpty class="select-empty">No matches</ComboboxEmpty>
+            <ComboboxItem
+              v-for="opt in options"
+              :key="opt.value"
+              :value="opt.value"
+              class="select-item"
+            >
+              <span>{{ opt.label }}</span>
+              <ComboboxItemIndicator class="select-indicator">
+                <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="M2 6L5 9L10 3" />
+                </svg>
+              </ComboboxItemIndicator>
+            </ComboboxItem>
+          </ComboboxViewport>
+        </ComboboxContent>
+      </ComboboxPortal>
+    </ComboboxRoot>
+
+    <SelectRoot v-else v-model="model">
       <SelectTrigger
         class="select-trigger"
         :aria-labelledby="props.label ? `${id}-label` : undefined"
@@ -140,6 +227,62 @@ const id = useId();
   color: var(--color-text-secondary);
 }
 
+/* Autocomplete (combobox) field */
+.select-anchor {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  height: 2.5em;
+  padding: 0 0.5em 0 0.75em;
+  font-size: var(--font-size-sm);
+  background: var(--color-bg-0);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375em;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.select-anchor:hover {
+  border-color: var(--color-border-hover);
+}
+
+.select-anchor:focus-within {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+.select-input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+}
+
+.select-input:focus {
+  outline: none;
+}
+
+.select-input::placeholder {
+  color: var(--color-text-secondary);
+}
+
+.select-icon-button {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+
 .select-icon {
   display: flex;
   align-items: center;
@@ -160,10 +303,23 @@ const id = useId();
   max-height: var(--reka-select-content-available-height);
 }
 
+/* Combobox exposes the anchor width under its own custom property. */
+.select-content-autocomplete {
+  width: var(--reka-combobox-trigger-width);
+  max-height: var(--reka-combobox-content-available-height);
+}
+
 .select-viewport {
   padding: 0.25em;
 }
 
+.select-empty {
+  padding: 0.5em;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+
 .select-item {
   display: flex;
   align-items: center;

package/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.0",
+  "version": "0.6.1",
   "package": "@cfasim-ui/docs",
   "content": {
     "components": [
@@ -136,7 +136,15 @@
         "slug": "select-box",
         "docs": "components/SelectBox/SelectBox.md",
         "source": "components/SelectBox/SelectBox.vue",
-        "keywords": []
+        "keywords": [
+          "select",
+          "dropdown",
+          "autocomplete",
+          "combobox",
+          "filter",
+          "search",
+          "typeahead"
+        ]
       },
       {
         "name": "SidebarLayout",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/docs",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "LLM-friendly component and chart documentation for cfasim-ui",
   "license": "Apache-2.0",
   "repository": {