@statistikzh/leu 0.13.1 → 0.14.1

package/index.js

@@ -1,5 +1,4 @@
 export * from "./src/components/accordion/Accordion.js"
-export * from "./src/components/breadcrumb/Breadcrumb.js"
 export * from "./src/components/button/Button.js"
 export * from "./src/components/button-group/ButtonGroup.js"
 export * from "./src/components/checkbox/Checkbox.js"

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.13.1",
+  "version": "0.14.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -12,8 +12,8 @@
   "web-types": "./dist/web-types.json",
   "exports": {
     ".": {
-      "default": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./*": "./dist/*"
   },
@@ -31,12 +31,12 @@
     "watch:css": "nodemon --watch 'src/styles/*' -e css --exec npm run build:css",
     "lint": "npm run lint:eslint && npm run lint:prettier",
     "lint:eslint": "eslint --ext .js,.mjs,.html . --ignore-path .gitignore ",
-    "lint:prettier": "prettier \"**/*.{js,mjs,md,html,json}\" --check --ignore-path .gitignore",
+    "lint:prettier": "prettier \"**/*.{js,mjs,md,mdx,html,json}\" --check",
     "lint:stylelint": "stylelint \"**/*.{js,css}\" --ignore-path .gitignore",
     "lint:types": "tsc",
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint --ext .js,.mjs,.html . --fix --ignore-path .gitignore",
-    "format:prettier": "prettier \"**/*.{js,mjs,md,html,json}\" --write --ignore-path .gitignore",
+    "format:prettier": "prettier \"**/*.{js,mjs,md,mdx,html,json}\" --write",
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
     "prepare": "husky",
@@ -45,64 +45,65 @@
     "storybook:build": "npm run analyze && npm run build:css && storybook build --output-dir docs"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.3",
-    "lit": "^3.1.4"
+    "@floating-ui/dom": "^1.6.13",
+    "lit": "^3.1.4",
+    "stylelint-config-recommended": "^15.0.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.3",
-    "@commitlint/cli": "^17.7.1",
-    "@commitlint/config-conventional": "^17.7.0",
-    "@custom-elements-manifest/analyzer": "^0.9.2",
-    "@open-wc/eslint-config": "^9.2.1",
+    "@babel/preset-env": "^7.26.9",
+    "@commitlint/cli": "^19.7.1",
+    "@commitlint/config-conventional": "^19.7.1",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-replace": "^5.0.7",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-designs": "^7.0.9",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/web-components": "^7.6.17",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@storybook/addon-a11y": "^8.5.8",
+    "@storybook/addon-actions": "^8.5.8",
+    "@storybook/addon-designs": "^8.2.0",
+    "@storybook/addon-essentials": "^8.5.8",
+    "@storybook/blocks": "^8.5.8",
+    "@storybook/core-events": "^8.5.8",
+    "@storybook/manager-api": "^8.5.8",
+    "@storybook/theming": "^8.5.8",
+    "@storybook/web-components": "^8.5.8",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-rollup": "^0.6.4",
-    "@web/storybook-builder": "^0.1.6",
-    "@web/storybook-framework-web-components": "^0.1.2",
-    "@web/test-runner": "^0.18.2",
+    "@web/storybook-builder": "^0.2.1",
+    "@web/storybook-framework-web-components": "^0.2.0",
+    "@web/test-runner": "^0.20.0",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
-    "@whitespace/storybook-addon-html": "^5.1.6",
+    "@whitespace/storybook-addon-html": "^6.1.1",
     "arg": "^5.0.2",
-    "custom-element-jet-brains-integration": "^1.4.4",
-    "custom-element-vs-code-integration": "^1.2.3",
-    "custom-element-vuejs-integration": "^1.1.0",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-storybook": "^0.6.14",
-    "glob": "^10.3.10",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
-    "nodemon": "^3.0.2",
+    "custom-element-jet-brains-integration": "^1.7.0",
+    "custom-element-vs-code-integration": "^1.5.0",
+    "custom-element-vuejs-integration": "^1.4.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-storybook": "^0.11.3",
+    "glob": "^11.0.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.4.3",
+    "nodemon": "^3.1.9",
     "postcss": "^8.4.31",
-    "postcss-cli": "^10.1.0",
-    "postcss-import": "^15.1.0",
-    "postcss-lit": "^1.1.0",
-    "postcss-preset-env": "^9.1.4",
-    "prettier": "^2.4.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-syntax-highlighter": "^15.5.0",
-    "rimraf": "^5.0.5",
-    "rollup": "^3.29.4",
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.1.0",
+    "postcss-lit": "^1.2.0",
+    "postcss-preset-env": "^10.1.5",
+    "prettier": "^3.5.2",
+    "react-syntax-highlighter": "^15.6.1",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.34.8",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-postcss-lit": "^2.1.0",
-    "sinon": "^17.0.1",
-    "storybook": "^7.6.17",
-    "stylelint": "^15.10.3",
-    "stylelint-config-standard": "^34.0.0",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.3"
+    "sinon": "^19.0.2",
+    "storybook": "^8.5.8",
+    "stylelint": "^16.14.1",
+    "stylelint-config-standard": "^37.0.0",
+    "typescript": "^5.7.3"
   },
   "prettier": {
     "semi": false
@@ -116,5 +117,8 @@
       "prettier --write"
     ],
     "*.{md,json}": "prettier --write"
+  },
+  "overrides": {
+    "estree-walker": "2.0.2"
   }
 }

package/rollup.config.js

@@ -47,8 +47,8 @@ export default {
         (file) => [
           path.basename(file, path.extname(file)),
           fileURLToPath(new URL(file, import.meta.url)),
-        ]
-      )
+        ],
+      ),
     ),
   },
   output: {
@@ -60,5 +60,5 @@ export default {
     babel({ babelHelpers: "bundled" }),
     ...plugins.map((p) => p.plugin(...p.args)),
   ],
-  external: /^lit(\/.*\.js)?$/,
+  external: [/^lit(\/.*\.js)?$/, "@floating-ui/dom"],
 }

package/scripts/generate-component/generate.js

@@ -75,7 +75,7 @@ const copyFile = async (sourcePath, targetPath, params, replacements) => {
     })
     const formattedTemplateFileContents = formatTemplateFileContents(
       replacements,
-      templateFileContents
+      templateFileContents,
     )
     await fsPromises.writeFile(targetPath, formattedTemplateFileContents, {
       encoding: "utf8",
@@ -101,8 +101,8 @@ const copyAllFiles = async (sourcePath, targetPath, params) => {
         `${sourcePath}/${fileName}`,
         `${targetPath}/${newFileName}`,
         params,
-        replacements
-      )
+        replacements,
+      ),
     )
   })
   await Promise.all(fileCopyPromises)
@@ -136,7 +136,7 @@ const generate = async () => {
 
   if (![name].concat(components).every((c) => kebabCaseRegex.test(c))) {
     console.log(
-      "The name and the components have to be in camel case and can only contain [a-z] letters."
+      "The name and the components have to be in camel case and can only contain [a-z] letters.",
     )
     console.log("Example: radio-group")
     process.exit(1)
@@ -158,7 +158,7 @@ const generate = async () => {
       Name: upperCamelCase(component),
       namespace,
       Namespace,
-    })
+    }),
   )
 
   await Promise.all(copyPromises)

package/scripts/generate-component/templates/stories/[name].stories.js

@@ -2,7 +2,7 @@ import { html } from "lit"
 import "../[namespace]-[name].js"
 
 export default {
-  title: "[Name]",
+  title: "Components/[Name]",
   component: "[namespace]-[name]",
 }
 

package/src/components/accordion/Accordion.js

@@ -49,7 +49,7 @@ export class LeuAccordion extends LeuElement {
   _getHeadingTag() {
     let level = 2
     if (this.headingLevel > 0 && this.headingLevel < 7) {
-      level = this.headingLevel
+      level = Math.floor(this.headingLevel)
     }
 
     return `h${level}`

package/src/components/accordion/accordion.css

@@ -27,7 +27,7 @@
   width: 100%;
   background: none;
   padding: 1rem 0;
-  margin: none;
+  margin: 0;
   cursor: pointer;
 
   border: none;
@@ -114,6 +114,8 @@
 
 .contentwrapper[hidden] {
   grid-template-rows: 0fr;
+  opacity: 0;
+  visibility: hidden;
 }
 
 slot[name="content"] {
@@ -130,7 +132,6 @@ slot[name="content"] {
 }
 
 .divider {
-
   width: 100%;
   height: 1px;
   margin: 0;
@@ -138,7 +139,9 @@ slot[name="content"] {
   border: none;
   background-color: var(--divider-color);
 
-  transition: transform var(--transition), background-color var(--transition);
+  transition:
+    transform var(--transition),
+    background-color var(--transition);
 }
 
 :host(:not([open])) .heading:is(:hover, :focus-visible) ~ .divider {

package/src/components/accordion/stories/accordion.stories.js

@@ -4,10 +4,10 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import "../leu-accordion.js"
 
 export default {
-  title: "Accordion",
+  title: "Components/Accordion",
   component: "leu-accordion",
   argTypes: {
-    headingLevel: {
+    "heading-level": {
       control: "select",
       options: [1, 2, 3, 4, 5, 6],
     },
@@ -27,9 +27,10 @@ export default {
 
 function Template(args) {
   return html` <leu-accordion
-    heading-level=${ifDefined(args.headingLevel)}
+    heading-level=${ifDefined(args["heading-level"])}
     label=${ifDefined(args.label)}
-    label-prefix=${ifDefined(args.labelPrefix)}
+    label-prefix=${ifDefined(args["label-prefix"])}
+    ?open=${args.open}
   >
     <div slot="content">${args.content}</div>
   </leu-accordion>`
@@ -37,7 +38,7 @@ function Template(args) {
 
 export const Regular = Template.bind({})
 Regular.args = {
-  headingLevel: 2,
+  "heading-level": 2,
   label:
     "Akkordeontitel der lang und noch länger werden kann und dann umbricht",
   content: `Regular Interessierte können ab sofort die Genauigkeit ihrer Smartphones
@@ -55,5 +56,5 @@ Regular.args = {
 export const Prefix = Template.bind({})
 Prefix.args = {
   ...Regular.args,
-  labelPrefix: "01",
+  "label-prefix": "01",
 }

package/src/components/accordion/test/accordion.test.js

@@ -1,12 +1,12 @@
 import { html } from "lit"
-import { fixture, expect, elementUpdated, aTimeout } from "@open-wc/testing"
+import { fixture, expect } from "@open-wc/testing"
 
 import "../leu-accordion.js"
 
 async function defaultFixture() {
-  return fixture(
-    html` <leu-accordion label="Titel des Akkordeons"></leu-accordion> `
-  )
+  return fixture(html`
+    <leu-accordion label="Titel des Akkordeons"></leu-accordion>
+  `)
 }
 
 describe("LeuAccordion", () => {
@@ -66,7 +66,7 @@ describe("LeuAccordion", () => {
     const el = await fixture(
       html`<leu-accordion label="Titel des Akkordeons"
         ><div slot="content">Das ist der Inhalt</div></leu-accordion
-      >`
+      >`,
     )
 
     const button = el.shadowRoot.querySelector("button")
@@ -80,30 +80,34 @@ describe("LeuAccordion", () => {
     expect(el.open).to.be.false
   })
 
-  it("doesn't show the content when it is closed", async () => {
-    const el = await fixture(
-      html`<leu-accordion label="Titel des Akkordeons"
-        ><div slot="content">Das ist der Inhalt</div></leu-accordion
-      >`
-    )
+  // TODO: `.visible` throws an error:
+  // DOMException: HTMLDivElement object could not be cloned.
+  // Maybe chai-dom is not compatible with using slots?
+  // it("doesn't show the content when it is closed", async () => {
+  //   const el = await fixture(
+  //     html`<leu-accordion label="Titel des Akkordeons"
+  //       ><div slot="content">Das ist der Inhalt</div></leu-accordion
+  //     >`,
+  //   )
 
-    const button = el.shadowRoot.querySelector("button")
-    const content = el.querySelector("[slot=content]")
+  //   const button = el.shadowRoot.querySelector("button")
+  //   const content = el.querySelector("[slot=content]")
 
-    expect(content).not.to.be.visible
+  //   expect(el).to.have.attribute("label", "Titel des Akkordeons")
+  //   expect(content).not.to.be.visible
 
-    button.click()
-    await elementUpdated(el)
-    await aTimeout(100)
-    expect(content).to.be.visible
-  })
+  //   button.click()
+  //   await elementUpdated(el)
+  //   await aTimeout(150)
+  //   expect(content).to.be.visible
+  // })
 
   it("shows the label prefix before the label", async () => {
     const el = await fixture(
       html`<leu-accordion
         label-prefix="01"
         label="Titel des Akkordeons"
-      ></leu-accordion>`
+      ></leu-accordion>`,
     )
 
     const button = el.shadowRoot.querySelector("button")

package/src/components/button/Button.js

@@ -138,7 +138,7 @@ export class LeuButton extends LeuElement {
   hasTextContent() {
     return Array.from(this.childNodes).some(
       (node) =>
-        node.nodeType === node.TEXT_NODE && node.textContent.trim() !== ""
+        node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "",
     )
   }
 

package/src/components/button/stories/button.stories.js

@@ -16,7 +16,7 @@ function copyContent(e) {
 }
 
 export default {
-  title: "Button",
+  title: "Components/Button",
   component: "leu-button",
   parameters: {
     design: {
@@ -286,51 +286,49 @@ function TemplateOverview() {
       }
     </style>
     ${groups.map(
-      (group) =>
-        html`
-          <h2>${group.variant + (group.inverted ? " + inverted" : "")}</h2>
-          <div
-            class=${classMap({
-              "main-table": true,
-              group: true,
-              inverted: group.inverted,
-            })}
-          >
-            ${group.sizes.map(
-              (size) =>
-                html`
-                  <div>
-                    <div class=${classMap({ table: true })} data-root>
-                      ${size.items.map(
-                        (item) => html`
-                          <leu-button
-                            label=${ifDefined(item.label)}
-                            size=${ifDefined(size.size)}
-                            variant=${ifDefined(group.variant)}
-                            expanded=${ifDefined(item.expanded)}
-                            ?round=${item.round}
-                            ?active=${item.active}
-                            ?disabled=${item.disabled}
-                            ?inverted=${group.inverted}
-                            @click=${copyContent}
-                          >
-                            ${item.icon
-                              ? html` <leu-icon
-                                  slot=${ifDefined(item.iconPosition)}
-                                  name=${item.icon}
-                                ></leu-icon>`
-                              : nothing}
-                            ${item.content}
-                          </leu-button>
-                        `
-                      )}
-                    </div>
-                  </div>
-                `
-            )}
-          </div>
-          <p>Click the button to copy the code to the clipboard</p>
-        `
+      (group) => html`
+        <h2>${group.variant + (group.inverted ? " + inverted" : "")}</h2>
+        <div
+          class=${classMap({
+            "main-table": true,
+            group: true,
+            inverted: group.inverted,
+          })}
+        >
+          ${group.sizes.map(
+            (size) => html`
+              <div>
+                <div class=${classMap({ table: true })} data-root>
+                  ${size.items.map(
+                    (item) => html`
+                      <leu-button
+                        label=${ifDefined(item.label)}
+                        size=${ifDefined(size.size)}
+                        variant=${ifDefined(group.variant)}
+                        expanded=${ifDefined(item.expanded)}
+                        ?round=${item.round}
+                        ?active=${item.active}
+                        ?disabled=${item.disabled}
+                        ?inverted=${group.inverted}
+                        @click=${copyContent}
+                      >
+                        ${item.icon
+                          ? html` <leu-icon
+                              slot=${ifDefined(item.iconPosition)}
+                              name=${item.icon}
+                            ></leu-icon>`
+                          : nothing}
+                        ${item.content}
+                      </leu-button>
+                    `,
+                  )}
+                </div>
+              </div>
+            `,
+          )}
+        </div>
+        <p>Click the button to copy the code to the clipboard</p>
+      `,
     )}`
 }
 

package/src/components/button/test/button.test.js

@@ -25,7 +25,7 @@ describe("LeuButton", () => {
     const el = await fixture(
       html` <leu-button label="sichern">
         <leu-icon name="download"></leu-icon>
-      </leu-button>`
+      </leu-button>`,
     )
 
     await expect(el).shadowDom.to.be.accessible()
@@ -41,7 +41,7 @@ describe("LeuButton", () => {
     const el = await fixture(
       html` <leu-button label="Dokument herunterladen"
         ><leu-icon name="download"></leu-icon
-      ></leu-button>`
+      ></leu-button>`,
     )
     const button = el.shadowRoot.querySelector("button")
 
@@ -52,14 +52,14 @@ describe("LeuButton", () => {
     const el = await fixture(
       html` <leu-button
         ><leu-icon name="addBew" slot="before"></leu-icon>Sichern</leu-button
-      >`
+      >`,
     )
 
     const button = el.shadowRoot.querySelector("button")
 
     expect(button).dom.to.equal(
       "<button><div><slot name='before'></slot></div><span><slot></slot></span><div><slot name='after'></slot></div></button>",
-      { ignoreAttributes: ["class", "type"] }
+      { ignoreAttributes: ["class", "type"] },
     )
   })
 
@@ -67,14 +67,14 @@ describe("LeuButton", () => {
     const el = await fixture(
       html` <leu-button variant="ghost" expanded="true"
         ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
-      >`
+      >`,
     )
 
     const button = el.shadowRoot.querySelector("button")
 
     expect(button).dom.to.equal(
       "<button aria-expanded='true'><div><slot name='before'></slot></div><span><slot></slot></span><div><slot name='after'></slot></div><div class='icon-expanded'><leu-icon name='angleDropDown' size='24'></leu-icon></div></button>",
-      { ignoreAttributes: ["class", "type"] }
+      { ignoreAttributes: ["class", "type"] },
     )
 
     el.variant = "primary"
@@ -83,7 +83,7 @@ describe("LeuButton", () => {
 
     expect(button).dom.to.equal(
       "<button class='primary regular' aria-expanded='true'><div><slot name='before'></slot></div><span><slot></slot></span><div><slot name='after'></slot></div></button>",
-      { ignoreAttributes: ["class", "type"] }
+      { ignoreAttributes: ["class", "type"] },
     )
   })
 
@@ -92,7 +92,7 @@ describe("LeuButton", () => {
       html` <leu-button variant="ghost" expanded="true" disabled>
         <leu-icon name="addNew" slot="before"></leu-icon>
         Sichern
-      </leu-button>`
+      </leu-button>`,
     )
 
     const button = el.shadowRoot.querySelector("button")
@@ -109,7 +109,7 @@ describe("LeuButton", () => {
     const el = await fixture(
       html` <leu-button variant="ghost" componentRole="menuitemradio"
         ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
-      >`
+      >`,
     )
 
     const button = el.shadowRoot.querySelector("button")
@@ -121,7 +121,7 @@ describe("LeuButton", () => {
     const el = await fixture(
       html` <leu-button variant="ghost" componentRole="menuitemradio" active
         ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
-      >`
+      >`,
     )
 
     const button = el.shadowRoot.querySelector("button")

package/src/components/button-group/ButtonGroup.js

@@ -86,7 +86,7 @@ export class LeuButtonGroup extends LeuElement {
           bubbles: true,
           composed: true,
           detail: { value: LeuButtonGroup.getButtonValue(button) },
-        })
+        }),
       )
     }
   }

package/src/components/button-group/stories/button-group.stories.js

@@ -13,7 +13,7 @@ function updateStorybookArgss(id, args) {
 }
 
 export default {
-  title: "ButtonGroup",
+  title: "Components/ButtonGroup",
   component: "leu-button-group",
   parameters: {
     design: {
@@ -36,10 +36,10 @@ function Template({ items, value }, { id }) {
         (i) =>
           html`<leu-button
             variant="secondary"
-            ?active=${value === i}
+            ?active=${value === i || value === `${i}-attr`}
             value=${`${i}-attr`}
             >${i}
-          </leu-button>`
+          </leu-button>`,
       )}
     </leu-button-group>
     <br />

package/src/components/checkbox/checkbox.css

@@ -69,6 +69,7 @@
 
 .icon {
   position: absolute;
+  display: block;
   top: 0;
   left: 0;
   color: var(--checkbox-tick-color);

package/src/components/checkbox/stories/checkbox-group.stories.js

@@ -4,7 +4,7 @@ import "../leu-checkbox-group.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 
 export default {
-  title: "Checkbox/Group",
+  title: "Components/Checkbox/Group",
   component: "leu-checkbox-group",
   argTypes: {
     legend: { control: "text" },