@ziyarago/ui 0.15.3 → 0.17.0

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "@ziyarago/ui",
- "version": "0.15.3",
+ "version": "0.17.0",
  "homepage": "https://ziyara.vip",
  "imports": {
   "vue": "import { UiButton } from '@ziyarago/ui/vue'",
@@ -140,6 +140,10 @@
     "SegBar",
     "MiniChart",
     "ChartCard",
+    "LineChart",
+    "AreaChart",
+    "BarChart",
+    "DonutChart",
     "Ring",
     "OccupancyChart",
     "SalesFunnel",
@@ -7834,7 +7838,8 @@
    },
    "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."
+    "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."
    ]
   },
   {
@@ -8480,6 +8485,10 @@
      "type": "(date: Date) => boolean",
      "description": "Return true to disable a specific day."
     },
+    "today": {
+     "type": "Date | string | number",
+     "description": "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": {
      "type": "Record<string, string>",
      "default": "{}",
@@ -8502,7 +8511,8 @@
     "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."
+    "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."
    ]
   },
   {
@@ -8596,6 +8606,11 @@
      "forwarded": true,
      "description": "Return true to disable a specific day, forwarded to the calendar."
     },
+    "today": {
+     "type": "Date | string | number",
+     "forwarded": true,
+     "description": "The day marked as today in the calendar; by default read from the browser clock after mount. Forwarded to the calendar."
+    },
     "required": {
      "type": "boolean",
      "default": false,
@@ -8644,7 +8659,7 @@
    },
    "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."
    ]
   },
   {
@@ -9893,6 +9908,428 @@
     "menu": "Called with the clicked menu item label (the string from menu); the menu closes afterwards."
    }
   },
+  {
+   "name": "LineChart",
+   "tag": "UiLineChart",
+   "group": "data",
+   "tier": "pro",
+   "implemented": false,
+   "package": "@ziyarago/ui-pro",
+   "description": "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": {
+     "type": "{ key: string; label: string; values: { x: string | number | Date; y: number | null }[]; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'; dashed?: boolean }[]",
+     "required": true,
+     "description": "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": {
+     "type": "'count' | 'currency' | 'percent'",
+     "values": [
+      "count",
+      "currency",
+      "percent"
+     ],
+     "default": "count",
+     "description": "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": {
+     "type": "string",
+     "description": "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": {
+     "type": "(n: number) => string",
+     "description": "Custom formatter for every number (axis, tooltip). Overrides unit and currency."
+    },
+    "locale": {
+     "type": "string",
+     "description": "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": {
+     "type": "'ltr' | 'rtl'",
+     "values": [
+      "ltr",
+      "rtl"
+     ],
+     "description": "Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip)."
+    },
+    "label": {
+     "type": "string",
+     "description": "Accessible name, for example \"Revenue\". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label."
+    },
+    "height": {
+     "type": "number",
+     "description": "Chart height in px (without the legend). Overrides size. Horizontal bars grow with the number of categories when it is not set."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Preset height: xs 140, sm 180, md 240, lg 320, xl 400 px."
+    },
+    "loading": {
+     "type": "boolean",
+     "default": false,
+     "description": "Shows a skeleton in the shape of the chart."
+    },
+    "emptyText": {
+     "type": "string",
+     "description": "Text of the empty state. Default is the translated \"No data for this period\"."
+    },
+    "emptyIcon": {
+     "type": "string",
+     "description": "Icon name shown above the empty text. None by default."
+    },
+    "legend": {
+     "type": "boolean",
+     "default": "true when there is more than one series",
+     "description": "Text legend of toggle buttons (aria-pressed). A button hides and shows its series; the scale is recomputed."
+    },
+    "yMin": {
+     "type": "number",
+     "description": "Fixed lower end of the value axis (otherwise nice ticks from the data, from 0 unless the data stays far above it)."
+    },
+    "yMax": {
+     "type": "number",
+     "description": "Fixed upper end of the value axis."
+    },
+    "showPoints": {
+     "type": "boolean",
+     "description": "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."
+   ]
+  },
+  {
+   "name": "AreaChart",
+   "tag": "UiAreaChart",
+   "group": "data",
+   "tier": "pro",
+   "implemented": false,
+   "package": "@ziyarago/ui-pro",
+   "description": "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": {
+     "type": "{ key: string; label: string; values: { x: string | number | Date; y: number | null }[]; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'; dashed?: boolean }[]",
+     "required": true,
+     "description": "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": {
+     "type": "'count' | 'currency' | 'percent'",
+     "values": [
+      "count",
+      "currency",
+      "percent"
+     ],
+     "default": "count",
+     "description": "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": {
+     "type": "string",
+     "description": "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": {
+     "type": "(n: number) => string",
+     "description": "Custom formatter for every number (axis, tooltip). Overrides unit and currency."
+    },
+    "locale": {
+     "type": "string",
+     "description": "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": {
+     "type": "'ltr' | 'rtl'",
+     "values": [
+      "ltr",
+      "rtl"
+     ],
+     "description": "Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip)."
+    },
+    "label": {
+     "type": "string",
+     "description": "Accessible name, for example \"Revenue\". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label."
+    },
+    "height": {
+     "type": "number",
+     "description": "Chart height in px (without the legend). Overrides size. Horizontal bars grow with the number of categories when it is not set."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Preset height: xs 140, sm 180, md 240, lg 320, xl 400 px."
+    },
+    "loading": {
+     "type": "boolean",
+     "default": false,
+     "description": "Shows a skeleton in the shape of the chart."
+    },
+    "emptyText": {
+     "type": "string",
+     "description": "Text of the empty state. Default is the translated \"No data for this period\"."
+    },
+    "emptyIcon": {
+     "type": "string",
+     "description": "Icon name shown above the empty text. None by default."
+    },
+    "legend": {
+     "type": "boolean",
+     "default": "true when there is more than one series",
+     "description": "Text legend of toggle buttons (aria-pressed). A button hides and shows its series; the scale is recomputed."
+    },
+    "yMin": {
+     "type": "number",
+     "description": "Fixed lower end of the value axis."
+    },
+    "yMax": {
+     "type": "number",
+     "description": "Fixed upper end of the value axis."
+    },
+    "showPoints": {
+     "type": "boolean",
+     "description": "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."
+   ]
+  },
+  {
+   "name": "BarChart",
+   "tag": "UiBarChart",
+   "group": "data",
+   "tier": "pro",
+   "implemented": false,
+   "package": "@ziyarago/ui-pro",
+   "description": "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": {
+     "type": "{ key: string; label: string; values: { x: string | number | Date; y: number | null }[]; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'; dashed?: boolean }[]",
+     "required": true,
+     "description": "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": {
+     "type": "'vertical' | 'horizontal'",
+     "values": [
+      "vertical",
+      "horizontal"
+     ],
+     "default": "vertical",
+     "description": "Horizontal puts the categories on the left (right in RTL) and grows with the number of categories."
+    },
+    "stacked": {
+     "type": "boolean",
+     "default": false,
+     "description": "Stacks the series of a category (positives and negatives stack apart) instead of placing them side by side; the tooltip adds a total."
+    },
+    "unit": {
+     "type": "'count' | 'currency' | 'percent'",
+     "values": [
+      "count",
+      "currency",
+      "percent"
+     ],
+     "default": "count",
+     "description": "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": {
+     "type": "string",
+     "description": "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": {
+     "type": "(n: number) => string",
+     "description": "Custom formatter for every number (axis, tooltip). Overrides unit and currency."
+    },
+    "locale": {
+     "type": "string",
+     "description": "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": {
+     "type": "'ltr' | 'rtl'",
+     "values": [
+      "ltr",
+      "rtl"
+     ],
+     "description": "Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip)."
+    },
+    "label": {
+     "type": "string",
+     "description": "Accessible name, for example \"Revenue\". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label."
+    },
+    "height": {
+     "type": "number",
+     "description": "Chart height in px (without the legend). Overrides size. Horizontal bars grow with the number of categories when it is not set."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Preset height: xs 140, sm 180, md 240, lg 320, xl 400 px."
+    },
+    "loading": {
+     "type": "boolean",
+     "default": false,
+     "description": "Shows a skeleton in the shape of the chart."
+    },
+    "emptyText": {
+     "type": "string",
+     "description": "Text of the empty state. Default is the translated \"No data for this period\"."
+    },
+    "emptyIcon": {
+     "type": "string",
+     "description": "Icon name shown above the empty text. None by default."
+    },
+    "legend": {
+     "type": "boolean",
+     "default": "true when there is more than one series",
+     "description": "Text legend of toggle buttons (aria-pressed). A button hides and shows its series; the scale is recomputed."
+    },
+    "yMin": {
+     "type": "number",
+     "description": "Fixed lower end of the value axis."
+    },
+    "yMax": {
+     "type": "number",
+     "description": "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."
+   ]
+  },
+  {
+   "name": "DonutChart",
+   "tag": "UiDonutChart",
+   "group": "data",
+   "tier": "pro",
+   "implemented": false,
+   "package": "@ziyarago/ui-pro",
+   "description": "Donut chart of shares (sales channels, payment methods, plans) with a text legend, the total in the centre and a legend toggle.",
+   "props": {
+    "data": {
+     "type": "{ key: string; label: string; value: number; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' }[]",
+     "required": true,
+     "description": "Slices. Only positive values draw; others keep their legend row at 0. All zero or empty shows the empty state."
+    },
+    "unit": {
+     "type": "'count' | 'currency' | 'percent'",
+     "values": [
+      "count",
+      "currency",
+      "percent"
+     ],
+     "default": "count",
+     "description": "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": {
+     "type": "string",
+     "description": "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": {
+     "type": "(n: number) => string",
+     "description": "Custom formatter for every number (axis, tooltip, total). Overrides unit and currency."
+    },
+    "locale": {
+     "type": "string",
+     "description": "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": {
+     "type": "'ltr' | 'rtl'",
+     "values": [
+      "ltr",
+      "rtl"
+     ],
+     "description": "Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip)."
+    },
+    "label": {
+     "type": "string",
+     "description": "Accessible name, for example \"Revenue\". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label."
+    },
+    "height": {
+     "type": "number",
+     "description": "Diameter in px. Overrides size."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Preset diameter: xs 120, sm 160, md 200, lg 240, xl 300 px."
+    },
+    "loading": {
+     "type": "boolean",
+     "default": false,
+     "description": "Shows a skeleton in the shape of the chart."
+    },
+    "emptyText": {
+     "type": "string",
+     "description": "Text of the empty state. Default is the translated \"No data for this period\"."
+    },
+    "emptyIcon": {
+     "type": "string",
+     "description": "Icon name shown above the empty text. None by default."
+    },
+    "legend": {
+     "type": "boolean",
+     "default": true,
+     "description": "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."
+   ]
+  },
   {
    "name": "Ring",
    "tag": "UiRing",
@@ -11378,7 +11815,8 @@
     "default": "The element the tooltip is attached to."
    },
    "notes": [
-    "Pure CSS bubble; it cannot contain markup. For rich content use HoverCard."
+    "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."
    ]
   },
   {
@@ -11688,7 +12126,7 @@
    "tier": "pro",
    "implemented": false,
    "package": "@ziyarago/ui-pro",
-   "description": "Full-screen idle screen with a large clock, date and the brand mark; show it after inactivity.",
+   "description": "Full-screen idle screen with a large clock, date and an optional logo; show it after inactivity.",
    "props": {
     "open": {
      "type": "boolean",
@@ -11704,6 +12142,10 @@
      "type": "string",
      "description": "Small hint under the date, e.g. \"Tap to continue\"."
     },
+    "logo": {
+     "type": "string",
+     "description": "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": {
      "type": "number",
      "default": 0,

package/dist/style.css

@@ -570,6 +570,84 @@
 .zg-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
 .zg-select__opt:focus-visible{outline:3px solid var(--zg-brand-soft);outline-offset:-3px;background:var(--zg-s2)}
 .zg-seg button:focus-visible,.zg-tabs button:focus-visible,.zg-code-b pre:focus-visible{outline:3px solid var(--zg-brand-soft);outline-offset:2px}
+.zg-select__opt[data-active],.zg-select__opt[data-active]:hover{background:var(--zg-s2);outline:3px solid var(--zg-brand-soft);outline-offset:-3px}
+.zg-tip:hover::after,.zg-tip:focus-visible::after{pointer-events:auto}
+.zg-tip:hover::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:10px}
+.zg-tip--bottom:hover::before{bottom:auto;top:100%}
+.zg-tip--left:hover::before,.zg-tip--right:hover::before{top:0;bottom:0;height:auto;width:10px}
+.zg-tip--left:hover::before{left:auto;right:100%}.zg-tip--right:hover::before{right:auto;left:100%}
+.zg-tip[data-tip-off]::after{opacity:0!important;pointer-events:none!important}.zg-tip[data-tip-off]::before{display:none}
+
+
+/* ./charts.css */
+/* LineChart, AreaChart, BarChart, DonutChart (@ziyarago/ui-pro). Colors only from tokens: the series palette (--zg-chart-1..6), the tones and the grid / axis / label colors are defined here
+   per theme and palette (gold, tamam). Tokens are declared on .zg-chart so palette references resolve where the chart is. */
+.zg-chart{
+  --zg-chart-brand:var(--zg-brand);--zg-chart-info:var(--zg-sky);--zg-chart-success:oklch(0.76 0.15 150);--zg-chart-warning:oklch(0.8 0.14 80);--zg-chart-danger:oklch(0.7 0.18 25);--zg-chart-neutral:oklch(0.72 0.012 70);
+  --zg-chart-1:var(--zg-chart-brand);--zg-chart-2:var(--zg-chart-info);--zg-chart-3:var(--zg-chart-success);--zg-chart-4:oklch(0.72 0.13 300);--zg-chart-5:oklch(0.76 0.14 45);--zg-chart-6:oklch(0.72 0.15 350);
+  --zg-chart-grid:oklch(1 0 0 / .07);--zg-chart-axis:oklch(1 0 0 / .24);--zg-chart-label:var(--zg-text-3);--zg-chart-surface:var(--zg-pop);--zg-chart-band:oklch(1 0 0 / .06);
+}
+[data-palette="tamam"] .zg-chart{--zg-chart-success:oklch(0.76 0.13 175);--zg-chart-1:var(--zg-chart-brand);--zg-chart-2:var(--zg-chart-info);--zg-chart-3:oklch(0.72 0.13 300);--zg-chart-4:oklch(0.78 0.14 75);--zg-chart-5:oklch(0.72 0.15 350);--zg-chart-6:oklch(0.7 0.14 255)}
+[data-theme="light"] .zg-chart{
+  --zg-chart-brand:oklch(0.55 0.09 66);--zg-chart-info:oklch(0.5 0.11 230);--zg-chart-success:oklch(0.48 0.13 150);--zg-chart-warning:oklch(0.52 0.12 70);--zg-chart-danger:oklch(0.5 0.18 25);--zg-chart-neutral:oklch(0.5 0.012 70);
+  --zg-chart-4:oklch(0.5 0.15 300);--zg-chart-5:oklch(0.55 0.14 45);--zg-chart-6:oklch(0.5 0.17 350);
+  --zg-chart-grid:oklch(0.3 0.02 60 / .26);--zg-chart-axis:oklch(0.3 0.02 60 / .75);--zg-chart-band:oklch(0.3 0.02 60 / .06);
+}
+[data-theme="light"][data-palette="tamam"] .zg-chart,[data-theme="light"] [data-palette="tamam"] .zg-chart,[data-palette="tamam"] [data-theme="light"] .zg-chart{--zg-chart-brand:oklch(0.5 0.17 142);--zg-chart-info:oklch(0.5 0.1 200);--zg-chart-success:oklch(0.48 0.12 175);--zg-chart-3:oklch(0.5 0.15 300);--zg-chart-4:oklch(0.55 0.13 70);--zg-chart-5:oklch(0.5 0.17 350);--zg-chart-6:oklch(0.5 0.15 255)}
+
+.zg-chart{position:relative;display:block;width:100%;min-width:0;color:var(--zg-text-2);font:12px/1.3 var(--zg-font)}
+.zg-chart__box{position:relative;max-width:100%}
+.zg-chart__plot{position:relative;display:block;max-width:100%;touch-action:pan-y;outline:0;border-radius:10px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;cursor:crosshair}
+.zg-chart__plot:focus-visible{box-shadow:0 0 0 3px var(--zg-brand-soft),0 0 0 1px var(--zg-brand)}
+.zg-chart__svg{display:block;width:100%;height:auto;max-width:100%;overflow:visible}
+.zg-chart__grid{stroke:var(--zg-chart-grid);stroke-width:1;shape-rendering:crispEdges}
+.zg-chart__zero{stroke:var(--zg-chart-axis)}
+.zg-chart__tick{fill:var(--zg-chart-label);font-size:11px;font-family:inherit;font-variant-numeric:tabular-nums}
+.zg-chart__line{stroke:var(--c);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
+.zg-chart__gs{stop-color:var(--c)}
+.zg-chart__pt{fill:var(--c);stroke:var(--zg-chart-surface);stroke-width:1.5}
+.zg-chart__pt--on{stroke-width:2}
+.zg-chart__guide{stroke:var(--zg-chart-axis);stroke-width:1;stroke-dasharray:3 3;shape-rendering:crispEdges}
+.zg-chart__band{fill:var(--zg-chart-band)}
+.zg-chart__bar{fill:var(--c)}
+.zg-chart__bar--on{fill:color-mix(in oklch,var(--c) 82%,var(--zg-text-1))}
+.zg-chart__slice{fill:var(--c);stroke:none}
+.zg-chart__slice--on{fill:color-mix(in oklch,var(--c) 82%,var(--zg-text-1))}
+.zg-chart__track{stroke:var(--zg-s2)}
+.zg-chart__total{fill:var(--zg-text-1);font-weight:600;font-family:inherit;font-variant-numeric:tabular-nums}
+.zg-chart__totall{fill:var(--zg-chart-label);font-size:11px;font-family:inherit}
+.zg-chart__tip{position:absolute;z-index:3;box-sizing:border-box;pointer-events:none;background:var(--zg-pop);color:var(--zg-text-1);border-radius:12px;box-shadow:var(--zg-shadow-1),inset 0 0 0 1px var(--zg-stroke);padding:8px 12px;font-size:12px}
+.zg-chart__tipt{color:var(--zg-text-2);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.zg-chart__tipr{display:flex;align-items:center;gap:8px;line-height:20px}
+.zg-chart__tipr--on .zg-chart__tipl{color:var(--zg-text-1)}
+.zg-chart__tipl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--zg-text-2)}
+.zg-chart__tipv{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
+.zg-chart__sw{flex:none;width:10px;height:10px;border-radius:3px;background:var(--c)}
+.zg-chart__sw--dash{width:16px;height:0;border-radius:0;background:none;border-top:2.5px dashed var(--c)}
+.zg-chart__legend{display:flex;flex-wrap:wrap;gap:4px 8px;margin:10px 0 0;padding:0;list-style:none}
+.zg-chart__lg{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:2px 8px;border:0;border-radius:8px;background:none;color:var(--zg-text-2);font:inherit;font-size:13px;cursor:pointer;text-align:start}
+.zg-chart__lg:hover{background:var(--zg-s2)}
+.zg-chart__lg:focus-visible{outline:0;box-shadow:0 0 0 3px var(--zg-brand-soft),0 0 0 1px var(--zg-brand)}
+.zg-chart__lg[aria-pressed="false"]{color:var(--zg-text-3)}
+.zg-chart__lg[aria-pressed="false"] .zg-chart__lgt{text-decoration:line-through}
+.zg-chart__lg[aria-pressed="false"] .zg-chart__sw{background:none;box-shadow:inset 0 0 0 2px var(--c)}
+.zg-chart__lg[aria-pressed="false"] .zg-chart__sw--dash{box-shadow:none}
+.zg-chart__lgv{margin-inline-start:auto;padding-inline-start:12px;font-variant-numeric:tabular-nums;color:var(--zg-text-2);white-space:nowrap}
+.zg-chart--donut{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
+.zg-chart--donut .zg-chart__box{flex:none;max-width:100%}
+.zg-chart--donut .zg-chart__legend{flex:1 1 200px;min-width:0;flex-direction:column;flex-wrap:nowrap;gap:2px;margin:0}
+.zg-chart--donut .zg-chart__lg{width:100%}
+.zg-chart__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;padding:16px;text-align:center;color:var(--zg-text-3);border-radius:16px;box-shadow:inset 0 0 0 1px var(--zg-stroke)}
+.zg-chart__emptyt{margin:0;font-size:13px}
+.zg-chart--donut.zg-chart--empty,.zg-chart--donut.zg-chart--loading{display:block}
+.zg-chart__sk{display:block;max-width:100%}
+.zg-chart--donut .zg-chart__sk{margin-inline:auto}
+.zg-chart__skg{stroke:var(--zg-s2);stroke-width:1;vector-effect:non-scaling-stroke}
+.zg-chart__skp{stroke:var(--zg-s3);stroke-linecap:round;animation:zg-chart-pulse 1.4s ease-in-out infinite}
+.zg-chart__skbars{display:flex;align-items:flex-end;gap:8px}
+.zg-chart__skbars .zg-skel{flex:1;border-radius:6px 6px 2px 2px}
+@keyframes zg-chart-pulse{50%{opacity:.45}}
+@media (prefers-reduced-motion:reduce){.zg-chart__skp{animation:none}}
 
 
 /* ./sizes/typography.css */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ziyarago/ui",
-  "version": "0.15.3",
+  "version": "0.17.0",
   "description": "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).",
   "keywords": [
     "ui",

package/src/core/bools.js

@@ -1,4 +1,4 @@
 // Names of props that are boolean in EVERY component that documents them. The Vue adapter turns the bare-attribute form (<UiButton block>, which Vue delivers as '') into true for these.
 // Names that are boolean somewhere and text elsewhere (modelValue, image, brand) are not listed: '' is a legitimate value there.
 // scripts/check-meta.mjs keeps this list in sync with src/meta.
-export const BOOL_PROPS = new Set(['addable', 'allowEmpty', 'autoResize', 'autofocus', 'banner', 'block', 'bold', 'checked', 'clearable', 'closable', 'closeOnBackdrop', 'closeOnEsc', 'collapsed', 'collapsible', 'disabled', 'divider', 'dot', 'external', 'featured', 'frame', 'ghost', 'glass', 'hideArrows', 'hideIcon', 'highlightLast', 'iconOnly', 'indeterminate', 'interactive', 'labelLeft', 'last', 'loading', 'multi', 'multiple', 'open', 'pill', 'plain', 'readonly', 'required', 'resize', 'ring', 'sanitize', 'selectGroups', 'showCount', 'showForgot', 'showRemember', 'showValue', 'spellcheck', 'ticks', 'truncate', 'vertical', 'vip', 'wrap']);
+export const BOOL_PROPS = new Set(['addable', 'allowEmpty', 'autoResize', 'autofocus', 'banner', 'block', 'bold', 'checked', 'clearable', 'closable', 'closeOnBackdrop', 'closeOnEsc', 'collapsed', 'collapsible', 'disabled', 'divider', 'dot', 'external', 'featured', 'frame', 'ghost', 'glass', 'hideArrows', 'hideIcon', 'highlightLast', 'iconOnly', 'indeterminate', 'interactive', 'labelLeft', 'last', 'legend', 'loading', 'multi', 'multiple', 'open', 'pill', 'plain', 'readonly', 'required', 'resize', 'ring', 'sanitize', 'selectGroups', 'showCount', 'showForgot', 'showPoints', 'showRemember', 'showValue', 'spellcheck', 'stacked', 'ticks', 'truncate', 'vertical', 'vip', 'wrap']);