@sigx/zero-daisyui 0.2.0-beta.1

package/dist/css/tokens.css

@@ -0,0 +1,265 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
+@property --color-primary { syntax: '<color>'; inherits: true; initial-value: oklch(45% 0.24 277.023); }
+@property --color-secondary { syntax: '<color>'; inherits: true; initial-value: oklch(65% 0.241 354.308); }
+@property --color-accent { syntax: '<color>'; inherits: true; initial-value: oklch(77% 0.152 181.912); }
+@property --color-neutral { syntax: '<color>'; inherits: true; initial-value: oklch(14% 0.005 285.823); }
+@property --color-info { syntax: '<color>'; inherits: true; initial-value: oklch(74% 0.16 232.661); }
+@property --color-success { syntax: '<color>'; inherits: true; initial-value: oklch(76% 0.177 163.223); }
+@property --color-warning { syntax: '<color>'; inherits: true; initial-value: oklch(82% 0.189 84.429); }
+@property --color-error { syntax: '<color>'; inherits: true; initial-value: oklch(71% 0.194 13.428); }
+@property --depth { syntax: '<number>'; inherits: true; initial-value: 1; }
+@property --noise { syntax: '<number>'; inherits: true; initial-value: 0; }
+
+@layer zero.tokens {
+    :where(:root) {
+        color-scheme: light dark;
+        --color-primary: light-dark(oklch(45% 0.24 277.023), oklch(58% 0.233 277.117));
+        --color-primary-content: light-dark(oklch(93% 0.034 272.788), oklch(96% 0.018 272.314));
+        --color-secondary: oklch(65% 0.241 354.308);
+        --color-secondary-content: oklch(94% 0.028 342.258);
+        --color-accent: oklch(77% 0.152 181.912);
+        --color-accent-content: oklch(38% 0.063 188.416);
+        --color-neutral: oklch(14% 0.005 285.823);
+        --color-neutral-content: oklch(92% 0.004 286.32);
+        --color-info: oklch(74% 0.16 232.661);
+        --color-info-content: oklch(29% 0.066 243.157);
+        --color-success: oklch(76% 0.177 163.223);
+        --color-success-content: oklch(37% 0.077 168.94);
+        --color-warning: oklch(82% 0.189 84.429);
+        --color-warning-content: oklch(41% 0.112 45.904);
+        --color-error: oklch(71% 0.194 13.428);
+        --color-error-content: oklch(27% 0.105 12.094);
+        --color-base-100: light-dark(oklch(100% 0 0), oklch(25.33% 0.016 252.42));
+        --color-base-200: light-dark(oklch(98% 0 0), oklch(23.26% 0.014 253.1));
+        --color-base-300: light-dark(oklch(95% 0 0), oklch(21.15% 0.012 254.09));
+        --color-base-content: light-dark(oklch(21% 0.006 285.885), oklch(97.807% 0.029 256.847));
+        --color-primary-soft: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100));
+        --color-secondary-soft: color-mix(in oklab, var(--color-secondary) 12%, var(--color-base-100));
+        --color-accent-soft: color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100));
+        --color-neutral-soft: color-mix(in oklab, var(--color-neutral) 12%, var(--color-base-100));
+        --color-info-soft: color-mix(in oklab, var(--color-info) 12%, var(--color-base-100));
+        --color-success-soft: color-mix(in oklab, var(--color-success) 12%, var(--color-base-100));
+        --color-warning-soft: color-mix(in oklab, var(--color-warning) 12%, var(--color-base-100));
+        --color-error-soft: color-mix(in oklab, var(--color-error) 12%, var(--color-base-100));
+        --radius-selector: 0.5rem;
+        --radius-field: 0.25rem;
+        --radius-box: 0.5rem;
+        --size-selector: 0.25rem;
+        --size-field: 0.25rem;
+        --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+        --weight-normal: 400;
+        --weight-medium: 500;
+        --weight-semibold: 600;
+        --weight-bold: 700;
+        --leading-none: 1;
+        --leading-tight: 1.25;
+        --leading-normal: 1.5;
+        --tracking-normal: 0em;
+        --tracking-wide: 0.05em;
+        --space-2xs: 0.125rem;
+        --space-xs: 0.25rem;
+        --space-sm: 0.375rem;
+        --space-md: 0.5rem;
+        --space-lg: 0.75rem;
+        --space-xl: 1rem;
+        --space-2xl: 1.25rem;
+        --shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.08);
+        --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.15);
+        --shadow-md: 0 1px 2px oklch(0% 0 0 / 0.2);
+        --shadow-lg: 0 12px 32px -8px oklch(0% 0 0 / 0.3);
+        --shadow-xl: 0 25px 50px -12px oklch(0% 0 0 / 0.4);
+        --duration-instant: 100ms;
+        --duration-fast: 150ms;
+        --duration-normal: 200ms;
+        --duration-slow: 300ms;
+        --ease-standard: ease;
+        --border: 1px;
+        --disabled-opacity: 0.3;
+        --depth: 1;
+        --depth-shade: oklch(0% 0 0 / calc(var(--depth) * 0.1));
+        --depth-sheen: oklch(100% 0 0 / calc(var(--depth) * 0.1));
+        --noise: 0;
+        --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
+    }
+
+    [data-theme="light"] {
+        color-scheme: light;
+        --color-primary: oklch(45% 0.24 277.023);
+        --color-primary-content: oklch(93% 0.034 272.788);
+        --color-secondary: oklch(65% 0.241 354.308);
+        --color-secondary-content: oklch(94% 0.028 342.258);
+        --color-accent: oklch(77% 0.152 181.912);
+        --color-accent-content: oklch(38% 0.063 188.416);
+        --color-neutral: oklch(14% 0.005 285.823);
+        --color-neutral-content: oklch(92% 0.004 286.32);
+        --color-info: oklch(74% 0.16 232.661);
+        --color-info-content: oklch(29% 0.066 243.157);
+        --color-success: oklch(76% 0.177 163.223);
+        --color-success-content: oklch(37% 0.077 168.94);
+        --color-warning: oklch(82% 0.189 84.429);
+        --color-warning-content: oklch(41% 0.112 45.904);
+        --color-error: oklch(71% 0.194 13.428);
+        --color-error-content: oklch(27% 0.105 12.094);
+        --color-base-100: oklch(100% 0 0);
+        --color-base-200: oklch(98% 0 0);
+        --color-base-300: oklch(95% 0 0);
+        --color-base-content: oklch(21% 0.006 285.885);
+        --color-primary-soft: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100));
+        --color-secondary-soft: color-mix(in oklab, var(--color-secondary) 12%, var(--color-base-100));
+        --color-accent-soft: color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100));
+        --color-neutral-soft: color-mix(in oklab, var(--color-neutral) 12%, var(--color-base-100));
+        --color-info-soft: color-mix(in oklab, var(--color-info) 12%, var(--color-base-100));
+        --color-success-soft: color-mix(in oklab, var(--color-success) 12%, var(--color-base-100));
+        --color-warning-soft: color-mix(in oklab, var(--color-warning) 12%, var(--color-base-100));
+        --color-error-soft: color-mix(in oklab, var(--color-error) 12%, var(--color-base-100));
+    }
+
+    [data-theme="dark"] {
+        color-scheme: dark;
+        --color-primary: oklch(58% 0.233 277.117);
+        --color-primary-content: oklch(96% 0.018 272.314);
+        --color-secondary: oklch(65% 0.241 354.308);
+        --color-secondary-content: oklch(94% 0.028 342.258);
+        --color-accent: oklch(77% 0.152 181.912);
+        --color-accent-content: oklch(38% 0.063 188.416);
+        --color-neutral: oklch(14% 0.005 285.823);
+        --color-neutral-content: oklch(92% 0.004 286.32);
+        --color-info: oklch(74% 0.16 232.661);
+        --color-info-content: oklch(29% 0.066 243.157);
+        --color-success: oklch(76% 0.177 163.223);
+        --color-success-content: oklch(37% 0.077 168.94);
+        --color-warning: oklch(82% 0.189 84.429);
+        --color-warning-content: oklch(41% 0.112 45.904);
+        --color-error: oklch(71% 0.194 13.428);
+        --color-error-content: oklch(27% 0.105 12.094);
+        --color-base-100: oklch(25.33% 0.016 252.42);
+        --color-base-200: oklch(23.26% 0.014 253.1);
+        --color-base-300: oklch(21.15% 0.012 254.09);
+        --color-base-content: oklch(97.807% 0.029 256.847);
+        --color-primary-soft: color-mix(in oklab, var(--color-primary) 16%, var(--color-base-100));
+        --color-secondary-soft: color-mix(in oklab, var(--color-secondary) 16%, var(--color-base-100));
+        --color-accent-soft: color-mix(in oklab, var(--color-accent) 16%, var(--color-base-100));
+        --color-neutral-soft: color-mix(in oklab, var(--color-neutral) 16%, var(--color-base-100));
+        --color-info-soft: color-mix(in oklab, var(--color-info) 16%, var(--color-base-100));
+        --color-success-soft: color-mix(in oklab, var(--color-success) 16%, var(--color-base-100));
+        --color-warning-soft: color-mix(in oklab, var(--color-warning) 16%, var(--color-base-100));
+        --color-error-soft: color-mix(in oklab, var(--color-error) 16%, var(--color-base-100));
+    }
+
+    [data-theme="dim"] {
+        color-scheme: dark;
+        --color-primary: oklch(86.133% 0.141 139.549);
+        --color-primary-content: oklch(17.226% 0.028 139.549);
+        --color-secondary: oklch(73.375% 0.165 35.353);
+        --color-secondary-content: oklch(14.675% 0.033 35.353);
+        --color-accent: oklch(74.229% 0.133 311.379);
+        --color-accent-content: oklch(14.845% 0.026 311.379);
+        --color-neutral: oklch(24.731% 0.02 264.094);
+        --color-neutral-content: oklch(82.901% 0.031 222.959);
+        --color-info: oklch(86.078% 0.142 206.182);
+        --color-info-content: oklch(17.215% 0.028 206.182);
+        --color-success: oklch(86.171% 0.142 166.534);
+        --color-success-content: oklch(17.234% 0.028 166.534);
+        --color-warning: oklch(86.163% 0.142 94.818);
+        --color-warning-content: oklch(17.232% 0.028 94.818);
+        --color-error: oklch(82.418% 0.099 33.756);
+        --color-error-content: oklch(16.483% 0.019 33.756);
+        --color-base-100: oklch(30.857% 0.023 264.149);
+        --color-base-200: oklch(28.036% 0.019 264.182);
+        --color-base-300: oklch(26.346% 0.018 262.177);
+        --color-base-content: oklch(82.901% 0.031 222.959);
+        --color-primary-soft: color-mix(in oklab, var(--color-primary) 16%, var(--color-base-100));
+        --color-secondary-soft: color-mix(in oklab, var(--color-secondary) 16%, var(--color-base-100));
+        --color-accent-soft: color-mix(in oklab, var(--color-accent) 16%, var(--color-base-100));
+        --color-neutral-soft: color-mix(in oklab, var(--color-neutral) 16%, var(--color-base-100));
+        --color-info-soft: color-mix(in oklab, var(--color-info) 16%, var(--color-base-100));
+        --color-success-soft: color-mix(in oklab, var(--color-success) 16%, var(--color-base-100));
+        --color-warning-soft: color-mix(in oklab, var(--color-warning) 16%, var(--color-base-100));
+        --color-error-soft: color-mix(in oklab, var(--color-error) 16%, var(--color-base-100));
+        --radius-selector: 1rem;
+        --radius-field: 0.5rem;
+        --radius-box: 1rem;
+        --depth: 0;
+    }
+
+    [data-theme="nord"] {
+        color-scheme: light;
+        --color-primary: oklch(59.435% 0.077 254.027);
+        --color-primary-content: oklch(11.887% 0.015 254.027);
+        --color-secondary: oklch(69.651% 0.059 248.687);
+        --color-secondary-content: oklch(13.93% 0.011 248.687);
+        --color-accent: oklch(77.464% 0.062 217.469);
+        --color-accent-content: oklch(15.492% 0.012 217.469);
+        --color-neutral: oklch(45.229% 0.035 264.131);
+        --color-neutral-content: oklch(89.925% 0.016 262.749);
+        --color-info: oklch(69.207% 0.062 332.664);
+        --color-info-content: oklch(13.841% 0.012 332.664);
+        --color-success: oklch(76.827% 0.074 131.063);
+        --color-success-content: oklch(15.365% 0.014 131.063);
+        --color-warning: oklch(85.486% 0.089 84.093);
+        --color-warning-content: oklch(17.097% 0.017 84.093);
+        --color-error: oklch(60.61% 0.12 15.341);
+        --color-error-content: oklch(12.122% 0.024 15.341);
+        --color-base-100: oklch(95.127% 0.007 260.731);
+        --color-base-200: oklch(93.299% 0.01 261.788);
+        --color-base-300: oklch(89.925% 0.016 262.749);
+        --color-base-content: oklch(32.437% 0.022 264.182);
+        --color-primary-soft: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100));
+        --color-secondary-soft: color-mix(in oklab, var(--color-secondary) 12%, var(--color-base-100));
+        --color-accent-soft: color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100));
+        --color-neutral-soft: color-mix(in oklab, var(--color-neutral) 12%, var(--color-base-100));
+        --color-info-soft: color-mix(in oklab, var(--color-info) 12%, var(--color-base-100));
+        --color-success-soft: color-mix(in oklab, var(--color-success) 12%, var(--color-base-100));
+        --color-warning-soft: color-mix(in oklab, var(--color-warning) 12%, var(--color-base-100));
+        --color-error-soft: color-mix(in oklab, var(--color-error) 12%, var(--color-base-100));
+        --radius-selector: 1rem;
+        --depth: 0;
+    }
+
+    [data-theme="sunset"] {
+        color-scheme: dark;
+        --color-primary: oklch(74.703% 0.158 39.947);
+        --color-primary-content: oklch(14.94% 0.031 39.947);
+        --color-secondary: oklch(72.537% 0.177 2.72);
+        --color-secondary-content: oklch(14.507% 0.035 2.72);
+        --color-accent: oklch(71.294% 0.166 299.844);
+        --color-accent-content: oklch(14.258% 0.033 299.844);
+        --color-neutral: oklch(26% 0.019 237.69);
+        --color-neutral-content: oklch(70% 0.019 237.69);
+        --color-info: oklch(85.559% 0.085 206.015);
+        --color-info-content: oklch(17.111% 0.017 206.015);
+        --color-success: oklch(85.56% 0.085 144.778);
+        --color-success-content: oklch(17.112% 0.017 144.778);
+        --color-warning: oklch(85.569% 0.084 74.427);
+        --color-warning-content: oklch(17.113% 0.016 74.427);
+        --color-error: oklch(85.511% 0.078 16.886);
+        --color-error-content: oklch(17.102% 0.015 16.886);
+        --color-base-100: oklch(22% 0.019 237.69);
+        --color-base-200: oklch(20% 0.019 237.69);
+        --color-base-300: oklch(18% 0.019 237.69);
+        --color-base-content: oklch(77.383% 0.043 245.096);
+        --color-primary-soft: color-mix(in oklab, var(--color-primary) 16%, var(--color-base-100));
+        --color-secondary-soft: color-mix(in oklab, var(--color-secondary) 16%, var(--color-base-100));
+        --color-accent-soft: color-mix(in oklab, var(--color-accent) 16%, var(--color-base-100));
+        --color-neutral-soft: color-mix(in oklab, var(--color-neutral) 16%, var(--color-base-100));
+        --color-info-soft: color-mix(in oklab, var(--color-info) 16%, var(--color-base-100));
+        --color-success-soft: color-mix(in oklab, var(--color-success) 16%, var(--color-base-100));
+        --color-warning-soft: color-mix(in oklab, var(--color-warning) 16%, var(--color-base-100));
+        --color-error-soft: color-mix(in oklab, var(--color-error) 16%, var(--color-base-100));
+        --radius-selector: 1rem;
+        --radius-field: 0.5rem;
+        --radius-box: 1rem;
+        --depth: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        :root, [data-theme] {
+            --duration-instant: 0.01ms;
+            --duration-fast: 0.01ms;
+            --duration-normal: 0.01ms;
+            --duration-slow: 0.01ms;
+        }
+    }
+}

package/dist/design-system.d.ts

@@ -0,0 +1,5 @@
+import type { DesignSystemInput } from '@sigx/zero-kit';
+import { roles, system } from './tokens.js';
+export declare const designSystem: DesignSystemInput<typeof roles, typeof system>;
+export default designSystem;
+//# sourceMappingURL=design-system.d.ts.map

package/dist/design-system.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system.d.ts","sourceRoot":"","sources":["../src/design-system.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAa,KAAK,EAAE,MAAM,EAAoC,MAAM,aAAa,CAAC;AA0CzF,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,OAAO,KAAK,EAAE,OAAO,MAAM,CAKvE,CAAC;eAEa,YAAY"}

package/dist/design-system.js

@@ -0,0 +1,46 @@
+import { defineApi } from '@sigx/zero-kit/define';
+import { modifiers, tableModifiers, tokens, variants } from './tokens.js';
+import { recipes } from './recipes.js';
+/**
+ * The daisy-native API (#332): the third api-declaring design system after
+ * zero-heroui (#179) and zero-carbon (#183), and the first to combine an api
+ * with the recommended orthogonal colour axis. daisy's own docs already say
+ * `color` and `variant` — its CSS composes `btn-outline` WITH `btn-primary`,
+ * which is why the old `@sigx/daisyui` fused ButtonVariant union was a
+ * modeling artifact rather than the real shape — so no axis is renamed and
+ * no value respelled: `variant: {}` is the explicit `exact` claim. What the
+ * api adds is the modifier surface: the old library's boolean props
+ * (`wide`, `block`, `square`, `circle`, `active`, `loading`) surface under
+ * their own names on the generated `./components` module, so
+ * `<Button wide loading variant="dash" color="primary">` is fully typed from
+ * one import. None of the six collides with `RESERVED_PROPS_BY_SCOPE` — the
+ * validator checks exactly that for every identity-named modifier.
+ *
+ * `defineApi` from `@sigx/zero-kit/define`, the node:-free authoring
+ * subpath (#318): this module is in the package's RUNTIME graph (the barrel
+ * re-exports `designSystem`), and the kit's BARREL is Node-only — but the
+ * define surface is importable from a browser graph by contract, pinned by
+ * zero-kit's `ds-runtime-imports.test.ts`. The two-argument form narrows
+ * modifier names and any `values` keys against the declared vocabulary.
+ */
+const api = defineApi({ variants, modifiers: [...modifiers, ...tableModifiers] }, {
+    variant: {},
+    modifiers: {
+        wide: {},
+        block: {},
+        square: {},
+        circle: {},
+        active: {},
+        loading: {},
+        zebra: {},
+        hover: {},
+    },
+});
+export const designSystem = {
+    name: 'daisyui',
+    tokens,
+    recipes,
+    api,
+};
+export default designSystem;
+//# sourceMappingURL=design-system.js.map

package/dist/design-system.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system.js","sourceRoot":"","sources":["../src/design-system.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAiB,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACzF,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,GAAG,GAAG,SAAS,CACjB,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,GAAG,SAAS,EAAE,GAAG,cAAc,CAAC,EAAE,EAC1D;IACI,OAAO,EAAE,EAAE;IACX,SAAS,EAAE;QACP,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,EAAE;QACX,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;KACZ;CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAmD;IACxE,IAAI,EAAE,SAAS;IACf,MAAM;IACN,OAAO;IACP,GAAG;CACN,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { tokens } from './tokens.js';
+export { recipes } from './recipes.js';
+export { designSystem } from './design-system.js';
+export declare function installThemes(): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,wBAAgB,aAAa,IAAI,IAAI,CAEpC"}

package/dist/index.js

@@ -0,0 +1,13 @@
+/**
+ * @sigx/zero-daisyui runtime — theme metadata registration.
+ * The CSS is the design system (`@sigx/zero-daisyui/css`).
+ */
+import { registerThemes } from '@sigx/zero';
+import { tokens } from './tokens.js';
+export { tokens } from './tokens.js';
+export { recipes } from './recipes.js';
+export { designSystem } from './design-system.js';
+export function installThemes() {
+    registerThemes(tokens);
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,MAAM,UAAU,aAAa;IACzB,cAAc,CAAC,MAAM,CAAC,CAAC;AAC3B,CAAC"}

package/dist/lynx/components/accordion.css

@@ -0,0 +1,87 @@
+.zx-accordion__root {
+    --accordion-accent: var(--color-base-content);
+}
+
+.zx-accordion__root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+}
+
+.zx-accordion__item {
+    interpolate-size: allow-keywords;
+    border: var(--border) solid var(--color-base-300);
+    border-radius: var(--radius-box);
+    background: var(--color-base-100);
+    overflow: hidden;
+}
+
+.zx-accordion__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-xl) var(--space-2xl);
+    font-size: var(--text-md);
+    font-weight: var(--weight-semibold);
+    cursor: pointer;
+    list-style: none;
+}
+
+.zx-accordion__trigger.zx-s-open {
+    color: var(--accordion-accent);
+}
+
+.zx-accordion__trigger.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-accordion__trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-accordion__panel {
+    padding: 0 var(--space-2xl) var(--space-xl);
+    font-size: var(--text-md);
+}
+
+.zx-accordion__trigger.zx-a-size-xs {
+    padding: var(--space-md) var(--space-lg);
+    font-size: var(--text-sm);
+}
+
+.zx-accordion__panel.zx-a-size-xs {
+    padding: 0 var(--space-lg) var(--space-md);
+    font-size: var(--text-sm);
+}
+
+.zx-accordion__trigger.zx-a-size-sm {
+    padding: var(--space-lg) var(--space-xl);
+    font-size: var(--text-sm);
+}
+
+.zx-accordion__panel.zx-a-size-sm {
+    padding: 0 var(--space-xl) var(--space-lg);
+    font-size: var(--text-sm);
+}
+
+.zx-accordion__trigger.zx-a-size-lg {
+    padding: var(--space-2xl) var(--space-2xl);
+    font-size: var(--text-lg);
+}
+
+.zx-accordion__panel.zx-a-size-lg {
+    padding: 0 var(--space-2xl) var(--space-2xl);
+    font-size: var(--text-md);
+}
+
+.zx-accordion__trigger.zx-a-size-xl {
+    padding: var(--space-2xl) var(--space-2xl);
+    font-size: var(--text-xl);
+}
+
+.zx-accordion__panel.zx-a-size-xl {
+    padding: 0 var(--space-2xl) var(--space-2xl);
+    font-size: var(--text-lg);
+}

package/dist/lynx/components/alert.css

@@ -0,0 +1,108 @@
+.zx-alert__root {
+    --alert-tint: var(--color-info-soft);
+    --alert-ink: var(--color-base-content);
+}
+
+.zx-alert__root {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: var(--space-sm) var(--space-md);
+    background: var(--alert-tint);
+    color: var(--color-base-content);
+    border-radius: var(--radius-box);
+    padding: var(--space-md) var(--space-lg);
+}
+
+.zx-alert__icon {
+    grid-row: 1 / span 2;
+    display: inline-flex;
+    align-items: center;
+    color: var(--alert-ink);
+    font-size: var(--text-lg);
+    line-height: var(--leading-none);
+}
+
+.zx-alert__title {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-tight);
+}
+
+.zx-alert__description {
+    grid-column: 2;
+    font-size: var(--text-sm);
+    line-height: var(--leading-normal);
+}
+
+.zx-alert__close {
+    grid-row: 1;
+    grid-column: 3;
+    appearance: none;
+    border: none;
+    background: transparent;
+    color: inherit;
+    border-radius: var(--radius-selector);
+    padding: var(--space-2xs);
+    line-height: var(--leading-none);
+    cursor: pointer;
+    transition: background var(--duration-fast) var(--ease-standard);
+}
+
+.zx-alert__close.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-alert__close.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-alert__root.zx-a-color-primary {
+    --alert-tint: var(--color-primary-soft);
+}
+
+.zx-alert__root.zx-a-color-secondary {
+    --alert-tint: var(--color-secondary-soft);
+}
+
+.zx-alert__root.zx-a-color-accent {
+    --alert-tint: var(--color-accent-soft);
+}
+
+.zx-alert__root.zx-a-color-neutral {
+    --alert-tint: var(--color-neutral-soft);
+}
+
+.zx-alert__root.zx-a-color-info {
+    --alert-tint: var(--color-info-soft);
+}
+
+.zx-alert__root.zx-a-color-success {
+    --alert-tint: var(--color-success-soft);
+}
+
+.zx-alert__root.zx-a-color-warning {
+    --alert-tint: var(--color-warning-soft);
+}
+
+.zx-alert__root.zx-a-color-error {
+    --alert-tint: var(--color-error-soft);
+}
+
+.zx-alert__root.zx-a-size-xs {
+    padding: var(--space-2xs) var(--space-sm);
+}
+
+.zx-alert__root.zx-a-size-sm {
+    padding: var(--space-xs) var(--space-md);
+}
+
+.zx-alert__root.zx-a-size-lg {
+    padding: var(--space-lg) var(--space-xl);
+}
+
+.zx-alert__root.zx-a-size-xl {
+    padding: var(--space-xl) var(--space-2xl);
+}

package/dist/lynx/components/avatar.css

@@ -0,0 +1,83 @@
+.zx-avatar__root {
+    --avatar-text: var(--text-sm);
+    --avatar-ring: var(--color-primary);
+}
+
+.zx-avatar__root {
+    position: relative;
+    display: inline-grid;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    border-radius: 9999px;
+    overflow: hidden;
+    vertical-align: middle;
+    background: var(--color-base-200);
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--avatar-ring);
+}
+
+.zx-avatar__image {
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.zx-avatar__fallback {
+    grid-area: 1 / 1;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+    background: var(--color-neutral);
+    color: var(--color-neutral-content);
+    font-size: var(--avatar-text);
+    font-weight: var(--weight-semibold);
+    user-select: none;
+}
+
+.zx-avatar__root.zx-a-color-primary {
+    --avatar-ring: var(--color-primary);
+}
+
+.zx-avatar__root.zx-a-color-secondary {
+    --avatar-ring: var(--color-secondary);
+}
+
+.zx-avatar__root.zx-a-color-accent {
+    --avatar-ring: var(--color-accent);
+}
+
+.zx-avatar__root.zx-a-color-neutral {
+    --avatar-ring: var(--color-neutral);
+}
+
+.zx-avatar__root.zx-a-color-info {
+    --avatar-ring: var(--color-info);
+}
+
+.zx-avatar__root.zx-a-color-success {
+    --avatar-ring: var(--color-success);
+}
+
+.zx-avatar__root.zx-a-color-warning {
+    --avatar-ring: var(--color-warning);
+}
+
+.zx-avatar__root.zx-a-color-error {
+    --avatar-ring: var(--color-error);
+}
+
+.zx-avatar__root.zx-a-size-xs {
+    --avatar-text: var(--text-xs);
+}
+
+.zx-avatar__root.zx-a-size-sm {
+    --avatar-text: var(--text-xs);
+}
+
+.zx-avatar__root.zx-a-size-lg {
+    --avatar-text: var(--text-md);
+}
+
+.zx-avatar__root.zx-a-size-xl {
+    --avatar-text: var(--text-lg);
+}