@ziyarago/ui 0.0.0-stage → 0.1.0

package/src/styles/effects.css

@@ -0,0 +1,43 @@
+/* motion, effects, page backgrounds and gradient cards */
+
+/* ── motion off: no animations or transitions ── */
+[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
+
+/* ── effects lite: flat surfaces for weak browsers and devices ── */
+[data-fx="lite"] *,[data-fx="lite"] *::before,[data-fx="lite"] *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
+[data-fx="lite"]{--zg-shadow-1:0 2px 8px oklch(0 0 0 / .18);--zg-shadow-2:0 6px 20px oklch(0 0 0 / .28);--zg-brand-glow:transparent}
+[data-fx="lite"][data-theme="light"]{--zg-shadow-1:0 2px 8px oklch(0.4 0.03 60 / .12);--zg-shadow-2:0 6px 20px oklch(0.4 0.03 60 / .18)}
+[data-fx="lite"] .zg-glass{background:var(--zg-pop)}
+
+/* ── page backgrounds ── set data-bg on <html> (useUiTheme().setBackground) or on any element with class zg-bg ── */
+:root{--zg-bgL:.62;--zg-bgC:.16;--zg-bgA:26%}
+[data-theme="light"]{--zg-bgL:.8;--zg-bgC:.11;--zg-bgA:34%}
+[data-bg="aurora"]{--zg-bg-image:radial-gradient(60% 50% at 12% 8%,color-mix(in oklch,var(--zg-brand) var(--zg-bgA),transparent),transparent 70%),radial-gradient(50% 45% at 88% 18%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 250) var(--zg-bgA),transparent),transparent 70%),radial-gradient(65% 55% at 50% 105%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 320) var(--zg-bgA),transparent),transparent 70%)}
+[data-bg="sunset"]{--zg-bg-image:radial-gradient(70% 55% at 10% 0%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 55) var(--zg-bgA),transparent),transparent 70%),radial-gradient(60% 50% at 95% 25%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 15) var(--zg-bgA),transparent),transparent 70%),radial-gradient(70% 60% at 40% 110%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 340) var(--zg-bgA),transparent),transparent 70%)}
+[data-bg="ocean"]{--zg-bg-image:radial-gradient(70% 55% at 85% 0%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 230) var(--zg-bgA),transparent),transparent 70%),radial-gradient(60% 55% at 5% 40%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 200) var(--zg-bgA),transparent),transparent 70%),radial-gradient(70% 55% at 60% 110%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 265) var(--zg-bgA),transparent),transparent 70%)}
+[data-bg="emerald"]{--zg-bg-image:radial-gradient(65% 55% at 8% 5%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 155) var(--zg-bgA),transparent),transparent 70%),radial-gradient(55% 50% at 92% 30%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 190) var(--zg-bgA),transparent),transparent 70%),radial-gradient(70% 55% at 45% 110%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 120) var(--zg-bgA),transparent),transparent 70%)}
+[data-bg="rose"]{--zg-bg-image:radial-gradient(65% 55% at 90% 0%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 355) var(--zg-bgA),transparent),transparent 70%),radial-gradient(55% 50% at 5% 35%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 20) var(--zg-bgA),transparent),transparent 70%),radial-gradient(70% 55% at 50% 110%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 310) var(--zg-bgA),transparent),transparent 70%)}
+[data-bg="mesh"]{--zg-bg-image:radial-gradient(40% 35% at 15% 15%,color-mix(in oklch,var(--zg-brand) var(--zg-bgA),transparent),transparent 70%),radial-gradient(35% 35% at 80% 10%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 250) var(--zg-bgA),transparent),transparent 70%),radial-gradient(40% 40% at 90% 70%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 155) var(--zg-bgA),transparent),transparent 70%),radial-gradient(40% 40% at 20% 85%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 330) var(--zg-bgA),transparent),transparent 70%)}
+html[data-bg]:not([data-bg="none"]),.zg-bg:not([data-bg="none"]){background-color:var(--zg-bg);background-image:var(--zg-bg-image);background-attachment:fixed}
+.zg-bg:not([data-bg="none"]){background-attachment:scroll}
+html[data-bg]:not([data-bg="none"]) .zg-root{background:transparent}
+html[data-fx="full"][data-motion="on"][data-bg]:not([data-bg="none"]){background-size:140% 140%;animation:zg-bg-drift 48s ease-in-out infinite alternate}
+@keyframes zg-bg-drift{from{background-position:0% 0%}to{background-position:100% 100%}}
+
+/* ── gradient cards ── <UiCard variant="gradient" tone="sky" intensity="soft|vivid"> ── */
+.zg-card--grad{--t:var(--zg-brand);--tv:var(--zg-brand);--on:var(--zg-on-brand)}
+.zg-card--t-brand{--t:var(--zg-brand);--tv:var(--zg-brand);--tv2:color-mix(in oklch,var(--zg-brand) 62%,oklch(0.88 0.07 85));--on:var(--zg-on-brand)}
+.zg-card--t-sky{--t:var(--zg-sky);--tv:oklch(0.6 0.14 235);--on:#fff}
+.zg-card--t-success{--t:var(--zg-green);--tv:oklch(0.56 0.15 150);--on:#fff}
+.zg-card--t-warning{--t:var(--zg-amber);--tv:oklch(0.8 0.15 85);--tv2:oklch(0.76 0.15 55);--on:oklch(0.2 0.04 80)}
+.zg-card--t-danger{--t:var(--zg-red);--tv:oklch(0.56 0.2 25);--on:#fff}
+.zg-card--t-violet{--t:oklch(0.64 0.2 295);--tv:oklch(0.5 0.22 295);--on:#fff}
+.zg-card--t-rose{--t:oklch(0.68 0.2 5);--tv:oklch(0.58 0.21 5);--on:#fff}
+.zg-card--t-neutral{--t:oklch(0.62 0.01 60);--tv:oklch(0.32 0.01 60);--on:#fff}
+.zg-card.zg-card--grad{background:linear-gradient(140deg,color-mix(in oklch,var(--t) var(--zg-g1,36%),var(--zg-gbase,var(--zg-s1))),color-mix(in oklch,var(--t) var(--zg-g2,9%),var(--zg-gbase,var(--zg-s1))) 70%);box-shadow:var(--zg-rim),inset 0 0 0 1px color-mix(in oklch,var(--t) 32%,transparent),var(--zg-shadow-1)}
+.zg-card.zg-card--grad.zg-card--vivid{background:linear-gradient(140deg,var(--tv),var(--tv2,color-mix(in oklch,var(--tv) 62%,oklch(0.25 0.1 280))));color:var(--on);box-shadow:inset 0 1px 0 oklch(1 0 0 / .28),var(--zg-shadow-1)}
+[data-theme="dark"]{--zg-gbase:var(--zg-s1);--zg-g1:36%;--zg-g2:9%}
+[data-theme="light"]{--zg-gbase:white;--zg-g1:30%;--zg-g2:8%}
+[data-fx="full"][data-motion="on"] .zg-card.zg-card--grad{transition:transform .25s var(--zg-ease),box-shadow .25s var(--zg-ease)}
+[data-fx="full"][data-motion="on"] .zg-card.zg-card--grad:hover{transform:translateY(-2px)}
+html[data-bg]:not([data-bg="none"]) body{background:transparent}

package/src/styles/fonts.css

@@ -0,0 +1,17 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+/* Thmanyah — free incl. commercial, https://font.thmanyah.com. Files in assets/fonts/thmanyah. Adjust URLs to your bundler.
+   Thmanyah is visually heavier than Manrope at the same weight and has no 600 face. Weight ranges map the UI weights (300-900) so Arabic does not look bold:
+   200-300 Light, 400-600 Regular, 700 Medium, 800 Bold, 900 Black. */
+@font-face{font-family:'Thmanyah Sans';font-weight:200 300;src:url('../../assets/fonts/thmanyah/thmanyahsans-Light.otf') format('opentype');font-display:swap}
+@font-face{font-family:'Thmanyah Sans';font-weight:400 600;src:url('../../assets/fonts/thmanyah/thmanyahsans-Regular.otf') format('opentype');font-display:swap}
+@font-face{font-family:'Thmanyah Sans';font-weight:700;src:url('../../assets/fonts/thmanyah/thmanyahsans-Medium.otf') format('opentype');font-display:swap}
+@font-face{font-family:'Thmanyah Sans';font-weight:800;src:url('../../assets/fonts/thmanyah/thmanyahsans-Bold.otf') format('opentype');font-display:swap}
+@font-face{font-family:'Thmanyah Sans';font-weight:900;src:url('../../assets/fonts/thmanyah/thmanyahsans-Black.otf') format('opentype');font-display:swap}
+@font-face{font-family:'Thmanyah Serif Display';font-weight:200 300;src:url('../../assets/fonts/thmanyah/thmanyahserifdisplay-Light.otf') format('opentype');font-display:swap}
+@font-face{font-family:'Thmanyah Serif Display';font-weight:400 600;src:url('../../assets/fonts/thmanyah/thmanyahserifdisplay-Regular.otf') format('opentype');font-display:swap}
+@font-face{font-family:'Thmanyah Serif Display';font-weight:700;src:url('../../assets/fonts/thmanyah/thmanyahserifdisplay-Medium.otf') format('opentype');font-display:swap}
+@font-face{font-family:'Thmanyah Serif Display';font-weight:800;src:url('../../assets/fonts/thmanyah/thmanyahserifdisplay-Bold.otf') format('opentype');font-display:swap}
+@font-face{font-family:'Thmanyah Serif Text';font-weight:200 300;src:url('../../assets/fonts/thmanyah/thmanyahseriftext-Light.otf') format('opentype');font-display:swap}
+@font-face{font-family:'Thmanyah Serif Text';font-weight:400 600;src:url('../../assets/fonts/thmanyah/thmanyahseriftext-Regular.otf') format('opentype');font-display:swap}
+@font-face{font-family:'Thmanyah Serif Text';font-weight:700;src:url('../../assets/fonts/thmanyah/thmanyahseriftext-Medium.otf') format('opentype');font-display:swap}
+@font-face{font-family:'Thmanyah Serif Text';font-weight:800;src:url('../../assets/fonts/thmanyah/thmanyahseriftext-Bold.otf') format('opentype');font-display:swap}

package/src/styles/index.css

@@ -0,0 +1,21 @@
+@import './fonts.css';
+@import './tokens.css';
+@import './components.css';
+@import './components2.css';
+@import './components3.css';
+@import './components4.css';
+@import './components5.css';
+@import './components6.css';
+@import './components7.css';
+@import './components8.css';
+@import './sizes/typography.css';
+@import './sizes/layout.css';
+@import './sizes/actions.css';
+@import './sizes/forms.css';
+@import './sizes/data.css';
+@import './sizes/feedback.css';
+@import './sizes/overlay.css';
+@import './sizes/navigation.css';
+@import './sizes/media.css';
+@import './sizes/domain.css';
+@import './effects.css';

package/src/styles/sizes/actions.css

@@ -0,0 +1,126 @@
+/* size overrides for the actions group. Only [data-size] selectors, see the size scale at the end of tokens.css */
+.zg-btn[data-size="xs"]{--h:28px;font-size:12px;gap:6px}
+.zg-btn[data-size="sm"]{--h:32px;font-size:13px;gap:8px}
+.zg-btn[data-size="md"]{--h:40px;font-size:14px;gap:8px}
+.zg-btn[data-size="lg"]{--h:48px;font-size:15px;gap:10px}
+.zg-btn[data-size="xl"]{--h:56px;font-size:16px;gap:12px}
+.zg-btn[data-size="xs"] .zg-icon{width:14px!important;height:14px!important}
+.zg-btn[data-size="sm"] .zg-icon{width:16px!important;height:16px!important}
+.zg-btn[data-size="md"] .zg-icon{width:18px!important;height:18px!important}
+.zg-btn[data-size="lg"] .zg-icon{width:20px!important;height:20px!important}
+.zg-btn[data-size="xl"] .zg-icon{width:22px!important;height:22px!important}
+.zg-ibtn[data-size="xs"]{--h:28px}
+.zg-ibtn[data-size="sm"]{--h:32px}
+.zg-ibtn[data-size="md"]{--h:40px}
+.zg-ibtn[data-size="lg"]{--h:48px}
+.zg-ibtn[data-size="xl"]{--h:56px}
+.zg-chip2[data-size="xs"]{height:22px;font-size:11px;padding:0 8px;gap:4px}
+.zg-chip2[data-size="sm"]{height:26px;font-size:12px;padding:0 10px;gap:5px}
+.zg-chip2[data-size="md"]{height:32px;font-size:13px;padding:0 12px;gap:6px}
+.zg-chip2[data-size="lg"]{height:38px;font-size:14px;padding:0 16px;gap:8px}
+.zg-chip2[data-size="xl"]{height:46px;font-size:15px;padding:0 20px;gap:10px}
+.zg-chip2[data-size="xs"] .zg-icon{width:12px!important;height:12px!important}
+.zg-chip2[data-size="sm"] .zg-icon{width:13px!important;height:13px!important}
+.zg-chip2[data-size="md"] .zg-icon{width:14px!important;height:14px!important}
+.zg-chip2[data-size="lg"] .zg-icon{width:16px!important;height:16px!important}
+.zg-chip2[data-size="xl"] .zg-icon{width:18px!important;height:18px!important}
+.zg-chip2[data-size="xs"] button{width:14px;height:14px}
+.zg-chip2[data-size="sm"] button{width:16px;height:16px}
+.zg-chip2[data-size="md"] button{width:18px;height:18px}
+.zg-chip2[data-size="lg"] button{width:20px;height:20px}
+.zg-chip2[data-size="xl"] button{width:24px;height:24px}
+.zg-badge[data-size="xs"]{height:18px;font-size:10px;padding:0 7px;gap:4px}
+.zg-badge[data-size="sm"]{height:20px;font-size:11px;padding:0 8px;gap:5px}
+.zg-badge[data-size="md"]{height:24px;font-size:12px;padding:0 10px;gap:6px}
+.zg-badge[data-size="lg"]{height:28px;font-size:13px;padding:0 12px;gap:7px}
+.zg-badge[data-size="xl"]{height:32px;font-size:14px;padding:0 14px;gap:8px}
+.zg-badge[data-size="xs"] .zg-badge__dot{width:4px;height:4px}
+.zg-badge[data-size="sm"] .zg-badge__dot{width:5px;height:5px}
+.zg-badge[data-size="md"] .zg-badge__dot{width:6px;height:6px}
+.zg-badge[data-size="lg"] .zg-badge__dot{width:7px;height:7px}
+.zg-badge[data-size="xl"] .zg-badge__dot{width:8px;height:8px}
+.zg-tag[data-size="xs"]{height:22px;font-size:11px;padding:0 5px 0 10px;gap:5px}
+.zg-tag[data-size="sm"]{height:24px;font-size:12px;padding:0 5px 0 10px;gap:5px}
+.zg-tag[data-size="md"]{height:28px;font-size:13px;padding:0 6px 0 12px;gap:6px}
+.zg-tag[data-size="lg"]{height:34px;font-size:14px;padding:0 7px 0 14px;gap:8px}
+.zg-tag[data-size="xl"]{height:40px;font-size:15px;padding:0 8px 0 16px;gap:10px}
+.zg-tag[data-size="xs"]:not(:has(button)){padding-inline-end:10px}
+.zg-tag[data-size="sm"]:not(:has(button)){padding-inline-end:10px}
+.zg-tag[data-size="md"]:not(:has(button)){padding-inline-end:12px}
+.zg-tag[data-size="lg"]:not(:has(button)){padding-inline-end:14px}
+.zg-tag[data-size="xl"]:not(:has(button)){padding-inline-end:16px}
+.zg-tag[data-size="xs"] button{width:16px;height:16px}
+.zg-tag[data-size="sm"] button{width:18px;height:18px}
+.zg-tag[data-size="md"] button{width:20px;height:20px}
+.zg-tag[data-size="lg"] button{width:24px;height:24px}
+.zg-tag[data-size="xl"] button{width:28px;height:28px}
+.zg-fab[data-size="xs"]{height:36px;font-size:12px;padding:0 12px;gap:6px}
+.zg-fab[data-size="sm"]{height:44px;font-size:13px;padding:0 16px;gap:8px}
+.zg-fab[data-size="md"]{height:56px;font-size:15px;padding:0 20px;gap:10px}
+.zg-fab[data-size="lg"]{height:64px;font-size:16px;padding:0 24px;gap:12px}
+.zg-fab[data-size="xl"]{height:72px;font-size:18px;padding:0 28px;gap:14px}
+.zg-fab[data-size="xs"] .zg-icon{width:16px!important;height:16px!important}
+.zg-fab[data-size="sm"] .zg-icon{width:18px!important;height:18px!important}
+.zg-fab[data-size="md"] .zg-icon{width:20px!important;height:20px!important}
+.zg-fab[data-size="lg"] .zg-icon{width:22px!important;height:22px!important}
+.zg-fab[data-size="xl"] .zg-icon{width:26px!important;height:26px!important}
+.zg-seg[data-size="xs"] button{height:22px;font-size:11px;padding:0 8px}
+.zg-seg[data-size="sm"] button{height:26px;font-size:12px;padding:0 10px}
+.zg-seg[data-size="md"] button{height:32px;font-size:13px;padding:0 14px}
+.zg-seg[data-size="lg"] button{height:40px;font-size:14px;padding:0 18px}
+.zg-seg[data-size="xl"] button{height:48px;font-size:15px;padding:0 22px}
+.zg-seg[data-size="xs"] button{gap:4px;display:inline-flex;align-items:center;justify-content:center}
+.zg-seg[data-size="sm"] button{gap:4px;display:inline-flex;align-items:center;justify-content:center}
+.zg-seg[data-size="md"] button{gap:4px;display:inline-flex;align-items:center;justify-content:center}
+.zg-seg[data-size="lg"] button{gap:5px;display:inline-flex;align-items:center;justify-content:center}
+.zg-seg[data-size="xl"] button{gap:5px;display:inline-flex;align-items:center;justify-content:center}
+.zg-seg[data-size="xs"] .zg-icon{width:12px!important;height:12px!important}
+.zg-seg[data-size="sm"] .zg-icon{width:14px!important;height:14px!important}
+.zg-seg[data-size="md"] .zg-icon{width:16px!important;height:16px!important}
+.zg-seg[data-size="lg"] .zg-icon{width:18px!important;height:18px!important}
+.zg-seg[data-size="xl"] .zg-icon{width:20px!important;height:20px!important}
+.zg-chips[data-size="xs"]{gap:6px}
+.zg-chips[data-size="sm"]{gap:6px}
+.zg-chips[data-size="md"]{gap:8px}
+.zg-chips[data-size="lg"]{gap:10px}
+.zg-chips[data-size="xl"]{gap:12px}
+.zg-chips[data-size="xs"] .zg-chip{height:26px;font-size:11px;padding:0 10px}
+.zg-chips[data-size="sm"] .zg-chip{height:30px;font-size:12px;padding:0 12px}
+.zg-chips[data-size="md"] .zg-chip{height:34px;font-size:13px;padding:0 14px}
+.zg-chips[data-size="lg"] .zg-chip{height:42px;font-size:14px;padding:0 18px}
+.zg-chips[data-size="xl"] .zg-chip{height:50px;font-size:15px;padding:0 22px}
+.zg-rail[data-size="xs"]{gap:2px;padding:4px}
+.zg-rail[data-size="sm"]{gap:3px;padding:5px}
+.zg-rail[data-size="md"]{gap:4px;padding:6px}
+.zg-rail[data-size="lg"]{gap:6px;padding:8px}
+.zg-rail[data-size="xl"]{gap:8px;padding:10px}
+.zg-rail[data-size="xs"] .zg-ibtn{--h:28px}
+.zg-rail[data-size="sm"] .zg-ibtn{--h:32px}
+.zg-rail[data-size="md"] .zg-ibtn{--h:40px}
+.zg-rail[data-size="lg"] .zg-ibtn{--h:48px}
+.zg-rail[data-size="xl"] .zg-ibtn{--h:56px}
+.zg-card[data-size="xs"]{padding:10px;gap:8px}
+.zg-card[data-size="sm"]{padding:14px;gap:10px}
+.zg-card[data-size="md"]{padding:20px;gap:14px}
+.zg-card[data-size="lg"]{padding:26px;gap:18px}
+.zg-card[data-size="xl"]{padding:32px;gap:22px}
+.zg-card[data-size="xs"] .zg-card__title{font-size:13px}
+.zg-card[data-size="sm"] .zg-card__title{font-size:15px}
+.zg-card[data-size="md"] .zg-card__title{font-size:18px}
+.zg-card[data-size="lg"] .zg-card__title{font-size:20px}
+.zg-card[data-size="xl"] .zg-card__title{font-size:21px}
+.zg-card[data-size="xs"] .zg-card__sub{font-size:11px}
+.zg-card[data-size="sm"] .zg-card__sub{font-size:12px}
+.zg-card[data-size="md"] .zg-card__sub{font-size:13px}
+.zg-card[data-size="lg"] .zg-card__sub{font-size:14px}
+.zg-card[data-size="xl"] .zg-card__sub{font-size:15px}
+.zg-card[data-size="xs"] .zg-card__head .zg-ibtn{--h:24px}
+.zg-card[data-size="sm"] .zg-card__head .zg-ibtn{--h:28px}
+.zg-card[data-size="md"] .zg-card__head .zg-ibtn{--h:32px}
+.zg-card[data-size="lg"] .zg-card__head .zg-ibtn{--h:36px}
+.zg-card[data-size="xl"] .zg-card__head .zg-ibtn{--h:40px}
+.zg-dd[data-size="xs"]>.zg-ibtn{--h:28px}
+.zg-dd[data-size="sm"]>.zg-ibtn{--h:32px}
+.zg-dd[data-size="md"]>.zg-ibtn{--h:40px}
+.zg-dd[data-size="lg"]>.zg-ibtn{--h:48px}
+.zg-dd[data-size="xl"]>.zg-ibtn{--h:56px}

package/src/styles/sizes/data.css

@@ -0,0 +1,161 @@
+/* size overrides for the data group. Only [data-size] selectors, see the size scale at the end of tokens.css */
+/* Card (also PricingCard, IntegrationCard, ChartCard, StatLine): padding, gap, title */
+.zg-card[data-size="xs"]{padding:12px;gap:8px}
+.zg-card[data-size="sm"]{padding:16px;gap:10px}
+.zg-card[data-size="md"]{padding:20px;gap:14px}
+.zg-card[data-size="lg"]{padding:28px;gap:18px}
+.zg-card[data-size="xl"]{padding:36px;gap:22px}
+.zg-card[data-size="xs"] .zg-card__title{font-size:14px}
+.zg-card[data-size="sm"] .zg-card__title{font-size:16px}
+.zg-card[data-size="md"] .zg-card__title{font-size:18px}
+.zg-card[data-size="lg"] .zg-card__title{font-size:21px}
+.zg-card[data-size="xl"] .zg-card__title{font-size:24px}
+.zg-card[data-size="xs"] .zg-card__sub{font-size:11px}
+.zg-card[data-size="sm"] .zg-card__sub{font-size:12px}
+.zg-card[data-size="md"] .zg-card__sub{font-size:13px}
+.zg-card[data-size="lg"] .zg-card__sub{font-size:14px}
+.zg-card[data-size="xl"] .zg-card__sub{font-size:15px}
+/* DataTable, DataGroup: row density */
+.zg-table-wrap[data-size="xs"] .zg-table{font-size:12px}
+.zg-table-wrap[data-size="sm"] .zg-table{font-size:13px}
+.zg-table-wrap[data-size="md"] .zg-table{font-size:14px}
+.zg-table-wrap[data-size="lg"] .zg-table{font-size:15px}
+.zg-table-wrap[data-size="xl"] .zg-table{font-size:16px}
+.zg-table-wrap[data-size="xs"] .zg-table th{padding:6px 10px;font-size:10px}
+.zg-table-wrap[data-size="sm"] .zg-table th{padding:8px 12px;font-size:11px}
+.zg-table-wrap[data-size="md"] .zg-table th{padding:12px 16px;font-size:12px}
+.zg-table-wrap[data-size="lg"] .zg-table th{padding:16px 20px;font-size:13px}
+.zg-table-wrap[data-size="xl"] .zg-table th{padding:20px 24px;font-size:14px}
+.zg-table-wrap[data-size="xs"] .zg-table td{padding:6px 10px}
+.zg-table-wrap[data-size="sm"] .zg-table td{padding:8px 12px}
+.zg-table-wrap[data-size="md"] .zg-table td{padding:12px 16px}
+.zg-table-wrap[data-size="lg"] .zg-table td{padding:16px 20px}
+.zg-table-wrap[data-size="xl"] .zg-table td{padding:20px 24px}
+.zg-table-wrap[data-size="xs"] .zg-dg__g{padding:6px 10px!important;font-size:11px!important}
+.zg-table-wrap[data-size="sm"] .zg-dg__g{padding:8px 12px!important;font-size:12px!important}
+.zg-table-wrap[data-size="md"] .zg-dg__g{padding:10px 16px!important;font-size:13px!important}
+.zg-table-wrap[data-size="lg"] .zg-dg__g{padding:12px 20px!important;font-size:14px!important}
+.zg-table-wrap[data-size="xl"] .zg-dg__g{padding:14px 24px!important;font-size:15px!important}
+/* Descriptions */
+.zg-desc[data-size="xs"]{font-size:12px;gap:6px 12px}
+.zg-desc[data-size="sm"]{font-size:13px;gap:8px 16px}
+.zg-desc[data-size="md"]{font-size:14px;gap:10px 20px}
+.zg-desc[data-size="lg"]{font-size:15px;gap:12px 24px}
+.zg-desc[data-size="xl"]{font-size:16px;gap:14px 28px}
+/* Timeline */
+.zg-timeline[data-size="xs"] .zg-tl{grid-template-columns:18px 1fr;gap:8px}
+.zg-timeline[data-size="sm"] .zg-tl{grid-template-columns:22px 1fr;gap:10px}
+.zg-timeline[data-size="md"] .zg-tl{grid-template-columns:28px 1fr;gap:12px}
+.zg-timeline[data-size="lg"] .zg-tl{grid-template-columns:34px 1fr;gap:14px}
+.zg-timeline[data-size="xl"] .zg-tl{grid-template-columns:40px 1fr;gap:16px}
+.zg-timeline[data-size="xs"] .zg-tl__dot{width:8px;height:8px;margin-top:3px;box-shadow:0 0 0 3px var(--zg-brand-soft)}
+.zg-timeline[data-size="sm"] .zg-tl__dot{width:10px;height:10px;margin-top:4px;box-shadow:0 0 0 3px var(--zg-brand-soft)}
+.zg-timeline[data-size="md"] .zg-tl__dot{width:12px;height:12px;margin-top:5px;box-shadow:0 0 0 4px var(--zg-brand-soft)}
+.zg-timeline[data-size="lg"] .zg-tl__dot{width:14px;height:14px;margin-top:6px;box-shadow:0 0 0 5px var(--zg-brand-soft)}
+.zg-timeline[data-size="xl"] .zg-tl__dot{width:18px;height:18px;margin-top:7px;box-shadow:0 0 0 6px var(--zg-brand-soft)}
+.zg-timeline[data-size="xs"] .zg-tl__body{font-size:12px;padding-bottom:10px}
+.zg-timeline[data-size="sm"] .zg-tl__body{font-size:13px;padding-bottom:14px}
+.zg-timeline[data-size="md"] .zg-tl__body{font-size:14px;padding-bottom:18px}
+.zg-timeline[data-size="lg"] .zg-tl__body{font-size:16px;padding-bottom:24px}
+.zg-timeline[data-size="xl"] .zg-tl__body{font-size:18px;padding-bottom:30px}
+.zg-timeline[data-size="xs"] .zg-tl__time{font-size:10px}
+.zg-timeline[data-size="sm"] .zg-tl__time{font-size:11px}
+.zg-timeline[data-size="md"] .zg-tl__time{font-size:12px}
+.zg-timeline[data-size="lg"] .zg-tl__time{font-size:13px}
+.zg-timeline[data-size="xl"] .zg-tl__time{font-size:14px}
+/* TreeView */
+.zg-tree[data-size="xs"] .zg-tree__n{min-height:26px;font-size:12px;gap:6px}
+.zg-tree[data-size="sm"] .zg-tree__n{min-height:30px;font-size:13px;gap:6px}
+.zg-tree[data-size="md"] .zg-tree__n{min-height:36px;font-size:14px;gap:8px}
+.zg-tree[data-size="lg"] .zg-tree__n{min-height:42px;font-size:15px;gap:10px}
+.zg-tree[data-size="xl"] .zg-tree__n{min-height:48px;font-size:16px;gap:12px}
+/* KpiTile, StatsCard, KpiInline */
+.zg-kpi[data-size="xs"]{padding:10px 12px}
+.zg-kpi[data-size="sm"]{padding:12px 14px}
+.zg-kpi[data-size="md"]{padding:16px 18px}
+.zg-kpi[data-size="lg"]{padding:20px 24px}
+.zg-kpi[data-size="xl"]{padding:24px 28px}
+.zg-kpi[data-size="xs"] .zg-kpi__value{font-size:24px}
+.zg-kpi[data-size="sm"] .zg-kpi__value{font-size:30px}
+.zg-kpi[data-size="md"] .zg-kpi__value{font-size:36px}
+.zg-kpi[data-size="lg"] .zg-kpi__value{font-size:44px}
+.zg-kpi[data-size="xl"] .zg-kpi__value{font-size:52px}
+.zg-kpi[data-size="xs"] .zg-kpi__label{font-size:11px}
+.zg-kpi[data-size="sm"] .zg-kpi__label{font-size:12px}
+.zg-kpi[data-size="md"] .zg-kpi__label{font-size:13px}
+.zg-kpi[data-size="lg"] .zg-kpi__label{font-size:14px}
+.zg-kpi[data-size="xl"] .zg-kpi__label{font-size:15px}
+.zg-kpi[data-size="xs"] .zg-kpi__sub{font-size:10px}
+.zg-kpi[data-size="sm"] .zg-kpi__sub{font-size:11px}
+.zg-kpi[data-size="md"] .zg-kpi__sub{font-size:12px}
+.zg-kpi[data-size="lg"] .zg-kpi__sub{font-size:13px}
+.zg-kpi[data-size="xl"] .zg-kpi__sub{font-size:14px}
+.zg-kpii[data-size="xs"] .zg-kpii__v{font-size:15px!important}
+.zg-kpii[data-size="sm"] .zg-kpii__v{font-size:17px!important}
+.zg-kpii[data-size="md"] .zg-kpii__v{font-size:20px!important}
+.zg-kpii[data-size="lg"] .zg-kpii__v{font-size:24px!important}
+.zg-kpii[data-size="xl"] .zg-kpii__v{font-size:28px!important}
+/* StatRow, StatLine, StatStrip */
+.zg-srow[data-size="xs"]{min-height:40px;gap:8px}
+.zg-srow[data-size="sm"]{min-height:48px;gap:10px}
+.zg-srow[data-size="md"]{min-height:56px;gap:12px}
+.zg-srow[data-size="lg"]{min-height:64px;gap:14px}
+.zg-srow[data-size="xl"]{min-height:72px;gap:16px}
+.zg-srow[data-size="xs"] .zg-srow__t{font-size:12px!important}
+.zg-srow[data-size="sm"] .zg-srow__t{font-size:13px!important}
+.zg-srow[data-size="md"] .zg-srow__t{font-size:15px!important}
+.zg-srow[data-size="lg"] .zg-srow__t{font-size:16px!important}
+.zg-srow[data-size="xl"] .zg-srow__t{font-size:18px!important}
+.zg-srow[data-size="xs"] .zg-srow__v{font-size:13px!important}
+.zg-srow[data-size="sm"] .zg-srow__v{font-size:15px!important}
+.zg-srow[data-size="md"] .zg-srow__v{font-size:17px!important}
+.zg-srow[data-size="lg"] .zg-srow__v{font-size:19px!important}
+.zg-srow[data-size="xl"] .zg-srow__v{font-size:22px!important}
+.zg-statline[data-size="xs"] .zg-statline__v{font-size:18px!important}
+.zg-statline[data-size="sm"] .zg-statline__v{font-size:22px!important}
+.zg-statline[data-size="md"] .zg-statline__v{font-size:26px!important}
+.zg-statline[data-size="lg"] .zg-statline__v{font-size:32px!important}
+.zg-statline[data-size="xl"] .zg-statline__v{font-size:38px!important}
+.zg-strip[data-size="xs"] .zg-strip__v{font-size:16px!important}
+.zg-strip[data-size="sm"] .zg-strip__v{font-size:19px!important}
+.zg-strip[data-size="md"] .zg-strip__v{font-size:22px!important}
+.zg-strip[data-size="lg"] .zg-strip__v{font-size:26px!important}
+.zg-strip[data-size="xl"] .zg-strip__v{font-size:30px!important}
+.zg-strip[data-size="xs"] .zg-strip__i{padding:8px 12px;gap:8px}
+.zg-strip[data-size="sm"] .zg-strip__i{padding:10px 16px;gap:10px}
+.zg-strip[data-size="md"] .zg-strip__i{padding:14px 20px;gap:14px}
+.zg-strip[data-size="lg"] .zg-strip__i{padding:18px 24px;gap:16px}
+.zg-strip[data-size="xl"] .zg-strip__i{padding:22px 28px;gap:18px}
+/* SegBar, VersusBar */
+[data-size="xs"] > .zg-segbar{height:20px}
+[data-size="sm"] > .zg-segbar{height:28px}
+[data-size="md"] > .zg-segbar{height:36px}
+[data-size="lg"] > .zg-segbar{height:44px}
+[data-size="xl"] > .zg-segbar{height:52px}
+.zg-vs[data-size="xs"] .zg-vs__bar{height:4px}
+.zg-vs[data-size="sm"] .zg-vs__bar{height:6px}
+.zg-vs[data-size="md"] .zg-vs__bar{height:8px}
+.zg-vs[data-size="lg"] .zg-vs__bar{height:12px}
+.zg-vs[data-size="xl"] .zg-vs__bar{height:16px}
+/* Ring label */
+.zg-ring[data-size="xs"] .zg-ring__l{font-size:8px}
+.zg-ring[data-size="sm"] .zg-ring__l{font-size:10px}
+.zg-ring[data-size="md"] .zg-ring__l{font-size:12px}
+.zg-ring[data-size="lg"] .zg-ring__l{font-size:13px}
+.zg-ring[data-size="xl"] .zg-ring__l{font-size:15px}
+/* UserCell text */
+.zg-usercell[data-size="xs"]{gap:6px}
+.zg-usercell[data-size="sm"]{gap:8px}
+.zg-usercell[data-size="md"]{gap:10px}
+.zg-usercell[data-size="lg"]{gap:12px}
+.zg-usercell[data-size="xl"]{gap:14px}
+.zg-usercell[data-size="xs"] b{font-size:12px}
+.zg-usercell[data-size="sm"] b{font-size:13px}
+.zg-usercell[data-size="md"] b{font-size:14px}
+.zg-usercell[data-size="lg"] b{font-size:16px}
+.zg-usercell[data-size="xl"] b{font-size:18px}
+.zg-usercell[data-size="xs"] .zg-hint{font-size:10px}
+.zg-usercell[data-size="sm"] .zg-hint{font-size:11px}
+.zg-usercell[data-size="md"] .zg-hint{font-size:12px}
+.zg-usercell[data-size="lg"] .zg-hint{font-size:13px}
+.zg-usercell[data-size="xl"] .zg-hint{font-size:14px}

package/src/styles/sizes/domain.css

@@ -0,0 +1,35 @@
+/* size overrides for the domain group. Only [data-size] selectors, see the size scale at the end of tokens.css */
+.zg-dm[data-size="xs"]{--dz:.82}.zg-dm[data-size="sm"]{--dz:.91}.zg-dm[data-size="md"]{--dz:1}.zg-dm[data-size="lg"]{--dz:1.12}.zg-dm[data-size="xl"]{--dz:1.25}
+.zg-lead.zg-dm[data-size]{padding:calc(14px*var(--dz));gap:calc(10px*var(--dz));border-radius:calc(20px*var(--dz))}
+.zg-lead.zg-dm[data-size] .zg-lead__row{gap:calc(10px*var(--dz))}
+.zg-kcard.zg-dm[data-size]{padding:calc(14px*var(--dz));gap:calc(8px*var(--dz));border-radius:calc(20px*var(--dz));font-size:calc(14px*var(--dz))}
+.zg-kcol.zg-dm[data-size]{padding:calc(12px*var(--dz));gap:calc(10px*var(--dz));min-width:calc(260px*var(--dz));flex-basis:calc(260px*var(--dz));border-radius:calc(28px*var(--dz))}
+.zg-kcol.zg-dm[data-size] .zg-kcol__head{font-size:calc(14px*var(--dz))}
+.zg-hotel.zg-dm[data-size]{border-radius:calc(28px*var(--dz))}
+.zg-hotel.zg-dm[data-size] .zg-hotel__body{padding:calc(16px*var(--dz));gap:calc(10px*var(--dz))}
+.zg-hotel.zg-dm[data-size] .zg-hotel__row{gap:calc(12px*var(--dz))}
+.zg-hotel.zg-dm[data-size] .zg-hotel__tags{top:calc(10px*var(--dz));inset-inline-start:calc(10px*var(--dz));gap:calc(6px*var(--dz))}
+.zg-hotel.zg-dm[data-size] .zg-hint{font-size:calc(13px*var(--dz))}
+.zg-hotel.zg-dm[data-size] .zg-badge{font-size:calc(12px*var(--dz))}
+.zg-hotel.zg-dm[data-size="xs"] .zg-hotel__img{aspect-ratio:16/8}.zg-hotel.zg-dm[data-size="xl"] .zg-hotel__img{aspect-ratio:16/11}
+.zg-card.zg-dm[data-size]{padding:calc(20px*var(--dz));gap:calc(14px*var(--dz));border-radius:calc(32px*var(--dz))}
+.zg-card.zg-dm[data-size] .zg-card__title{font-size:calc(18px*var(--dz))}
+.zg-card.zg-dm[data-size] .zg-card__sub,.zg-card.zg-dm[data-size] .zg-hint{font-size:calc(13px*var(--dz))}
+.zg-card.zg-dm[data-size] .zg-card__head{gap:calc(12px*var(--dz))}
+.zg-card.zg-dm[data-size] .zg-lead__row{gap:calc(10px*var(--dz))}
+.zg-card.zg-dm[data-size] .zg-chips{gap:calc(8px*var(--dz))}
+.zg-pt.zg-dm[data-size]{gap:calc(6px*var(--dz))}
+.zg-pt.zg-dm[data-size] > .zg-pt__i{padding:calc(12px*var(--dz)) calc(6px*var(--dz));gap:calc(4px*var(--dz));border-radius:calc(18px*var(--dz));font-size:calc(12px*var(--dz))}
+.zg-pt.zg-dm[data-size] > .zg-pt__i b{font-size:calc(16px*var(--dz))}
+.zg-rt.zg-dm[data-size]{gap:calc(3px*var(--dz))}
+.zg-rt.zg-dm[data-size] i{height:calc(36px*var(--dz));border-radius:calc(7px*var(--dz))}
+.zg-call.zg-dm[data-size]{grid-template-columns:calc(36px*var(--dz)) minmax(0,1fr) auto;gap:calc(12px*var(--dz));padding:calc(10px*var(--dz)) calc(12px*var(--dz));border-radius:calc(18px*var(--dz))}
+.zg-call.zg-dm[data-size] .zg-hint,.zg-lead.zg-dm[data-size] .zg-hint,.zg-kcard.zg-dm[data-size] .zg-hint,.zg-inc.zg-dm[data-size] .zg-hint{font-size:calc(13px*var(--dz))}
+.zg-lead.zg-dm[data-size] .zg-badge,.zg-kcard.zg-dm[data-size] .zg-badge,.zg-card.zg-dm[data-size] .zg-badge{font-size:calc(12px*var(--dz))}
+.zg-inc.zg-dm[data-size]{gap:calc(14px*var(--dz));padding:calc(14px*var(--dz)) calc(16px*var(--dz));border-radius:calc(28px*var(--dz));max-width:calc(440px*var(--dz))}
+.zg-inc.zg-dm[data-size] .zg-inc__ok{--h:var(--zg-h-md)}.zg-inc.zg-dm[data-size="xs"] .zg-inc__ok{--h:var(--zg-h-xs)}.zg-inc.zg-dm[data-size="sm"] .zg-inc__ok{--h:var(--zg-h-sm)}.zg-inc.zg-dm[data-size="lg"] .zg-inc__ok{--h:var(--zg-h-lg)}.zg-inc.zg-dm[data-size="xl"] .zg-inc__ok{--h:var(--zg-h-xl)}
+.zg-rooms.zg-dm[data-size]{grid-template-columns:repeat(auto-fill,minmax(calc(88px*var(--dz)),1fr));gap:calc(8px*var(--dz))}
+.zg-rooms.zg-dm[data-size] .zg-room{padding:calc(12px*var(--dz));border-radius:calc(18px*var(--dz));font-size:calc(12px*var(--dz))}
+.zg-rooms.zg-dm[data-size] .zg-room b{font-size:calc(16px*var(--dz))}
+.zg-rc.zg-dm[data-size]{grid-template-columns:calc(56px*var(--dz)) repeat(var(--d),minmax(0,1fr));font-size:calc(12px*var(--dz))}
+.zg-rc.zg-dm[data-size] .zg-rc__c{height:calc(28px*var(--dz))}

package/src/styles/sizes/feedback.css

@@ -0,0 +1,69 @@
+/* size overrides for the feedback group. Only [data-size] selectors, see the size scale at the end of tokens.css */
+
+/* Alert / Banner */
+.zg-alert[data-size="xs"]{--a-p:8px 10px;--a-g:8px;--a-i:22px;--a-v:13px;--a-f:12px;--a-t:13px;--a-r:14px}
+.zg-alert[data-size="sm"]{--a-p:10px 12px;--a-g:10px;--a-i:26px;--a-v:15px;--a-f:13px;--a-t:14px;--a-r:16px}
+.zg-alert[data-size="md"]{--a-p:14px 16px;--a-g:12px;--a-i:32px;--a-v:18px;--a-f:14px;--a-t:15px;--a-r:22px}
+.zg-alert[data-size="lg"]{--a-p:18px 20px;--a-g:14px;--a-i:38px;--a-v:22px;--a-f:15px;--a-t:16px;--a-r:24px}
+.zg-alert[data-size="xl"]{--a-p:22px 24px;--a-g:16px;--a-i:44px;--a-v:26px;--a-f:16px;--a-t:18px;--a-r:26px}
+.zg-alert[data-size]{padding:var(--a-p);gap:var(--a-g);border-radius:var(--a-r)}
+.zg-alert[data-size].zg-banner{border-radius:0}
+.zg-alert[data-size] .zg-alert__i{width:var(--a-i);height:var(--a-i)}
+.zg-alert[data-size] .zg-alert__i svg{width:var(--a-v);height:var(--a-v)}
+.zg-alert[data-size] .zg-alert__b{font-size:var(--a-f)}
+.zg-alert[data-size] .zg-alert__b b{font-size:var(--a-t)}
+
+/* Toast */
+.zg-toast[data-size="xs"]{--t-p:8px 10px;--t-g:8px;--t-i:22px;--t-v:13px;--t-f:11px;--t-t:12px;--t-w:280px;--t-r:14px}
+.zg-toast[data-size="sm"]{--t-p:10px 12px;--t-g:10px;--t-i:26px;--t-v:15px;--t-f:12px;--t-t:13px;--t-w:330px;--t-r:18px}
+.zg-toast[data-size="md"]{--t-p:14px 16px;--t-g:12px;--t-i:32px;--t-v:18px;--t-f:13px;--t-t:14px;--t-w:380px;--t-r:22px}
+.zg-toast[data-size="lg"]{--t-p:18px 20px;--t-g:14px;--t-i:38px;--t-v:22px;--t-f:14px;--t-t:16px;--t-w:440px;--t-r:24px}
+.zg-toast[data-size="xl"]{--t-p:22px 24px;--t-g:16px;--t-i:44px;--t-v:26px;--t-f:16px;--t-t:18px;--t-w:500px;--t-r:26px}
+.zg-toast[data-size]{padding:var(--t-p);gap:var(--t-g);max-width:var(--t-w);border-radius:var(--t-r)}
+.zg-toast[data-size] .zg-toast__icon{width:var(--t-i);height:var(--t-i)}
+.zg-toast[data-size] .zg-toast__icon svg{width:var(--t-v);height:var(--t-v)}
+.zg-toast[data-size] b{font-size:var(--t-t)}
+.zg-toast[data-size] span:not(.zg-toast__icon){font-size:var(--t-f)}
+
+/* Snackbar */
+.zg-snack[data-size="xs"]{--s-h:32px;--s-px:10px;--s-g:10px;--s-f:12px}
+.zg-snack[data-size="sm"]{--s-h:38px;--s-px:12px;--s-g:12px;--s-f:13px}
+.zg-snack[data-size="md"]{--s-h:44px;--s-px:16px;--s-g:14px;--s-f:14px}
+.zg-snack[data-size="lg"]{--s-h:52px;--s-px:20px;--s-g:16px;--s-f:15px}
+.zg-snack[data-size="xl"]{--s-h:60px;--s-px:24px;--s-g:18px;--s-f:16px}
+.zg-snack[data-size]{min-height:var(--s-h);padding:0 var(--s-px);gap:var(--s-g);font-size:var(--s-f)}
+
+/* Progress */
+.zg-progress[data-size="xs"]{--p-h:4px;--p-f:11px;--p-g:4px}
+.zg-progress[data-size="sm"]{--p-h:6px;--p-f:12px;--p-g:5px}
+.zg-progress[data-size="md"]{--p-h:8px;--p-f:13px;--p-g:6px}
+.zg-progress[data-size="lg"]{--p-h:12px;--p-f:14px;--p-g:8px}
+.zg-progress[data-size="xl"]{--p-h:16px;--p-f:15px;--p-g:10px}
+.zg-progress[data-size]{gap:var(--p-g)}
+.zg-progress[data-size] .zg-progress__row{font-size:var(--p-f)}
+.zg-progress[data-size] .zg-progress__track{height:var(--p-h)}
+
+/* Spinner: size is resolved to font-size in the core, only the stroke is tuned here */
+.zg-spin[data-size="lg"]{border-width:3px}
+.zg-spin[data-size="xl"]{border-width:4px}
+
+/* Skeleton */
+.zg-skelw[data-size="xs"]{--k-h:8px;--k-g:5px}
+.zg-skelw[data-size="sm"]{--k-h:11px;--k-g:6px}
+.zg-skelw[data-size="md"]{--k-h:14px;--k-g:8px}
+.zg-skelw[data-size="lg"]{--k-h:18px;--k-g:10px}
+.zg-skelw[data-size="xl"]{--k-h:22px;--k-g:12px}
+.zg-skelw[data-size]{gap:var(--k-g)}
+.zg-skelw[data-size] .zg-skel--text{height:var(--k-h)}
+
+/* EmptyState */
+.zg-es[data-size="xs"]{--e-p:16px 12px;--e-i:40px;--e-v:20px;--e-t:14px;--e-f:12px;--e-g:6px;--e-r:14px;--e-m:112px}
+.zg-es[data-size="sm"]{--e-p:24px 14px;--e-i:52px;--e-v:24px;--e-t:16px;--e-f:13px;--e-g:7px;--e-r:18px;--e-m:112px}
+.zg-es[data-size="md"]{--e-p:32px 16px;--e-i:64px;--e-v:28px;--e-t:17px;--e-f:16px;--e-g:8px;--e-r:22px;--e-m:112px}
+.zg-es[data-size="lg"]{--e-p:44px 20px;--e-i:80px;--e-v:34px;--e-t:20px;--e-f:17px;--e-g:10px;--e-r:26px;--e-m:112px}
+.zg-es[data-size="xl"]{--e-p:56px 24px;--e-i:96px;--e-v:40px;--e-t:24px;--e-f:18px;--e-g:12px;--e-r:30px;--e-m:112px}
+.zg-es[data-size]{padding:var(--e-p);gap:var(--e-g);font-size:var(--e-f)}
+.zg-es[data-size] b{font-size:var(--e-t)}
+.zg-es[data-size] .zg-es__ico{width:var(--e-i);height:var(--e-i);border-radius:var(--e-r)}
+.zg-es[data-size] .zg-es__ico svg{width:var(--e-v);height:var(--e-v)}
+.zg-es[data-size] .zg-es__img{width:calc(var(--e-i)*1.75);height:calc(var(--e-i)*1.75)}

package/src/styles/sizes/forms.css

@@ -0,0 +1,122 @@
+/* size overrides for the forms group. Only [data-size] selectors, see the size scale at the end of tokens.css */
+[data-size]{
+  --zg-fm-h:calc(var(--zg-sz-h) + 8px);
+  --zg-fm-fs:calc(var(--zg-sz-fs) + 1px);
+  --zg-fm-px:calc(var(--zg-sz-px) + 2px);
+  --zg-fm-btn:calc(var(--zg-sz-h) - 8px);
+  --zg-fm-box:calc(var(--zg-sz-h) * .55);
+  --zg-fm-sw:calc(var(--zg-sz-h) * .65);
+  --zg-fm-iu:calc(var(--zg-sz-h) * 4);
+}
+
+/* ---- text-like inputs: label, hint, shared .zg-input chrome ---- */
+.zg-field[data-size] .zg-label{font-size:max(12px,calc(var(--zg-sz-fs) - 1px))}
+.zg-field[data-size] .zg-hint{font-size:max(11px,calc(var(--zg-sz-fs) - 2px))}
+.zg-field[data-size] .zg-input{--h:var(--zg-fm-h);gap:var(--zg-sz-gap);padding:0 6px 0 var(--zg-fm-px)}
+.zg-field[data-size] .zg-input input{font-size:var(--zg-fm-fs)}
+.zg-field[data-size] .zg-input.zg-num-in{padding:0 6px}
+.zg-field[data-size] .zg-input.zg-chipin{min-height:var(--zg-fm-h);height:auto;padding:6px calc(var(--zg-sz-px) - 4px)}
+.zg-field[data-size] .zg-chipin .zg-tag{height:calc(var(--zg-sz-h) * .7);font-size:calc(var(--zg-sz-fs) - 1px)}
+.zg-field[data-size] .zg-chipin .zg-tag button{width:calc(var(--zg-sz-h) * .5);height:calc(var(--zg-sz-h) * .5)}
+.zg-field[data-size] .zg-input .zg-ibtn{--h:var(--zg-fm-btn)}
+.zg-field[data-size] .zg-num-in .zg-ibtn{--h:var(--zg-fm-btn)}
+.zg-field[data-size] > div[style*="130px"]{grid-template-columns:calc(var(--zg-sz-h) * 3.25) minmax(0,1fr)!important}
+.zg-field[data-size] .zg-ta{padding:calc(var(--zg-sz-pad) - 2px) var(--zg-fm-px);font-size:var(--zg-fm-fs);border-radius:calc(var(--zg-fm-h) / 2)}
+
+/* compact inputs whose root is the .zg-input itself (SearchInput, InlineEdit editing) */
+.zg-input[data-size]{--h:var(--zg-sz-h)!important;gap:var(--zg-sz-gap);padding:0 6px 0 var(--zg-fm-px)}
+.zg-input[data-size] input{font-size:var(--zg-fm-fs)}
+.zg-input[data-size] .zg-ibtn{--h:var(--zg-fm-btn)}
+.zg-inline[data-size]{gap:calc(var(--zg-sz-gap) - 2px);padding:calc(var(--zg-sz-h) * .15) calc(var(--zg-sz-px) - 4px);font-size:var(--zg-fm-fs);border-radius:calc(var(--zg-sz-h) * .35)}
+
+/* icons: md keeps the library defaults */
+.zg-field[data-size]:not([data-size="md"]) .zg-input .zg-icon,
+.zg-input[data-size]:not([data-size="md"]) .zg-icon,
+.zg-field[data-size]:not([data-size="md"]) .zg-select__trigger .zg-icon,
+.zg-field[data-size]:not([data-size="md"]) .zg-fdrop > .zg-icon,
+.zg-inline[data-size]:not([data-size="md"]) .zg-icon{width:var(--zg-sz-icon)!important;height:var(--zg-sz-icon)!important}
+.zg-field[data-size]:not([data-size="md"]) .zg-input .zg-ibtn .zg-icon,
+.zg-input[data-size]:not([data-size="md"]) .zg-ibtn .zg-icon,
+.zg-field[data-size]:not([data-size="md"]) .zg-rte__t .zg-icon,
+.zg-field[data-size]:not([data-size="md"]) .zg-chipin .zg-tag .zg-icon{width:calc(var(--zg-sz-icon) - 2px)!important;height:calc(var(--zg-sz-icon) - 2px)!important}
+.zg-field[data-size]:not([data-size="md"]) .zg-fdrop > .zg-icon{width:calc(var(--zg-sz-icon) + 6px)!important;height:calc(var(--zg-sz-icon) + 6px)!important}
+
+/* ---- select-likes: trigger and popup rows ---- */
+.zg-field[data-size] .zg-select__trigger{height:var(--zg-fm-h)!important;padding-inline:var(--zg-fm-px);font-size:var(--zg-fm-fs);gap:var(--zg-sz-gap)}
+.zg-field[data-size] .zg-select__opt{height:calc(var(--zg-sz-h));padding:0 calc(var(--zg-sz-px) - 2px);font-size:var(--zg-sz-fs)}
+.zg-field[data-size] .zg-select__opt .zg-check__box{width:calc(var(--zg-sz-h) * .45)!important;height:calc(var(--zg-sz-h) * .45)!important}
+.zg-field[data-size] .zg-select__list .zg-empty{padding:calc(var(--zg-sz-pad) * 2.5) var(--zg-sz-pad);font-size:var(--zg-sz-fs)}
+.zg-field[data-size] .zg-tree__n{min-height:calc(var(--zg-sz-h) - 4px);font-size:var(--zg-sz-fs);gap:calc(var(--zg-sz-gap) - 2px)}
+.zg-field[data-size] .zg-select__list .zg-sidenav__group{font-size:max(11px,calc(var(--zg-sz-fs) - 2px))}
+.zg-dd[data-size]>.zg-btn.zg-btn--tonal.zg-btn--sm{height:var(--zg-fm-btn);font-size:calc(var(--zg-sz-fs) - 1px);padding-inline:calc(var(--zg-sz-px) - 4px);gap:calc(var(--zg-sz-gap) - 2px)}
+.zg-dd[data-size]:not([data-size="md"])>.zg-btn.zg-btn--tonal.zg-btn--sm .zg-icon{width:calc(var(--zg-sz-icon) - 4px)!important;height:calc(var(--zg-sz-icon) - 4px)!important}
+
+/* ---- checkbox / radio ---- */
+.zg-check[data-size],.zg-field[data-size] .zg-check{gap:var(--zg-sz-gap);font-size:var(--zg-sz-fs)}
+.zg-check[data-size] .zg-check__box,.zg-field[data-size] .zg-check .zg-check__box{width:var(--zg-fm-box);height:var(--zg-fm-box);border-radius:calc(var(--zg-fm-box) * .32)}
+.zg-check[data-size] .zg-check__box .zg-icon,.zg-field[data-size] .zg-check .zg-check__box .zg-icon{width:calc(var(--zg-fm-box) * .64)!important;height:calc(var(--zg-fm-box) * .64)!important}
+.zg-check[data-size] .zg-radio,.zg-field[data-size] .zg-check .zg-radio{border-radius:50%!important}
+.zg-check[data-size] .zg-radio i,.zg-field[data-size] .zg-check .zg-radio i{width:calc(var(--zg-fm-box) * .45);height:calc(var(--zg-fm-box) * .45)}
+.zg-field[data-size][role="radiogroup"]{gap:var(--zg-sz-gap)!important}
+
+/* ---- switch ---- */
+.zg-switch[data-size]{gap:var(--zg-sz-gap);font-size:var(--zg-sz-fs)}
+.zg-switch[data-size] .zg-switch__track{width:calc(var(--zg-fm-sw) * 1.6923);height:var(--zg-fm-sw)}
+.zg-switch[data-size] .zg-switch__thumb{width:calc(var(--zg-fm-sw) - 6px);height:calc(var(--zg-fm-sw) - 6px)}
+.zg-switch[data-size][aria-checked="true"] .zg-switch__thumb{transform:translateX(calc(var(--zg-fm-sw) * .6923))}
+[dir="rtl"] .zg-switch[data-size][aria-checked="true"] .zg-switch__thumb{transform:translateX(calc(var(--zg-fm-sw) * -.6923))}
+
+/* ---- option cards ---- */
+.zg-opt[data-size],.zg-field[data-size] .zg-opt{gap:calc(var(--zg-sz-gap) + 2px);padding:calc(var(--zg-sz-pad) - 2px) var(--zg-sz-pad);border-radius:calc(var(--zg-sz-h) * .45)}
+.zg-opt[data-size] > span > b,.zg-field[data-size] .zg-opt > span > b{font-size:var(--zg-fm-fs)!important}
+.zg-opt[data-size] > b,.zg-field[data-size] .zg-opt > b{font-size:calc(var(--zg-sz-fs) + 2px)!important}
+.zg-opt[data-size] .zg-hint,.zg-field[data-size] .zg-opt .zg-hint{font-size:max(11px,calc(var(--zg-sz-fs) - 2px))}
+.zg-opt[data-size] .zg-opt__img,.zg-field[data-size] .zg-opt .zg-opt__img{width:calc(var(--zg-sz-h) * 1.2);height:calc(var(--zg-sz-h) * 1.2)}
+.zg-opt[data-size] .zg-tile,.zg-field[data-size] .zg-opt .zg-tile{--s:var(--zg-sz-h)!important}
+.zg-opt[data-size] .zg-check__box,.zg-field[data-size] .zg-opt .zg-check__box{width:var(--zg-fm-box);height:var(--zg-fm-box)}
+.zg-opt[data-size]:not([data-size="md"]) .zg-tile .zg-icon,.zg-field[data-size]:not([data-size="md"]) .zg-opt .zg-tile .zg-icon{width:calc(var(--zg-sz-icon) + 2px)!important;height:calc(var(--zg-sz-icon) + 2px)!important}
+.zg-opt[data-size] .zg-check__box .zg-icon,.zg-field[data-size] .zg-opt .zg-check__box .zg-icon{width:calc(var(--zg-fm-box) * .55)!important;height:calc(var(--zg-fm-box) * .55)!important}
+.zg-opt[data-size] .zg-radio i,.zg-field[data-size] .zg-opt .zg-radio i{width:calc(var(--zg-fm-box) * .45);height:calc(var(--zg-fm-box) * .45)}
+
+/* ---- sliders ---- */
+.zg-field[data-size] .zg-range{height:calc(var(--zg-sz-h) * .2)}
+.zg-field[data-size] .zg-range::-webkit-slider-thumb{width:var(--zg-fm-box);height:var(--zg-fm-box)}
+.zg-field[data-size] .zg-range::-moz-range-thumb{width:var(--zg-fm-box);height:var(--zg-fm-box)}
+.zg-field[data-size] .zg-range2w{height:calc(var(--zg-sz-h) * .7)}
+.zg-field[data-size] .zg-range2w > i{top:calc((var(--zg-sz-h) * .7 - var(--zg-sz-h) * .2) / 2);height:calc(var(--zg-sz-h) * .2)}
+.zg-field[data-size] .zg-range2::-webkit-slider-thumb{width:var(--zg-fm-box);height:var(--zg-fm-box)}
+.zg-field[data-size] .zg-range2::-moz-range-thumb{width:var(--zg-fm-box);height:var(--zg-fm-box)}
+.zg-field[data-size] .zg-mono{font-size:var(--zg-sz-fs)}
+
+/* ---- code input ---- */
+.zg-code[data-size]{gap:calc(var(--zg-sz-gap) - 2px)}
+.zg-code[data-size] .zg-code__cell{height:calc(var(--zg-sz-h) * 1.5);border-radius:calc(var(--zg-sz-h) * .45);font-size:calc(var(--zg-sz-h) * .7)}
+
+/* ---- color picker, file and image upload ---- */
+.zg-field[data-size] .zg-chips{gap:calc(var(--zg-sz-gap) - 2px)}
+.zg-field[data-size] .zg-swatch{width:calc(var(--zg-sz-h) * .8);height:calc(var(--zg-sz-h) * .8)}
+.zg-field[data-size] .zg-fdrop{padding:calc(var(--zg-sz-pad) * 1.75) var(--zg-sz-pad);gap:calc(var(--zg-sz-gap) - 4px);font-size:var(--zg-sz-fs);border-radius:calc(var(--zg-sz-h) * .6)}
+.zg-field[data-size] .zg-imgup{width:var(--zg-fm-iu,100%)}
+.zg-field[data-size] .zg-imgup__e .zg-hint{font-size:max(10px,calc(var(--zg-sz-fs) - 2px))}
+.zg-field[data-size] .zg-imgup__o{width:calc(var(--zg-sz-h) * .85);height:calc(var(--zg-sz-h) * .85)}
+
+/* ---- rich editor ---- */
+.zg-field[data-size] .zg-rte__t .zg-ibtn{--h:var(--zg-fm-btn)}
+.zg-field[data-size] .zg-rte__c{min-height:calc(var(--zg-sz-h) * 3.5);padding:calc(var(--zg-sz-pad) - 2px) calc(var(--zg-sz-pad) + 2px);font-size:var(--zg-fm-fs)}
+
+/* ---- calendars (Calendar, RangeCalendar, calendar inside DatePicker) ---- */
+.zg-cal[data-size],.zg-field[data-size] .zg-cal{min-width:calc(var(--zg-sz-h) * 7)}
+.zg-cal[data-size] .zg-cal__d,.zg-field[data-size] .zg-cal .zg-cal__d{height:calc(var(--zg-sz-h) - 4px);font-size:var(--zg-sz-fs)}
+.zg-cal[data-size] .zg-cal__w,.zg-field[data-size] .zg-cal .zg-cal__w{font-size:max(10px,calc(var(--zg-sz-fs) - 3px))}
+.zg-cal[data-size] .zg-cal__h .zg-ibtn,.zg-field[data-size] .zg-cal .zg-cal__h .zg-ibtn{--h:var(--zg-fm-btn)}
+.zg-cal[data-size] .zg-cal__h b,.zg-field[data-size] .zg-cal .zg-cal__h b{font-size:var(--zg-fm-fs)}
+.zg-cal[data-size]:not([data-size="md"]) .zg-cal__h .zg-icon,.zg-field[data-size]:not([data-size="md"]) .zg-cal .zg-cal__h .zg-icon{width:calc(var(--zg-sz-icon) - 2px)!important;height:calc(var(--zg-sz-icon) - 2px)!important}
+
+/* ---- stepper (Stepper, StepForm) ---- */
+.zg-stepper[data-size],.zg-field[data-size] .zg-stepper{gap:calc(var(--zg-sz-gap) - 2px)}
+.zg-stepper[data-size] .zg-step,.zg-field[data-size] .zg-stepper .zg-step{gap:calc(var(--zg-sz-gap) - 2px);font-size:calc(var(--zg-sz-fs) - 1px)}
+.zg-stepper[data-size] .zg-step__n,.zg-field[data-size] .zg-stepper .zg-step__n{width:calc(var(--zg-sz-h) * .7);height:calc(var(--zg-sz-h) * .7)}
+.zg-stepper[data-size]:not([data-size="md"]) .zg-step__n .zg-icon,.zg-field[data-size]:not([data-size="md"]) .zg-stepper .zg-step__n .zg-icon{width:calc(var(--zg-sz-icon) - 4px)!important;height:calc(var(--zg-sz-icon) - 4px)!important}
+
+/* ---- LoginForm submit (plain element) ---- */
+.zg-field[data-size] .zg-btn--block{--h:var(--zg-fm-h);font-size:var(--zg-fm-fs)}