@jasonshimmy/cer-material 0.1.2

package/dist/theme.cjs

@@ -0,0 +1,137 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=`
+  :root {
+    /* ── Primary ───────────────────────────────── */
+    --md-sys-color-primary:               #6750A4;
+    --md-sys-color-on-primary:            #FFFFFF;
+    --md-sys-color-primary-container:     #EADDFF;
+    --md-sys-color-on-primary-container:  #21005D;
+
+    /* ── Secondary ─────────────────────────────── */
+    --md-sys-color-secondary:             #625B71;
+    --md-sys-color-on-secondary:          #FFFFFF;
+    --md-sys-color-secondary-container:   #E8DEF8;
+    --md-sys-color-on-secondary-container:#1D192B;
+
+    /* ── Tertiary ──────────────────────────────── */
+    --md-sys-color-tertiary:              #7D5260;
+    --md-sys-color-on-tertiary:           #FFFFFF;
+    --md-sys-color-tertiary-container:    #FFD8E4;
+    --md-sys-color-on-tertiary-container: #31111D;
+
+    /* ── Error ─────────────────────────────────── */
+    --md-sys-color-error:                 #B3261E;
+    --md-sys-color-on-error:              #FFFFFF;
+    --md-sys-color-error-container:       #F9DEDC;
+    --md-sys-color-on-error-container:    #410E0B;
+
+    /* ── Surface & Background ──────────────────── */
+    --md-sys-color-background:            #FFFBFE;
+    --md-sys-color-on-background:         #1C1B1F;
+    --md-sys-color-surface:               #FFFBFE;
+    --md-sys-color-on-surface:            #1C1B1F;
+    --md-sys-color-surface-variant:       #E7E0EC;
+    --md-sys-color-on-surface-variant:    #49454F;
+    --md-sys-color-surface-container-lowest:  #FFFFFF;
+    --md-sys-color-surface-container-low:     #F7F2FA;
+    --md-sys-color-surface-container:         #F3EDF7;
+    --md-sys-color-surface-container-high:    #ECE6F0;
+    --md-sys-color-surface-container-highest: #E6E0E9;
+
+    /* ── Inverse ───────────────────────────────── */
+    --md-sys-color-inverse-surface:       #313033;
+    --md-sys-color-inverse-on-surface:    #F4EFF4;
+    --md-sys-color-inverse-primary:       #D0BCFF;
+
+    /* ── Utility ───────────────────────────────── */
+    --md-sys-color-outline:               #79747E;
+    --md-sys-color-outline-variant:       #CAC4D0;
+    --md-sys-color-shadow:                #000000;
+    --md-sys-color-scrim:                 #000000;
+    --md-sys-color-surface-tint:          #6750A4;
+
+    /* ── Elevation shadows ─────────────────────── */
+    --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.3),   0 1px 3px 1px rgba(0,0,0,.15);
+    --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.3),   0 2px 6px 2px rgba(0,0,0,.15);
+    --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);
+    --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.3);
+
+    /* ── Typography ────────────────────────────── */
+    --md-sys-typescale-font: 'Roboto', 'Google Sans', sans-serif;
+
+    /* ── Shape ─────────────────────────────────── */
+    --md-sys-shape-corner-none:        0px;
+    --md-sys-shape-corner-extra-small: 4px;
+    --md-sys-shape-corner-small:       8px;
+    --md-sys-shape-corner-medium:      12px;
+    --md-sys-shape-corner-large:       16px;
+    --md-sys-shape-corner-extra-large: 28px;
+    --md-sys-shape-corner-full:        9999px;
+  }
+
+  body {
+    font-family: var(--md-sys-typescale-font);
+    background-color: var(--md-sys-color-background);
+    color: var(--md-sys-color-on-background);
+  }
+
+  #app {
+    min-height: 100vh;
+  }
+`,a=`
+  @media (prefers-color-scheme: dark) {
+    :root {
+      /* ── Primary ─────────────────────────────── */
+      --md-sys-color-primary:               #D0BCFF;
+      --md-sys-color-on-primary:            #381E72;
+      --md-sys-color-primary-container:     #4F378B;
+      --md-sys-color-on-primary-container:  #EADDFF;
+
+      /* ── Secondary ───────────────────────────── */
+      --md-sys-color-secondary:             #CCC2DC;
+      --md-sys-color-on-secondary:          #332D41;
+      --md-sys-color-secondary-container:   #4A4458;
+      --md-sys-color-on-secondary-container:#E8DEF8;
+
+      /* ── Tertiary ────────────────────────────── */
+      --md-sys-color-tertiary:              #EFB8C8;
+      --md-sys-color-on-tertiary:           #492532;
+      --md-sys-color-tertiary-container:    #633B48;
+      --md-sys-color-on-tertiary-container: #FFD8E4;
+
+      /* ── Error ───────────────────────────────── */
+      --md-sys-color-error:                 #F2B8B5;
+      --md-sys-color-on-error:              #601410;
+      --md-sys-color-error-container:       #8C1D18;
+      --md-sys-color-on-error-container:    #F9DEDC;
+
+      /* ── Surface & Background ────────────────── */
+      --md-sys-color-background:            #1C1B1F;
+      --md-sys-color-on-background:         #E6E1E5;
+      --md-sys-color-surface:               #1C1B1F;
+      --md-sys-color-on-surface:            #E6E1E5;
+      --md-sys-color-surface-variant:       #49454F;
+      --md-sys-color-on-surface-variant:    #CAC4D0;
+      --md-sys-color-surface-container-lowest:  #0F0E13;
+      --md-sys-color-surface-container-low:     #1D1B20;
+      --md-sys-color-surface-container:         #211F26;
+      --md-sys-color-surface-container-high:    #2B2930;
+      --md-sys-color-surface-container-highest: #36343B;
+
+      /* ── Inverse ─────────────────────────────── */
+      --md-sys-color-inverse-surface:       #E6E1E5;
+      --md-sys-color-inverse-on-surface:    #313033;
+      --md-sys-color-inverse-primary:       #6750A4;
+
+      /* ── Utility ─────────────────────────────── */
+      --md-sys-color-outline:               #938F99;
+      --md-sys-color-outline-variant:       #49454F;
+
+      /* ── Elevation (brighter overlays in dark) ── */
+      --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.6),   0 1px 3px 1px rgba(0,0,0,.4);
+      --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.6),   0 2px 6px 2px rgba(0,0,0,.4);
+      --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.6);
+      --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.6);
+    }
+  }
+`;let o=!1;function s(){if(o||typeof document>"u")return;o=!0;const r=new CSSStyleSheet;r.replaceSync(e+a),document.adoptedStyleSheets=[...document.adoptedStyleSheets,r]}s();exports.applyTheme=s;
+//# sourceMappingURL=theme.cjs.map

package/dist/theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.cjs","sources":["../src/theme.ts"],"sourcesContent":["/**\n * MD3 design-token theme.\n *\n * Injects Material Design 3 system tokens as a document-level CSSStyleSheet\n * so they cascade into every component's Shadow DOM via CSS custom properties.\n *\n * Call `applyTheme()` once at app startup — or just `import 'cer-material'`\n * which calls it automatically.\n */\n\nconst LIGHT = `\n  :root {\n    /* ── Primary ───────────────────────────────── */\n    --md-sys-color-primary:               #6750A4;\n    --md-sys-color-on-primary:            #FFFFFF;\n    --md-sys-color-primary-container:     #EADDFF;\n    --md-sys-color-on-primary-container:  #21005D;\n\n    /* ── Secondary ─────────────────────────────── */\n    --md-sys-color-secondary:             #625B71;\n    --md-sys-color-on-secondary:          #FFFFFF;\n    --md-sys-color-secondary-container:   #E8DEF8;\n    --md-sys-color-on-secondary-container:#1D192B;\n\n    /* ── Tertiary ──────────────────────────────── */\n    --md-sys-color-tertiary:              #7D5260;\n    --md-sys-color-on-tertiary:           #FFFFFF;\n    --md-sys-color-tertiary-container:    #FFD8E4;\n    --md-sys-color-on-tertiary-container: #31111D;\n\n    /* ── Error ─────────────────────────────────── */\n    --md-sys-color-error:                 #B3261E;\n    --md-sys-color-on-error:              #FFFFFF;\n    --md-sys-color-error-container:       #F9DEDC;\n    --md-sys-color-on-error-container:    #410E0B;\n\n    /* ── Surface & Background ──────────────────── */\n    --md-sys-color-background:            #FFFBFE;\n    --md-sys-color-on-background:         #1C1B1F;\n    --md-sys-color-surface:               #FFFBFE;\n    --md-sys-color-on-surface:            #1C1B1F;\n    --md-sys-color-surface-variant:       #E7E0EC;\n    --md-sys-color-on-surface-variant:    #49454F;\n    --md-sys-color-surface-container-lowest:  #FFFFFF;\n    --md-sys-color-surface-container-low:     #F7F2FA;\n    --md-sys-color-surface-container:         #F3EDF7;\n    --md-sys-color-surface-container-high:    #ECE6F0;\n    --md-sys-color-surface-container-highest: #E6E0E9;\n\n    /* ── Inverse ───────────────────────────────── */\n    --md-sys-color-inverse-surface:       #313033;\n    --md-sys-color-inverse-on-surface:    #F4EFF4;\n    --md-sys-color-inverse-primary:       #D0BCFF;\n\n    /* ── Utility ───────────────────────────────── */\n    --md-sys-color-outline:               #79747E;\n    --md-sys-color-outline-variant:       #CAC4D0;\n    --md-sys-color-shadow:                #000000;\n    --md-sys-color-scrim:                 #000000;\n    --md-sys-color-surface-tint:          #6750A4;\n\n    /* ── Elevation shadows ─────────────────────── */\n    --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.3),   0 1px 3px 1px rgba(0,0,0,.15);\n    --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.3),   0 2px 6px 2px rgba(0,0,0,.15);\n    --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);\n    --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.3);\n\n    /* ── Typography ────────────────────────────── */\n    --md-sys-typescale-font: 'Roboto', 'Google Sans', sans-serif;\n\n    /* ── Shape ─────────────────────────────────── */\n    --md-sys-shape-corner-none:        0px;\n    --md-sys-shape-corner-extra-small: 4px;\n    --md-sys-shape-corner-small:       8px;\n    --md-sys-shape-corner-medium:      12px;\n    --md-sys-shape-corner-large:       16px;\n    --md-sys-shape-corner-extra-large: 28px;\n    --md-sys-shape-corner-full:        9999px;\n  }\n\n  body {\n    font-family: var(--md-sys-typescale-font);\n    background-color: var(--md-sys-color-background);\n    color: var(--md-sys-color-on-background);\n  }\n\n  #app {\n    min-height: 100vh;\n  }\n`;\n\nconst DARK = `\n  @media (prefers-color-scheme: dark) {\n    :root {\n      /* ── Primary ─────────────────────────────── */\n      --md-sys-color-primary:               #D0BCFF;\n      --md-sys-color-on-primary:            #381E72;\n      --md-sys-color-primary-container:     #4F378B;\n      --md-sys-color-on-primary-container:  #EADDFF;\n\n      /* ── Secondary ───────────────────────────── */\n      --md-sys-color-secondary:             #CCC2DC;\n      --md-sys-color-on-secondary:          #332D41;\n      --md-sys-color-secondary-container:   #4A4458;\n      --md-sys-color-on-secondary-container:#E8DEF8;\n\n      /* ── Tertiary ────────────────────────────── */\n      --md-sys-color-tertiary:              #EFB8C8;\n      --md-sys-color-on-tertiary:           #492532;\n      --md-sys-color-tertiary-container:    #633B48;\n      --md-sys-color-on-tertiary-container: #FFD8E4;\n\n      /* ── Error ───────────────────────────────── */\n      --md-sys-color-error:                 #F2B8B5;\n      --md-sys-color-on-error:              #601410;\n      --md-sys-color-error-container:       #8C1D18;\n      --md-sys-color-on-error-container:    #F9DEDC;\n\n      /* ── Surface & Background ────────────────── */\n      --md-sys-color-background:            #1C1B1F;\n      --md-sys-color-on-background:         #E6E1E5;\n      --md-sys-color-surface:               #1C1B1F;\n      --md-sys-color-on-surface:            #E6E1E5;\n      --md-sys-color-surface-variant:       #49454F;\n      --md-sys-color-on-surface-variant:    #CAC4D0;\n      --md-sys-color-surface-container-lowest:  #0F0E13;\n      --md-sys-color-surface-container-low:     #1D1B20;\n      --md-sys-color-surface-container:         #211F26;\n      --md-sys-color-surface-container-high:    #2B2930;\n      --md-sys-color-surface-container-highest: #36343B;\n\n      /* ── Inverse ─────────────────────────────── */\n      --md-sys-color-inverse-surface:       #E6E1E5;\n      --md-sys-color-inverse-on-surface:    #313033;\n      --md-sys-color-inverse-primary:       #6750A4;\n\n      /* ── Utility ─────────────────────────────── */\n      --md-sys-color-outline:               #938F99;\n      --md-sys-color-outline-variant:       #49454F;\n\n      /* ── Elevation (brighter overlays in dark) ── */\n      --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.6),   0 1px 3px 1px rgba(0,0,0,.4);\n      --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.6),   0 2px 6px 2px rgba(0,0,0,.4);\n      --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.6);\n      --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.6);\n    }\n  }\n`;\n\nlet applied = false;\n\n/**\n * Injects the MD3 design-token stylesheet into `document.adoptedStyleSheets`.\n * Safe to call multiple times — subsequent calls are no-ops.\n */\nexport function applyTheme(): void {\n  if (applied || typeof document === 'undefined') return;\n  applied = true;\n\n  const sheet = new CSSStyleSheet();\n  sheet.replaceSync(LIGHT + DARK);\n  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];\n}\n\n// Auto-apply when the module is imported (mirrors the old style.css import).\napplyTheme();\n"],"names":["LIGHT","DARK","applied","applyTheme","sheet"],"mappings":"gFAUA,MAAMA,EAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiFRC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0Db,IAAIC,EAAU,GAMP,SAASC,GAAmB,CACjC,GAAID,GAAW,OAAO,SAAa,IAAa,OAChDA,EAAU,GAEV,MAAME,EAAQ,IAAI,cAClBA,EAAM,YAAYJ,EAAQC,CAAI,EAC9B,SAAS,mBAAqB,CAAC,GAAG,SAAS,mBAAoBG,CAAK,CACtE,CAGAD,EAAA"}

package/dist/theme.d.ts

@@ -0,0 +1,14 @@
+/**
+ * MD3 design-token theme.
+ *
+ * Injects Material Design 3 system tokens as a document-level CSSStyleSheet
+ * so they cascade into every component's Shadow DOM via CSS custom properties.
+ *
+ * Call `applyTheme()` once at app startup — or just `import 'cer-material'`
+ * which calls it automatically.
+ */
+/**
+ * Injects the MD3 design-token stylesheet into `document.adoptedStyleSheets`.
+ * Safe to call multiple times — subsequent calls are no-ops.
+ */
+export declare function applyTheme(): void;

package/dist/theme.js

@@ -0,0 +1,148 @@
+const s = `
+  :root {
+    /* ── Primary ───────────────────────────────── */
+    --md-sys-color-primary:               #6750A4;
+    --md-sys-color-on-primary:            #FFFFFF;
+    --md-sys-color-primary-container:     #EADDFF;
+    --md-sys-color-on-primary-container:  #21005D;
+
+    /* ── Secondary ─────────────────────────────── */
+    --md-sys-color-secondary:             #625B71;
+    --md-sys-color-on-secondary:          #FFFFFF;
+    --md-sys-color-secondary-container:   #E8DEF8;
+    --md-sys-color-on-secondary-container:#1D192B;
+
+    /* ── Tertiary ──────────────────────────────── */
+    --md-sys-color-tertiary:              #7D5260;
+    --md-sys-color-on-tertiary:           #FFFFFF;
+    --md-sys-color-tertiary-container:    #FFD8E4;
+    --md-sys-color-on-tertiary-container: #31111D;
+
+    /* ── Error ─────────────────────────────────── */
+    --md-sys-color-error:                 #B3261E;
+    --md-sys-color-on-error:              #FFFFFF;
+    --md-sys-color-error-container:       #F9DEDC;
+    --md-sys-color-on-error-container:    #410E0B;
+
+    /* ── Surface & Background ──────────────────── */
+    --md-sys-color-background:            #FFFBFE;
+    --md-sys-color-on-background:         #1C1B1F;
+    --md-sys-color-surface:               #FFFBFE;
+    --md-sys-color-on-surface:            #1C1B1F;
+    --md-sys-color-surface-variant:       #E7E0EC;
+    --md-sys-color-on-surface-variant:    #49454F;
+    --md-sys-color-surface-container-lowest:  #FFFFFF;
+    --md-sys-color-surface-container-low:     #F7F2FA;
+    --md-sys-color-surface-container:         #F3EDF7;
+    --md-sys-color-surface-container-high:    #ECE6F0;
+    --md-sys-color-surface-container-highest: #E6E0E9;
+
+    /* ── Inverse ───────────────────────────────── */
+    --md-sys-color-inverse-surface:       #313033;
+    --md-sys-color-inverse-on-surface:    #F4EFF4;
+    --md-sys-color-inverse-primary:       #D0BCFF;
+
+    /* ── Utility ───────────────────────────────── */
+    --md-sys-color-outline:               #79747E;
+    --md-sys-color-outline-variant:       #CAC4D0;
+    --md-sys-color-shadow:                #000000;
+    --md-sys-color-scrim:                 #000000;
+    --md-sys-color-surface-tint:          #6750A4;
+
+    /* ── Elevation shadows ─────────────────────── */
+    --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.3),   0 1px 3px 1px rgba(0,0,0,.15);
+    --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.3),   0 2px 6px 2px rgba(0,0,0,.15);
+    --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);
+    --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.3);
+
+    /* ── Typography ────────────────────────────── */
+    --md-sys-typescale-font: 'Roboto', 'Google Sans', sans-serif;
+
+    /* ── Shape ─────────────────────────────────── */
+    --md-sys-shape-corner-none:        0px;
+    --md-sys-shape-corner-extra-small: 4px;
+    --md-sys-shape-corner-small:       8px;
+    --md-sys-shape-corner-medium:      12px;
+    --md-sys-shape-corner-large:       16px;
+    --md-sys-shape-corner-extra-large: 28px;
+    --md-sys-shape-corner-full:        9999px;
+  }
+
+  body {
+    font-family: var(--md-sys-typescale-font);
+    background-color: var(--md-sys-color-background);
+    color: var(--md-sys-color-on-background);
+  }
+
+  #app {
+    min-height: 100vh;
+  }
+`, e = `
+  @media (prefers-color-scheme: dark) {
+    :root {
+      /* ── Primary ─────────────────────────────── */
+      --md-sys-color-primary:               #D0BCFF;
+      --md-sys-color-on-primary:            #381E72;
+      --md-sys-color-primary-container:     #4F378B;
+      --md-sys-color-on-primary-container:  #EADDFF;
+
+      /* ── Secondary ───────────────────────────── */
+      --md-sys-color-secondary:             #CCC2DC;
+      --md-sys-color-on-secondary:          #332D41;
+      --md-sys-color-secondary-container:   #4A4458;
+      --md-sys-color-on-secondary-container:#E8DEF8;
+
+      /* ── Tertiary ────────────────────────────── */
+      --md-sys-color-tertiary:              #EFB8C8;
+      --md-sys-color-on-tertiary:           #492532;
+      --md-sys-color-tertiary-container:    #633B48;
+      --md-sys-color-on-tertiary-container: #FFD8E4;
+
+      /* ── Error ───────────────────────────────── */
+      --md-sys-color-error:                 #F2B8B5;
+      --md-sys-color-on-error:              #601410;
+      --md-sys-color-error-container:       #8C1D18;
+      --md-sys-color-on-error-container:    #F9DEDC;
+
+      /* ── Surface & Background ────────────────── */
+      --md-sys-color-background:            #1C1B1F;
+      --md-sys-color-on-background:         #E6E1E5;
+      --md-sys-color-surface:               #1C1B1F;
+      --md-sys-color-on-surface:            #E6E1E5;
+      --md-sys-color-surface-variant:       #49454F;
+      --md-sys-color-on-surface-variant:    #CAC4D0;
+      --md-sys-color-surface-container-lowest:  #0F0E13;
+      --md-sys-color-surface-container-low:     #1D1B20;
+      --md-sys-color-surface-container:         #211F26;
+      --md-sys-color-surface-container-high:    #2B2930;
+      --md-sys-color-surface-container-highest: #36343B;
+
+      /* ── Inverse ─────────────────────────────── */
+      --md-sys-color-inverse-surface:       #E6E1E5;
+      --md-sys-color-inverse-on-surface:    #313033;
+      --md-sys-color-inverse-primary:       #6750A4;
+
+      /* ── Utility ─────────────────────────────── */
+      --md-sys-color-outline:               #938F99;
+      --md-sys-color-outline-variant:       #49454F;
+
+      /* ── Elevation (brighter overlays in dark) ── */
+      --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.6),   0 1px 3px 1px rgba(0,0,0,.4);
+      --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.6),   0 2px 6px 2px rgba(0,0,0,.4);
+      --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.6);
+      --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.6);
+    }
+  }
+`;
+let o = !1;
+function a() {
+  if (o || typeof document > "u") return;
+  o = !0;
+  const r = new CSSStyleSheet();
+  r.replaceSync(s + e), document.adoptedStyleSheets = [...document.adoptedStyleSheets, r];
+}
+a();
+export {
+  a as applyTheme
+};
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../src/theme.ts"],"sourcesContent":["/**\n * MD3 design-token theme.\n *\n * Injects Material Design 3 system tokens as a document-level CSSStyleSheet\n * so they cascade into every component's Shadow DOM via CSS custom properties.\n *\n * Call `applyTheme()` once at app startup — or just `import 'cer-material'`\n * which calls it automatically.\n */\n\nconst LIGHT = `\n  :root {\n    /* ── Primary ───────────────────────────────── */\n    --md-sys-color-primary:               #6750A4;\n    --md-sys-color-on-primary:            #FFFFFF;\n    --md-sys-color-primary-container:     #EADDFF;\n    --md-sys-color-on-primary-container:  #21005D;\n\n    /* ── Secondary ─────────────────────────────── */\n    --md-sys-color-secondary:             #625B71;\n    --md-sys-color-on-secondary:          #FFFFFF;\n    --md-sys-color-secondary-container:   #E8DEF8;\n    --md-sys-color-on-secondary-container:#1D192B;\n\n    /* ── Tertiary ──────────────────────────────── */\n    --md-sys-color-tertiary:              #7D5260;\n    --md-sys-color-on-tertiary:           #FFFFFF;\n    --md-sys-color-tertiary-container:    #FFD8E4;\n    --md-sys-color-on-tertiary-container: #31111D;\n\n    /* ── Error ─────────────────────────────────── */\n    --md-sys-color-error:                 #B3261E;\n    --md-sys-color-on-error:              #FFFFFF;\n    --md-sys-color-error-container:       #F9DEDC;\n    --md-sys-color-on-error-container:    #410E0B;\n\n    /* ── Surface & Background ──────────────────── */\n    --md-sys-color-background:            #FFFBFE;\n    --md-sys-color-on-background:         #1C1B1F;\n    --md-sys-color-surface:               #FFFBFE;\n    --md-sys-color-on-surface:            #1C1B1F;\n    --md-sys-color-surface-variant:       #E7E0EC;\n    --md-sys-color-on-surface-variant:    #49454F;\n    --md-sys-color-surface-container-lowest:  #FFFFFF;\n    --md-sys-color-surface-container-low:     #F7F2FA;\n    --md-sys-color-surface-container:         #F3EDF7;\n    --md-sys-color-surface-container-high:    #ECE6F0;\n    --md-sys-color-surface-container-highest: #E6E0E9;\n\n    /* ── Inverse ───────────────────────────────── */\n    --md-sys-color-inverse-surface:       #313033;\n    --md-sys-color-inverse-on-surface:    #F4EFF4;\n    --md-sys-color-inverse-primary:       #D0BCFF;\n\n    /* ── Utility ───────────────────────────────── */\n    --md-sys-color-outline:               #79747E;\n    --md-sys-color-outline-variant:       #CAC4D0;\n    --md-sys-color-shadow:                #000000;\n    --md-sys-color-scrim:                 #000000;\n    --md-sys-color-surface-tint:          #6750A4;\n\n    /* ── Elevation shadows ─────────────────────── */\n    --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.3),   0 1px 3px 1px rgba(0,0,0,.15);\n    --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.3),   0 2px 6px 2px rgba(0,0,0,.15);\n    --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);\n    --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.3);\n\n    /* ── Typography ────────────────────────────── */\n    --md-sys-typescale-font: 'Roboto', 'Google Sans', sans-serif;\n\n    /* ── Shape ─────────────────────────────────── */\n    --md-sys-shape-corner-none:        0px;\n    --md-sys-shape-corner-extra-small: 4px;\n    --md-sys-shape-corner-small:       8px;\n    --md-sys-shape-corner-medium:      12px;\n    --md-sys-shape-corner-large:       16px;\n    --md-sys-shape-corner-extra-large: 28px;\n    --md-sys-shape-corner-full:        9999px;\n  }\n\n  body {\n    font-family: var(--md-sys-typescale-font);\n    background-color: var(--md-sys-color-background);\n    color: var(--md-sys-color-on-background);\n  }\n\n  #app {\n    min-height: 100vh;\n  }\n`;\n\nconst DARK = `\n  @media (prefers-color-scheme: dark) {\n    :root {\n      /* ── Primary ─────────────────────────────── */\n      --md-sys-color-primary:               #D0BCFF;\n      --md-sys-color-on-primary:            #381E72;\n      --md-sys-color-primary-container:     #4F378B;\n      --md-sys-color-on-primary-container:  #EADDFF;\n\n      /* ── Secondary ───────────────────────────── */\n      --md-sys-color-secondary:             #CCC2DC;\n      --md-sys-color-on-secondary:          #332D41;\n      --md-sys-color-secondary-container:   #4A4458;\n      --md-sys-color-on-secondary-container:#E8DEF8;\n\n      /* ── Tertiary ────────────────────────────── */\n      --md-sys-color-tertiary:              #EFB8C8;\n      --md-sys-color-on-tertiary:           #492532;\n      --md-sys-color-tertiary-container:    #633B48;\n      --md-sys-color-on-tertiary-container: #FFD8E4;\n\n      /* ── Error ───────────────────────────────── */\n      --md-sys-color-error:                 #F2B8B5;\n      --md-sys-color-on-error:              #601410;\n      --md-sys-color-error-container:       #8C1D18;\n      --md-sys-color-on-error-container:    #F9DEDC;\n\n      /* ── Surface & Background ────────────────── */\n      --md-sys-color-background:            #1C1B1F;\n      --md-sys-color-on-background:         #E6E1E5;\n      --md-sys-color-surface:               #1C1B1F;\n      --md-sys-color-on-surface:            #E6E1E5;\n      --md-sys-color-surface-variant:       #49454F;\n      --md-sys-color-on-surface-variant:    #CAC4D0;\n      --md-sys-color-surface-container-lowest:  #0F0E13;\n      --md-sys-color-surface-container-low:     #1D1B20;\n      --md-sys-color-surface-container:         #211F26;\n      --md-sys-color-surface-container-high:    #2B2930;\n      --md-sys-color-surface-container-highest: #36343B;\n\n      /* ── Inverse ─────────────────────────────── */\n      --md-sys-color-inverse-surface:       #E6E1E5;\n      --md-sys-color-inverse-on-surface:    #313033;\n      --md-sys-color-inverse-primary:       #6750A4;\n\n      /* ── Utility ─────────────────────────────── */\n      --md-sys-color-outline:               #938F99;\n      --md-sys-color-outline-variant:       #49454F;\n\n      /* ── Elevation (brighter overlays in dark) ── */\n      --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.6),   0 1px 3px 1px rgba(0,0,0,.4);\n      --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.6),   0 2px 6px 2px rgba(0,0,0,.4);\n      --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.6);\n      --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.6);\n    }\n  }\n`;\n\nlet applied = false;\n\n/**\n * Injects the MD3 design-token stylesheet into `document.adoptedStyleSheets`.\n * Safe to call multiple times — subsequent calls are no-ops.\n */\nexport function applyTheme(): void {\n  if (applied || typeof document === 'undefined') return;\n  applied = true;\n\n  const sheet = new CSSStyleSheet();\n  sheet.replaceSync(LIGHT + DARK);\n  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];\n}\n\n// Auto-apply when the module is imported (mirrors the old style.css import).\napplyTheme();\n"],"names":["LIGHT","DARK","applied","applyTheme","sheet"],"mappings":"AAUA,MAAMA,IAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiFRC,IAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Db,IAAIC,IAAU;AAMP,SAASC,IAAmB;AACjC,MAAID,KAAW,OAAO,WAAa,IAAa;AAChD,EAAAA,IAAU;AAEV,QAAME,IAAQ,IAAI,cAAA;AAClB,EAAAA,EAAM,YAAYJ,IAAQC,CAAI,GAC9B,SAAS,qBAAqB,CAAC,GAAG,SAAS,oBAAoBG,CAAK;AACtE;AAGAD,EAAA;"}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@jasonshimmy/cer-material",
+  "version": "0.1.2",
+  "description": "Material Design 3 web components built on @jasonshimmy/custom-elements-runtime",
+  "type": "module",
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "reactive",
+    "typescript",
+    "frontend",
+    "ui"
+  ],
+  "author": "Jason Shimkoski <https://jasonshimmy.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jshimkoski/cer-material.git"
+  },
+  "homepage": "https://github.com/jshimkoski/cer-material#readme",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js",
+      "require": "./dist/theme.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:lib": "vite build --mode lib",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "@jasonshimmy/custom-elements-runtime": ">=2.5.0"
+  },
+  "devDependencies": {
+    "@jasonshimmy/custom-elements-runtime": "^2.6.0",
+    "@types/node": "^25.4.0",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}