@statistikzh/leu 0.3.0 → 0.5.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-family-regular);
+
+  position: relative;
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+
+  font-family: var(--leu-font-family-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
  */
@@ -33,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
@@ -140,10 +156,11 @@ _defineProperty(LeuCheckbox, "properties", {
   name: {
     type: String,
     reflect: true
+  },
+  label: {
+    type: String,
+    reflect: true
   }
 });
-function defineCheckboxElements() {
-  defineElement("checkbox", LeuCheckbox);
-}
 
-export { LeuCheckbox, defineCheckboxElements };
+export { LeuCheckbox };

package/dist/CheckboxGroup.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @tagname leu-checkbox-group
+ */
+export class LeuCheckboxGroup extends LitElement {
+    orientation: string;
+    items: any[];
+    get value(): any[];
+    handleSlotChange(): void;
+    handleItems(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["CheckboxGroup.js"],"names":[],"mappings":"AAqCA;;GAEG;AACH;IAGI,oBAA+B;IAC/B,aAAe;IAEjB,mBAEC;IACD,yBAEC;IACD,oBAEC;IACD,+CAWC;CACF;2BAlEqC,KAAK"}

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-family-regular);
+  --group-font-black: var(--leu-font-family-black);
+
+  font-family: var(--leu-font-family-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.d.ts

@@ -0,0 +1,5 @@
+export class LeuChipBase extends LitElement {
+    inverted: boolean;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=Chip.d.ts.map

package/dist/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["Chip.js"],"names":[],"mappings":"AAyJA;IAGI,kBAAqB;CAExB;2BA7J+B,KAAK"}

package/dist/{Chip-5f70d04f.js → Chip.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,
@@ -23,17 +23,20 @@ var css_248z = css`:host,
   --chip-radio-background-default: var(--leu-color-black-0);
   --chip-radio-background-selected: var(--leu-color-func-cyan);
 
-  --chip-font-regular: var(--leu-font-regular);
-  --chip-font-black: var(--leu-font-black);
+  --chip-font-regular: var(--leu-font-family-regular);
+  --chip-font-black: var(--leu-font-family-black);
 
   --chip-background-color: var(--chip-background-color-default);
   --chip-color: var(--chip-color-default);
   --chip-radio-border: var(--chip-radio-border-default);
   --chip-radio-background: var(--chip-radio-background-default);
 
-  font-family: var(--leu-font-regular);
+  font-family: var(--leu-font-family-regular);
 
   font-family: var(--chip-font-regular);
+
+  /* Allow shrinking to achieve text truncation (ellipsis) */
+  min-width: 0;
 }
 
 :host([inverted]) {
@@ -68,8 +71,11 @@ var css_248z = css`:host,
   cursor: pointer;
 
   display: inline-flex;
-  align-items: center;
   gap: 0.5rem;
+
+  /* Allow shrinking to achieve text truncation (ellipsis) */
+  min-width: 0;
+  max-width: 100%;
 }
 
 .button:hover,
@@ -117,6 +123,7 @@ var css_248z = css`:host,
 
 :host([variant="radio"]) .button::before {
   content: "";
+  flex: 0 0 1rem;
   width: 1rem;
   height: 1rem;
   background-color: var(--chip-radio-background);
@@ -131,6 +138,10 @@ var css_248z = css`:host,
 .label {
   position: relative;
   top: -0.0625rem;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .icon svg {
@@ -156,7 +167,11 @@ _defineProperty(LeuChipBase, "properties", {
   inverted: {
     type: Boolean,
     reflect: true
+  },
+  label: {
+    type: String,
+    reflect: true
   }
 });
 
-export { LeuChipBase as L };
+export { LeuChipBase };

package/dist/ChipGroup.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @slot - Place leu-chip-* elements inside this slot
+ * @cssproperty --leu-chip-group-gap - The gap between the chips
+ * @tagname leu-chip-group
+ */
+export class LeuChipGroup extends LitElement {
+    items: any[];
+    inverted: boolean;
+    headingLevel: number;
+    label: string;
+    get value(): any[];
+    /**
+     * 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(): string;
+    render(): import("lit-html").TemplateResult;
+}
+export namespace SELECTION_MODES {
+    let single: string;
+    let multiple: string;
+    let none: string;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=ChipGroup.d.ts.map

package/dist/ChipGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.d.ts","sourceRoot":"","sources":["ChipGroup.js"],"names":[],"mappings":"AA8BA;;;;GAIG;AACH;IAiBM,aAAkB;IAEpB,kBAAqB;IACrB,qBAAqB;IACrB,cAAe;IAajB,mBAEC;IAED;;;;;;OAMG;IACH,yBAMC;IACD,4CAeC;CACF;;;;;;2BAtG+B,KAAK"}

package/dist/ChipGroup.js

@@ -1,10 +1,22 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
-import { css, LitElement, html } from 'lit';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
+import { css, LitElement } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
 
-var css_248z = css`:host {
+var css_248z = css`.label {
+  margin: 0 0 0.5rem;
+  font: var(--leu-t-curve-35-black-font);
+  color: var(--leu-color-black-100);
+}
+
+:host([inverted]) .label {
+  color: var(--leu-color-black-0);
+}
+
+.group {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
+  gap: var(--leu-chip-group-gap, 0.5rem);
 }
 `;
 
@@ -18,13 +30,12 @@ const SELECTION_MODES = {
 
 /**
  * @slot - Place leu-chip-* elements inside this slot
+ * @cssproperty --leu-chip-group-gap - The gap between the chips
  * @tagname leu-chip-group
  */
 class LeuChipGroup extends LitElement {
   constructor() {
     super();
-
-    /** @internal */
     /** @internal */
     _defineProperty(this, "handleInput", e => {
       if (this.selectionMode === SELECTION_MODES.single) {
@@ -41,6 +52,11 @@ class LeuChipGroup extends LitElement {
       });
       this.items = items;
     });
+    this.inverted = false;
+    this.headingLevel = 2;
+    this.label = "";
+
+    /** @internal */
     this.items = [];
   }
   connectedCallback() {
@@ -54,20 +70,58 @@ class LeuChipGroup extends LitElement {
   get value() {
     return this.items.filter(i => i.selected).map(i => i.value);
   }
+
+  /**
+   * 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}`;
+  }
   render() {
-    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+    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`
+      ${this.label ? html`<${unsafeStatic(hTag)} class="label">
+            <span class="label">${this.label}</span>
+          </${unsafeStatic(hTag)}>` : ""}
+      <slot
+        class="group"
+        part="group"
+        @slotchange=${this.handleSlotChange}
+      ></slot>
+    `;
   }
 }
 _defineProperty(LeuChipGroup, "styles", css_248z);
 _defineProperty(LeuChipGroup, "properties", {
+  inverted: {
+    type: Boolean,
+    reflect: true
+  },
   selectionMode: {
     type: String,
     attribute: "selection-mode",
     reflect: true
+  },
+  headingLevel: {
+    type: Number,
+    attribute: "heading-level",
+    reflect: true
+  },
+  label: {
+    type: String,
+    reflect: true
   }
 });
-function defineChipGroupElements() {
-  defineElement("chip-group", LeuChipGroup);
-}
 
-export { LeuChipGroup, SELECTION_MODES, defineChipGroupElements };
+export { LeuChipGroup, SELECTION_MODES };

package/dist/ChipLink.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @slot - The content of the chip
+ * @tagname leu-chip-link
+ */
+export class LeuChipLink extends LeuChipBase {
+    size: string;
+    href: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export namespace SIZES {
+    let regular: string;
+    let large: string;
+}
+import { LeuChipBase } from './Chip.js';
+//# sourceMappingURL=ChipLink.d.ts.map

package/dist/ChipLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipLink.d.ts","sourceRoot":"","sources":["ChipLink.js"],"names":[],"mappings":"AASA;;;GAGG;AACH;IAII,aAAyB;IACzB,aAAc;IAEhB,+CAIC;CACF;;;;;4BAvB2B,WAAW"}

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 { LeuChipBase } from './Chip.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.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @slot - The content of the chip
+ * @tagname leu-chip-removable
+ * @fires remove - Dispatched when the user clicks on the chip
+ */
+export class LeuChipRemovable extends LeuChipBase {
+    /** @internal */
+    _removeIcon: import("lit-html").TemplateResult<1>;
+    handleClick(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+import { LeuChipBase } from './Chip.js';
+//# sourceMappingURL=ChipRemovable.d.ts.map

package/dist/ChipRemovable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipRemovable.d.ts","sourceRoot":"","sources":["ChipRemovable.js"],"names":[],"mappings":"AAKA;;;;GAIG;AACH;IAII,gBAAgB;IAChB,kDAAoC;IAEtC,oBAMC;IACD,+CAKC;CACF;4BA5B2B,WAAW"}

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 { LeuChipBase } from './Chip.js';
 import { I as Icon } from './icon-03e86700.js';
 
 /**
@@ -16,7 +16,7 @@ class LeuChipRemovable extends LeuChipBase {
     this._removeIcon = Icon("close", 16);
   }
   handleClick() {
-    const customEvent = new CustomEvent("remove", {
+    const customEvent = new CustomEvent("leu:remove", {
       bubble: true,
       composed: true
     });
@@ -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.d.ts

@@ -0,0 +1,22 @@
+/**
+ * A chip component that can be selected.
+ * @slot - The content of the chip
+ * @tagname leu-chip-selectable
+ */
+export class LeuChipSelectable extends LeuChipBase {
+    size: string;
+    variant: string;
+    selected: boolean;
+    handleClick(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export namespace SIZES {
+    let small: string;
+    let regular: string;
+}
+export namespace VARIANTS {
+    let toggle: string;
+    let radio: string;
+}
+import { LeuChipBase } from './Chip.js';
+//# sourceMappingURL=ChipSelectable.d.ts.map

package/dist/ChipSelectable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipSelectable.d.ts","sourceRoot":"","sources":["ChipSelectable.js"],"names":[],"mappings":"AAaA;;;;GAIG;AACH;IAGI,aAAyB;IACzB,gBAA8B;IAC9B,kBAAqB;IAKvB,oBAiBC;IACD,+CAQC;CACF;;;;;;;;;4BArD2B,WAAW"}