@statistikzh/leu 0.24.2 → 0.25.0

package/dist/ProgressBar.d.ts

@@ -1,29 +1,29 @@
-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/progress-bar/ProgressBar.d.ts
 /**
  * An indicator showing the completion progress of a task
  *
  * @tagname leu-progress-bar
  */
 declare class LeuProgressBar extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-        customElements?: CustomElementRegistry;
-        registry?: CustomElementRegistry;
-    };
-    /** Progress as a percentage from 0 to 100 */
-    value: number;
-    /** Label that is displayed below the progress bar */
-    label: string;
-    /** Whether the progress bar is in indeterminate state. */
-    indeterminate: boolean;
-    render(): lit_html.TemplateResult<1>;
+  static styles: any[];
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  /** Progress as a percentage from 0 to 100 */
+  value: number;
+  /** Label that is displayed below the progress bar */
+  label: string;
+  /** Whether the progress bar is in indeterminate state. */
+  indeterminate: boolean;
+  render(): lit_html0.TemplateResult<1>;
 }
-
-export { LeuProgressBar };
+//#endregion
+export { LeuProgressBar };

package/dist/ProgressBar.js

@@ -1,166 +1,3 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, nothing, html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-
-var css_248z = css`/* :host {
-  --progress-bar-font-regular: var(--leu-font-family-regular);
-  --progress-bar-font-black: var(--leu-font-family-black);
-
-  font-family: var(--progress-bar-font-regular);
-} */
-
-.progress {
-  --_height: 0.5rem;
-  --_border-radius: 0.25rem;
-  --_progress-color: var(--leu-color-func-cyan);
-  --_indeterminate-animation: indeterminate 2s ease infinite;
-  --_indeterminate-width: 25%;
-
-  -webkit-appearance: none;
-
-     -moz-appearance: none;
-
-          appearance: none;
-  display: block;
-  width: 100%;
-  height: 0.5rem;
-  height: var(--_height);
-
-  background-color: var(--leu-color-black-transp-10);
-  border: none;
-  border-radius: 0.25rem;
-  border-radius: var(--_border-radius);
-  margin-bottom: 0.5rem;
-}
-
-.progress::-webkit-progress-bar {
-  background: transparent;
-  border-radius: var(--_border-radius);
-}
-
-/* Progress bar */
-
-.progress::-moz-progress-bar {
-  background-color: var(--_progress-color);
-  border-radius: var(--_border-radius);
-}
-
-.progress::-webkit-progress-value {
-  background-color: var(--_progress-color);
-  border-radius: var(--_border-radius);
-}
-
-/* Indeterminate state */
-
-.progress:indeterminate::-moz-progress-bar {
-  width: var(--_indeterminate-width);
-  animation: var(--_indeterminate-animation);
-}
-
-/* Safari */
-
-.progress:indeterminate::-webkit-progress-value {
-  display: block;
-  width: var(--_indeterminate-width);
-  animation: var(--_indeterminate-animation);
-}
-
-/* Chrome */
-
-.progress:indeterminate::before {
-  content: "";
-  display: block;
-  width: var(--_indeterminate-width);
-  height: var(--_height);
-  background-color: var(--_progress-color);
-  border-radius: var(--_border-radius);
-  animation: var(--_indeterminate-animation);
-}
-
-@keyframes indeterminate {
-  0% {
-    margin-left: 0%;
-  }
-
-  50% {
-    margin-left: 75%;
-  }
-
-  100% {
-    margin-left: 0%;
-  }
-}
-
-/* Info section (text label and value) */
-
-.info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-}
-
-.label,
-.value {
-  font: var(--leu-t-tiny-regular-font);
-  color: var(--leu-color-black-60);
-}
-
-.value {
-  /* margin-left: auto; */
-}
-`;
-
-/**
- * An indicator showing the completion progress of a task
- *
- * @tagname leu-progress-bar
- */
-class LeuProgressBar extends LeuElement {
-    constructor() {
-        super(...arguments);
-        /** Progress as a percentage from 0 to 100 */
-        this.value = 0;
-        /** Label that is displayed below the progress bar */
-        this.label = "";
-        /** Whether the progress bar is in indeterminate state. */
-        this.indeterminate = false;
-    }
-    render() {
-        return html `
-      <progress
-        class="progress"
-        max=${ifDefined(!this.indeterminate ? 100 : undefined)}
-        value=${ifDefined(!this.indeterminate ? this.value : undefined)}
-        id="progress"
-      ></progress>
-      <div class="info">
-        ${this.label
-            ? html `<label class="label" for="progress">${this.label}</label>`
-            : html `<div class="label label--placeholder"></div>`}
-        ${this.indeterminate
-            ? nothing
-            : html `<span class="value">${Math.round(this.value)}&#8239;%</span>`}
-      </div>
-    `;
-    }
-}
-LeuProgressBar.styles = [LeuElement.styles, css_248z];
-LeuProgressBar.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__decorate([
-    property({ type: Number, reflect: true })
-], LeuProgressBar.prototype, "value", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuProgressBar.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuProgressBar.prototype, "indeterminate", void 0);
-
+import "./LeuElement-B7NJzWwP.js";
+import { t as LeuProgressBar } from "./ProgressBar-CzN3fqiH.js";
 export { LeuProgressBar };

package/dist/Radio-CX8aCsff.js

@@ -0,0 +1,160 @@
+import { t as LeuElement } from "./LeuElement-B7NJzWwP.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/radio/radio.css?inline
+var radio_default = css`:host {
+  --radio-color: var(--leu-color-black-40);
+  --radio-color-disabled: var(--leu-color-black-20);
+  --radio-color-focus: var(--leu-color-func-cyan);
+
+  --radio-label-color: var(--leu-color-black-100);
+  --radio-label-color-disabled: var(--radio-color-disabled);
+
+  --radio-font-regular: var(--leu-font-family-regular);
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+
+  font-family: var(--radio-font-regular);
+}
+
+.radio {
+  --_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(--radio-color);
+  border-radius: 50%;
+
+  flex: 1 0 1.5rem;
+
+  flex: 1 0 var(--_length);
+
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  place-items: center;
+}
+
+.radio::before {
+  content: "";
+  width: 0.75rem;
+  height: 0.75rem;
+
+  border-radius: 50%;
+  background-color: var(--radio-color);
+
+  transform: scale(0);
+}
+
+.radio:checked::before {
+  transform: scale(1);
+}
+
+.radio:checked {
+  --radio-color: var(--radio-color-focus);
+}
+
+.radio:hover, .radio:focus {
+  --radio-color: var(--radio-color-focus);
+}
+
+.radio:focus-visible {
+  outline: 2px solid var(--radio-color-focus);
+  outline-offset: 2px;
+}
+
+.radio:disabled {
+  --radio-color: var(--radio-color-disabled);
+  cursor: not-allowed;
+}
+
+.label {
+  cursor: pointer;
+
+  color: var(--radio-label-color);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.radio:disabled + .label {
+  --radio-label-color: var(--radio-label-color-disabled);
+  cursor: not-allowed;
+}
+`;
+//#endregion
+//#region src/components/radio/Radio.ts
+/**
+* @tagname leu-radio
+*/
+var LeuRadio = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.disabled = false;
+		this.value = "";
+		this.name = "";
+	}
+	static {
+		this.styles = [LeuElement.styles, radio_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	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=${`radio-${this.name}`}
+        class="radio"
+        type="radio"
+        name="${this.name}"
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        .checked=${this.checked}
+        ?disabled=${this.disabled}
+        .value=${this.value ?? ""}
+      />
+      <label for=${`radio-${this.name}`} class="label"><slot></slot></label>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuRadio.prototype, "checked", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuRadio.prototype, "disabled", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuRadio.prototype, "value", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuRadio.prototype, "name", void 0);
+//#endregion
+export { LeuRadio as t };

package/dist/Radio.d.ts

@@ -1,28 +1,28 @@
-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/radio/Radio.d.ts
 /**
  * @tagname leu-radio
  */
 declare class LeuRadio extends LeuElement {
-    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>;
+  static styles: any[];
+  /** @internal */
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  checked: boolean;
+  disabled: boolean;
+  value: string;
+  name: string;
+  private handleChange;
+  private handleInput;
+  render(): lit_html0.TemplateResult<1>;
 }
-
-export { LeuRadio };
+//#endregion
+export { LeuRadio };

package/dist/Radio.js

@@ -1,152 +1,3 @@
-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';
-
-var css_248z = css`:host {
-  --radio-color: var(--leu-color-black-40);
-  --radio-color-disabled: var(--leu-color-black-20);
-  --radio-color-focus: var(--leu-color-func-cyan);
-
-  --radio-label-color: var(--leu-color-black-100);
-  --radio-label-color-disabled: var(--radio-color-disabled);
-
-  --radio-font-regular: var(--leu-font-family-regular);
-
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-
-  font-family: var(--radio-font-regular);
-}
-
-.radio {
-  --_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(--radio-color);
-  border-radius: 50%;
-
-  flex: 1 0 1.5rem;
-
-  flex: 1 0 var(--_length);
-
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  place-items: center;
-}
-
-.radio::before {
-  content: "";
-  width: 0.75rem;
-  height: 0.75rem;
-
-  border-radius: 50%;
-  background-color: var(--radio-color);
-
-  transform: scale(0);
-}
-
-.radio:checked::before {
-  transform: scale(1);
-}
-
-.radio:checked {
-  --radio-color: var(--radio-color-focus);
-}
-
-.radio:hover, .radio:focus {
-  --radio-color: var(--radio-color-focus);
-}
-
-.radio:focus-visible {
-  outline: 2px solid var(--radio-color-focus);
-  outline-offset: 2px;
-}
-
-.radio:disabled {
-  --radio-color: var(--radio-color-disabled);
-  cursor: not-allowed;
-}
-
-.label {
-  cursor: pointer;
-
-  color: var(--radio-label-color);
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.radio:disabled + .label {
-  --radio-label-color: var(--radio-label-color-disabled);
-  cursor: not-allowed;
-}
-`;
-
-/**
- * @tagname leu-radio
- */
-class LeuRadio 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=${`radio-${this.name}`}
-        class="radio"
-        type="radio"
-        name="${this.name}"
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        .checked=${this.checked}
-        ?disabled=${this.disabled}
-        .value=${this.value ?? ""}
-      />
-      <label for=${`radio-${this.name}`} class="label"><slot></slot></label>
-    `;
-    }
-}
-LeuRadio.styles = [LeuElement.styles, css_248z];
-/** @internal */
-LeuRadio.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuRadio.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuRadio.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuRadio.prototype, "value", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuRadio.prototype, "name", void 0);
-
+import "./LeuElement-B7NJzWwP.js";
+import { t as LeuRadio } from "./Radio-CX8aCsff.js";
 export { LeuRadio };