@xleddyl/443-components-vue 0.4.0 → 0.6.0

package/README.md

@@ -108,6 +108,8 @@ Tokens live on `.k-root`, never on `:root`. Override them on a root element: Roo
 
 Input tokens, declared only on the outermost root so nested roots inherit them: `--k-accent`, `--k-accent-contrast`, `--k-font-sans`, `--k-font-mono`, `--k-font-size`, `--k-font-features`, `--k-line-height`, `--k-radius-scale`. Every other token (surfaces, text, lines, accent shades, status colors, radii, shadows, motion) is derived per root, so a nested root with its own `theme` or `accent` re-themes a region. The full list is in [CONVENTIONS.md](./CONVENTIONS.md#tokens).
 
+Contrast is part of the tokens: `--k-text-muted` is the lightest text color (4.5:1), `--k-text-dimmed` is for icons and decoration (3:1), `--k-ring` is an opaque focus color (3:1 on every surface), and `--k-danger-text`, `--k-success-text`, `--k-warning-text`, `--k-info-text` color status text (4.5:1, also on soft tints). Every preset sets them for light and dark; keep the same ratios when you override them.
+
 Themes: `data-theme="light"` or `"dark"` forces the scheme, `system` (or no attribute) follows the OS. `useTheme()` returns `preference`, `set()` and `cycle()`; `KThemeSwitch` is a ready control.
 
 Titles (headings, `k-title`, `k-display`, PageHeader, Card, Modal and Drawer titles, Brand, Stat values, auth and error titles) use `--k-font-display`, which falls back to `--k-font-sans`. Set it (or the `fontDisplay` prop of `Root`) for a separate display face.
@@ -209,6 +211,7 @@ k: { locale: 'it', messages: { it: { common: { cancel: 'Indietro' } } } }
 - With `@nuxtjs/i18n` the module follows the current i18n locale (a `de-CH` locale uses `de` overrides, then English).
 - A new language is a full `messages[code]` object, or `defineLocale({ code: 'de', messages: {...} })` passed to `createLocale()` / `provideLocale()` in plain Vue.
 - `useLocale()` returns `{ locale, t }` for your own components (`t('common.cancel')`).
+- The outermost `Root` sets `lang` and `dir` from the provided locale, and the Nuxt module sets them on `<html>` unless `@nuxtjs/i18n` manages the document language.
 - The `*Label` and `*Text` props of each component still override a single instance.
 
 ## Forms
@@ -260,7 +263,7 @@ Nested forms. Overlays stay in the DOM, so a `Form` inside a Modal opened from a
 </KForm>
 ```
 
-Several controls in one `FormField`. Only the primary control takes the field id, name, description and invalid state. Wrap secondary controls (a search input above a Tree) in `<KFieldBoundary auxiliary>`, or call `useFieldControl({ role: 'auxiliary' })` in your own control: they keep their own id and only follow `disabled`. `<KFieldBoundary>` without `auxiliary` cuts the field context completely, like the overlays do. A primary control that is not labelable (a tree, a group, a contenteditable editor) passes `useFieldControl({ labelable: false })`; `FormField` then drops `for` from its label and the control uses `aria-labelledby` with `field.labelId` instead. `Tree`, `CheckboxGroup`, `RadioGroup`, `SegmentedControl` and `RichTextEditor` already do.
+Several controls in one `FormField`. Only the primary control takes the field id, name, description and invalid state. Wrap secondary controls (a search input above a Tree) in `<KFieldBoundary auxiliary>`, or call `useFieldControl({ role: 'auxiliary' })` in your own control: they keep their own id and only follow `disabled`. `<KFieldBoundary>` without `auxiliary` cuts the field context completely, like the overlays do. A primary control that is not labelable (a tree, a group, a contenteditable editor) passes `useFieldControl({ labelable: false })`; `FormField` then drops `for` from its label and the control uses `aria-labelledby` with `control.labelledBy` (the label id, or `undefined` when the field has no label). A control that cannot carry `required` itself (a button trigger, a fieldset) passes `requiredHint: true`: `FormField` then adds a visually hidden "(required)" to its label. Errors and warnings render inside a polite live region, prefixed with a hidden "Error:" or "Warning:". `Tree`, `CheckboxGroup`, `RadioGroup`, `SegmentedControl` and `RichTextEditor` already do.
 
 ```vue
 <KFormField label="Folder">
@@ -546,7 +549,7 @@ export default defineAppConfig({
 
 The account row opens the SettingsModal (`account.action: 'menu'` with `account.menu` for a dropdown instead). Sections from `app.config` can be built-ins or links (`to`); `settings.presets` limits the preset cards, `settings.signOutTo` adds Sign out.
 
-Pages pick them with `definePageMeta({ layout: 'k-dashboard', title: 'Items' })` or `layout: 'k-auth'` (the auth card shows `title` and `description` from the page meta). Breadcrumbs come from `meta.breadcrumbs`, otherwise from the matching navigation item (plus `meta.title` on deeper pages). At runtime `useDashboard().value = { account, breadcrumbs, badges: { '/items': 12 } }` overrides the account, the breadcrumbs and the badges.
+Pages pick them with `definePageMeta({ layout: 'k-dashboard', title: 'Items' })` or `layout: 'k-auth'` (the auth card shows `title` and `description` from the page meta). Both layouts set the document title from `meta.title` and the brand name (`Items · Acme`; a page's own `useHead({ title })` wins) and announce route changes through a polite live region, unless the app already renders `<NuxtRouteAnnouncer />`. Breadcrumbs come from `meta.breadcrumbs`, otherwise from the matching navigation item (plus `meta.title` on deeper pages). At runtime `useDashboard().value = { account, breadcrumbs, badges: { '/items': 12 } }` overrides the account, the breadcrumbs and the badges. Set it in route middleware (`definePageMeta({ middleware })`) or a plugin, not in the page `setup`: the layout renders the sidebar and breadcrumbs before the page, so a value set during the page render would differ between the server HTML and hydration.
 
 ### Starter
 
@@ -567,13 +570,29 @@ Components are typed for `strictTemplates`: native attributes and listeners of t
 
 ## Accessibility
 
+The components target WCAG 2.2 AA in every preset and both themes.
+
 - Native elements first (`button`, `a`, `input`, `select`, `dialog`, `table`), full ARIA patterns where none fits (combobox, listbox, menu, tabs, tree, radio group, grid calendar).
-- Labels, descriptions and errors are wired through `FormField` (`for`/`id`, `aria-describedby`, `aria-invalid`, required state). Every form control works inside it.
-- Keyboard: arrows inside composite widgets, Escape closes overlays, focus moves into overlays on open and returns to the trigger on close, modals trap focus natively. Tag supports Delete and Backspace on its remove button.
-- Icon-only buttons need an `aria-label` (Button warns in development). Decorative icons are hidden from assistive technology.
-- Toasts are announced through polite or assertive live regions. While a modal dialog is open the toast stack and the live regions move inside that dialog, so they stay reachable and announced (the rest of the page is inert).
+- Labels, descriptions and errors are wired through `FormField` (`for`/`id`, `aria-describedby`, `aria-invalid`, required state, hidden "(required)" for controls that cannot carry it). Every form control works inside it, and errors are announced when they appear.
+- Every control has an accessible name: components that can end up unnamed take a `label` prop (falling back to the FormField label) and warn in development. Icon-only buttons need an `aria-label` (Button warns in development). Decorative icons are hidden from assistive technology.
+- Keyboard: arrows inside composite widgets, Escape closes overlays, focus moves into overlays on open and returns to the trigger on close, modals trap focus natively. Tag supports Delete and Backspace on its remove button. Busy buttons (`loading`, or a submitting form) keep focus: they use `aria-disabled` and ignore clicks instead of becoming disabled.
+- Focus is a 2px opaque ring at 3:1 or more; text is 4.5:1 or more, icons and control boundaries 3:1 or more.
+- Windows forced colors (high contrast) keep focus rings, checked, selected and current states, switch thumbs, progress and meter fills, and overlay borders.
+- Pointer targets are at least 24px.
+- Status changes (loading, results, copy, uploads, sorting, toasts) are announced through persistent live regions. While a modal dialog is open the toast stack and the live regions move inside that dialog, so they stay reachable and announced (the rest of the page is inert).
 - `prefers-reduced-motion` disables animations inside every root. Colors are never the only signal.
 
+Accessibility related props and defaults:
+
+- Accessible names: `label` on `RadioGroup` and `CheckboxGroup` (alias of `legend`), `SegmentedControl`, `Slider`, `PinInput`, `InputGroup`, `Tabs`, `Toolbar`, `Modal`, `Drawer` and `useModal`/`useDrawer` options (when there is no `title`), `Card` (stretched link without a title), `ChartLegend`. `AppShell` takes `closeLabel` for the close button of the mobile navigation, which opens as a named modal dialog. `Sidebar`'s collapse button keeps one label (`collapseLabel`) and exposes the state with `aria-expanded`.
+- Heading levels: `level` on `Calendar`, `DatePicker`, `ChartPanel`, `ErrorPage` and `NotFoundPage`; page templates pass `level + 1` to their sections and empty states.
+- Live roles are opt in on `Alert`: pass `role="alert"` or `role="status"` for messages that appear at runtime; static banners get none. Without a title the tone is spoken from a hidden prefix.
+- `Toolbar` uses roving focus by default (`:roving="false"` renders a plain named group).
+- Copy props that contain a value are templates: `removeLabel` (`'Remove {label}'`) on `Tag`, `Combobox` and `FileInput`, `moreLabel` (`'{count} more'`) on `AvatarGroup`, `pageLabel` (`'Page {page}'`) on `Pagination`. `ListPage` takes `resultsText: (count) => string` for the announced result count, `ColorInput` takes `invalidText`.
+- `ColorInput` `swatches` accept `{ value, label }` objects (a radio group named by `label` or the hex). `PasswordInput` picks `autocomplete="new-password"` with `generate` or `strength`, `current-password` otherwise.
+- `Tree` with `reorderable` shows small move buttons (up, down, indent, outdent) on the hovered or focused row, as a single pointer alternative to dragging. Set `patterns` on `LineChart` and `BarChart` to tell series apart without color (dash and point style per line, a fill pattern per bar series, mirrored in the legend); it is off by default.
+- `DataGrid` translates the AG Grid ARIA strings through the catalog (`grid.*`; your own `localeText` still wins) and announces row count changes.
+
 ## Browser support
 
 - Required: native `popover`, `<dialog>`, `:where()`, cascade layers, `color-mix()`, `light-dark()` (Chrome and Edge 123, Firefox 128, Safari 17.5).

package/dist/chart/BarChart.vue

@@ -10,7 +10,7 @@
          :position="legendPosition"
          @toggle="toggle"
       />
-      <ChartSummary :caption="label" :labels="labels" :rows="series" />
+      <ChartSummary :caption="label" :labels="labels" :rows="series" :format-value="formatValue" />
    </div>
 </template>
 
@@ -22,6 +22,7 @@ import ChartSummary from "./ChartSummary.vue";
 import { buildCartesianOptions } from "./options";
 import { registerChartModules } from "./register";
 import { useChartSurface } from "./useChartSurface";
+import { barFill, seriesPattern } from "./patterns";
 registerChartModules();
 const props = defineProps({
   labels: { type: Array, required: true },
@@ -32,6 +33,7 @@ const props = defineProps({
   legendPosition: { type: String, required: false, default: "bottom" },
   stacked: { type: Boolean, required: false },
   horizontal: { type: Boolean, required: false },
+  patterns: { type: Boolean, required: false },
   formatValue: { type: Function, required: false },
   options: { type: null, required: false }
 });
@@ -46,17 +48,22 @@ const legendItems = computed(
   () => props.series.map((entry, index) => ({
     label: entry.label,
     color: colorAt(index),
-    hidden: isHidden(index)
+    hidden: isHidden(index),
+    pattern: props.patterns ? seriesPattern(index) : void 0
   }))
 );
+function fillAt(index) {
+  const color = colorAt(index);
+  return props.patterns ? barFill(color, seriesPattern(index), colors.value.surface) : color;
+}
 const chartData = computed(() => ({
   labels: props.labels,
   datasets: props.series.map((entry, index) => ({
     label: entry.label,
     data: entry.data,
     hidden: isHidden(index),
-    backgroundColor: colorAt(index),
-    hoverBackgroundColor: colorAt(index),
+    backgroundColor: fillAt(index),
+    hoverBackgroundColor: fillAt(index),
     borderRadius: 4,
     borderSkipped: false,
     maxBarThickness: 36

package/dist/chart/BarChart.vue.d.ts

@@ -9,6 +9,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     legendPosition?: ChartLegendPosition;
     stacked?: boolean;
     horizontal?: boolean;
+    patterns?: boolean;
     formatValue?: ChartValueFormatter;
     options?: ChartOptions<"bar">;
     innerHTML?: string | undefined | undefined;
@@ -212,6 +213,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     legendPosition?: ChartLegendPosition;
     stacked?: boolean;
     horizontal?: boolean;
+    patterns?: boolean;
     formatValue?: ChartValueFormatter;
     options?: ChartOptions<"bar">;
     innerHTML?: string | undefined | undefined;

package/dist/chart/ChartLegend.vue

@@ -1,5 +1,5 @@
 <template>
-   <ul class="k-chart-legend" :class="`is-${position}`">
+   <ul class="k-chart-legend" :class="`is-${position}`" role="list" :aria-label="legendLabel">
       <li v-for="(item, index) in items" :key="item.label">
          <button
             type="button"
@@ -8,7 +8,37 @@
             :aria-pressed="!item.hidden"
             @click="emit('toggle', index)"
          >
-            <span class="k-chart-legend-swatch" :style="{ background: item.color }" />
+            <svg
+               v-if="item.dash"
+               class="k-chart-legend-line"
+               viewBox="0 0 18 10"
+               aria-hidden="true"
+               :stroke="item.color"
+            >
+               <line
+                  x1="1"
+                  y1="5"
+                  x2="17"
+                  y2="5"
+                  stroke-width="2"
+                  :stroke-dasharray="dashArray(item.dash)"
+               />
+               <circle v-if="item.point === 'circle'" cx="9" cy="5" r="2.5" />
+               <rect v-else-if="item.point === 'rect'" x="6.5" y="2.5" width="5" height="5" />
+               <polygon v-else-if="item.point === 'triangle'" points="9,2 12,7.5 6,7.5" />
+               <polygon v-else-if="item.point === 'rectRot'" points="9,1.5 12.5,5 9,8.5 5.5,5" />
+               <polygon
+                  v-else-if="item.point === 'star'"
+                  points="9,1.5 10,4 12.5,4 10.5,5.75 11.25,8.5 9,7 6.75,8.5 7.5,5.75 5.5,4 8,4"
+               />
+               <path v-else-if="item.point === 'crossRot'" d="M6.5 2.5l5 5m0-5l-5 5" />
+            </svg>
+            <span
+               v-else
+               class="k-chart-legend-swatch"
+               aria-hidden="true"
+               :style="{ background: patternBackground(item.color, item.pattern) }"
+            />
             <span class="k-chart-legend-label">{{ item.label }}</span>
             <span v-if="item.value" class="k-chart-legend-value k-tabular">{{ item.value }}</span>
          </button>
@@ -17,9 +47,18 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from "vue";
+import { useLocale } from "../composables/useLocale";
+import { patternBackground } from "./patterns";
+const props = defineProps({
   items: { type: Array, required: true },
-  position: { type: String, required: false, default: "bottom" }
+  position: { type: String, required: false, default: "bottom" },
+  label: { type: String, required: false }
 });
 const emit = defineEmits(["toggle"]);
+const { t } = useLocale();
+const legendLabel = computed(() => props.label ?? t("chart.legend"));
+function dashArray(dash) {
+  return dash.length ? dash.map((value) => value * 0.5).join(" ") : void 0;
+}
 </script>

package/dist/chart/ChartLegend.vue.d.ts

@@ -2,12 +2,14 @@ import type { ChartLegendItem, ChartLegendPosition } from './types';
 declare const __VLS_export: import("vue").DefineComponent<{
     items: ChartLegendItem[];
     position?: ChartLegendPosition;
+    label?: string;
     key?: PropertyKey | undefined;
     prefix?: string | undefined | undefined;
     title?: string | undefined | undefined;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -162,7 +164,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -198,12 +199,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }, string, import("vue").PublicProps, Readonly<{
     items: ChartLegendItem[];
     position?: ChartLegendPosition;
+    label?: string;
     key?: PropertyKey | undefined;
     prefix?: string | undefined | undefined;
     title?: string | undefined | undefined;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -358,7 +361,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;

package/dist/chart/ChartPanel.vue

@@ -2,24 +2,20 @@
    <section
       class="k-chart-panel"
       :aria-busy="loading ? 'true' : void 0"
-      :aria-labelledby="titleId"
+      :aria-labelledby="title ? titleId : void 0"
    >
       <header v-if="title || $slots.actions || $slots.legend" class="k-chart-panel-header">
          <div class="k-chart-panel-heading">
-            <h3 v-if="title" :id="titleId" class="k-chart-panel-title">{{ title }}</h3>
+            <component :is="headingTag" v-if="title" :id="titleId" class="k-chart-panel-title">{{
+               title
+            }}</component>
             <p v-if="description" class="k-chart-panel-description">{{ description }}</p>
          </div>
          <div v-if="$slots.legend" class="k-chart-panel-legend"><slot name="legend" /></div>
          <div v-if="$slots.actions" class="k-chart-panel-actions"><slot name="actions" /></div>
       </header>
       <div class="k-chart-panel-body">
-         <div
-            v-if="loading"
-            class="k-chart-skeleton"
-            :style="{ height }"
-            role="status"
-            :aria-label="loadingLabel"
-         >
+         <div v-if="loading" class="k-chart-skeleton" :style="{ height }" aria-hidden="true">
             <span v-for="bar in skeletonBars" :key="bar" :style="{ height: `${bar}%` }" />
          </div>
          <div v-else-if="empty" class="k-chart-empty" :style="{ height }">
@@ -28,12 +24,14 @@
          <slot v-else />
       </div>
       <footer v-if="$slots.footer" class="k-chart-panel-footer"><slot name="footer" /></footer>
+      <LiveRegion :message="loading ? loadingLabel : ''" />
    </section>
 </template>
 
 <script setup>
 import { computed, useId } from "vue";
 import { useLocale } from "../composables/useLocale";
+import LiveRegion from "../internal/core/LiveRegion.vue";
 const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -41,11 +39,13 @@ const props = defineProps({
   empty: { type: Boolean, required: false },
   emptyText: { type: String, required: false },
   loadingText: { type: String, required: false },
-  height: { type: String, required: false, default: "16rem" }
+  height: { type: String, required: false, default: "16rem" },
+  level: { type: Number, required: false, default: 3 }
 });
 const { t } = useLocale();
 const emptyLabel = computed(() => props.emptyText ?? t("chart.empty"));
 const loadingLabel = computed(() => props.loadingText ?? t("chart.loading"));
 const titleId = useId();
+const headingTag = computed(() => `h${props.level}`);
 const skeletonBars = [42, 68, 54, 86, 62, 74, 48, 92, 58, 70, 52, 80];
 </script>

package/dist/chart/ChartPanel.vue.d.ts

@@ -1,14 +1,14 @@
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_6: {}, __VLS_8: {}, __VLS_10: {};
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
 type __VLS_Slots = {} & {
-    legend?: (props: typeof __VLS_1) => any;
+    legend?: (props: typeof __VLS_7) => any;
 } & {
-    actions?: (props: typeof __VLS_3) => any;
+    actions?: (props: typeof __VLS_9) => any;
 } & {
-    empty?: (props: typeof __VLS_6) => any;
+    empty?: (props: typeof __VLS_12) => any;
 } & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 } & {
-    footer?: (props: typeof __VLS_10) => any;
+    footer?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     title?: string | undefined;
@@ -18,6 +18,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     emptyText?: string;
     loadingText?: string;
     height?: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     style?: import("vue").StyleValue;
@@ -62,7 +63,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../index.ts").PopoverMode | "" | boolean) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -217,6 +218,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     emptyText?: string;
     loadingText?: string;
     height?: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     style?: import("vue").StyleValue;
@@ -261,7 +263,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../index.ts").PopoverMode | "" | boolean) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -410,6 +412,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     height: string;
+    level: 1 | 2 | 4 | 3 | 5 | 6;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/chart/ChartSummary.vue

@@ -14,16 +14,21 @@
       <tbody>
          <tr v-for="(label, index) in labels" :key="label">
             <th scope="row">{{ label }}</th>
-            <td v-for="series in rows" :key="series.label">{{ series.data[index] ?? "" }}</td>
+            <td v-for="series in rows" :key="series.label">{{ cellText(series.data[index]) }}</td>
          </tr>
       </tbody>
    </table>
 </template>
 
 <script setup>
-defineProps({
+const props = defineProps({
   caption: { type: String, required: true },
   labels: { type: Array, required: true },
-  rows: { type: Array, required: true }
+  rows: { type: Array, required: true },
+  formatValue: { type: Function, required: false }
 });
+function cellText(value) {
+  if (value === null || value === void 0) return "";
+  return props.formatValue ? props.formatValue(value) : String(value);
+}
 </script>

package/dist/chart/ChartSummary.vue.d.ts

@@ -1,8 +1,9 @@
-import type { ChartSeries } from './types';
+import type { ChartSeries, ChartValueFormatter } from './types';
 declare const __VLS_export: import("vue").DefineComponent<{
     caption: string;
     labels: string[];
     rows: ChartSeries[];
+    formatValue?: ChartValueFormatter;
     cellpadding?: (string | number) | undefined;
     cellspacing?: (string | number) | undefined;
     summary?: string | undefined | undefined;
@@ -203,6 +204,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     caption: string;
     labels: string[];
     rows: ChartSeries[];
+    formatValue?: ChartValueFormatter;
     cellpadding?: (string | number) | undefined;
     cellspacing?: (string | number) | undefined;
     summary?: string | undefined | undefined;

package/dist/chart/DoughnutChart.vue

@@ -1,14 +1,21 @@
 <template>
    <div ref="root" class="k-chart k-chart-doughnut" :class="`k-chart-legend-${legendPosition}`">
-      <div class="k-chart-canvas" :style="{ height }" role="img" :aria-label="label">
-         <Doughnut v-if="ready" :data="chartData" :options="chartOptions" />
-         <div v-else class="k-chart-placeholder is-round" aria-hidden="true" />
+      <div class="k-chart-canvas" :style="{ height }">
+         <div class="k-chart-figure" role="img" :aria-label="label">
+            <Doughnut v-if="ready" :data="chartData" :options="chartOptions" />
+            <div v-else class="k-chart-placeholder is-round" aria-hidden="true" />
+         </div>
          <div v-if="$slots.default" class="k-chart-center">
             <slot />
          </div>
       </div>
       <ChartLegend v-if="legend" :items="legendItems" :position="legendPosition" @toggle="toggle" />
-      <ChartSummary :caption="label" :labels="labels" :rows="[{ label, data: values }]" />
+      <ChartSummary
+         :caption="label"
+         :labels="labels"
+         :rows="[{ label, data: values }]"
+         :format-value="formatValue"
+      />
    </div>
 </template>
 

package/dist/chart/LineChart.vue

@@ -10,7 +10,7 @@
          :position="legendPosition"
          @toggle="toggle"
       />
-      <ChartSummary :caption="label" :labels="labels" :rows="series" />
+      <ChartSummary :caption="label" :labels="labels" :rows="series" :format-value="formatValue" />
    </div>
 </template>
 
@@ -22,6 +22,7 @@ import ChartSummary from "./ChartSummary.vue";
 import { buildCartesianOptions } from "./options";
 import { registerChartModules } from "./register";
 import { useChartSurface } from "./useChartSurface";
+import { seriesDash, seriesPoint } from "./patterns";
 import { withAlpha } from "./useChartColors";
 registerChartModules();
 const props = defineProps({
@@ -34,6 +35,7 @@ const props = defineProps({
   smooth: { type: Boolean, required: false, default: true },
   fill: { type: Boolean, required: false },
   points: { type: Boolean, required: false },
+  patterns: { type: Boolean, required: false },
   stacked: { type: Boolean, required: false },
   formatValue: { type: Function, required: false },
   options: { type: null, required: false }
@@ -49,7 +51,9 @@ const legendItems = computed(
   () => props.series.map((entry, index) => ({
     label: entry.label,
     color: colorAt(index),
-    hidden: isHidden(index)
+    hidden: isHidden(index),
+    dash: props.patterns ? seriesDash(index) : void 0,
+    point: props.patterns && props.points ? seriesPoint(index) : void 0
   }))
 );
 const chartData = computed(() => ({
@@ -63,6 +67,8 @@ const chartData = computed(() => ({
       borderColor: color,
       backgroundColor: withAlpha(color, props.fill ? 0.14 : 1),
       borderWidth: 2,
+      borderDash: props.patterns ? seriesDash(index) : [],
+      pointStyle: props.patterns ? seriesPoint(index) : "circle",
       tension: props.smooth ? 0.35 : 0,
       fill: props.fill ? "origin" : false,
       pointRadius: props.points ? 3 : 0,

package/dist/chart/LineChart.vue.d.ts

@@ -10,6 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     smooth?: boolean;
     fill?: boolean;
     points?: boolean;
+    patterns?: boolean;
     stacked?: boolean;
     formatValue?: ChartValueFormatter;
     options?: ChartOptions<"line">;
@@ -215,6 +216,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     smooth?: boolean;
     fill?: boolean;
     points?: boolean;
+    patterns?: boolean;
     stacked?: boolean;
     formatValue?: ChartValueFormatter;
     options?: ChartOptions<"line">;

package/dist/chart/chart.css

@@ -97,6 +97,12 @@
    border-radius: var(--k-radius-full);
 }
 
+.k-chart-figure {
+   position: relative;
+   width: 100%;
+   height: 100%;
+}
+
 .k-chart-center {
    position: absolute;
    inset: 0;
@@ -168,6 +174,19 @@
    border-radius: 3px;
 }
 
+.k-chart-legend-line {
+   flex: none;
+   width: 1.125rem;
+   height: 0.625rem;
+   overflow: visible;
+   fill: var(--k-surface);
+   stroke-width: 1.5;
+}
+
+.k-chart-legend-line > line {
+   stroke-width: 2;
+}
+
 .k-chart-legend-label {
    flex: 1;
    min-width: 0;

package/dist/chart/patterns.d.ts

@@ -0,0 +1,6 @@
+import type { ChartBarPattern, ChartPointStyle } from './types';
+export declare function seriesDash(index: number): number[];
+export declare function seriesPoint(index: number): ChartPointStyle;
+export declare function seriesPattern(index: number): ChartBarPattern;
+export declare function barFill(color: string, pattern: ChartBarPattern, surface: string): string | CanvasPattern;
+export declare function patternBackground(color: string, pattern: ChartBarPattern | undefined): string;

package/dist/chart/patterns.mjs

@@ -0,0 +1,79 @@
+import { isClient } from "../internal/core/env.mjs";
+const dashes = [[], [6, 4], [2, 3], [10, 3, 2, 3], [14, 5], [4, 2, 1, 2]];
+const points = ["circle", "rect", "triangle", "rectRot", "star", "crossRot"];
+const patterns = ["solid", "diagonal", "dots", "horizontal", "reverse", "cross"];
+export function seriesDash(index) {
+  return dashes[index % dashes.length];
+}
+export function seriesPoint(index) {
+  return points[index % points.length];
+}
+export function seriesPattern(index) {
+  return patterns[index % patterns.length];
+}
+const TILE = 8;
+const cache = /* @__PURE__ */ new Map();
+function strokeLine(context, x1, y1, x2, y2) {
+  context.beginPath();
+  context.moveTo(x1, y1);
+  context.lineTo(x2, y2);
+  context.stroke();
+}
+function drawMarks(context, pattern) {
+  if (pattern === "diagonal" || pattern === "cross") {
+    strokeLine(context, -1, TILE + 1, TILE + 1, -1);
+    strokeLine(context, -1, 1, 1, -1);
+    strokeLine(context, TILE - 1, TILE + 1, TILE + 1, TILE - 1);
+  }
+  if (pattern === "reverse" || pattern === "cross") {
+    strokeLine(context, -1, -1, TILE + 1, TILE + 1);
+    strokeLine(context, TILE - 1, -1, TILE + 1, 1);
+    strokeLine(context, -1, TILE - 1, 1, TILE + 1);
+  }
+  if (pattern === "horizontal") strokeLine(context, 0, TILE / 2, TILE, TILE / 2);
+  if (pattern === "dots") {
+    context.beginPath();
+    context.arc(TILE / 2, TILE / 2, 1.5, 0, Math.PI * 2);
+    context.fill();
+  }
+}
+export function barFill(color, pattern, surface) {
+  if (pattern === "solid" || !isClient()) return color;
+  const key = `${color}|${pattern}|${surface}`;
+  const cached = cache.get(key);
+  if (cached) return cached;
+  const canvas = document.createElement("canvas");
+  canvas.width = TILE;
+  canvas.height = TILE;
+  const context = canvas.getContext("2d");
+  if (!context) return color;
+  context.fillStyle = color;
+  context.fillRect(0, 0, TILE, TILE);
+  context.globalAlpha = 0.6;
+  context.strokeStyle = surface;
+  context.fillStyle = surface;
+  context.lineWidth = 1.5;
+  drawMarks(context, pattern);
+  const result = context.createPattern(canvas, "repeat") ?? color;
+  if (cache.size > 200) cache.clear();
+  cache.set(key, result);
+  return result;
+}
+export function patternBackground(color, pattern) {
+  const mark = `color-mix(in oklab, var(--k-surface) 60%, ${color})`;
+  const stripes = (angle) => `repeating-linear-gradient(${angle}, ${color} 0 2.5px, ${mark} 2.5px 4px)`;
+  switch (pattern) {
+    case "diagonal":
+      return stripes("-45deg");
+    case "reverse":
+      return stripes("45deg");
+    case "horizontal":
+      return stripes("0deg");
+    case "cross":
+      return `repeating-linear-gradient(45deg, transparent 0 2.5px, ${mark} 2.5px 4px), ${stripes("-45deg")}`;
+    case "dots":
+      return `radial-gradient(circle, ${mark} 0 1px, transparent 1.25px) 0 0 / 4px 4px, ${color}`;
+    default:
+      return color;
+  }
+}