@ziyarago/ui 0.15.3 → 0.17.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [0.17.0](https://github.com/ziyarago/ui/compare/v0.16.0...v0.17.0) (2026-10-21)
+
+### Features
+
+* chart components metadata, charts docs page and styles (Pro: LineChart, AreaChart, BarChart, DonutChart) ([be37587](https://github.com/ziyarago/ui/commit/be37587030f01821117364d1ec3f8d7565964f53))
+
+## [0.16.0](https://github.com/ziyarago/ui/compare/v0.15.3...v0.16.0) (2026-10-21)
+
+### Features
+
+* keyboard and ARIA for Combobox, MultiSelect, Calendar and DatePicker, Tooltip Escape, client-side today, changelog cleanup ([ec905ac](https://github.com/ziyarago/ui/commit/ec905ace4be6d59c884b62941a697b53a2d236b7))
+
 ## [0.15.3](https://github.com/ziyarago/ui/compare/v0.15.2...v0.15.3) (2026-10-21)
 
 ### Bug Fixes
@@ -117,44 +129,3 @@
 ### Features
 
 * publish @ziyarago/ui and @ziyarago/ui-mcp to npm ([bc42145](https://github.com/ziyarago/ui/commit/bc42145f7750fdd8071a29bc088b8366a1adb391))
-
-# Changelog
-
-All notable changes follow [Keep a Changelog](https://keepachangelog.com) and [SemVer](https://semver.org). Pre-1.0: minor versions may break.
-
-## 0.1.0 — first release
-
-### Added
-- Docs site SEO: canonical, Open Graph, Twitter and JSON-LD tags per page, generated `sitemap.xml` and `robots.txt`, 404 page with noindex, og.png, favicon; Google Analytics 4 and Yandex Metrika loaded from build variables.
-- Deployment of the docs to your own server over SSH (releases directory, atomic switch, rollback): `deploy/`, `.github/workflows/deploy-docs.yml`, `docs/DEPLOYMENT.md`.
-- Display settings: `useUiTheme()` gains `setMotion('auto|on|off')`, `setEffects('auto|full|lite')` and `setBackground(name)`; attributes `data-motion`, `data-fx`, `data-bg`; no-flash init script in the Nuxt module.
-- Page backgrounds (`aurora`, `sunset`, `ocean`, `emerald`, `rose`, `mesh`) and gradient cards (`<UiCard variant="gradient" tone intensity>`; 8 tones, soft and vivid, dark and light).
-- API metadata for all 182 components in `src/meta/` (props with every value, defaults, slots, events), validated against the render code by `npm run check`; shown as API reference tables in the docs.
-- AI tooling: `dist/manifest.json`, `llms.txt`, `llms-full.txt` and the `@ziyarago/ui-mcp` package (MCP server + `init` for AGENTS.md, Claude skill, Cursor rule).
-- Automated releases: GitHub Actions + semantic-release (version from commit messages), npm publish with provenance and docs deploy to ziyara.vip. See CONTRIBUTING.md.
-- Page templates gallery in the docs site (`/docs/templates`): 17 live templates in the app shell with top or side menu, slot highlighting and an inspector (accepted components, props, example) for 89 page slots and 5 shell slots.
-- `size` prop (`xs | sm | md | lg | xl`, default `md`) on controls and density-bearing components (about 120). Adapters set `data-size` on the root; `md` keeps the previous look. Scale tokens `--zg-sz-*` live in `tokens.css`, per-group overrides in `src/styles/sizes/`.
-- Popup surfaces (`--zg-pop`), stacking tokens (`--zg-z-bar`, `--zg-z-pop`, `--zg-z-modal`) and entrance motion for selects, calendars, menus, hover cards, modals and drawers.
-- Docs pages for Fonts and Colors (families, tokens, weight mapping, swatches in both themes and both palettes).
-- Documentation site in `site/` (Nuxt): landing, getting started, theming, 182 component pages with live previews and Vue/React code.
-- gluestack parity, 16 components: Heading, Text, Box, Center, HStack, VStack, Grid, Link, Pressable, Icon, Portal, LiquidGlass, BottomSheet, Actionsheet, ImageViewer, ChatAi.
-- Nuxt module `@ziyarago/ui/nuxt` (auto-registered components, CSS, theme attributes, SSR).
-- Framework-neutral core with Vue 3 (`@ziyarago/ui/vue`) and React 18+ (`@ziyarago/ui/react`) adapters.
-- 160+ components in 12 groups: actions, forms, surfaces, data, navigation, layout, CRM, hotels, tours and 360°, prayer and Ramadan.
-- 16 page templates with named slots (`PageDashboard`, `PageCrm`, `PageBookings`, `PageCatalog`, `PageDetail`, `PageSettings`, `PageUserList`, `PageProfile`, `PageForm`, `PageOrder`, `PageAccount`, `PagePricing`, `PageFaq`, `PagePatterns`, `PageAuth`, `PageStatus`).
-- Two menus in one shell: top and side, with a collapsible sidebar.
-- OKLCH tokens, palettes `gold` and `tamam`, dark and light themes, RTL, Thmanyah and Manrope.
-- Validation rules (`rules`) and `ValidatedField`.
-- `UiMap`, `UiTour` with spotlight, `UiSortable`, `UiTreeSelect`, `UiRichEditor`.
-- `tokens/tokens.json` for Flutter and native clients; `dist/style.css` single-file stylesheet.
-
-### Known gaps
-- Props are typed for 9 core components; the rest accept `Record<string, any>`.
-- Installed from the packed tarball into clean Vite+Vue, Vite+React and Nuxt 3 apps: all build, Nuxt SSR renders. No automated tests yet.
-- Light theme and RTL are covered by tokens but not yet screenshot-tested for every component.
-
-### Fixed before release
-- Arabic looked bold: Thmanyah has no 600 face and is heavier than Manrope. `fonts.css` now maps weights with ranges (200-300 Light, 400-600 Regular, 700 Medium, 800 Bold, 900 Black).
-- Light theme: stronger card separation (`--zg-s1/s2/s3`, `--zg-stroke`, `--zg-rim`, `--zg-shadow-1`); `UiCard variant="inverse"` re-scopes tokens to dark so content inside stays readable; bell counter and incoming-call button text contrast.
-- `Page*` templates with `title` crashed in Vue/React (`C.PageHeader` was called as a function).
-- `useUiTheme()` and `UiMap` touched `document` during SSR.

package/README.md

@@ -4,7 +4,7 @@
 
 <p align="center"><a href="https://ziyara.vip"><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/hero-dark.png" alt="ziyarago/ui: glass design system for Vue, Nuxt and React" width="100%"></a></p>
 
-Glass design system for Vue 3, Nuxt and React: 102 free components and 6 page templates (the Pro package adds 106 components and 33 templates), OKLCH tokens, dark and light, RTL and Arabic, 16 interface languages. One framework-neutral core with thin adapters. Built for Umrah and Hajj products, usable anywhere.
+Glass design system for Vue 3, Nuxt and React: 102 free components and 6 page templates (the Pro package adds 110 components and 33 templates), OKLCH tokens, dark and light, RTL and Arabic, 16 interface languages. One framework-neutral core with thin adapters. Built for Umrah and Hajj products, usable anywhere.
 
 <table>
   <tr>
@@ -12,7 +12,7 @@ Glass design system for Vue 3, Nuxt and React: 102 free components and 6 page te
     <td width="50%"><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/hero-rtl.png" alt="Arabic RTL"><br><sub>Arabic, RTL mirrored</sub></td>
   </tr>
   <tr>
-    <td><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/components.png" alt="Component catalog"><br><sub>208 components documented with props and live examples (102 free, 106 Pro)</sub></td>
+    <td><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/components.png" alt="Component catalog"><br><sub>212 components documented with props and live examples (102 free, 110 Pro)</sub></td>
     <td><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/templates.png" alt="Page templates"><br><sub>page templates: 6 free, 33 Pro</sub></td>
   </tr>
   <tr>

package/dist/llms-full.txt

@@ -2,7 +2,7 @@
 
 > ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 102 free components and 6 page templates (more in @ziyarago/ui-pro).
 
-Version 0.15.3. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.17.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -674,6 +674,7 @@ Events:
 Notes:
 - Selecting from the list is the only way to set a value: free text is never emitted.
 - The list closes on outside click and on Escape.
+- Keyboard (WAI-ARIA combobox): the input has role=combobox with aria-expanded, aria-controls and aria-activedescendant; focus stays in the input, Arrow Down and Up open the list and move the active option (wraps, skips disabled), Enter chooses it, Escape closes.
 
 ## UiTreeSelect  (forms, Pro)
 Dropdown with a searchable tree. Use for hierarchical choices such as regions, categories or org units.
@@ -836,12 +837,14 @@ Props:
 - `min`: Date | string | number. Earliest selectable day; earlier days are disabled.
 - `max`: Date | string | number. Latest selectable day; later days are disabled.
 - `disabledDate`: (date: Date) => boolean. Return true to disable a specific day.
+- `today`: Date | string | number. The day marked as today. By default it is read from the browser clock after mount (nothing is marked in server-rendered HTML), so server and client never disagree near midnight or across time zones. Pass it to mark a day in the HTML too.
 - `events`: Record<string, string> = "{}". Marked days: keys are YYYY-MM-DD, values are the tooltip text.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Day cell and header size.
 Events:
 - change: Called with a Date object (local time) for the clicked day.
 Notes:
 - The event payload is a Date, not a string: convert to ISO yourself if the model is a string.
+- Keyboard: one tab stop on the day grid; arrows move by day or week, Home and End to the week start and end, PageUp and PageDown change month (Shift: year), Enter or Space picks. Without a selected date the visible month is the current month, which server and client can disagree on right at a month boundary; pass modelValue or today to make it deterministic.
 
 ## UiRangeCalendar  (forms, Pro)
 Month grid for picking a date range with hover preview. Use for stays, trips and report periods.
@@ -866,6 +869,7 @@ Props:
 - `min`: Date | string | number. Earliest selectable day, forwarded to the calendar.
 - `max`: Date | string | number. Latest selectable day, forwarded to the calendar.
 - `disabledDate`: (date: Date) => boolean. Return true to disable a specific day, forwarded to the calendar.
+- `today`: Date | string | number. The day marked as today in the calendar; by default read from the browser clock after mount. Forwarded to the calendar.
 - `required`: boolean = false. Adds a red asterisk to the label. Does not validate.
 - `label`: string. Label shown above the control.
 - `hint`: string. Helper text under the control. Hidden while error is set.
@@ -877,7 +881,7 @@ Events:
 - change: Called with a Date object (local midnight) for the chosen day. The popup closes after picking.
 Notes:
 - The event payload is a Date, not a string: convert to ISO yourself if the model is a string.
-- The popup closes on outside click and on Escape.
+- The popup closes on outside click and on Escape (focus returns to the trigger). Arrow Down or Up on the trigger opens it and focus moves into the calendar, which uses the Calendar keys.
 
 ## UiTimePicker  (forms)
 Hour and minute selects for a time of day. Use for opening hours and appointment times.
@@ -1182,6 +1186,116 @@ Slots:
 Events:
 - menu: Called with the clicked menu item label (the string from menu); the menu closes afterwards.
 
+## UiLineChart  (data, Pro)
+Line chart for time series with several series, a localized time axis with automatic label step, "nice" value ticks, gaps for null values, tooltip and keyboard navigation.
+Props:
+- `series` (required): { key: string; label: string; values: { x: string | number | Date; y: number | null }[]; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'; dashed?: boolean }[]. Series to draw. x is a Date, an ISO date string (day, week, month are detected from the spacing), a number or a category string; the series share one x list, a missing x or a null y is a gap. tone is brand, success, warning, danger, info or neutral; without it the series palette (--zg-chart-1 to 6) is used. dashed draws the line dashed, for example the previous week.
+- `unit`: 'count' | 'currency' | 'percent' = "count". Number format of the value axis, tooltip and legend. count: grouped digits, compact on the axis (1.2k, 1.2M, localized by Intl); currency: needs currency; percent: values are percent points (12 means 12%).
+- `currency`: string. ISO 4217 code for unit="currency", for example UZS, SAR or USD. The axis stays compact without the symbol; tooltip and legend show the full amount.
+- `yFormat`: (n: number) => string. Custom formatter for every number (axis, tooltip). Overrides unit and currency.
+- `locale`: string. BCP 47 tag for numbers and dates, for example "ar" or "uz-UZ". Defaults to the kit locale (en ru uz ar tr and the rest). An RTL language also mirrors the chart.
+- `dir`: 'ltr' | 'rtl'. Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip).
+- `label`: string. Accessible name, for example "Revenue". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label.
+- `height`: number. Chart height in px (without the legend). Overrides size. Horizontal bars grow with the number of categories when it is not set.
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Preset height: xs 140, sm 180, md 240, lg 320, xl 400 px.
+- `loading`: boolean = false. Shows a skeleton in the shape of the chart.
+- `emptyText`: string. Text of the empty state. Default is the translated "No data for this period".
+- `emptyIcon`: string. Icon name shown above the empty text. None by default.
+- `legend`: boolean = "true when there is more than one series". Text legend of toggle buttons (aria-pressed). A button hides and shows its series; the scale is recomputed.
+- `yMin`: number. Fixed lower end of the value axis (otherwise nice ticks from the data, from 0 unless the data stays far above it).
+- `yMax`: number. Fixed upper end of the value axis.
+- `showPoints`: boolean. Dots on every point. Default: on up to 40 points; isolated points (between gaps) always get a dot.
+Events:
+- pointClick: Click or Enter on a point. Called with { seriesKey, series, index, x, label, y }: the series under the pointer (or the keyboard series), the index in the shared x list, the original x value, its formatted label and y.
+- legendToggle: A legend button was pressed. Called with { key, label, hidden } where hidden is the new state.
+Notes:
+- Pure inline SVG, no dependencies. Colors come from the --zg-chart-* tokens (light, dark, gold and tamam), so there is nothing to configure per theme.
+- Empty data (no points, only null values, or only zeros for bars and donut) shows the empty state instead of an axis of zeros. A null y is a gap in the line, never a zero. All values equal: the axis starts at 0 and leaves headroom.
+- Accessibility: the plot is one focusable role="img" with a generated aria-label, a visually hidden data table, and a live region that reads the point while you move. Keys: Left and Right (mirrored in RTL) move between points, Up and Down between series, Home and End jump, Escape hides the tooltip, Enter fires pointClick.
+- The chart fills the width of its container (ResizeObserver, client only) and renders at 640 px on the server.
+
+## UiAreaChart  (data, Pro)
+Line chart with a gradient fill under each line, made from the series color; same data, axes, tooltip and keyboard behavior as LineChart.
+Props:
+- `series` (required): { key: string; label: string; values: { x: string | number | Date; y: number | null }[]; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'; dashed?: boolean }[]. Series to draw, see LineChart. The fill goes down to the zero line (or the bottom of the plot when the axis does not include 0); each run between gaps is filled separately.
+- `unit`: 'count' | 'currency' | 'percent' = "count". Number format of the value axis, tooltip and legend. count: grouped digits, compact on the axis (1.2k, 1.2M, localized by Intl); currency: needs currency; percent: values are percent points (12 means 12%).
+- `currency`: string. ISO 4217 code for unit="currency", for example UZS, SAR or USD. The axis stays compact without the symbol; tooltip and legend show the full amount.
+- `yFormat`: (n: number) => string. Custom formatter for every number (axis, tooltip). Overrides unit and currency.
+- `locale`: string. BCP 47 tag for numbers and dates, for example "ar" or "uz-UZ". Defaults to the kit locale (en ru uz ar tr and the rest). An RTL language also mirrors the chart.
+- `dir`: 'ltr' | 'rtl'. Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip).
+- `label`: string. Accessible name, for example "Revenue". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label.
+- `height`: number. Chart height in px (without the legend). Overrides size. Horizontal bars grow with the number of categories when it is not set.
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Preset height: xs 140, sm 180, md 240, lg 320, xl 400 px.
+- `loading`: boolean = false. Shows a skeleton in the shape of the chart.
+- `emptyText`: string. Text of the empty state. Default is the translated "No data for this period".
+- `emptyIcon`: string. Icon name shown above the empty text. None by default.
+- `legend`: boolean = "true when there is more than one series". Text legend of toggle buttons (aria-pressed). A button hides and shows its series; the scale is recomputed.
+- `yMin`: number. Fixed lower end of the value axis.
+- `yMax`: number. Fixed upper end of the value axis.
+- `showPoints`: boolean. Dots on every point. Default: on up to 40 points; isolated points always get a dot.
+Events:
+- pointClick: Click or Enter on a point. Called with { seriesKey, series, index, x, label, y }: the series under the pointer (or the keyboard series), the index in the shared x list, the original x value, its formatted label and y.
+- legendToggle: A legend button was pressed. Called with { key, label, hidden } where hidden is the new state.
+Notes:
+- Pure inline SVG, no dependencies. Colors come from the --zg-chart-* tokens (light, dark, gold and tamam), so there is nothing to configure per theme.
+- Empty data (no points, only null values, or only zeros for bars and donut) shows the empty state instead of an axis of zeros. A null y is a gap in the line, never a zero. All values equal: the axis starts at 0 and leaves headroom.
+- Accessibility: the plot is one focusable role="img" with a generated aria-label, a visually hidden data table, and a live region that reads the point while you move. Keys: Left and Right (mirrored in RTL) move between points, Up and Down between series, Home and End jump, Escape hides the tooltip, Enter fires pointClick.
+- The chart fills the width of its container (ResizeObserver, client only) and renders at 640 px on the server.
+
+## UiBarChart  (data, Pro)
+Vertical or horizontal bar chart, grouped or stacked, for categories such as days, 24 hours or revenue per branch; same axes, formats and accessibility as LineChart.
+Props:
+- `series` (required): { key: string; label: string; values: { x: string | number | Date; y: number | null }[]; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'; dashed?: boolean }[]. One entry per bar series. x is the category (string, number or Date); categories keep their order of first appearance, dates are sorted. Negative values draw below the zero line.
+- `orientation`: 'vertical' | 'horizontal' = "vertical". Horizontal puts the categories on the left (right in RTL) and grows with the number of categories.
+- `stacked`: boolean = false. Stacks the series of a category (positives and negatives stack apart) instead of placing them side by side; the tooltip adds a total.
+- `unit`: 'count' | 'currency' | 'percent' = "count". Number format of the value axis, tooltip and legend. count: grouped digits, compact on the axis (1.2k, 1.2M, localized by Intl); currency: needs currency; percent: values are percent points (12 means 12%).
+- `currency`: string. ISO 4217 code for unit="currency", for example UZS, SAR or USD. The axis stays compact without the symbol; tooltip and legend show the full amount.
+- `yFormat`: (n: number) => string. Custom formatter for every number (axis, tooltip). Overrides unit and currency.
+- `locale`: string. BCP 47 tag for numbers and dates, for example "ar" or "uz-UZ". Defaults to the kit locale (en ru uz ar tr and the rest). An RTL language also mirrors the chart.
+- `dir`: 'ltr' | 'rtl'. Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip).
+- `label`: string. Accessible name, for example "Revenue". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label.
+- `height`: number. Chart height in px (without the legend). Overrides size. Horizontal bars grow with the number of categories when it is not set.
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Preset height: xs 140, sm 180, md 240, lg 320, xl 400 px.
+- `loading`: boolean = false. Shows a skeleton in the shape of the chart.
+- `emptyText`: string. Text of the empty state. Default is the translated "No data for this period".
+- `emptyIcon`: string. Icon name shown above the empty text. None by default.
+- `legend`: boolean = "true when there is more than one series". Text legend of toggle buttons (aria-pressed). A button hides and shows its series; the scale is recomputed.
+- `yMin`: number. Fixed lower end of the value axis.
+- `yMax`: number. Fixed upper end of the value axis.
+Events:
+- pointClick: Click or Enter on a point. Called with { seriesKey, series, index, x, label, y }: the series under the pointer (or the keyboard series), the index in the shared x list, the original x value, its formatted label and y.
+- legendToggle: A legend button was pressed. Called with { key, label, hidden } where hidden is the new state.
+Notes:
+- Pure inline SVG, no dependencies. Colors come from the --zg-chart-* tokens (light, dark, gold and tamam), so there is nothing to configure per theme.
+- Empty data (no points, only null values, or only zeros for bars and donut) shows the empty state instead of an axis of zeros. A null y is a gap in the line, never a zero. All values equal: the axis starts at 0 and leaves headroom.
+- Accessibility: the plot is one focusable role="img" with a generated aria-label, a visually hidden data table, and a live region that reads the point while you move. Keys: Left and Right (mirrored in RTL) move between points, Up and Down between series, Home and End jump, Escape hides the tooltip, Enter fires pointClick.
+- The chart fills the width of its container (ResizeObserver, client only) and renders at 640 px on the server.
+
+## UiDonutChart  (data, Pro)
+Donut chart of shares (sales channels, payment methods, plans) with a text legend, the total in the centre and a legend toggle.
+Props:
+- `data` (required): { key: string; label: string; value: number; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' }[]. Slices. Only positive values draw; others keep their legend row at 0. All zero or empty shows the empty state.
+- `unit`: 'count' | 'currency' | 'percent' = "count". Number format of the value axis, tooltip and centre total. count: grouped digits, compact on the axis (1.2k, 1.2M, localized by Intl); currency: needs currency; percent: values are percent points (12 means 12%).
+- `currency`: string. ISO 4217 code for unit="currency", for example UZS, SAR or USD. The axis stays compact without the symbol; tooltip and legend show the full amount.
+- `yFormat`: (n: number) => string. Custom formatter for every number (axis, tooltip, total). Overrides unit and currency.
+- `locale`: string. BCP 47 tag for numbers and dates, for example "ar" or "uz-UZ". Defaults to the kit locale (en ru uz ar tr and the rest). An RTL language also mirrors the chart.
+- `dir`: 'ltr' | 'rtl'. Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip).
+- `label`: string. Accessible name, for example "Revenue". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label.
+- `height`: number. Diameter in px. Overrides size.
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Preset diameter: xs 120, sm 160, md 200, lg 240, xl 300 px.
+- `loading`: boolean = false. Shows a skeleton in the shape of the chart.
+- `emptyText`: string. Text of the empty state. Default is the translated "No data for this period".
+- `emptyIcon`: string. Icon name shown above the empty text. None by default.
+- `legend`: boolean = true. Text legend of toggle buttons (aria-pressed). A button hides and shows its slice; the scale is recomputed.
+Events:
+- pointClick: Click or Enter on a slice. Called with { key, label, value, share, index }; share is 0 to 1.
+- legendToggle: A legend button was pressed. Called with { key, label, hidden } where hidden is the new state.
+Notes:
+- Pure inline SVG, no dependencies. Colors come from the --zg-chart-* tokens (light, dark, gold and tamam), so there is nothing to configure per theme.
+- Empty data (no points, only null values, or only zeros for bars and donut) shows the empty state instead of an axis of zeros. A null y is a gap in the line, never a zero. All values equal: the axis starts at 0 and leaves headroom.
+- Accessibility: the plot is one focusable role="img" with a generated aria-label, a visually hidden data table, and a live region that reads the point while you move. Keys: Left and Right (mirrored in RTL) move between points, Up and Down between series, Home and End jump, Escape hides the tooltip, Enter fires pointClick.
+- The chart fills the width of its container (ResizeObserver, client only) and renders at 640 px on the server.
+
 ## UiRing  (data)
 Circular progress gauge with a percentage in the center and a tick scale around it.
 Props:
@@ -1596,6 +1710,7 @@ Slots:
 - default: The element the tooltip is attached to.
 Notes:
 - Pure CSS bubble; it cannot contain markup. For rich content use HoverCard.
+- Escape hides the bubble while it is shown (hover or focus) without moving focus; it stays visible while the pointer is over the trigger or the bubble, and returns on the next hover or focus.
 
 ## UiDropdown  (overlay)
 Button that opens a menu of actions; use for "more" menus and action lists.
@@ -1696,11 +1811,12 @@ Events:
 - close: Close icon.
 
 ## UiScreensaver  (overlay, Pro)
-Full-screen idle screen with a large clock, date and the brand mark; show it after inactivity.
+Full-screen idle screen with a large clock, date and an optional logo; show it after inactivity.
 Props:
 - `open`: boolean = false. Shows the screensaver when true; renders nothing when false.
 - `locale`: string = "en-GB". BCP 47 locale for the date line.
 - `hint`: string. Small hint under the date, e.g. "Tap to continue".
+- `logo`: string. URL of an image shown above the clock. Use an absolute URL or a root-relative path such as "/brand/logo.svg". Nothing is shown when it is not set, so the screensaver never requests a missing file.
 - `idleMs`: number = 0. When greater than 0 and the screensaver is closed, a hidden sentinel listens for pointer, key, wheel and touch activity and calls idle after this many milliseconds without any. 0 disables it.
 Events:
 - close: Called on click or any key (including Escape) while open.

package/dist/llms.txt

@@ -2,7 +2,7 @@
 
 > ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 102 free components and 6 page templates (more in @ziyarago/ui-pro).
 
-Version 0.15.3. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.17.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -122,6 +122,10 @@ Tables, stats, charts and lists.
 - UiSegBar (Pro): Single stacked bar split into proportional segments with a legend, for distributions.
 - UiMiniChart: Tiny sparkline in bar or line form for trends inside cards and tables.
 - UiChartCard (Pro): Card shell for a chart with title, subtitle and an optional overflow menu; put the chart in the default slot.
+- UiLineChart (Pro): Line chart for time series with several series, a localized time axis with automatic label step, "nice" value ticks, gaps for null values, tooltip and keyboard navigation.
+- UiAreaChart (Pro): Line chart with a gradient fill under each line, made from the series color; same data, axes, tooltip and keyboard behavior as LineChart.
+- UiBarChart (Pro): Vertical or horizontal bar chart, grouped or stacked, for categories such as days, 24 hours or revenue per branch; same axes, formats and accessibility as LineChart.
+- UiDonutChart (Pro): Donut chart of shares (sales channels, payment methods, plans) with a text legend, the total in the centre and a legend toggle.
 - UiRing: Circular progress gauge with a percentage in the center and a tick scale around it.
 - UiOccupancyChart (Pro): Bar chart of percentages by label, such as hotel occupancy per day or month.
 - UiSalesFunnel (Pro): Horizontal funnel of steps with bars scaled to the largest value, for conversion flows.
@@ -170,7 +174,7 @@ Dialogs, sheets and popovers.
 - UiImageViewer (Pro): Full-screen lightbox for one or several images with previous/next buttons and a counter.
 - UiTour (Pro): Guided product tour that dims the page, highlights a target element and shows a step popover.
 - UiTourPopover (Pro): Step card of a tour with title, text, step counter and Back/Next buttons; used by Tour and usable standalone.
-- UiScreensaver (Pro): Full-screen idle screen with a large clock, date and the brand mark; show it after inactivity.
+- UiScreensaver (Pro): Full-screen idle screen with a large clock, date and an optional logo; show it after inactivity.
 
 ## Navigation
 Menus, tabs and paging.