@statistikzh/leu 0.4.0 → 0.5.1

package/index.js

@@ -1,3 +1,5 @@
+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"
@@ -8,6 +10,7 @@ export * from "./src/components/input/Input.js"
 export * from "./src/components/menu/Menu.js"
 export * from "./src/components/menu/MenuItem.js"
 export * from "./src/components/pagination/Pagination.js"
+export * from "./src/components/popup/Popup.js"
 export * from "./src/components/radio/Radio.js"
 export * from "./src/components/radio/RadioGroup.js"
 export * from "./src/components/select/Select.js"

package/package.json

@@ -3,25 +3,37 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "customElements": "dist/custom-elements.json",
+  "web-types": "./dist/web-types.json",
+  "exports": {
+    ".": {
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": "./dist/*"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/statistikzh/leu.git"
   },
   "homepage": "https://github.com/statistikzh/leu/",
   "scripts": {
-    "analyze": "cem analyze --litelement --globs \"src/**/*.js\"",
-    "build": "rimraf dist && npm run build:js && npm run build:css",
+    "analyze": "cem analyze --config custom-elements-manifest.config.js",
+    "build": "rimraf dist && npm run build:js && npm run build:types && npm run build:css && npm run analyze",
     "build:js": "rollup -c rollup.config.js",
+    "build:types": "tsc -p tsconfig.build.json",
     "build:css": "postcss src/styles/theme.css -o dist/theme.css && cp dist/theme.css .storybook/static/",
     "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: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",
@@ -40,31 +52,36 @@
     "@babel/preset-env": "^7.23.3",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@open-wc/eslint-config": "^9.2.1",
     "@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-typescript": "^11.1.6",
     "@storybook/addon-designs": "^7.0.9",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/web-components": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/web-components": "^7.6.17",
     "@web/dev-server": "^0.1.34",
     "@web/dev-server-rollup": "^0.5.2",
-    "@web/storybook-builder": "^0.1.2",
+    "@web/storybook-builder": "^0.1.6",
     "@web/storybook-framework-web-components": "^0.1.1",
     "@web/test-runner": "^0.18.0",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "@whitespace/storybook-addon-html": "^5.1.6",
     "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",
     "es-dev-server": "^2.1.0",
     "esbuild": "^0.20.0",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-storybook": "^0.6.14",
+    "glob": "^10.3.10",
     "husky": "^8.0.0",
     "lint-staged": "^10.5.4",
     "nodemon": "^3.0.2",
@@ -83,11 +100,12 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-postcss-lit": "^2.1.0",
     "sinon": "^17.0.1",
-    "storybook": "^7.6.10",
+    "storybook": "^7.6.17",
     "stylelint": "^15.10.3",
-    "stylelint-config-standard": "^34.0.0"
+    "stylelint-config-standard": "^34.0.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.3"
   },
-  "customElements": "custom-elements.json",
   "prettier": {
     "semi": false
   },

package/postcss.config.cjs

@@ -1,10 +1,12 @@
 const postcssPresetEnv = require("postcss-preset-env")
 const atImport = require("postcss-import")
+const leuFontStyles = require("./scripts/postcss-leu-font-styles.cjs")
 
 module.exports = {
   stage: 2,
   plugins: [
     atImport(),
+    leuFontStyles(),
     postcssPresetEnv({
       features: {
         "custom-media-queries": true,

package/rollup.config.js

@@ -1,3 +1,6 @@
+import { globSync } from "glob"
+import path from "path"
+import { fileURLToPath } from "url"
 import postcss from "rollup-plugin-postcss"
 import postcssLit from "rollup-plugin-postcss-lit"
 import { babel } from "@rollup/plugin-babel"
@@ -17,44 +20,25 @@ export const plugins = [
   },
 ]
 
+/**
+ * @type {import("rollup").RollupOptions}
+ */
 export default {
-  input: [
-    "index.js",
-    "./src/components/button/leu-button.js",
-    "./src/components/button/Button.js",
-    "./src/components/button-group/leu-button-group.js",
-    "./src/components/button-group/ButtonGroup.js",
-    "./src/components/checkbox/leu-checkbox.js",
-    "./src/components/checkbox/leu-checkbox-group.js",
-    "./src/components/checkbox/Checkbox.js",
-    "./src/components/checkbox/CheckboxGroup.js",
-    "./src/components/chip/leu-chip-group.js",
-    "./src/components/chip/leu-chip-link.js",
-    "./src/components/chip/leu-chip-removable.js",
-    "./src/components/chip/leu-chip-selectable.js",
-    "./src/components/chip/ChipGroup.js",
-    "./src/components/chip/ChipLink.js",
-    "./src/components/chip/ChipRemovable.js",
-    "./src/components/chip/ChipSelectable.js",
-    "./src/components/dropdown/leu-dropdown.js",
-    "./src/components/dropdown/Dropdown.js",
-    "./src/components/input/leu-input.js",
-    "./src/components/input/Input.js",
-    "./src/components/menu/leu-menu.js",
-    "./src/components/menu/leu-menu-item.js",
-    "./src/components/menu/Menu.js",
-    "./src/components/menu/MenuItem.js",
-    "./src/components/pagination/leu-pagination.js",
-    "./src/components/pagination/Pagination.js",
-    "./src/components/radio/leu-radio.js",
-    "./src/components/radio/leu-radio-group.js",
-    "./src/components/radio/Radio.js",
-    "./src/components/radio/RadioGroup.js",
-    "./src/components/select/leu-select.js",
-    "./src/components/select/Select.js",
-    "./src/components/table/leu-table.js",
-    "./src/components/table/Table.js",
-  ],
+  // Select all files in a direct subdirectory of src/components
+  // that have a name starting with
+  // -  a capital letter
+  // -  or "leu-"
+  input: {
+    index: "index.js",
+    ...Object.fromEntries(
+      globSync("src/components/*/{[A-Z],leu-}*.js", { nocase: false }).map(
+        (file) => [
+          path.basename(file, path.extname(file)),
+          fileURLToPath(new URL(file, import.meta.url)),
+        ]
+      )
+    ),
+  },
   output: {
     dir: "./dist/",
     format: "esm",
@@ -66,6 +50,3 @@ export default {
   ],
   external: /^lit(\/.*\.js)?$/,
 }
-
-// TODO: add a second config for a bundle with esbuild
-// import esbuild from "rollup-plugin-esbuild"

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

@@ -4,8 +4,8 @@
 }
 
 :host {
-  --[name]-font-regular: var(--leu-font-regular);
-  --[name]-font-black: var(--leu-font-black);
+  --[name]-font-regular: var(--leu-font-family-regular);
+  --[name]-font-black: var(--leu-font-family-black);
 
   font-family: var(--[name]-font-regular);
 }

package/scripts/postcss-leu-font-styles.cjs

@@ -0,0 +1,160 @@
+const path = require("path")
+const fs = require("fs/promises")
+
+/* Plugin logic */
+
+function getPixelValue(value) {
+  return parseInt(value.replace("px", ""), 10)
+}
+
+async function parseFile(file) {
+  const string = await fs.readFile(file, "utf-8")
+
+  return JSON.parse(string)
+}
+
+function generateCustomPropertyDeclarations({
+  identifier,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  spacing,
+}) {
+  const customPropertyPrefix = `--leu-t-${identifier}-${fontWeight}`
+
+  const varFontSize = `${customPropertyPrefix}-font-size`
+  const varLineHeight = `${customPropertyPrefix}-line-height`
+  const varSpacing = `${customPropertyPrefix}-spacing`
+  const varFont = `${customPropertyPrefix}-font`
+  const varFontFamily = `--leu-font-family-${fontWeight}`
+
+  return [
+    { type: "fontSize", name: varFontSize, value: `${fontSize / 16}rem` },
+    { type: "lineHeight", name: varLineHeight, value: `${lineHeight}` },
+    { type: "spacing", name: varSpacing, value: `${spacing}rem` },
+    {
+      type: "font",
+      name: varFont,
+      value: `var(${varFontSize}) / var(${varLineHeight}) var(${varFontFamily})`,
+    },
+  ]
+}
+
+function curveStepDeclarations(curvePrefix, stepStyle) {
+  const fontSizeVar = stepStyle.declarations.find(
+    (s) => s.type === "fontSize"
+  ).name
+  const lineHeightVar = stepStyle.declarations.find(
+    (s) => s.type === "lineHeight"
+  ).name
+  const spacingVar = stepStyle.declarations.find(
+    (s) => s.type === "spacing"
+  ).name
+  const fontVar = stepStyle.declarations.find((s) => s.type === "font").name
+
+  return [
+    { prop: `${curvePrefix}-font-size`, value: ` var(${fontSizeVar})` },
+    { prop: `${curvePrefix}-line-height`, value: ` var(${lineHeightVar})` },
+    { prop: `${curvePrefix}-spacing`, value: ` var(${spacingVar})` },
+    { prop: `${curvePrefix}-font`, value: ` var(${fontVar})` },
+  ]
+}
+
+/**
+ *
+ * @param {*} file
+ * @param {import('postcss')} postcss
+ * @param {import('postcss').Source} nodeSource
+ * @returns
+ */
+async function createLeuFontStyleNodes(file, postcss, nodeSource) {
+  const { definitions, curves } = await parseFile(file)
+
+  const fontStyleDeclarations = definitions.flatMap((style) => {
+    const fontSize = getPixelValue(style.fontSize)
+    const fontWeights = Array.isArray(style.fontWeight)
+      ? style.fontWeight
+      : [style.fontWeight]
+    const spacing = getPixelValue(style.spacing) / 16
+
+    const identifier = (fontSize / 4) * 10
+
+    return fontWeights.map((fontWeight) => ({
+      name: style.name,
+      fontWeight,
+      identifier,
+      declarations: generateCustomPropertyDeclarations({
+        identifier,
+        fontSize,
+        fontWeight,
+        lineHeight: style.lineHeight,
+        spacing,
+      }),
+    }))
+  })
+
+  const fontStyleNodes = fontStyleDeclarations.flatMap((style) =>
+    style.declarations.map(
+      ({ name, value }) =>
+        new postcss.Declaration({ prop: name, value, source: nodeSource })
+    )
+  )
+
+  const curveNodes = curves.flatMap((curve) => {
+    const [_, lastStepName] = curve.steps.at(-1)
+    const { identifier } = fontStyleDeclarations.find(
+      (style) => style.name === lastStepName && style.fontWeight === "black"
+    )
+
+    const curvePrefix = `--leu-t-curve-${identifier}-black`
+
+    return curve.steps.flatMap((step) => {
+      const [viewport, styleName] = step
+
+      const stepStyle = fontStyleDeclarations.find(
+        (s) => s.name === styleName && s.fontWeight === "black"
+      )
+
+      const nodes = curveStepDeclarations(curvePrefix, stepStyle).map(
+        ({ prop, value }) =>
+          new postcss.Declaration({ prop, value, source: nodeSource })
+      )
+
+      return viewport === null
+        ? nodes
+        : new postcss.AtRule({
+            name: "media",
+            params: `(${viewport})`,
+            nodes,
+            source: nodeSource,
+          })
+    })
+  })
+
+  return [...fontStyleNodes, ...curveNodes]
+}
+
+/* Plugin config */
+
+/**
+ * @type {import('postcss').PluginCreator}
+ */
+module.exports = () => ({
+  postcssPlugin: "leu-font-styles",
+  AtRule: {
+    "leu-font-styles": async (atRule, postcss) => {
+      const rootDir = path.dirname(atRule.source.input.file)
+      const jsonFile = atRule.params.replace(/['"]+/g, "")
+
+      const nodes = await createLeuFontStyleNodes(
+        path.resolve(rootDir, jsonFile),
+        postcss,
+        atRule.source
+      )
+
+      atRule.replaceWith(nodes)
+    },
+  },
+})
+
+module.exports.postcss = true

package/src/components/accordion/accordion.css

@@ -6,8 +6,8 @@
 }
 
 :host {
-  --accordion-font-regular: var(--leu-font-regular);
-  --accordion-font-black: var(--leu-font-black);
+  --accordion-font-regular: var(--leu-font-family-regular);
+  --accordion-font-black: var(--leu-font-family-black);
 
   --accordion-toggle-font: var(--accordion-font-black);
 

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

@@ -8,7 +8,8 @@ export default {
   component: "leu-accordion",
   argTypes: {
     headingLevel: {
-      options: [0, 1, 2, 3, 4, 5, 6],
+      control: "select",
+      options: [1, 2, 3, 4, 5, 6],
     },
     content: {
       control: {

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

@@ -1,5 +1,5 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { fixture, expect, elementUpdated, aTimeout } from "@open-wc/testing"
 
 import "../leu-accordion.js"
 
@@ -88,11 +88,13 @@ describe("LeuAccordion", () => {
     )
 
     const button = el.shadowRoot.querySelector("button")
-    const content = el.shadowRoot.querySelector(".content")
+    const content = el.querySelector("[slot=content]")
 
     expect(content).not.to.be.visible
 
     button.click()
+    await elementUpdated(el)
+    await aTimeout(100)
     expect(content).to.be.visible
   })
 

package/src/components/breadcrumb/Breadcrumb.js

@@ -7,6 +7,7 @@ import { Icon } from "../icon/icon.js"
 import "../menu/leu-menu.js"
 import "../menu/leu-menu-item.js"
 import "../popup/leu-popup.js"
+import "../visually-hidden/leu-visually-hidden.js"
 import { debounce } from "../../lib/utils.js"
 
 /**
@@ -276,7 +277,7 @@ export class LeuBreadcrumb extends LitElement {
 
     return html`
       <nav class=${classMap(wrapperClasses)}>
-        <h2 class="visuallyhidden">Sie sind hier:</h2>
+        <leu-visually-hidden><h2>Sie sind hier:</h2></leu-visually-hidden>
         <ol class="breadcrumbs__list" ref=${ref(this._containerRef)}>
           ${showBackOnly
             ? html` <li class="breadcrumbs__item breadcrumbs__item--back">

package/src/components/breadcrumb/breadcrumb.css

@@ -4,8 +4,8 @@
 }
 
 :host {
-  --breadcrumb-font-regular: var(--leu-font-regular);
-  --breadcrumb-font-black: var(--leu-font-black);
+  --breadcrumb-font-regular: var(--leu-font-family-regular);
+  --breadcrumb-font-black: var(--leu-font-family-black);
 
   font-family: var(--breadcrumb-font-regular);
   line-height: 1.5;
@@ -74,17 +74,6 @@
   box-shadow: var(--leu-box-shadow-short);
 }
 
-.visuallyhidden {
-  clip: rect(0 0 0 0);
-  border: 0;
-  height: 1px;
-  margin: -1px !important;
-  overflow: hidden;
-  padding: 0 !important;
-  position: absolute;
-  width: 1px;
-}
-
 .breadcrumbs {
   font-size: 1rem;
 }

package/src/components/button/Button.js

@@ -1,6 +1,9 @@
 import { html, nothing, LitElement } from "lit"
 import { classMap } from "lit/directives/class-map.js"
+import { ifDefined } from "lit/directives/if-defined.js"
+
 import { Icon } from "../icon/icon.js"
+import { HasSlotController } from "../../lib/hasSlotController.js"
 
 import styles from "./button.css"
 
@@ -21,9 +24,36 @@ const BUTTON_TYPES = ["button", "submit", "reset"]
 Object.freeze(BUTTON_TYPES)
 export { BUTTON_TYPES }
 
-export const BUTTON_EXPANDED_OPTIONS = ["open", "closed"]
+export const BUTTON_EXPANDED_OPTIONS = ["true", "false"]
 Object.freeze(BUTTON_EXPANDED_OPTIONS)
 
+/**
+ * All roles that are associated with a aria-checked attribute
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
+ */
+const ARIA_ROLES_CHECKED = [
+  "checkbox",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "option",
+  "radio",
+  "switch",
+]
+
+/**
+ * All roles that are associated with a aria-selected attribute
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
+ */
+const ARIA_ROLES_SELECTED = [
+  "gridcell",
+  "option",
+  "row",
+  "tab",
+  "columnheader",
+  "rowheader",
+  "treeitem",
+]
+
 /**
  * @tagname leu-button
  */
@@ -38,6 +68,11 @@ export class LeuButton extends LitElement {
     delegatesFocus: true,
   }
 
+  /**
+   * @internal
+   */
+  hasSlotController = new HasSlotController(this, ["[default]"])
+
   static properties = {
     label: { type: String, reflect: true },
     icon: { type: String, reflect: true },
@@ -45,6 +80,7 @@ export class LeuButton extends LitElement {
     size: { type: String, reflect: true },
     variant: { type: String, reflect: true },
     type: { type: String, reflect: true },
+    componentRole: { type: String, reflect: true },
 
     disabled: { type: Boolean, reflect: true },
     round: { type: Boolean, reflect: true },
@@ -66,7 +102,7 @@ export class LeuButton extends LitElement {
     this.size = "regular"
     /** @type {string} */
     this.variant = "primary"
-    /** @type {string} */
+    /** @type {"button" | "submit" | "reset"} */
     this.type = "button"
 
     /** @type {boolean} */
@@ -83,7 +119,7 @@ export class LeuButton extends LitElement {
 
     /**
      * Only taken into account if variant is "ghost"
-     * @type {("open" | "closed" | undefined)}
+     * @type {("true" | "false" | undefined)}
      */
     this.expanded = undefined
   }
@@ -103,7 +139,7 @@ export class LeuButton extends LitElement {
   }
 
   renderIconAfter() {
-    if (this.icon && this.label && this.iconPosition === "after") {
+    if (this.icon && this.iconPosition === "after") {
       return html`<div class="icon-wrapper icon-wrapper--after">
         ${Icon(this.icon, this.getIconSize())}
       </div>`
@@ -122,10 +158,30 @@ export class LeuButton extends LitElement {
     return nothing
   }
 
+  getAriaAttributes() {
+    const attributes = {
+      role: this.componentRole,
+      label: this.label,
+    }
+
+    if (this.componentRole) {
+      if (ARIA_ROLES_CHECKED.includes(this.componentRole)) {
+        attributes.checked = this.active ? "true" : "false"
+      } else if (ARIA_ROLES_SELECTED.includes(this.componentRole)) {
+        attributes.selected = this.active ? "true" : "false"
+      }
+    }
+
+    return attributes
+  }
+
   render() {
+    const hasContent = this.hasSlotController.test("[default]")
+    const aria = this.getAriaAttributes()
+
     const cssClasses = {
-      icon: !this.label && this.icon,
-      round: !this.label && this.icon && this.round,
+      icon: !hasContent && this.icon,
+      round: !hasContent && this.icon && this.round,
       active: this.active,
       inverted: this.inverted,
       [this.variant]: true,
@@ -133,12 +189,17 @@ export class LeuButton extends LitElement {
     }
     return html`
       <button
+        aria-label=${ifDefined(aria.label)}
+        aria-selected=${ifDefined(aria.selected)}
+        aria-checked=${ifDefined(aria.checked)}
+        role=${ifDefined(aria.role)}
         class=${classMap(cssClasses)}
         ?disabled=${this.disabled}
         type=${this.type}
       >
-        ${this.renderIconBefore()} ${this.label} ${this.renderIconAfter()}
-        ${this.renderExpandingIcon()}
+        ${this.renderIconBefore()}
+        <span class="label"><slot></slot></span>
+        ${this.renderIconAfter()} ${this.renderExpandingIcon()}
       </button>
     `
   }

package/src/components/button/button.css

@@ -3,18 +3,31 @@
 }
 
 button {
-  font-family: var(--leu-font-black);
+  font-family: var(--leu-font-family-black);
   text-align: center;
   appearance: none;
   transition: background 0.1s ease;
   cursor: pointer;
   border: 1px solid transparent;
   border-radius: 2px;
+
+  max-width: 100%;
   display: flex;
   align-items: center;
   column-gap: 8px;
 }
 
+.label {
+  flex: 1 1 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon .label {
+  display: none;
+}
+
 button.round {
   border-radius: 50%;
 }
@@ -76,6 +89,10 @@ button.primary.active {
   background: var(--leu-color-black-100);
 }
 
+button.primary.active:hover {
+  background: var(--leu-color-black-transp-80);
+}
+
 button.primary:disabled {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-transp-20);
@@ -97,6 +114,10 @@ button.secondary.active {
   background: var(--leu-color-black-100);
 }
 
+button.secondary.active:hover {
+  background: var(--leu-color-black-transp-80);
+}
+
 button.secondary:disabled {
   color: var(--leu-color-black-transp-20);
   background: var(--leu-color-black-transp-5);
@@ -107,7 +128,7 @@ button.ghost {
   background: transparent;
   padding: 0 0.5rem;
   color: var(--leu-color-black-60);
-  font-family: var(--leu-font-regular);
+  font-family: var(--leu-font-family-regular);
 }
 
 button.ghost:hover {