@statistikzh/leu 0.24.2 → 0.26.0

package/dist/Checkbox.d.ts

@@ -1,32 +1,40 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as FormAssociatedMixinType } from "./FormAssociatedMixin-Cc74LjbC.js";
+import { t as LeuIcon } from "./Icon-Op80LrrO.js";
+import { PropertyValues } from "lit";
+import * as lit_html0 from "lit-html";
 
+//#region src/components/checkbox/Checkbox.d.ts
+declare const LeuCheckbox_base: (abstract new (...args: any[]) => FormAssociatedMixinType) & typeof LeuElement;
 /**
  * @tagname leu-checkbox
  */
-declare class LeuCheckbox extends LeuElement {
-    static dependencies: {
-        "leu-icon": typeof LeuIcon;
-    };
-    static styles: lit.CSSResultGroup[];
-    /** @internal */
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-        customElements?: CustomElementRegistry;
-        registry?: CustomElementRegistry;
-    };
-    checked: boolean;
-    disabled: boolean;
-    value: string;
-    name: string;
-    private handleChange;
-    private handleInput;
-    render(): lit_html.TemplateResult<1>;
+declare class LeuCheckbox extends LeuCheckbox_base {
+  static dependencies: {
+    "leu-icon": typeof LeuIcon;
+  };
+  static styles: any[];
+  /** @internal */
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  required: boolean;
+  defaultChecked: boolean;
+  protected _checked: boolean;
+  set checked(isChecked: boolean);
+  get checked(): boolean;
+  value: string;
+  willUpdate(changedProperties: PropertyValues<this>): void;
+  private handleChange;
+  private handleInput;
+  formResetCallback(): void;
+  setFormValue(): void;
+  render(): lit_html0.TemplateResult<1>;
 }
-
-export { LeuCheckbox };
+//#endregion
+export { LeuCheckbox };

package/dist/Checkbox.js

@@ -1,158 +1,5 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-import { LeuIcon } from './Icon.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(--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;
-  display: block;
-  top: 0;
-  left: 0;
-  color: var(--checkbox-tick-color);
-  pointer-events: none;
-}
-`;
-
-/**
- * @tagname leu-checkbox
- */
-class LeuCheckbox extends LeuElement {
-    constructor() {
-        super(...arguments);
-        this.checked = false;
-        this.disabled = false;
-        this.value = "";
-        this.name = "";
-    }
-    handleChange(event) {
-        this.checked = event.target.checked;
-        const customEvent = new CustomEvent(event.type, event);
-        this.dispatchEvent(customEvent);
-    }
-    handleInput(event) {
-        this.checked = event.target.checked;
-    }
-    render() {
-        return html `
-      <input
-        id=${`checkbox-${this.name}`}
-        class="checkbox"
-        type="checkbox"
-        name="${this.name}"
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        .checked=${this.checked}
-        ?disabled=${this.disabled}
-        .value=${this.value ?? ""}
-      />
-      <label for=${`checkbox-${this.name}`} class="label"><slot></slot></label>
-      <leu-icon class="icon" name="check"></leu-icon>
-    `;
-    }
-}
-LeuCheckbox.dependencies = {
-    "leu-icon": LeuIcon,
-};
-LeuCheckbox.styles = [LeuElement.styles, css_248z];
-/** @internal */
-LeuCheckbox.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuCheckbox.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuCheckbox.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuCheckbox.prototype, "value", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuCheckbox.prototype, "name", void 0);
-
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
+import { t as LeuCheckbox } from "./Checkbox-Dd1QLpfn.js";
 export { LeuCheckbox };

package/dist/CheckboxGroup-Bz2eWEFL.js

@@ -0,0 +1,81 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuCheckbox } from "./Checkbox-Dd1QLpfn.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+//#region src/components/checkbox/checkbox-group.css?inline
+var checkbox_group_default = css`:host {
+  --group-font-regular: var(--leu-font-family-regular);
+  --group-font-black: var(--leu-font-family-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;
+}
+`;
+//#endregion
+//#region src/components/checkbox/CheckboxGroup.ts
+/**
+*
+* @slot - Place the checkboxes inside the default slot.
+* @tagname leu-checkbox-group
+*/
+var LeuCheckboxGroup = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = "horizontal";
+		this.items = [];
+	}
+	static {
+		this.styles = [LeuElement.styles, checkbox_group_default];
+	}
+	get value() {
+		return this.items.filter((i) => i.checked).map((i) => i.value);
+	}
+	handleSlotChange() {
+		this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])")).filter((el) => el instanceof LeuCheckbox);
+	}
+	render() {
+		return html`
+      <fieldset class=${classMap({
+			fieldset: "true",
+			"fieldset--vertical": this.orientation === "vertical"
+		})}>
+        ${this.label ? html`<legend class="legend">${this.label}</legend>` : html``}
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </fieldset>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuCheckboxGroup.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuCheckboxGroup.prototype, "label", void 0);
+//#endregion
+export { LeuCheckboxGroup as t };

package/dist/CheckboxGroup.d.ts

@@ -1,26 +1,26 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import * as lit_html0 from "lit-html";
 
+//#region src/components/checkbox/CheckboxGroup.d.ts
 /**
  *
  * @slot - Place the checkboxes inside the default slot.
  * @tagname leu-checkbox-group
  */
 declare class LeuCheckboxGroup extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    /**
-     * Defines how the checkboxes should be aligned.
-     */
-    orientation: "horizontal" | "vertical";
-    /**
-     * The label of the checkbox group
-     */
-    label?: string;
-    private items;
-    get value(): string[];
-    private handleSlotChange;
-    render(): lit_html.TemplateResult<1>;
+  static styles: any[];
+  /**
+   * Defines how the checkboxes should be aligned.
+   */
+  orientation: "horizontal" | "vertical";
+  /**
+   * The label of the checkbox group
+   */
+  label?: string;
+  private items;
+  get value(): string[];
+  private handleSlotChange;
+  render(): lit_html0.TemplateResult<1>;
 }
-
-export { LeuCheckboxGroup };
+//#endregion
+export { LeuCheckboxGroup };

package/dist/CheckboxGroup.js

@@ -1,83 +1,6 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, html } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-import { LeuCheckbox } from './Checkbox.js';
-import './Icon.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(--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;
-}
-`;
-
-/**
- *
- * @slot - Place the checkboxes inside the default slot.
- * @tagname leu-checkbox-group
- */
-class LeuCheckboxGroup extends LeuElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Defines how the checkboxes should be aligned.
-         */
-        this.orientation = "horizontal";
-        this.items = [];
-    }
-    get value() {
-        return this.items.filter((i) => i.checked).map((i) => i.value);
-    }
-    handleSlotChange() {
-        this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])")).filter((el) => el instanceof LeuCheckbox);
-    }
-    render() {
-        const fieldsetClasses = {
-            fieldset: "true",
-            "fieldset--vertical": this.orientation === "vertical",
-        };
-        return html `
-      <fieldset class=${classMap(fieldsetClasses)}>
-        ${this.label
-            ? html `<legend class="legend">${this.label}</legend>`
-            : html ``}
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </fieldset>
-    `;
-    }
-}
-LeuCheckboxGroup.styles = [LeuElement.styles, css_248z];
-__decorate([
-    property({ type: String, reflect: true })
-], LeuCheckboxGroup.prototype, "orientation", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuCheckboxGroup.prototype, "label", void 0);
-
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
+import "./Checkbox-Dd1QLpfn.js";
+import { t as LeuCheckboxGroup } from "./CheckboxGroup-Bz2eWEFL.js";
 export { LeuCheckboxGroup };

package/dist/Chip-DLKM9P7v.d.ts

@@ -0,0 +1,18 @@
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+
+//#region src/components/chip/Chip.d.ts
+declare class LeuChipBase extends LeuElement {
+  static styles: any[];
+  /** @internal */
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  inverted: boolean;
+}
+//#endregion
+export { LeuChipBase as t };

package/dist/Chip-XAQIIsXq.js

@@ -0,0 +1,171 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { css } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/chip/chip.css?inline
+var chip_default = css`:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --chip-background-color-default: var(--leu-color-black-transp-10);
+  --chip-background-color-hover: var(--leu-color-black-transp-20);
+  --chip-background-color-checked: var(--leu-color-black-100);
+  --chip-background-color-checked-hover: var(--leu-color-black-transp-80);
+
+  --chip-color-default: var(--leu-color-black-transp-60);
+  --chip-color-hover: var(--leu-color-black-100);
+  --chip-color-checked: var(--leu-color-black-0);
+
+  --chip-radio-border-default: var(--leu-color-black-transp-40);
+  --chip-radio-border-checked: var(--leu-color-black-0);
+  --chip-radio-background-default: var(--leu-color-black-0);
+  --chip-radio-background-checked: var(--leu-color-func-cyan);
+
+  --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);
+
+  --leu-icon-size: 1rem;
+
+  font-family: var(--chip-font-regular);
+
+  /* Allow shrinking to achieve text truncation (ellipsis) */
+  min-width: 0;
+}
+
+:host([inverted]) {
+  --chip-background-color: var(--leu-color-black-transp-20);
+  --chip-background-color-hover: var(--leu-color-black-transp-40);
+
+  --chip-color-default: var(--leu-color-black-0);
+  --chip-color-hover: var(--leu-color-black-0);
+  --chip-color-checked: var(--leu-color-black-0);
+}
+
+:host([checked]) {
+  --chip-background-color: var(--chip-background-color-checked);
+  --chip-color: var(--chip-color-checked);
+  --chip-radio-border: var(--chip-radio-border-checked);
+  --chip-radio-background: var(--chip-radio-background-checked);
+}
+
+.button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  border-radius: 1rem;
+  background-color: var(--chip-background-color);
+  padding: 8px 1rem;
+
+  color: var(--chip-color);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1rem;
+
+  cursor: pointer;
+
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+
+  /* Allow shrinking to achieve text truncation (ellipsis) */
+  min-width: 0;
+  max-width: 100%;
+}
+
+.button:hover,
+.button:focus-visible {
+  --chip-background-color: var(--chip-background-color-hover);
+  --chip-color: var(--chip-color-hover);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+
+:host([href]) .button {
+  border-radius: 1.25rem;
+  padding: 0.5rem 1rem;
+
+  font-family: var(--chip-font-black);
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+:host([checked]) .button:hover,
+:host([checked]) .button:focus-visible {
+  --chip-background-color: var(--chip-background-color-checked-hover);
+  --chip-color: var(--chip-color-checked);
+}
+
+:host([href][size="large"]) .button {
+  border-radius: 1.5rem;
+  padding: 0.3125rem 1.5rem;
+
+  font-size: 2rem;
+  line-height: 2.375rem;
+}
+
+:host([size="small"]:not([variant="radio"])) .button {
+  padding: 0.3125rem 0.75rem;
+
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+
+:host([variant="radio"]) .button::before {
+  content: "";
+  flex: 0 0 1rem;
+  width: 1rem;
+  height: 1rem;
+  background-color: var(--chip-radio-background);
+  border: 2px solid var(--chip-radio-border);
+  border-radius: 50%;
+}
+
+:host([variant="radio"][checked]) .button::before {
+  border-width: 3px;
+}
+
+.label {
+  position: relative;
+  top: -0.0625rem;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+`;
+//#endregion
+//#region src/components/chip/Chip.ts
+var LeuChipBase = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.inverted = false;
+	}
+	static {
+		this.styles = [LeuElement.styles, chip_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuChipBase.prototype, "inverted", void 0);
+//#endregion
+export { LeuChipBase as t };

package/dist/Chip.d.ts

@@ -1,18 +1,2 @@
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-
-declare class LeuChipBase extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    /** @internal */
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-        customElements?: CustomElementRegistry;
-        registry?: CustomElementRegistry;
-    };
-    inverted: boolean;
-}
-
-export { LeuChipBase };
+import { t as LeuChipBase } from "./Chip-DLKM9P7v.js";
+export { LeuChipBase };