@statistikzh/leu 0.14.3 → 0.15.0

package/rollup.config.js

@@ -3,8 +3,9 @@ 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"
 import replace from "@rollup/plugin-replace"
+import typescript from "rollup-plugin-typescript2"
+import { dts } from "rollup-plugin-dts"
 
 export const plugins = [
   {
@@ -35,30 +36,59 @@ export const plugins = [
 /**
  * @type {import("rollup").RollupOptions}
  */
-export default {
-  // 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)),
-        ],
+export default [
+  {
+    // Select all files in a direct subdirectory of src/components
+    // that have a name starting with
+    // -  a capital letter
+    // -  or "leu-"
+    input: {
+      index: "src/index.ts",
+      ...Object.fromEntries(
+        globSync("src/components/*/{[A-Z],leu-}*.ts", { nocase: false }).map(
+          (file) => [
+            path.basename(file, path.extname(file)),
+            fileURLToPath(new URL(file, import.meta.url)),
+          ],
+        ),
       ),
-    ),
+    },
+    output: {
+      dir: "./dist/",
+      format: "esm",
+      entryFileNames: "[name].js",
+    },
+    plugins: [
+      typescript({
+        tsconfig: fileURLToPath(
+          new URL("./tsconfig.build.json", import.meta.url),
+        ),
+        tsconfigOverride: {
+          compilerOptions: {
+            declarationMap: false,
+            emitDeclarationOnly: false,
+            declaration: false,
+          },
+        },
+      }),
+      ...plugins.map((p) => p.plugin(...p.args)),
+    ],
+    external: [/^lit(\/.*\.js)?$/, "@floating-ui/dom"],
   },
-  output: {
-    dir: "./dist/",
-    format: "esm",
-    entryFileNames: "[name].js",
+  {
+    input: {
+      ...Object.fromEntries(
+        globSync("dist/components/*/{[A-Z],leu-}*.d.ts", { nocase: false }).map(
+          (file) => [
+            path.basename(file, ".d.ts"),
+            fileURLToPath(new URL(file, import.meta.url)),
+          ],
+        ),
+      ),
+    },
+    output: {
+      dir: "./dist/",
+    },
+    plugins: [dts()],
   },
-  plugins: [
-    babel({ babelHelpers: "bundled" }),
-    ...plugins.map((p) => p.plugin(...p.args)),
-  ],
-  external: [/^lit(\/.*\.js)?$/, "@floating-ui/dom"],
-}
+]

package/scripts/generate-component/generate.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 
 import arg from "arg"
 import fs from "fs"

package/scripts/generate-component/templates/{[Name].js → [Name].ts}

@@ -1,4 +1,5 @@
 import { html } from "lit"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
@@ -15,9 +16,8 @@ export class Leu[Name] extends LeuElement {
     delegatesFocus: true,
   }
 
-  static properties = {
-    value: { type: String },
-  }
+  @property({ type: String })
+  value: string = ""
 
   constructor() {
     super()

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

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/web-components"
+import { html } from "lit"
+
+import "../[namespace]-[name].js"
+import {[Namespace][Name]} from "../[Name].js"
+
+type StoryArgs = [Namespace][Name]
+type Story = StoryObj<StoryArgs>
+
+export default {
+  title: "Components/[Name]",
+  component: "[namespace]-[name]",
+} satisfies Meta<StoryArgs>
+
+const Template: Story = {
+  render: ({}) => {
+    return html` <[namespace]-[name]></[namespace]-[name]>`
+  }
+}
+
+export const Regular = {
+  ...Template,
+  args: {
+    // Add default args here
+  }
+}

package/src/components/accordion/{Accordion.js → Accordion.ts}

@@ -1,17 +1,14 @@
 import { nothing } from "lit"
 import { html, unsafeStatic } from "lit/static-html.js"
+import { property } from "lit/decorators.js"
+
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./accordion.css"
 
 /**
  * @tagname leu-accordion
  * @slot content - The content of the accordion. No styles will be applied to the content.
- * @prop {number} headingLevel - The heading level of the accordion title. Must be between 1 and 6.
- * @prop {boolean} open - The expanded state of the accordion.
- * @prop {string} label - The label (title) of the accordion.
- * @prop {string} labelPrefix - The prefix of the accordion label. e.g. "01"
  * @attr {number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
  * @attr {string} label-prefix - The prefix of the accordion label. e.g. "01"
  */
@@ -24,29 +21,37 @@ export class LeuAccordion extends LeuElement {
     delegatesFocus: true,
   }
 
-  static properties = {
-    headingLevel: { type: Number, attribute: "heading-level", reflect: true },
-    open: { type: Boolean, reflect: true },
-    label: { type: String, reflect: true },
-    labelPrefix: { type: String, attribute: "label-prefix", reflect: true },
-  }
+  /**
+   * The heading level of the accordion title. Must be between 1 and 6.
+   */
+  @property({ type: Number, attribute: "heading-level", reflect: true })
+  headingLevel = 2
 
-  constructor() {
-    super()
-    this.headingLevel = 2
-    this.open = false
-    this.label = ""
-    this.labelPrefix = ""
-  }
+  /**
+   * The expanded state of the accordion.
+   */
+  @property({ type: Boolean, reflect: true })
+  open = false
+
+  /**
+   * The label (title) of the accordion
+   */
+  @property({ type: String, reflect: true })
+  label = ""
+
+  /**
+   * The prefix of the accordion label. e.g. "01"
+   */
+  @property({ type: String, attribute: "label-prefix", reflect: true })
+  labelPrefix = ""
 
   /**
    * Determines the heading tag of the accordion toggle.
    * The headingLevel shouldn't be used directly to render the heading tag
    * in order to avoid XSS issues.
-   * @returns {string} The heading tag of the accordion toggle.
    * @internal
    */
-  _getHeadingTag() {
+  private _getHeadingTag(): string {
     let level = 2
     if (this.headingLevel > 0 && this.headingLevel < 7) {
       level = Math.floor(this.headingLevel)
@@ -59,7 +64,7 @@ export class LeuAccordion extends LeuElement {
    * Toggles the accordion open state.
    * @internal
    */
-  _handleToggleClick() {
+  private _handleToggleClick() {
     this.open = !this.open
   }
 

package/src/components/accordion/{leu-accordion.js → leu-accordion.ts}

@@ -3,3 +3,9 @@ import { LeuAccordion } from "./Accordion.js"
 export { LeuAccordion }
 
 LeuAccordion.define("leu-accordion")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-accordion": LeuAccordion
+  }
+}

package/src/components/accordion/stories/{accordion.stories.js → accordion.stories.ts}

@@ -26,14 +26,16 @@ export default {
 }
 
 function Template(args) {
-  return html` <leu-accordion
-    heading-level=${ifDefined(args["heading-level"])}
-    label=${ifDefined(args.label)}
-    label-prefix=${ifDefined(args["label-prefix"])}
-    ?open=${args.open}
-  >
-    <div slot="content">${args.content}</div>
-  </leu-accordion>`
+  return html`
+    <leu-accordion
+      heading-level=${ifDefined(args["heading-level"])}
+      label=${ifDefined(args.label)}
+      label-prefix=${ifDefined(args["label-prefix"])}
+      ?open=${args.open}
+    >
+      <div slot="content">${args.content}</div>
+    </leu-accordion>
+  `
 }
 
 export const Regular = Template.bind({})

package/src/components/button/{Button.js → Button.ts}

@@ -1,40 +1,21 @@
 import { html, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { ifDefined } from "lit/directives/if-defined.js"
+import { property } from "lit/decorators.js"
 
 import { LeuIcon } from "../icon/Icon.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
 import { ARIA_CHECKED_ROLES, ARIA_SELECTED_ROLES } from "../../lib/a11y.js"
 
-// @ts-ignore
 import styles from "./button.css"
 
-/*
-Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
-Live Demo: zh.ch
-*/
-
-const BUTTON_VARIANTS = ["primary", "secondary", "ghost"]
-Object.freeze(BUTTON_VARIANTS)
-export { BUTTON_VARIANTS }
-
-const BUTTON_SIZES = ["regular", "small"]
-Object.freeze(BUTTON_SIZES)
-export { BUTTON_SIZES }
-
-const BUTTON_TYPES = ["button", "submit", "reset"]
-Object.freeze(BUTTON_TYPES)
-export { BUTTON_TYPES }
-
-export const BUTTON_EXPANDED_OPTIONS = ["true", "false"]
-Object.freeze(BUTTON_EXPANDED_OPTIONS)
-
 /**
  * @tagname leu-button
  * @slot before - The icon to display before the label
  * @slot after - The icon to display after the label
  * @slot - The label of the button or the icon if no label is set
+ * @see https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
  */
 export class LeuButton extends LeuElement {
   static dependencies = {
@@ -43,72 +24,92 @@ export class LeuButton extends LeuElement {
 
   static styles = [LeuElement.styles, styles]
 
-  /**
-   * @internal
-   */
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
-  /**
-   * @internal
-   */
-  hasSlotController = new HasSlotController(this, [
+  private hasSlotController = new HasSlotController(this, [
     "before",
     "after",
     "[default]",
   ])
 
-  static properties = {
-    label: { type: String, reflect: true },
-    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 },
-    active: { type: Boolean, reflect: true },
-    inverted: { type: Boolean, reflect: true },
-    expanded: { type: String, reflect: true },
-    fluid: { type: Boolean, reflect: true },
-  }
+  /**
+   * `aria-label` of the underlying button elements.
+   * Use it to provide a label when only an icon is visible.
+   */
+  @property({ type: String, reflect: true })
+  label: null | string = null
 
-  constructor() {
-    super()
-    /** @type {string} */
-    this.label = null
-    /** @type {string} */
-    this.size = "regular"
-    /** @type {string} */
-    this.variant = "primary"
-    /** @type {"button" | "submit" | "reset"} */
-    this.type = "button"
-
-    /** @type {string} */
-    this.componentRole = undefined
-
-    /** @type {boolean} */
-    this.disabled = false
-    /** @type {boolean} - Only taken into account if no Label and an Icon is set */
-    this.round = false
-    /** @type {boolean} */
-    this.active = false
-    /** @type {boolean} - will be used on dark Background */
-    this.inverted = false
-
-    /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
-    this.fluid = false
-
-    /**
-     * Only taken into account if variant is "ghost"
-     * @type {("true" | "false" | undefined)}
-     */
-    this.expanded = undefined
-  }
+  /**
+   * The size of the button.
+   */
+  @property({ type: String, reflect: true })
+  size: "regular" | "small" = "regular"
+
+  /**
+   * The visual variant of the button.
+   */
+  @property({ type: String, reflect: true })
+  variant: "primary" | "secondary" | "ghost" = "primary"
+
+  /**
+   * The `type` of the underlying button element.
+   */
+  @property({ type: String, reflect: true })
+  type: "button" | "submit" | "reset" = "button"
+
+  /**
+   * The `role` of the underlying button element.
+   */
+  @property({ type: String, reflect: true })
+  componentRole?: string
+
+  /**
+   * Whether the button is disabled or not.
+   * @type {boolean}
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false
+
+  /**
+   * Whether the button should be round.
+   * Can only be applied when the button contains an icon without a visible label.
+   * @type {boolean}
+   */
+  @property({ type: Boolean, reflect: true })
+  round: boolean = false
+
+  /**
+   * Whether the button is active or not.
+   * Depending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element.
+   */
+  @property({ type: Boolean, reflect: true })
+  active: boolean = false
+
+  /**
+   * Wheter the colors should be inverted. For use on dark backgrounds.
+   */
+  @property({ type: Boolean, reflect: true })
+  inverted: boolean = false
+
+  /**
+   * Whether the button is expanded or not.
+   * Only has an effect on the variant `ghost` to show an expanding icon.
+   * If the property is not set, the icon will not be shown.
+   * If it is set, the icon will either show an expanded or collapsed state.
+   */
+  @property({ type: String, reflect: true })
+  expanded?: "true" | "false"
+
+  /**
+   * Alters the shape of the button to be full width of its parent container
+   */
+  @property({ type: Boolean, reflect: true })
+  fluid: boolean = false
 
-  renderExpandingIcon() {
+  private renderExpandingIcon() {
     if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
       return html`<div class="icon-expanded">
         <leu-icon name="angleDropDown" size="24"></leu-icon>
@@ -118,16 +119,30 @@ export class LeuButton extends LeuElement {
     return nothing
   }
 
-  getAriaAttributes() {
-    const attributes = {
+  private getAriaAttributes() {
+    const attributes: {
+      role: string
+      label: string
+      checked?: "true" | "false"
+      selected?: "true" | "false"
+    } = {
       role: this.componentRole,
       label: this.label,
     }
 
+    // TODO: checked and selected roles are not mutually exclusive
     if (this.componentRole) {
-      if (ARIA_CHECKED_ROLES.includes(this.componentRole)) {
+      if (
+        (ARIA_CHECKED_ROLES as ReadonlyArray<string>).includes(
+          this.componentRole,
+        )
+      ) {
         attributes.checked = this.active ? "true" : "false"
-      } else if (ARIA_SELECTED_ROLES.includes(this.componentRole)) {
+      } else if (
+        (ARIA_SELECTED_ROLES as ReadonlyArray<string>).includes(
+          this.componentRole,
+        )
+      ) {
         attributes.selected = this.active ? "true" : "false"
       }
     }
@@ -135,7 +150,7 @@ export class LeuButton extends LeuElement {
     return attributes
   }
 
-  hasTextContent() {
+  private hasTextContent() {
     return Array.from(this.childNodes).some(
       (node) =>
         node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "",

package/src/components/button/{leu-button.js → leu-button.ts}

@@ -3,3 +3,9 @@ import { LeuButton } from "./Button.js"
 export { LeuButton }
 
 LeuButton.define("leu-button")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-button": LeuButton
+  }
+}

package/src/components/button/stories/{button.stories.js → button.stories.ts}

@@ -4,12 +4,11 @@ import { classMap } from "lit/directives/class-map.js"
 import "../leu-button.js"
 import "../../icon/leu-icon.js"
 import { paths as iconPaths } from "../../icon/paths.js"
-import {
-  BUTTON_VARIANTS,
-  BUTTON_TYPES,
-  BUTTON_SIZES,
-  BUTTON_EXPANDED_OPTIONS,
-} from "../Button.js"
+
+const BUTTON_VARIANTS = ["primary", "secondary", "ghost"] as const
+const BUTTON_SIZES = ["regular", "small"] as const
+const BUTTON_TYPES = ["button", "submit", "reset"] as const
+const BUTTON_EXPANDED_OPTIONS = ["true", "false"] as const
 
 function copyContent(e) {
   navigator.clipboard.writeText(e.target.outerHTML.replace(/<!--.*?-->/g, ""))

package/src/components/button-group/{ButtonGroup.js → ButtonGroup.ts}

@@ -1,32 +1,32 @@
 import { html } from "lit"
+
 import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuButton } from "../button/Button.js"
 
-// @ts-ignore
 import styles from "./button-group.css"
 
 /**
+ * A radio input-like button group component.
+ * It allows only one button to be active at a time.
  * @tagname leu-button-group
  * @slot - Slot for the buttons
- * @prop {string} value - The value of the currenty selected (active) button
  * @fires input - When the value of the group changes by clicking a button
  */
 export class LeuButtonGroup extends LeuElement {
   static styles = [LeuElement.styles, styles]
 
-  constructor() {
-    super()
-
-    this._items = []
-  }
+  private _items: LeuButton[] = []
 
   /**
-   * @param {import("../button/Button").LeuButton} button
-   * @returns {string}
+   * Retrieves the value or the text content of a given LeuButton element.
    */
-  static getButtonValue(button) {
-    return button.getAttribute("value") ?? button.innerText.trim()
+  private static getButtonValue(button: LeuButton) {
+    return button.getAttribute("value") ?? button.textContent.trim()
   }
 
+  /**
+   * The value of the currently selected (active) button
+   */
   get value() {
     const activeButton = this._items.find((item) => item.active)
     return activeButton ? LeuButtonGroup.getButtonValue(activeButton) : null
@@ -40,7 +40,7 @@ export class LeuButtonGroup extends LeuElement {
     })
   }
 
-  _handleSlotChange() {
+  private _handleSlotChange() {
     /**
      * Remove all event listeners that were added before.
      * Just because a slotchange event was fired, it doesn't mean that all of the
@@ -51,13 +51,15 @@ export class LeuButtonGroup extends LeuElement {
     })
 
     const slot = this.shadowRoot.querySelector("slot")
-    this._items = slot.assignedElements({ flatten: true })
+    this._items = slot
+      .assignedElements({ flatten: true })
+      .filter((el) => el instanceof LeuButton)
 
     let foundActiveButtonBefore = false
 
     this._items.forEach((item) => {
       /* eslint-disable no-param-reassign */
-      item.addEventListener("click", () => this._handleButtonClick(item))
+      item.addEventListener("click", this._handleButtonClick)
       item.componentRole = "menuitemradio"
 
       /**
@@ -74,10 +76,9 @@ export class LeuButtonGroup extends LeuElement {
     })
   }
 
-  /**
-   * @param {import("../button/Button").LeuButton} button
-   */
-  _handleButtonClick(button) {
+  private _handleButtonClick = (event: MouseEvent) => {
+    const button = event.currentTarget as LeuButton
+
     if (!button.active) {
       this.value = LeuButtonGroup.getButtonValue(button)
 

package/src/components/button-group/{leu-button-group.js → leu-button-group.ts}

@@ -3,3 +3,9 @@ import { LeuButtonGroup } from "./ButtonGroup.js"
 export { LeuButtonGroup }
 
 LeuButtonGroup.define("leu-button-group")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-button-group": LeuButtonGroup
+  }
+}