@epa-wg/custom-element-dist 0.0.37 → 0.0.39

package/src/custom-element/ide/customData-dce.json

@@ -57,7 +57,7 @@
   "tags": [
     {
       "name": "custom-element",
-      "description": "Declarative Cuestom ELement(DCE).  `<custom-element tag='my-element'></custom-element>`.",
+      "description": "Declarative Custom Element (DCE). `<custom-element tag='my-element'></custom-element>`.",
       "attributes": [
         {
           "name": "hidden",
@@ -173,7 +173,7 @@
       "references": [
         {
           "name": "docs",
-          "url": "https://github.com/EPA-WG/custom-element"
+          "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/location-element.html"
         }
       ]
     },
@@ -222,7 +222,7 @@
           "references": [
             {
               "name": "docs",
-              "url": "https://github.com/EPA-WG/custom-element"
+              "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/http-request.html"
             }
           ]
         },
@@ -263,7 +263,7 @@
       "references": [
         {
           "name": "docs",
-          "url": "https://github.com/EPA-WG/custom-element"
+          "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/http-request.html"
         }
       ]
     },
@@ -289,7 +289,7 @@
           "references": [
             {
               "name": "docs",
-              "url": "https://github.com/EPA-WG/custom-element"
+              "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html"
             }
           ]
         },
@@ -300,7 +300,7 @@
           "references": [
             {
               "name": "docs",
-              "url": "https://github.com/EPA-WG/custom-element"
+              "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html"
             }
           ]
         },
@@ -311,7 +311,7 @@
           "references": [
             {
               "name": "docs",
-              "url": "https://github.com/EPA-WG/custom-element"
+              "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html"
             }
           ]
         },
@@ -330,7 +330,7 @@
       "references": [
         {
           "name": "docs",
-          "url": "https://github.com/EPA-WG/custom-element"
+          "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html"
         }
       ]
     }

package/src/custom-element/ide/web-types-dce.json

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.37",
+    "version": "0.0.39",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {
@@ -105,7 +105,7 @@
                 {
                     "name": "location-element",
                     "description": "get/set window URL parts or from SRC URL",
-                    "doc-url": "https://github.com/EPA-WG/custom-element",
+                    "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/location-element.html",
                     "attributes": [
                         {
                             "name": "href",
@@ -181,13 +181,13 @@
                 {
                     "name": "http-request",
                     "description": "Fetches data from a URL and exposes request, response, and parsed data via the value property. Supports JSON and XML response parsing.",
-                    "doc-url": "https://github.com/EPA-WG/custom-element",
+                    "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/http-request.html",
                     "attributes": [
                         {
                             "name": "url",
                             "description": "The URL to fetch data from. When changed, triggers a new fetch request.",
                             "required": false,
-                            "doc-url": "https://github.com/EPA-WG/custom-element",
+                            "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/http-request.html",
                             "value": {
                                 "type": "string"
                             }
@@ -240,7 +240,7 @@
                 {
                     "name": "local-storage",
                     "description": "Provides access to localStorage with reactive updates. Reads and writes values to localStorage by key.",
-                    "doc-url": "https://github.com/EPA-WG/custom-element",
+                    "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html",
                     "attributes": [
                         {
                             "name": "key",
@@ -255,7 +255,7 @@
                             "name": "type",
                             "description": "Value type: text, json, or input types (number, date). Defaults to text.",
                             "required": false,
-                            "doc-url": "https://github.com/EPA-WG/custom-element",
+                            "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html",
                             "value": {
                                 "type": "string"
                             }
@@ -264,7 +264,7 @@
                             "name": "value",
                             "description": "Initial value to set in localStorage. If omitted, reads existing value.",
                             "required": false,
-                            "doc-url": "https://github.com/EPA-WG/custom-element",
+                            "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html",
                             "value": {
                                 "type": "string"
                             }
@@ -273,7 +273,7 @@
                             "name": "live",
                             "description": "When present, monitors localStorage changes and updates reactively",
                             "required": false,
-                            "doc-url": "https://github.com/EPA-WG/custom-element",
+                            "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html",
                             "value": {
                                 "type": "boolean"
                             }

package/src/custom-element/ide/web-types-xsl.json

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.37",
+    "version": "0.0.39",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/src/material/components/action.html

@@ -27,6 +27,7 @@ Action variation
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
     <title>Components - custom-element - Material Design</title>
     <link href="../../custom-element/demo/wc-square.svg" rel="icon"/>
+    <link href="../../css/cem-combined.css" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=shift" />    <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
           integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
@@ -43,31 +44,31 @@ Action variation
     <style>
         @import "../angular.css";
         @import "../material.css";
-        @import "../theme/semantic.css";
-        @import "../theme/consumer-theme.css";
+        @import "./cem-theme-components.css";
         @import "../demo.css";
         main{
             display: flex; flex-wrap: wrap;
-            gap: 3rem;
-            padding: 5rem;
+            gap: var(--cem-gap-page);
+            padding: var(--cem-layout-gutter-max);
             &>p{ min-width: 90%; }
             html-demo-element
             {   overflow: visible;
-                [slot="legend"]{ border-radius: 1rem 1rem 0 0; }
-                [slot="description"]{ padding: 0 1rem 1rem 1rem; dd{ padding: 0 !important;margin: 0; }}
+                [slot="legend"]{ border-radius: var(--cem-bend-surface) var(--cem-bend-surface) 0 0; }
+                [slot="description"]{ padding: 0 var(--cem-inset-container) var(--cem-inset-container) var(--cem-inset-container); dd{ padding: 0 !important;margin: 0; }}
                 [slot="description"] dd{ padding: 0; }
-                [slot="demo"]{ display: flex; gap: 2rem; align-items: center; justify-content: center;}
+                [slot="demo"]{ display: flex; gap: var(--cem-gap-section); align-items: center; justify-content: center;}
             }
-            var{ color: darkgreen; font-weight: bold; }
-            flex-3x{ display: inline-flex; flex-wrap: wrap;gap:3rem; max-width:12rem;}
+            var{ color: var(--cem-palette-calm-text); font-weight: var(--cem-typography-tag-font-weight); }
+            flex-3x{ display: inline-flex; flex-wrap: wrap; gap: var(--cem-gap-page); max-width: 12rem;}
             cem-action{display: inline-block;}
+        }
     </style>
 </head>
 <!--
 ToDO
 * docs w/ how to use
 -->
-<body>
+<body class="cem-theme-light">
 <template id="cem-action">
     <attribute name="text"
             aria-description="button text content. "
@@ -85,15 +86,69 @@ ToDO
             aria-description="Boolean. Default is 'false'. Values: true|false"
             ></attribute>
     <style>
-        & button{
-            display: flex; align-items: center; justify-content: center; gap:1em;
+        & {
+            display: inline-block;
+            --cem-action-background-color: var(--cem-action-explicit-default-background);
+            --cem-action-color: var(--cem-action-explicit-default-text);
+        }
+        &[color="primary"] {
+            --cem-action-background-color: var(--cem-action-primary-default-background);
+            --cem-action-color: var(--cem-action-primary-default-text);
+        }
+        &[color="secondary"] {
+            --cem-action-background-color: var(--cem-action-alternate-default-background);
+            --cem-action-color: var(--cem-action-alternate-default-text);
+        }
+        &[color="success"] {
+            --cem-action-background-color: var(--cem-palette-calm);
+            --cem-action-color: var(--cem-palette-calm-text);
+        }
+        &[color="alert"] {
+            --cem-action-background-color: var(--cem-action-destructive-default-background);
+            --cem-action-color: var(--cem-action-destructive-default-text);
+        }
+        &:hover {
+            --cem-action-background-color: var(--cem-action-explicit-hover-background);
+            --cem-action-color: var(--cem-action-explicit-hover-text);
+            --cem-action-box-shadow: var(--cem-action-box-shadow-hover);
+        }
+        &[color="primary"]:hover {
+            --cem-action-background-color: var(--cem-action-primary-hover-background);
+            --cem-action-color: var(--cem-action-primary-hover-text);
+        }
+        &[color="secondary"]:hover {
+            --cem-action-background-color: var(--cem-action-alternate-hover-background);
+            --cem-action-color: var(--cem-action-alternate-hover-text);
+        }
+        &[color="alert"]:hover {
+            --cem-action-background-color: var(--cem-action-destructive-hover-background);
+            --cem-action-color: var(--cem-action-destructive-hover-text);
+        }
+        &:active {
+            --cem-action-box-shadow: var(--cem-action-box-shadow-active);
+        }
+        & button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--cem-gap-related);
+            width: 100%;
+            min-height: var(--cem-control-height);
+            padding: var(--cem-action-box-padding);
+            border: var(--cem-action-border, var(--cem-stroke-none) solid transparent);
+            border-radius: var(--cem-action-border-radius);
             background-color: var(--cem-action-background-color);
             color: var(--cem-action-color);
-            width: 100%;
+            box-shadow: var(--cem-action-box-shadow);
+            font-family: var(--cem-typography-ui-font-family);
+            font-size: var(--cem-typography-ui-font-size);
+            font-weight: var(--cem-typography-ui-font-weight);
+            transition: var(--cem-action-transition);
+        }
+        &:focus-within button {
+            outline: var(--cem-stroke-focus) solid var(--cem-zebra-color-1);
+            outline-offset: var(--cem-stroke-indicator-offset);
         }
-        &[color="secondary"]>*>dd{ background-color: var(--cem-action-color-secondary); }
-        &[color="success"]>*>dd{ background-color: var(--cem-action-color-success); }
-        &[color="alert"]>*>dd{ background-color: var(--cem-action-color-alert); }
 
     </style>
     <button><slot>{text}</slot></button>
@@ -104,7 +159,7 @@ ToDO
 <custom-element hidden src="./icon-link.html#cem-icon-link" tag="cem-icon-link"></custom-element>
 <custom-element hidden src="./icon.html#cem-icon" tag="cem-icon"></custom-element>
 
-<header class="cem-theme-teal">
+<header>
     <custom-element src="../index.html#nav-head"></custom-element>
 </header>
 <main>
@@ -188,10 +243,10 @@ ToDO
     <template>
         <style>
             &
-            {   --cem-action-text-color:red;
-                --cem-action-color:#FF08;
-                --cem-action-border: 1px blue solid;
-                cem-action dd{box-shadow: -2px 3px 8px blue;}
+            {   --cem-action-text-color: var(--cem-action-destructive-default-text);
+                --cem-action-color: var(--cem-action-destructive-default-background);
+                --cem-action-border: var(--cem-stroke-boundary) solid var(--cem-palette-trust);
+                cem-action dd{box-shadow: var(--cem-layer-work-floating);}
             }
         </style>
         <cem-action text="123"> CUSTOM COLOR </cem-action>
@@ -259,4 +314,4 @@ ToDO
 <script src="https://unpkg.com/html-demo-element@1.0.8/html-demo-element.js" type="module"></script>
 
 </body>
-</html>
+</html>

package/src/material/components/autocomplete.html

@@ -5,6 +5,7 @@
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
     <title>Components - custom-element - Material Design</title>
     <link href="../../custom-element/demo/wc-square.svg" rel="icon"/>
+    <link href="../../css/cem-combined.css" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
           integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
@@ -21,25 +22,25 @@
     <style>
         @import "../angular.css";
         @import "../material.css";
-        @import "../theme/semantic.css";
+        @import "./cem-theme-components.css";
         @import "../demo.css";
         main{
             display: flex; flex-wrap: wrap;
-            gap: 3rem;
-            padding: 5rem;
+            gap: var(--cem-gap-page);
+            padding: var(--cem-layout-gutter-max);
             &>p{ min-width: 90%; }
             html-demo-element{flex:1; width: 100%; }
         }
     </style>
 </head>
 
-<body>
+<body class="cem-theme-light">
 <custom-element tag="cem-icon-link" hidden src="./icon-link.html#cem-icon-link" ></custom-element>
 <custom-element tag="cem-input"     hidden src="./input.html#cem-input" ></custom-element>
 <custom-element tag="cem-menu"      hidden src="./menu.html#cem-menu"></custom-element>
 
 
-<header class="cem-theme-teal">
+<header>
     <custom-element src="../index.html#nav-head" ></custom-element>
 </header>
 <main>
@@ -165,4 +166,4 @@
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 
 </body>
-</html>
+</html>

package/src/material/components/badge.html

@@ -5,6 +5,7 @@
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
     <title>Components - custom-element - Material Design</title>
     <link href="../../custom-element/demo/wc-square.svg" rel="icon"/>
+    <link href="../../css/cem-combined.css" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
           integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
@@ -21,29 +22,29 @@
     <style>
         @import "../angular.css";
         @import "../material.css";
-        @import "../theme/semantic.css";
+        @import "./cem-theme-components.css";
         @import "../demo.css";
         main{
             display: flex; flex-wrap: wrap;
-            gap: 3rem;
-            padding: 5rem;
+            gap: var(--cem-gap-page);
+            padding: var(--cem-layout-gutter-max);
             &>p{ min-width: 90%; }
             html-demo-element
             {   overflow: visible;
-                [slot="legend"]{ border-radius: 1rem 1rem 0 0; }
-                [slot="description"]{ padding: 0 1rem 1rem 1rem; dd{ padding: 0 !important;margin: 0; }}
+                [slot="legend"]{ border-radius: var(--cem-bend-surface) var(--cem-bend-surface) 0 0; }
+                [slot="description"]{ padding: 0 var(--cem-inset-container) var(--cem-inset-container) var(--cem-inset-container); dd{ padding: 0 !important;margin: 0; }}
                 [slot="description"] dd{ padding: 0; }
             }
-            var{ color: darkgreen; font-weight: bold; }
-            html-demo-element { [slot="demo"] { display: flex; gap: 8rem; } } }
-            flex-3x{ display: inline-flex; flex-wrap: wrap;gap:3rem; max-width:12rem;}
+            var{ color: var(--cem-palette-calm-text); font-weight: var(--cem-typography-tag-font-weight); }
+            html-demo-element { [slot="demo"] { display: flex; gap: var(--cem-gap-page); } } }
+            flex-3x{ display: inline-flex; flex-wrap: wrap; gap: var(--cem-gap-page); max-width: 12rem;}
     </style>
 </head>
 <!--
 ToDO
 * docs w/ how to use
 -->
-<body>
+<body class="cem-theme-light">
 <template id="cem-badge">
     <attribute name="text"
             aria-description="Badge text content. Up to 4 characters including + sign."
@@ -61,7 +62,7 @@ ToDO
             aria-description="Boolean. Default is 'false'. Values: true|false"
             ></attribute>
     <style>
-        &[dot]>*>dd{ height: 0; width: 0; min-width: 0.5rem; color: transparent; padding: 0; min-height: 0.5rem; }
+        &[dot]>*>dd{ height: 0; width: 0; min-width: var(--cem-dim-x-small); color: transparent; padding: 0; min-height: var(--cem-dim-x-small); }
         &[invisible]>*>dd{ height: 0; width: 0; min-width: 0; color: transparent; padding: 0; min-height:0; }
         &[align~=left]>*>dd{  --cem-badge-align-h: -100%; }
         &[align~=center]>*>dd{  --cem-badge-align-h: -25%; }
@@ -70,9 +71,11 @@ ToDO
         &[align~=middle]>*>dd{  --cem-badge-align-v: 25%; }
         &[align~=bottom]>*>dd{  --cem-badge-align-v: 75%; }
         &{ position: relative; display: inline-block; --cem-badge-align-v: -50%; --cem-badge-align-h: 50%; }
+        &[color="primary"]{ --cem-badge-color: var(--cem-badge-color-primary); --cem-badge-text-color: var(--cem-action-primary-default-text); }
+        &[color="secondary"]{ --cem-badge-color: var(--cem-badge-color-secondary); --cem-badge-text-color: var(--cem-action-alternate-default-text); }
+        &[color="success"]{ --cem-badge-color: var(--cem-badge-color-success); --cem-badge-text-color: var(--cem-palette-calm-text); }
+        &[color="alert"]{ --cem-badge-color: var(--cem-badge-color-alert); --cem-badge-text-color: var(--cem-action-destructive-default-text); }
         &>*>dd{
-            /*position: absolute; top:-0.5rem; border-radius: 0.5rem; */
-            /*padding: 0.25rem; background-color: red;*/
             display: flex ;
             flex-direction: row;
             flex-wrap: wrap;
@@ -83,27 +86,24 @@ ToDO
             align-items: center;
             position: absolute;
             box-sizing: border-box;
-            font-family: Roboto, Helvetica, Arial, sans-serif;
-            font-weight: 500;
-            font-size: 0.75rem;
-            min-width: 20px;
-            line-height: 1;
-            height: 20px;
+            font-family: var(--cem-typography-tag-font-family);
+            font-weight: var(--cem-typography-tag-font-weight);
+            font-size: var(--cem-typography-tag-font-size);
+            min-width: calc(var(--cem-dim-large) + var(--cem-dim-xx-small));
+            line-height: var(--cem-typography-tag-line-height);
+            height: calc(var(--cem-dim-large) + var(--cem-dim-xx-small));
             z-index: 1;
-            background-color: var(--cem-badge-color, --cem-badge-color-primary);
-            color: var(--cem-badge-text-color,rgb(255, 255, 255));
+            background-color: var(--cem-badge-color, var(--cem-badge-color-primary));
+            color: var(--cem-badge-text-color, var(--cem-action-primary-default-text));
             top: 0;
             right: 0;
             transform: scale(1) translate(var(--cem-badge-align-h), var(--cem-badge-align-v));
             transform-origin: 100% 0%;
-            padding: 0 6px;
-            border-radius: 10px;
-            border: var(--cem-badge-border, none);
-            transition: all 225ms cubic-bezier(0.4, 0, 0.2, 1);
+            padding: 0 var(--cem-dim-x-small);
+            border-radius: var(--cem-bend-round);
+            border: var(--cem-badge-border);
+            transition: all var(--cem-duration-action) var(--cem-easing-smooth);
         }
-        &[color="secondary"]>*>dd{ background-color: var(--cem-badge-color-secondary); }
-        &[color="success"]>*>dd{ background-color: var(--cem-badge-color-success); }
-        &[color="alert"]>*>dd{ background-color: var(--cem-badge-color-alert); }
 
     </style>
     <dd>{text}</dd>
@@ -111,11 +111,10 @@ ToDO
 </template>
 
 <custom-element hidden src="#cem-badge" tag="cem-badge"></custom-element>
-<custom-element hidden src="./icon-link.html#cem-badge-link" tag="cem-badge-link"></custom-element>
 <custom-element hidden src="./icon-link.html#cem-icon-link" tag="cem-icon-link"></custom-element>
 <custom-element hidden src="./icon.html#cem-icon" tag="cem-icon"></custom-element>
 
-<header class="cem-theme-teal">
+<header>
     <custom-element src="../index.html#nav-head"></custom-element>
 </header>
 <main>
@@ -165,10 +164,10 @@ ToDO
     <template>
         <style>
             &
-            {   --cem-badge-text-color:red;
-                --cem-badge-color:#FF08;
-                --cem-badge-border: 1px blue solid;
-                cem-badge dd{box-shadow: -2px 3px 8px blue;}
+            {   --cem-badge-text-color: var(--cem-action-destructive-default-text);
+                --cem-badge-color: var(--cem-action-destructive-default-background);
+                --cem-badge-border: var(--cem-stroke-boundary) solid var(--cem-palette-trust);
+                cem-badge dd{box-shadow: var(--cem-layer-work-floating);}
             }
         </style>
         <cem-badge text="123"> CUSTOM COLOR </cem-badge>
@@ -236,4 +235,4 @@ ToDO
 <script src="https://unpkg.com/html-demo-element@1.0.8/html-demo-element.js" type="module"></script>
 
 </body>
-</html>
+</html>

package/src/material/components/cem-theme-components.css

@@ -0,0 +1,131 @@
+:root {
+    --primary-color: var(--cem-palette-trust);
+    --secondary-color: var(--cem-palette-enthusiasm);
+    --alert-color: var(--cem-palette-danger);
+    --text-color: var(--cem-palette-comfort-text);
+
+    --cem-action-explicit-default-background: var(--cem-palette-creativity);
+    --cem-action-explicit-default-text: var(--cem-palette-creativity-text);
+    --cem-action-explicit-hover-background: color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-creativity-x));
+    --cem-action-explicit-hover-text: var(--cem-palette-creativity-text);
+    --cem-action-explicit-active-background: color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x));
+    --cem-action-explicit-active-text: var(--cem-palette-creativity-text-x);
+
+    --cem-action-primary-default-background: var(--cem-palette-trust);
+    --cem-action-primary-default-text: var(--cem-palette-trust-text);
+    --cem-action-primary-hover-background: color-mix(in srgb, var(--cem-palette-trust) 70%, var(--cem-palette-trust-x));
+    --cem-action-primary-hover-text: var(--cem-palette-trust-text);
+    --cem-action-primary-active-background: color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x));
+    --cem-action-primary-active-text: var(--cem-palette-trust-text-x);
+    --cem-action-primary-disabled-background: color-mix(in srgb, var(--cem-palette-trust) 30%, var(--cem-palette-conservative-x));
+    --cem-action-primary-disabled-text: var(--cem-palette-conservative-text-x);
+
+    --cem-action-contextual-default-background: var(--cem-palette-comfort);
+    --cem-action-contextual-default-text: var(--cem-palette-comfort-text);
+    --cem-action-contextual-hover-background: color-mix(in srgb, var(--cem-palette-comfort) 70%, var(--cem-palette-comfort-x));
+    --cem-action-contextual-hover-text: var(--cem-palette-comfort-text);
+    --cem-action-contextual-active-background: color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x));
+    --cem-action-contextual-active-text: var(--cem-palette-comfort-text-x);
+    --cem-action-contextual-disabled-background: color-mix(in srgb, var(--cem-palette-comfort) 30%, var(--cem-palette-conservative-x));
+    --cem-action-contextual-disabled-text: var(--cem-palette-conservative-text-x);
+
+    --cem-action-alternate-default-background: var(--cem-palette-enthusiasm);
+    --cem-action-alternate-default-text: var(--cem-palette-enthusiasm-text);
+    --cem-action-alternate-hover-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 70%, var(--cem-palette-enthusiasm-x));
+    --cem-action-alternate-hover-text: var(--cem-palette-enthusiasm-text);
+    --cem-action-alternate-active-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x));
+    --cem-action-alternate-active-text: var(--cem-palette-enthusiasm-text-x);
+
+    --cem-action-destructive-default-background: var(--cem-palette-danger);
+    --cem-action-destructive-default-text: var(--cem-palette-danger-text);
+    --cem-action-destructive-hover-background: color-mix(in srgb, var(--cem-palette-danger) 70%, var(--cem-palette-danger-x));
+    --cem-action-destructive-hover-text: var(--cem-palette-danger-text);
+    --cem-action-destructive-active-background: color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-danger-x));
+    --cem-action-destructive-active-text: var(--cem-palette-danger-text-x);
+
+    --cem-action-background-color: var(--cem-action-explicit-default-background);
+    --cem-action-color: var(--cem-action-explicit-default-text);
+    --cem-action-color-secondary: var(--cem-action-alternate-default-background);
+    --cem-action-color-success: var(--cem-palette-calm);
+    --cem-action-color-alert: var(--cem-action-destructive-default-background);
+    --cem-action-border-radius: var(--cem-bend-control);
+    --cem-action-box-padding: var(--cem-control-padding-y) var(--cem-control-padding-x);
+    --cem-action-box-shadow: var(--cem-layer-work);
+    --cem-action-box-shadow-hover: var(--cem-layer-work-floating);
+    --cem-action-box-shadow-active: var(--cem-layer-base);
+    --cem-action-transition:
+        background-color var(--cem-duration-action) var(--cem-easing-smooth),
+        color var(--cem-duration-action) var(--cem-easing-smooth),
+        box-shadow var(--cem-duration-action) var(--cem-easing-smooth);
+
+    --cem-action-primary-color: var(--cem-action-primary-default-text);
+    --cem-action-primary-background: var(--cem-action-primary-default-background);
+    --cem-action-primary-background-hover: var(--cem-action-primary-hover-background);
+    --cem-action-primary-background-focus: var(--cem-action-primary-hover-background);
+    --cem-action-primary-background-active: var(--cem-action-primary-active-background);
+
+    --cem-list-background-color: var(--cem-action-contextual-default-background);
+    --cem-list-background-color-hover: var(--cem-action-contextual-hover-background);
+    --cem-list-background-color-focus: var(--cem-action-primary-hover-background);
+
+    --cem-app-surface-variant: var(--cem-palette-conservative);
+    --cem-app-on-surface: var(--cem-palette-conservative-text);
+    --cem-app-primary: var(--cem-palette-trust);
+    --cem-on-surface-variant: var(--cem-palette-conservative-text);
+
+    --cem-filled-text-field-container-color: var(--cem-palette-conservative);
+    --cem-filled-text-field-container-color-hover: color-mix(in srgb, var(--cem-palette-conservative) 70%, var(--cem-palette-conservative-x));
+    --cem-filled-text-field-label-text-color: var(--cem-palette-conservative-text);
+    --cem-filled-text-field-input-text-color: var(--cem-palette-comfort-text);
+    --cem-filled-text-field-caret-color: var(--cem-palette-trust);
+    --cem-outline-color-focus: var(--cem-palette-creativity-x);
+    --cem-focus-outline-height: var(--cem-stroke-strong);
+    --cem-input-outline-color: var(--cem-palette-conservative-x);
+    --cem-input-outline: inset 0 calc(-1 * var(--cem-stroke-divider)) 0 var(--cem-input-outline-color);
+    --cem-sys-body-small-size: var(--cem-typography-size-xxs);
+    --cem-form-field-subscript-text-size: var(--cem-typography-tag-font-size);
+
+    --cem-drop-transition: all var(--cem-duration-overlay) var(--cem-easing-highlighted-end);
+
+    --cem-icon-size-small: var(--cem-typography-size-l);
+    --cem-icon-size: var(--cem-icon-button-icon-size);
+    --cem-icon-size-large: var(--cem-dim-x-large);
+}
+
+.cem-theme-light,
+[data-theme="cem-theme-light"] {
+    --cem-app-surface-variant: var(--cem-color-grey-l);
+    --cem-filled-text-field-container-color: var(--cem-color-grey-l);
+    --cem-filled-text-field-container-color-hover: color-mix(in srgb, var(--cem-color-grey-l) 70%, var(--cem-color-grey-d));
+}
+
+.cem-theme-dark,
+[data-theme="cem-theme-dark"] {
+    --cem-app-surface-variant: var(--cem-color-grey-d);
+    --cem-filled-text-field-container-color: var(--cem-color-grey-d);
+    --cem-filled-text-field-container-color-hover: color-mix(in srgb, var(--cem-color-grey-d) 70%, var(--cem-color-grey-l));
+}
+
+body {
+    background-color: var(--cem-palette-comfort);
+    color: var(--cem-palette-comfort-text);
+    font-family: var(--cem-typography-reading-font-family);
+}
+
+.cem-bend-sharp {
+    --cem-bend: var(--cem-bend-sharp);
+    --cem-bend-control: var(--cem-bend);
+    --cem-action-border-radius: var(--cem-bend-control);
+}
+
+.cem-bend-smooth {
+    --cem-bend: var(--cem-bend-smooth);
+    --cem-bend-control: var(--cem-bend);
+    --cem-action-border-radius: var(--cem-bend-control);
+}
+
+.cem-bend-round {
+    --cem-bend: var(--cem-bend-round);
+    --cem-bend-control: var(--cem-bend);
+    --cem-action-border-radius: var(--cem-bend-control);
+}