@statistikzh/leu 0.1.0 → 0.3.0

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", reflect: true },
+    open: { type: Boolean, reflect: true },
+    label: { type: String, reflect: true },
+    labelPrefix: { type: String, attribute: "label-prefix", reflect: true },
+  }
+
+  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/button/Button.js

@@ -40,19 +40,19 @@ export class LeuButton extends LitElement {
   }
 
   static properties = {
-    label: { type: String },
-    icon: { type: String },
-    iconAfter: { type: String },
-    size: { type: String },
-    variant: { type: String },
-    type: { type: String },
-
-    disabled: { type: Boolean },
-    round: { type: Boolean },
-    active: { type: Boolean },
-    inverted: { type: Boolean },
-    expanded: { type: String },
-    fluid: { type: Boolean },
+    label: { type: String, reflect: true },
+    icon: { type: String, reflect: true },
+    iconAfter: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    variant: { type: String, reflect: true },
+    type: { 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 },
   }
 
   constructor() {

package/src/components/checkbox/Checkbox.js

@@ -93,16 +93,15 @@ export class LeuCheckbox extends LitElement {
   static properties = {
     checked: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    identifier: { type: String },
-    value: { type: String },
-    name: { type: String },
+    identifier: { type: String, reflect: true },
+    value: { type: String, reflect: true },
+    name: { type: String, reflect: true },
   }
 
   constructor() {
     super()
     this.checked = false
     this.disabled = false
-    this.tabIndex = 0
 
     this.checkIcon = Icon("check")
   }

package/src/components/checkbox/CheckboxGroup.js

@@ -39,7 +39,7 @@ export class LeuCheckboxGroup extends LitElement {
   `
 
   static properties = {
-    orientation: { type: String },
+    orientation: { type: String, reflect: true },
   }
 
   constructor() {

package/src/components/chip/Chip.js

@@ -13,7 +13,7 @@ export class LeuChipBase extends LitElement {
   }
 
   static properties = {
-    inverted: { type: Boolean },
+    inverted: { type: Boolean, reflect: true },
   }
 
   constructor() {

package/src/components/chip/ChipGroup.js

@@ -18,7 +18,7 @@ export class LeuChipGroup extends LitElement {
   static styles = styles
 
   static properties = {
-    selectionMode: { type: String, attribute: "selection-mode" },
+    selectionMode: { type: String, attribute: "selection-mode", reflect: true },
   }
 
   constructor() {

package/src/components/chip/ChipLink.js

@@ -20,8 +20,7 @@ export class LeuChipLink extends LeuChipBase {
      * The size of the chip
      * @type {keyof typeof SIZES}
      */
-    size: { type: String },
-
+    size: { type: String, reflect: true },
     href: { type: String, reflect: true },
   }
 

package/src/components/chip/ChipSelectable.js

@@ -27,7 +27,7 @@ export class LeuChipSelectable extends LeuChipBase {
      * @type {keyof typeof SIZES}
      * @default "regular"
      */
-    size: { type: String },
+    size: { type: String, reflect: true },
 
     /**
      * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
@@ -37,10 +37,10 @@ export class LeuChipSelectable extends LeuChipBase {
      * @type {keyof typeof VARIANTS}
      * @default "default"
      */
-    variant: { type: String },
+    variant: { type: String, reflect: true },
 
     selected: { type: Boolean, reflect: true },
-    value: { type: String },
+    value: { type: String, reflect: true },
   }
 
   constructor() {

package/src/components/dropdown/Dropdown.js

@@ -13,7 +13,7 @@ export class LeuDropdown extends LitElement {
   static styles = styles
 
   static properties = {
-    label: { type: String },
+    label: { type: String, reflect: true },
     expanded: { type: Boolean, reflect: true },
   }
 

package/src/components/input/Input.js

@@ -65,30 +65,38 @@ 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 },
     clearable: { type: Boolean, reflect: true },
 
-    value: { type: String },
-    name: { type: String },
-    error: { type: String },
+    value: { type: String, reflect: true },
+    name: { type: String, reflect: true },
+    error: { type: String, reflect: true },
 
-    label: { type: String },
-    prefix: { type: String },
-    suffix: { type: String },
-    size: { type: String },
-    icon: { type: String },
+    label: { type: String, reflect: true },
+    prefix: { type: String, reflect: true },
+    suffix: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    icon: { type: String, reflect: true },
 
     /* Validation attributes */
-    pattern: { type: String },
-    type: { type: String },
-    min: { type: Number },
-    max: { type: Number },
-    maxlength: { type: Number },
-    minlength: { type: Number },
+    pattern: { type: String, reflect: true },
+    type: { type: String, reflect: true },
+    min: { type: Number, reflect: true },
+    max: { type: Number, reflect: true },
+    maxlength: { type: Number, reflect: true },
+    minlength: { type: Number, reflect: true },
     validationMessages: { type: Object },
-    novalidate: { type: Boolean },
+    novalidate: { type: Boolean, reflect: true },
 
     /** @type {ValidityState} */
     _validity: { state: 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/MenuItem.js

@@ -25,13 +25,13 @@ export class LeuMenuItem extends LitElement {
      * If no icon with this value is found, it will be displayed as text.
      * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
      */
-    before: { type: String },
+    before: { type: String, reflect: true },
     /**
      * Can be either an icon name or a text
      * If no icon with this value is found, it will be displayed as text
      * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
      */
-    after: { type: String },
+    after: { type: String, reflect: true },
     active: { type: Boolean, reflect: true },
     highlighted: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: 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;
 }

package/src/components/pagination/Pagination.js

@@ -18,8 +18,8 @@ export class LeuPagination extends LitElement {
 
   static properties = {
     page: { type: Number, reflect: true },
-    itemsOnAPage: { type: Number },
-    dataLength: { type: Number },
+    itemsOnAPage: { type: Number, reflect: true },
+    dataLength: { type: Number, reflect: true },
 
     _minPage: { type: Number, state: true },
   }

package/src/components/radio/Radio.js

@@ -16,16 +16,15 @@ export class LeuRadio extends LitElement {
   static properties = {
     checked: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    identifier: { type: String },
-    value: { type: String },
-    name: { type: String },
+    identifier: { type: String, reflect: true },
+    value: { type: String, reflect: true },
+    name: { type: String, reflect: true },
   }
 
   constructor() {
     super()
     this.checked = false
     this.disabled = false
-    this.tabIndex = 0
   }
 
   handleChange(event) {

package/src/components/radio/RadioGroup.js

@@ -39,7 +39,7 @@ export class LeuRadioGroup extends LitElement {
   `
 
   static properties = {
-    orientation: { type: String },
+    orientation: { type: String, reflect: true },
   }
 
   constructor() {