@statistikzh/leu 0.14.3 → 0.14.4

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

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

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

@@ -3,3 +3,9 @@ import { LeuChipLink } from "./ChipLink.js"
 export { LeuChipLink }
 
 LeuChipLink.define("leu-chip-link")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-chip-link": LeuChipLink
+  }
+}

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

@@ -3,3 +3,9 @@ import { LeuChipRemovable } from "./ChipRemovable.js"
 export { LeuChipRemovable }
 
 LeuChipRemovable.define("leu-chip-removable")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-chip-removable": LeuChipRemovable
+  }
+}

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

@@ -3,3 +3,9 @@ import { LeuChipSelectable } from "./ChipSelectable.js"
 export { LeuChipSelectable }
 
 LeuChipSelectable.define("leu-chip-selectable")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-chip-selectable": LeuChipSelectable
+  }
+}

package/src/components/dialog/{Dialog.js → Dialog.ts}

@@ -8,7 +8,6 @@ import { LeuIcon } from "../icon/Icon.js"
 
 // design: https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&node-type=FRAME
 
-// @ts-ignore
 import styles from "./dialog.css"
 
 /**

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

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

package/src/components/dropdown/{Dropdown.js → Dropdown.ts}

@@ -9,7 +9,6 @@ import { LeuMenu } from "../menu/Menu.js"
 import { LeuMenuItem } from "../menu/MenuItem.js"
 import { LeuPopup } from "../popup/Popup.js"
 
-// @ts-ignore
 import styles from "./dropdown.css"
 
 /**

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

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

package/src/components/icon/{Icon.js → Icon.ts}

@@ -2,7 +2,6 @@ import { html, svg } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./icon.css"
 import { paths } from "./paths.js"
 

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

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

package/src/components/input/{Input.js → Input.ts}

@@ -7,7 +7,6 @@ import { createRef, ref } from "lit/directives/ref.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-// @ts-ignore
 import styles from "./input.css"
 
 export const SIZES = Object.freeze({

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

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

package/src/components/menu/{Menu.js → Menu.ts}

@@ -4,7 +4,6 @@ import { LeuElement } from "../../lib/LeuElement.js"
 
 import { LeuMenuItem } from "./MenuItem.js"
 
-// @ts-ignore
 import styles from "./menu.css"
 
 /**

package/src/components/menu/{MenuItem.js → MenuItem.ts}

@@ -4,7 +4,6 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-// @ts-ignore
 import styles from "./menu-item.css"
 
 /**

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

@@ -3,3 +3,9 @@ import { LeuMenuItem } from "./MenuItem.js"
 export { LeuMenuItem }
 
 LeuMenuItem.define("leu-menu-item")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-menu-item": LeuMenuItem
+  }
+}

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

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

package/src/components/pagination/{Pagination.js → Pagination.ts}

@@ -6,7 +6,6 @@ import { LeuButton } from "../button/Button.js"
 import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-// @ts-ignore
 import styles from "./pagination.css"
 
 const MIN_PAGE = 1

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

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

package/src/components/popup/{Popup.js → Popup.ts}

@@ -9,7 +9,6 @@ import {
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./popup.css"
 
 /**

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

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

package/src/components/radio/{Radio.js → Radio.ts}

@@ -2,7 +2,6 @@ import { html } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./radio.css"
 
 /**

package/src/components/radio/{RadioGroup.js → RadioGroup.ts}

@@ -3,7 +3,6 @@ import { classMap } from "lit/directives/class-map.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./radio-group.css"
 
 /**

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

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

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

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

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

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

package/src/components/scroll-top/{ScrollTop.js → ScrollTop.ts}

@@ -7,7 +7,6 @@ import { LeuIcon } from "../icon/Icon.js"
 
 import { throttle } from "../../lib/utils.js"
 
-// @ts-ignore
 import styles from "./scroll-top.css"
 
 /**

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

@@ -3,3 +3,9 @@ import { LeuScrollTop } from "./ScrollTop.js"
 export { LeuScrollTop }
 
 LeuScrollTop.define("leu-scroll-top")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-scroll-top": LeuScrollTop
+  }
+}

package/src/components/select/{Select.js → Select.ts}

@@ -13,7 +13,6 @@ import { LeuIcon } from "../icon/Icon.js"
 import { LeuInput } from "../input/Input.js"
 import { LeuPopup } from "../popup/Popup.js"
 
-// @ts-ignore
 import styles from "./select.css"
 
 /**

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

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

package/src/components/select/test/{fixtures.js → fixtures.ts}

@@ -159,4 +159,4 @@ export const MUNICIPALITIES = [
   "Illnau-Effretikon",
   "Bauma",
   "Wiesendangen",
-]
+] as const

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

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

package/src/components/table/{Table.js → Table.ts}

@@ -7,7 +7,6 @@ import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 import { LeuPagination } from "../pagination/Pagination.js"
 
-// @ts-ignore
 import styles from "./table.css"
 
 /**

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

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

package/src/components/visually-hidden/{VisuallyHidden.js → VisuallyHidden.ts}

@@ -2,7 +2,6 @@ import { html } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./visually-hidden.css"
 
 /**

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

@@ -3,3 +3,9 @@ import { LeuVisuallyHidden } from "./VisuallyHidden.js"
 export { LeuVisuallyHidden }
 
 LeuVisuallyHidden.define("leu-visually-hidden")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-visually-hidden": LeuVisuallyHidden
+  }
+}

package/src/docs/theme.mdx

@@ -1,6 +1,7 @@
 import { Meta, Markdown, Canvas } from "@storybook/blocks"
+import React from "react"
 
-import * as GridStories from "../styles/style.stories.js"
+import * as GridStories from "../styles/style.stories"
 
 <Meta title="Introduction/Theme" />
 
@@ -16,7 +17,7 @@ export const ColorTable = ({ prefix, shades }) => {
       <tbody>
         {shades.map((shade) => {
           return (
-            <tr>
+            <tr key={`${prefix}-${shade}`}>
               <td
                 style={{
                   background:
@@ -160,6 +161,7 @@ box-shadow: var(--leu-box-shadow-short);
 <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
   {["short", "regular", "long"].map((shadow) => (
     <div
+      key={shadow}
       style={{
         boxShadow: `var(--leu-box-shadow-${shadow})`,
         padding: "1rem",
@@ -183,14 +185,16 @@ The font files and the font face declaration are not part of the package. You ne
 Each weight has a unique font family name. The `@font-face` declaration has to match this naming.
 
 <table>
-  <tr>
-    <td>regular</td>
-    <td>InterRegular</td>
-  </tr>
-  <tr>
-    <td>black</td>
-    <td>InterBlack</td>
-  </tr>
+  <tbody>
+    <tr>
+      <td>regular</td>
+      <td>InterRegular</td>
+    </tr>
+    <tr>
+      <td>black</td>
+      <td>InterBlack</td>
+    </tr>
+  </tbody>
 </table>
 
 In the theme those two definitions including fallbacks are defined as custom properties.

package/src/global.d.ts

@@ -0,0 +1,11 @@
+declare module "*.css" {
+  import { CSSResult } from "lit"
+
+  const css: CSSResult
+  export default css
+}
+
+/**
+ * The value is injected at build time.
+ */
+declare const __LEU_VERSION__: string

package/src/index.ts

@@ -0,0 +1,17 @@
+export * from "./components/accordion/Accordion.js"
+export * from "./components/button/Button.js"
+export * from "./components/button-group/ButtonGroup.js"
+export * from "./components/checkbox/Checkbox.js"
+export * from "./components/checkbox/CheckboxGroup.js"
+export * from "./components/chip/exports.js"
+export * from "./components/dropdown/Dropdown.js"
+export * from "./components/input/Input.js"
+export * from "./components/menu/Menu.js"
+export * from "./components/menu/MenuItem.js"
+export * from "./components/pagination/Pagination.js"
+export * from "./components/popup/Popup.js"
+export * from "./components/radio/Radio.js"
+export * from "./components/radio/RadioGroup.js"
+export * from "./components/select/Select.js"
+export * from "./components/table/Table.js"
+export * from "./lib/LeuElement.js"

package/src/lib/{LeuElement.js → LeuElement.ts}

@@ -1,17 +1,23 @@
-import { LitElement } from "lit"
+import { CSSResultGroup, LitElement } from "lit"
 import commonStyles from "../styles/common-styles.css"
 
 export class LeuElement extends LitElement {
   static version = __LEU_VERSION__
 
-  static dependencies = {}
+  static dependencies: Record<string, typeof LeuElement> = {}
 
-  static styles = commonStyles
+  static styles: CSSResultGroup = commonStyles
 
-  static define(name, constructor = this, options = {}) {
+  static define(
+    name: string,
+    constructor = this,
+    options: ElementDefinitionOptions = {},
+  ) {
     Object.entries(this.dependencies).forEach(([n, c]) => c.define(n))
 
-    const currentlyRegisteredConstructor = customElements.get(name)
+    const currentlyRegisteredConstructor = customElements.get(name) as
+      | CustomElementConstructor
+      | typeof LeuElement
 
     if (currentlyRegisteredConstructor === undefined) {
       customElements.define(name, constructor, options)
@@ -25,7 +31,10 @@ export class LeuElement extends LitElement {
       return
     }
 
-    if (currentlyRegisteredConstructor.version !== constructor.version) {
+    if (
+      "version" in currentlyRegisteredConstructor &&
+      currentlyRegisteredConstructor.version !== constructor.version
+    ) {
       console.warn(
         `The custom element with the name <${name}> is already defined with the same constructor but a different version (${currentlyRegisteredConstructor.version}).`,
       )

package/src/lib/{a11y.js → a11y.ts}

@@ -9,7 +9,7 @@ export const ARIA_CHECKED_ROLES = [
   "option",
   "radio",
   "switch",
-]
+] as const
 
 /**
  * All roles that are associated with a aria-selected attribute
@@ -23,4 +23,4 @@ export const ARIA_SELECTED_ROLES = [
   "columnheader",
   "rowheader",
   "treeitem",
-]
+] as const

package/src/lib/{hasSlotController.js → hasSlotController.ts}

@@ -3,24 +3,24 @@
  * Source: https://github.com/shoelace-style/shoelace/blob/next/src/internal/slot.ts
  */
 
+import { ReactiveController, ReactiveControllerHost } from "lit"
+
 /**
  * A reactive controller that determines when slots exist.
- * @typedef {import("lit").ReactiveController} ReactiveController
- * @implements {ReactiveController}
  */
-export class HasSlotController {
-  constructor(host, slotNames) {
+export class HasSlotController implements ReactiveController {
+  host: ReactiveControllerHost & Element
+
+  slotNames: string[]
+
+  constructor(host: ReactiveControllerHost & Element, slotNames: string[]) {
     this.host = host
     host.addController(this)
 
     this.slotNames = slotNames
   }
 
-  /**
-   * @private
-   * @returns {Boolean}
-   */
-  hasDefaultSlot() {
+  private hasDefaultSlot() {
     return [...this.host.childNodes].some((node) => {
       if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "") {
         return true
@@ -39,20 +39,11 @@ export class HasSlotController {
     })
   }
 
-  /**
-   * @private
-   * @param {String} name
-   * @returns {Boolean}
-   */
-  hasNamedSlot(name) {
+  private hasNamedSlot(name: string) {
     return this.host.querySelector(`:scope > [slot="${name}"]`) !== null
   }
 
-  /**
-   * @param {String} slotName
-   * @returns {Boolean}
-   */
-  test(slotName) {
+  test(slotName: string) {
     return slotName === "[default]"
       ? this.hasDefaultSlot()
       : this.hasNamedSlot(slotName)
@@ -69,11 +60,7 @@ export class HasSlotController {
     )
   }
 
-  /**
-   * @private
-   * @param {Event} event
-   */
-  handleSlotChange = (event) => {
+  private handleSlotChange = (event: Event) => {
     const slot = event.target
 
     if (

package/stylelint.config.mjs

@@ -3,7 +3,7 @@ export default {
   extends: "stylelint-config-standard",
   overrides: [
     {
-      files: ["*.js"],
+      files: ["*.js", "*.ts"],
       customSyntax: "postcss-lit",
     },
   ],

package/tsconfig.build.json

@@ -1,10 +1,9 @@
 {
-  "include": ["./dist/**/*.js"],
-  "exclude": ["./node_modules"],
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     // Tells TypeScript to read JS files, as
     // normally they are ignored as source files
-    "allowJs": true,
+    // "allowJs": true,
     // Generate d.ts files
     "declaration": true,
     // This compiler run should
@@ -14,9 +13,12 @@
     // Removing this would place the .d.ts files
     // next to the .js files
     "outDir": "dist",
+    // "rootDir": "src",
     // go to js file when using IDE functions like
     // "Go to Definition" in VSCode
     "declarationMap": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "noCheck": true,
+    "noEmit": false
   }
 }

package/tsconfig.json

@@ -1,16 +1,13 @@
 {
-  "include": ["src/**/*.js"],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "**/*.d.ts",
-    "**/*.stories.js",
-    "**/*.test.js",
-    "**/*.css"
-  ],
+  "include": ["src/**/*.js", "src/**/*.ts", "global.d.ts"],
+  "exclude": ["node_modules", "dist"],
   "compilerOptions": {
+    "target": "es2021",
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "allowJs": true,
     "checkJs": true,
-    "noEmit": true
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false
   }
 }

package/web-dev-server.config.mjs

@@ -1,5 +1,7 @@
 import { fromRollup } from "@web/dev-server-rollup"
 import rollupJson from "@rollup/plugin-json"
+import { esbuildPlugin } from "@web/dev-server-esbuild"
+import { fileURLToPath } from "url"
 
 import { plugins as rollupPlugins } from "./rollup.config.js"
 
@@ -16,5 +18,13 @@ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
     ".storybook/static/*.css": "js",
     "src/styles/common-styles.css": "js",
   },
-  plugins: [...plugins, json()],
+  plugins: [
+    esbuildPlugin({
+      ts: true,
+      target: "auto",
+      tsconfig: fileURLToPath(new URL("./tsconfig.json", import.meta.url)),
+    }),
+    ...plugins,
+    json(),
+  ],
 })