@statistikzh/leu 0.2.0 → 0.4.0

package/dist/Checkbox.js

@@ -1,7 +1,100 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, html } from 'lit';
 import { I as Icon } from './icon-03e86700.js';
 
+var css_248z = css`:host {
+  --checkbox-color: var(--leu-color-black-40);
+  --checkbox-color-disabled: var(--leu-color-black-20);
+  --checkbox-color-focus: var(--leu-color-func-cyan);
+
+  --checkbox-label-color: var(--leu-color-black-100);
+  --checkbox-label-color-disabled: var(--checkbox-color-disabled);
+
+  --checkbox-tick-color: var(--leu-color-black-0);
+
+  --checkbox-font-regular: var(--leu-font-regular);
+
+  position: relative;
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+
+  font-family: var(--leu-font-regular);
+
+  font-family: var(--checkbox-font-regular);
+}
+
+.checkbox {
+  --_length: 1.5rem;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+
+  width: 1.5rem;
+
+  width: var(--_length);
+  height: 1.5rem;
+  height: var(--_length);
+  margin: 0;
+
+  border: 2px solid var(--checkbox-color);
+  border-radius: 2px;
+
+  flex: 1 0 1.5rem;
+
+  flex: 1 0 var(--_length);
+
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  place-items: center;
+}
+
+.checkbox:checked {
+  background-color: var(--checkbox-color);
+}
+
+.checkbox:checked {
+  --checkbox-color: var(--checkbox-color-focus);
+}
+
+.checkbox:hover, .checkbox:focus {
+  --checkbox-color: var(--checkbox-color-focus);
+}
+
+.checkbox:focus-visible {
+  outline: 2px solid var(--checkbox-color-focus);
+  outline-offset: 2px;
+}
+
+.checkbox:disabled {
+  --checkbox-color: var(--checkbox-color-disabled);
+  cursor: not-allowed;
+}
+
+.label {
+  cursor: pointer;
+  color: var(--checkbox-label-color);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.checkbox:disabled + .label {
+  --checkbox-label-color: var(--checkbox-label-color-disabled);
+  cursor: not-allowed;
+}
+
+.icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: var(--checkbox-tick-color);
+  pointer-events: none;
+}
+`;
+
 /**
  * @tagname leu-checkbox
  */
@@ -10,7 +103,6 @@ class LeuCheckbox extends LitElement {
     super();
     this.checked = false;
     this.disabled = false;
-    this.tabIndex = 0;
     this.checkIcon = Icon("check");
   }
   handleChange(event) {
@@ -34,89 +126,12 @@ class LeuCheckbox extends LitElement {
         ?disabled=${this.disabled}
         .value=${this.value}
       />
-      <label for=${this.identifier} class="label"><slot></slot></label>
+      <label for=${this.identifier} class="label">${this.label}</label>
       <div class="icon">${this.checkIcon}</div>
     `;
   }
 }
-_defineProperty(LeuCheckbox, "styles", css`
-    :host {
-      --checkbox-color: var(--leu-color-black-40);
-      --checkbox-color-disabled: var(--leu-color-black-20);
-      --checkbox-color-focus: var(--leu-color-func-cyan);
-
-      --checkbox-label-color: var(--leu-color-black-100);
-      --checkbox-label-color-disabled: var(--checkbox-color-disabled);
-
-      --checkbox-tick-color: var(--leu-color-black-0);
-
-      --checkbox-font-regular: var(--leu-font-regular);
-
-      position: relative;
-
-      display: inline-flex;
-      align-items: flex-start;
-      gap: 0.5rem;
-
-      font-family: var(--checkbox-font-regular);
-    }
-
-    .checkbox {
-      --_length: 1.5rem;
-      appearance: none;
-      cursor: pointer;
-
-      width: var(--_length);
-      height: var(--_length);
-      margin: 0;
-
-      border: 2px solid var(--checkbox-color);
-      border-radius: 2px;
-
-      flex: 1 0 var(--_length);
-
-      display: grid;
-      place-items: center;
-    }
-
-    .checkbox:checked {
-      background-color: var(--checkbox-color);
-    }
-
-    .checkbox:is(:hover, :checked, :focus) {
-      --checkbox-color: var(--checkbox-color-focus);
-    }
-
-    .checkbox:focus-visible {
-      outline: 2px solid var(--checkbox-color-focus);
-      outline-offset: 2px;
-    }
-
-    .checkbox:disabled {
-      --checkbox-color: var(--checkbox-color-disabled);
-      cursor: not-allowed;
-    }
-
-    .label {
-      cursor: pointer;
-      color: var(--checkbox-label-color);
-      font-size: 1rem;
-      line-height: 1.5;
-    }
-
-    .checkbox:disabled + .label {
-      --checkbox-label-color: var(--checkbox-label-color-disabled);
-      cursor: not-allowed;
-    }
-
-    .icon {
-      position: absolute;
-      top: 0;
-      left: 0;
-      color: var(--checkbox-tick-color);
-      pointer-events: none;
-    }
-  `);
+_defineProperty(LeuCheckbox, "styles", css_248z);
 _defineProperty(LeuCheckbox, "shadowRootOptions", {
   ...LitElement.shadowRootOptions,
   delegatesFocus: true
@@ -131,17 +146,21 @@ _defineProperty(LeuCheckbox, "properties", {
     reflect: true
   },
   identifier: {
-    type: String
+    type: String,
+    reflect: true
   },
   value: {
-    type: String
+    type: String,
+    reflect: true
   },
   name: {
-    type: String
+    type: String,
+    reflect: true
+  },
+  label: {
+    type: String,
+    reflect: true
   }
 });
-function defineCheckboxElements() {
-  defineElement("checkbox", LeuCheckbox);
-}
 
-export { LeuCheckbox, defineCheckboxElements };
+export { LeuCheckbox };

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,50 +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
+    type: String,
+    reflect: true
+  },
+  label: {
+    type: String,
+    reflect: true
   }
 });
-function defineCheckboxGroupElements() {
-  defineElement("checkbox-group", LeuCheckboxGroup);
-}
 
-export { LeuCheckboxGroup, defineCheckboxGroupElements };
+export { LeuCheckboxGroup };

package/dist/{Chip-389013ff.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,
@@ -154,7 +154,12 @@ _defineProperty(LeuChipBase, "shadowRootOptions", {
 });
 _defineProperty(LeuChipBase, "properties", {
   inverted: {
-    type: Boolean
+    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 {
@@ -62,11 +62,9 @@ _defineProperty(LeuChipGroup, "styles", css_248z);
 _defineProperty(LeuChipGroup, "properties", {
   selectionMode: {
     type: String,
-    attribute: "selection-mode"
+    attribute: "selection-mode",
+    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-389013ff.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>`;
   }
 }
@@ -31,15 +31,13 @@ _defineProperty(LeuChipLink, "properties", {
    * @type {keyof typeof SIZES}
    */
   size: {
-    type: String
+    type: String,
+    reflect: true
   },
   href: {
     type: String,
     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-389013ff.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-389013ff.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>`;
   }
 }
@@ -62,7 +62,8 @@ _defineProperty(LeuChipSelectable, "properties", {
    * @default "regular"
    */
   size: {
-    type: String
+    type: String,
+    reflect: true
   },
   /**
    * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
@@ -73,18 +74,17 @@ _defineProperty(LeuChipSelectable, "properties", {
    * @default "default"
    */
   variant: {
-    type: String
+    type: String,
+    reflect: true
   },
   selected: {
     type: Boolean,
     reflect: true
   },
   value: {
-    type: String
+    type: String,
+    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,45 +38,68 @@ 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>
     `;
   }
 }
 _defineProperty(LeuDropdown, "styles", css_248z);
 _defineProperty(LeuDropdown, "properties", {
   label: {
-    type: String
+    type: String,
+    reflect: true
   },
   expanded: {
     type: Boolean,
     reflect: true
   }
 });
-function defineDropdownElements() {
-  defineElement("dropdown", LeuDropdown);
-  defineButtonElements();
-  defineMenuElements();
-  defineMenuItemElements();
-}
 
-export { LeuDropdown, defineDropdownElements };
+export { LeuDropdown };