npm - @epa-wg/custom-element-dist - Versions diffs - 0.0.37 → 0.0.39 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/src/material/components/dropdown.html CHANGED Viewed

@@ -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,14 +22,14 @@
     <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%;
@@ -38,11 +39,11 @@
                 overflow: visible;
                 [slot="legend"] {
-                    border-radius: 1rem 1rem 0 0;
+                    border-radius: var(--cem-bend-surface) var(--cem-bend-surface) 0 0;
                 }
                 [slot="description"] {
-                    padding: 0 1rem 1rem 1rem;
+                    padding: 0 var(--cem-inset-container) var(--cem-inset-container) var(--cem-inset-container);
                     dd {
                         padding: 0 !important;
@@ -59,11 +60,11 @@
     </style>
 </head>
-<body>
+<body class="cem-theme-light">
 <custom-element hidden src="./icon-link.html#cem-icon-link" tag="cem-icon-link"></custom-element>
 <custom-element hidden src="./menu.html#cem-menu" tag="cem-menu"></custom-element>
-<header class="cem-theme-teal">
+<header>
     <custom-element src="../index.html#nav-head"></custom-element>
 </header>
 <main>
@@ -80,13 +81,24 @@
                 &>* {
                     position: relative;
-                    --cem-dropdown-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
-                    --cem-dropdown-max-height: 10rem;
-                    --cem-dropdown-base-min-width: 8em;
+                    --cem-dropdown-shadow: var(--cem-layer-overlay);
+                    --cem-dropdown-max-height: calc(4 * var(--cem-menu-row-height));
+                    --cem-dropdown-base-min-width: calc(4 * var(--cem-control-height));
                     & > label {
                         min-width: var(--cem-dropdown-base-min-width);
                         display: inline-block;
+                        min-height: var(--cem-control-height);
+                        padding: var(--cem-control-padding-y) var(--cem-control-padding-x);
+                        border-radius: var(--cem-bend-control);
+                        background: var(--cem-action-contextual-default-background);
+                        color: var(--cem-action-contextual-default-text);
+                        cursor: pointer;
+                    }
+                    & > label:focus-visible {
+                        outline: var(--cem-stroke-focus) solid var(--cem-zebra-color-1);
+                        outline-offset: var(--cem-stroke-indicator-offset);
                     }
                     & > aside {
@@ -101,14 +113,17 @@
                         display: flex;
                         flex-direction: column;
+                        background: var(--cem-action-contextual-default-background);
+                        color: var(--cem-action-contextual-default-text);
                         border-radius: var(--cem-autocomplete-container-shape);
                         border-top-left-radius: 0;
                         border-top-right-radius: 0;
                         box-shadow: var(--cem-dropdown-shadow);
+                        z-index: 1;
                     }
                 }
             </style>
-            <slot name="base"><label>{$label}</label></slot>
+            <slot name="base"><label tabindex="0">{$label}</label></slot>
             <aside>
                 <slot name=""></slot>
             </aside>
@@ -170,4 +185,4 @@
 <script src="https://unpkg.com/html-demo-element@1/html-demo-element.js" type="module"></script>
 </body>
-</html>
+</html>

package/src/material/components/icon-link.html CHANGED Viewed

@@ -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,45 +22,46 @@
     <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; }
             }
+            cem-icon-link+cem-icon-link:before{ content: " ";}
         }
     </style>
 </head>
-<body>
+<body class="cem-theme-light">
 <template id="cem-icon-link">
     <attribute name="href"></attribute>
     <attribute name="icon"></attribute>
     <attribute aria-description="color appearance. Default value is 'normal'. Values: normal|primary|secondary|alert|blend"
                name="kind"></attribute>
     <style>
-        &:not([kind]) a, &[kind="normal"] a {
-            /*background-color: var(--mdc-theme-primary, #6200ee);*/
-        }
         a {
             display: inline-flex;
             align-items: center;
-            gap: 0.5rem;
-            padding: 0.5rem 1rem;;
-            border-radius: 1.5rem;
+            gap: var(--cem-gap-related);
+            min-height: var(--cem-control-height);
+            padding: var(--cem-action-box-padding);
+            border-radius: var(--cem-action-border-radius);
             background-color: var(--cem-action-primary-background);
             transition: var(--cem-action-transition);
             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);
+            &>span{ display: flex; align-items: center; }
             &:hover {
                 background-color: var(--cem-action-primary-background-hover);
                 box-shadow: var(--cem-action-box-shadow-hover);
@@ -69,15 +71,20 @@
                 background-color: var(--cem-action-primary-background-focus);
             }
+            &:focus-visible {
+                outline: var(--cem-stroke-focus) solid var(--cem-zebra-color-1);
+                outline-offset: var(--cem-stroke-indicator-offset);
+            }
             &:active, &:focus:active {
                 background-color: var(--cem-action-primary-background-active);
             }
             &, &:visited {
                 text-decoration: none;
-                color: var(--mat-light-blue-900);
+                color: var(--cem-action-primary-color);
             }
-            --icon-size: 2rem;
+            --icon-size: var(--cem-icon-size);
             min-height: var(--icon-size);
         }
@@ -99,7 +106,7 @@
 <custom-element hidden src="#cem-icon-link" tag="cem-icon-link"></custom-element>
-<header class="cem-theme-teal">
+<header>
     <custom-element src="../index.html#nav-head" ></custom-element>
 </header>
 <main>
@@ -158,4 +165,4 @@
 <script type="module" src="https://unpkg.com/html-demo-element@1.0.8/html-demo-element.js"></script>
 </body>
-</html>
+</html>

package/src/material/components/icon.html CHANGED Viewed

@@ -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,20 +22,20 @@
     <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; }
+            var{ color: var(--cem-palette-calm-text); font-weight: var(--cem-typography-tag-font-weight); }
         }
         cem-icon{ margin: 1rem; }
     </style>
@@ -43,7 +44,7 @@
 ToDO
 * docs w/ how to use
 -->
-<body>
+<body class="cem-theme-light">
 <template id="cem-icon">
     <attribute name="image"
             aria-description="defines the icon in one of the libraries or URL. The selection algorithm
@@ -64,9 +65,9 @@ ToDO
         &[size="normal"  ]>*>.icon{ height: var(--cem-icon-size);       font-size: var(--cem-icon-size); }
         &[size="small"   ]>*>.icon{ height: var(--cem-icon-size-small); font-size: var(--cem-icon-size-small); }
         &[size="large"   ]>*>.icon{ height: var(--cem-icon-size-large); font-size: var(--cem-icon-size-large); }
-        &{ display: inline-flex; justify-content: center; }
+        &{ display: inline-flex; justify-content: center; font-family: var(--cem-typography-ui-font-family); }
         &>* {
-            display: inline-flex; align-items: center; gap: calc( var(--cem-icon-size) / 4 );
+            display: inline-flex; align-items: center; gap: var(--cem-gap-related);
             .icon {
                 font-size: var(--cem-icon-size);
@@ -89,7 +90,7 @@ ToDO
 <custom-element hidden src="#cem-icon" tag="cem-icon"></custom-element>
 <custom-element hidden src="./icon-link.html#cem-icon-link" tag="cem-icon-link"></custom-element>
-<header class="cem-theme-teal">
+<header>
     <custom-element src="../index.html#nav-head"></custom-element>
 </header>
 <main>
@@ -234,9 +235,9 @@ ToDO
             For font based icons the color is inherited from CSS text <code>color</code>.
         </p>
         <template>
-<cem-icon image="fas fa-heart" style="color:red"     > red    </cem-icon>
-<cem-icon image="fas fa-heart" style="color:green"   > green  </cem-icon>
-<cem-icon image="fas fa-heart" style="color:blue"    > blue   </cem-icon>
+<cem-icon image="fas fa-heart" style="color:var(--cem-palette-danger)" > danger </cem-icon>
+<cem-icon image="fas fa-heart" style="color:var(--cem-palette-calm)"   > calm   </cem-icon>
+<cem-icon image="fas fa-heart" style="color:var(--cem-palette-trust)"  > trust  </cem-icon>
         </template>
     </html-demo-element>
@@ -249,4 +250,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/input.html CHANGED Viewed

@@ -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,12 +22,12 @@
     <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%; }
         }
@@ -36,12 +37,12 @@
     </style>
 </head>
-<body>
+<body class="cem-theme-light">
 <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>
 <pre>
@@ -127,36 +128,37 @@
                     display: flex; flex-direction: column; justify-content: center;
                     --input-padding: 0;
-                    --cem-input-container-shape: 0.25rem;
-                    --cem-input-background-color: var(--cem-list-background-color);
-                    --cem-input-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
-                    --cem-input-focus-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
+                    --cem-input-background-color: var(--cem-action-explicit-default-background);
+                    --cem-input-container-elevation-shadow: var(--cem-layer-work);
+                    --cem-input-focus-transition: all var(--cem-duration-action) var(--cem-easing-smooth);
                     &:has(input:invalid,input:user-invalid,input:out-of-range, .warn>*:not(:empty) )
-                    {   --cem-filled-text-field-label-text-color: var(--alert-color,red);
+                    {   --cem-filled-text-field-label-text-color: var(--alert-color, var(--cem-palette-danger));
                         --cem-input-outline-color:var(--cem-filled-text-field-label-text-color);
-                        --cem-input-outline: inset 0 -1px 0 var(--cem-input-outline-color);
+                        --cem-input-outline: inset 0 calc(-1 * var(--cem-stroke-divider)) 0 var(--cem-input-outline-color);
                         --cem-outline-color-focus: var(--cem-input-outline-color);
                         color: var(--cem-filled-text-field-label-text-color);
                         .supporting{ display: none; }
                     }
                     &>label
-                    {   display: flex; flex: 1; gap: 0.5rem;
-                        padding: 0.5rem 1rem;
-                        background-color: var(--cem-filled-text-field-container-color, var(--cem-app-surface-variant));
+                    {   display: flex; flex: 1; align-items: center; gap: var(--cem-gap-related);
+                        padding: var(--cem-control-padding-y) var(--cem-control-padding-x);
+                        background-color: var(--cem-input-background-color);
                         &:hover
-                        {   --cem-filled-text-field-container-color: var(--cem-filled-text-field-container-color-hover,silver);
-                            --cem-input-outline-color:var(--text-color,black);
-                            box-shadow:  inset 0 -1px 0 var(--cem-input-outline-color,black);
-                            color:var(--text-color,black)
+                        {   --cem-filled-text-field-container-color: var(--cem-filled-text-field-container-color-hover, var(--cem-list-background-color-hover));
+                            --cem-input-outline-color: var(--text-color, var(--cem-palette-comfort-text));
+                            box-shadow: inset 0 calc(-1 * var(--cem-stroke-divider)) 0 var(--cem-input-outline-color);
+                            color: var(--text-color, var(--cem-palette-comfort-text))
                         }
                         box-shadow: var(--cem-input-outline);
-                        transition: var(--drop-transition);
+                        transition: var(--cem-drop-transition);
                         box-sizing: border-box;
-                        min-height: 3.5rem;
+                        min-height: calc(var(--cem-control-height) + var(--cem-control-padding-y) + var(--cem-control-padding-y));
                         color: var(--cem-filled-text-field-label-text-color);
+                        font-family: var(--cem-typography-ui-font-family);
                         position: relative;
                         &>.entry{ display: flex;flex-direction: column; justify-content: center;flex:1; }
+                        &>span{ display: flex; }
                         label{display: flex;}
                         input
                         {   background: none; padding: var(--input-padding);
@@ -167,8 +169,9 @@
                             color: var(--cem-filled-text-field-input-text-color, var(--cem-app-on-surface));
                             caret-color: var(--cem-filled-text-field-caret-color, var(--cem-app-primary));
-                            font-size: 1rem;
-                            transition: var(--drop-transition);
+                            font-family: var(--cem-typography-ui-font-family);
+                            font-size: var(--cem-typography-ui-font-size);
+                            transition: var(--cem-drop-transition);
                         }
                         &:after{ display: block; width: 0; height: 0;  content: ' ';
                             left:0;
@@ -196,7 +199,7 @@
                     slice{display: none;}
                     .warn,.supporting
                     {
-                        padding: 0.25rem 1rem;
+                        padding: var(--cem-dim-xx-small) var(--cem-control-padding-x);
                         font-size: var(--cem-form-field-subscript-text-size, var(--cem-sys-body-small-size));
                     }
                     [slot="trailing"],[slot="leading"]{display: flex;}
@@ -567,4 +570,4 @@
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 </body>
-</html>
+</html>

package/src/material/components/menu.html CHANGED Viewed

@@ -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,27 +22,27 @@
     <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; }
             }
         }
     </style>
 </head>
-<body>
+<body class="cem-theme-light">
 <custom-element hidden src="./icon-link.html#cem-icon-link" tag="cem-icon-link"></custom-element>
-<header class="cem-theme-teal">
+<header>
     <custom-element src="../index.html#nav-head" ></custom-element>
 </header>
 <main>
@@ -71,18 +72,22 @@
                     &>*
                     {   display: flex;
                         align-items: center;
-                        padding: var(--cem-menu-item-padding);
-                        background-color: var( --cem-menu-item-background );
-                        color: var( --cem-menu-item-color );
+                        min-height: var(--cem-menu-row-height);
+                        padding: var(--cem-control-padding-y) var(--cem-control-padding-x);
+                        background-color: var(--cem-action-explicit-default-background);
+                        color: var(--cem-action-explicit-default-text);
                         text-decoration: none;
-                        font-weight: var(--cem-menu-item-font-weight);
-                        &:focus{ z-index: 1; }
-                        &[disabled],&[disabled]:visited{ color:var(--cem-menu-item-color-disabled); pointer-events: none;}
-                        &:visited{ color:var(--cem-menu-item-color); }
+                        font-family: var(--cem-typography-ui-font-family);
+                        font-size: var(--cem-typography-ui-font-size);
+                        font-weight: var(--cem-typography-tag-font-weight);
+                        transition: var(--cem-action-transition);
+                        &:focus{ z-index: 1; outline: var(--cem-stroke-focus) solid var(--cem-zebra-color-1); outline-offset: var(--cem-stroke-indicator-offset); }
+                        &[disabled],&[disabled]:visited{ color:var(--cem-action-explicit-disabled-text); pointer-events: none;}
+                        &:visited{ color:var(--cem-action-explicit-default-text); }
                         &:hover
                         {
-                            color: var(--cem-menu-item-hover-color);
-                            background-color: var(--cem-menu-item-hover-background);
+                            color: var(--cem-action-explicit-hover-text);
+                            background-color: var(--cem-action-explicit-hover-background);
                         }
                         &:empty{ display: none;}
                     }
@@ -157,7 +162,7 @@
     <template>
         <style>
             a
-            {   --cem-menu-item-color:blue;
+            {   --cem-menu-item-color: var(--cem-palette-trust);
                 --cem-menu-item-background: salmon;
                 --cem-menu-item-hover-background: blue;
                 --cem-menu-item-hover-color: yellow;
@@ -233,4 +238,4 @@
 <script type="module" src="https://unpkg.com/html-demo-element@1.0.8/html-demo-element.js"></script>
 </body>
-</html>
+</html>

package/src/material/components.html CHANGED Viewed

@@ -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,19 +22,19 @@
     <style>
         @import "./angular.css";
         @import "./material.css";
-        @import "./theme/semantic.css";
+        @import "./components/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);
             &>*{ flex: 1 1 12rem;}
             &>p{ min-width: 90%; }
         }
     </style>
 </head>
-<body>
+<body class="cem-theme-light">
 <custom-element tag="cem-icon"      hidden src="./components/icon.html#cem-icon" ></custom-element>
 <custom-element tag="cem-input"     hidden src="./components/input.html#cem-input" ></custom-element>
 <custom-element tag="cem-icon-link" hidden src="./components/icon-link.html#cem-icon-link" ></custom-element>
@@ -41,12 +42,12 @@
 <custom-element tag="cem-badge"     hidden src="./components/badge.html#cem-badge" ></custom-element>
 <custom-element tag="cem-dropdown"  hidden src="./components/dropdown.html#cem-dropdown" ></custom-element>
-<header class="cem-theme-teal">
+<header>
     <custom-element src="./index.html#nav-head" ></custom-element>
 </header>
 <main>
     <p>&lt;custom-element&gt; Material offers a wide variety of UI components based on the
-        <a href="https://material.io/components" >Material Design specification</a>.
+        <a href="https://github.com/EPA-WG/cem#readme" >Consumer Semantic Material Theme</a>.
     </p>
     <custom-element tag="demo-list-card" hidden>
         <template>
@@ -57,21 +58,21 @@
                 &>dce-root
                 {   display: inline-flex; flex-direction: column; justify-content: space-between;
                     flex: 1;
-                    transition: background .3s ease;
-                    border: 1px solid #c4c6d0;
-                    border-radius: 12px;
+                    transition: var(--cem-action-transition);
+                    border: var(--cem-stroke-boundary) solid var(--cem-palette-conservative-x);
+                    border-radius: var(--cem-bend-surface);
                     overflow: hidden;
-                    &>*{padding: 1rem;}
+                    &>*{padding: var(--cem-inset-container);}
                     &>a
-                    {   color: var(--cem-action-secondary-color, black);
-                        background-color:var(--cem-action-secondary-background, silver);
+                    {   color: var(--cem-action-explicit-default-text);
+                        background-color: var(--cem-action-explicit-default-background);
                         min-height: 6rem;
-                        transition: background .3s ease;
+                        transition: var(--cem-action-transition);
                         transform: translateZ(0);
-                        &:hover { background-color: var(--cem-action-secondary-background-hover); }
-                        &:focus { background-color: var(--cem-action-secondary-background-focus); }
+                        &:hover { background-color: var(--cem-action-explicit-hover-background); }
+                        &:focus { background-color: var(--cem-action-explicit-hover-background); }
                         &:focus:active,
-                        &:active{ background-color: var(--cem-action-secondary-background-active); }
+                        &:active{ background-color: var(--cem-action-explicit-active-background); }
                         &, &:visited { text-decoration: none; }
                         h3{ text-transform: capitalize; }
@@ -87,11 +88,18 @@
     </custom-element>
     <demo-list-card head="icon" description="Icons from popular collections">
-        <cem-icon image="https://www.gstatic.com/images/icons/material/apps/fonts/1x/catalog/v5/favicon.svg"
-                    >Material Icon </cem-icon>
-        <cem-icon image="recycling"
-                    > Recycling </cem-icon>
+        <template>
+            <div style="display: inline-flex; gap:var(--cem-gap-group); flex-wrap: wrap; justify-content: space-between;">
+                <cem-icon image="🛒" direction="column">Unicode</cem-icon>
+                <cem-icon image="recycling" direction="column"
+                            > Material </cem-icon>
+                <cem-icon image="https://www.gstatic.com/images/icons/material/apps/fonts/1x/catalog/v5/favicon.svg" direction="column"
+                            >SVG </cem-icon>
+                <cem-icon image="fas fa-thumbs-up" direction="row">Fontawesome </cem-icon>
+            </div>
+        </template>
     </demo-list-card>
     <demo-list-card head="input" description="Text input field">
@@ -116,7 +124,7 @@
     <demo-list-card head="badge" description="A small value indicator that can be overlaid on another object.">
         <template>
-            <div style="display: inline-flex; gap:2rem;">
+            <div style="display: inline-flex; gap:var(--cem-gap-section);">
                 <cem-badge text="0"    color="secondary"><template> <cem-icon image="far fa-envelope"                   ></cem-icon> </template></cem-badge>
                 <cem-badge text="999+"                  ><template> <cem-icon image="🛒" vertical="middle"              ></cem-icon> </template></cem-badge>
                 <cem-badge text="999+"  dot             ><template> <cem-icon image="notifications" vertical="middle"   ></cem-icon> </template></cem-badge>
@@ -134,7 +142,7 @@
         <div>
         <cem-dropdown label="drop base" >
             <template>
-                <style>aside{background-color: silver; padding: 1rem; }</style>
+                <style>aside{background-color: var(--cem-palette-conservative); padding: var(--cem-inset-container); }</style>
                 dropped content
             </template>
@@ -155,4 +163,4 @@
     <a href="../../LICENSE"> Code and documentation licensed under an Apache License 2.0 </a>
 </footer>
 </body>
-</html>
+</html>