@statistikzh/leu 0.0.2 → 0.2.0

package/dist/leu-chip-group.js

@@ -1,5 +1,5 @@
 import { defineChipGroupElements } from './ChipGroup.js';
+import './defineElement-ba770aed.js';
 import 'lit';
-import './defineElement-47d4f665.js';
 
 defineChipGroupElements();

package/dist/leu-chip-link.js

@@ -1,6 +1,6 @@
 import { defineChipLinkElements } from './ChipLink.js';
+import './defineElement-ba770aed.js';
 import 'lit';
-import './defineElement-47d4f665.js';
-import './Chip-60af1402.js';
+import './Chip-389013ff.js';
 
 defineChipLinkElements();

package/dist/leu-chip-removable.js

@@ -1,7 +1,7 @@
 import { defineChipRemovableElements } from './ChipRemovable.js';
+import './defineElement-ba770aed.js';
 import 'lit';
-import './defineElement-47d4f665.js';
-import './Chip-60af1402.js';
-import './icon-b68c7e1e.js';
+import './Chip-389013ff.js';
+import './icon-03e86700.js';
 
 defineChipRemovableElements();

package/dist/leu-chip-selectable.js

@@ -1,6 +1,6 @@
 import { defineChipSelectableElements } from './ChipSelectable.js';
+import './defineElement-ba770aed.js';
 import 'lit';
-import './defineElement-47d4f665.js';
-import './Chip-60af1402.js';
+import './Chip-389013ff.js';
 
 defineChipSelectableElements();

package/dist/leu-dropdown.js

@@ -0,0 +1,10 @@
+import { defineDropdownElements } from './Dropdown.js';
+import './defineElement-ba770aed.js';
+import 'lit';
+import './Button.js';
+import 'lit/directives/class-map.js';
+import './icon-03e86700.js';
+import './Menu.js';
+import './MenuItem.js';
+
+defineDropdownElements();

package/dist/leu-input.js

@@ -1,9 +1,9 @@
 import { defineInputElements } from './Input.js';
+import './defineElement-ba770aed.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import 'lit/directives/ref.js';
-import './icon-b68c7e1e.js';
-import './defineElement-47d4f665.js';
+import './icon-03e86700.js';
 
 defineInputElements();

package/dist/leu-menu-item.js

@@ -0,0 +1,6 @@
+import { defineMenuItemElements } from './MenuItem.js';
+import './defineElement-ba770aed.js';
+import 'lit';
+import './icon-03e86700.js';
+
+defineMenuItemElements();

package/dist/leu-menu.js

@@ -0,0 +1,5 @@
+import { defineMenuElements } from './Menu.js';
+import './defineElement-ba770aed.js';
+import 'lit';
+
+defineMenuElements();

package/dist/leu-pagination.js

@@ -0,0 +1,8 @@
+import { definePaginationElements } from './Pagination.js';
+import './defineElement-ba770aed.js';
+import 'lit';
+import './Button.js';
+import 'lit/directives/class-map.js';
+import './icon-03e86700.js';
+
+definePaginationElements();

package/dist/leu-radio-group.js

@@ -1,6 +1,6 @@
 import { defineRadioGroupElements } from './RadioGroup.js';
+import './defineElement-ba770aed.js';
 import 'lit';
 import 'lit/directives/class-map.js';
-import './defineElement-47d4f665.js';
 
 defineRadioGroupElements();

package/dist/leu-radio.js

@@ -1,5 +1,5 @@
 import { defineRadioElements } from './Radio.js';
+import './defineElement-ba770aed.js';
 import 'lit';
-import './defineElement-47d4f665.js';
 
 defineRadioElements();

package/dist/leu-select.js

@@ -1,12 +1,14 @@
 import { defineSelectElements } from './Select.js';
+import './defineElement-ba770aed.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/map.js';
 import 'lit/directives/if-defined.js';
 import 'lit/directives/ref.js';
-import './icon-b68c7e1e.js';
-import './defineElement-47d4f665.js';
-import './Button-83c6df93.js';
+import './icon-03e86700.js';
+import './Button.js';
+import './Menu.js';
+import './MenuItem.js';
 import './Input.js';
 
 defineSelectElements();

package/dist/leu-table.js

@@ -1,10 +1,11 @@
-import { b as defineTableElements } from './Table-72d305d7.js';
+import { defineTableElements } from './Table.js';
+import './defineElement-ba770aed.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/style-map.js';
 import 'lit/directives/ref.js';
-import './icon-b68c7e1e.js';
-import './defineElement-47d4f665.js';
-import './Button-83c6df93.js';
+import './icon-03e86700.js';
+import './Pagination.js';
+import './Button.js';
 
 defineTableElements();

package/dist/theme.css

@@ -29,13 +29,13 @@
   --leu-color-accent-violet: #7f3da7;
   --leu-color-accent-gray: var(--leu-color-black-60);
 
-  --leu-color-accent-blue-soft: ##edf5fa;
-  --leu-color-accent-darkblue-soft: ##e0e8ee;
-  --leu-color-accent-turquoise-soft: ##e8f3f2;
-  --leu-color-accent-green-soft: ##ebf6eb;
-  --leu-color-accent-bordeaux-soft: ##f6e3ea;
-  --leu-color-accent-magenta-soft: ##fcedf3;
-  --leu-color-accent-violet-soft: ##ece2f1;
+  --leu-color-accent-blue-soft: #edf5fa;
+  --leu-color-accent-darkblue-soft: #e0e8ee;
+  --leu-color-accent-turquoise-soft: #e8f3f2;
+  --leu-color-accent-green-soft: #ebf6eb;
+  --leu-color-accent-bordeaux-soft: #f6e3ea;
+  --leu-color-accent-magenta-soft: #fcedf3;
+  --leu-color-accent-violet-soft: #ece2f1;
   --leu-color-accent-gray-soft: var(--leu-color-black-10);
 
   --leu-color-func-cyan: #009ee0;

package/index.js

@@ -1,10 +1,14 @@
+export * from "./src/components/button/Button.js"
+export * from "./src/components/button-group/ButtonGroup.js"
 export * from "./src/components/checkbox/Checkbox.js"
 export * from "./src/components/checkbox/CheckboxGroup.js"
+export * from "./src/components/chip/exports.js"
+export * from "./src/components/dropdown/Dropdown.js"
 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/radio/Radio.js"
 export * from "./src/components/radio/RadioGroup.js"
 export * from "./src/components/select/Select.js"
-export * from "./src/components/button/Button.js"
-export * from "./src/components/pagination/Pagination.js"
 export * from "./src/components/table/Table.js"
-export * from "./src/components/chip/exports.js"

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -29,11 +29,13 @@
     "lit": "^3.0.2"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.23.3",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@open-wc/eslint-config": "^9.2.1",
     "@open-wc/testing": "^3.1.6",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.0.0",
     "@web/dev-server": "^0.1.34",
     "@web/dev-server-rollup": "^0.5.2",

package/rollup.config.js

@@ -1,5 +1,6 @@
 import postcss from "rollup-plugin-postcss"
 import postcssLit from "rollup-plugin-postcss-lit"
+import { babel } from "@rollup/plugin-babel"
 
 export const plugins = [
   {
@@ -19,12 +20,32 @@ export const plugins = [
 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",
@@ -33,21 +54,17 @@ export default {
     "./src/components/select/Select.js",
     "./src/components/table/leu-table.js",
     "./src/components/table/Table.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",
   ],
   output: {
     dir: "./dist/",
     format: "esm",
     entryFileNames: "[name].js",
   },
-  plugins: plugins.map((p) => p.plugin(...p.args)),
+  plugins: [
+    babel({ babelHelpers: "bundled" }),
+    ...plugins.map((p) => p.plugin(...p.args)),
+  ],
+  external: /^lit(\/.*\.js)?$/,
 }
 
 // TODO: add a second config for a bundle with esbuild

package/src/components/accordion/Accordion.js

@@ -0,0 +1,102 @@
+import { LitElement, nothing } from "lit"
+import { html, unsafeStatic } from "lit/static-html.js"
+
+import { defineElement } from "../../lib/defineElement.js"
+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"
+ */
+export class LeuAccordion extends LitElement {
+  static styles = styles
+
+  /** @internal */
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    headingLevel: { type: Number, attribute: "heading-level" },
+    open: { type: Boolean, reflect: true },
+    label: { type: String },
+    labelPrefix: { type: String, attribute: "label-prefix" },
+  }
+
+  constructor() {
+    super()
+    this.headingLevel = 2
+    this.open = false
+    this.label = ""
+    this.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() {
+    let level = 2
+    if (this.headingLevel > 0 && this.headingLevel < 7) {
+      level = this.headingLevel
+    }
+
+    return `h${level}`
+  }
+
+  /**
+   * Toggles the accordion open state.
+   * @internal
+   */
+  _handleToggleClick() {
+    this.open = !this.open
+  }
+
+  render() {
+    const hTag = this._getHeadingTag()
+
+    /* The eslint rules don't recognize html import from lit/static-html.js */
+    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+    return html`<${unsafeStatic(hTag)} class="heading"><button
+        id="toggle"
+        type="button"
+        class="button"
+        aria-controls="content"
+        aria-expanded="${this.open}"
+        @click=${this._handleToggleClick}
+      >
+        ${
+          this.labelPrefix
+            ? html`<span class="label-prefix">${this.labelPrefix}</span>`
+            : nothing
+        }
+        <span class="label">${this.label}</span>
+        <div class="plus"></div>
+      </button></${unsafeStatic(hTag)}>
+      <div
+        id="content"
+        class="content"
+        aria-labelledby="toggle"
+        role="region"
+        ?hidden=${!this.open}
+      >
+        <slot name="content"></slot>
+      </div>
+      <hr class="divider" />`
+  }
+  /* eslint-enable lit/binding-positions, lit/no-invalid-html */
+}
+
+export function defineAccordionElements() {
+  defineElement("accordion", LeuAccordion)
+}

package/src/components/accordion/accordion.css

@@ -0,0 +1,160 @@
+@import url("../../styles/custom-media.css");
+
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --accordion-font-regular: var(--leu-font-regular);
+  --accordion-font-black: var(--leu-font-black);
+
+  --accordion-toggle-font: var(--accordion-font-black);
+
+  --label-color: var(--leu-color-black-60);
+  --label-color-active: var(--leu-color-black-100);
+
+  --divider-color: var(--leu-color-black-20);
+  --divider-color-active: var(--leu-color-black-100);
+
+  --transition: 0.1s ease;
+
+  font-family: var(--chip-font-regular);
+
+  position: relative;
+  display: grid;
+  grid-template-rows: auto 0fr;
+
+  transition: grid-template-rows var(--transition);
+}
+
+:host([open]) {
+  grid-template-rows: auto 1fr;
+}
+
+.heading {
+  margin: 0;
+}
+
+.button {
+  width: 100%;
+  background: none;
+  padding: 1rem 0;
+  margin: none;
+  cursor: pointer;
+
+  border: none;
+
+  color: var(--label-color);
+  font-family: var(--accordion-toggle-font);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  text-align: left;
+
+  display: flex;
+  gap: 0.25rem;
+
+  transition: color var(--transition);
+
+  @media (--viewport-regular) {
+    font-size: 1.125rem;
+    gap: 0.8rem;
+  }
+
+  @media (--viewport-xlarge) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 4px;
+}
+
+.button:hover,
+.button:focus-visible,
+:host([open]) .button {
+  color: var(--label-color-active);
+}
+
+.plus {
+  position: relative;
+  flex: 0 0 1rem;
+  aspect-ratio: 1;
+  align-self: center;
+  margin-inline: 0.5rem;
+}
+
+.plus::before,
+.plus::after {
+  content: "";
+
+  position: absolute;
+  top: calc(50% - 0.0625rem);
+  left: 0;
+
+  display: block;
+  width: 1rem;
+  height: 0.125rem;
+  aspect-ratio: 1 / 0.125;
+  background-color: currentcolor;
+  transition: transform var(--transition);
+}
+
+.plus::before {
+  transform: rotate(90deg);
+}
+
+:host([open]) .plus::before {
+  transform: rotate(180deg);
+}
+
+.label {
+  display: block;
+  flex-grow: 1;
+}
+
+.content {
+  overflow: hidden;
+  transition: visibility var(--transition), opacity var(--transition);
+}
+
+.content[hidden] {
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+}
+
+slot[name="content"] {
+  display: block;
+  padding: 0.5rem 0 1.5rem;
+
+  @media (--viewport-medium) {
+    padding: 0.75rem 0 1.5rem;
+  }
+
+  @media (--viewport-xlarge) {
+    padding: 1rem 0 2.5rem;
+  }
+}
+
+.divider {
+  position: absolute;
+  top: 100%;
+  left: 0;
+
+  width: 100%;
+  height: 1px;
+  margin: 0;
+
+  border: none;
+  background-color: var(--divider-color);
+
+  transition: transform var(--transition), background-color var(--transition);
+}
+
+:host(:not([open])) .heading:is(:hover, :focus-visible) ~ .divider {
+  background-color: var(--divider-color-active);
+  transform: scaleY(3);
+}

package/src/components/accordion/leu-accordion.js

@@ -0,0 +1,3 @@
+import { defineAccordionElements } from "./Accordion.js"
+
+defineAccordionElements()

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

@@ -0,0 +1,55 @@
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-accordion.js"
+
+export default {
+  title: "Accordion",
+  component: "leu-accordion",
+  argTypes: {
+    headingLevel: {
+      control: {
+        type: "select",
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    content: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+}
+
+function Template(args) {
+  return html` <leu-accordion
+    heading-level=${ifDefined(args.headingLevel)}
+    label=${ifDefined(args.label)}
+    label-prefix=${ifDefined(args.labelPrefix)}
+  >
+    <div slot="content">${args.content}</div>
+  </leu-accordion>`
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  headingLevel: 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
+  und Navigationsgeräte überprüfen. Die Baudirektion hat beim Landesmuseum
+  in Zürich einen Kontrollpunkt beim Landesmuseum in Zürich einen
+  Kontrollpunktfür mobile Geräte eingerichtet – den ersten in der
+  Schweiz.P, Helvetic Roman Interessierte können ab sofort die Genauigkeit
+  ihrer Smartphones und Navigationsgeräte überprüfen.
+
+  Die Zürich einen Kontrollpunktfür mobile einen Kontrollpunkt beim
+  Landesmuseum in Zürich einen Kontrollpunktfür mobile Geräte eingerichtet
+  – den ersten in der Schweiz.`,
+}
+
+export const Prefix = Template.bind({})
+Prefix.args = {
+  ...Regular.args,
+  labelPrefix: "01",
+}

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

@@ -0,0 +1,22 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-accordion.js"
+
+async function defaultFixture() {
+  return fixture(html` <leu-accordion /> `)
+}
+
+describe("LeuAccordion", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-accordion")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})

package/src/components/input/Input.js

@@ -65,6 +65,14 @@ const VALIDATION_MESSAGES = {
 export class LeuInput extends LitElement {
   static styles = styles
 
+  /**
+   * @internal
+   */
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
   static properties = {
     disabled: { type: Boolean, reflect: true },
     required: { type: Boolean, reflect: true },
@@ -223,6 +231,8 @@ export class LeuInput extends LitElement {
   clear() {
     this.value = ""
 
+    this._inputRef.value.focus()
+
     this.dispatchEvent(
       new CustomEvent("input", { bubbles: true, composed: true })
     )

package/src/components/menu/menu.css

@@ -7,8 +7,14 @@
   --menu-divider-color: var(--leu-color-black-transp-20);
 }
 
+/*
+ * Set styles with important as the hr element is part of the
+ * light dom and therefore is affected by the global styles.
+ */
 :host ::slotted(hr) {
-  border: 0;
-  border-top: 1px solid var(--menu-divider-color);
-  margin: 0.5rem 0;
+  border: 0 !important;
+  border-top: 1px solid var(--menu-divider-color) !important;
+  margin: 0.5rem 0 !important;
+  padding: 0 !important;
+  background: none !important;
 }