@ziyarago/ui 0.19.1 → 0.19.3

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [0.19.3](https://github.com/ziyarago/ui/compare/v0.19.2...v0.19.3) (2026-10-21)
+
+### Bug Fixes
+
+* LazyImage and EmptyState images with spaces or parentheses in the URL did not show; cssUrl helper ([0c6b0f6](https://github.com/ziyarago/ui/commit/0c6b0f65ca2834835f271aba4c4be9d7ebe8099b))
+
+## [0.19.2](https://github.com/ziyarago/ui/compare/v0.19.1...v0.19.2) (2026-10-21)
+
+### Bug Fixes
+
+* Progress track stripes and hatch pattern visible in the light theme ([f2b7352](https://github.com/ziyarago/ui/commit/f2b7352703e5c86c95a2a6c3aaf90020242c0baa))
+
 ## [0.19.1](https://github.com/ziyarago/ui/compare/v0.19.0...v0.19.1) (2026-10-21)
 
 ### Bug Fixes

package/dist/llms-full.txt

@@ -2,7 +2,7 @@
 
 > ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 102 free components and 6 page templates (more in @ziyarago/ui-pro).
 
-Version 0.19.1. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.19.3. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'

package/dist/llms.txt

@@ -2,7 +2,7 @@
 
 > ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 102 free components and 6 page templates (more in @ziyarago/ui-pro).
 
-Version 0.19.1. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.19.3. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "@ziyarago/ui",
- "version": "0.19.1",
+ "version": "0.19.3",
  "homepage": "https://ziyara.vip",
  "imports": {
   "vue": "import { UiButton } from '@ziyarago/ui/vue'",

package/dist/style.css

@@ -95,7 +95,7 @@
 .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)}
+.zg-hatch{background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--zg-text-1) 22%,transparent) 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}
@@ -189,7 +189,7 @@
 .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__track{height:8px;border-radius:999px;overflow:hidden;background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--zg-text-1) 22%,transparent) 0 1.5px,transparent 1.5px 6px),color-mix(in oklch,var(--zg-text-1) 6%,transparent)}
 .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)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ziyarago/ui",
-  "version": "0.19.1",
+  "version": "0.19.3",
   "description": "ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 102 free components and 6 page templates (more in @ziyarago/ui-pro).",
   "keywords": [
     "ui",

package/src/core/components.js

@@ -5,6 +5,8 @@ import { trap } from './dialog.js';
 import { t } from '../i18n/index.js';
 import { rove, tabIdx, listKeys, openKeys, focusIn, toTrigger, trigger } from './keys.js';
 export const cx = (...a) => a.filter(Boolean).join(' ');
+// Quoted CSS url() for a background-image: URLs with spaces, parentheses, commas or quotes (photo (1).jpg, names with spaces) break the unquoted form and the image silently disappears.
+export const cssUrl = u => 'url("' + String(u).replace(/["\\]/g, '\\$&').replace(/\n/g, '\\a ').replace(/\r/g, '\\d ') + '")';
 // Copies the listed props that are set; used to forward native attributes and listeners to the real <input>/<textarea>.
 const DOM_NAMES = { autocomplete: 'autoComplete', maxlength: 'maxLength', minlength: 'minLength', inputmode: 'inputMode', autocapitalize: 'autoCapitalize', spellcheck: 'spellCheck', autofocus: 'autoFocus' };
 // DOM property spelling (autoComplete, maxLength ...) so React does not warn; Vue accepts it too.

package/src/core/components2.js

@@ -1,5 +1,5 @@
 // @ziyarago/ui · components, part 2 — Forms, Surfaces, Actions, Data, Navigation, Layout, CRM, Hotels.
-import { icon, cx, ddRef, pick, INPUT_ATTRS } from './components.js';
+import { icon, cx, ddRef, pick, INPUT_ATTRS, cssUrl } from './components.js';
 import { trap } from './dialog.js';
 import { listKeys, openKeys, tabIdx, toTrigger, trigger, calKeys, dateKey } from './keys.js';
 const tipId = s => { let x = 5381; for (const c of String(s)) x = (x * 33 ^ c.charCodeAt(0)) >>> 0; return 'zg-tip-' + x.toString(36); };
@@ -30,7 +30,7 @@ export const more = {
   Skeleton: { render: ({ h, props: p }) => h('div', { class: 'zg-skelw' }, ...Array.from({ length: p.lines || 1 }, (_, i) => h('span', { key: i, class: 'zg-skel zg-skel--' + (p.variant || 'text'), style: { width: p.variant === 'circle' ? ({ xs: 24, sm: 32, md: 40, lg: 56, xl: 72 }[p.size] || p.size || 40) + 'px' : (i === (p.lines || 1) - 1 && (p.lines || 1) > 1 ? '60%' : p.width || '100%'), height: p.height || (p.variant === 'circle' ? ({ xs: 24, sm: 32, md: 40, lg: 56, xl: 72 }[p.size] || p.size || 40) + 'px' : undefined) } }))) },
   Spinner: { render: ({ h, props: p }) => h('span', { class: 'zg-spin', role: 'status', 'aria-label': t('Spinner', 'loading'), style: { fontSize: ({ xs: 14, sm: 16, md: 20, lg: 28, xl: 36 }[p.size] || p.size || 20) + 'px' } }) },
   Divider: { render: ({ h, props: p }) => h('div', { class: 'zg-div', role: 'separator' }, p.label ? h('span', null, p.label) : null) },
-  EmptyState: { render: ({ h, props: p, children }) => h('div', { class: 'zg-es' }, p.image ? h('span', { class: 'zg-es__img', style: { backgroundImage: `url(${p.image})` } }) : h('span', { class: 'zg-es__ico' }, icon(h, p.icon || 'inbox', 28)), h('b', null, p.title), p.description ? h('span', null, p.description) : null, children.length ? h('div', { class: 'zg-es__a' }, ...children) : null) },
+  EmptyState: { render: ({ h, props: p, children }) => h('div', { class: 'zg-es' }, p.image ? h('span', { class: 'zg-es__img', style: { backgroundImage: cssUrl(p.image) } }) : h('span', { class: 'zg-es__ico' }, icon(h, p.icon || 'inbox', 28)), h('b', null, p.title), p.description ? h('span', null, p.description) : null, children.length ? h('div', { class: 'zg-es__a' }, ...children) : null) },
   ErrorPage: { render: ({ C, h, props: p, children }) => h('div', { class: 'zg-es zg-es--page' }, h('span', { class: 'zg-num', style: { fontSize: 'clamp(80px,14vw,160px)', lineHeight: 1, color: 'var(--zg-brand-text)' } }, p.code || '404'), h('b', { style: { fontSize: '24px' } }, p.title || t('ErrorPage', 'title')), h('span', null, p.description || t('ErrorPage', 'description')), h('div', { class: 'zg-es__a' }, ...children)) },
   DataState: { render: ({ C, h, props: p, children }) => ({ ready: () => h('div', null, ...children), loading: () => h('div', { class: 'zg-es' }, h(C.Spinner, { size: 28 }), h('b', null, p.title || t('DataState', 'loading'))), empty: () => h(C.EmptyState, { title: p.title || t('DataState', 'empty'), description: p.description, icon: 'inbox' }), error: () => h(C.EmptyState, { title: p.title || t('DataState', 'error'), description: p.description, icon: 'circle-alert' }, h(C.Button, { onClick: p.onRetry }, p.retryLabel || t('DataState', 'retry'))), offline: () => h(C.EmptyState, { title: p.title || t('DataState', 'offline'), description: p.description || t('DataState', 'offlineDesc'), icon: 'wifi-off' }, h(C.Button, { onClick: p.onRetry }, p.retryLabel || t('DataState', 'tryAgain'))) }[p.state || 'ready'])() },
   LoadingOverlay: { render: ({ C, h, props: p, children }) => h('div', { class: 'zg-lo' }, ...children, p.loading ? h('div', { class: 'zg-lo__o' }, h(C.Spinner, { size: 28 }), p.label ? h('span', null, p.label) : null) : null) },
@@ -104,7 +104,7 @@ export const more = {
     return p.type === 'line' ? h('svg', { width: '100%', height: H, viewBox: `0 0 ${Math.max(W, 10)} ${H}`, preserveAspectRatio: 'none', role: 'img' }, h('path', { d: v.map((x, i) => `${i ? 'L' : 'M'}${i * 14 + 7} ${H - 4 - (x / mx) * (H - 8)}`).join(' '), fill: 'none', stroke: 'var(--zg-brand)', 'stroke-width': 2, 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'vector-effect': 'non-scaling-stroke' }))
       : h('div', { class: 'zg-mini', style: { height: H + 'px' } }, ...v.map((x, i) => h('i', { key: i, style: { height: Math.max(6, x / mx * 100) + '%', background: p.highlightLast && i === v.length - 1 ? 'var(--zg-brand)' : 'var(--zg-s3)' } }))); } },
   Descriptions: { render: ({ h, props: p }) => h('dl', { class: 'zg-desc' }, ...(p.items || []).flatMap((it, i) => [h('dt', { key: 'k' + i }, it.label), h('dd', { key: 'v' + i }, it.value ?? '—')])) },
-  LazyImage: { render: ({ h, props: p }) => h('span', { role: 'img', 'aria-label': p.alt || '', class: 'zg-lazy', style: { aspectRatio: p.aspectRatio || '16/9', backgroundImage: p.src ? `url(${p.src})` : undefined, borderRadius: (p.rounded ?? 20) + 'px' } }) },
+  LazyImage: { render: ({ h, props: p }) => h('span', { role: 'img', 'aria-label': p.alt || '', class: 'zg-lazy', style: { aspectRatio: p.aspectRatio || '16/9', backgroundImage: p.src ? cssUrl(p.src) : undefined, borderRadius: (p.rounded ?? 20) + 'px' } }) },
   /* ── Navigation / Layout ── */
   SubNav: { render: ({ h, props: p }) => h('nav', { class: 'zg-subnav', 'aria-label': p.title }, p.title ? h('div', { class: 'zg-sidenav__group' }, p.title) : null, ...(p.items || []).map(it => h('button', { key: it.value, type: 'button', class: 'zg-navitem', 'aria-current': it.value === p.value ? 'page' : undefined, onClick: () => p.onChange && p.onChange(it.value) }, it.icon ? icon(h, it.icon, 16) : null, h('span', { style: { flex: 1, textAlign: 'start' } }, it.label), it.badge ? h('span', { class: 'zg-navitem__count' }, it.badge) : null))) },
   SplitLayout: { render: ({ h, props: p, slots, children }) => h('div', { class: 'zg-split', style: { gridTemplateColumns: p.columns || '1fr 1fr' } }, h('div', null, slots.left || children[0] || null), h('div', null, slots.right || children[1] || null)) },

package/src/internal.js

@@ -1,6 +1,6 @@
 // Semi-internal entry for add-on packages such as @ziyarago/ui-pro. Not part of the public API: it can change in any minor release.
 // It re-exports the helpers the component definitions are built from, so a plugin does not copy them.
-export { cx, pick, INPUT_ATTRS, DZ, dzp, dzf, dzb, ddRef, icon, fmt } from './core/components.js';
+export { cx, cssUrl, pick, INPUT_ATTRS, DZ, dzp, dzf, dzb, ddRef, icon, fmt } from './core/components.js';
 export { trap, life } from './core/dialog.js';
 export { rove, tabIdx, listKeys, openKeys, focusIn, toTrigger, trigger, calKeys, dateKey } from './core/keys.js';
 export { rules } from './core/components4.js';

package/src/styles/components.css

@@ -13,7 +13,7 @@
 .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)}
+.zg-hatch{background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--zg-text-1) 22%,transparent) 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}
@@ -107,7 +107,7 @@
 .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__track{height:8px;border-radius:999px;overflow:hidden;background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--zg-text-1) 22%,transparent) 0 1.5px,transparent 1.5px 6px),color-mix(in oklch,var(--zg-text-1) 6%,transparent)}
 .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)}

package/types/internal.d.ts

@@ -28,3 +28,5 @@ export function defineMessages(component: string, messages: Record<string, Recor
 export function registerComponents(defs: Record<string, import('./core').ComponentDefinition>, options?: { override?: boolean }): Record<string, import('./core').ComponentDefinition>;
 export const components: Record<string, import('./core').ComponentDefinition>;
 export const BOOL_PROPS: Set<string>;
+/** Quoted CSS url() for background-image values. */
+export function cssUrl(url: string): string;