@statistikzh/leu 0.0.2

package/dist/Button-83c6df93.js

@@ -0,0 +1,403 @@
+import { css, LitElement, html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { I as Icon } from './icon-b68c7e1e.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+
+var css_248z = css`:host {
+  display: inline-block;
+}
+
+button {
+  font-family: var(--leu-font-black);
+  text-align: center;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  transition: background 0.1s ease;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+}
+
+button.round {
+  border-radius: 50%;
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
+button:focus-visible {
+  border: 1px solid var(--leu-color-black-0);
+  outline: 2px solid var(--leu-color-func-cyan);
+}
+
+button.inverted:focus-visible {
+  border: 1px solid var(--leu-color-black-100);
+  outline: 2px solid var(--leu-color-black-0);
+}
+
+:host([fluid]) button {
+  width: 100%;
+  justify-content: center;
+}
+
+/* size - normal */
+
+button.normal {
+  padding: 12px 24px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+button.normal.icon {
+  padding: 12px;
+}
+
+/* size - small */
+
+button.small {
+  padding: 6px 24px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+button.small.icon {
+  padding: 8px;
+}
+
+/* primary */
+
+button.primary {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-100);
+}
+
+button.primary:hover {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-transp-80);
+}
+
+button.primary.active {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-100);
+}
+
+button.primary:disabled {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-transp-20);
+}
+
+/* secondary */
+
+button.secondary {
+  color: var(--leu-color-black-transp-60);
+  background: var(--leu-color-black-transp-10);
+}
+
+button.secondary:hover {
+  color: var(--leu-color-black-100);
+  background: var(--leu-color-black-transp-20);
+}
+
+button.secondary.active {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-100);
+}
+
+button.secondary:disabled {
+  color: var(--leu-color-black-transp-20);
+  background: var(--leu-color-black-transp-5);
+}
+
+/* ghost */
+
+button.ghost {
+  background: transparent;
+  padding: 0 0.5rem;
+  color: var(--leu-color-black-60);
+  font-family: var(--leu-font-regular);
+}
+
+button.ghost:hover {
+  color: var(--leu-color-black-100);
+}
+
+button.ghost.active {
+  color: var(--leu-color-black-100);
+}
+
+button.ghost:disabled {
+  color: var(--leu-color-black-20);
+}
+
+/* primary + inverted */
+
+button.primary.inverted {
+  color: var(--leu-color-black-100);
+  background: var(--leu-color-black-0);
+}
+
+button.primary.inverted:hover {
+  color: var(--leu-color-black-100);
+  background: var(--leu-color-white-transp-70);
+}
+
+button.primary.inverted.active {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-100);
+}
+
+button.primary.inverted:disabled {
+  color: var(--leu-color-black-40);
+  background: var(--leu-color-white-transp-70);
+}
+
+/* secondary + inverted */
+
+button.secondary.inverted {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-transp-20);
+}
+
+button.secondary.inverted:hover {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-transp-40);
+}
+
+button.secondary.inverted.active {
+  color: var(--leu-color-black-100);
+  background: var(--leu-color-black-0);
+}
+
+button.secondary.inverted:disabled {
+  color: var(--leu-color-white-transp-70);
+  background: var(--leu-color-black-transp-10);
+}
+
+/* ghost + inverted */
+
+button.ghost.inverted {
+  color: var(--leu-color-black-0);
+}
+
+button.ghost.inverted:hover {
+  color: var(--leu-color-white-transp-70);
+}
+
+button.ghost.inverted.active {
+  color: var(--leu-color-black-0);
+}
+
+button.ghost.inverted:disabled {
+  color: var(--leu-color-black-20);
+}
+
+/* icon-wrapper */
+
+.icon-wrapper svg {
+  display: block;
+}
+
+.ghost .icon-wrapper--before, .ghost .icon-wrapper--after {
+  padding: 0.5rem;
+  border-radius: 50%;
+  background: var(--leu-color-black-transp-10);
+}
+
+.ghost.active .icon-wrapper--before, .ghost.active .icon-wrapper--after {
+  background: var(--leu-color-black-100);
+  color: var(--leu-color-black-0);
+}
+
+.ghost:disabled .icon-wrapper--before {
+  background: var(--leu-color-black-transp-5);
+}
+
+.ghost:disabled .icon-wrapper--after {
+  background: var(--leu-color-black-transp-5);
+}
+
+/* inverted */
+
+.ghost.inverted .icon-wrapper--before, .ghost.inverted .icon-wrapper--after {
+  background: var(--leu-color-black-transp-20);
+}
+
+.ghost.inverted:hover .icon-wrapper--before, .ghost.inverted:hover .icon-wrapper--after {
+  background: var(--leu-color-black-transp-40);
+  color: var(--leu-color-black-0);
+}
+
+.ghost.inverted:disabled .icon-wrapper--before {
+  background: var(--leu-color-black-transp-20);
+  color: var(--leu-color-white-transp-70);
+}
+
+.ghost.inverted:disabled .icon-wrapper--after {
+  background: var(--leu-color-black-transp-20);
+  color: var(--leu-color-white-transp-70);
+}
+
+.ghost.active.inverted .icon-wrapper--before, .ghost.active.inverted .icon-wrapper--after {
+  background: var(--leu-color-black-0);
+  color: var(--leu-color-black-100);
+}
+
+/* Expanded icon */
+
+.icon-wrapper--expanded {
+  transition: transform 0.1s ease;
+}
+
+:host([expanded="open"]) .icon-wrapper--expanded {
+  transform: rotate(180deg);
+}
+`;
+
+/*
+Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
+Live Demo: zh.ch
+*/
+
+const BUTTON_VARIANTS = ["primary", "secondary", "ghost"];
+Object.freeze(BUTTON_VARIANTS);
+
+const BUTTON_SIZES = ["normal", "small"];
+Object.freeze(BUTTON_SIZES);
+
+const BUTTON_TYPES = ["button", "submit", "reset"];
+Object.freeze(BUTTON_TYPES);
+
+const BUTTON_EXPANDED_OPTIONS = ["open", "closed"];
+Object.freeze(BUTTON_EXPANDED_OPTIONS);
+
+/**
+ * @tagname leu-button
+ */
+class LeuButton extends LitElement {
+  static styles = css_248z
+
+  /**
+   * @internal
+   */
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    label: { type: String },
+    icon: { type: String },
+    iconAfter: { type: String },
+    size: { type: String },
+    variant: { type: String },
+    type: { type: String },
+
+    disabled: { type: Boolean },
+    round: { type: Boolean },
+    active: { type: Boolean },
+    inverted: { type: Boolean },
+    expanded: { type: String },
+    fluid: { type: Boolean },
+  }
+
+  constructor() {
+    super();
+    /** @type {string} */
+    this.label = null;
+    /** @type {string} */
+    this.icon = null;
+    /** @type {string} - Only taken into account if Label and no Icon is set */
+    this.iconAfter = null;
+    /** @type {string} */
+    this.size = "normal";
+    /** @type {string} */
+    this.variant = "primary";
+    /** @type {string} */
+    this.type = "button";
+
+    /** @type {boolean} */
+    this.disabled = false;
+    /** @type {boolean} - Only taken into account if no Label and an Icon is set */
+    this.round = false;
+    /** @type {boolean} */
+    this.active = false;
+    /** @type {boolean} - will be used on dark Background */
+    this.inverted = false;
+
+    /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
+    this.fluid = false;
+
+    /**
+     * Only taken into account if variant is "ghost"
+     * @type {("open" | "closed" | undefined)}
+     */
+    this.expanded = undefined;
+  }
+
+  getIconSize() {
+    return this.size === "small" || this.variant === "ghost" ? 16 : 24
+  }
+
+  renderIconBefore() {
+    if (this.icon) {
+      return html`<div class="icon-wrapper icon-wrapper--before">
+        ${Icon(this.icon, this.getIconSize())}
+      </div>`
+    }
+
+    return nothing
+  }
+
+  renderIconAfter() {
+    if (this.iconAfter && this.label && !this.icon) {
+      return html`<div class="icon-wrapper icon-wrapper--after">
+        ${Icon(this.iconAfter, this.getIconSize())}
+      </div>`
+    }
+
+    return nothing
+  }
+
+  renderExpandingIcon() {
+    if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
+      return html`<div class="icon-wrapper icon-wrapper--expanded">
+        ${Icon("angleDropDown", 24)}
+      </div>`
+    }
+
+    return nothing
+  }
+
+  render() {
+    const cssClasses = {
+      icon: !this.label && this.icon && !this.iconAfter,
+      round: !this.label && this.icon && !this.iconAfter && this.round,
+      active: this.active,
+      inverted: this.inverted,
+      [this.variant]: true,
+      [this.size]: true,
+    };
+    return html`
+      <button
+        class=${classMap(cssClasses)}
+        ?disabled=${this.disabled}
+        type=${this.type}
+      >
+        ${this.renderIconBefore()} ${this.label} ${this.renderIconAfter()}
+        ${this.renderExpandingIcon()}
+      </button>
+    `
+  }
+}
+
+function defineButtonElements() {
+  defineElement("button", LeuButton);
+}
+
+export { BUTTON_VARIANTS as B, LeuButton as L, BUTTON_SIZES as a, BUTTON_TYPES as b, BUTTON_EXPANDED_OPTIONS as c, defineButtonElements as d };

package/dist/Checkbox.js

@@ -0,0 +1,144 @@
+import { LitElement, css, html } from 'lit';
+import { I as Icon } from './icon-b68c7e1e.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+
+/**
+ * @tagname leu-checkbox
+ */
+class LeuCheckbox extends LitElement {
+  static 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;
+    }
+  `
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    checked: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    identifier: { type: String },
+    value: { type: String },
+    name: { type: String },
+  }
+
+  constructor() {
+    super();
+    this.checked = false;
+    this.disabled = false;
+    this.tabIndex = 0;
+
+    this.checkIcon = Icon("check");
+  }
+
+  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=${this.identifier}
+        class="checkbox"
+        type="checkbox"
+        name="${this.name}"
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        .checked=${this.checked}
+        ?disabled=${this.disabled}
+        .value=${this.value}
+      />
+      <label for=${this.identifier} class="label"><slot></slot></label>
+      <div class="icon">${this.checkIcon}</div>
+    `
+  }
+}
+
+function defineCheckboxElements() {
+  defineElement("checkbox", LeuCheckbox);
+}
+
+export { LeuCheckbox, defineCheckboxElements };

package/dist/CheckboxGroup.js

@@ -0,0 +1,82 @@
+import { LitElement, css, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+
+/**
+ * @tagname leu-checkbox-group
+ */
+class LeuCheckboxGroup extends LitElement {
+  static 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;
+    }
+  `
+
+  static properties = {
+    orientation: { type: String },
+  }
+
+  constructor() {
+    super();
+    this.orientation = "HORIZONTAL";
+    this.items = [];
+  }
+
+  get value() {
+    return this.items.filter((i) => i.checked).map((i) => i.value)
+  }
+
+  handleSlotChange() {
+    this.handleItems();
+  }
+
+  handleItems() {
+    this.items = [...this.querySelectorAll(":scope > *:not([slot])")];
+  }
+
+  render() {
+    const fieldsetClasses = {
+      fieldset: "true",
+      "fieldset--vertical": this.orientation === "VERTICAL",
+    };
+
+    return html`
+      <fieldset class=${classMap(fieldsetClasses)}>
+        <legend class="legend"><slot name="legend"></slot></legend>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </fieldset>
+    `
+  }
+}
+
+function defineCheckboxGroupElements() {
+  defineElement("checkbox-group", LeuCheckboxGroup);
+}
+
+export { LeuCheckboxGroup, defineCheckboxGroupElements };