@statistikzh/leu 0.24.1 → 0.25.0

package/src/components/input/stories/input.stories.ts

@@ -49,27 +49,30 @@ function Template(args) {
   } = args
 
   return html`
-    <leu-input
-      value=${ifDefined(value)}
-      error=${ifDefined(error)}
-      pattern=${ifDefined(pattern)}
-      prefix=${ifDefined(prefix)}
-      suffix=${ifDefined(suffix)}
-      size=${ifDefined(size)}
-      icon=${ifDefined(icon)}
-      type=${ifDefined(type)}
-      min=${ifDefined(min)}
-      max=${ifDefined(max)}
-      minlength=${ifDefined(minlength)}
-      maxlength=${ifDefined(maxlength)}
-      step=${ifDefined(step)}
-      label=${label}
-      ?disabled=${disabled}
-      ?required=${required}
-      ?clearable=${clearable}
-      ?novalidate=${novalidate}
-    >
-    </leu-input>
+    <form>
+      <leu-input
+        name="input-field"
+        value=${ifDefined(value)}
+        error=${ifDefined(error)}
+        pattern=${ifDefined(pattern)}
+        prefix=${ifDefined(prefix)}
+        suffix=${ifDefined(suffix)}
+        size=${ifDefined(size)}
+        icon=${ifDefined(icon)}
+        type=${ifDefined(type)}
+        min=${ifDefined(min)}
+        max=${ifDefined(max)}
+        minlength=${ifDefined(minlength)}
+        maxlength=${ifDefined(maxlength)}
+        step=${ifDefined(step)}
+        label=${label}
+        ?disabled=${disabled}
+        ?required=${required}
+        ?clearable=${clearable}
+        ?novalidate=${novalidate}
+      >
+      </leu-input>
+    </form>
   `
 }
 

package/src/components/menu/Menu.ts

@@ -5,7 +5,7 @@ import { LeuElement } from "../../lib/LeuElement.js"
 
 import { LeuMenuItem } from "./MenuItem.js"
 
-import styles from "./menu.css"
+import styles from "./menu.css?inline"
 
 /**
  * @typedef {'single' | 'multiple' | 'none'} SelectsType
@@ -64,7 +64,7 @@ export class LeuMenu extends LeuElement {
 
     if (menuItemRole) {
       this.getMenuItems().forEach((menuItem) => {
-        menuItem.componentRole = menuItemRole // eslint-disable-line no-param-reassign
+        menuItem.componentRole = menuItemRole
       })
     }
   }
@@ -114,9 +114,9 @@ export class LeuMenu extends LeuElement {
     menuItems.forEach((menuItem, i) => {
       if (i === currentItemIndex) {
         currentItem = menuItem
-        menuItem.tabbable = true // eslint-disable-line no-param-reassign
+        menuItem.tabbable = true
       } else {
-        menuItem.tabbable = false // eslint-disable-line no-param-reassign
+        menuItem.tabbable = false
       }
     })
 

package/src/components/menu/MenuItem.ts

@@ -5,7 +5,7 @@ import { property } from "lit/decorators.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-import styles from "./menu-item.css"
+import styles from "./menu-item.css?inline"
 
 type MenuItemRole =
   | "menuitem"

package/src/components/menu/stories/menu-item.stories.ts

@@ -23,7 +23,6 @@ export default {
   },
 }
 
-/* eslint-disable no-nested-ternary */
 function Template(args) {
   return html`
     <leu-menu-item
@@ -46,7 +45,6 @@ function Template(args) {
     </leu-menu-item>
   `
 }
-/* eslint-enable no-nested-ternary */
 
 export const Regular = Template.bind({})
 

package/src/components/message/Message.ts

@@ -4,7 +4,7 @@ import { classMap } from "lit/directives/class-map.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./message.css"
+import styles from "./message.css?inline"
 import { LeuIcon } from "../icon/Icon.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
 

package/src/components/message/stories/message.stories.ts

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from "@storybook/web-components"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
 import { html, TemplateResult } from "lit"
-import { action } from "@storybook/addon-actions"
+import { action } from "storybook/actions"
 
 import "../leu-message.js"
 import "../../button/leu-button.js"

package/src/components/pagination/Pagination.ts

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

package/src/components/pagination/stories/pagination.stories.ts

@@ -2,9 +2,9 @@ import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 
 // https://stackoverflow.com/questions/72566428/storybook-angular-how-to-dynamically-update-args-from-the-template
-import { UPDATE_STORY_ARGS } from "@storybook/core-events" // eslint-disable-line
-import { action, HandlerFunction } from "@storybook/addon-actions"
-import { Meta, StoryObj } from "@storybook/web-components"
+import { UPDATE_STORY_ARGS } from "storybook/internal/core-events"
+import { action, HandlerFunction } from "storybook/actions"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
 
 import "../leu-pagination.js"
 import { LeuPagination } from "../Pagination.js"

package/src/components/pagination/test/pagination.test.ts

@@ -188,7 +188,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 14,
+      defaultPage: 7,
     })
 
     const eventSpy = spy()

package/src/components/placeholder/Placeholder.ts

@@ -2,7 +2,7 @@ import { html } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./placeholder.css"
+import styles from "./placeholder.css?inline"
 
 /**
  * @summary * A placeholder to display when no content is available.

package/src/components/placeholder/stories/placeholder.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/web-components"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
 import { html } from "lit"
 
 import "../../button/leu-button.js"

package/src/components/popup/Popup.ts

@@ -12,7 +12,7 @@ import {
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./popup.css"
+import styles from "./popup.css?inline"
 
 export interface VirtualElement {
   getBoundingClientRect: () => DOMRect

package/src/components/progress-bar/ProgressBar.ts

@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./progress-bar.css"
+import styles from "./progress-bar.css?inline"
 
 /**
  * An indicator showing the completion progress of a task

package/src/components/progress-bar/stories/progress-bar.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/web-components"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
 import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 

package/src/components/radio/Radio.ts

@@ -3,7 +3,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./radio.css"
+import styles from "./radio.css?inline"
 
 /**
  * @tagname leu-radio

package/src/components/radio/RadioGroup.ts

@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./radio-group.css"
+import styles from "./radio-group.css?inline"
 import { LeuRadio } from "./Radio.js"
 
 /**
@@ -106,13 +106,13 @@ export class LeuRadioGroup extends LeuElement {
 
   private handleInput = (e: InputEvent & { target: LeuRadio }) => {
     this.items.forEach((item) => {
-      item.checked = item === e.target // eslint-disable-line no-param-reassign
+      item.checked = item === e.target
     })
   }
 
   private selectItem(selectingItem: LeuRadio) {
     this.items.forEach((item) => {
-      item.checked = item === selectingItem // eslint-disable-line no-param-reassign
+      item.checked = item === selectingItem
     })
   }
 
@@ -138,9 +138,9 @@ export class LeuRadioGroup extends LeuElement {
   private setTabIndex() {
     this.items.forEach((item, index) => {
       if (index === this.currentIndex) {
-        item.tabIndex = 0 // eslint-disable-line no-param-reassign
+        item.tabIndex = 0
       } else {
-        item.tabIndex = -1 // eslint-disable-line no-param-reassign
+        item.tabIndex = -1
       }
     })
   }

package/src/components/range/Range.ts

@@ -2,7 +2,7 @@ import { html, nothing, PropertyValues } from "lit"
 import { property, query } from "lit/decorators.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 
-import styles from "./range.css"
+import styles from "./range.css?inline"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { clamp, isNumber } from "../../lib/utils.js"
 

package/src/components/range/stories/range.stories.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from "@storybook/web-components"
-import { action } from "@storybook/addon-actions"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
+import { action } from "storybook/actions"
 import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 

package/src/components/scroll-top/ScrollTop.ts

@@ -8,7 +8,7 @@ import { LeuIcon } from "../icon/Icon.js"
 
 import { throttle } from "../../lib/utils.js"
 
-import styles from "./scroll-top.css"
+import styles from "./scroll-top.css?inline"
 
 /**
  * @tagname leu-scroll-top

package/src/components/scroll-top/scroll-top.css

@@ -1,14 +1,30 @@
+@import url("../../styles/custom-media.css");
+
 .scroll-top {
   overflow: hidden;
   position: fixed;
-  right: 1.5rem;
-  z-index: 1099;
-  bottom: 8.125rem;
+  z-index: var(--leu-z-index-scroll-top);
+
+  --_space: 1.5rem;
+  right: var(--_space);
+  bottom: var(--_space);
 
   /* show */
-  height: 50px;
+  height: 3rem;
   pointer-events: auto;
   transition: height, bottom 0.9s, 0.6s ease;
+
+  @media (--viewport-regular) {
+    --_space: 2rem;
+  }
+
+  @media (--viewport-large) {
+    --_space: 2.5rem;
+  }
+
+  @media (--viewport-xlarge) {
+    --_space: 3rem;
+  }
 }
 
 .hide {

package/src/components/select/Select.ts

@@ -13,7 +13,7 @@ import { LeuIcon } from "../icon/Icon.js"
 import { LeuInput } from "../input/Input.js"
 import { LeuPopup } from "../popup/Popup.js"
 
-import styles from "./select.css"
+import styles from "./select.css?inline"
 
 /**
  * @tagname leu-select
@@ -174,7 +174,6 @@ export class LeuSelect extends LeuElement {
       this._displayValue = ""
     }
 
-    /* eslint-disable no-param-reassign */
     menuItems.forEach((menuItem) => {
       if (changed.multiple) {
         menuItem.multipleSelection = this.multiple
@@ -198,7 +197,6 @@ export class LeuSelect extends LeuElement {
         }
       }
     })
-    /* eslint-enable no-param-reassign */
 
     if (changed.optionFilter) {
       this._hasFilterResults = hasFilterResults
@@ -455,7 +453,7 @@ export class LeuSelect extends LeuElement {
      * We use the click event listener with the event delegation pattern
      * so this is not a violation of the rule.
      */
-    /* eslint-disable lit-a11y/click-events-have-key-events */
+
     return html`<div
         class=${classMap(selectClasses)}
         @keydown=${this._handleKeyDown}
@@ -495,6 +493,5 @@ export class LeuSelect extends LeuElement {
         </leu-popup>
       </div>
       <input type="hidden" name=${this.name} .value=${this.value.join(",")} />`
-    /* eslint-enable lit-a11y/click-events-have-key-events */
   }
 }

package/src/components/spinner/Spinner.ts

@@ -2,7 +2,7 @@ import { html } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./spinner.css"
+import styles from "./spinner.css?inline"
 
 /**
  * @tagname leu-spinner

package/src/components/table/Table.ts

@@ -7,7 +7,7 @@ import { styleMap } from "../../lib/styleMap.js"
 import { LeuIcon } from "../icon/Icon.js"
 import { LeuPagination } from "../pagination/Pagination.js"
 
-import styles from "./table.css"
+import styles from "./table.css?inline"
 
 /**
  * @tagname leu-table

package/src/components/tag/Tag.ts

@@ -3,7 +3,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./tag.css"
+import styles from "./tag.css?inline"
 
 /**
  * @tagname leu-tag

package/src/components/tag/stories/tag.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/web-components"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
 import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 

package/src/components/visually-hidden/VisuallyHidden.ts

@@ -2,7 +2,7 @@ import { html } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./visually-hidden.css"
+import styles from "./visually-hidden.css?inline"
 
 /**
  * @tagname leu-visually-hidden

package/src/docs/contributing.mdx

@@ -1,4 +1,4 @@
-import { Meta, Markdown } from "@storybook/blocks"
+import { Meta, Markdown } from "@storybook/addon-docs/blocks"
 
 <Meta title="Introduction/Contributing" />
 

package/src/docs/installation.mdx

@@ -1,4 +1,4 @@
-import { Meta, Markdown } from "@storybook/blocks"
+import { Meta, Markdown } from "@storybook/addon-docs/blocks"
 
 <Meta title="Introduction/Installation" />
 

package/src/docs/theme.mdx

@@ -1,4 +1,4 @@
-import { Meta, Markdown, Canvas } from "@storybook/blocks"
+import { Meta, Markdown, Canvas } from "@storybook/addon-docs/blocks"
 import React from "react"
 
 import * as GridStories from "../styles/style.stories"

package/src/docs/usage.mdx

@@ -1,4 +1,4 @@
-import { Meta, Markdown } from "@storybook/blocks"
+import { Meta, Markdown } from "@storybook/addon-docs/blocks"
 
 <Meta title="Introduction/Usage" />
 

package/src/global.d.ts

@@ -1,4 +1,4 @@
-declare module "*.css" {
+declare module "*.css?inline" {
   import { CSSResult } from "lit"
 
   const css: CSSResult

package/src/lib/LeuElement.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup, LitElement } from "lit"
-import commonStyles from "../styles/common-styles.css"
+import commonStyles from "../styles/common-styles.css?inline"
 
 export class LeuElement extends LitElement {
   static version = __LEU_VERSION__

package/src/lib/mixins/FormAssociatedMixin.ts

@@ -0,0 +1,115 @@
+/* eslint-disable max-classes-per-file */
+import { property } from "lit/decorators.js"
+import { LeuElement } from "../LeuElement.js"
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+type AbstractConstructor<T = object> = abstract new (...args: any[]) => T
+
+// @todo define sensible eslint settings for classes
+/* eslint-disable max-classes-per-file */
+export declare abstract class FormAssociatedMixinType {
+  static formAssociated: boolean
+
+  protected readonly internals: ElementInternals
+
+  name: string | null
+
+  disabled: boolean
+
+  required: boolean
+
+  protected hasInteracted: boolean
+
+  form: HTMLFormElement | null
+
+  validity: ValidityState
+
+  validationMessage: string
+
+  willValidate: boolean
+
+  checkValidity(): boolean
+
+  reportValidity(): boolean
+
+  resetValidity(): void
+
+  formDisabledCallback(isDisabled: boolean): void
+
+  formResetCallback(): void
+
+  formStateRestoreCallback(_state: string | FormData | null): void
+
+  protected abstract setFormValue(): void
+}
+
+export const FormAssociatedMixin = <T extends AbstractConstructor<LeuElement>>(
+  superClass: T,
+) => {
+  abstract class FormAssociatedMixinClass extends superClass {
+    static formAssociated = true
+
+    protected readonly internals: ElementInternals = this.attachInternals()
+
+    get form() {
+      return this.internals.form
+    }
+
+    /** The name of the form control. Is submitted with the `value` as key-value pair. */
+    @property({ reflect: true })
+    name: string | null = null
+
+    /** Disables the form control. */
+    @property({ type: Boolean })
+    disabled: boolean = false
+
+    // Treat every form control that doesn't implement its own `required` property as "not required"
+    required: boolean = false
+
+    /** Whether the user has interacted with the form control. */
+    @property({ state: true, attribute: false })
+    protected hasInteracted: boolean = false
+
+    get validity() {
+      return this.internals.validity
+    }
+
+    get validationMessage() {
+      return this.internals.validationMessage
+    }
+
+    get willValidate() {
+      return this.internals.willValidate
+    }
+
+    checkValidity() {
+      return this.internals.checkValidity()
+    }
+
+    reportValidity() {
+      return this.internals.reportValidity()
+    }
+
+    resetValidity() {
+      this.internals.setValidity({})
+    }
+
+    public formDisabledCallback(isDisabled: boolean) {
+      this.disabled = isDisabled
+    }
+
+    public formResetCallback() {
+      this.hasInteracted = false
+      this.resetValidity()
+    }
+
+    public formStateRestoreCallback(_state: string | FormData | null) {
+      this.resetValidity()
+    }
+
+    protected abstract setFormValue(): void
+  }
+
+  return FormAssociatedMixinClass as unknown as AbstractConstructor<FormAssociatedMixinType> &
+    T
+}

package/src/lib/styleMap.ts

@@ -1,4 +1,4 @@
-/* eslint-disable prefer-template,no-param-reassign,no-restricted-syntax,guard-for-in */
+/* eslint-disable no-restricted-syntax */
 
 /**
  * The original lit styleMap directive is not compatible with a strict style-src content security policy.

package/src/styles/theme.css

@@ -57,6 +57,7 @@
   --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
 
   --leu-z-index-popup: 100;
+  --leu-z-index-scroll-top: 1099;
 
   @leu-font-styles './font-definitions.json';
   --leu-t-font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";

package/tsdown.config.ts

@@ -0,0 +1,35 @@
+import path from "path"
+import { defineConfig } from "tsdown"
+import { globSync } from "glob"
+import postcssLit from "rollup-plugin-postcss-lit"
+
+export const commonConfig = {
+  plugins: [postcssLit()],
+  define: {
+    __LEU_VERSION__: JSON.stringify(process.env.npm_package_version),
+  },
+}
+
+export default defineConfig({
+  entry: {
+    index: "src/index.ts",
+    ...Object.fromEntries(
+      globSync("src/components/*/{[A-Z],leu-}*.ts", { nocase: false }).map(
+        (file) => [path.basename(file, path.extname(file)), file],
+      ),
+    ),
+  },
+  format: "esm",
+  outDir: "dist",
+  dts: true,
+  clean: true,
+  platform: "browser",
+  deps: {
+    skipNodeModulesBundle: true,
+  },
+  define: commonConfig.define,
+  css: {
+    transformer: "postcss",
+  },
+  plugins: commonConfig.plugins,
+})

package/web-test-runner.config.mjs

@@ -1,7 +1,25 @@
 import { playwrightLauncher } from "@web/test-runner-playwright"
 import { esbuildPlugin } from "@web/dev-server-esbuild"
+import { fromRollup } from "@web/dev-server-rollup"
 import { fileURLToPath } from "url"
-import { plugins as wdsPlugins } from "./web-dev-server.config.mjs"
+import rollupReplace from "@rollup/plugin-replace"
+import rollupPostcss from "rollup-plugin-postcss"
+import rollupPostcssLit from "rollup-plugin-postcss-lit"
+
+const replace = fromRollup(rollupReplace)
+const postcss = fromRollup(rollupPostcss)
+const postcssLit = fromRollup(rollupPostcssLit)
+
+export const plugins = [
+  replace({
+    preventAssignment: true,
+    values: {
+      __LEU_VERSION__: JSON.stringify(process.env.npm_package_version),
+    },
+  }),
+  postcss({ inject: false }),
+  postcssLit(),
+]
 
 const filteredLogs = ["Couldn't load preload assets", "Lit is in dev mode"]
 
@@ -14,7 +32,7 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
       target: "auto",
       tsconfig: fileURLToPath(new URL("./tsconfig.json", import.meta.url)),
     }),
-    ...wdsPlugins,
+    ...plugins,
   ],
   mimeTypes: {
     "src/components/**/*.css": "js",