@ziyarago/ui 0.0.0-stage → 0.1.0

package/src/meta/typography.js

@@ -0,0 +1,58 @@
+// API metadata for the typography group. Format: see src/meta/README.md
+const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
+const sizeProp = (def = 'md', desc = 'Component size.') => ({ type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'", values: SIZES, default: def, description: desc });
+
+export default {
+  Heading: {
+    description: 'Semantic heading h1-h6 with a responsive type scale; use for page and section titles.',
+    props: {
+      level: { type: '1 | 2 | 3 | 4 | 5 | 6', values: [1, 2, 3, 4, 5, 6], default: 2, description: 'HTML heading level (h1-h6). Clamped to 1-6.' },
+      size: { type: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'", values: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], default: 'lg', description: 'Visual size, independent of the semantic level.' },
+      brand: { type: 'boolean', default: false, description: 'Colors the heading with the brand text color.' },
+    },
+    slots: { default: 'Heading content.' },
+    notes: ['Pick level for document structure and size for looks; they are independent.'],
+  },
+  Text: {
+    description: 'Body text paragraph (or any inline/block tag via as) with size, tone and truncation.',
+    props: {
+      as: { type: 'string', default: 'p', description: 'HTML tag to render, for example span, div, label.' },
+      size: { type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'", values: SIZES, default: 'md', description: 'Font size: xs 12px, sm 14px, md 16px, lg 18px, xl 20px.' },
+      tone: { type: "'muted' | 'subtle' | 'brand'", values: ['muted', 'subtle', 'brand'], description: 'Text color. Omit for the primary text color.' },
+      bold: { type: 'boolean', default: false, description: 'Semi-bold weight.' },
+      truncate: { type: 'boolean', default: false, description: 'Single line with ellipsis overflow.' },
+    },
+    slots: { default: 'Text content.' },
+    notes: ['truncate needs a parent with a constrained width (for example min-width: 0 in a flex row).'],
+  },
+  Code: {
+    description: 'Code block with a header (title or language) and a copy button; use for snippets and commands.',
+    props: {
+      code: { type: 'string', required: true, description: 'Source text shown in the block and copied by the button.' },
+      title: { type: 'string', description: 'Header label. Takes priority over language.' },
+      language: { type: 'string', description: 'Header label when no title is given. Display only, no syntax highlighting.' },
+      size: sizeProp('md', 'Block padding and font size.'),
+    },
+    notes: ['The header falls back to the text "code" when neither title nor language is set.', 'No syntax highlighting: the code is rendered as plain monospace text.'],
+  },
+  Kbd: {
+    description: 'Keyboard key cap for shortcuts such as Ctrl or K.',
+    props: {
+      size: sizeProp('md', 'Key cap size.'),
+    },
+    slots: { default: 'Key label.' },
+    notes: ['Render one Kbd per key and combine them in a row for chords.'],
+  },
+  Link: {
+    description: 'Styled anchor for in-text and standalone links, with optional external-link behavior.',
+    props: {
+      href: { type: 'string', default: '#', description: 'Link target.' },
+      external: { type: 'boolean', default: false, description: 'Opens in a new tab with rel="noopener noreferrer" and shows an external-link icon.' },
+      plain: { type: 'boolean', default: false, description: 'Removes the underline styling.' },
+      size: sizeProp('md', 'Font size relative to the surrounding text (0.8em to 1.25em).'),
+    },
+    events: { click: 'Native click event.' },
+    slots: { default: 'Link content.' },
+    notes: ['Without href the link points to "#"; for SPA routing use onClick and prevent default.'],
+  },
+};

package/src/nuxt/module.mjs

@@ -0,0 +1,29 @@
+// Nuxt 3/4 module. nuxt.config: modules: ['@ziyarago/ui/nuxt'], ziyarago: { theme: true }
+import { defineNuxtModule, addComponent, addImports, addPlugin, createResolver } from '@nuxt/kit';
+import { components } from '../core/index.js';
+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' } },
+  setup(opts, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    if (opts.css) nuxt.options.css.push('@ziyarago/ui/style.css');
+    nuxt.options.build.transpile.push('@ziyarago/ui');
+    for (const name of Object.keys(components)) {
+      addComponent({ name: opts.prefix + name, export: opts.prefix + name, filePath: '@ziyarago/ui/vue' });
+    }
+    addImports([
+      { name: 'useUiTheme', from: '@ziyarago/ui/theme' },
+      { name: 'fmt', from: '@ziyarago/ui/vue' },
+      { name: 'rules', from: '@ziyarago/ui/vue' },
+    ]);
+    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 };
+      addPlugin(resolve('./plugin.mjs'));
+      head.script = [...(head.script || []), { innerHTML: themeInitScript, tagPosition: 'head' }];
+    }
+  },
+});

package/src/nuxt/plugin.mjs

@@ -0,0 +1,9 @@
+import { defineNuxtPlugin, useRuntimeConfig } from '#imports';
+import { useUiTheme } from '../theme.js';
+
+export default defineNuxtPlugin(() => {
+  const ui = useUiTheme();
+  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'); }
+});

package/src/react/index.js

@@ -0,0 +1,31 @@
+// React 18+ adapter. Usage: import { UiButton, UiAppShell } from '@ziyarago/ui/react'
+import React, { useState, createElement, cloneElement, isValidElement } from 'react';
+import { createPortal } from 'react-dom';
+import { components } from '../core/index.js';
+
+const C = {};
+const EV = { keydown: 'KeyDown', keyup: 'KeyUp', dragenter: 'DragEnter', dragover: 'DragOver', dragleave: 'DragLeave', pointerdown: 'PointerDown', pointerup: 'PointerUp', pointermove: 'PointerMove', mousedown: 'MouseDown', mouseup: 'MouseUp', mouseenter: 'MouseEnter', mouseleave: 'MouseLeave' };
+const hh = (t, p, ...k) => {
+  if (p && typeof t === 'string') { const q = {}; for (const key in p) { const m = /^on([a-z]+)$/.exec(key); q[m && EV[m[1]] ? 'on' + EV[m[1]] : key] = p[key]; } p = q; }
+  if (p && 'class' in p) { const { class: cls, ...rest } = p; p = { ...rest, className: cls }; }
+  if (p) { const q = {}; for (const key in p) q[/^(aria|data)-/.test(key) || !key.includes('-') ? key : key.replace(/-(\w)/g, (_, c) => c.toUpperCase())] = p[key]; p = q; }
+  if (p && typeof p.innerHTML === 'string') { const { innerHTML, ...rest } = p; p = { ...rest, dangerouslySetInnerHTML: { __html: innerHTML }, suppressContentEditableWarning: true }; }
+  return createElement(t, p, ...k.flat());
+};
+const wrap = (name, def) => {
+  const Comp = ({ children, ...props }) => {
+    const [state, setState] = useState({ ...(def.state || {}) });
+    const set = o => setState(s => ({ ...s, ...o }));
+    const slots = {}; for (const k of [...(def.slots || []), 'actions', 'footer']) if (props[k] !== undefined) slots[k] = props[k];
+    if (props.onChange === undefined && props.onValueChange) props.onChange = props.onValueChange;
+    const out = def.render({ C, h: hh, props, children: React.Children.toArray(children), slots, state, set, portal: (kids, to) => typeof document === 'undefined' ? null : createPortal(kids, (typeof to === 'string' ? document.querySelector(to) : to) || document.body) });
+    return props.size && isValidElement(out) && typeof out.type === 'string' ? cloneElement(out, { 'data-size': props.size }) : out;
+  };
+  Comp.displayName = 'Ui' + name;
+  return Comp;
+};
+for (const [name, def] of Object.entries(components)) C[name] = wrap(name, def);
+
+export const { Button: UiButton, IconButton: UiIconButton, Badge: UiBadge, Avatar: UiAvatar, Switch: UiSwitch, Checkbox: UiCheckbox, SegmentedControl: UiSegmentedControl, Tabs: UiTabs, FilterChips: UiFilterChips, TextField: UiTextField, Select: UiSelect, CodeInput: UiCodeInput, Stepper: UiStepper, Card: UiCard, Modal: UiModal, Drawer: UiDrawer, Toast: UiToast, Breadcrumbs: UiBreadcrumbs, Pagination: UiPagination, Progress: UiProgress, Ring: UiRing, KpiTile: UiKpiTile, DataTable: UiDataTable, KanbanColumn: UiKanbanColumn, KanbanCard: UiKanbanCard, Timeline: UiTimeline, TopNav: UiTopNav, SideNav: UiSideNav, AppShell: UiAppShell, PageHeader: UiPageHeader, AuthLayout: UiAuthLayout, LeadCard: UiLeadCard, HotelCard: UiHotelCard, TourCard: UiTourCard, PrayerTimes: UiPrayerTimes, RamadanTracker: UiRamadanTracker, CallRow: UiCallRow, Alert: UiAlert, Banner: UiBanner, Accordion: UiAccordion, Skeleton: UiSkeleton, Spinner: UiSpinner, Divider: UiDivider, EmptyState: UiEmptyState, ErrorPage: UiErrorPage, DataState: UiDataState, LoadingOverlay: UiLoadingOverlay, ConfirmDialog: UiConfirmDialog, Popconfirm: UiPopconfirm, Carousel: UiCarousel, Gallery: UiGallery, Code: UiCode, PricingCard: UiPricingCard, IntegrationCard: UiIntegrationCard, IncomingCall: UiIncomingCall, CallCard: UiCallCard, Dropdown: UiDropdown, Menu: UiMenu, Tooltip: UiTooltip, HoverCard: UiHoverCard, Popover: UiPopover, CopyButton: UiCopyButton, CommandBar: UiCommandBar, CommandPalette: UiCommandPalette, NotificationBell: UiNotificationBell, ToggleGroup: UiToggleGroup, Fab: UiFab, Textarea: UiTextarea, NumberInput: UiNumberInput, PasswordInput: UiPasswordInput, SearchInput: UiSearchInput, RadioGroup: UiRadioGroup, Slider: UiSlider, Rating: UiRating, ChipInput: UiChipInput, InlineEdit: UiInlineEdit, ColorPicker: UiColorPicker, FileUpload: UiFileUpload, Combobox: UiCombobox, MultiSelect: UiMultiSelect, GroupedSelect: UiGroupedSelect, PhoneInput: UiPhoneInput, Calendar: UiCalendar, DatePicker: UiDatePicker, TimePicker: UiTimePicker, FormField: UiFormField, LoginForm: UiLoginForm, StepForm: UiStepForm, Tag: UiTag, Kbd: UiKbd, StatsCard: UiStatsCard, KpiInline: UiKpiInline, MiniChart: UiMiniChart, Descriptions: UiDescriptions, LazyImage: UiLazyImage, SystemStatus: UiSystemStatus, TreeView: UiTreeView, CalendarView: UiCalendarView, SubNav: UiSubNav, ActionRail: UiActionRail, SplitLayout: UiSplitLayout, SettingsSection: UiSettingsSection, ScrollArea: UiScrollArea, DealCard: UiDealCard, PipelineBoard: UiPipelineBoard, ContactPanel: UiContactPanel, SalesFunnel: UiSalesFunnel, BookingCard: UiBookingCard, GuestCard: UiGuestCard, RoomGrid: UiRoomGrid, RoomCalendar: UiRoomCalendar, OccupancyChart: UiOccupancyChart, Chip: UiChip, IconTile: UiIconTile, StatusIcon: UiStatusIcon, UserCell: UiUserCell, StatRow: UiStatRow, CountryRow: UiCountryRow, StatLine: UiStatLine, StatStrip: UiStatStrip, VersusBar: UiVersusBar, SegBar: UiSegBar, HeroBanner: UiHeroBanner, TabTiles: UiTabTiles, PillTabs: UiPillTabs, PillSelect: UiPillSelect, ChartCard: UiChartCard, ActionCard: UiActionCard, Snackbar: UiSnackbar, TourPopover: UiTourPopover, ProfileHeader: UiProfileHeader, AuthSplit: UiAuthSplit, StatusPage: UiStatusPage, ValidatedField: UiValidatedField, Footer: UiFooter, DataGroup: UiDataGroup, OptionCard: UiOptionCard, OptionCards: UiOptionCards, RichEditor: UiRichEditor, RangeSlider: UiRangeSlider, RangeCalendar: UiRangeCalendar, StepDialog: UiStepDialog, FullscreenDialog: UiFullscreenDialog, PageDashboard: UiPageDashboard, PagePatterns: UiPagePatterns, PageCrm: UiPageCrm, PageBookings: UiPageBookings, PageCatalog: UiPageCatalog, PageDetail: UiPageDetail, PageSettings: UiPageSettings, PageUserList: UiPageUserList, PageProfile: UiPageProfile, PageForm: UiPageForm, PageOrder: UiPageOrder, PageAccount: UiPageAccount, PagePricing: UiPagePricing, PageFaq: UiPageFaq, PageAuth: UiPageAuth, PageStatus: UiPageStatus, TreeSelect: UiTreeSelect, ContextMenu: UiContextMenu, Sortable: UiSortable, Map: UiMap, ImageUpload: UiImageUpload, Screensaver: UiScreensaver, Tour: UiTour, Heading: UiHeading, Text: UiText, Box: UiBox, Center: UiCenter, HStack: UiHStack, VStack: UiVStack, Grid: UiGrid, Link: UiLink, Pressable: UiPressable, Icon: UiIcon, Portal: UiPortal, LiquidGlass: UiLiquidGlass, BottomSheet: UiBottomSheet, Actionsheet: UiActionsheet, ImageViewer: UiImageViewer, ChatAi: UiChatAi } = C;
+export { fmt, setIconBase, rules } from '../core/index.js';
+export { useUiTheme } from '../theme.js';

package/src/styles/components.css

@@ -0,0 +1,162 @@
+/* @ziyarago/ui · components. Every class is zg-*; no global resets except .zg-root */
+.zg-root{font-family:var(--zg-font);color:var(--zg-text-1);background:var(--zg-bg);-webkit-font-smoothing:antialiased}
+.zg-root *,.zg-root *::before,.zg-root *::after{box-sizing:border-box}
+.zg-glass{background:var(--zg-s1);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);box-shadow:var(--zg-rim),var(--zg-shadow-1)}
+.zg-icon:not([style*="--zg-icon"]){visibility:hidden}
+.zg-icon{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--zg-icon) center/contain no-repeat;mask:var(--zg-icon) center/contain no-repeat}
+.zg-mono{font-family:var(--zg-font-mono);font-variant-numeric:tabular-nums}
+.zg-num{font-variant-numeric:tabular-nums;font-weight:200;letter-spacing:-.035em}
+.zg-hatch{background:repeating-linear-gradient(135deg,var(--zg-s3) 0 1.5px,transparent 1.5px 6px)}
+
+/* Button */
+.zg-btn{--h:var(--zg-h-md);display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 calc(var(--h)*.45);border:0;border-radius:999px;cursor:pointer;font:600 14px var(--zg-font);white-space:nowrap;color:var(--zg-text-1);background:var(--zg-s2);box-shadow:var(--zg-rim);transition:transform .15s var(--zg-ease),background .15s,filter .15s}
+.zg-btn:hover{background:var(--zg-s3)}.zg-btn:active{transform:scale(.96)}
+.zg-btn:focus-visible,.zg-ibtn:focus-visible,.zg-input:focus-within{outline:0;box-shadow:var(--zg-rim),0 0 0 3px var(--zg-brand-soft)}
+.zg-btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
+.zg-btn--primary{background:var(--zg-brand);color:var(--zg-on-brand);box-shadow:inset 0 1px 0 oklch(1 0 0 / .3),0 8px 24px var(--zg-brand-glow)}.zg-btn--primary:hover{background:var(--zg-brand-hover)}
+.zg-btn--inverse{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}.zg-btn--inverse:hover{background:var(--zg-inv-bg);filter:brightness(1.1)}
+.zg-btn--ghost{background:transparent;box-shadow:none}.zg-btn--ghost:hover{background:var(--zg-s2)}
+.zg-btn--danger{background:color-mix(in oklch,var(--zg-red) 18%,transparent);color:var(--zg-red)}
+.zg-btn--xs{--h:var(--zg-h-xs);font-size:12px}.zg-btn--sm{--h:var(--zg-h-sm);font-size:13px}.zg-btn--lg{--h:var(--zg-h-lg);font-size:15px}.zg-btn--xl{--h:var(--zg-h-xl);font-size:16px}
+.zg-btn--block{display:flex;width:100%}
+.zg-spin{width:1em;height:1em;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:zg-spin .7s linear infinite}
+@keyframes zg-spin{to{transform:rotate(360deg)}}
+.zg-ibtn{--h:var(--zg-h-md);width:var(--h);height:var(--h);display:inline-grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:var(--zg-text-1);background:var(--zg-s2);box-shadow:var(--zg-rim);font-size:calc(var(--h)*.45)}
+.zg-ibtn:hover{background:var(--zg-s3)}.zg-ibtn:active{transform:scale(.92)}
+.zg-ibtn--sm{--h:var(--zg-h-sm)}.zg-ibtn--lg{--h:var(--zg-h-lg)}.zg-ibtn--ghost{background:transparent;box-shadow:none}
+
+/* Badge · Avatar · Switch · Checkbox */
+.zg-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font:600 12px var(--zg-font);white-space:nowrap;--c:var(--zg-text-2);color:var(--c);background:color-mix(in oklch,var(--c) 14%,transparent)}
+.zg-badge--brand{--c:var(--zg-brand-text)}.zg-badge--success{--c:var(--zg-green)}.zg-badge--warning{--c:var(--zg-amber)}.zg-badge--danger{--c:var(--zg-red)}.zg-badge--info{--c:var(--zg-sky-text)}
+.zg-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}
+.zg-avatar{--s:40px;width:var(--s);height:var(--s);flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden;font:700 calc(var(--s)*.38) var(--zg-font);background:var(--zg-brand);color:var(--zg-on-brand);box-shadow:var(--zg-rim)}
+.zg-avatar img{width:100%;height:100%;object-fit:cover}
+.zg-switch{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer;color:var(--zg-text-1);font:500 14px var(--zg-font)}
+.zg-switch__track{width:44px;height:26px;border-radius:999px;padding:3px;background:var(--zg-s3);box-shadow:var(--zg-rim);transition:background .2s}
+.zg-switch__thumb{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px oklch(0 0 0 / .3);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
+.zg-switch[aria-checked="true"] .zg-switch__track{background:var(--zg-brand)}
+.zg-switch[aria-checked="true"] .zg-switch__thumb{transform:translateX(18px)}
+[dir="rtl"] .zg-switch[aria-checked="true"] .zg-switch__thumb{transform:translateX(-18px)}
+.zg-check{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer;color:var(--zg-text-1);font:500 14px var(--zg-font)}
+.zg-check__box{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:var(--zg-on-brand);box-shadow:inset 0 0 0 1.5px var(--zg-text-3)}
+.zg-check[aria-checked="true"] .zg-check__box{background:var(--zg-brand);box-shadow:none}
+
+/* Segmented · Tabs · Chips */
+.zg-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--zg-s2);box-shadow:var(--zg-rim);max-width:100%;overflow-x:auto;scrollbar-width:none}
+.zg-seg button{height:32px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font:600 13px var(--zg-font);white-space:nowrap;background:transparent;color:var(--zg-text-2);transition:background .2s}
+.zg-seg button[aria-pressed="true"],.zg-seg button[aria-selected="true"]{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}
+.zg-seg--sm button{height:26px;padding:0 10px;font-size:12px}
+.zg-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--zg-stroke)}
+.zg-tabs button{position:relative;height:44px;padding:0 16px;border:0;background:none;cursor:pointer;font:600 14px var(--zg-font);color:var(--zg-text-3);white-space:nowrap}
+.zg-tabs button[aria-selected="true"]{color:var(--zg-text-1)}
+.zg-tabs button[aria-selected="true"]::after{content:"";position:absolute;inset-inline:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--zg-brand)}
+.zg-chips{display:flex;gap:8px;flex-wrap:wrap}
+.zg-chip{height:34px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font:600 13px var(--zg-font);background:var(--zg-s2);color:var(--zg-text-2);box-shadow:var(--zg-rim)}
+.zg-chip[aria-pressed="true"]{background:var(--zg-brand-soft);color:var(--zg-brand-text);box-shadow:inset 0 0 0 1.5px var(--zg-brand)}
+
+/* Fields */
+.zg-field{display:flex;flex-direction:column;gap:6px;min-width:0}
+.zg-label{font:600 13px var(--zg-font);color:var(--zg-text-2)}
+.zg-input{--h:var(--zg-h-lg);display:flex;align-items:center;gap:10px;height:var(--h);padding:0 6px 0 18px;border-radius:999px;background:var(--zg-s2);box-shadow:var(--zg-rim);color:var(--zg-text-3)}
+.zg-input input{flex:1;min-width:0;height:calc(var(--h) - 4px);border:0;outline:0;background:transparent;color:var(--zg-text-1);font:500 15px var(--zg-font)}
+.zg-input input::placeholder{color:var(--zg-text-3)}
+.zg-input--error{box-shadow:inset 0 0 0 1.5px var(--zg-red)}
+.zg-hint{font-size:12px;color:var(--zg-text-3)}.zg-hint--error{color:var(--zg-red)}
+.zg-select{position:relative}
+.zg-select__trigger{width:100%;justify-content:space-between;text-align:start}
+.zg-select__list{position:absolute;z-index:40;inset-inline:0;top:calc(100% + 6px);padding:6px;border-radius:20px;background:var(--zg-glass);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);box-shadow:var(--zg-rim),var(--zg-shadow-2);max-height:280px;overflow:auto}
+.zg-select__opt{display:flex;align-items:center;justify-content:space-between;width:100%;height:40px;padding:0 14px;border:0;border-radius:14px;cursor:pointer;background:none;color:var(--zg-text-1);font:500 14px var(--zg-font);text-align:start}
+.zg-select__opt:hover{background:var(--zg-s2)}.zg-select__opt[aria-selected="true"]{color:var(--zg-brand-text);font-weight:700}
+.zg-code{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;direction:ltr}
+.zg-code__cell{height:60px;border-radius:18px;display:grid;place-items:center;font:300 28px var(--zg-font);font-variant-numeric:tabular-nums;background:var(--zg-s2);box-shadow:var(--zg-rim)}
+.zg-code__cell--on{box-shadow:inset 0 0 0 2px var(--zg-brand)}
+.zg-code input{position:absolute;inset:0;width:100%;opacity:0;border:0;cursor:text}
+.zg-stepper{display:flex;align-items:center;gap:8px}
+.zg-step{display:flex;align-items:center;gap:8px;font:600 13px var(--zg-font);color:var(--zg-text-3)}
+.zg-step__n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--zg-s2);box-shadow:var(--zg-rim)}
+.zg-step--done .zg-step__n,.zg-step--cur .zg-step__n{background:var(--zg-brand);color:var(--zg-on-brand)}
+.zg-step--cur,.zg-step--done{color:var(--zg-text-1)}
+.zg-step__bar{flex:1;height:2px;min-width:16px;background:var(--zg-s3)}
+
+/* Surfaces */
+.zg-card{border-radius:var(--zg-r-card);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
+.zg-card--inverse{background:linear-gradient(150deg,oklch(0.285 0.022 239.4),oklch(0.2 0.012 240));color:oklch(0.97 0.004 70)}
+.zg-card__head{display:flex;align-items:flex-start;gap:12px}.zg-card__title{font:600 18px var(--zg-font);margin:0}.zg-card__sub{font-size:13px;color:var(--zg-text-3)}
+.zg-modal-scrim{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:oklch(0.12 0.005 40 / .5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
+.zg-modal{width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;border-radius:32px;overflow:hidden;background:var(--zg-glass);backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);box-shadow:var(--zg-rim),var(--zg-shadow-2);color:var(--zg-text-1)}
+.zg-modal__head{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;box-shadow:0 1px 0 var(--zg-stroke)}.zg-modal__head h3{flex:1;margin:0;font:600 18px var(--zg-font)}
+.zg-modal__body{padding:20px;overflow:auto;display:flex;flex-direction:column;gap:16px}
+.zg-modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px 18px;box-shadow:0 -1px 0 var(--zg-stroke)}
+.zg-drawer-scrim{align-items:stretch}.zg-drawer-scrim--end{justify-content:flex-end}.zg-drawer-scrim--start{justify-content:flex-start}
+.zg-drawer{width:min(420px,100%);max-width:none;max-height:none;border-radius:32px;margin:0}
+.zg-toast{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:22px;background:var(--zg-glass);box-shadow:var(--zg-rim),var(--zg-shadow-1);max-width:380px}
+.zg-toast__icon{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;--c:var(--zg-sky-text);color:var(--c);background:color-mix(in oklch,var(--c) 16%,transparent)}
+.zg-toast--success .zg-toast__icon{--c:var(--zg-green)}.zg-toast--danger .zg-toast__icon{--c:var(--zg-red)}.zg-toast--warning .zg-toast__icon{--c:var(--zg-amber)}
+.zg-toast b{display:block;font:600 14px var(--zg-font)}.zg-toast span{font-size:13px;color:var(--zg-text-2)}
+
+/* Data */
+.zg-kpi{border-radius:var(--zg-r-tile);padding:16px 18px;display:flex;flex-direction:column;gap:6px;background:var(--zg-s1);box-shadow:var(--zg-rim)}
+.zg-kpi--brand{background:var(--zg-brand);color:var(--zg-on-brand)}.zg-kpi--inverse{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}
+.zg-kpi__label{font-size:13px;opacity:.75}.zg-kpi__value{font-size:36px;line-height:1}.zg-kpi__sub{font-size:12px;opacity:.75}
+.zg-delta{font:700 12px var(--zg-font-mono)}.zg-delta--up{color:var(--zg-green)}.zg-delta--down{color:var(--zg-red)}
+.zg-progress{display:flex;flex-direction:column;gap:6px}.zg-progress__row{display:flex;justify-content:space-between;font-size:13px}
+.zg-progress__track{height:8px;border-radius:999px;overflow:hidden;background:repeating-linear-gradient(135deg,var(--zg-s3) 0 1.5px,transparent 1.5px 6px)}
+.zg-progress__bar{height:100%;border-radius:999px;background:var(--zg-brand);transition:width .8s var(--zg-ease)}
+.zg-progress--success .zg-progress__bar{background:var(--zg-green)}.zg-progress--warning .zg-progress__bar{background:var(--zg-amber)}.zg-progress--danger .zg-progress__bar{background:var(--zg-red)}
+.zg-ring{position:relative;display:inline-grid;place-items:center}.zg-ring svg{transform:rotate(-90deg)}.zg-ring__c{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:4px;text-align:center}.zg-ring__v{font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;color:var(--zg-text-1)}.zg-ring__l{font:500 12px/1.2 var(--zg-font);color:var(--zg-text-3)}
+.zg-table-wrap{overflow:auto;border-radius:24px}
+.zg-table{width:100%;border-collapse:collapse;font-size:14px}
+.zg-table th{position:sticky;top:0;text-align:start;padding:12px 16px;font:600 12px var(--zg-font);color:var(--zg-text-3);background:var(--zg-s2);white-space:nowrap}
+.zg-table th button{all:unset;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
+.zg-table td{padding:12px 16px;box-shadow:inset 0 1px 0 var(--zg-stroke)}
+.zg-table tr[aria-selected="true"] td{background:var(--zg-brand-soft)}.zg-table tbody tr:hover td{background:var(--zg-s1)}
+.zg-table .num{text-align:end;font-variant-numeric:tabular-nums}
+.zg-empty{padding:40px 16px;text-align:center;color:var(--zg-text-3)}
+.zg-kcol{flex:1 1 260px;min-width:260px;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:28px;background:var(--zg-s1);box-shadow:var(--zg-rim)}
+.zg-kcol__head{display:flex;align-items:center;gap:8px;padding:4px 6px;font:600 14px var(--zg-font)}
+.zg-kcard{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:20px;background:var(--zg-s2);box-shadow:var(--zg-rim);cursor:grab}
+.zg-timeline{display:flex;flex-direction:column}
+.zg-tl{display:grid;grid-template-columns:28px 1fr;gap:12px}
+.zg-tl__rail{display:flex;flex-direction:column;align-items:center}.zg-tl__dot{width:12px;height:12px;margin-top:5px;border-radius:50%;background:var(--zg-brand);box-shadow:0 0 0 4px var(--zg-brand-soft)}.zg-tl__line{flex:1;width:2px;background:var(--zg-s3)}
+.zg-tl__body{padding-bottom:18px;display:flex;flex-direction:column;gap:2px;font-size:14px}.zg-tl__time{font-size:12px;color:var(--zg-text-3)}
+
+/* Navigation */
+.zg-crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--zg-text-3)}.zg-crumbs a{color:var(--zg-text-2);text-decoration:none}.zg-crumbs a:hover{color:var(--zg-text-1)}.zg-crumbs b{color:var(--zg-text-1)}
+.zg-pager{display:inline-flex;gap:4px}.zg-pager button{min-width:36px;height:36px;border:0;border-radius:999px;cursor:pointer;font:600 13px var(--zg-font);background:transparent;color:var(--zg-text-2)}.zg-pager button[aria-current="page"]{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}
+.zg-topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:10px clamp(10px,2vw,20px);background:color-mix(in oklch,var(--zg-bg) 62%,transparent);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);box-shadow:0 1px 0 var(--zg-stroke)}
+.zg-topnav__brand{display:flex;align-items:center;gap:10px;font:700 18px var(--zg-font);flex:none}
+.zg-topnav__items{margin-inline-start:auto;display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--zg-s2);box-shadow:var(--zg-rim);overflow-x:auto;scrollbar-width:none;min-width:0}
+.zg-topnav__actions{display:flex;align-items:center;gap:8px;flex:none}
+.zg-navitem{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font:600 14px var(--zg-font);white-space:nowrap;background:transparent;color:var(--zg-text-2);transition:background .2s}
+.zg-navitem:hover{background:var(--zg-s2)}.zg-navitem[aria-current="page"]{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}
+.zg-navitem__count{height:20px;min-width:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font:700 11px var(--zg-font);background:var(--zg-brand);color:var(--zg-on-brand)}
+.zg-sidenav{--w:272px;position:sticky;top:0;height:100vh;width:var(--w);flex:none;display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent);backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);box-shadow:inset -1px 0 0 var(--zg-stroke);transition:width .3s var(--zg-ease);overflow:hidden}
+[dir="rtl"] .zg-sidenav{box-shadow:inset 1px 0 0 var(--zg-stroke)}
+.zg-sidenav--collapsed{--w:76px}
+.zg-sidenav .zg-navitem{width:100%;height:46px;border-radius:16px;justify-content:flex-start;padding:0 14px}
+.zg-sidenav--collapsed .zg-navitem{justify-content:center;padding:0}.zg-sidenav--collapsed .zg-navitem span:not(.zg-icon){display:none}
+.zg-sidenav__brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;font:700 18px var(--zg-font);white-space:nowrap}
+.zg-sidenav--collapsed .zg-sidenav__brand span{display:none}
+.zg-sidenav__sp{flex:1}.zg-sidenav__group{padding:14px 14px 4px;font:700 11px var(--zg-font);letter-spacing:.1em;text-transform:uppercase;color:var(--zg-text-3)}
+.zg-shell{min-height:100vh;display:flex}.zg-shell--top{flex-direction:column}
+.zg-shell__main{flex:1;min-width:0;max-width:1440px;width:100%;margin:0 auto;padding:clamp(16px,2.4vw,32px);display:flex;flex-direction:column;gap:20px}
+.zg-shell__bar{display:none;position:sticky;top:0;z-index:50;align-items:center;gap:12px;padding:10px 16px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
+@media(max-width:820px){.zg-shell:not(.zg-shell--top){flex-direction:column}.zg-shell:not(.zg-shell--top) .zg-sidenav{display:none}.zg-shell__bar{display:flex}}
+.zg-page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}.zg-page-head h1{margin:0;font:300 clamp(28px,3vw,40px) var(--zg-font);letter-spacing:-.03em}.zg-page-head p{margin:4px 0 0;color:var(--zg-text-3);font-size:15px}
+.zg-auth{min-height:100vh;display:grid;place-items:center;padding:24px}.zg-auth__card{width:100%;max-width:440px;padding:clamp(24px,3vw,36px);border-radius:36px;display:flex;flex-direction:column;gap:22px;background:color-mix(in oklch,var(--zg-bg) 55%,transparent);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);box-shadow:var(--zg-rim),var(--zg-shadow-1)}
+
+.zg-shell--frame{min-height:0;height:100%;overflow:auto}.zg-shell--frame .zg-sidenav{height:100%;position:relative}.zg-shell--frame .zg-topnav{position:sticky}
+
+/* Domain */
+.zg-lead{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:20px;background:var(--zg-s2);box-shadow:var(--zg-rim)}.zg-lead__row{display:flex;align-items:center;gap:10px}
+.zg-hotel{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:var(--zg-s1);box-shadow:var(--zg-rim),var(--zg-shadow-1)}
+.zg-hotel__img{position:relative;aspect-ratio:16/10;background:var(--zg-s3) center/cover}.zg-hotel__tags{position:absolute;top:10px;inset-inline-start:10px;display:flex;gap:6px}
+.zg-hotel__body{padding:16px;display:flex;flex-direction:column;gap:10px}.zg-hotel__row{display:flex;align-items:flex-start;gap:12px}.zg-hotel__price{margin-inline-start:auto;text-align:end;line-height:1.15}
+.zg-pt{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.zg-pt__i{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:18px;background:var(--zg-s2);font-size:12px;color:var(--zg-text-3)}
+.zg-pt__i b{font:600 16px var(--zg-font-mono);color:var(--zg-text-1)}.zg-pt__i[aria-current="true"]{background:var(--zg-sky);color:oklch(0.22 0.03 230)}.zg-pt__i[aria-current="true"] b{color:inherit}
+.zg-rt{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;direction:ltr}.zg-rt i{height:36px;border-radius:7px;background:var(--zg-s2);position:relative}.zg-rt i[data-s="past"]{background:var(--zg-brand-soft)}.zg-rt i[data-s="cur"]{background:var(--zg-brand)}.zg-rt i[data-s="last"]{background:color-mix(in oklch,var(--zg-sky) 16%,transparent)}
+.zg-rt i[data-odd]::after{content:"";position:absolute;top:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--zg-sky)}
+.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}

package/src/styles/components2.css

@@ -0,0 +1,68 @@
+/* ── part 2 ── */
+.zg-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:22px;--c:var(--zg-sky-text);background:color-mix(in oklch,var(--c) 12%,var(--zg-s2));box-shadow:var(--zg-rim)}
+.zg-alert--success{--c:var(--zg-green)}.zg-alert--warning{--c:var(--zg-amber)}.zg-alert--danger{--c:var(--zg-red)}
+.zg-alert__i{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--c);background:color-mix(in oklch,var(--c) 18%,transparent)}
+.zg-alert__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.5}.zg-alert__b b{font-size:15px}.zg-alert__b span{color:var(--zg-text-2)}
+.zg-banner{border-radius:0;box-shadow:inset 0 -1px 0 var(--zg-stroke)}
+.zg-acc{display:flex;flex-direction:column;border-radius:24px;background:var(--zg-s1);box-shadow:var(--zg-rim);padding:6px}
+.zg-acc__i+.zg-acc__i{box-shadow:inset 0 1px 0 var(--zg-stroke)}
+.zg-acc__h{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 16px;cursor:pointer;font:600 15px var(--zg-font);color:var(--zg-text-1)}
+.zg-acc__i[data-open="true"] .zg-acc__h .zg-icon{transform:rotate(180deg)}.zg-acc__b{padding:0 16px 16px;color:var(--zg-text-2);line-height:1.6;font-size:14px}
+.zg-skelw{display:flex;flex-direction:column;gap:8px}.zg-skel{display:block;height:14px;border-radius:999px;background:linear-gradient(90deg,var(--zg-s2),var(--zg-s3),var(--zg-s2));background-size:200% 100%;animation:zg-sh 1.4s linear infinite}
+.zg-skel--rect{height:96px;border-radius:20px}.zg-skel--circle{border-radius:50%}@keyframes zg-sh{to{background-position:-200% 0}}
+.zg-div{display:flex;align-items:center;gap:12px;color:var(--zg-text-3);font-size:12px}.zg-div::before,.zg-div::after{content:"";flex:1;height:1px;background:var(--zg-stroke)}.zg-div:not(:has(span))::after{display:none}
+.zg-es{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 16px;text-align:center;color:var(--zg-text-2)}.zg-es b{color:var(--zg-text-1);font-size:17px}
+.zg-es__ico{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:var(--zg-brand-soft);color:var(--zg-brand-text);box-shadow:var(--zg-rim)}.zg-es__img{width:112px;height:112px;background:center/contain no-repeat}
+.zg-es__a{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}.zg-es--page{min-height:60vh;justify-content:center}
+.zg-lo{position:relative}.zg-lo__o{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:inherit;background:color-mix(in oklch,var(--zg-bg) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
+.zg-car{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--zg-rim),var(--zg-shadow-1)}.zg-car__s{aspect-ratio:16/8;background:var(--zg-s3) center/cover;display:flex;align-items:flex-end}
+.zg-car__c{width:100%;padding:44px 20px 18px;color:#fff;display:flex;flex-direction:column;gap:2px;background:linear-gradient(transparent,oklch(0.1 0 0 / .7))}
+.zg-car__p,.zg-car__n{position:absolute;top:50%;margin-top:-16px}.zg-car__p{inset-inline-start:12px}.zg-car__n{inset-inline-end:12px}
+[dir="rtl"] .zg-car__p .zg-icon,[dir="rtl"] .zg-car__n .zg-icon{transform:scaleX(-1)}
+.zg-car__d{position:absolute;bottom:10px;inset-inline:0;display:flex;gap:6px;justify-content:center}.zg-car__d button{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;background:oklch(1 0 0 / .45)}.zg-car__d button[aria-current="true"]{width:22px;border-radius:999px;background:#fff}
+.zg-gal{display:flex;flex-direction:column;gap:10px}.zg-gal__m{position:relative;aspect-ratio:16/10;border-radius:28px;background:var(--zg-s3) center/cover;box-shadow:var(--zg-rim)}.zg-gal__n{position:absolute;top:12px;inset-inline-end:12px;background:oklch(0.15 0 0 / .6);color:#fff}
+.zg-gal__t{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.zg-gal__t button{flex:none;width:84px;aspect-ratio:4/3;border:0;border-radius:16px;cursor:pointer;background:var(--zg-s3) center/cover;opacity:.6}.zg-gal__t button[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px var(--zg-brand)}
+.zg-code-b{border-radius:22px;overflow:hidden;background:oklch(0.17 0.006 240);color:oklch(0.9 0.01 240);box-shadow:var(--zg-rim)}.zg-code-b__h{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 16px;font-size:12px;color:oklch(0.7 0.01 240);box-shadow:inset 0 -1px 0 oklch(1 0 0 / .08)}
+.zg-code-b pre{margin:0;padding:16px;overflow:auto;font-size:13px;line-height:1.6;direction:ltr;text-align:left}
+.zg-price--on{box-shadow:var(--zg-rim),0 0 0 2px var(--zg-brand),var(--zg-shadow-1)}.zg-feat{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}.zg-feat li{display:flex;gap:10px;align-items:center;color:var(--zg-text-2)}.zg-feat .zg-icon{color:var(--zg-green)}
+.zg-inc{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:28px;max-width:440px}.zg-inc__ok{background:var(--zg-green);color:#fff;box-shadow:0 8px 24px color-mix(in oklch,var(--zg-green) 45%,transparent)}
+.zg-dd{position:relative;display:inline-block}.zg-menu{position:absolute;z-index:40;inset-inline-start:0;top:calc(100% + 6px);min-width:220px;padding:6px;border-radius:20px;background:var(--zg-glass);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);box-shadow:var(--zg-rim),var(--zg-shadow-2);display:flex;flex-direction:column}
+.zg-menu--static{position:static;display:inline-flex}.zg-menu__i{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:14px;cursor:pointer;font:500 14px var(--zg-font);color:var(--zg-text-1)}
+.zg-menu__i:hover{background:var(--zg-s2)}.zg-menu__i--danger{color:var(--zg-red)}.zg-menu__i .zg-kbd{margin-inline-start:auto}.zg-menu__sep{height:1px;margin:4px 8px;background:var(--zg-stroke)}
+.zg-kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;font:600 11px var(--zg-font-mono);color:var(--zg-text-2);background:var(--zg-s2);box-shadow:var(--zg-rim),0 1px 0 var(--zg-stroke)}
+.zg-pop{position:absolute;z-index:40;inset-inline-start:0;top:calc(100% + 6px);min-width:240px;padding:14px;border-radius:20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--zg-rim),var(--zg-shadow-2);background:var(--zg-glass)}
+.zg-tip{position:relative;display:inline-flex}.zg-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);inset-inline-start:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;padding:6px 10px;border-radius:10px;font:600 12px var(--zg-font);background:var(--zg-inv-bg);color:var(--zg-inv-fg);opacity:0;pointer-events:none;transition:.15s}
+.zg-tip:hover::after,.zg-tip:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
+.zg-hc{position:relative;display:inline-block;border-bottom:1.5px dotted var(--zg-text-3);cursor:help}.zg-hc__c{position:absolute;z-index:40;top:calc(100% + 8px);inset-inline-start:0;width:280px;padding:14px;border-radius:20px;opacity:0;visibility:hidden;transition:.15s;font-size:14px;line-height:1.5;background:var(--zg-glass)}.zg-hc:hover .zg-hc__c,.zg-hc:focus-within .zg-hc__c{opacity:1;visibility:visible}
+.zg-cb{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px}.zg-cb__s{width:1px;height:20px;margin:0 4px;background:var(--zg-stroke)}
+.zg-bell__n{position:absolute;top:-2px;inset-inline-end:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;font:700 10px var(--zg-font);background:var(--zg-red);color:#fff}.zg-ibtn{position:relative}
+.zg-fab{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;font:600 15px var(--zg-font);background:var(--zg-brand);color:var(--zg-on-brand);box-shadow:inset 0 1px 0 oklch(1 0 0 / .3),0 12px 32px var(--zg-brand-glow)}
+.zg-ta{width:100%;padding:14px 18px;border:0;outline:0;resize:vertical;border-radius:24px;background:var(--zg-s2);box-shadow:var(--zg-rim);color:var(--zg-text-1);font:500 15px/1.5 var(--zg-font)}.zg-ta:focus{box-shadow:var(--zg-rim),0 0 0 3px var(--zg-brand-soft)}
+.zg-num-in{padding:0 6px}.zg-num-in input{text-align:center}
+.zg-radio{border-radius:50%!important}.zg-radio i{width:10px;height:10px;border-radius:50%;background:var(--zg-on-brand)}.zg-check[aria-checked="true"] .zg-radio{background:var(--zg-brand)}
+.zg-range{-webkit-appearance:none;appearance:none;flex:1;height:8px;border-radius:999px;outline:0;background:linear-gradient(90deg,var(--zg-brand) var(--p),var(--zg-s3) var(--p))}
+.zg-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 8px oklch(0 0 0 / .35);cursor:grab}.zg-range::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px oklch(0 0 0 / .35)}
+.zg-rate{display:inline-flex;gap:2px}.zg-rate button{all:unset;cursor:pointer;color:var(--zg-s3);display:grid;place-items:center;padding:2px}.zg-rate button[data-on="true"]{color:var(--zg-brand)}.zg-rate button[data-on="true"] .zg-icon{filter:drop-shadow(0 0 6px var(--zg-brand-glow))}
+.zg-tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 12px;border-radius:999px;font:600 13px var(--zg-font);background:var(--zg-s2);color:var(--zg-text-1);box-shadow:var(--zg-rim)}.zg-tag:not(:has(button)){padding-inline-end:12px}
+.zg-tag button{all:unset;cursor:pointer;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--zg-text-3)}.zg-tag button:hover{background:var(--zg-s3)}
+.zg-chipin{height:auto;min-height:var(--zg-h-lg);flex-wrap:wrap;padding:6px 12px;border-radius:24px;gap:6px}.zg-chipin input{min-width:100px}
+.zg-inline{all:unset;display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:6px 12px;border-radius:14px;font:500 15px var(--zg-font);color:var(--zg-text-1)}.zg-inline:hover{background:var(--zg-s2)}.zg-inline .zg-icon{opacity:.5}
+.zg-swatch{width:32px;height:32px;padding:0;border:0;border-radius:50%;cursor:pointer;box-shadow:var(--zg-rim)}.zg-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--zg-bg),0 0 0 4px var(--zg-text-1)}
+.zg-fdrop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 16px;border-radius:24px;cursor:pointer;text-align:center;color:var(--zg-text-2);background:var(--zg-s1);box-shadow:inset 0 0 0 1.5px var(--zg-stroke)}.zg-fdrop:hover,.zg-fdrop[data-drag]{box-shadow:inset 0 0 0 1.5px var(--zg-brand);background:var(--zg-brand-soft)}.zg-fdrop[data-drag]{box-shadow:inset 0 0 0 2px var(--zg-brand)}.zg-fdrop:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px}.zg-fdrop b{color:var(--zg-text-1)}
+.zg-cal{display:flex;flex-direction:column;gap:8px;min-width:280px}.zg-cal__h{display:flex;align-items:center;justify-content:space-between}.zg-cal__g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
+.zg-cal__w{text-align:center;font:600 11px var(--zg-font);color:var(--zg-text-3);padding:4px 0}.zg-cal__d{all:unset;box-sizing:border-box;position:relative;height:36px;border-radius:999px;display:grid;place-items:center;cursor:pointer;font:500 14px var(--zg-font);font-variant-numeric:tabular-nums;color:var(--zg-text-1)}
+.zg-cal__d:hover{background:var(--zg-s2)}.zg-cal__d[data-today="true"]{box-shadow:inset 0 0 0 1.5px var(--zg-sky)}.zg-cal__d[aria-pressed="true"]{background:var(--zg-brand);color:var(--zg-on-brand);font-weight:700}
+.zg-cal__d[data-ev]::after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--zg-sky)}
+.zg-kpii{display:inline-flex;flex-direction:column;gap:2px}.zg-mini{display:flex;align-items:flex-end;gap:3px;width:100%}.zg-mini i{flex:1;border-radius:4px 4px 2px 2px}
+.zg-desc{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0;font-size:14px}.zg-desc dt{color:var(--zg-text-3)}.zg-desc dd{margin:0;font-weight:500}
+.zg-lazy{display:block;width:100%;background:var(--zg-s3) center/cover;box-shadow:var(--zg-rim)}.zg-sys{display:flex;flex-direction:column}.zg-sys__r{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14px;box-shadow:inset 0 1px 0 var(--zg-stroke)}.zg-sys__r:first-child{box-shadow:none}
+.zg-tree{display:flex;flex-direction:column;gap:2px}.zg-tree__n{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;min-height:36px;padding-inline-end:12px;border-radius:12px;cursor:pointer;font:500 14px var(--zg-font);color:var(--zg-text-1)}.zg-tree__n:hover{background:var(--zg-s2)}.zg-tree__n--on{background:var(--zg-brand-soft);color:var(--zg-brand-text)}
+.zg-subnav{display:flex;flex-direction:column;gap:2px;min-width:220px}.zg-subnav .zg-navitem{height:42px;border-radius:14px}.zg-rail{display:inline-flex;flex-direction:column;gap:4px;padding:6px;border-radius:999px}
+.zg-split{display:grid;gap:20px;align-items:start}.zg-setsec{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px;padding:20px 0;box-shadow:inset 0 -1px 0 var(--zg-stroke)}@media(max-width:700px){.zg-setsec{grid-template-columns:1fr}}
+.zg-scroll{overflow:auto;scrollbar-width:thin}
+.zg-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;width:100%}.zg-room{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:18px;cursor:pointer;font-size:12px;color:var(--zg-text-2);background:var(--zg-s2);box-shadow:var(--zg-rim)}.zg-room b{font-size:16px;color:var(--zg-text-1)}
+.zg-room[data-tone]{background:color-mix(in oklab,var(--c) 16%,var(--zg-s2))}.zg-room[data-tone="brand"]{background:var(--zg-brand-soft)}
+.zg-rc{display:grid;grid-template-columns:56px repeat(var(--d),minmax(0,1fr));gap:2px;align-items:center;direction:ltr;font-size:12px}.zg-rc__h{text-align:center;color:var(--zg-text-3)}.zg-rc__c{height:28px;border-radius:6px;background:var(--zg-s2)}.zg-rc__c[data-b]{background:var(--zg-brand-soft);border-radius:0}.zg-rc__c[data-b="start"]{background:var(--zg-brand);border-radius:999px 0 0 999px}
+.zg-occ{display:flex;align-items:flex-end;gap:8px;height:160px}.zg-occ__c{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}.zg-occ__c i{width:100%;border-radius:10px 10px 4px 4px}
+
+.zg-kpi--brand .zg-delta{color:inherit;opacity:.85}.zg-kpi--brand .zg-delta::before{opacity:.9}

package/src/styles/components3.css

@@ -0,0 +1,29 @@
+/* ── part 3 ── */
+.zg-t-brand{--c:var(--zg-brand);--ct:var(--zg-brand-text)}.zg-t-sky{--c:var(--zg-sky);--ct:var(--zg-sky-text)}.zg-t-success{--c:var(--zg-green);--ct:var(--zg-green)}.zg-t-warning{--c:var(--zg-amber);--ct:var(--zg-amber)}.zg-t-danger{--c:var(--zg-red);--ct:var(--zg-red)}.zg-t-neutral{--c:var(--zg-text-3);--ct:var(--zg-text-2)}
+.zg-btn--tonal{background:color-mix(in oklch,var(--c,var(--zg-brand)) 16%,transparent);color:var(--ct,var(--zg-brand-text));box-shadow:none}.zg-btn--tonal:hover{background:color-mix(in oklch,var(--c,var(--zg-brand)) 26%,transparent)}
+.zg-btn--outlined{background:transparent;color:var(--ct,var(--zg-brand-text));box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--c,var(--zg-brand)) 55%,transparent)}.zg-btn--outlined:hover{background:color-mix(in oklch,var(--c,var(--zg-brand)) 10%,transparent)}
+.zg-btn--text{background:transparent;color:var(--ct,var(--zg-brand-text));box-shadow:none}.zg-btn--text:hover{background:color-mix(in oklch,var(--c,var(--zg-brand)) 10%,transparent)}
+.zg-btn--elevated{background:var(--c,var(--zg-brand));color:var(--zg-on-brand);box-shadow:0 4px 12px color-mix(in oklch,var(--c,var(--zg-brand)) 40%,transparent)}
+.zg-chip2{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;font:500 13px var(--zg-font);white-space:nowrap}.zg-chip2--pill{border-radius:999px}.zg-chip2--sm{height:24px;padding:0 8px;font-size:12px}.zg-chip2--lg{height:38px;padding:0 16px;font-size:14px}
+.zg-chip2--tonal{background:color-mix(in oklch,var(--c) 16%,transparent);color:var(--ct)}.zg-chip2--outlined{box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--c) 55%,transparent);color:var(--ct)}.zg-chip2--solid{background:var(--c);color:var(--zg-on-brand)}
+.zg-chip2 button{all:unset;cursor:pointer;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklch,currentColor 18%,transparent)}
+.zg-tile{width:var(--s);height:var(--s);flex:none;border-radius:8px;display:grid;place-items:center;background:color-mix(in oklch,var(--c) 16%,transparent);color:var(--ct)}.zg-tile--circle{border-radius:50%}
+.zg-usercell{display:inline-flex;align-items:center;gap:10px}.zg-usercell>span{display:flex;flex-direction:column;line-height:1.3}.zg-usercell b{font-size:14px}
+.zg-srow{display:flex;align-items:center;gap:12px;min-height:56px}
+.zg-statline{position:relative;overflow:hidden;gap:6px}.zg-statline__bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--c);opacity:.9}
+.zg-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));padding:8px}.zg-strip__i{display:flex;align-items:center;gap:14px;padding:14px 20px}.zg-strip__i+.zg-strip__i{box-shadow:inset 1px 0 0 var(--zg-stroke)}
+.zg-vs{display:flex;flex-direction:column;gap:12px}.zg-vs__r{display:flex;align-items:center;justify-content:space-between;gap:12px}.zg-vs__bar{display:flex;height:8px;border-radius:999px;overflow:hidden;gap:3px}.zg-vs__bar i{border-radius:999px}
+.zg-segbar{display:flex;height:36px;border-radius:12px;overflow:hidden;gap:3px}.zg-segbar i{display:block;height:100%;border-radius:6px}
+.zg-hero{display:flex;align-items:center;gap:20px;padding:24px;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,color-mix(in oklch,var(--zg-brand) 34%,var(--zg-s2)),var(--zg-s1));box-shadow:var(--zg-rim),var(--zg-shadow-1)}.zg-hero__t{flex:1;display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0}.zg-hero__img{width:112px;height:112px;flex:none;background:center/contain no-repeat;filter:drop-shadow(0 10px 18px oklch(0 0 0 / .35))}
+.zg-tt{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}.zg-tt__i{all:unset;box-sizing:border-box;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:92px;height:82px;border-radius:16px;cursor:pointer;font:500 13px var(--zg-font);color:var(--zg-text-2);background:var(--zg-s1);box-shadow:inset 0 0 0 1px var(--zg-stroke)}
+.zg-tt__i[aria-pressed="true"]{color:var(--zg-brand-text);background:var(--zg-brand-soft);box-shadow:inset 0 0 0 1.5px var(--zg-brand)}.zg-tt__add{box-shadow:inset 0 0 0 1.5px var(--zg-stroke);background:transparent;border:0;outline:1.5px dashed var(--zg-stroke);outline-offset:-1.5px}
+.zg-pt{display:flex;gap:6px;flex-wrap:wrap}.zg-pt--v{flex-direction:column;flex-wrap:nowrap}.zg-pt button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:8px;cursor:pointer;font:500 15px var(--zg-font);color:var(--zg-text-2);white-space:nowrap}.zg-pt button:hover{background:var(--zg-s2)}
+.zg-pt button[aria-selected="true"]{background:var(--zg-brand);color:var(--zg-on-brand);box-shadow:0 4px 14px var(--zg-brand-glow)}
+.zg-btn--tonal.zg-btn--sm{padding-inline:12px}
+.zg-snack{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:0 16px;border-radius:8px;font:500 14px var(--zg-font);background:var(--zg-inv-bg);color:var(--zg-inv-fg);box-shadow:var(--zg-shadow-2)}.zg-snack button{all:unset;cursor:pointer;font-weight:700;font-size:13px;display:grid;place-items:center}
+.zg-snack--tonal{background:color-mix(in oklch,var(--c) 18%,var(--zg-bg));color:var(--ct)}
+.zg-tour{width:min(380px,100%);display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:12px;background:var(--zg-inv-bg);color:var(--zg-inv-fg);box-shadow:var(--zg-shadow-2)}.zg-tour .zg-ibtn{color:inherit}.zg-tour .zg-btn:not(.zg-btn--primary){background:oklch(0 0 0 / .08);color:inherit}
+.zg-prof{padding:0;overflow:hidden}.zg-prof__cover{height:220px;background:linear-gradient(135deg,color-mix(in oklch,var(--zg-brand) 40%,var(--zg-s3)),color-mix(in oklch,var(--zg-sky) 30%,var(--zg-s2))) center/cover}
+.zg-prof__row{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;padding:0 24px 22px;margin-top:-44px}.zg-prof__av{border-radius:50%;box-shadow:0 0 0 5px var(--zg-bg);display:inline-flex}
+.zg-split2{min-height:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.zg-split2__a{display:grid;place-items:center;padding:32px;background:linear-gradient(160deg,color-mix(in oklch,var(--zg-brand) 22%,var(--zg-s2)),var(--zg-s1));min-height:420px}.zg-split2__m{display:grid;place-items:center;padding:32px}
+@media(max-width:820px){.zg-split2{grid-template-columns:1fr}.zg-split2__a{display:none}}

package/src/styles/components4.css

@@ -0,0 +1,18 @@
+/* ── part 4 ── */
+.zg-input--filled{border-radius:8px 8px 0 0;background:var(--zg-s3);box-shadow:inset 0 -2px 0 var(--zg-stroke)}.zg-input--underlined{border-radius:0;background:transparent;padding-inline-start:2px;box-shadow:inset 0 -1.5px 0 var(--zg-stroke)}.zg-input--solo{background:var(--zg-bg);box-shadow:var(--zg-shadow-1)}
+.zg-input--filled:focus-within,.zg-input--underlined:focus-within{box-shadow:inset 0 -2px 0 var(--zg-brand)}
+.zg-input--compact{--h:var(--zg-h-sm)}.zg-input:hover:not(:focus-within):not(.zg-input--error){background:var(--zg-s3)}.zg-input--disabled{opacity:.5;pointer-events:none}
+.zg-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 4px;box-shadow:inset 0 1px 0 var(--zg-stroke)}
+.zg-opt{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;cursor:pointer;background:var(--zg-s1);box-shadow:inset 0 0 0 1px var(--zg-stroke);color:var(--zg-text-1)}.zg-opt:hover{background:var(--zg-s2)}
+.zg-opt[aria-checked="true"]{background:var(--zg-brand-soft);box-shadow:inset 0 0 0 1.5px var(--zg-brand)}.zg-opt:focus-visible{outline:3px solid var(--zg-brand-soft)}.zg-opt__img{width:48px;height:48px;border-radius:12px;background:var(--zg-s3) center/cover}
+.zg-opt .zg-check__box{flex:none}
+.zg-rte{border-radius:20px;overflow:hidden;background:var(--zg-s2);box-shadow:var(--zg-rim)}.zg-rte__t{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:6px 8px;box-shadow:inset 0 -1px 0 var(--zg-stroke)}
+.zg-rte__c{min-height:140px;padding:14px 18px;outline:0;font:400 15px/1.6 var(--zg-font);color:var(--zg-text-1)}.zg-rte__c:empty::before{content:attr(data-ph);color:var(--zg-text-3)}.zg-rte__c:focus{box-shadow:inset 0 0 0 2px var(--zg-brand-soft)}
+.zg-range2w{position:relative;height:28px}.zg-range2w>i{position:absolute;inset-inline:0;top:10px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--zg-s3) var(--a),var(--zg-brand) var(--a),var(--zg-brand) var(--b),var(--zg-s3) var(--b))}
+.zg-range2{position:absolute;inset:0;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
+.zg-range2::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 8px oklch(0 0 0 / .35);cursor:grab}.zg-range2::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px oklch(0 0 0 / .35)}
+.zg-cal__d[data-mid]{background:var(--zg-brand-soft);border-radius:0}
+.zg-stepdlg{max-width:860px;flex-direction:row;min-height:420px}.zg-stepdlg__s{width:240px;flex:none;display:flex;flex-direction:column;gap:18px;padding:24px 20px;background:var(--zg-s1);box-shadow:inset -1px 0 0 var(--zg-stroke)}
+.zg-stepdlg__i{display:flex;gap:12px;align-items:center;color:var(--zg-text-3)}.zg-stepdlg__i.is-cur{color:var(--zg-text-1)}.zg-stepdlg__i.is-cur .zg-step__n{background:var(--zg-brand);color:var(--zg-on-brand)}.zg-stepdlg__i.is-done .zg-step__n{background:var(--zg-brand-soft);color:var(--zg-brand-text)}
+@media(max-width:700px){.zg-stepdlg{flex-direction:column}.zg-stepdlg__s{width:auto;flex-direction:row;overflow-x:auto}}
+.zg-fsd{position:fixed;inset:0;z-index:210;display:flex;flex-direction:column;background:var(--zg-bg)}.zg-fsd__h{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--zg-brand);color:var(--zg-on-brand)}.zg-fsd__h .zg-ibtn{color:inherit}.zg-fsd__b{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:16px}

package/src/styles/components5.css

@@ -0,0 +1,5 @@
+/* ── page templates ── */
+.zg-pgroot{display:block;min-width:0;width:100%}.zg-pg{display:flex;flex-direction:column;gap:16px;min-width:0}.zg-pg__r{min-width:0}
+.zg-pg__auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,340px)),1fr));gap:16px;align-items:start;min-width:0}
+.zg-pg__two{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;min-width:0}.zg-pg__main{flex:999 1 460px;min-width:0;display:flex;flex-direction:column;gap:16px}.zg-pg__side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px}.zg-pg__aside{flex:1 1 260px;min-width:0;max-width:100%;display:flex;flex-direction:column;gap:16px}
+.zg-pgauth{position:relative;min-height:100%;display:grid;place-items:center;padding:24px}.zg-pgauth__bg{position:absolute;inset:0;overflow:hidden}.zg-pgauth__c{position:relative;width:100%;max-width:440px}

package/src/styles/components6.css

@@ -0,0 +1,19 @@
+/* ── part 6 ── */
+.zg-ctx{display:contents}.zg-ctx__scrim{position:fixed;inset:0;z-index:220}
+.zg-sort{display:flex;flex-direction:column;gap:6px}.zg-sort__i{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:16px;background:var(--zg-s1);box-shadow:var(--zg-rim);cursor:grab}.zg-sort__i:hover{background:var(--zg-s2)}
+.zg-sort__i.is-over{box-shadow:inset 0 2px 0 var(--zg-brand),var(--zg-rim)}.zg-sort__i.is-drag{opacity:.4}.zg-sort__h{color:var(--zg-text-3);display:flex}
+.zg-map{position:relative;overflow:hidden;border-radius:28px;background:var(--zg-s2);box-shadow:var(--zg-rim);touch-action:none;cursor:grab;user-select:none}.zg-map:active{cursor:grabbing}
+.zg-pin{position:absolute;transform:translate(-50%,-100%);width:34px;height:34px;border:0;border-radius:50% 50% 50% 4px;rotate:-45deg;display:grid;place-items:center;cursor:pointer;background:var(--c,var(--zg-brand));color:var(--zg-on-brand);box-shadow:0 6px 16px oklch(0 0 0 / .4)}.zg-pin>*{rotate:45deg}
+.zg-map__z{position:absolute;inset-inline-end:12px;top:12px;display:flex;flex-direction:column;gap:6px}.zg-map__c{position:absolute;inset-inline-start:10px;bottom:6px;font:500 10px var(--zg-font);color:var(--zg-text-3);background:color-mix(in oklch,var(--zg-bg) 70%,transparent);padding:2px 8px;border-radius:999px}
+.zg-imgup{position:relative;display:grid;place-items:center;width:100%;cursor:pointer;overflow:hidden;background:var(--zg-s2) center/cover;box-shadow:inset 0 0 0 1.5px var(--zg-stroke)}.zg-imgup:hover{box-shadow:inset 0 0 0 1.5px var(--zg-brand)}
+.zg-imgup__e{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--zg-text-3)}.zg-imgup__o{position:absolute;inset-inline-end:8px;bottom:8px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--zg-brand);color:var(--zg-on-brand);box-shadow:0 4px 12px var(--zg-brand-glow)}
+.zg-saver{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--zg-bg);outline:0;cursor:pointer;overflow:hidden}.zg-saver__g{position:absolute;width:60vmin;height:60vmin;border-radius:50%;background:color-mix(in oklch,var(--zg-brand) 28%,transparent);filter:blur(110px);transition:left 1s linear,top 1s linear}
+.zg-saver__c{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.zg-saver__m{width:72px;height:72px;background:center/contain no-repeat;opacity:.9}
+.zg-tourov{position:fixed;inset:0;z-index:250}.zg-tourov__full{position:absolute;inset:0;background:oklch(0.1 0 0 / .7)}.zg-tourov__cut{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px oklch(0.1 0 0 / .7),0 0 0 2px var(--zg-brand);pointer-events:none}
+.zg-rte__c blockquote{margin:8px 0;padding:4px 14px;border-inline-start:3px solid var(--zg-brand);color:var(--zg-text-2)}.zg-rte__c pre{margin:8px 0;padding:12px 14px;border-radius:12px;background:oklch(0.17 0.006 240);color:oklch(0.9 0.01 240);font:500 13px var(--zg-font-mono);overflow:auto;direction:ltr;text-align:left}
+/* focus + disabled audit */
+.zg-btn:focus-visible,.zg-ibtn:focus-visible,.zg-chip:focus-visible,.zg-chip2 button:focus-visible,.zg-tt__i:focus-visible,.zg-pt button:focus-visible,.zg-navitem:focus-visible,.zg-menu__i:focus-visible,.zg-check:focus-visible,.zg-switch:focus-visible,.zg-cal__d:focus-visible,.zg-acc__h:focus-visible,.zg-tree__n:focus-visible,.zg-room:focus-visible,.zg-pin:focus-visible,.zg-sort__i:focus-visible,.zg-inline:focus-visible{outline:3px solid var(--zg-brand-soft);outline-offset:2px}
+.zg-btn:disabled,.zg-ibtn:disabled,.zg-chip:disabled,[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}.zg-tt__i:hover,.zg-chip:hover:not([aria-pressed="true"]){background:var(--zg-s2)}.zg-room:hover,.zg-hotel:hover,.zg-lead:hover{box-shadow:var(--zg-rim),var(--zg-shadow-1)}.zg-table tbody tr:hover{background:var(--zg-s1)}
+/* mobile */
+@media(max-width:720px){.zg-shell__main{padding:14px;gap:14px}.zg-page-head h1{font-size:28px}.zg-hero{flex-direction:column;align-items:flex-start}.zg-hero__img{align-self:flex-end}.zg-strip__i+.zg-strip__i{box-shadow:inset 0 1px 0 var(--zg-stroke)}
+  .zg-modal-scrim{align-items:flex-end;padding:0}.zg-modal{max-width:100%;max-height:90vh;border-radius:28px 28px 0 0}.zg-prof__cover{height:150px}.zg-prof__av .zg-avatar{--s:84px!important}.zg-prof__row{margin-top:-34px;padding:0 16px 18px}.zg-map{border-radius:20px}.zg-opt{padding:12px}.zg-fsd__b{padding:16px}.zg-pt{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.zg-es--page{min-height:50vh}}

package/src/styles/components7.css

@@ -0,0 +1,44 @@
+/* components, part 7 — gluestack parity */
+.zg-heading{margin:0;font-family:var(--zg-font);font-weight:300;letter-spacing:-.03em;line-height:1.1;color:var(--zg-text-1)}
+.zg-heading--xs{font-size:16px}.zg-heading--sm{font-size:20px}.zg-heading--md{font-size:24px}.zg-heading--lg{font-size:clamp(26px,3vw,32px)}.zg-heading--xl{font-size:clamp(30px,4vw,44px)}.zg-heading--2xl{font-size:clamp(36px,6vw,64px)}
+.zg-heading--brand{color:var(--zg-brand-text)}
+.zg-text{margin:0;font-family:var(--zg-font);color:var(--zg-text-1);line-height:1.5}
+.zg-text--xs{font-size:12px}.zg-text--sm{font-size:14px}.zg-text--md{font-size:16px}.zg-text--lg{font-size:18px}
+.zg-text--muted{color:var(--zg-text-2)}.zg-text--subtle{color:var(--zg-text-3)}.zg-text--brand{color:var(--zg-brand-text)}.zg-text--bold{font-weight:600}
+.zg-text--truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.zg-box{box-sizing:border-box}
+.zg-center{display:flex;align-items:center;justify-content:center}
+.zg-stack{display:flex}
+.zg-grid{display:grid}
+.zg-link{color:var(--zg-brand-text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,var(--zg-brand-text) 40%,transparent);display:inline-flex;align-items:center;gap:4px;border-radius:4px}
+.zg-link:hover{text-decoration-color:currentColor}.zg-link:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px}.zg-link--plain{text-decoration:none}
+.zg-press{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border-radius:12px;-webkit-tap-highlight-color:transparent}
+.zg-press:active{opacity:.7}.zg-press:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px}.zg-press[disabled]{opacity:.45;cursor:not-allowed}
+.zg-liquid{position:relative;border-radius:var(--zg-liquid-r,24px);padding:20px;background:linear-gradient(135deg,color-mix(in oklch,var(--zg-text-1) 14%,transparent),color-mix(in oklch,var(--zg-text-1) 4%,transparent));backdrop-filter:blur(var(--zg-liquid-b,18px)) saturate(1.8);-webkit-backdrop-filter:blur(var(--zg-liquid-b,18px)) saturate(1.8);box-shadow:inset 0 1px 0 color-mix(in oklch,var(--zg-text-1) 30%,transparent),inset 0 -1px 0 color-mix(in oklch,var(--zg-text-1) 8%,transparent),0 12px 32px oklch(0 0 0/.25);border:1px solid var(--zg-stroke);overflow:hidden}
+.zg-sheet-scrim{align-items:flex-end;justify-content:center;padding:0}
+.zg-sheet{width:min(560px,100%);display:flex;flex-direction:column;gap:12px;padding:10px 20px 20px;border-radius:28px 28px 0 0;background:var(--zg-s1);box-shadow:var(--zg-rim),var(--zg-shadow-1);overflow:auto;animation:zg-sheet-in .22s ease-out}
+.zg-sheet__grab{align-self:center;width:40px;height:4px;border-radius:2px;background:var(--zg-stroke);flex:none;margin-block:2px 4px}
+.zg-sheet__t{margin:0;font:500 18px var(--zg-font)}.zg-sheet__b{display:flex;flex-direction:column;gap:12px}.zg-sheet__f{display:flex;gap:8px;justify-content:flex-end}
+@keyframes zg-sheet-in{from{transform:translateY(24px);opacity:0}}
+@media (prefers-reduced-motion:reduce){.zg-sheet{animation:none}}
+.zg-as{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--zg-s2)}
+.zg-as__i{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:14px 16px;font:400 16px var(--zg-font);color:var(--zg-text-1);cursor:pointer}
+.zg-as__i+.zg-as__i{box-shadow:inset 0 1px 0 var(--zg-stroke)}.zg-as__i:hover{background:color-mix(in oklch,var(--zg-text-1) 6%,transparent)}.zg-as__i:focus-visible{outline:2px solid var(--zg-brand);outline-offset:-2px}
+.zg-as__i--danger{color:var(--zg-red)}.zg-as__i[disabled]{opacity:.45;cursor:not-allowed}
+.zg-as__i--cancel{justify-content:center;font-weight:600;border-radius:16px;background:var(--zg-s2);margin-top:4px}
+.zg-iv{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:oklch(0 0 0/.88);padding:56px 16px}
+.zg-iv__img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px}
+.zg-iv__x{position:absolute;top:12px;inset-inline-end:12px}.zg-iv__p{position:absolute;inset-inline-start:12px;top:50%}.zg-iv__n{position:absolute;inset-inline-end:12px;top:50%}
+.zg-iv__c{position:absolute;bottom:16px;left:50%;transform:translateX(-50%)}
+.zg-chat{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;min-height:320px;max-height:560px}
+.zg-chat__h{display:flex;flex-direction:column;gap:2px;padding:16px 20px;box-shadow:inset 0 -1px 0 var(--zg-stroke)}
+.zg-chat__m{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:16px 20px}
+.zg-chat__b{max-width:82%;padding:10px 14px;border-radius:18px;line-height:1.45;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
+.zg-chat__b--ai{align-self:flex-start;background:var(--zg-s2);border-end-start-radius:6px}
+.zg-chat__b--user{align-self:flex-end;background:var(--zg-brand);color:var(--zg-on-brand,#000);border-end-end-radius:6px}
+.zg-chat__dots{display:flex;gap:4px}.zg-chat__dots i{width:6px;height:6px;border-radius:50%;background:var(--zg-text-3);animation:zg-dot 1s infinite ease-in-out}.zg-chat__dots i:nth-child(2){animation-delay:.15s}.zg-chat__dots i:nth-child(3){animation-delay:.3s}
+@keyframes zg-dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
+@media (prefers-reduced-motion:reduce){.zg-chat__dots i{animation:none}}
+.zg-chat__f{display:flex;gap:8px;padding:12px 16px;box-shadow:inset 0 1px 0 var(--zg-stroke)}
+.zg-chat__in{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--zg-stroke);background:var(--zg-s2);color:var(--zg-text-1);font:400 15px var(--zg-font)}
+.zg-chat__in:focus-visible{outline:2px solid var(--zg-brand);outline-offset:1px}

package/src/styles/components8.css

@@ -0,0 +1,47 @@
+/* components, part 8 — surfaces, stacking and motion for popups, bars and dialogs */
+.zg-select__list,.zg-menu,.zg-pop,.zg-hc__c{background:var(--zg-pop);-webkit-backdrop-filter:none;backdrop-filter:none;z-index:var(--zg-z-pop)}
+.zg-select__list,.zg-menu,.zg-pop{transform-origin:top;animation:zg-pop-in .16s var(--zg-ease) both}
+.zg-hc__c{transform-origin:top;transform:translateY(-4px) scale(.98);transition:opacity .16s var(--zg-ease),transform .16s var(--zg-ease),visibility .16s}
+.zg-hc:hover .zg-hc__c,.zg-hc:focus-within .zg-hc__c{transform:none}
+.zg-tip::after{z-index:var(--zg-z-pop)}
+.zg-cal{background:transparent}
+.zg-select__list .zg-cal,.zg-pop .zg-cal{padding:6px}
+@keyframes zg-pop-in{from{opacity:0;transform:translateY(-6px) scale(.97)}}
+
+.zg-card:has(.zg-select__list),.zg-card:has(.zg-menu),.zg-card:has(.zg-pop),.zg-card:has(.zg-hc:hover),.zg-card:has(.zg-tip:hover),
+.zg-glass:has(.zg-select__list),.zg-glass:has(.zg-menu),.zg-glass:has(.zg-pop),.zg-glass:has(.zg-hc:hover),.zg-glass:has(.zg-tip:hover){position:relative;z-index:var(--zg-z-pop)}
+
+.zg-topnav,.zg-shell__bar{z-index:var(--zg-z-bar);background:color-mix(in oklch,var(--zg-bg) 94%,transparent)}
+.zg-sidenav{background:color-mix(in oklch,var(--zg-bg) 94%,transparent)}
+
+.zg-modal-scrim{z-index:var(--zg-z-modal);animation:zg-fade-in .18s var(--zg-ease) both}
+.zg-modal{background:var(--zg-pop);-webkit-backdrop-filter:none;backdrop-filter:none;animation:zg-modal-in .22s var(--zg-ease) both}
+.zg-drawer-scrim--end .zg-drawer{animation-name:zg-drawer-in-end}
+.zg-drawer-scrim--start .zg-drawer{animation-name:zg-drawer-in-start}
+.zg-sheet{background:var(--zg-pop)}
+@keyframes zg-fade-in{from{opacity:0}}
+@keyframes zg-modal-in{from{opacity:0;transform:translateY(12px) scale(.97)}}
+@keyframes zg-drawer-in-end{from{transform:translateX(32px);opacity:0}}
+@keyframes zg-drawer-in-start{from{transform:translateX(-32px);opacity:0}}
+@media (prefers-reduced-motion:reduce){.zg-select__list,.zg-menu,.zg-pop,.zg-modal-scrim,.zg-modal,.zg-drawer{animation:none}.zg-hc__c{transition:none}}
+
+.zg-bell__n{color:oklch(0.16 0.03 25)}
+[data-theme="light"] .zg-bell__n{color:#fff}
+.zg-inc__ok{color:oklch(0.16 0.03 150)}
+[data-theme="light"] .zg-inc__ok{color:#fff}
+
+/* disabled states: switch, checkbox/radio, options, menu items */
+.zg-switch:disabled,.zg-check:disabled,.zg-switch[aria-disabled="true"],.zg-check[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:auto}
+.zg-select__opt:disabled,.zg-menu__i:disabled,.zg-tree__n:disabled{opacity:.45;cursor:not-allowed;pointer-events:auto;background:none}
+.zg-select__opt:disabled:hover,.zg-menu__i:disabled:hover,.zg-tree__n:disabled:hover{background:none}
+[role="radiogroup"][aria-disabled="true"]{opacity:1;pointer-events:auto;cursor:not-allowed}
+.zg-drop{display:contents}.zg-drop>.zg-kcol{transition:box-shadow .15s,background .15s}.zg-drop[data-over="true"]>.zg-kcol{background:var(--zg-brand-soft);box-shadow:inset 0 0 0 2px var(--zg-brand)}.zg-drag{cursor:grab}.zg-drag:active{cursor:grabbing}
+/* default Button variant is intentional: matches the base .zg-btn look */
+.zg-btn--secondary{background:var(--zg-s2);color:var(--zg-text-1);box-shadow:var(--zg-rim)}.zg-btn--secondary:hover{background:var(--zg-s3)}
+/* Pagination: ellipsis + prev/next */
+.zg-pager{align-items:center}.zg-pager__gap{min-width:24px;text-align:center;color:var(--zg-text-3);font:600 13px var(--zg-font);user-select:none}
+.zg-pager button:disabled{opacity:.4;cursor:not-allowed}.zg-pager__nav{display:inline-flex;align-items:center;justify-content:center;padding:0}
+[dir="rtl"] .zg-pager__nav .zg-icon{transform:scaleX(-1)}
+/* CommandPalette active row, dialog focus */
+.zg-menu__i.is-active,.zg-menu__i[aria-selected="true"]{background:var(--zg-s2)}
+.zg-modal:focus,.zg-sheet:focus,.zg-fsd:focus,.zg-saver:focus{outline:0}