@statistikzh/leu 0.11.0 → 0.11.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -66,44 +66,91 @@
           }
         },
         {
-          "name": "leu-breadcrumb",
-          "description": "A Breadcrumb Navigation.\n\nThe breadcrumbs can be displayed in two different layouts.\nOnly the back link (the last item / parent of the current page)\nis displayed when…\n-  … the width of the container is smaller\n     than the BACK_ONLY_BREAKPOINT.\n-  … less then two breadcrumb items could be displayed\n     without overflowing the container.\n\nOtherwise as many items as possible are displayed in an inline list\nwithout overflowing the container. The remaining items are displayed\nin a dropdown menu.\n\nIn order to determine the exact numbers of items that have to be\nhidden inside the dropdown, all of them have to be rendered first.\n1. Render all items\n2. Calculate (measure) the number of items that can be displayed\n   without overflowing the container.\n3. Updating the state (_hiddeItems) which will trigger a rerender\n4. Render the items again with the new state.\n\nThis results in multiple updates scheduled one after another. Lit\nwill also print a waring in the console beacause of that.\nIt's no a nice behaviour but the only one that works without\nhaving duplicate and hidden markup to derive the sizes from that.\n---\n\n\n### **Methods:**\n - **renderDropdown(): __** - Render the dropdown menu",
+          "name": "leu-checkbox",
+          "description": "\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "items",
-              "description": "Object array with { label, href }",
-              "value": { "type": "Array", "default": "[]" }
+              "name": "checked",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "inverted",
-              "description": "invert color on dark background",
+              "name": "disabled",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "_hiddenItems", "value": { "type": "string" } },
-            { "name": "_showBackOnly", "value": { "type": "string" } },
-            { "name": "_isRecalculating", "value": { "type": "string" } },
-            { "name": "_isDropdownOpen", "value": { "type": "string" } }
+            {
+              "name": "value",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            { "name": "name", "value": { "type": "string", "default": "\"\"" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "checked", "value": { "type": "boolean" } },
+              { "name": "disabled", "value": { "type": "boolean" } },
+              { "name": "value", "value": { "type": "string" } },
+              { "name": "name", "value": { "type": "string" } }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "leu-checkbox-group",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "orientation",
+              "value": {
+                "type": "\"horizontal\" | \"vertical\"",
+                "default": "\"horizontal\""
+              }
+            },
+            { "name": "label", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "items",
-                "description": "Object array with { label, href }",
-                "value": { "type": "Array" }
+                "name": "orientation",
+                "value": { "type": "\"horizontal\" | \"vertical\"" }
               },
+              { "name": "label", "value": { "type": "string" } }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "leu-button-group",
+          "description": "\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [{ "name": "", "description": "Slot for the buttons" }],
+          "events": [
+            {
+              "name": "input",
+              "description": "When the value of the group changes by clicking a button"
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "getButtonValue", "value": {} },
               {
-                "name": "inverted",
-                "description": "invert color on dark background",
-                "value": { "type": "boolean" }
+                "name": "value",
+                "description": "The value of the currenty selected (active) button",
+                "value": { "type": "string" }
               },
-              { "name": "_hiddenItems", "value": {} },
-              { "name": "_showBackOnly", "value": {} },
-              { "name": "_isRecalculating", "value": {} },
-              { "name": "_isDropdownOpen", "value": {} }
+              { "name": "_handleSlotChange", "value": {} },
+              { "name": "_handleButtonClick", "value": {} },
+              { "name": "_items", "value": { "type": "array" } }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "input",
+                "description": "When the value of the group changes by clicking a button"
+              }
+            ]
           }
         },
         {
@@ -218,89 +265,116 @@
           }
         },
         {
-          "name": "leu-button-group",
-          "description": "\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
+          "name": "leu-dialog",
+          "description": "\n---\n",
           "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "Slot for the buttons" }],
-          "events": [
+          "attributes": [
             {
-              "name": "input",
-              "description": "When the value of the group changes by clicking a button"
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "sublabel",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "open",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
+          "events": [],
           "js": {
             "properties": [
-              { "name": "getButtonValue", "value": {} },
-              {
-                "name": "value",
-                "description": "The value of the currenty selected (active) button",
-                "value": { "type": "string" }
-              },
-              { "name": "_handleSlotChange", "value": {} },
-              { "name": "_handleButtonClick", "value": {} },
-              { "name": "_items", "value": { "type": "array" } }
+              { "name": "label", "value": { "type": "string" } },
+              { "name": "sublabel", "value": { "type": "string" } },
+              { "name": "open", "value": { "type": "boolean" } }
             ],
-            "events": [
-              {
-                "name": "input",
-                "description": "When the value of the group changes by clicking a button"
-              }
-            ]
+            "events": []
           }
         },
         {
-          "name": "leu-checkbox",
-          "description": "\n---\n",
+          "name": "leu-breadcrumb",
+          "description": "A Breadcrumb Navigation.\n\nThe breadcrumbs can be displayed in two different layouts.\nOnly the back link (the last item / parent of the current page)\nis displayed when…\n-  … the width of the container is smaller\n     than the BACK_ONLY_BREAKPOINT.\n-  … less then two breadcrumb items could be displayed\n     without overflowing the container.\n\nOtherwise as many items as possible are displayed in an inline list\nwithout overflowing the container. The remaining items are displayed\nin a dropdown menu.\n\nIn order to determine the exact numbers of items that have to be\nhidden inside the dropdown, all of them have to be rendered first.\n1. Render all items\n2. Calculate (measure) the number of items that can be displayed\n   without overflowing the container.\n3. Updating the state (_hiddeItems) which will trigger a rerender\n4. Render the items again with the new state.\n\nThis results in multiple updates scheduled one after another. Lit\nwill also print a waring in the console beacause of that.\nIt's no a nice behaviour but the only one that works without\nhaving duplicate and hidden markup to derive the sizes from that.\n---\n\n\n### **Methods:**\n - **renderDropdown(): __** - Render the dropdown menu",
           "doc-url": "",
           "attributes": [
             {
-              "name": "checked",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "items",
+              "description": "Object array with { label, href }",
+              "value": { "type": "Array", "default": "[]" }
             },
             {
-              "name": "disabled",
+              "name": "inverted",
+              "description": "invert color on dark background",
               "value": { "type": "boolean", "default": "false" }
             },
+            { "name": "_hiddenItems", "value": { "type": "string" } },
+            { "name": "_showBackOnly", "value": { "type": "string" } },
+            { "name": "_isRecalculating", "value": { "type": "string" } },
+            { "name": "_isDropdownOpen", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "items",
+                "description": "Object array with { label, href }",
+                "value": { "type": "Array" }
+              },
+              {
+                "name": "inverted",
+                "description": "invert color on dark background",
+                "value": { "type": "boolean" }
+              },
+              { "name": "_hiddenItems", "value": {} },
+              { "name": "_showBackOnly", "value": {} },
+              { "name": "_isRecalculating", "value": {} },
+              { "name": "_isDropdownOpen", "value": {} }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "leu-dropdown",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
             {
-              "name": "value",
+              "name": "label",
               "value": { "type": "string", "default": "\"\"" }
             },
-            { "name": "name", "value": { "type": "string", "default": "\"\"" } }
+            {
+              "name": "expanded",
+              "value": { "type": "boolean", "default": "false" }
+            }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "checked", "value": { "type": "boolean" } },
-              { "name": "disabled", "value": { "type": "boolean" } },
-              { "name": "value", "value": { "type": "string" } },
-              { "name": "name", "value": { "type": "string" } }
+              { "name": "label", "value": { "type": "string" } },
+              { "name": "expanded", "value": { "type": "boolean" } }
             ],
             "events": []
           }
         },
         {
-          "name": "leu-checkbox-group",
-          "description": "\n---\n",
+          "name": "leu-icon",
+          "description": "A component to render all defined zhWeb icons.\nThe `fill` of the icon is set to `currentColor` and\ncan be overriden by setting the css `color` property.\nIf the icon name is not found, a placeholder will be displayed.\n---\n\n\n### **CSS Properties:**\n - **--leu-icon-size** - The size of the icon. _(default: undefined)_",
           "doc-url": "",
           "attributes": [
             {
-              "name": "orientation",
-              "value": {
-                "type": "\"horizontal\" | \"vertical\"",
-                "default": "\"horizontal\""
-              }
-            },
-            { "name": "label", "value": { "type": "string" } }
+              "name": "name",
+              "description": "The name of the icon to display.",
+              "value": { "type": "IconPathName", "default": "\"\"" }
+            }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "orientation",
-                "value": { "type": "\"horizontal\" | \"vertical\"" }
-              },
-              { "name": "label", "value": { "type": "string" } }
+                "name": "name",
+                "description": "The name of the icon to display.",
+                "value": { "type": "IconPathName" }
+              }
             ],
             "events": []
           }
@@ -488,80 +562,6 @@
             "events": [{ "name": "input" }]
           }
         },
-        {
-          "name": "leu-dialog",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "sublabel",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "open",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "label", "value": { "type": "string" } },
-              { "name": "sublabel", "value": { "type": "string" } },
-              { "name": "open", "value": { "type": "boolean" } }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "leu-dropdown",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "expanded",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "label", "value": { "type": "string" } },
-              { "name": "expanded", "value": { "type": "boolean" } }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "leu-icon",
-          "description": "A component to render all defined zhWeb icons.\nThe `fill` of the icon is set to `currentColor` and\ncan be overriden by setting the css `color` property.\nIf the icon name is not found, a placeholder will be displayed.\n---\n\n\n### **CSS Properties:**\n - **--leu-icon-size** - The size of the icon. _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "name",
-              "description": "The name of the icon to display.",
-              "value": { "type": "IconPathName", "default": "\"\"" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "name",
-                "description": "The name of the icon to display.",
-                "value": { "type": "IconPathName" }
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "leu-input",
           "description": "A text input element.\n---\n\n\n### **Events:**\n - **input** - Dispatched when the value of the input element changes.\n- **change** - Dispatched when the value of the input element changes and the input element loses focus.\n\n### **Methods:**\n - **getValidationMessages(): _Object_** - Merge custom and default validation messages.\nA validation message can be a function or a string.\nIf it s a function, the function is called with the corresponding\nattribute value as argument.\ne.g.\n`tooLong(this.maxlength)`\nThis way the framework user can create reasonable validation messages\n- **renderErrorMessages(): _TemplateResult | nothing_** - Creates an error list with an item for the given validity state.",
@@ -934,79 +934,6 @@
             "events": [{ "name": "leu:pagechange" }]
           }
         },
-        {
-          "name": "leu-popup",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "anchor",
-              "value": {
-                "type": "string | HTMLElement",
-                "default": "undefined"
-              }
-            },
-            {
-              "name": "active",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "placement",
-              "value": { "type": "Placement", "default": "undefined" }
-            },
-            {
-              "name": "flip",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "shift",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "shiftPadding",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "matchSize",
-              "value": {
-                "type": "\"width\" | \"height\" | \"both\"",
-                "default": "undefined"
-              }
-            },
-            {
-              "name": "autoSize",
-              "value": {
-                "type": "\"width\" | \"height\" | \"both\"",
-                "default": "undefined"
-              }
-            },
-            {
-              "name": "autoSizePadding",
-              "value": { "type": "number", "default": "0" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "anchor", "value": { "type": "string | HTMLElement" } },
-              { "name": "active", "value": { "type": "boolean" } },
-              { "name": "placement", "value": { "type": "Placement" } },
-              { "name": "flip", "value": { "type": "boolean" } },
-              { "name": "shift", "value": { "type": "boolean" } },
-              { "name": "shiftPadding", "value": { "type": "number" } },
-              {
-                "name": "matchSize",
-                "value": { "type": "\"width\" | \"height\" | \"both\"" }
-              },
-              {
-                "name": "autoSize",
-                "value": { "type": "\"width\" | \"height\" | \"both\"" }
-              },
-              { "name": "autoSizePadding", "value": { "type": "number" } }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "leu-radio",
           "description": "\n---\n",
@@ -1107,6 +1034,79 @@
             "events": []
           }
         },
+        {
+          "name": "leu-popup",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "anchor",
+              "value": {
+                "type": "string | HTMLElement",
+                "default": "undefined"
+              }
+            },
+            {
+              "name": "active",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placement",
+              "value": { "type": "Placement", "default": "undefined" }
+            },
+            {
+              "name": "flip",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "shift",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "shiftPadding",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "matchSize",
+              "value": {
+                "type": "\"width\" | \"height\" | \"both\"",
+                "default": "undefined"
+              }
+            },
+            {
+              "name": "autoSize",
+              "value": {
+                "type": "\"width\" | \"height\" | \"both\"",
+                "default": "undefined"
+              }
+            },
+            {
+              "name": "autoSizePadding",
+              "value": { "type": "number", "default": "0" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "anchor", "value": { "type": "string | HTMLElement" } },
+              { "name": "active", "value": { "type": "boolean" } },
+              { "name": "placement", "value": { "type": "Placement" } },
+              { "name": "flip", "value": { "type": "boolean" } },
+              { "name": "shift", "value": { "type": "boolean" } },
+              { "name": "shiftPadding", "value": { "type": "number" } },
+              {
+                "name": "matchSize",
+                "value": { "type": "\"width\" | \"height\" | \"both\"" }
+              },
+              {
+                "name": "autoSize",
+                "value": { "type": "\"width\" | \"height\" | \"both\"" }
+              },
+              { "name": "autoSizePadding", "value": { "type": "number" } }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-scroll-top",
           "description": "\n---\n",

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/scripts/generate-component/templates/[Name].js

@@ -8,7 +8,7 @@ import styles from "./[name].css"
  * @tagname [namespace]-[name]
  */
 export class Leu[Name] extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,

package/scripts/generate-component/templates/[name].css

@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --[name]-font-regular: var(--leu-font-family-regular);
   --[name]-font-black: var(--leu-font-family-black);

package/src/components/accordion/Accordion.js

@@ -16,7 +16,7 @@ import styles from "./accordion.css"
  * @attr {string} label-prefix - The prefix of the accordion label. e.g. "01"
  */
 export class LeuAccordion extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /** @internal */
   static shadowRootOptions = {
@@ -72,7 +72,7 @@ export class LeuAccordion extends LeuElement {
         id="toggle"
         type="button"
         class="button"
-        aria-controls="content"
+        aria-controls="contentwrapper"
         aria-expanded="${this.open}"
         @click=${this._handleToggleClick}
       >
@@ -85,13 +85,17 @@ export class LeuAccordion extends LeuElement {
         <div class="plus"></div>
       </button></${unsafeStatic(hTag)}>
       <div
-        id="content"
-        class="content"
+        id="contentwrapper"
+        class="contentwrapper"
+        ?hidden=${!this.open}
         aria-labelledby="toggle"
         role="region"
-        ?hidden=${!this.open}
       >
-        <slot name="content"></slot>
+        <div
+          class="content"
+        >
+          <slot name="content"></slot>
+        </div>
       </div>
       <hr class="divider" />`
   }

package/src/components/accordion/accordion.css

@@ -1,10 +1,5 @@
 @import url("../../styles/custom-media.css");
 
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --accordion-font-regular: var(--leu-font-family-regular);
   --accordion-font-black: var(--leu-font-family-black);
@@ -19,17 +14,9 @@
 
   --transition: 0.1s ease;
 
-  font-family: var(--chip-font-regular);
+  font-family: var(--accordion-font-regular);
 
   position: relative;
-  display: grid;
-  grid-template-rows: auto 0fr;
-
-  transition: grid-template-rows var(--transition);
-}
-
-:host([open]) {
-  grid-template-rows: auto 1fr;
 }
 
 .heading {
@@ -115,15 +102,18 @@
   flex-grow: 1;
 }
 
+.contentwrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--transition);
+}
+
 .content {
   overflow: hidden;
-  transition: visibility var(--transition), opacity var(--transition);
 }
 
-.content[hidden] {
-  display: block;
-  visibility: hidden;
-  opacity: 0;
+.contentwrapper[hidden] {
+  grid-template-rows: 0fr;
 }
 
 slot[name="content"] {
@@ -140,9 +130,6 @@ slot[name="content"] {
 }
 
 .divider {
-  position: absolute;
-  top: 100%;
-  left: 0;
 
   width: 100%;
   height: 1px;