@statistikzh/leu 0.10.0 → 0.11.1

package/src/components/accordion/accordion.css

@@ -1,10 +1,5 @@
 @import url("../../styles/custom-media.css");
 
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --accordion-font-regular: var(--leu-font-family-regular);
   --accordion-font-black: var(--leu-font-family-black);
@@ -19,17 +14,9 @@
 
   --transition: 0.1s ease;
 
-  font-family: var(--chip-font-regular);
+  font-family: var(--accordion-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 {
@@ -115,15 +102,18 @@
   flex-grow: 1;
 }
 
+.contentwrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--transition);
+}
+
 .content {
   overflow: hidden;
-  transition: visibility var(--transition), opacity var(--transition);
 }
 
-.content[hidden] {
-  display: block;
-  visibility: hidden;
-  opacity: 0;
+.contentwrapper[hidden] {
+  grid-template-rows: 0fr;
 }
 
 slot[name="content"] {
@@ -140,9 +130,6 @@ slot[name="content"] {
 }
 
 .divider {
-  position: absolute;
-  top: 100%;
-  left: 0;
 
   width: 100%;
   height: 1px;

package/src/components/breadcrumb/Breadcrumb.js

@@ -55,7 +55,7 @@ export class LeuBreadcrumb extends LeuElement {
     "leu-visually-hidden": LeuVisuallyHidden,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     items: { type: Array },

package/src/components/breadcrumb/breadcrumb.css

@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --breadcrumb-font-regular: var(--leu-font-family-regular);
   --breadcrumb-font-black: var(--leu-font-family-black);

package/src/components/button/Button.js

@@ -41,7 +41,7 @@ export class LeuButton extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /**
    * @internal

package/src/components/button-group/ButtonGroup.js

@@ -11,7 +11,7 @@ import styles from "./button-group.css"
  * @fires input - When the value of the group changes by clicking a button
  */
 export class LeuButtonGroup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   constructor() {
     super()

package/src/components/button-group/button-group.css

@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 .group {
   display: flex;
   gap: 0.5rem;

package/src/components/checkbox/Checkbox.js

@@ -14,7 +14,7 @@ export class LeuCheckbox extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /** @internal */
   static shadowRootOptions = {

package/src/components/checkbox/CheckboxGroup.js

@@ -10,7 +10,7 @@ import styles from "./checkbox-group.css"
  * @tagname leu-checkbox-group
  */
 export class LeuCheckboxGroup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     orientation: { type: String, reflect: true },

package/src/components/chip/Chip.js

@@ -6,7 +6,7 @@ import styles from "./chip.css"
 /* Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=21161-184433&mode=design&t=Kjo5VDiqivihn8dh-11 */
 
 export class LeuChipBase extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /** @internal */
   static shadowRootOptions = {

package/src/components/chip/ChipGroup.js

@@ -19,7 +19,7 @@ export const SELECTION_MODES = Object.freeze({
  * @tagname leu-chip-group
  */
 export class LeuChipGroup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     inverted: { type: Boolean, reflect: true },

package/src/components/chip/chip.css

@@ -1,5 +1,3 @@
-:host,
-:host *,
 :host *::before,
 :host *::after {
   box-sizing: border-box;

package/src/components/dialog/Dialog.js

@@ -19,7 +19,7 @@ export class LeuDialog extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,

package/src/components/dialog/dialog.css

@@ -2,11 +2,6 @@
 
 /* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&t=8VgDy9avMRG5aL7s-0 */
 
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --dialog-font-regular: var(--leu-font-family-regular);
   --dialog-font-black: var(--leu-font-family-black);

package/src/components/dropdown/Dropdown.js

@@ -23,7 +23,7 @@ export class LeuDropdown extends LeuElement {
     "leu-popup": LeuPopup,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     label: { type: String, reflect: true },

package/src/components/dropdown/dropdown.css

@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   position: relative;
 }

package/src/components/icon/Icon.js

@@ -17,7 +17,7 @@ import { paths } from "./paths.js"
  * @cssprop --leu-icon-size - The size of the icon.
  */
 export class LeuIcon extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     name: { type: String, reflect: true },

package/src/components/input/Input.js

@@ -70,7 +70,7 @@ export class LeuInput extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /**
    * @internal

package/src/components/input/input.css

@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --input-color: var(--leu-color-black-100);
   --input-color-disabled: var(--leu-color-black-20);

package/src/components/menu/Menu.js

@@ -16,7 +16,7 @@ import styles from "./menu.css"
  * @property {SelectsType} selects - This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'.
  */
 export class LeuMenu extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,

package/src/components/menu/MenuItem.js

@@ -27,7 +27,7 @@ export class LeuMenuItem extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /**
    * @internal

package/src/components/menu/menu-item.css

@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --background: var(--leu-color-black-0);
   --background-hover: var(--leu-color-black-10);

package/src/components/menu/menu.css

@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --menu-divider-color: var(--leu-color-black-transp-20);
 }

package/src/components/pagination/Pagination.js

@@ -21,7 +21,7 @@ export class LeuPagination extends LeuElement {
     "leu-visually-hidden": LeuVisuallyHidden,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /**
    * @internal

package/src/components/popup/Popup.js

@@ -20,7 +20,7 @@ import styles from "./popup.css"
  * @tagname leu-popup
  */
 export class LeuPopup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,

package/src/components/popup/popup.css

@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --popup-font-regular: var(--leu-font-family-regular);
   --popup-font-black: var(--leu-font-family-black);

package/src/components/radio/Radio.js

@@ -9,7 +9,7 @@ import styles from "./radio.css"
  * @tagname leu-radio
  */
 export class LeuRadio extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /** @internal */
   static shadowRootOptions = {

package/src/components/radio/RadioGroup.js

@@ -10,7 +10,7 @@ import styles from "./radio-group.css"
  * @tagname leu-radio-group
  */
 export class LeuRadioGroup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     orientation: { type: String, reflect: true },

package/src/components/range/Range.js

@@ -0,0 +1,237 @@
+import { html } from "lit"
+
+import styles from "./range.css"
+import { LeuElement } from "../../lib/LeuElement.js"
+
+const defaultValueConverter = {
+  fromAttribute(value) {
+    return value.split(",").map((v) => Number(v.trim()))
+  },
+  toAttribute(value) {
+    return value.join(",")
+  },
+}
+
+const RANGE_LABELS = ["Von", "Bis"]
+
+/**
+ * @tagname leu-range
+ */
+export class LeuRange extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    defaultValue: { converter: defaultValueConverter, attribute: "value" },
+    min: { type: Number, reflect: true },
+    max: { type: Number, reflect: true },
+    step: { type: Number, reflect: true },
+    name: { type: String, reflect: true },
+    label: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    multiple: { type: Boolean, reflect: true },
+  }
+
+  constructor() {
+    super()
+    this.defaultValue = [50]
+    this.min = 0
+    this.max = 100
+    this.step = 1
+    this.name = ""
+    this.label = ""
+    this.disabled = false
+    this.multiple = false
+  }
+
+  updated() {
+    this._updateStyles()
+  }
+
+  _updateStyles() {
+    const normalizedRange = this._getNormalizedRange()
+    this.style.setProperty("--low", normalizedRange[0].toString())
+    this.style.setProperty("--high", normalizedRange[1].toString())
+
+    const inputs = this.multiple
+      ? [this._getBaseInput(), this._getGhostInput()]
+      : [this._getBaseInput()]
+
+    inputs.forEach((input) => {
+      /** @type {HTMLOutputElement} */
+      const output = this.shadowRoot.querySelector(`.output[for=${input.id}]`)
+      const normalizedValue = this._getNormalizedValue(input.valueAsNumber)
+      output.style.setProperty("--value", normalizedValue.toString())
+      output.value = input.value
+    })
+  }
+
+  get value() {
+    const inputs = Array.from(this.shadowRoot.querySelectorAll("input"))
+    return inputs.map((input) => input.value).join(",")
+  }
+
+  /**
+   * Sets the value of the underlying input element(s).
+   * The value has to be an array if "multiple" range is used.
+   * Otherwise it has to be a string.
+   * @param {string | Array} value
+   */
+  set value(value) {
+    if (this.multiple && Array.isArray(value)) {
+      const inputs = Array.from(this.shadowRoot.querySelectorAll("input"))
+      value.forEach((v, i) => {
+        inputs[i].value = v
+      })
+      this._updateStyles()
+    } else if (!this.multiple) {
+      this._getBaseInput().value = value
+      this._updateStyles()
+    }
+  }
+
+  get valueAsArray() {
+    return Array.from(this.shadowRoot.querySelectorAll("input")).map(
+      (input) => input.valueAsNumber
+    )
+  }
+
+  get valueLow() {
+    const inputs = Array.from(this.shadowRoot.querySelectorAll("input"))
+
+    if (this.multiple) {
+      return inputs.map((input) => input.valueAsNumber).sort((a, b) => a - b)[0]
+    }
+
+    return inputs[0].value
+  }
+
+  get valueHigh() {
+    const inputs = Array.from(this.shadowRoot.querySelectorAll("input"))
+
+    if (this.multiple) {
+      return inputs.map((input) => input.valueAsNumber).sort((a, b) => a - b)[1]
+    }
+
+    return inputs[0].value
+  }
+
+  /**
+   * @returns {HTMLInputElement | null}
+   */
+  _getBaseInput() {
+    return this.shadowRoot.querySelector(".range--base")
+  }
+
+  /**
+   * @returns {HTMLInputElement | null}
+   */
+  _getGhostInput() {
+    return this.shadowRoot.querySelector(".range--ghost")
+  }
+
+  /**
+   *
+   * @param {number} _index
+   * @param {InputEvent & {target: HTMLInputElement}} _e
+   */
+  _handleInput(_index, _e) {
+    this._updateStyles()
+  }
+
+  /**
+   *
+   * @param {number} value
+   * @returns {number}
+   */
+  _getNormalizedValue(value) {
+    return (value - this.min) / (this.max - this.min)
+  }
+
+  _getNormalizedRange() {
+    if (this.multiple) {
+      return this.valueAsArray
+        .map((value) => this._getNormalizedValue(value))
+        .sort((a, b) => a - b)
+    }
+
+    return [0, this._getNormalizedValue(this.valueAsArray[0])]
+  }
+
+  /**
+   * Determine if the "click" (pointer event) is closer the
+   * the value of the other input element. Swap the values if this is the case.
+   * @param {PointerEvent & {target: HTMLInputElement}} e
+   */
+  _handlePointerDown(e) {
+    const clickValue =
+      this.min + ((this.max - this.min) * e.offsetX) / this.offsetWidth
+    const middleValue = (this.valueAsArray[0] + this.valueAsArray[1]) / 2
+
+    if (
+      (e.target.valueAsNumber === this.valueLow) ===
+      clickValue > middleValue
+    ) {
+      /**
+       * As the pointerdown event is fired before the input event, we first overwrite the value
+       * of the input element that was not clicked on. The active input element will update itself.
+       */
+      // this._value = [e.target.valueAsNumber, e.target.valueAsNumber]
+      this._getGhostInput().value = e.target.value
+    }
+  }
+
+  render() {
+    const inputs = this.multiple ? ["base", "ghost"] : ["base"]
+
+    const { multiple, disabled, label, defaultValue } = this
+
+    return html`
+      <div
+        role=${multiple ? "group" : undefined}
+        aria-labelledby=${multiple ? "group-label" : undefined}
+      >
+        ${multiple
+          ? html`<span id="group-label" class="label">${label}</span>`
+          : html`<label for="input-base" class="label">${label}</label>`}
+        <div class="outputs">
+          ${inputs.map(
+            (type, index) =>
+              html`<output
+                class="output"
+                for="input-${type}"
+                value=${defaultValue[index]}
+              ></output>`
+          )}
+        </div>
+        <div class="inputs">
+          ${inputs.map(
+            (type, index) =>
+              html`
+                <input
+                  @input=${(e) => this._handleInput(index, e)}
+                  @pointerdown=${multiple && !disabled && index === 0
+                    ? this._handlePointerDown
+                    : undefined}
+                  type="range"
+                  class="range range--${type}"
+                  id="input-${type}"
+                  name=${this.name}
+                  min=${this.min}
+                  max=${this.max}
+                  step=${this.step}
+                  aria-label=${multiple ? RANGE_LABELS[index] : undefined}
+                  ?disabled=${disabled}
+                  .value=${defaultValue[index].toString()}
+                />
+              `
+          )}
+        </div>
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,5 @@
+import { LeuRange } from "./Range.js"
+
+export { LeuRange }
+
+LeuRange.define("leu-range")