@ziyarago/ui 0.16.0 → 0.18.0

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "@ziyarago/ui",
- "version": "0.16.0",
+ "version": "0.18.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",
@@ -9904,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",
@@ -11747,14 +12173,28 @@
      "description": "Logo or product name on the left."
     },
     "items": {
-     "type": "{ value: string; label: string; icon?: string; count?: string | number }[]",
+     "type": "{ value: string; label: string; icon?: string; count?: string | number; children?: ({ value: string; label: string; icon?: string; count?: string | number; disabled?: boolean } | { heading: string } | { separator: true })[] }[]",
      "default": "[]",
-     "description": "Navigation entries. count renders a small counter after the label."
+     "description": "Navigation entries. count renders a small counter after the label. An entry with children becomes a drop-down: click or ArrowDown opens a menu of its children (each with an optional icon and count, headings and separators allowed); selecting one calls change with the child value. The entry is marked current when one of its children is."
     },
     "value": {
      "type": "string",
      "description": "Value of the active item (aria-current=\"page\")."
     },
+    "overflow": {
+     "type": "'menu' | 'none'",
+     "values": [
+      "menu",
+      "none"
+     ],
+     "default": "menu",
+     "description": "'menu': entries that do not fit move into a trailing \"More\" drop-down (measured after render and on resize; server rendering shows all entries). 'none': no collapsing, the row scrolls sideways and sub-menus are clipped, so avoid children with it."
+    },
+    "moreLabel": {
+     "type": "string",
+     "default": "More",
+     "description": "Accessible name of the overflow drop-down button."
+    },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
      "values": [
@@ -11772,11 +12212,12 @@
     "actions": "Right side of the header (buttons, avatar). React also accepts an actions prop."
    },
    "events": {
-    "change": "Called with the value of the clicked item."
+    "change": "Called with the value of the clicked item or sub-menu item."
    },
    "notes": [
     "Controlled: update value yourself in the change handler.",
-    "Items use count; SubNav uses badge for the same purpose."
+    "Items use count; SubNav uses badge for the same purpose.",
+    "Entries with children and the More menu share the Dropdown keyboard behaviour: ArrowDown opens, arrows and Home/End move, Escape closes and returns focus to the button."
    ]
   },
   {

package/dist/style.css

@@ -248,7 +248,7 @@
 .zg-call{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:18px;background:var(--zg-s2)}
 @media(prefers-reduced-motion:reduce){.zg-root *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
 
-.zg-topnav__items{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}.zg-topnav__items:not(:hover){}.zg-topnav__items .zg-navitem{padding-inline:12px}
+.zg-topnav__items .zg-navitem{padding-inline:12px}
 
 
 /* ./components2.css */
@@ -577,6 +577,83 @@
 .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}
+/* TopNav: no edge fade; items that do not fit move into a "More" menu, sub-menus open under their item */
+.zg-topnav__items{overflow:visible;flex-wrap:nowrap}.zg-topnav__items[data-overflow="none"]{overflow-x:auto}
+.zg-topnav__dd{display:flex}.zg-topnav__dd>.zg-navitem{height:100%}.zg-topnav__dd .zg-menu{top:calc(100% + 10px);min-width:220px}
+.zg-topnav__dd>.zg-navitem[aria-expanded="true"] .zg-icon:last-child:not(:first-child){transform:rotate(180deg)}
+.zg-menu__i[aria-current="page"]{background:var(--zg-s2);font-weight:700}.zg-menu__i .zg-navitem__count{margin-inline-start:auto}
+.zg-menu__h{padding:8px 12px 4px;font:600 12px var(--zg-font);letter-spacing:.06em;text-transform:uppercase;color:var(--zg-text-3)}
+
+
+/* ./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.16.0",
+  "version": "0.18.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']);