@cahyo-dimas/freeday 1.7.0

package/dist/freeday.tokens.css

@@ -0,0 +1,343 @@
+/* Freeday tokens — GENERATED by tokens/build.mjs. Do not edit by hand. */
+:root {
+  --azure-50: #eff4ff;
+  --azure-100: #dbe6fe;
+  --azure-200: #bdd2fd;
+  --azure-300: #90b3fb;
+  --azure-400: #5c8bf6;
+  --azure-500: #3467ec;
+  --azure-600: #2050d8;
+  --azure-700: #1c40b0;
+  --azure-800: #1c398c;
+  --azure-900: #1c336e;
+  --azure-950: #131e42;
+  --slate-0: #ffffff;
+  --slate-50: #f7f8fa;
+  --slate-100: #eef0f4;
+  --slate-200: #e0e3ea;
+  --slate-300: #cbd0da;
+  --slate-400: #99a1b3;
+  --slate-500: #6b7488;
+  --slate-600: #4d5568;
+  --slate-700: #3a4152;
+  --slate-800: #262b38;
+  --slate-900: #171b26;
+  --slate-950: #0e111a;
+  --sky-50: #eff6fd;
+  --sky-100: #d6e9fb;
+  --sky-200: #b0d4f6;
+  --sky-300: #7bbdef;
+  --sky-400: #47a1e6;
+  --sky-500: #1a86dc;
+  --sky-600: #0078d4;
+  --sky-700: #0061ac;
+  --sky-800: #004d88;
+  --sky-900: #003a67;
+  --red-100: #fee2e2;
+  --red-300: #fca5a5;
+  --red-400: #f87171;
+  --red-500: #ef4444;
+  --red-600: #dc2626;
+  --red-700: #b91c1c;
+  --amber-100: #fef3c7;
+  --amber-400: #fbbf24;
+  --amber-500: #f59e0b;
+  --amber-600: #d97706;
+  --amber-700: #b45309;
+  --amber-800: #92400e;
+  --green-100: #dcfce7;
+  --green-400: #4ade80;
+  --green-500: #22c55e;
+  --green-600: #16a34a;
+  --green-700: #15803d;
+  --green-800: #166534;
+  --blue-100: #dbeafe;
+  --blue-300: #93c5fd;
+  --blue-400: #60a5fa;
+  --blue-500: #3b82f6;
+  --blue-600: #2563eb;
+  --blue-700: #1d4ed8;
+  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
+  --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5625rem;
+  --text-3xl: 1.9375rem;
+  --text-4xl: 2.4375rem;
+  --text-5xl: 3.0625rem;
+  --leading-tight: 1.2;
+  --leading-snug: 1.35;
+  --leading-normal: 1.55;
+  --leading-loose: 1.75;
+  --tracking-tighter: -0.03em;
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.06em;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
+  --radius-xs: 3px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-full: 999px;
+  --shadow-1: 0 1px 2px rgba(16,14,30,.06);
+  --shadow-2: 0 2px 6px rgba(16,14,30,.07),0 1px 2px rgba(16,14,30,.05);
+  --shadow-3: 0 4px 16px -2px rgba(16,14,30,.14),0 1px 3px rgba(16,14,30,.10);
+  --shadow-4: 0 24px 48px -12px rgba(16,14,30,.26),0 2px 8px rgba(16,14,30,.10);
+  --shadow-lift: 0 1px 2px rgba(16,14,30,.05),0 16px 34px -14px rgba(16,14,30,.24);
+  --shadow-lift-hover: 0 2px 4px rgba(16,14,30,.06),0 30px 50px -16px rgba(16,14,30,.33);
+  --dur-fast: 120ms;
+  --dur-base: 180ms;
+  --dur-slow: 280ms;
+  --ease-standard: cubic-bezier(.2,0,0,1);
+  --ease-spring: cubic-bezier(.2,.8,.2,1);
+  --control-h: 2.5rem;
+  --control-box: 1.15rem;
+  --control-switch-w: 2.4rem;
+  --control-switch-h: 1.35rem;
+  --bw: 1px;
+  --color-primary: var(--azure-600);
+  --color-primary-hover: var(--azure-700);
+  --color-primary-active: var(--azure-800);
+  --color-on-primary: var(--slate-0);
+  --color-primary-soft: var(--azure-50);
+  --color-primary-border: var(--azure-100);
+  --color-accent: var(--sky-600);
+  --color-accent-hover: var(--sky-700);
+  --color-on-accent: var(--slate-0);
+  --color-on-danger: var(--slate-0);
+  --color-danger-btn: var(--red-600);
+  --color-surface: var(--slate-0);
+  --color-surface-2: var(--slate-50);
+  --color-surface-3: var(--slate-100);
+  --color-text: var(--slate-900);
+  --color-text-muted: var(--slate-600);
+  --color-text-subtle: var(--slate-500);
+  --color-on-brand: var(--slate-0);
+  --color-border: var(--slate-200);
+  --color-border-strong: var(--slate-300);
+  --color-border-muted: var(--slate-100);
+  --color-control-border: var(--slate-500);
+  --color-switch-thumb: var(--slate-0);
+  --color-shadow-inset: rgba(16,14,30,.06);
+  --color-inverse-surface: var(--slate-900);
+  --color-inverse-text: var(--slate-0);
+  --color-success: var(--green-600);
+  --color-success-soft: var(--green-100);
+  --color-warning: #c2740a;
+  --color-warning-soft: var(--amber-100);
+  --color-danger: var(--red-600);
+  --color-danger-soft: var(--red-100);
+  --color-info: var(--blue-600);
+  --color-info-soft: var(--blue-100);
+  --color-primary-strong: var(--azure-700);
+  --color-success-strong: var(--green-800);
+  --color-warning-strong: var(--amber-800);
+  --color-danger-strong: var(--red-700);
+  --color-info-strong: var(--blue-700);
+  --chart-1: #2a78d6;
+  --chart-2: #eb6834;
+  --chart-3: #1baf7a;
+  --chart-4: #eda100;
+  --chart-5: #e87ba4;
+  --chart-6: #008300;
+  --chart-7: #4a3aa7;
+  --chart-8: #e34948;
+  --chart-grid: var(--slate-200);
+  --chart-tick: var(--slate-400);
+  --focus-ring: var(--azure-600);
+  --focus-ring-width: 2px;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
+  --shadow-2: 0 2px 6px rgba(0,0,0,.45);
+  --shadow-3: 0 6px 20px -2px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5);
+  --shadow-4: 0 28px 56px -12px rgba(0,0,0,.72),0 2px 8px rgba(0,0,0,.5);
+  --shadow-lift: 0 1px 2px rgba(0,0,0,.5),0 18px 38px -14px rgba(0,0,0,.72);
+  --shadow-lift-hover: 0 3px 6px rgba(0,0,0,.55),0 32px 56px -16px rgba(0,0,0,.82);
+  --color-primary: var(--azure-500);
+  --color-primary-hover: var(--azure-400);
+  --color-primary-active: var(--azure-300);
+  --color-on-primary: var(--slate-0);
+  --color-primary-soft: rgba(32,80,216,.20);
+  --color-primary-border: rgba(92,139,246,.28);
+  --color-accent: var(--sky-400);
+  --color-accent-hover: var(--sky-300);
+  --color-on-accent: #06233f;
+  --color-on-danger: var(--slate-0);
+  --color-danger-btn: var(--red-600);
+  --color-surface: var(--slate-950);
+  --color-surface-2: var(--slate-900);
+  --color-surface-3: var(--slate-800);
+  --color-text: var(--slate-100);
+  --color-text-muted: var(--slate-400);
+  --color-text-subtle: var(--slate-500);
+  --color-on-brand: var(--slate-0);
+  --color-border: var(--slate-800);
+  --color-border-strong: var(--slate-700);
+  --color-border-muted: #1c2130;
+  --color-control-border: var(--slate-500);
+  --color-inverse-surface: var(--slate-100);
+  --color-inverse-text: var(--slate-900);
+  --color-success: var(--green-500);
+  --color-success-soft: rgba(34,197,94,.18);
+  --color-warning: var(--amber-500);
+  --color-warning-soft: rgba(234,179,8,.18);
+  --color-danger: var(--red-400);
+  --color-danger-soft: rgba(248,113,113,.18);
+  --color-info: var(--blue-400);
+  --color-info-soft: rgba(96,165,250,.18);
+  --color-primary-strong: var(--azure-300);
+  --color-success-strong: var(--green-400);
+  --color-warning-strong: var(--amber-400);
+  --color-danger-strong: var(--red-300);
+  --color-info-strong: var(--blue-300);
+  --chart-1: #3987e5;
+  --chart-2: #d95926;
+  --chart-3: #199e70;
+  --chart-4: #c98500;
+  --chart-5: #d55181;
+  --chart-6: #008300;
+  --chart-7: #9085e9;
+  --chart-8: #e66767;
+  --chart-grid: var(--slate-800);
+  --chart-tick: var(--slate-600);
+  --focus-ring: var(--azure-400);
+  }
+}
+:root[data-theme="dark"] {
+  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
+  --shadow-2: 0 2px 6px rgba(0,0,0,.45);
+  --shadow-3: 0 6px 20px -2px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5);
+  --shadow-4: 0 28px 56px -12px rgba(0,0,0,.72),0 2px 8px rgba(0,0,0,.5);
+  --shadow-lift: 0 1px 2px rgba(0,0,0,.5),0 18px 38px -14px rgba(0,0,0,.72);
+  --shadow-lift-hover: 0 3px 6px rgba(0,0,0,.55),0 32px 56px -16px rgba(0,0,0,.82);
+  --color-primary: var(--azure-500);
+  --color-primary-hover: var(--azure-400);
+  --color-primary-active: var(--azure-300);
+  --color-on-primary: var(--slate-0);
+  --color-primary-soft: rgba(32,80,216,.20);
+  --color-primary-border: rgba(92,139,246,.28);
+  --color-accent: var(--sky-400);
+  --color-accent-hover: var(--sky-300);
+  --color-on-accent: #06233f;
+  --color-on-danger: var(--slate-0);
+  --color-danger-btn: var(--red-600);
+  --color-surface: var(--slate-950);
+  --color-surface-2: var(--slate-900);
+  --color-surface-3: var(--slate-800);
+  --color-text: var(--slate-100);
+  --color-text-muted: var(--slate-400);
+  --color-text-subtle: var(--slate-500);
+  --color-on-brand: var(--slate-0);
+  --color-border: var(--slate-800);
+  --color-border-strong: var(--slate-700);
+  --color-border-muted: #1c2130;
+  --color-control-border: var(--slate-500);
+  --color-inverse-surface: var(--slate-100);
+  --color-inverse-text: var(--slate-900);
+  --color-success: var(--green-500);
+  --color-success-soft: rgba(34,197,94,.18);
+  --color-warning: var(--amber-500);
+  --color-warning-soft: rgba(234,179,8,.18);
+  --color-danger: var(--red-400);
+  --color-danger-soft: rgba(248,113,113,.18);
+  --color-info: var(--blue-400);
+  --color-info-soft: rgba(96,165,250,.18);
+  --color-primary-strong: var(--azure-300);
+  --color-success-strong: var(--green-400);
+  --color-warning-strong: var(--amber-400);
+  --color-danger-strong: var(--red-300);
+  --color-info-strong: var(--blue-300);
+  --chart-1: #3987e5;
+  --chart-2: #d95926;
+  --chart-3: #199e70;
+  --chart-4: #c98500;
+  --chart-5: #d55181;
+  --chart-6: #008300;
+  --chart-7: #9085e9;
+  --chart-8: #e66767;
+  --chart-grid: var(--slate-800);
+  --chart-tick: var(--slate-600);
+  --focus-ring: var(--azure-400);
+}
+:root[data-theme="light"] {
+  --shadow-1: 0 1px 2px rgba(16,14,30,.06);
+  --shadow-2: 0 2px 6px rgba(16,14,30,.07),0 1px 2px rgba(16,14,30,.05);
+  --shadow-3: 0 4px 16px -2px rgba(16,14,30,.14),0 1px 3px rgba(16,14,30,.10);
+  --shadow-4: 0 24px 48px -12px rgba(16,14,30,.26),0 2px 8px rgba(16,14,30,.10);
+  --shadow-lift: 0 1px 2px rgba(16,14,30,.05),0 16px 34px -14px rgba(16,14,30,.24);
+  --shadow-lift-hover: 0 2px 4px rgba(16,14,30,.06),0 30px 50px -16px rgba(16,14,30,.33);
+  --color-primary: var(--azure-600);
+  --color-primary-hover: var(--azure-700);
+  --color-primary-active: var(--azure-800);
+  --color-on-primary: var(--slate-0);
+  --color-primary-soft: var(--azure-50);
+  --color-primary-border: var(--azure-100);
+  --color-accent: var(--sky-600);
+  --color-accent-hover: var(--sky-700);
+  --color-on-accent: var(--slate-0);
+  --color-on-danger: var(--slate-0);
+  --color-danger-btn: var(--red-600);
+  --color-surface: var(--slate-0);
+  --color-surface-2: var(--slate-50);
+  --color-surface-3: var(--slate-100);
+  --color-text: var(--slate-900);
+  --color-text-muted: var(--slate-600);
+  --color-text-subtle: var(--slate-500);
+  --color-on-brand: var(--slate-0);
+  --color-border: var(--slate-200);
+  --color-border-strong: var(--slate-300);
+  --color-border-muted: var(--slate-100);
+  --color-control-border: var(--slate-500);
+  --color-inverse-surface: var(--slate-900);
+  --color-inverse-text: var(--slate-0);
+  --color-success: var(--green-600);
+  --color-success-soft: var(--green-100);
+  --color-warning: #c2740a;
+  --color-warning-soft: var(--amber-100);
+  --color-danger: var(--red-600);
+  --color-danger-soft: var(--red-100);
+  --color-info: var(--blue-600);
+  --color-info-soft: var(--blue-100);
+  --color-primary-strong: var(--azure-700);
+  --color-success-strong: var(--green-800);
+  --color-warning-strong: var(--amber-800);
+  --color-danger-strong: var(--red-700);
+  --color-info-strong: var(--blue-700);
+  --chart-1: #2a78d6;
+  --chart-2: #eb6834;
+  --chart-3: #1baf7a;
+  --chart-4: #eda100;
+  --chart-5: #e87ba4;
+  --chart-6: #008300;
+  --chart-7: #4a3aa7;
+  --chart-8: #e34948;
+  --chart-grid: var(--slate-200);
+  --chart-tick: var(--slate-400);
+  --focus-ring: var(--azure-600);
+}
+:root[data-density="compact"] {
+  --control-h: 2rem;
+}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@cahyo-dimas/freeday",
+  "version": "1.7.0",
+  "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": true,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cahyo-dimas/freeday-ui-kit.git"
+  },
+  "homepage": "https://cahyo-dimas.github.io/freeday-ui-kit/docs/",
+  "bugs": {
+    "url": "https://github.com/cahyo-dimas/freeday-ui-kit/issues"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "files": [
+    "dist",
+    "src",
+    "adapters",
+    "tokens/tokens.json",
+    "tokens/breakpoints.mjs",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": "./dist/freeday.js",
+    "./css": "./dist/freeday.bundle.css",
+    "./css/components": "./dist/freeday.css",
+    "./tokens": "./dist/freeday.tokens.css",
+    "./breakpoints": "./tokens/breakpoints.mjs",
+    "./enhancers/*": "./dist/freeday-*.js",
+    "./vue": {
+      "types": "./adapters/vue/index.d.ts",
+      "default": "./adapters/vue/index.js"
+    },
+    "./react": {
+      "types": "./adapters/react/index.d.ts",
+      "default": "./adapters/react/index.js"
+    },
+    "./blazor": "./adapters/blazor/freeday-blazor.js",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "vue": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "node tokens/build.mjs",
+    "test": "node --test",
+    "prepack": "node tokens/build.mjs",
+    "version": "node tokens/build.mjs && git add dist",
+    "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "typescript": "^7.0.2"
+  }
+}

package/src/base.css

@@ -0,0 +1,20 @@
+/* Freeday base layer — reset ringan + default via token */
+*, *::before, *::after { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; }
+body {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--color-text);
+  background: var(--color-surface);
+  -webkit-font-smoothing: antialiased;
+}
+h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tighter); line-height: var(--leading-snug); margin: 0; }
+a { color: var(--color-primary); }
+:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-width); border-radius: var(--radius-xs); }
+:where(button, input, select, textarea) { font: inherit; }
+.fdy-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
+}

package/src/components/accordion.css

@@ -0,0 +1,13 @@
+/* Freeday — Accordion (native <details>/<summary>, zero-JS) */
+.fdy-accordion{border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);}
+.fdy-accordion__item + .fdy-accordion__item{border-top:var(--bw) solid var(--color-border);}
+.fdy-accordion__item > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-weight:var(--weight-medium);color:var(--color-text);}
+.fdy-accordion__item > summary::-webkit-details-marker{display:none;}
+.fdy-accordion__item > summary::after{content:"";margin-left:auto;margin-top:-.15rem;flex:none;width:.5rem;height:.5rem;border-right:2px solid var(--color-text-subtle);border-bottom:2px solid var(--color-text-subtle);transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease-standard);}
+.fdy-accordion__item[open] > summary::after{transform:rotate(225deg);margin-top:.1rem;}
+.fdy-accordion__item > summary:hover{background:var(--color-surface-2);}
+.fdy-accordion__item > summary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
+.fdy-accordion__panel{padding:0 var(--space-4) var(--space-4);color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--leading-normal);}
+/* Content reveal on open (fade + rise). Native <details> can't animate its own height cross-
+ * browser without JS, so we animate the revealed panel instead — cheap, safe, reduced-motion gated. */
+@media (prefers-reduced-motion:no-preference){.fdy-accordion__item[open] > .fdy-accordion__panel{animation:fdy-combo-in var(--dur-base) var(--ease-standard);}}

package/src/components/alert.css

@@ -0,0 +1,18 @@
+/* Freeday — Alert (inline) */
+.fdy-alert{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:var(--bw) solid var(--color-border);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface-2);}
+.fdy-alert__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;margin-top:.05rem;}
+.fdy-alert__icon svg{width:100%;height:100%;}
+.fdy-alert__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);}
+.fdy-alert__title{font-weight:var(--weight-semibold);color:var(--color-text);}
+.fdy-alert__text{color:var(--color-text);line-height:var(--leading-normal);}
+.fdy-alert__close{flex:none;align-self:flex-start;border:0;background:transparent;color:var(--color-text-muted);cursor:pointer;font-size:var(--text-lg);line-height:1;padding:0 var(--space-1);border-radius:var(--radius-sm);}
+.fdy-alert__close:hover{color:var(--color-text);}
+.fdy-alert__close:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
+.fdy-alert--info{background:var(--color-info-soft);border-color:color-mix(in srgb,var(--color-info) 26%,transparent);}
+.fdy-alert--info .fdy-alert__title,.fdy-alert--info .fdy-alert__icon{color:var(--color-info-strong);}
+.fdy-alert--success{background:var(--color-success-soft);border-color:color-mix(in srgb,var(--color-success) 26%,transparent);}
+.fdy-alert--success .fdy-alert__title,.fdy-alert--success .fdy-alert__icon{color:var(--color-success-strong);}
+.fdy-alert--warning{background:var(--color-warning-soft);border-color:color-mix(in srgb,var(--color-warning) 26%,transparent);}
+.fdy-alert--warning .fdy-alert__title,.fdy-alert--warning .fdy-alert__icon{color:var(--color-warning-strong);}
+.fdy-alert--danger{background:var(--color-danger-soft);border-color:color-mix(in srgb,var(--color-danger) 26%,transparent);}
+.fdy-alert--danger .fdy-alert__title,.fdy-alert--danger .fdy-alert__icon{color:var(--color-danger-strong);}

package/src/components/app-shell.css

@@ -0,0 +1,88 @@
+/* Freeday — App Shell.
+ * Natural document scroll: the shell grows with content and the PAGE scrolls,
+ * while the sidebar and topbar are position:sticky so they stay in view. No
+ * fixed-height / internal-scroll trickery (that leaves a white gap if the host
+ * page can still scroll). Structure: .fdy-app > (.fdy-app__sidebar, .fdy-app__content
+ * > (.fdy-app__topbar, .fdy-app__main)). The __content wrapper gives the sticky
+ * topbar a tall containing block so it can travel — a bare grid cell can't. */
+.fdy-app{display:flex;align-items:stretch;min-height:100vh;background:var(--color-surface-2);}
+.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:15.5rem;box-sizing:border-box;background:var(--color-surface);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
+.fdy-app__content{flex:1;min-width:0;display:flex;flex-direction:column;}
+/* Brand is a fixed header — same height as the topbar so they align, and only
+ * the nav below it scrolls. Bare text (no children) renders as one bold
+ * display line via the rules on .fdy-app__brand itself. For a mark + two-line
+ * title/subtitle, add structured children mirroring .fdy-appbar__brand:
+ * <div class="fdy-app__brand"><svg class="fdy-app__brand-mark">…</svg>
+ *   <div class="fdy-app__brand-text">
+ *     <span class="fdy-app__brand-title">…</span>
+ *     <span class="fdy-app__brand-subtitle">…</span>
+ *   </div></div> */
+.fdy-app__brand{flex:none;display:flex;align-items:center;gap:var(--space-2);box-sizing:border-box;min-height:var(--space-16);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--color-text);text-decoration:none;padding:0 var(--space-4);border-bottom:var(--bw) solid var(--color-border);}
+.fdy-app__brand-mark{flex:none;width:1.5rem;height:1.5rem;}
+.fdy-app__brand-mark svg{display:block;width:100%;height:100%;}
+.fdy-app__brand-text{display:flex;flex-direction:column;min-width:0;}
+.fdy-app__brand-title{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-app__brand-subtitle{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-3) var(--space-6);}
+.fdy-nav__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);}
+.fdy-nav__item:hover{background:var(--color-surface-2);color:var(--color-text);}
+/* Active indicator stays in the primary ramp so it never clashes with a re-themed accent. */
+.fdy-nav__item[aria-current="page"]{background:var(--color-primary-soft);color:var(--color-primary-strong);font-weight:var(--weight-semibold);}
+.fdy-nav__item:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
+/* Sidebar-menu extras: per-node icon (leading), count badge (trailing), and a
+ * text label that truncates. Any of these are optional — a bare text item works. */
+.fdy-nav__icon{flex:none;display:inline-flex;width:1.15rem;height:1.15rem;}
+.fdy-nav__icon svg{display:block;width:100%;height:100%;}
+.fdy-nav__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-nav__badge{flex:none;margin-left:auto;min-width:1.25rem;height:1.25rem;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;border-radius:var(--radius-full);background:var(--color-surface-3);color:var(--color-text-muted);}
+.fdy-nav__item[aria-current="page"] .fdy-nav__badge{background:var(--color-primary);color:var(--color-on-primary);}
+/* Collapsible section: <details class="fdy-nav__group"><summary class="fdy-nav__grouplabel"> */
+.fdy-nav__group{margin:0;}
+.fdy-nav__group + .fdy-nav__group,.fdy-nav__item + .fdy-nav__group{border-top:var(--bw) solid var(--color-border-muted);margin-top:var(--space-1);padding-top:var(--space-1);}
+.fdy-nav__grouplabel{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-3) var(--space-1);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:var(--weight-semibold);color:var(--color-text-subtle);}
+.fdy-nav__grouplabel::-webkit-details-marker{display:none;}
+.fdy-nav__grouplabel:hover{color:var(--color-text-muted);}
+.fdy-nav__grouplabel:focus-visible{outline:none;border-radius:var(--radius-sm);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
+.fdy-nav__grouplabel::after{content:"";flex:none;width:.45rem;height:.45rem;margin-right:var(--space-1);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease-standard);opacity:.7;}
+.fdy-nav__group[open] > .fdy-nav__grouplabel::after{transform:rotate(45deg);}
+/* --flat: calmer, non-collapsible grouped nav — hide the caret, drop the
+ * inter-group divider and the collapse cursor. Works on native <details> groups
+ * (caret just hidden) and on static <div>/<p> groups (never collapsible). */
+.fdy-nav--flat .fdy-nav__grouplabel::after{display:none;}
+.fdy-nav--flat .fdy-nav__group + .fdy-nav__group,.fdy-nav--flat .fdy-nav__item + .fdy-nav__group{border-top:0;}
+.fdy-nav--flat .fdy-nav__grouplabel{cursor:default;}
+/* Collapsible item (nested tree): <details class="fdy-nav__tree"><summary class="fdy-nav__item"> */
+.fdy-nav__tree{margin:0;}
+.fdy-nav__tree > summary{list-style:none;}
+.fdy-nav__tree > summary::-webkit-details-marker{display:none;}
+.fdy-nav__tree > summary .fdy-nav__caret{flex:none;margin-left:auto;width:.4rem;height:.4rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease-standard);opacity:.6;}
+.fdy-nav__tree[open] > summary .fdy-nav__caret{transform:rotate(45deg);}
+.fdy-nav__sub{display:flex;flex-direction:column;gap:2px;padding-left:calc(var(--space-3) + 1.15rem);margin-top:2px;}
+/* Collapse toggle (hamburger) — sits in the topbar; collapses the sidebar. */
+.fdy-app__navtoggle{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;flex:none;padding:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);}
+.fdy-app__navtoggle:hover{background:var(--color-surface-2);color:var(--color-text);}
+.fdy-app__navtoggle:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-primary);}
+.fdy-app__navtoggle svg{display:block;width:1.25rem;height:1.25rem;}
+/* Desktop collapse: animate width -> 0 (content clips via overflow:hidden; the content area
+ * flexes in to fill). Not display:none, so the collapse/expand slides instead of snapping. */
+@media (min-width:721px){.fdy-app--nav-collapsed .fdy-app__sidebar{width:0;border-right-width:0;}}
+.fdy-app__topbar{position:sticky;top:0;z-index:20;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface);border-bottom:var(--bw) solid var(--color-border);}
+.fdy-app__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-app__main{flex:1;padding:var(--space-8);}
+.fdy-skip{position:absolute;left:var(--space-2);top:var(--space-2);background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:100;transform:translateY(-250%);transition:transform var(--dur-fast) var(--ease-standard);}
+.fdy-skip:focus{transform:translateY(0);}
+/* --static: for a bounded/embedded shell (a demo box, not the whole page) —
+ * drop sticky so nothing escapes the box; sidebar stretches to fill it. */
+.fdy-app--static .fdy-app__sidebar{position:static;height:auto;align-self:stretch;}
+.fdy-app--static .fdy-app__topbar{position:static;}
+/* Mobile: the sidebar becomes an off-canvas drawer opened by the topbar toggle. */
+.fdy-app__backdrop{display:none;}
+@media (max-width:720px){
+  .fdy-app__sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:16rem;z-index:60;transform:translateX(-100%);transition:transform var(--dur-base) var(--ease-standard);box-shadow:var(--shadow-4);}
+  .fdy-app--nav-open .fdy-app__sidebar{transform:translateX(0);}
+  .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(8,10,20,.45);opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard);}
+  .fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;}
+  .fdy-app__main{padding:var(--space-5);}
+  .fdy-app__topbar{padding:0 var(--space-4);}
+}
+@media (prefers-reduced-motion:reduce){.fdy-app__sidebar{transition:none;}}

package/src/components/appbar.css

@@ -0,0 +1,15 @@
+/* Freeday — App bar (standalone top bar: brand · actions · spacer).
+ * Distinct from .fdy-app__topbar (which is bound to the shell grid). Use anywhere;
+ * sticky / elevated / dense / coloured via modifiers. Pure CSS. */
+.fdy-appbar{display:flex;align-items:center;gap:var(--space-3);height:var(--space-16);padding:0 var(--space-4);background:var(--color-surface);color:var(--color-text);border-bottom:var(--bw) solid var(--color-border);}
+.fdy-appbar--sticky{position:sticky;top:0;z-index:90;}
+.fdy-appbar--elevated{border-bottom:0;box-shadow:var(--shadow-2);}
+.fdy-appbar--dense{height:var(--space-12);}
+.fdy-appbar--primary{background:var(--color-primary);color:var(--color-on-primary);border-bottom-color:transparent;}
+.fdy-appbar__brand{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:inherit;white-space:nowrap;}
+.fdy-appbar__brand svg{display:block;width:1.5rem;height:1.5rem;}
+.fdy-appbar__spacer{flex:1;}
+.fdy-appbar__actions{display:inline-flex;align-items:center;gap:var(--space-1);}
+/* Controls on a coloured app bar go on-colour (icons stay legible, hover is a light wash) */
+.fdy-appbar--primary .fdy-btn--ghost{background:transparent;border-color:transparent;color:var(--color-on-primary);box-shadow:none;}
+.fdy-appbar--primary .fdy-btn--ghost:hover{background:color-mix(in srgb,var(--color-on-primary) 16%,transparent);color:var(--color-on-primary);transform:none;}

package/src/components/autocomplete.css

@@ -0,0 +1,12 @@
+/* Freeday — Autocomplete (text input + filtered suggestion listbox, APG editable combobox).
+ * Enhanced by freeday-autocomplete.js. */
+.fdy-autocomplete{position:relative;display:block;max-width:22rem;}
+.fdy-autocomplete__listbox{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:120;min-width:100%;max-height:16rem;overflow-y:auto;margin:0;padding:var(--space-1);list-style:none;background:var(--color-surface);color:var(--color-text);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);}
+.fdy-autocomplete__listbox[hidden]{display:none;}
+.fdy-autocomplete__option{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--color-text);cursor:pointer;white-space:nowrap;}
+.fdy-autocomplete__option[hidden]{display:none;}
+.fdy-autocomplete__option:hover,.fdy-autocomplete__option.is-highlighted{background:var(--color-surface-3);}
+.fdy-autocomplete__option[aria-selected="true"]{background:var(--color-primary-soft);color:var(--color-primary-strong);font-weight:var(--weight-semibold);}
+.fdy-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted);}
+.fdy-autocomplete__empty[hidden]{display:none;}
+@media (prefers-reduced-motion:no-preference){.fdy-autocomplete__listbox:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}

package/src/components/avatar.css

@@ -0,0 +1,8 @@
+/* Freeday — Avatar */
+.fdy-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary-strong);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;overflow:hidden;user-select:none;}
+.fdy-avatar img{width:100%;height:100%;object-fit:cover;}
+.fdy-avatar--sm{width:2rem;height:2rem;font-size:var(--text-xs);}
+.fdy-avatar--lg{width:3.5rem;height:3.5rem;font-size:var(--text-lg);}
+.fdy-avatar-group{display:inline-flex;}
+.fdy-avatar-group .fdy-avatar{border:2px solid var(--color-surface);margin-left:calc(var(--space-2)*-1);}
+.fdy-avatar-group .fdy-avatar:first-child{margin-left:0;}

package/src/components/badge.css

@@ -0,0 +1,27 @@
+/* Freeday — Badge */
+.fdy-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;padding:.35em .7em;border-radius:var(--radius-full);color:var(--color-primary-strong);background:var(--color-primary-soft);border:var(--bw) solid color-mix(in srgb,var(--color-primary) 22%,transparent);box-shadow:0 1px 1.5px rgba(16,14,30,.05);}
+.fdy-badge--success{color:var(--color-success-strong);background:var(--color-success-soft);border-color:color-mix(in srgb,var(--color-success) 26%,transparent);}
+.fdy-badge--warning{color:var(--color-warning-strong);background:var(--color-warning-soft);border-color:color-mix(in srgb,var(--color-warning) 26%,transparent);}
+.fdy-badge--danger{color:var(--color-danger-strong);background:var(--color-danger-soft);border-color:color-mix(in srgb,var(--color-danger) 26%,transparent);}
+.fdy-badge--info{color:var(--color-info-strong);background:var(--color-info-soft);border-color:color-mix(in srgb,var(--color-info) 26%,transparent);}
+.fdy-badge--outline{background:transparent;border-color:var(--color-border-strong);color:var(--color-text-muted);box-shadow:none;}
+
+/* Overlay badge — anchors a small count/dot/icon badge to a corner of any element
+ * (icon, button, text). Wrap the content in .fdy-badge-wrap; add .fdy-badge-ov as a
+ * sibling. Default is a solid neutral pill; colour + dot + position via modifiers. */
+.fdy-badge-wrap{position:relative;display:inline-flex;vertical-align:middle;}
+.fdy-badge-ov{position:absolute;top:0;right:0;transform:translate(50%,-50%);z-index:1;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 var(--space-1);border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;color:var(--color-inverse-text);background:var(--color-inverse-surface);border:2px solid var(--color-surface);}
+.fdy-badge-ov svg{display:block;width:.75rem;height:.75rem;}
+.fdy-badge-ov--dot{min-width:0;width:.75rem;height:.75rem;padding:0;}
+/* Solid colours safe for count/text (on-* tokens, AA in light & dark) */
+.fdy-badge-ov--primary{background:var(--color-primary);color:var(--color-on-primary);}
+.fdy-badge-ov--danger{background:var(--color-danger-btn);color:var(--color-on-danger);}
+/* Dot-oriented accents (for dots — plain text on these is not guaranteed AA) */
+.fdy-badge-ov--accent{background:var(--color-accent);}
+.fdy-badge-ov--info{background:var(--color-info);}
+.fdy-badge-ov--success{background:var(--color-success);}
+.fdy-badge-ov--warning{background:var(--color-warning);}
+/* Anchor position */
+.fdy-badge-ov--top-left{right:auto;left:0;transform:translate(-50%,-50%);}
+.fdy-badge-ov--bottom-right{top:auto;bottom:0;transform:translate(50%,50%);}
+.fdy-badge-ov--bottom-left{top:auto;bottom:0;right:auto;left:0;transform:translate(-50%,50%);}

package/src/components/breadcrumb.css

@@ -0,0 +1,9 @@
+/* Freeday — Breadcrumb */
+.fdy-breadcrumb{font-size:var(--text-sm);}
+.fdy-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);list-style:none;margin:0;padding:0;}
+.fdy-breadcrumb__item{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text-muted);}
+.fdy-breadcrumb__link{color:var(--color-text-muted);text-decoration:none;border-radius:var(--radius-sm);}
+.fdy-breadcrumb__link:hover{color:var(--color-primary-strong);text-decoration:underline;}
+.fdy-breadcrumb__link:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
+.fdy-breadcrumb__item[aria-current="page"]{color:var(--color-text);font-weight:var(--weight-medium);}
+.fdy-breadcrumb__sep{color:var(--color-text-subtle);user-select:none;}