@ziyarago/ui 0.2.0 → 0.4.0

package/src/i18n/components/TabTiles.js

@@ -0,0 +1,5 @@
+export default {
+  en: { add: 'Add' },
+  ar: { add: 'إضافة' },
+  ru: { add: 'Добавить' },
+};

package/src/i18n/components/Tag.js

@@ -0,0 +1,5 @@
+export default {
+  en: { remove: 'Remove' },
+  ar: { remove: 'إزالة' },
+  ru: { remove: 'Удалить' },
+};

package/src/i18n/components/TopNav.js

@@ -0,0 +1,5 @@
+export default {
+  en: { label: 'Main' },
+  ar: { label: 'الرئيسية' },
+  ru: { label: 'Основная' },
+};

package/src/i18n/components/Tour.js

@@ -0,0 +1,5 @@
+export default {
+  en: { label: 'Tour' },
+  ar: { label: 'جولة تعريفية' },
+  ru: { label: 'Тур' },
+};

package/src/i18n/components/TourCard.js

@@ -0,0 +1,5 @@
+export default {
+  en: { seats: 'Seats' },
+  ar: { seats: 'المقاعد' },
+  ru: { seats: 'Места' },
+};

package/src/i18n/components/TourPopover.js

@@ -0,0 +1,5 @@
+export default {
+  en: { close: 'Close', back: 'Back', next: 'Next', finish: 'Finish' },
+  ar: { close: 'إغلاق', back: 'رجوع', next: 'التالي', finish: 'إنهاء' },
+  ru: { close: 'Закрыть', back: 'Назад', next: 'Следующий', finish: 'Готово' },
+};

package/src/i18n/components/TreeSelect.js

@@ -0,0 +1,5 @@
+export default {
+  en: { search: 'Search' },
+  ar: { search: 'بحث' },
+  ru: { search: 'Поиск' },
+};

package/src/i18n/components/Validation.js

@@ -0,0 +1,5 @@
+export default {
+  en: { required: 'This field is required', email: 'Enter a valid email', url: 'Enter a valid URL', digits: 'Exactly {n} digits', alpha: 'Letters only', alphaDash: 'Letters, digits, dash and underscore', minLength: 'At least {n} characters', maxLength: 'At most {n} characters', range: 'Between {a} and {b}', invalid: 'Invalid format', confirmed: 'Values do not match', password: '8+ characters, a digit and a capital letter' },
+  ar: { required: 'هذا الحقل مطلوب', email: 'أدخل بريدًا إلكترونيًا صالحًا', url: 'أدخل رابطًا صالحًا', digits: '{n} أرقام بالضبط', alpha: 'أحرف فقط', alphaDash: 'أحرف وأرقام وشرطة وشرطة سفلية', minLength: '{n} أحرف على الأقل', maxLength: '{n} أحرف كحد أقصى', range: 'بين {a} و {b}', invalid: 'تنسيق غير صالح', confirmed: 'القيمتان غير متطابقتين', password: '8 أحرف أو أكثر ورقم وحرف كبير' },
+  ru: { required: 'Обязательное поле', email: 'Введите корректный email', url: 'Введите корректный URL', digits: 'Ровно {n} цифр', alpha: 'Только буквы', alphaDash: 'Буквы, цифры, дефис и подчёркивание', minLength: 'Не менее {n} символов', maxLength: 'Не более {n} символов', range: 'От {a} до {b}', invalid: 'Неверный формат', confirmed: 'Значения не совпадают', password: '8+ символов, цифра и заглавная буква' },
+};

package/src/i18n/components/index.js

@@ -0,0 +1,135 @@
+// generated by scripts/i18n-index.mjs: do not edit
+import { defineMessages } from '../index.js';
+import ActionCard from './ActionCard.js';
+import Actionsheet from './Actionsheet.js';
+import Alert from './Alert.js';
+import Breadcrumbs from './Breadcrumbs.js';
+import Calendar from './Calendar.js';
+import CallCard from './CallCard.js';
+import CallRow from './CallRow.js';
+import Carousel from './Carousel.js';
+import ChartCard from './ChartCard.js';
+import ChatAi from './ChatAi.js';
+import Chip from './Chip.js';
+import ChipInput from './ChipInput.js';
+import CodeInput from './CodeInput.js';
+import Combobox from './Combobox.js';
+import CommandPalette from './CommandPalette.js';
+import ConfirmDialog from './ConfirmDialog.js';
+import ContactPanel from './ContactPanel.js';
+import CopyButton from './CopyButton.js';
+import DataGroup from './DataGroup.js';
+import DataState from './DataState.js';
+import DataTable from './DataTable.js';
+import DatePicker from './DatePicker.js';
+import DealCard from './DealCard.js';
+import Drawer from './Drawer.js';
+import ErrorPage from './ErrorPage.js';
+import FileUpload from './FileUpload.js';
+import FullscreenDialog from './FullscreenDialog.js';
+import Gallery from './Gallery.js';
+import GuestCard from './GuestCard.js';
+import ImageUpload from './ImageUpload.js';
+import ImageViewer from './ImageViewer.js';
+import IncomingCall from './IncomingCall.js';
+import InlineEdit from './InlineEdit.js';
+import IntegrationCard from './IntegrationCard.js';
+import LoginForm from './LoginForm.js';
+import Map from './Map.js';
+import Modal from './Modal.js';
+import MultiSelect from './MultiSelect.js';
+import NotificationBell from './NotificationBell.js';
+import NumberInput from './NumberInput.js';
+import Pagination from './Pagination.js';
+import PasswordInput from './PasswordInput.js';
+import Popconfirm from './Popconfirm.js';
+import PricingCard from './PricingCard.js';
+import RamadanTracker from './RamadanTracker.js';
+import RangeCalendar from './RangeCalendar.js';
+import RangeSlider from './RangeSlider.js';
+import Rating from './Rating.js';
+import RichEditor from './RichEditor.js';
+import Screensaver from './Screensaver.js';
+import SearchInput from './SearchInput.js';
+import SideNav from './SideNav.js';
+import Snackbar from './Snackbar.js';
+import Sortable from './Sortable.js';
+import Spinner from './Spinner.js';
+import StatusPage from './StatusPage.js';
+import StepDialog from './StepDialog.js';
+import StepForm from './StepForm.js';
+import TabTiles from './TabTiles.js';
+import Tag from './Tag.js';
+import TopNav from './TopNav.js';
+import Tour from './Tour.js';
+import TourCard from './TourCard.js';
+import TourPopover from './TourPopover.js';
+import TreeSelect from './TreeSelect.js';
+import Validation from './Validation.js';
+
+defineMessages('ActionCard', ActionCard);
+defineMessages('Actionsheet', Actionsheet);
+defineMessages('Alert', Alert);
+defineMessages('Breadcrumbs', Breadcrumbs);
+defineMessages('Calendar', Calendar);
+defineMessages('CallCard', CallCard);
+defineMessages('CallRow', CallRow);
+defineMessages('Carousel', Carousel);
+defineMessages('ChartCard', ChartCard);
+defineMessages('ChatAi', ChatAi);
+defineMessages('Chip', Chip);
+defineMessages('ChipInput', ChipInput);
+defineMessages('CodeInput', CodeInput);
+defineMessages('Combobox', Combobox);
+defineMessages('CommandPalette', CommandPalette);
+defineMessages('ConfirmDialog', ConfirmDialog);
+defineMessages('ContactPanel', ContactPanel);
+defineMessages('CopyButton', CopyButton);
+defineMessages('DataGroup', DataGroup);
+defineMessages('DataState', DataState);
+defineMessages('DataTable', DataTable);
+defineMessages('DatePicker', DatePicker);
+defineMessages('DealCard', DealCard);
+defineMessages('Drawer', Drawer);
+defineMessages('ErrorPage', ErrorPage);
+defineMessages('FileUpload', FileUpload);
+defineMessages('FullscreenDialog', FullscreenDialog);
+defineMessages('Gallery', Gallery);
+defineMessages('GuestCard', GuestCard);
+defineMessages('ImageUpload', ImageUpload);
+defineMessages('ImageViewer', ImageViewer);
+defineMessages('IncomingCall', IncomingCall);
+defineMessages('InlineEdit', InlineEdit);
+defineMessages('IntegrationCard', IntegrationCard);
+defineMessages('LoginForm', LoginForm);
+defineMessages('Map', Map);
+defineMessages('Modal', Modal);
+defineMessages('MultiSelect', MultiSelect);
+defineMessages('NotificationBell', NotificationBell);
+defineMessages('NumberInput', NumberInput);
+defineMessages('Pagination', Pagination);
+defineMessages('PasswordInput', PasswordInput);
+defineMessages('Popconfirm', Popconfirm);
+defineMessages('PricingCard', PricingCard);
+defineMessages('RamadanTracker', RamadanTracker);
+defineMessages('RangeCalendar', RangeCalendar);
+defineMessages('RangeSlider', RangeSlider);
+defineMessages('Rating', Rating);
+defineMessages('RichEditor', RichEditor);
+defineMessages('Screensaver', Screensaver);
+defineMessages('SearchInput', SearchInput);
+defineMessages('SideNav', SideNav);
+defineMessages('Snackbar', Snackbar);
+defineMessages('Sortable', Sortable);
+defineMessages('Spinner', Spinner);
+defineMessages('StatusPage', StatusPage);
+defineMessages('StepDialog', StepDialog);
+defineMessages('StepForm', StepForm);
+defineMessages('TabTiles', TabTiles);
+defineMessages('Tag', Tag);
+defineMessages('TopNav', TopNav);
+defineMessages('Tour', Tour);
+defineMessages('TourCard', TourCard);
+defineMessages('TourPopover', TourPopover);
+defineMessages('TreeSelect', TreeSelect);
+defineMessages('Validation', Validation);

package/src/i18n/index.js

@@ -0,0 +1,50 @@
+// Built-in component strings. One file per component in ./components/<Name>.js with all locales:
+//   export default { en: { copy: 'Copy' } }     (the open source package ships en, ar, ru; the other 13 languages come from the Pro language pack
+//   that calls defineMessages(component, { uz: {...} }) or from the app via setUiMessages). A locale without strings falls back to English.
+// The kit has its own translator: it never depends on the host app's i18n library. Sync it with yours:
+//   watch(() => i18n.locale.value, l => setUiLocale(l))        // vue-i18n
+//   setUiMessages('ru', { CopyButton: { copy: 'Скопировать' } }) // override single strings from the app
+export const LOCALES = ['en', 'ar', 'ru', 'uz', 'tg', 'tr', 'fr', 'fa', 'hi', 'ur', 'bn', 'id', 'kk', 'ky', 'ms', 'ha'];
+/** Languages whose strings ship in the free package. The rest come from the Pro language pack. */
+export const FREE_LOCALES = ['en', 'ar', 'ru'];
+export const RTL_LOCALES = ['ar', 'fa', 'ur'];
+
+const registry = {};
+const overrides = {};
+const subs = new Set();
+let locale = 'en';
+let version = 0;
+
+const norm = l => { const k = String(l || 'en').toLowerCase().split(/[-_]/)[0]; return LOCALES.includes(k) ? k : 'en'; };
+const bump = () => { version++; subs.forEach(f => f(locale)); };
+
+/** Register strings of a component. Calling it again for the same component MERGES locales: a language pack can add locales on top of the built-in ones. */
+export function defineMessages(component, messages) {
+  const cur = registry[component] || (registry[component] = {});
+  for (const [l, msgs] of Object.entries(messages)) cur[l] = { ...(cur[l] || {}), ...msgs };
+  return registry[component];
+}
+export function getUiLocale() { return locale; }
+export function isRtlLocale(l = locale) { return RTL_LOCALES.includes(norm(l)); }
+export function setUiLocale(l) { const n = norm(l); if (n === locale) return; locale = n; bump(); }
+/** Override single strings: setUiMessages('ru', { Pagination: { prev: 'Назад' } }). Call again to change; pass null to clear a locale. */
+export function setUiMessages(l, partial) {
+  const k = norm(l);
+  if (partial === null) delete overrides[k];
+  else for (const [c, msgs] of Object.entries(partial || {})) overrides[k] = { ...(overrides[k] || {}), [c]: { ...(overrides[k]?.[c] || {}), ...msgs } };
+  bump();
+}
+export function subscribeUiLocale(fn) { subs.add(fn); return () => subs.delete(fn); }
+export function getUiVersion() { return version; }
+
+const fill = (s, p) => (p ? s.replace(/\{(\w+)\}/g, (m, k) => (k in p ? String(p[k]) : m)) : s);
+
+/** Translate a component string. Order: app overrides, component file in the current locale, app overrides in English, component file in English, the key. */
+export function t(component, key, params) {
+  const hit = overrides[locale]?.[component]?.[key] ?? registry[component]?.[locale]?.[key]
+    ?? overrides.en?.[component]?.[key] ?? registry[component]?.en?.[key] ?? key;
+  return fill(hit, params);
+}
+
+/** Locale-aware helper for numbers and dates in components (uses the browser/Node Intl). */
+export const intlLocale = () => ({ en: 'en-US', ar: 'ar', ru: 'ru-RU', uz: 'uz-UZ', tg: 'tg-TJ', tr: 'tr-TR', fr: 'fr-FR', fa: 'fa-IR', hi: 'hi-IN', ur: 'ur-PK', bn: 'bn-BD', id: 'id-ID', kk: 'kk-KZ', ky: 'ky-KG', ms: 'ms-MY', ha: 'ha-NG' })[locale];

package/src/meta/actions.js

@@ -17,10 +17,13 @@ export default {
       loading: { type: 'boolean', default: false, description: 'Shows a spinner instead of the icon and disables the button.' },
       disabled: { type: 'boolean', default: false, description: 'Blocks interaction and dims the button.' },
       block: { type: 'boolean', default: false, description: 'Stretches the button to the full width of its container.' },
+      type: { type: "'button' | 'submit' | 'reset'", values: ['button', 'submit', 'reset'], default: 'button', description: 'Native button type. Use submit inside a form.' },
+      iconOnly: { type: 'boolean', default: false, description: 'Square button (width equals height) with no horizontal padding, for a lone icon. Pass an aria-label.' },
+      title: { type: 'string', description: 'Native tooltip text.' },
     },
     events: { click: 'Native click event. Not fired while disabled or loading.' },
     slots: { default: 'Button label.' },
-    notes: ['Always renders type="button", so it never submits a form by itself.'],
+    notes: ['Renders type="button" unless type is set, so it never submits a form by itself.'],
   },
   IconButton: {
     description: 'Square button with only an icon; use for toolbars and compact actions.',
@@ -80,9 +83,12 @@ export default {
   SegmentedControl: {
     description: 'Segmented switch for choosing exactly one of a few options.',
     props: {
-      items: { type: '{ value: string; label: string }[]', default: '[]', required: true, description: 'Segments to render.' },
+      items: { type: '{ value: string; label: string; icon?: string; disabled?: boolean }[]', default: '[]', required: true, description: 'Segments to render. icon is an icon name; disabled: true dims one segment.' },
       modelValue: { type: 'string', model: true, description: 'Value of the selected segment.' },
       size: sizeProp('md', 'Control size. sm and md also have a dedicated compact style.'),
+      block: { type: 'boolean', default: false, description: 'Stretches the control to the container width with equal-width segments.' },
+      iconOnly: { type: 'boolean', default: false, description: 'Hides labels of segments that have an icon; the label stays as tooltip and aria-label.' },
+      ariaLabel: { type: 'string', description: 'Accessible name of the group.' },
     },
     events: { change: 'Called with the value of the clicked segment.' },
   },
@@ -119,8 +125,9 @@ export default {
   Badge: {
     description: 'Status badge with a colored tone and optional dot.',
     props: {
-      tone: { type: "'brand' | 'success' | 'warning' | 'danger' | 'info'", values: ['brand', 'success', 'warning', 'danger', 'info'], description: 'Color. Omit for the neutral style.' },
+      tone: { type: "'brand' | 'success' | 'warning' | 'danger' | 'info' | 'inverse'", values: ['brand', 'success', 'warning', 'danger', 'info', 'inverse'], description: 'Color. inverse is a solid high-contrast badge (dark on light themes, light on dark). Omit for the neutral style.' },
       dot: { type: 'boolean', default: false, description: 'Shows a status dot before the content.' },
+      shape: { type: "'pill' | 'square'", values: ['pill', 'square'], default: 'pill', description: 'square uses small rounded corners instead of a full pill.' },
       size: sizeProp('md', 'Badge height: xs 18px, sm 20px, md 24px, lg 28px, xl 32px.'),
     },
     slots: { default: 'Badge content.' },

package/src/meta/data.js

@@ -12,19 +12,22 @@ export default {
     props: {
       title: { type: 'string', description: 'Header title. The header renders only when title or the actions slot is set.' },
       subtitle: { type: 'string', description: 'Muted line under the title.' },
-      variant: { type: "'inverse' | 'gradient'", values: ['inverse', 'gradient'], description: 'inverse is a dark card regardless of the page theme; gradient is a tinted gradient card colored by tone. Omit for the default glass card.' },
+      variant: { type: "'inverse' | 'gradient' | 'outline'", values: ['inverse', 'gradient', 'outline'], description: 'inverse is a dark card regardless of the page theme; gradient is a tinted gradient card colored by tone; outline is transparent with a border. Omit for the default glass card.' },
       tone: { type: "'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral' | 'rose' | 'violet'", values: ['brand', 'sky', 'success', 'warning', 'danger', 'neutral', 'rose', 'violet'], default: 'brand', description: 'Gradient color. Used only with variant="gradient".' },
       intensity: { type: "'vivid'", values: ['vivid'], description: 'With variant="gradient", fills the card with a saturated color instead of a soft tint.' },
+      padding: { type: "'none'", values: ['none'], description: 'none removes the inner padding (for full-bleed tables or images). Other paddings come from size.' },
+      interactive: { type: 'boolean', default: false, description: 'Adds a pointer cursor and hover lift. With a click handler the card also becomes keyboard focusable (Enter activates).' },
       size: size('md', 'Padding, gap and title size.'),
     },
-    slots: { default: 'Card body.', actions: 'Right side of the header, for buttons or menus.' },
+    slots: { default: 'Card body.', actions: 'Right side of the header, for buttons or menus.', header: 'Replaces the whole title/actions header with custom content.', footer: 'Row under the body, for buttons or meta.' },
+    events: { click: 'Native click on the card. Combine with interactive.' },
     notes: ['Vue slot names are React props (actions) and children (default).'],
   },
 
   DataTable: {
     description: 'Table with sortable columns, custom cell rendering and optional row selection checkboxes.',
     props: {
-      columns: { type: '{ key: string; label: string; sortable?: boolean; num?: boolean; render?: (value, row, h) => VNode | string }[]', required: true, default: [], description: 'Column definitions. key reads row[key]; num right-aligns numbers; render customizes the cell; sortable shows a sort button in the header.' },
+      columns: { type: '{ key: string; label: string; sortable?: boolean; num?: boolean; align?: "left" | "center" | "right"; width?: string; render?: (value, row, h) => VNode | string }[]', required: true, default: [], description: 'Column definitions. key reads row[key]; num right-aligns numbers; render customizes the cell; sortable shows a sort button in the header.' },
       rows: { type: '({ id: string | number; [key: string]: any })[]', required: true, default: [], description: 'Row objects. Every row needs a unique id; missing cell values render as an em dash.' },
       selected: { type: '(string | number)[]', default: [], description: 'Ids of selected rows. Checkboxes show only when the select event is handled.' },
       sortKey: { type: 'string', description: 'Key of the column currently sorted. The component does not sort rows itself.' },
@@ -33,7 +36,9 @@ export default {
       labels: { type: '{ selectAll?: string; selectRow?: string }', default: "{ selectAll: 'Select all', selectRow: 'Select row' }", description: 'Accessible names of the selection checkboxes.' },
       size: size('md', 'Row density and font size.'),
     },
+    slots: { empty: 'Replaces the empty text with custom content when rows is empty.' },
     events: {
+      rowClick: 'Called with (row, index) when a body row is clicked. Rows get a pointer cursor.',
       select: 'Called with the new array of selected row ids. Handling it enables the checkbox column and select-all.',
       sort: 'Called with (key, dir) where dir is "asc" or "desc". Sort the rows yourself and pass sortKey/sortDir back.',
     },

package/src/meta/feedback.js

@@ -16,8 +16,9 @@ export default {
     props: {
       ...alertProps,
       banner: { type: 'boolean', default: false, description: 'Removes the border radius so the alert spans the full width like a Banner.' },
+      hideIcon: { type: 'boolean', default: false, description: 'Hides the leading tone icon (the icon slot is hidden too).' },
     },
-    slots: { default: 'Message text.' },
+    slots: { default: 'Message text.', title: 'Replaces the title prop with custom content.', icon: 'Replaces the tone icon inside the icon tile.', actions: 'Row under the message for buttons or links.' },
     events: { close: 'Called when the close button is clicked. The button is rendered only when this handler is set.' },
     notes: ['Has role="alert", so screen readers announce it when it appears.', 'Not self-dismissing: hide it yourself in the close handler.'],
   },

package/src/meta/forms.js

@@ -23,10 +23,24 @@ export default {
       density: { type: "'compact' | 'default'", values: ['compact', 'default'], default: 'default', description: 'compact uses the small control height.' },
       disabled,
       readonly: { type: 'boolean', default: false, description: 'Makes the input read-only.' },
+      required: { type: 'boolean', default: false, description: 'Adds a red asterisk to the label and the native required attribute (browser validation inside a form).' },
+      name: { type: 'string', forwarded: true, description: 'Native name attribute of the input.' },
+      autocomplete: { type: 'string', forwarded: true, description: 'Native autocomplete hint, for example "email" or "new-password".' },
+      min: { type: 'number | string', forwarded: true, description: 'Native min for number, date and time types.' },
+      max: { type: 'number | string', forwarded: true, description: 'Native max for number, date and time types.' },
+      step: { type: 'number | string', forwarded: true, description: 'Native step for number, date and time types.' },
+      maxlength: { type: 'number', forwarded: true, description: 'Maximum number of characters.' },
+      minlength: { type: 'number', forwarded: true, description: 'Minimum number of characters (native validation).' },
+      inputmode: { type: 'string', forwarded: true, description: 'Virtual keyboard hint: numeric, decimal, tel, email, url, search or none.' },
+      pattern: { type: 'string', forwarded: true, description: 'Native validation pattern.' },
+      spellcheck: { type: 'boolean', forwarded: true, description: 'Enables or disables spell checking.' },
+      autofocus: { type: 'boolean', forwarded: true, description: 'Focuses the input on mount.' },
+      autocapitalize: { type: 'string', forwarded: true, description: 'Native autocapitalize hint.' },
       size: size(),
     },
-    events: change('Called with the new string on every keystroke.'),
-    notes: ['Wrapped in a label, so clicking the label focuses the input.'],
+    events: { ...change('Called with the new string on every keystroke.'), blur: 'Native blur of the input (Vue @blur, React onBlur).', focus: 'Native focus of the input.', keydown: 'Native keydown of the input; modifiers like @keydown.enter work in Vue.', input: 'Native input event (after change), receives the Event.' },
+    slots: { prefix: 'Content before the input (icon or text). Replaces the icon prop. React: prefix prop.', suffix: 'Content after the input (button, unit). Same as the suffix prop. React: suffix prop.' },
+    notes: ['Wrapped in a label, so clicking the label focuses the input.', 'Native attributes (name, autocomplete, min, max, step, maxlength, inputmode, pattern ...) and the blur, focus, keydown, keyup and paste listeners are forwarded to the inner input. id, class, style, aria-* and data-* land on the root label.'],
   },
   Textarea: {
     description: 'Multi-line text input. Use for comments, descriptions and other long text.',
@@ -35,9 +49,15 @@ export default {
       label, placeholder: placeholder(), hint, error, disabled,
       rows: { type: 'number', default: 4, description: 'Visible text rows.' },
       maxlength: { type: 'number', description: 'Maximum number of characters.' },
+      readonly: { type: 'boolean', default: false, description: 'Makes the textarea read-only.' },
+      required: { type: 'boolean', default: false, forwarded: true, description: 'Adds a red asterisk to the label and the native required attribute.' },
+      autoResize: { type: 'boolean', default: false, description: 'Grows with the content (CSS field-sizing: content, Chromium and Safari).' },
+      resize: { type: 'boolean', default: true, description: 'false removes the manual resize handle.' },
+      showCount: { type: 'boolean', default: false, description: 'Shows the character count under the field, as "n / maxlength" when maxlength is set.' },
+      name: { type: 'string', forwarded: true, description: 'Native name attribute.' },
       size: size(),
     },
-    events: change('Called with the new string on every keystroke.'),
+    events: { ...change('Called with the new string on every keystroke.'), input: 'Native input event (after change), receives the Event.', blur: 'Native blur.', focus: 'Native focus.' },
   },
   NumberInput: {
     description: 'Numeric stepper with minus and plus buttons and a typed value. Use for quantities, guest counts and small integers.',
@@ -137,6 +157,9 @@ export default {
       modelValue: { type: 'string | number', model: true, description: 'Value of the selected option.' },
       options: { type: optShape, required: true, default: '[]', description: 'Available options. An option with disabled: true is dimmed and cannot be chosen.' },
       label, placeholder: placeholder('Shown when nothing is selected. Defaults to "—".'),
+      hint, error,
+      required: { type: 'boolean', default: false, description: 'Adds a red asterisk to the label. Does not validate.' },
+      name: { type: 'string', description: 'Renders a hidden input with this name and the selected value, so the control posts with a native form.' },
       disabled,
       size: size(),
     },
@@ -175,6 +198,8 @@ export default {
       label, hint, error,
       placeholder: placeholder('Defaults to "Search…".'),
       emptyText: { type: 'string', default: '—', description: 'Shown when no option matches the query.' },
+      clearable: { type: 'boolean', default: false, description: 'Shows a clear (x) button while a value is selected; it calls change with null.' },
+      filter: { type: '(option, query) => boolean', description: 'Custom matcher. Default is a case-insensitive substring match on label.' },
       disabled,
       size: size(),
     },
@@ -212,6 +237,9 @@ export default {
     props: {
       modelValue: { type: 'boolean', model: true, default: false, description: 'Checked state.' },
       label: { type: 'string', description: 'Text next to the box.' },
+      hint: { type: 'string', description: 'Second line under the label.' },
+      error: { type: 'string', description: 'Error message under the label (announced with role="alert"); a boolean or empty string shows nothing.' },
+      indeterminate: { type: 'boolean', default: false, description: 'Shows a dash instead of a check (aria-checked="mixed"). Clicking calls change with true.' },
       disabled,
       size: size('Box and label size.'),
     },
@@ -223,6 +251,9 @@ export default {
     props: {
       modelValue: { type: 'boolean', model: true, default: false, description: 'On state.' },
       label: { type: 'string', description: 'Text next to the toggle.' },
+      hint: { type: 'string', description: 'Second line under the label.' },
+      error: { type: 'string', description: 'Error message under the label (announced with role="alert").' },
+      labelLeft: { type: 'boolean', default: false, description: 'Places the label before the toggle instead of after it.' },
       disabled,
       size: size('Track and label size.'),
     },
@@ -234,7 +265,8 @@ export default {
     props: {
       modelValue: { type: 'string | number', model: true, description: 'Value of the selected option.' },
       options: { type: '{ value: string | number; label: string; hint?: string; disabled?: boolean }[]', default: '[]', description: 'Radio options. hint is a second line under the label; disabled: true disables that option only.' },
-      label,
+      label, hint, error,
+      orientation: { type: "'vertical' | 'horizontal'", values: ['vertical', 'horizontal'], default: 'vertical', description: 'horizontal lays the options out in a wrapping row under the label.' },
       disabled,
       size: size(),
     },
@@ -321,6 +353,9 @@ export default {
       modelValue: { type: 'Date | string | number', model: true, description: 'Selected date: a Date, ISO string or timestamp. Also sets the visible month. A date-only string like "2026-10-21" is read as a local date, so the day does not shift with the time zone.' },
       locale: { type: 'string', default: 'en-GB', description: 'BCP 47 locale for month and weekday names.' },
       weekStartsOn: { type: 'number', default: 1, description: 'First day of the week: 0 = Sunday, 1 = Monday.' },
+      min: { type: 'Date | string | number', description: 'Earliest selectable day; earlier days are disabled.' },
+      max: { type: 'Date | string | number', description: 'Latest selectable day; later days are disabled.' },
+      disabledDate: { type: '(date: Date) => boolean', description: 'Return true to disable a specific day.' },
       events: { type: 'Record<string, string>', default: '{}', description: 'Marked days: keys are YYYY-MM-DD, values are the tooltip text.' },
       size: size('Day cell and header size.'),
     },
@@ -345,6 +380,11 @@ export default {
       modelValue: { type: 'string | Date | number', model: true, description: 'Selected date (ISO string recommended, e.g. 2026-10-21).' },
       locale: { type: 'string', default: 'en-GB', description: 'BCP 47 locale used for the trigger text and the calendar.' },
       weekStartsOn: { type: 'number', default: 1, description: 'First day of the week: 0 = Sunday, 1 = Monday.' },
+      clearable: { type: 'boolean', default: false, description: 'Shows a clear (x) button while a date is set; it calls change with null.' },
+      min: { type: 'Date | string | number', forwarded: true, description: 'Earliest selectable day, forwarded to the calendar.' },
+      max: { type: 'Date | string | number', forwarded: true, description: 'Latest selectable day, forwarded to the calendar.' },
+      disabledDate: { type: '(date: Date) => boolean', forwarded: true, description: 'Return true to disable a specific day, forwarded to the calendar.' },
+      required: { type: 'boolean', default: false, forwarded: true, description: 'Adds a red asterisk to the label. Does not validate.' },
       label, hint, error,
       placeholder: placeholder('Shown when no date is set. Defaults to "Select date".'),
       disabled,

package/src/meta/media.js

@@ -9,6 +9,11 @@ export default {
     props: {
       name: { type: 'string', description: 'Full name. Shown as the tooltip and used for up to two initials; "?" when empty.' },
       src: { type: 'string', description: 'Image URL. Initials are shown without it.' },
+      initials: { type: 'string', description: 'Explicit initials (up to 3 characters, uppercased) instead of the ones derived from name.' },
+      tone: { type: "'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral'", values: ['brand', 'sky', 'success', 'warning', 'danger', 'neutral'], default: 'brand', description: 'Background color of the initials avatar.' },
+      shape: { type: "'circle' | 'rounded'", values: ['circle', 'rounded'], default: 'circle', description: 'rounded gives a squircle with a 30% corner radius.' },
+      ring: { type: 'boolean', default: false, description: 'Adds a background-colored ring so overlapping avatars stay separated.' },
+      status: { type: "'online' | 'offline' | 'away' | 'busy'", values: ['online', 'offline', 'away', 'busy'], description: 'Shows a presence dot in the bottom corner.' },
       size: { type: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number", values: SZ, default: 'md', description: 'Diameter: xs 24, sm 32, md 40, lg 56, xl 72 px. A number is used directly as px.' },
     },
     notes: ['Avatar sizes differ from other components (lg 56, xl 72), and a number gives any custom size.'],
@@ -74,8 +79,8 @@ export default {
       label: { type: 'string', default: 'Map', description: 'aria-label of the map region.' },
       labels: { type: '{ zoomIn?: string; zoomOut?: string }', default: "{ zoomIn: 'Zoom in', zoomOut: 'Zoom out' }", description: 'Accessible names of the zoom buttons.' },
     },
-    events: { select: 'Called with the marker object when a marker is clicked.' },
-    notes: ['The center and zoom props are initial values; user panning and zooming is kept in internal state.', 'Tiles come from a third-party CDN, so it needs network access.'],
+    events: { select: 'Called with the marker object when a marker is clicked.', move: 'Called with { lat, lon, zoom } while the user pans or zooms (drag, touch, wheel, double click or the +/- buttons).', zoom: 'Called with the new zoom level when it changes.' },
+    notes: ['The center and zoom props are initial values; user panning and zooming is kept in internal state. Listen to move/zoom to track it.','Drag or touch to pan, wheel or double click to zoom around the pointer. The tile theme follows the page data-theme after mount (light tiles on the server render) unless theme or style is set.', 'Tiles come from a third-party CDN, so it needs network access.'],
   },
 
   ProfileHeader: {

package/src/meta/navigation.js

@@ -72,6 +72,7 @@ export default {
     props: {
       items: { type: '{ label: string; href?: string }[]', default: '[]', description: 'Trail from root to current. All but the last render as links (href defaults to "#"); the last is bold with aria-current="page".' },
       size: size('text and separator size'),
+      separator: { type: "'chevron' | 'slash' | 'dot'", values: ['chevron', 'slash', 'dot'], default: 'chevron', description: 'Glyph between items.' },
     },
   },
 
@@ -82,6 +83,8 @@ export default {
       pages: { type: 'number', default: 1, description: 'Total number of pages.' },
       siblings: { type: 'number', default: 1, description: 'Page buttons shown on each side of the current page. First and last page are always shown; gaps become an ellipsis.' },
       label: { type: 'string', default: 'Pagination', description: 'Accessible name of the navigation landmark.' },
+      hideArrows: { type: 'boolean', default: false, description: 'Hides the previous and next buttons.' },
+      labels: { type: '{ prev?: string; next?: string; page?: string }', default: "{ prev: 'Previous page', next: 'Next page', page: 'Page' }", description: 'Accessible names of the arrow buttons and of each page button ("Page 3").' },
       size: size('button size and text'),
     },
     events: { change: 'Called with the clicked page number (also from the previous and next buttons).' },

package/src/meta/overlay.js

@@ -17,9 +17,14 @@ export default {
     props: {
       open: open('dialog'),
       title: { type: 'string', description: 'Header text and aria-label of the dialog.' },
+      subtitle: { type: 'string', description: 'Muted line under the title in the header.' },
+      closable: { type: 'boolean', default: true, description: 'false hides the close (x) button in the header.' },
+      closeOnBackdrop: { type: 'boolean', default: true, description: 'false ignores clicks on the scrim.' },
+      closeOnEsc: { type: 'boolean', default: true, description: 'false ignores the Escape key (focus trap stays active).' },
+      width: { type: 'string', description: 'CSS max-width of the dialog, for example "960px". Overrides the width of size.' },
       size: size('width (320 to 720 px max), padding and text'),
     },
-    slots: { default: 'Dialog body.', footer: 'Footer area, usually action buttons. Rendered only when provided.' },
+    slots: { default: 'Dialog body.', footer: 'Footer area, usually action buttons. Rendered only when provided.', title: 'Replaces the title prop with custom header content.', subtitle: 'Replaces the subtitle prop.' },
     events: { close: 'Called on the close button, a click on the scrim or the Escape key. Set open to false in the handler.' },
     notes: ['Has role="dialog" and aria-modal. Escape calls close; on open focus moves into the dialog, Tab is trapped inside it and focus returns to the previously focused element on close.', 'Put data-autofocus on an element to choose which one receives initial focus (default: first focusable).', 'Closed state renders nothing, so inner state is lost on close.'],
   },
@@ -146,10 +151,11 @@ export default {
     description: 'Short text bubble shown on hover or focus of the wrapped element; use for icon-only controls and hints.',
     props: {
       text: { type: 'string', required: true, description: 'Tooltip text.' },
+      placement: { type: "'top' | 'bottom' | 'left' | 'right'", values: ['top', 'bottom', 'left', 'right'], default: 'top', description: 'Side of the wrapped element where the bubble appears.' },
       size: size('bubble padding and font'),
     },
     slots: { default: 'The element the tooltip is attached to.' },
-    notes: ['Pure CSS bubble with fixed placement; it cannot contain markup. For rich content use HoverCard.'],
+    notes: ['Pure CSS bubble; it cannot contain markup. For rich content use HoverCard.'],
   },
 
   Dropdown: {

package/src/nuxt/module.mjs

@@ -5,7 +5,7 @@ import { themeInitScript } from '../theme.js';
 
 export default defineNuxtModule({
   meta: { name: '@ziyarago/ui', configKey: 'ziyarago', compatibility: { nuxt: '>=3.0.0' } },
-  defaults: { css: true, prefix: 'Ui', theme: { theme: 'dark', palette: 'gold', dir: 'ltr' } },
+  defaults: { css: true, prefix: 'Ui', theme: { theme: 'dark', palette: 'gold', dir: 'ltr', bg: 'none', locale: 'en' } },
   setup(opts, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     if (opts.css) nuxt.options.css.push('@ziyarago/ui/style.css');
@@ -21,7 +21,7 @@ export default defineNuxtModule({
     if (opts.theme) {
       nuxt.options.runtimeConfig.public.ziyarago = opts.theme;
       const head = nuxt.options.app.head ||= {};
-      head.htmlAttrs = { ...(head.htmlAttrs || {}), 'data-theme': opts.theme.theme, 'data-palette': opts.theme.palette, dir: opts.theme.dir };
+      head.htmlAttrs = { ...(head.htmlAttrs || {}), 'data-theme': opts.theme.theme, 'data-palette': opts.theme.palette, 'data-bg': opts.theme.bg || 'none', dir: opts.theme.dir };
       addPlugin(resolve('./plugin.mjs'));
       head.script = [...(head.script || []), { innerHTML: themeInitScript, tagPosition: 'head' }];
     }

package/src/nuxt/plugin.mjs

@@ -1,9 +1,10 @@
 import { defineNuxtPlugin, useRuntimeConfig } from '#imports';
-import { useUiTheme } from '../theme.js';
+import { applySavedLocale, configureTheme, useUiTheme } from '../theme.js';
+import { setUiLocale } from '../i18n/index.js';
 
-export default defineNuxtPlugin(() => {
-  const ui = useUiTheme();
+export default defineNuxtPlugin(nuxtApp => {
   const d = useRuntimeConfig().public.ziyarago || {};
-  const saved = (() => { try { return localStorage.getItem('zg-ui'); } catch { return null; } })();
-  if (!saved) { ui.setTheme(d.theme || 'dark'); ui.setPalette(d.palette || 'gold'); ui.setDir(d.dir || 'ltr'); }
+  configureTheme({ theme: d.theme || 'dark', palette: d.palette || 'gold', dir: d.dir || 'ltr', bg: d.bg || 'none', locale: d.locale || 'en' });
+  useUiTheme();
+  nuxtApp.hook('app:mounted', () => { if (d.locale) setUiLocale(d.locale); applySavedLocale(); });
 });