@manzanohq/components 0.1.1

package/cdn/internal/slot.d.ts

@@ -0,0 +1,30 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * HasSlotController — watches slot content via slotchange events and triggers updates
+ * when slot content changes. Useful for conditionally rendering wrapper elements.
+ *
+ * Usage:
+ * ```ts
+ * private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');
+ *
+ * render() {
+ *   const hasPrefix = this.hasSlotController.test('prefix');
+ *   return html`
+ *     ${hasPrefix ? html`<span part="prefix"><slot name="prefix"></slot></span>` : ''}
+ *   `;
+ * }
+ * ```
+ */
+export declare class HasSlotController implements ReactiveController {
+    private host;
+    private observer;
+    constructor(host: ReactiveControllerHost & Element, ..._slotNames: string[]);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /** Test whether a named slot has content */
+    test(slotName: string): boolean;
+    private hasDefaultSlotContent;
+    private hasNamedSlotContent;
+    private handleMutation;
+}
+//# sourceMappingURL=slot.d.ts.map

package/cdn/internal/slot.js

@@ -0,0 +1,2 @@
+import{a}from"../chunks/chunk.N7WYNIN3.js";import"../chunks/chunk.MGICPQBB.js";export{a as HasSlotController};
+//# sourceMappingURL=slot.js.map

package/cdn/internal/slot.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/cdn/internal/string.d.ts

@@ -0,0 +1,5 @@
+/** Convert a string to kebab-case */
+export declare function toKebabCase(str: string): string;
+/** Convert kebab-case to PascalCase */
+export declare function toPascalCase(str: string): string;
+//# sourceMappingURL=string.d.ts.map

package/cdn/internal/string.js

@@ -0,0 +1,2 @@
+import"../chunks/chunk.MGICPQBB.js";function r(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_]+/g,"-").toLowerCase()}function s(e){return e.split("-").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join("")}export{r as toKebabCase,s as toPascalCase};
+//# sourceMappingURL=string.js.map

package/cdn/internal/string.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/string.ts"],
+  "sourcesContent": ["/** Convert a string to kebab-case */\nexport function toKebabCase(str: string): string {\n  return str\n    .replace(/([a-z])([A-Z])/g, '$1-$2')\n    .replace(/[\\s_]+/g, '-')\n    .toLowerCase();\n}\n\n/** Convert kebab-case to PascalCase */\nexport function toPascalCase(str: string): string {\n  return str\n    .split('-')\n    .map(part => part.charAt(0).toUpperCase() + part.slice(1))\n    .join('');\n}\n"],
+  "mappings": "oCACO,SAASA,EAAYC,EAAqB,CAC/C,OAAOA,EACJ,QAAQ,kBAAmB,OAAO,EAClC,QAAQ,UAAW,GAAG,EACtB,YAAY,CACjB,CAGO,SAASC,EAAaD,EAAqB,CAChD,OAAOA,EACJ,MAAM,GAAG,EACT,IAAIE,GAAQA,EAAK,OAAO,CAAC,EAAE,YAAY,EAAIA,EAAK,MAAM,CAAC,CAAC,EACxD,KAAK,EAAE,CACZ",
+  "names": ["toKebabCase", "str", "toPascalCase", "part"]
+}

package/cdn/internal/tabbable.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Get all tabbable elements within a container, including those inside shadow DOMs.
+ */
+export declare function getTabbableElements(root: HTMLElement | ShadowRoot): HTMLElement[];
+//# sourceMappingURL=tabbable.d.ts.map

package/cdn/internal/tabbable.js

@@ -0,0 +1,2 @@
+import{a}from"../chunks/chunk.Y3IAQ67N.js";import"../chunks/chunk.MGICPQBB.js";export{a as getTabbableElements};
+//# sourceMappingURL=tabbable.js.map

package/cdn/internal/tabbable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/cdn/internal/watch.d.ts

@@ -0,0 +1,19 @@
+import type { LitElement } from 'lit';
+interface WatchOptions {
+    /** Wait until first update has completed before watching */
+    waitUntilFirstUpdate?: boolean;
+}
+/**
+ * Decorator that watches a reactive property and calls a handler when it changes.
+ *
+ * Usage:
+ * ```ts
+ * @watch('value')
+ * handleValueChange(oldValue: string, newValue: string) {
+ *   console.log('value changed from', oldValue, 'to', newValue);
+ * }
+ * ```
+ */
+export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: PropertyKey) => void;
+export {};
+//# sourceMappingURL=watch.d.ts.map

package/cdn/internal/watch.js

@@ -0,0 +1,2 @@
+import{a}from"../chunks/chunk.725K2GLP.js";import"../chunks/chunk.MGICPQBB.js";export{a as watch};
+//# sourceMappingURL=watch.js.map

package/cdn/internal/watch.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/cdn/manzano-autoloader.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=manzano-autoloader.d.ts.map

package/cdn/manzano-autoloader.js

@@ -0,0 +1,2 @@
+import{b as s}from"./chunks/chunk.6BC2LGKU.js";import"./chunks/chunk.MGICPQBB.js";var d=new MutationObserver(e=>{for(let t of e)for(let o of t.addedNodes)o instanceof HTMLElement&&c(o)}),r=new Set;function c(e){e.tagName?.startsWith("MZ-")&&a(e.tagName.toLowerCase());let t=e.querySelectorAll(":not(:defined)");for(let o of t){let n=o.tagName.toLowerCase();n.startsWith("mz-")&&a(n)}}function a(e){if(customElements.get(e)||r.has(e))return;r.add(e);let t=e.replace(/^mz-/,""),n=`${s()}/components/${t}/${t}.js`;import(n).catch(i=>{console.error(`Manzano: Failed to auto-load "${e}" from ${n}`,i)})}c(document.body);d.observe(document.body,{subtree:!0,childList:!0});
+//# sourceMappingURL=manzano-autoloader.js.map

package/cdn/manzano-autoloader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/manzano-autoloader.ts"],
+  "sourcesContent": ["import { getBasePath } from './utilities/base-path.js';\n\nconst observer = new MutationObserver(mutations => {\n  for (const mutation of mutations) {\n    for (const node of mutation.addedNodes) {\n      if (node instanceof HTMLElement) {\n        discoverElements(node);\n      }\n    }\n  }\n});\n\nconst loading = new Set<string>();\n\nfunction discoverElements(root: HTMLElement): void {\n  // Check the root itself\n  if (root.tagName?.startsWith('MZ-')) {\n    registerIfNeeded(root.tagName.toLowerCase());\n  }\n\n  // Check all descendants matching mz-* that are not yet defined\n  const undefinedElements = root.querySelectorAll(':not(:defined)');\n  for (const el of undefinedElements) {\n    const tagName = el.tagName.toLowerCase();\n    if (tagName.startsWith('mz-')) {\n      registerIfNeeded(tagName);\n    }\n  }\n}\n\nfunction registerIfNeeded(tagName: string): void {\n  if (customElements.get(tagName) || loading.has(tagName)) return;\n\n  loading.add(tagName);\n\n  // mz-foo-bar \u2192 foo-bar \u2192 components/foo-bar/foo-bar.js\n  const componentName = tagName.replace(/^mz-/, '');\n  const basePath = getBasePath();\n  const url = `${basePath}/components/${componentName}/${componentName}.js`;\n\n  import(/* @vite-ignore */ url).catch(err => {\n    console.error(`Manzano: Failed to auto-load \"${tagName}\" from ${url}`, err);\n  });\n}\n\n// Scan existing DOM\ndiscoverElements(document.body);\n\n// Watch for new elements\nobserver.observe(document.body, {\n  subtree: true,\n  childList: true\n});\n\nexport {};\n"],
+  "mappings": "kFAEA,IAAMA,EAAW,IAAI,iBAAiBC,GAAa,CACjD,QAAWC,KAAYD,EACrB,QAAWE,KAAQD,EAAS,WACtBC,aAAgB,aAClBC,EAAiBD,CAAI,CAI7B,CAAC,EAEKE,EAAU,IAAI,IAEpB,SAASD,EAAiBE,EAAyB,CAE7CA,EAAK,SAAS,WAAW,KAAK,GAChCC,EAAiBD,EAAK,QAAQ,YAAY,CAAC,EAI7C,IAAME,EAAoBF,EAAK,iBAAiB,gBAAgB,EAChE,QAAWG,KAAMD,EAAmB,CAClC,IAAME,EAAUD,EAAG,QAAQ,YAAY,EACnCC,EAAQ,WAAW,KAAK,GAC1BH,EAAiBG,CAAO,CAE5B,CACF,CAEA,SAASH,EAAiBG,EAAuB,CAC/C,GAAI,eAAe,IAAIA,CAAO,GAAKL,EAAQ,IAAIK,CAAO,EAAG,OAEzDL,EAAQ,IAAIK,CAAO,EAGnB,IAAMC,EAAgBD,EAAQ,QAAQ,OAAQ,EAAE,EAE1CE,EAAM,GADKC,EAAY,CACN,eAAeF,CAAa,IAAIA,CAAa,MAEpE,OAA0BC,GAAK,MAAME,GAAO,CAC1C,QAAQ,MAAM,iCAAiCJ,CAAO,UAAUE,CAAG,GAAIE,CAAG,CAC5E,CAAC,CACH,CAGAV,EAAiB,SAAS,IAAI,EAG9BJ,EAAS,QAAQ,SAAS,KAAM,CAC9B,QAAS,GACT,UAAW,EACb,CAAC",
+  "names": ["observer", "mutations", "mutation", "node", "discoverElements", "loading", "root", "registerIfNeeded", "undefinedElements", "el", "tagName", "componentName", "url", "getBasePath", "err"]
+}

package/cdn/manzano.d.ts

@@ -0,0 +1,32 @@
+export * from './components/alert/alert.js';
+export * from './components/avatar/avatar.js';
+export * from './components/badge/badge.js';
+export * from './components/button/button.js';
+export * from './components/button-group/button-group.js';
+export * from './components/card/card.js';
+export * from './components/checkbox/checkbox.js';
+export * from './components/dialog/dialog.js';
+export * from './components/divider/divider.js';
+export * from './components/drawer/drawer.js';
+export * from './components/dropdown/dropdown.js';
+export * from './components/icon/icon.js';
+export * from './components/input/input.js';
+export * from './components/kbd/kbd.js';
+export * from './components/option/option.js';
+export * from './components/popover/popover.js';
+export * from './components/progress/progress.js';
+export * from './components/radio/radio.js';
+export * from './components/radio-group/radio-group.js';
+export * from './components/select/select.js';
+export * from './components/skeleton/skeleton.js';
+export * from './components/spinner/spinner.js';
+export * from './components/switch/switch.js';
+export * from './components/tag/tag.js';
+export * from './components/tooltip/tooltip.js';
+export * from './components/textarea/textarea.js';
+export * from './components/visually-hidden/visually-hidden.js';
+export { setBasePath, getBasePath } from './utilities/base-path.js';
+export { registerIconLibrary, unregisterIconLibrary } from './utilities/icon-library.js';
+export { setAnimation, getAnimation, setDefaultAnimation } from './utilities/animation-registry.js';
+export { LocalizeController, registerTranslation } from './utilities/localize.js';
+//# sourceMappingURL=manzano.d.ts.map

package/cdn/manzano.js

@@ -0,0 +1,2 @@
+import"./chunks/chunk.7EZS2TIJ.js";import"./chunks/chunk.6QDUCCKW.js";import{a as w}from"./chunks/chunk.XLMHAY3V.js";import"./chunks/chunk.BZRM77L2.js";import"./chunks/chunk.XQTVKGGU.js";import{a as F}from"./chunks/chunk.JTFPZTPO.js";import"./chunks/chunk.BDG7K33H.js";import"./chunks/chunk.MAKBAUD2.js";import{a as q}from"./chunks/chunk.BYLGIDI7.js";import"./chunks/chunk.MDUCOVPL.js";import"./chunks/chunk.4MAZNWDD.js";import{a as v}from"./chunks/chunk.IQQUD3EW.js";import"./chunks/chunk.T2POSQDH.js";import{a as E}from"./chunks/chunk.HDWHKKV4.js";import"./chunks/chunk.IAGO52DG.js";import"./chunks/chunk.PEPPQAOV.js";import"./chunks/chunk.WVHNPBIP.js";import{a as k}from"./chunks/chunk.DIWGN6GE.js";import"./chunks/chunk.ERIJ4HHK.js";import"./chunks/chunk.RI5JOSHL.js";import"./chunks/chunk.LJC3T3WE.js";import"./chunks/chunk.HIKU27TF.js";import{a as T}from"./chunks/chunk.IURFBOHL.js";import"./chunks/chunk.ADCPZR2U.js";import"./chunks/chunk.PUWPRABY.js";import{a as d}from"./chunks/chunk.6XXXK74B.js";import"./chunks/chunk.SVPBJBTZ.js";import{a as j}from"./chunks/chunk.VNOKMWLO.js";import"./chunks/chunk.4XEZ5QSS.js";import"./chunks/chunk.I3YGRHVZ.js";import{a as z}from"./chunks/chunk.UTXZ7YUF.js";import"./chunks/chunk.V5EOP3IC.js";import"./chunks/chunk.5J44JMQV.js";import{a as C}from"./chunks/chunk.VKUFNHZY.js";import"./chunks/chunk.2N73PDHB.js";import{a as D}from"./chunks/chunk.RXUBUHUR.js";import"./chunks/chunk.GHDXLJAF.js";import"./chunks/chunk.KT4O43FW.js";import"./chunks/chunk.CG4IAPSN.js";import{a as I}from"./chunks/chunk.6JU236RI.js";import"./chunks/chunk.GKLFWJ5I.js";import"./chunks/chunk.CFWUYZMP.js";import"./chunks/chunk.M4DRAEFR.js";import{a as P}from"./chunks/chunk.JQAEG5HG.js";import"./chunks/chunk.MMNYE73K.js";import"./chunks/chunk.2UAEMVLU.js";import"./chunks/chunk.XW4SOVO7.js";import{a as y}from"./chunks/chunk.ZI7YA6QO.js";import"./chunks/chunk.VNNJR2UW.js";import"./chunks/chunk.OP7MDGOF.js";import{a as B}from"./chunks/chunk.OXN32QWL.js";import"./chunks/chunk.DHMDLXT7.js";import"./chunks/chunk.LLSCGAP7.js";import{a as b}from"./chunks/chunk.EN5GHIZU.js";import"./chunks/chunk.GJANHV4C.js";import"./chunks/chunk.IX7LLJQN.js";import{a as h}from"./chunks/chunk.SCTHKVML.js";import"./chunks/chunk.XC7WTGRX.js";import{a as u}from"./chunks/chunk.BUUA7AGF.js";import"./chunks/chunk.IDI5QQJV.js";import"./chunks/chunk.NCAAHSZM.js";import"./chunks/chunk.XIMHI576.js";import{a as L}from"./chunks/chunk.UEG423ZW.js";import"./chunks/chunk.ZI3BHN26.js";import"./chunks/chunk.7BVWDYJP.js";import{a as A}from"./chunks/chunk.GUHR6EZY.js";import"./chunks/chunk.P5EX7XYU.js";import"./chunks/chunk.BTBWAH3D.js";import"./chunks/chunk.VFW2PHO4.js";import{a as g}from"./chunks/chunk.DN5XKN7W.js";import"./chunks/chunk.CZIBGUF4.js";import"./chunks/chunk.LMGASQQU.js";import{a as s}from"./chunks/chunk.NAKSPQZK.js";import"./chunks/chunk.UQ2AJSXG.js";import{a as c}from"./chunks/chunk.A43MPSEY.js";import{a as l}from"./chunks/chunk.5DIMFNYE.js";import"./chunks/chunk.KHFMYWK7.js";import"./chunks/chunk.CYUGAT7M.js";import"./chunks/chunk.YVOT5EWM.js";import"./chunks/chunk.Q4JHOT26.js";import"./chunks/chunk.XJ4TAQZ2.js";import"./chunks/chunk.56BXWGR3.js";import{a as m,b as f,c as p}from"./chunks/chunk.GX7DY53T.js";import{a as x,c as a}from"./chunks/chunk.SUD5HFGV.js";import"./chunks/chunk.BFGS3UP4.js";import{a as n}from"./chunks/chunk.E4DBQ75N.js";import{a as i}from"./chunks/chunk.J37YLNQO.js";import"./chunks/chunk.EL3BQWEZ.js";import"./chunks/chunk.3JBHP47A.js";import{a as e,b as t}from"./chunks/chunk.ZET76ZDM.js";import"./chunks/chunk.YJQBIP5J.js";import"./chunks/chunk.O6DGTOVN.js";import"./chunks/chunk.3HBRHIFP.js";import"./chunks/chunk.N7WYNIN3.js";import"./chunks/chunk.Y3IAQ67N.js";import"./chunks/chunk.725K2GLP.js";import"./chunks/chunk.KUTEZIT4.js";import{a as r,b as o}from"./chunks/chunk.6BC2LGKU.js";import"./chunks/chunk.OJRE6F6M.js";import"./chunks/chunk.4Z7MJZFY.js";import"./chunks/chunk.JWKG2VH6.js";import"./chunks/chunk.SZ34NZMW.js";import"./chunks/chunk.NNH44ORV.js";import"./chunks/chunk.MGICPQBB.js";export{a as LocalizeController,n as MzAlert,s as MzAvatar,g as MzBadge,c as MzButton,A as MzButtonGroup,L as MzCard,b as MzCheckbox,h as MzDialog,u as MzDivider,y as MzDrawer,B as MzDropdown,i as MzIcon,I as MzInput,P as MzKbd,z as MzOption,C as MzPopover,D as MzProgress,T as MzRadio,d as MzRadioGroup,j as MzSelect,k as MzSkeleton,l as MzSpinner,q as MzSwitch,v as MzTag,E as MzTextarea,w as MzTooltip,F as MzVisuallyHidden,p as getAnimation,o as getBasePath,e as registerIconLibrary,x as registerTranslation,f as setAnimation,r as setBasePath,m as setDefaultAnimation,t as unregisterIconLibrary};
+//# sourceMappingURL=manzano.js.map

package/cdn/manzano.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/cdn/styles/component.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Base styles applied to all Manzano components.
+ * Includes box-sizing reset and font inheritance.
+ */
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=component.styles.d.ts.map

package/cdn/styles/component.styles.js

@@ -0,0 +1,2 @@
+import{a}from"../chunks/chunk.KUTEZIT4.js";import"../chunks/chunk.NNH44ORV.js";import"../chunks/chunk.MGICPQBB.js";export{a as default};
+//# sourceMappingURL=component.styles.js.map

package/cdn/styles/component.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/cdn/styles/form-control.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared form control styles for input, textarea, select, etc.
+ */
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=form-control.styles.d.ts.map

package/cdn/styles/form-control.styles.js

@@ -0,0 +1,2 @@
+import{a}from"../chunks/chunk.XJ4TAQZ2.js";import"../chunks/chunk.NNH44ORV.js";import"../chunks/chunk.MGICPQBB.js";export{a as default};
+//# sourceMappingURL=form-control.styles.js.map

package/cdn/styles/form-control.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/cdn/themes/manzano.css

@@ -0,0 +1,328 @@
+/*
+ * Manzano Design Tokens
+ * Single-file theme with light/dark modes via [data-theme] attribute.
+ * Auto-detects system preference via prefers-color-scheme.
+ *
+ * Typography: Plus Jakarta Sans — a geometric-humanist sans-serif with
+ * warmth and character. Load via Google Fonts, Fontsource, or self-host.
+ * Falls back to system fonts if unavailable.
+ */
+
+/* =============================================
+   PRIMITIVE TOKENS (raw values)
+   ============================================= */
+
+:root, :host {
+  /* --- Color Primitives: Blue (warm ink — confident but not electric) --- */
+  --mz-color-blue-50: #f4f6fb;
+  --mz-color-blue-100: #e7ecf6;
+  --mz-color-blue-200: #d0daee;
+  --mz-color-blue-300: #aec0e2;
+  --mz-color-blue-400: #839ed2;
+  --mz-color-blue-500: #5f7cbd;
+  --mz-color-blue-600: #4260a8;
+  --mz-color-blue-700: #374f8d;
+  --mz-color-blue-800: #304475;
+  --mz-color-blue-900: #2c3c62;
+  --mz-color-blue-950: #1c253e;
+
+  /* --- Color Primitives: Gray (warm neutral — "sandstone") --- */
+  --mz-color-gray-50: #faf9f7;
+  --mz-color-gray-100: #f4f2ef;
+  --mz-color-gray-200: #e8e5e0;
+  --mz-color-gray-300: #d5d1cb;
+  --mz-color-gray-400: #a8a29b;
+  --mz-color-gray-500: #79726b;
+  --mz-color-gray-600: #58524b;
+  --mz-color-gray-700: #433d37;
+  --mz-color-gray-800: #2c2722;
+  --mz-color-gray-900: #1c1915;
+  --mz-color-gray-950: #0e0c09;
+
+  /* --- Color Primitives: Red (warm clay/terracotta — not fire truck) --- */
+  --mz-color-red-50: #fdf5f3;
+  --mz-color-red-100: #fae8e5;
+  --mz-color-red-200: #f6d0ca;
+  --mz-color-red-300: #efb0a3;
+  --mz-color-red-400: #e48672;
+  --mz-color-red-500: #d56449;
+  --mz-color-red-600: #c04b34;
+  --mz-color-red-700: #a03e2b;
+  --mz-color-red-800: #863628;
+  --mz-color-red-900: #703226;
+  --mz-color-red-950: #3c1812;
+
+  /* --- Color Primitives: Green (forest/sage — not traffic light) --- */
+  --mz-color-green-50: #f2faf5;
+  --mz-color-green-100: #e0f3e8;
+  --mz-color-green-200: #c3e6d1;
+  --mz-color-green-300: #97d4b1;
+  --mz-color-green-400: #63bc8a;
+  --mz-color-green-500: #3ea26b;
+  --mz-color-green-600: #2d8556;
+  --mz-color-green-700: #266b45;
+  --mz-color-green-800: #225539;
+  --mz-color-green-900: #1e4630;
+  --mz-color-green-950: #0f271a;
+
+  /* --- Color Primitives: Amber (warm honey — not construction sign) --- */
+  --mz-color-amber-50: #fdfaf0;
+  --mz-color-amber-100: #fbf1d2;
+  --mz-color-amber-200: #f5e0a2;
+  --mz-color-amber-300: #eecb6a;
+  --mz-color-amber-400: #e5b23c;
+  --mz-color-amber-500: #d59724;
+  --mz-color-amber-600: #b87918;
+  --mz-color-amber-700: #985c15;
+  --mz-color-amber-800: #7e4a19;
+  --mz-color-amber-900: #693f1a;
+  --mz-color-amber-950: #3c200b;
+
+  /* --- Typography --- */
+  --mz-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --mz-font-mono: 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+
+  --mz-font-size-scale: 1;
+  --mz-font-size-2xs: calc(0.625rem * var(--mz-font-size-scale));
+  --mz-font-size-xs: calc(0.75rem * var(--mz-font-size-scale));
+  --mz-font-size-sm: calc(0.875rem * var(--mz-font-size-scale));
+  --mz-font-size-md: calc(1rem * var(--mz-font-size-scale));
+  --mz-font-size-lg: calc(1.125rem * var(--mz-font-size-scale));
+  --mz-font-size-xl: calc(1.25rem * var(--mz-font-size-scale));
+  --mz-font-size-2xl: calc(1.5rem * var(--mz-font-size-scale));
+  --mz-font-size-3xl: calc(1.875rem * var(--mz-font-size-scale));
+
+  --mz-font-weight-normal: 400;
+  --mz-font-weight-medium: 500;
+  --mz-font-weight-semibold: 600;
+  --mz-font-weight-bold: 700;
+
+  --mz-line-height-dense: 1.25;
+  --mz-line-height-normal: 1.5;
+  --mz-line-height-loose: 1.75;
+
+  /* --- Spacing (t-shirt scale with multiplier) --- */
+  --mz-space-scale: 1;
+  --mz-space-3xs: calc(0.125rem * var(--mz-space-scale));
+  --mz-space-2xs: calc(0.25rem * var(--mz-space-scale));
+  --mz-space-xs: calc(0.5rem * var(--mz-space-scale));
+  --mz-space-sm: calc(0.75rem * var(--mz-space-scale));
+  --mz-space-md: calc(1rem * var(--mz-space-scale));
+  --mz-space-lg: calc(1.25rem * var(--mz-space-scale));
+  --mz-space-xl: calc(1.5rem * var(--mz-space-scale));
+  --mz-space-2xl: calc(2rem * var(--mz-space-scale));
+  --mz-space-3xl: calc(3rem * var(--mz-space-scale));
+
+  /* --- Border radius (softer, committed opinion) --- */
+  --mz-radius-scale: 1;
+  --mz-radius-sm: calc(0.375rem * var(--mz-radius-scale));
+  --mz-radius-md: calc(0.5rem * var(--mz-radius-scale));
+  --mz-radius-lg: calc(0.75rem * var(--mz-radius-scale));
+  --mz-radius-xl: calc(1rem * var(--mz-radius-scale));
+  --mz-radius-pill: 9999px;
+  --mz-radius-circle: 50%;
+
+  /* --- Border width --- */
+  --mz-border-width-sm: 1px;
+  --mz-border-width-md: 2px;
+
+  /* --- Shadows (warm-tinted, natural light) --- */
+  --mz-shadow-xs: 0 1px 2px 0 rgb(28 25 21 / 0.06);
+  --mz-shadow-sm: 0 1px 3px 0 rgb(28 25 21 / 0.09), 0 1px 2px -1px rgb(28 25 21 / 0.07);
+  --mz-shadow-md: 0 4px 8px -2px rgb(28 25 21 / 0.1), 0 2px 4px -2px rgb(28 25 21 / 0.06);
+  --mz-shadow-lg: 0 12px 20px -4px rgb(28 25 21 / 0.12), 0 4px 8px -4px rgb(28 25 21 / 0.05);
+  --mz-shadow-xl: 0 24px 36px -8px rgb(28 25 21 / 0.14), 0 8px 16px -6px rgb(28 25 21 / 0.06);
+
+  /* --- Transitions --- */
+  --mz-transition-fast: 150ms;
+  --mz-transition-normal: 250ms;
+  --mz-transition-slow: 500ms;
+
+  /* --- Z-index --- */
+  --mz-z-dropdown: 700;
+  --mz-z-dialog: 800;
+  --mz-z-drawer: 800;
+  --mz-z-toast: 900;
+  --mz-z-tooltip: 1000;
+
+  /* --- Focus ring --- */
+  --mz-focus-ring-color: var(--mz-color-primary);
+  --mz-focus-ring-width: 3px;
+  --mz-focus-ring-offset: 1px;
+  --mz-focus-ring: var(--mz-focus-ring-width) solid var(--mz-focus-ring-color);
+
+  /* --- Input component tokens --- */
+  --mz-input-height-sm: 2.25rem;
+  --mz-input-height-md: 2.75rem;
+  --mz-input-height-lg: 3.25rem;
+  --mz-input-border-color: var(--mz-color-border);
+  --mz-input-border-radius: var(--mz-radius-md);
+  --mz-input-font-size-sm: var(--mz-font-size-sm);
+  --mz-input-font-size-md: var(--mz-font-size-md);
+  --mz-input-font-size-lg: var(--mz-font-size-lg);
+
+  /* --- Panel tokens --- */
+  --mz-panel-border-width: var(--mz-border-width-sm);
+  --mz-panel-border-radius: var(--mz-radius-lg);
+  --mz-panel-border-color: var(--mz-color-border);
+}
+
+/* =============================================
+   SEMANTIC TOKENS: LIGHT (default)
+   ============================================= */
+
+:root, :host, [data-theme='light'] {
+  --mz-color-primary: var(--mz-color-blue-600);
+  --mz-color-primary-hover: var(--mz-color-blue-700);
+  --mz-color-primary-active: var(--mz-color-blue-800);
+  --mz-color-on-primary: #ffffff;
+
+  --mz-color-danger: var(--mz-color-red-600);
+  --mz-color-danger-hover: var(--mz-color-red-700);
+  --mz-color-danger-active: var(--mz-color-red-800);
+  --mz-color-on-danger: #ffffff;
+
+  --mz-color-success: var(--mz-color-green-600);
+  --mz-color-success-hover: var(--mz-color-green-700);
+  --mz-color-success-active: var(--mz-color-green-800);
+  --mz-color-on-success: #ffffff;
+
+  --mz-color-warning: var(--mz-color-amber-500);
+  --mz-color-warning-hover: var(--mz-color-amber-600);
+  --mz-color-warning-active: var(--mz-color-amber-700);
+  --mz-color-on-warning: var(--mz-color-gray-950);
+
+  --mz-color-neutral: var(--mz-color-gray-700);
+  --mz-color-neutral-hover: var(--mz-color-gray-800);
+  --mz-color-neutral-active: var(--mz-color-gray-900);
+  --mz-color-on-neutral: #ffffff;
+
+  color-scheme: light;
+
+  --mz-color-surface: #ffffff;
+  --mz-color-surface-raised: var(--mz-color-gray-50);
+  --mz-color-surface-overlay: #ffffff;
+  --mz-color-text: var(--mz-color-gray-900);
+  --mz-color-text-secondary: var(--mz-color-gray-500);
+  --mz-color-text-disabled: var(--mz-color-gray-400);
+  --mz-color-border: var(--mz-color-gray-300);
+  --mz-color-border-hover: var(--mz-color-gray-400);
+  --mz-color-backdrop: rgb(28 25 21 / 0.4);
+}
+
+/* =============================================
+   SEMANTIC TOKENS: DARK (intentionally designed)
+   ============================================= */
+
+[data-theme='dark'] {
+  color-scheme: dark;
+
+  --mz-color-primary: var(--mz-color-blue-400);
+  --mz-color-primary-hover: var(--mz-color-blue-300);
+  --mz-color-primary-active: var(--mz-color-blue-200);
+  --mz-color-on-primary: var(--mz-color-blue-950);
+
+  --mz-color-danger: var(--mz-color-red-400);
+  --mz-color-danger-hover: var(--mz-color-red-300);
+  --mz-color-danger-active: var(--mz-color-red-200);
+  --mz-color-on-danger: var(--mz-color-red-950);
+
+  --mz-color-success: var(--mz-color-green-400);
+  --mz-color-success-hover: var(--mz-color-green-300);
+  --mz-color-success-active: var(--mz-color-green-200);
+  --mz-color-on-success: var(--mz-color-green-950);
+
+  --mz-color-warning: var(--mz-color-amber-400);
+  --mz-color-warning-hover: var(--mz-color-amber-300);
+  --mz-color-warning-active: var(--mz-color-amber-200);
+  --mz-color-on-warning: var(--mz-color-amber-950);
+
+  --mz-color-neutral: var(--mz-color-gray-400);
+  --mz-color-neutral-hover: var(--mz-color-gray-300);
+  --mz-color-neutral-active: var(--mz-color-gray-200);
+  --mz-color-on-neutral: var(--mz-color-gray-950);
+
+  --mz-color-surface: var(--mz-color-gray-900);
+  --mz-color-surface-raised: var(--mz-color-gray-800);
+  --mz-color-surface-overlay: var(--mz-color-gray-800);
+  --mz-color-text: var(--mz-color-gray-100);
+  --mz-color-text-secondary: var(--mz-color-gray-400);
+  --mz-color-text-disabled: var(--mz-color-gray-600);
+  --mz-color-border: var(--mz-color-gray-700);
+  --mz-color-border-hover: var(--mz-color-gray-600);
+  --mz-color-backdrop: rgb(0 0 0 / 0.6);
+
+  --mz-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.25);
+  --mz-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.25);
+  --mz-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.25);
+  --mz-shadow-lg: 0 12px 20px -4px rgb(0 0 0 / 0.35), 0 4px 8px -4px rgb(0 0 0 / 0.25);
+  --mz-shadow-xl: 0 24px 36px -8px rgb(0 0 0 / 0.4), 0 8px 16px -6px rgb(0 0 0 / 0.3);
+}
+
+/* Auto-detect system preference when no data-theme is set */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']),
+  :host:not([data-theme='light']) {
+    color-scheme: dark;
+
+    --mz-color-primary: var(--mz-color-blue-400);
+    --mz-color-primary-hover: var(--mz-color-blue-300);
+    --mz-color-primary-active: var(--mz-color-blue-200);
+    --mz-color-on-primary: var(--mz-color-blue-950);
+
+    --mz-color-danger: var(--mz-color-red-400);
+    --mz-color-danger-hover: var(--mz-color-red-300);
+    --mz-color-danger-active: var(--mz-color-red-200);
+    --mz-color-on-danger: var(--mz-color-red-950);
+
+    --mz-color-success: var(--mz-color-green-400);
+    --mz-color-success-hover: var(--mz-color-green-300);
+    --mz-color-success-active: var(--mz-color-green-200);
+    --mz-color-on-success: var(--mz-color-green-950);
+
+    --mz-color-warning: var(--mz-color-amber-400);
+    --mz-color-warning-hover: var(--mz-color-amber-300);
+    --mz-color-warning-active: var(--mz-color-amber-200);
+    --mz-color-on-warning: var(--mz-color-amber-950);
+
+    --mz-color-neutral: var(--mz-color-gray-400);
+    --mz-color-neutral-hover: var(--mz-color-gray-300);
+    --mz-color-neutral-active: var(--mz-color-gray-200);
+    --mz-color-on-neutral: var(--mz-color-gray-950);
+
+    --mz-color-surface: var(--mz-color-gray-900);
+    --mz-color-surface-raised: var(--mz-color-gray-800);
+    --mz-color-surface-overlay: var(--mz-color-gray-800);
+    --mz-color-text: var(--mz-color-gray-100);
+    --mz-color-text-secondary: var(--mz-color-gray-400);
+    --mz-color-text-disabled: var(--mz-color-gray-600);
+    --mz-color-border: var(--mz-color-gray-700);
+    --mz-color-border-hover: var(--mz-color-gray-600);
+    --mz-color-backdrop: rgb(0 0 0 / 0.6);
+
+    --mz-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.25);
+    --mz-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.25);
+    --mz-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.25);
+    --mz-shadow-lg: 0 12px 20px -4px rgb(0 0 0 / 0.35), 0 4px 8px -4px rgb(0 0 0 / 0.25);
+    --mz-shadow-xl: 0 24px 36px -8px rgb(0 0 0 / 0.4), 0 8px 16px -6px rgb(0 0 0 / 0.3);
+  }
+}
+
+/* =============================================
+   DENSITY PRESETS
+   ============================================= */
+
+[data-density='compact'] {
+  --mz-space-scale: 0.75;
+  --mz-font-size-scale: 0.9;
+}
+
+[data-density='default'] {
+  --mz-space-scale: 1;
+  --mz-font-size-scale: 1;
+}
+
+[data-density='comfortable'] {
+  --mz-space-scale: 1.25;
+  --mz-font-size-scale: 1.05;
+}