@epa-wg/custom-element-dist 0.0.32 → 0.0.33

package/src/custom-element/demo/s.xml

@@ -1,12 +1,75 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <datadom>
-    <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"/>
-    <attributes>
-        <id>dce1</id>
-        <p1>default_P1</p1>
-        <p2>always_p2</p2>
-        <p3></p3>
+    <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+        <div xmlns="http://www.w3.org/1999/xhtml" slot="leading" data-dce-id="4">
+            <cem-icon image="history_edu" class="input-focused" data-dce-id="5">
+                <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                          xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
+                    <span xmlns="" class="icon material-icons" data-dce-id="5">history_edu</span>
+                </dce-root>
+            </cem-icon>
+            <cem-icon image="edit" class="input-unfocused" data-dce-id="6">
+                <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                          xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
+                    <span xmlns="" class="icon material-icons" data-dce-id="5">edit</span>
+                </dce-root>
+            </cem-icon>
+        </div>
+        <div xmlns="http://www.w3.org/1999/xhtml" slot="trailing" data-dce-id="7">
+            <label class="eye-contailer" for="visible-cb" data-dce-id="8">
+                <cem-icon image="visibility" class="visible-ico" tabindex="0" data-dce-id="9">
+                    <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                              xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
+                        <span xmlns="" class="icon material-icons" data-dce-id="5">visibility</span>
+                    </dce-root>
+                </cem-icon>
+                <cem-icon image="visibility_off" class="invisible-ico" tabindex="0" data-dce-id="10">
+                    <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                              xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
+                        <span xmlns="" class="icon material-icons" data-dce-id="5">visibility_off</span>
+                    </dce-root>
+                </cem-icon>
+            </label>
+            <cem-icon image="close" class="clear" tabindex="0" slice="password" slice-event="click" slice-value="''"
+                      data-dce-id="11">
+                <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                          xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
+                    <span xmlns="" class="icon material-icons" data-dce-id="5">close</span>
+                </dce-root>
+            </cem-icon>
+            <dce-text data-dce-id="12">️
+            </dce-text>
+        </div>
+    </payload>
+    <attributes xmlns="" label="password sample" value="secret word" slice="password" data-dce-id="3" type="">
+        <xmlns/>
+        <label>password sample</label>
+        <value>secret word</value>
+        <slice>password</slice>
+        <data-dce-id>3</data-dce-id>
+        <type></type>
     </attributes>
-    <dataset/>
-    <slice/>
+    <dataset>
+        <dceId>3</dceId>
+    </dataset>
+    <slice>
+        <selected/>
+        <password image="close" class="clear" tabindex="0" slice="password" slice-event="click" slice-value="''"
+                  data-dce-id="11">
+            <event isTrusted="true" sliceProcessed="1" pointerId="1" width="1" height="1" pressure="0" tiltX="0"
+                   tiltY="0" azimuthAngle="0" altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0"
+                   pointerType="mouse" isPrimary="false" persistentDeviceId="0" screenX="345" screenY="682"
+                   clientX="345" clientY="595" ctrlKey="false" shiftKey="false" altKey="false" metaKey="false"
+                   button="0" buttons="0" pageX="345" pageY="4354" x="345" y="595" offsetX="14" offsetY="15"
+                   movementX="0" movementY="0" layerX="248" layerY="27" detail="1" which="1" type="click" eventPhase="3"
+                   bubbles="true" cancelable="true" defaultPrevented="false" composed="true"
+                   timeStamp="1974517.2999999523" returnValue="true" cancelBubble="false" NONE="0" CAPTURING_PHASE="1"
+                   AT_TARGET="2" BUBBLING_PHASE="3">
+                <relatedTarget/>
+                <fromElement/>
+                <toElement/>
+                <sourceCapabilities firesTouchEvents="false"/>
+            </event>
+        </password>
+    </slice>
 </datadom>

package/src/custom-element/demo/s.xslt

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
                 xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
                 exclude-result-prefixes="exsl">
@@ -14,54 +13,79 @@
         <xsl:value-of select="."/>
     </xsl:template>
     <xsl:template mode="payload" match="attributes">
-        <xsl:param name="p1" select="/datadom/attributes/p1">default_P1</xsl:param>
-        <xsl:param name="p2" select="'always_p2'"/>
-        <xsl:param name="p3">
+        <xsl:param name="v">
             <xsl:choose>
-                <xsl:when test="string-length(//p3)>0 ">RRRR
-                    <xsl:value-of select="count(//p3)"/>
-                    +<xsl:value-of select="//p3 "/>=
+                <xsl:when test="//s[//s/event] ">
+                    <xsl:value-of select="//s[//s/event] "/>
                 </xsl:when>
-                <xsl:otherwise>OOO
-                    <xsl:value-of select=" 'def_P3' "/>
+                <xsl:when test=" //attributes/@v ">
+                    <xsl:value-of select=" //attributes/@v "/>
+                </xsl:when>
+                <xsl:otherwise>
+                    <xsl:value-of select=" 'def' "/>
                 </xsl:otherwise>
             </xsl:choose>
         </xsl:param>
         <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
-            <xsl:attribute name="p1">default_P1</xsl:attribute>
-            <xsl:attribute name="p2">
-                <xsl:value-of select="'always_p2'"/>
-            </xsl:attribute>
-            <xsl:attribute name="p3">
+            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="has-input"
+                          select="count(//s/*) &gt; 0"/>
+            <xsl:attribute name="v">
                 <xsl:choose>
-                    <xsl:when test="//p3 ">
-                        <xsl:value-of select="//p3 "/>
+                    <xsl:when test="//s[//s/event] ">
+                        <xsl:value-of select="//s[//s/event] "/>
+                    </xsl:when>
+                    <xsl:when test=" //attributes/@v ">
+                        <xsl:value-of select=" //attributes/@v "/>
                     </xsl:when>
                     <xsl:otherwise>
-                        <xsl:value-of select=" 'def_P3' "/>
+                        <xsl:value-of select=" 'def' "/>
                     </xsl:otherwise>
                 </xsl:choose>
             </xsl:attribute>
             <dce-text xmlns="" data-dce-id="2">
-                p1:
+
+                //attributes/v='<xsl:value-of select="//attributes/v"/>'
             </dce-text>
-            <code xmlns="" data-testid="p1" data-dce-id="3">
-                <xsl:value-of select="$p1"/>
-            </code>
-            <br xmlns="" data-dce-id="4"/>
-            <dce-text xmlns="" data-dce-id="5">
-                p2:
+            <br xmlns="" data-dce-id="3"/>
+            <dce-text xmlns="" data-dce-id="4">
+                //attributes/@v='<xsl:value-of select="//attributes/@v"/>'
+            </dce-text>
+            <br xmlns="" data-dce-id="5"/>
+            <dce-text xmlns="" data-dce-id="6">
+                $v='<xsl:value-of select="$v"/>'
             </dce-text>
-            <code xmlns="" data-testid="p2" data-dce-id="6">
-                <xsl:value-of select="$p2"/>
-            </code>
             <br xmlns="" data-dce-id="7"/>
             <dce-text xmlns="" data-dce-id="8">
-                p3:
+                //s='<xsl:value-of select="//s"/>'
+            </dce-text>
+            <br xmlns="" data-dce-id="9"/>
+            <dce-text xmlns="" data-dce-id="10">
+                A='<xsl:value-of select="//s[//s/event] | //attributes/v[not(//s/event)]"/>'
+            </dce-text>
+            <br xmlns="" data-dce-id="11"/>
+            <dce-text xmlns="" data-dce-id="12">
+                has-input =<xsl:value-of select=" $has-input "/>
+            </dce-text>
+            <br xmlns="" data-dce-id="13"/>
+            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="in-value">
+                <xsl:choose>
+                    <xsl:when test="//s/event">
+                        <xsl:value-of select="//s">
+                        </xsl:value-of>
+                    </xsl:when>
+                    <xsl:when test="//attributes/@v">
+                        <xsl:value-of select="//attributes/@v">
+                        </xsl:value-of>
+                    </xsl:when>
+                    <xsl:otherwise>def</xsl:otherwise>
+                </xsl:choose>
+            </xsl:variable>
+            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="xx"
+                          select="//s[//s/event] ?? //attributes/@v ?? 'def' "/>
+            <input xmlns="" slice="s" slice-event="input" value="{$in-value}" data-dce-id="14"/>
+            <dce-text xmlns="" data-dce-id="15">$in-value:<xsl:value-of select="$in-value"/> | $xx:<xsl:value-of
+                    select="$xx"/>
             </dce-text>
-            <code xmlns="" data-testid="p3" data-dce-id="9">
-                <xsl:value-of select="$p3"/>
-            </code>
         </dce-root>
     </xsl:template>
     <xsl:template match="/">

package/src/custom-element/demo/ss.html

@@ -1,5 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<dce-root data-dce-id="1" value="123"
-          xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml"><label data-dce-id="2">
-    <dce-text data-dce-id="3"/>
-    <input data-dce-id="4" slice="selected" slice-event="input" value="123"/></label></dce-root>
+<dce-root data-dce-id="1" xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
+          xmlns:xhtml="http://www.w3.org/1999/xhtml"><label data-dce-id="2" xmlns=""><input data-dce-id="3"
+                                                                                            slice="disabled-slice"
+                                                                                            type="checkbox"
+                                                                                            value="disabled"/>
+    <dce-text data-dce-id="4">disabled</dce-text>
+</label>
+        <cem-input data-dce-id="6" value="123"/>
+        <button data-dce-id="7">Next</button>
+
+
+        </p></form>
+</dce-root>

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.32",
+    "version": "0.0.33",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

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.32",
+    "version": "0.0.33",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/src/custom-element/index.html

@@ -51,7 +51,7 @@
         <a href="./demo/module-url.html"        >importmap          </a> <br/>
         <a href="./demo/hex-grid.html"          >hex grid lib       </a> |
         <a href="./demo/scoped-css.html"        >scoped CSS         </a> |
-        <a href="./demo/parameters.html"        >attributes         </a> |
+        <a href="./demo/attributes.html"        >attributes         </a> |
         <a href="./demo/data-slices.html"       >data slices/events </a> |
         <a href="./demo/form.html"              >Form validation    </a> |
         <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a><br/>

package/src/material/components/badge.html

@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8">
+    <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="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"/>
+
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/": "../../"
+          }
+        }
+    </script>
+    <script src="../../custom-element/module-url.js" type="module"></script>
+    <script src="../../custom-element/custom-element.js" type="module"></script>
+    <style>
+        @import "../angular.css";
+        @import "../material.css";
+        @import "../theme/semantic.css";
+        @import "../demo.css";
+        main{
+            display: flex; flex-wrap: wrap;
+            gap: 3rem;
+            padding: 5rem;
+            &>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="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;}
+    </style>
+</head>
+<!--
+ToDO
+* docs w/ how to use
+-->
+<body>
+<template id="cem-badge">
+    <attribute name="text"
+            aria-description="Badge text content. Up to 4 characters including + sign."
+            ></attribute>
+    <attribute name="dot"
+            aria-description="attribute defines the small dot presentation without visible text. Default 'true' "
+            ></attribute>
+    <attribute name="color"
+            aria-description="semantic colors. Default is 'primary'. Values: primary|secondary|success|alert"
+            ></attribute>
+    <attribute name="align"
+            aria-description="Vertical & horizontal align. Default is 'top right'. Values: top|middle|bottom|left|center|right"
+            ></attribute>
+    <attribute name="invisible"
+            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; }
+        &[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%; }
+        &[align~=right]>*>dd{  --cem-badge-align-h: 50%; }
+        &[align~=top]>*>dd{  --cem-badge-align-v: -50%; }
+        &[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%; }
+        &>*>dd{
+            /*position: absolute; top:-0.5rem; border-radius: 0.5rem; */
+            /*padding: 0.25rem; background-color: red;*/
+            display: flex ;
+            flex-direction: row;
+            flex-wrap: wrap;
+            -webkit-box-pack: center;
+            justify-content: center;
+            align-content: center;
+            -webkit-box-align: center;
+            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;
+            z-index: 1;
+            background-color: var(--cem-badge-color, --cem-badge-color-primary);
+            color: var(--cem-badge-text-color,rgb(255, 255, 255));
+            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);
+        }
+        &[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>
+    <slot></slot>
+</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">
+    <custom-element src="../index.html#nav-head"></custom-element>
+</header>
+<main>
+    <aside>
+        <p><code>cem-badge</code> is badge component from &lt;custom-element&gt; Material suite based on the
+            <a href="https://m3.material.io/components/badges/overview">Material Design specification for Badges</a>.<br/>
+            Badges show notifications, counts, or status information on navigation items and icons.
+            Inspired by <a href="https://mui.com/material-ui/react-badge/">MUI</a>
+        </p>
+        <h1>Attributes</h1>
+        <div> <code>text</code> attribute defines the Up to 4 characters including + sign.</div>
+        <div> <code>dot</code> attribute defines the small dot presentation without visible text. Default 'true'. </div>
+        <div> <code>invisible</code> attribute hides badge. </div>
+        <div> <code>align</code> attribute defines the vertical & horizontal align. Default is 'top right'. Values: top|middle|bottom|left|center|right. </div>
+    </aside>
+
+    <html-demo-element legend="Variations">
+        <p slot="description">
+
+        </p>
+        <template>
+<cem-badge text="0"    color="secondary"> <cem-icon image="far fa-envelope"></cem-icon> </cem-badge>
+<cem-badge text="999+"                  > <cem-icon image="🛒" vertical="middle"></cem-icon>  </cem-badge>
+<cem-badge text="999+"  dot             > <cem-icon image="notifications" vertical="middle"></cem-icon>  </cem-badge>
+        </template>
+    </html-demo-element>
+
+    <html-demo-element legend="color attribute">
+        <p slot="description">
+            Semantic colors
+        </p>
+        <template>
+<cem-badge text="0"                     > <cem-icon image="✉"></cem-icon> </cem-badge>
+<cem-badge text="1"    color="primary"  > <cem-icon image="✉"></cem-icon> </cem-badge>
+<cem-badge text="2"    color="secondary"> <cem-icon image="✉"></cem-icon> </cem-badge>
+<cem-badge text="3"    color="success"  > <cem-icon image="✉"></cem-icon> </cem-badge>
+<cem-badge text="4"    color="alert"    > <cem-icon image="✉"></cem-icon> </cem-badge>
+        </template>
+    </html-demo-element>
+
+    <html-demo-element legend="custom color">
+        <p slot="description">
+            Override by CE
+        </p>
+        <template>
+<custom-element>
+    <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;}
+            }
+        </style>
+        <cem-badge text="123"> CUSTOM COLOR </cem-badge>
+    </template>
+</custom-element>
+        </template>
+    </html-demo-element>
+
+
+    <html-demo-element legend="invisible attribute">
+        <p slot="description">
+            hides badge, animated
+        </p>
+        <template>
+    <custom-element>
+        <template>
+            <label>
+                <input type="checkbox" slice="is-checked" value="on" />
+                invisible</label>
+<cem-badge text="1"  >
+    <if test="/datadom/slice/is-checked = 'on'">
+        <attribute name="invisible">on</attribute>
+    </if>
+    <cem-icon image="mail" ></cem-icon>
+</cem-badge>
+    &nbsp;
+<cem-badge dot>
+    <if test="/datadom/slice/is-checked = 'on'">
+        <attribute name="invisible">on</attribute>
+    </if>
+    <cem-icon image="mail" ></cem-icon>
+</cem-badge>
+        </template>
+    </custom-element>
+        </template>
+    </html-demo-element>
+
+    <html-demo-element legend="align attribute">
+        <p slot="description">
+            sets vertical( top, middle, bottom ) and horizontal( left, center, right) badge align.<br/>
+            Default is right top.
+        </p>
+        <template>
+<flex-3x>
+    <cem-badge text="1" align="left top"   ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="2" align="center top" ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="3" align="right top"  ><cem-icon image="mail" ></cem-icon></cem-badge>
+
+    <cem-badge text="4" align="left middle"   ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="5" align="center middle" ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="6" align="right middle"  ><cem-icon image="mail" ></cem-icon></cem-badge>
+
+    <cem-badge text="7" align="left bottom"   ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="8" align="center bottom" ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="9" align="right bottom"  ><cem-icon image="mail" ></cem-icon></cem-badge>
+</flex-3x>
+        </template>
+    </html-demo-element>
+
+</main>
+<footer>
+    <hr/>
+    Powered by Syngrafact Corp. ©2024.<br/>
+    <a href="../../LICENSE"> Code and documentation licensed under an Apache License 2.0 </a>
+</footer>
+<script src="https://unpkg.com/html-demo-element@1.0.8/html-demo-element.js" type="module"></script>
+
+</body>
+</html>

package/src/material/components/dropdown.html

@@ -76,17 +76,14 @@
             <attribute name="open"></attribute>
             <attribute name="label"></attribute>
             <style>
-                dce-root {
+                &[open="false"]>*>aside{  max-height: 0; }
+                &>* {
                     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;
 
-                    &[open="false"]{
-                        &>aside{  max-height: 0;
-                        }
-                    }
                     & > label {
                         min-width: var(--cem-dropdown-base-min-width);
                         display: inline-block;
@@ -132,11 +129,9 @@
         </template>
     </html-demo-element>
 
-    <html-demo-element
-            legend="Menu in dropdown"
-            description="Focus to see the cursor in input with label shifted upward" >
+    <html-demo-element legend="Menu in dropdown">
         <template>
-<cem-dropdown label="Vertical menu" open="true">
+<cem-dropdown label="Vertical menu" >
     <cem-menu direction="column">
         <a href="#">link 1</a>
         <a href="#">link 2</a>
@@ -146,14 +141,14 @@
         </template>
     </html-demo-element>
 
-    <html-demo-element description="Focus to see the cursor in input with label shifted upward "
-                       legend="Collapsing by slice">
+    <html-demo-element legend="Hide dropdown dynamically"
+                       description="open=false hides dropdown"
+                       >
         <template>
             <custom-element>
                 <template>
 <label><input slice="opened" type="checkbox" value="1" checked/>
         open</label><br/>
-//opened:'{//opened}'
 <cem-dropdown label="Vertical menu" open="{//opened='1'}">
 
     <cem-menu direction="column">

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

@@ -78,6 +78,7 @@
                 color: var(--mat-light-blue-900);
             }
             --icon-size: 2rem;
+            min-height: var(--icon-size);
         }
 
         .icon {