@statistikzh/leu 0.3.0 → 0.4.0

package/dist/CheckboxGroup.js

@@ -1,7 +1,40 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 
+var css_248z = css`:host {
+  --group-font-regular: var(--leu-font-regular);
+  --group-font-black: var(--leu-font-black);
+
+  font-family: var(--leu-font-regular);
+
+  font-family: var(--group-font-regular);
+}
+
+.fieldset {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+
+  border: none;
+  padding: 0;
+}
+
+.fieldset--vertical {
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.legend {
+  font-family: var(--group-font-black);
+  font-size: 1.125rem;
+  line-height: 1.5;
+
+  margin-bottom: 0.5rem;
+}
+`;
+
 /**
  * @tagname leu-checkbox-group
  */
@@ -27,51 +60,22 @@ class LeuCheckboxGroup extends LitElement {
     };
     return html`
       <fieldset class=${classMap(fieldsetClasses)}>
-        <legend class="legend"><slot name="legend"></slot></legend>
+        ${this.label ? html`<legend class="legend">${this.label}</legend>` : html``}
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
     `;
   }
 }
-_defineProperty(LeuCheckboxGroup, "styles", css`
-    :host {
-      --group-font-regular: var(--leu-font-regular);
-      --group-font-black: var(--leu-font-black);
-
-      font-family: var(--group-font-regular);
-    }
-
-    .fieldset {
-      display: flex;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: 0.5rem 1rem;
-
-      border: none;
-      padding: 0;
-    }
-
-    .fieldset--vertical {
-      flex-direction: column;
-      gap: 1rem;
-    }
-
-    .legend {
-      font-family: var(--group-font-black);
-      font-size: 1.125rem;
-      line-height: 1.5;
-
-      margin-bottom: 0.5rem;
-    }
-  `);
+_defineProperty(LeuCheckboxGroup, "styles", css_248z);
 _defineProperty(LeuCheckboxGroup, "properties", {
   orientation: {
     type: String,
     reflect: true
+  },
+  label: {
+    type: String,
+    reflect: true
   }
 });
-function defineCheckboxGroupElements() {
-  defineElement("checkbox-group", LeuCheckboxGroup);
-}
 
-export { LeuCheckboxGroup, defineCheckboxGroupElements };
+export { LeuCheckboxGroup };

package/dist/{Chip-5f70d04f.js → Chip-dac7337d.js}

@@ -1,4 +1,4 @@
-import { _ as _defineProperty } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement } from 'lit';
 
 var css_248z = css`:host,
@@ -156,6 +156,10 @@ _defineProperty(LeuChipBase, "properties", {
   inverted: {
     type: Boolean,
     reflect: true
+  },
+  label: {
+    type: String,
+    reflect: true
   }
 });
 

package/dist/ChipGroup.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, html } from 'lit';
 
 var css_248z = css`:host {
@@ -66,8 +66,5 @@ _defineProperty(LeuChipGroup, "properties", {
     reflect: true
   }
 });
-function defineChipGroupElements() {
-  defineElement("chip-group", LeuChipGroup);
-}
 
-export { LeuChipGroup, SELECTION_MODES, defineChipGroupElements };
+export { LeuChipGroup, SELECTION_MODES };

package/dist/ChipLink.js

@@ -1,6 +1,6 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { html } from 'lit';
-import { L as LeuChipBase } from './Chip-5f70d04f.js';
+import { L as LeuChipBase } from './Chip-dac7337d.js';
 
 const SIZES = {
   regular: "regular",
@@ -20,7 +20,7 @@ class LeuChipLink extends LeuChipBase {
   }
   render() {
     return html`<a href=${this.href} class="button">
-      <span class="label"><slot></slot></span>
+      <span class="label">${this.label}</span>
     </a>`;
   }
 }
@@ -39,8 +39,5 @@ _defineProperty(LeuChipLink, "properties", {
     reflect: true
   }
 });
-function defineChipLinkElements() {
-  defineElement("chip-link", LeuChipLink);
-}
 
-export { LeuChipLink, SIZES, defineChipLinkElements };
+export { LeuChipLink, SIZES };

package/dist/ChipRemovable.js

@@ -1,6 +1,6 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { html } from 'lit';
-import { L as LeuChipBase } from './Chip-5f70d04f.js';
+import { L as LeuChipBase } from './Chip-dac7337d.js';
 import { I as Icon } from './icon-03e86700.js';
 
 /**
@@ -24,7 +24,7 @@ class LeuChipRemovable extends LeuChipBase {
   }
   render() {
     return html`<button @click=${e => this.handleClick(e)} class="button">
-      <span class="label"><slot></slot></span>
+      <span class="label">${this.label}</span>
       <div class="icon">${this._removeIcon}</div>
     </button>`;
   }
@@ -32,8 +32,5 @@ class LeuChipRemovable extends LeuChipBase {
 _defineProperty(LeuChipRemovable, "properties", {
   ...LeuChipBase.properties
 });
-function defineChipRemovableElements() {
-  defineElement("chip-removable", LeuChipRemovable);
-}
 
-export { LeuChipRemovable, defineChipRemovableElements };
+export { LeuChipRemovable };

package/dist/ChipSelectable.js

@@ -1,6 +1,6 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { html } from 'lit';
-import { L as LeuChipBase } from './Chip-5f70d04f.js';
+import { L as LeuChipBase } from './Chip-dac7337d.js';
 
 const SIZES = {
   small: "small",
@@ -50,7 +50,7 @@ class LeuChipSelectable extends LeuChipBase {
       class="button"
       aria-selected=${this.selected ? "true" : "false"}
     >
-      <span class="label"><slot></slot></span>
+      <span class="label">${this.label}</span>
     </button>`;
   }
 }
@@ -86,8 +86,5 @@ _defineProperty(LeuChipSelectable, "properties", {
     reflect: true
   }
 });
-function defineChipSelectableElements() {
-  defineElement("chip-selectable", LeuChipSelectable);
-}
 
-export { LeuChipSelectable, SIZES, VARIANTS, defineChipSelectableElements };
+export { LeuChipSelectable, SIZES, VARIANTS };

package/dist/Dropdown.js

@@ -1,10 +1,18 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, html } from 'lit';
-import { defineButtonElements } from './Button.js';
-import { defineMenuElements } from './Menu.js';
-import { defineMenuItemElements } from './MenuItem.js';
+import './leu-button.js';
+import './leu-menu.js';
+import './leu-menu-item.js';
+import './leu-popup-4bf6f1f4.js';
+import './defineElement-47d4f665.js';
+import './Button.js';
 import 'lit/directives/class-map.js';
 import './icon-03e86700.js';
+import './Menu.js';
+import './MenuItem.js';
+import 'lit/static-html.js';
+import 'lit/directives/if-defined.js';
+import '@floating-ui/dom';
 
 var css_248z = css`:host,
 :host * {
@@ -20,8 +28,7 @@ var css_248z = css`:host,
   box-shadow: var(--leu-box-shadow-short);
   border-radius: 2px;
 
-  position: absolute;
-  top: calc(100% + 0.5rem);
+  margin-top: 0.5rem;
 }
 `;
 
@@ -31,27 +38,55 @@ var css_248z = css`:host,
 class LeuDropdown extends LitElement {
   constructor() {
     super();
+    _defineProperty(this, "_handleMenuItemClick", () => {
+      this.expanded = false;
+    });
     this.label = "";
     this.expanded = false;
+    this.menuItems = [];
   }
-  handleClick() {
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._removeMenuItemListeners();
+  }
+  _handleSlotChange() {
+    this._removeMenuItemListeners();
+    this.menuItems = [...this.querySelectorAll("leu-menu > leu-menu-item")];
+    this.menuItems.forEach(item => item.addEventListener("click", this._handleMenuItemClick));
+  }
+  _removeMenuItemListeners() {
+    this.menuItems.forEach(item => {
+      item.removeEventListener("click", this._handleMenuItemClick);
+    });
+  }
+  _handleToggleClick() {
     this.expanded = !this.expanded;
   }
   render() {
     return html`
-      <leu-button
-        icon="download"
-        variant="ghost"
-        label=${this.label}
-        expanded=${this.expanded ? "open" : "closed"}
-        aria-expanded=${this.expanded ? "true" : "false"}
-        aria-controls="content"
+      <leu-popup
         ?active=${this.expanded}
-        @click=${this.handleClick}
-      ></leu-button>
-      <div id="content" class="content" ?hidden=${!this.expanded}>
-        <slot></slot>
-      </div>
+        placement="bottom-start"
+        shift
+        shiftPadding="8"
+        autoSize="width"
+        autoSizePadding="8"
+      >
+        <leu-button
+          slot="anchor"
+          icon="download"
+          variant="ghost"
+          label=${this.label}
+          expanded=${this.expanded ? "open" : "closed"}
+          aria-expanded=${this.expanded ? "true" : "false"}
+          aria-controls="content"
+          ?active=${this.expanded}
+          @click=${this._handleToggleClick}
+        ></leu-button>
+        <div id="content" class="content" ?hidden=${!this.expanded}>
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+      </leu-popup>
     `;
   }
 }
@@ -66,11 +101,5 @@ _defineProperty(LeuDropdown, "properties", {
     reflect: true
   }
 });
-function defineDropdownElements() {
-  defineElement("dropdown", LeuDropdown);
-  defineButtonElements();
-  defineMenuElements();
-  defineMenuItemElements();
-}
 
-export { LeuDropdown, defineDropdownElements };
+export { LeuDropdown };

package/dist/Input.js

@@ -1,7 +1,8 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, nothing, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { I as Icon } from './icon-03e86700.js';
 
@@ -137,6 +138,7 @@ var css_248z = css`:host,
 
 /* is size regular AND (has focus OR contains a value) */
 
+.input-wrapper--invalid .label,
 :host(:not([size])) .label,
 :host([size="regular"]) .label {
   top: calc(0.75rem - var(--input-border-width));
@@ -161,20 +163,22 @@ var css_248z = css`:host,
   content: "*";
 }
 
+/* is not disabled AND has focus AND is empty */
+
+:host(:not([disabled]):not(:focus-within)) .input-wrapper--empty .label {
+  --input-label-color: var(--input-label-color-empty);
+}
+
 /* is empty AND has no focus */
 
-:host(:not(:focus-within)) .input-wrapper--empty .label {
+:host(:not(:focus-within))
+  .input-wrapper--empty:not(.input-wrapper--invalid)
+  .label {
   font-family: var(--input-font-regular);
   font-size: 1rem;
   top: calc(1.5rem - var(--input-border-width));
 }
 
-/* is not disabled AND has focus AND is empty */
-
-:host(:not([disabled]):not(:focus-within)) .input-wrapper--empty .label {
-  --input-label-color: var(--input-label-color-empty);
-}
-
 /* is size small AND has no focus AND is empty */
 
 :host(:not(:focus-within)[size="small"]) .input-wrapper--empty .label {
@@ -335,16 +339,9 @@ class LeuInput extends LitElement {
     this.disabled = false;
     this.required = false;
     this.clearable = false;
-    this.value = "";
-    this.name = "";
-    this.error = "";
-    this.label = "";
-    this.prefix = "";
-    this.suffix = "";
 
     /** @type {keyof typeof SIZE_TYPES} */
     this.size = SIZE_TYPES.REGULAR;
-    this.icon = "";
     this.type = "text";
     this._validity = null;
     this.validationMessages = {};
@@ -415,7 +412,9 @@ class LeuInput extends LitElement {
    * @returns {void}
    */
   handleChange(event) {
-    this.value = event.target.value;
+    if (event.target.validity.valid) {
+      this.value = event.target.value;
+    }
     const customEvent = new CustomEvent(event.type, event);
     this.dispatchEvent(customEvent);
   }
@@ -430,6 +429,11 @@ class LeuInput extends LitElement {
    */
   handleInput(event) {
     this.value = event.target.value;
+    const customEvent = new CustomEvent("input", {
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(customEvent);
   }
 
   /**
@@ -537,7 +541,7 @@ class LeuInput extends LitElement {
     if (this.isInvalid()) {
       return html`<div class="error-icon">${Icon("caution")}</div>`;
     }
-    if (this.clearable && this.value !== "") {
+    if (this.clearable && this.value) {
       return html`<button
         class="clear-button"
         @click=${this.clear}
@@ -547,13 +551,13 @@ class LeuInput extends LitElement {
         ${this._clearIcon}
       </button>`;
     }
-    if (this.icon !== "") {
+    if (this.icon) {
       return html`<div class="icon">${Icon(this.icon)}</div>`;
     }
     return nothing;
   }
   isInvalid() {
-    if (this.error !== "") {
+    if (this.error) {
       return true;
     }
     return this._validity === null || this.novalidate ? false : !this._validity.valid;
@@ -562,7 +566,7 @@ class LeuInput extends LitElement {
     const isInvalid = this.isInvalid();
     const inputWrapperClasses = {
       "input-wrapper": true,
-      "input-wrapper--empty": this.value === "",
+      "input-wrapper--empty": !this.value,
       "input-wrapper--invalid": isInvalid
     };
 
@@ -584,18 +588,18 @@ class LeuInput extends LitElement {
           @invalid=${this.handleInvalid}
           ?disabled=${this.disabled}
           ?required=${this.required}
+          .value=${live(this.value ?? "")}
           pattern=${ifDefined(this.pattern)}
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}
           maxlength=${ifDefined(this.maxlength)}
           minlength=${ifDefined(this.minlength)}
-          .value=${this.value}
           ref=${ref(this._inputRef)}
           aria-invalid=${isInvalid}
         />
-        <label for="input-${this.getId()}" class="label"><slot></slot></label>
-        ${this.prefix !== "" ? html`<div class="prefix" .aria-hidden=${true}>${this.prefix}</div>` : nothing}
-        ${this.suffix !== "" ? html`<div class="suffix" .aria-hidden=${true}>${this.suffix}</div>` : nothing}
+        <label for="input-${this.getId()}" class="label">${this.label}</label>
+        ${this.prefix ? html`<div class="prefix" .aria-hidden=${true}>${this.prefix}</div>` : nothing}
+        ${this.suffix ? html`<div class="suffix" .aria-hidden=${true}>${this.suffix}</div>` : nothing}
         ${this.renderAfterContent()}
       </div>
       ${this.renderErrorMessages()}
@@ -692,8 +696,5 @@ _defineProperty(LeuInput, "properties", {
     state: true
   }
 });
-function defineInputElements() {
-  defineElement("input", LeuInput);
-}
 
-export { LeuInput, SIZE_TYPES, defineInputElements };
+export { LeuInput, SIZE_TYPES };

package/dist/Menu.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, html } from 'lit';
 
 var css_248z = css`:host,
@@ -33,8 +33,5 @@ class LeuMenu extends LitElement {
   }
 }
 _defineProperty(LeuMenu, "styles", css_248z);
-function defineMenuElements() {
-  defineElement("menu", LeuMenu);
-}
 
-export { LeuMenu, defineMenuElements };
+export { LeuMenu };

package/dist/MenuItem.js

@@ -1,5 +1,7 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
-import { css, LitElement, html, nothing } from 'lit';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
+import { css, LitElement, nothing } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { a as ICON_NAMES, I as Icon } from './icon-03e86700.js';
 
 var css_248z = css`:host,
@@ -11,15 +13,18 @@ var css_248z = css`:host,
   --background: var(--leu-color-black-0);
   --background-hover: var(--leu-color-black-10);
   --background-active: var(--leu-color-func-cyan);
-  --background-disabled: var(--leu-color-black-0);
+  --background-disabled: var(--leu-color-black-black-0);
   --color: var(--leu-color-black-transp-60);
+  --color-disabled: var(--leu-color-black-transp-20);
   --font-regular: var(--leu-font-regular);
   --font-black: var(--leu-font-black);
 
-  font-family: var(--chip-font-regular);
+  font-family: var(--leu-font-regular);
 }
 
 .button {
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -57,6 +62,7 @@ var css_248z = css`:host,
 
 :host([disabled]) .button {
   --background: var(--background-disabled);
+  --color: var(--color-disabled);
   cursor: default;
 }
 
@@ -87,8 +93,6 @@ class LeuMenuItem extends LitElement {
     super();
     this.active = false;
     this.disabled = false;
-    this.before = "";
-    this.after = "";
 
     /**
      * A programmatic way to highlight the menu item like it is hovered.
@@ -106,24 +110,30 @@ class LeuMenuItem extends LitElement {
     return name;
   }
   renderBefore() {
-    if (this.before !== "") {
+    if (this.before) {
       const content = LeuMenuItem.getIconOrText(this.before);
       return html`<span class="before">${content}</span>`;
     }
     return nothing;
   }
   renderAfter() {
-    if (this.after !== "") {
+    if (this.after) {
       const content = LeuMenuItem.getIconOrText(this.after);
       return html`<span class="after">${content}</span>`;
     }
     return nothing;
   }
+  getTagName() {
+    return this.href ? "a" : "button";
+  }
   render() {
-    return html`<button class="button" ?disabled=${this.disabled}>
-      ${this.renderBefore()}<span class="label"><slot></slot></span
+    /* 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(this.getTagName())} class="button" href=${ifDefined(this.href)} ?disabled=${this.disabled}>
+      ${this.renderBefore()}<span class="label">${this.label}</span
       >${this.renderAfter()}
-    </button>`;
+    </${unsafeStatic(this.getTagName())}>`;
+    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
   }
 }
 _defineProperty(LeuMenuItem, "styles", css_248z);
@@ -164,10 +174,15 @@ _defineProperty(LeuMenuItem, "properties", {
   disabled: {
     type: Boolean,
     reflect: true
+  },
+  label: {
+    type: String,
+    reflect: true
+  },
+  href: {
+    type: String,
+    reflect: true
   }
 });
-function defineMenuItemElements() {
-  defineElement("menu-item", LeuMenuItem);
-}
 
-export { LeuMenuItem, defineMenuItemElements };
+export { LeuMenuItem };