@statistikzh/leu 0.0.2

package/dist/Chip-60af1402.js

@@ -0,0 +1,162 @@
+import { css, LitElement } from 'lit';
+
+var css_248z = css`:host,
+:host *,
+: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-selected: var(--leu-color-black-100);
+  --chip-background-color-selected-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-selected: var(--leu-color-black-0);
+
+  --chip-radio-border-default: var(--leu-color-black-transp-40);
+  --chip-radio-border-selected: var(--leu-color-black-0);
+  --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-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(--chip-font-regular);
+}
+
+: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-selected: var(--leu-color-black-0);
+}
+
+:host([selected]) {
+  --chip-background-color: var(--chip-background-color-selected);
+  --chip-color: var(--chip-color-selected);
+  --chip-radio-border: var(--chip-radio-border-selected);
+  --chip-radio-background: var(--chip-radio-background-selected);
+}
+
+.button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  border-radius: 1rem;
+  background-color: var(--chip-background-color);
+  padding: 0.5rem 1rem;
+
+  color: var(--chip-color);
+  font-size: 0.875rem;
+  line-height: 1rem;
+
+  cursor: pointer;
+
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.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([selected]) .button:hover,
+:host([selected]) .button:focus-visible {
+  --chip-background-color: var(--chip-background-color-selected-hover);
+  --chip-color: var(--chip-color-selected);
+}
+
+: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.5625rem 0.75rem 0.4375rem;
+
+  font-size: 0.75rem;
+  line-height: 1;
+}
+
+:host([variant="radio"]) .button::before {
+  content: "";
+  width: 1rem;
+  height: 1rem;
+  background-color: var(--chip-radio-background);
+  border: 2px solid var(--chip-radio-border);
+  border-radius: 50%;
+}
+
+:host([variant="radio"][selected]) .button::before {
+  border-width: 3px;
+}
+
+.label {
+  position: relative;
+  top: -0.0625rem;
+}
+
+.icon svg {
+  display: block;
+}
+`;
+
+/* Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=21161-184433&mode=design&t=Kjo5VDiqivihn8dh-11 */
+
+class LeuChipBase extends LitElement {
+  static styles = css_248z
+
+  /** @internal */
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    inverted: { type: Boolean },
+  }
+
+  constructor() {
+    super();
+
+    this.inverted = false;
+  }
+}
+
+export { LeuChipBase as L };

package/dist/ChipGroup.js

@@ -0,0 +1,79 @@
+import { css, LitElement, html } from 'lit';
+import { d as defineElement } from './defineElement-47d4f665.js';
+
+var css_248z = css`:host {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+`;
+
+/* Figma https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=131766-248643&mode=design&t=Kjo5VDiqivihn8dh-11 */
+
+const SELECTION_MODES = {
+  single: "single",
+  multiple: "multiple",
+  none: "none",
+};
+
+/**
+ * @slot - Place leu-chip-* elements inside this slot
+ * @tagname leu-chip-group
+ */
+class LeuChipGroup extends LitElement {
+  static styles = css_248z
+
+  static properties = {
+    selectionMode: { type: String, attribute: "selection-mode" },
+  }
+
+  constructor() {
+    super();
+
+    /** @internal */
+    this.items = [];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.addEventListener("input", this.handleInput);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener("input", this.handleInput);
+  }
+
+  get value() {
+    return this.items.filter((i) => i.selected).map((i) => i.value)
+  }
+
+  /** @internal */
+  handleInput = (e) => {
+    if (this.selectionMode === SELECTION_MODES.single) {
+      this.items.forEach((item) => {
+        item.selected = item === e.target; // eslint-disable-line no-param-reassign
+      });
+    }
+  }
+
+  /** @internal */
+  handleSlotChange = (e) => {
+    const slot = e.target;
+    const items = slot.assignedElements({ flatten: true });
+
+    this.items = items;
+  }
+
+  render() {
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`
+  }
+}
+
+function defineChipGroupElements() {
+  defineElement("chip-group", LeuChipGroup);
+}
+
+export { LeuChipGroup, SELECTION_MODES, defineChipGroupElements };

package/dist/ChipLink.js

@@ -0,0 +1,46 @@
+import { html } from 'lit';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { L as LeuChipBase } from './Chip-60af1402.js';
+
+const SIZES = {
+  regular: "regular",
+  large: "large",
+};
+
+/**
+ * @slot - The content of the chip
+ * @tagname leu-chip-link
+ */
+class LeuChipLink extends LeuChipBase {
+  static properties = {
+    ...LeuChipBase.properties,
+
+    /**
+     * The size of the chip
+     * @type {keyof typeof SIZES}
+     */
+    size: { type: String },
+
+    href: { type: String, reflect: true },
+  }
+
+  constructor() {
+    super();
+
+    this.inverted = false;
+    this.size = SIZES.regular;
+    this.href = "";
+  }
+
+  render() {
+    return html`<a href=${this.href} class="button">
+      <span class="label"><slot></slot></span>
+    </a>`
+  }
+}
+
+function defineChipLinkElements() {
+  defineElement("chip-link", LeuChipLink);
+}
+
+export { LeuChipLink, SIZES, defineChipLinkElements };

package/dist/ChipRemovable.js

@@ -0,0 +1,43 @@
+import { html } from 'lit';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { L as LeuChipBase } from './Chip-60af1402.js';
+import { I as Icon } from './icon-b68c7e1e.js';
+
+/**
+ * @slot - The content of the chip
+ * @tagname leu-chip-removable
+ * @fires remove - Dispatched when the user clicks on the chip
+ */
+class LeuChipRemovable extends LeuChipBase {
+  static properties = {
+    ...LeuChipBase.properties,
+  }
+
+  constructor() {
+    super();
+
+    /** @internal */
+    this._removeIcon = Icon("close", 16);
+  }
+
+  handleClick() {
+    const customEvent = new CustomEvent("remove", {
+      bubble: true,
+      composed: true,
+    });
+    this.dispatchEvent(customEvent);
+  }
+
+  render() {
+    return html`<button @click=${(e) => this.handleClick(e)} class="button">
+      <span class="label"><slot></slot></span>
+      <div class="icon">${this._removeIcon}</div>
+    </button>`
+  }
+}
+
+function defineChipRemovableElements() {
+  defineElement("chip-removable", LeuChipRemovable);
+}
+
+export { LeuChipRemovable, defineChipRemovableElements };

package/dist/ChipSelectable.js

@@ -0,0 +1,92 @@
+import { html } from 'lit';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { L as LeuChipBase } from './Chip-60af1402.js';
+
+const SIZES = {
+  small: "small",
+  regular: "regular",
+};
+
+const VARIANTS = {
+  default: "default",
+  radio: "radio",
+};
+
+/**
+ * A chip component that can be selected.
+ * @slot - The content of the chip
+ * @tagname leu-chip-selectable
+ */
+class LeuChipSelectable extends LeuChipBase {
+  static properties = {
+    ...LeuChipBase.properties,
+
+    /**
+     * The size of the chip. Not supported for radio variant.
+     * @type {keyof typeof SIZES}
+     * @default "regular"
+     */
+    size: { type: String },
+
+    /**
+     * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
+     * - `default`: The chip behaves like a toggle button.
+     * - `radio`: The chip behaves like a radio button.
+     *
+     * @type {keyof typeof VARIANTS}
+     * @default "default"
+     */
+    variant: { type: String },
+
+    selected: { type: Boolean, reflect: true },
+    value: { type: String },
+  }
+
+  constructor() {
+    super();
+    this.size = SIZES.regular;
+    this.variant = VARIANTS.toggle;
+    this.selected = false;
+
+    if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
+      console.warn("Small size has no effect on radio variant");
+    }
+  }
+
+  handleClick() {
+    let nextSelectedState = this.selected;
+
+    if (this.variant === VARIANTS.radio) {
+      nextSelectedState = true;
+    } else {
+      nextSelectedState = !this.selected;
+    }
+
+    if (nextSelectedState !== this.selected) {
+      this.selected = nextSelectedState;
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { selected: this.selected },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  }
+
+  render() {
+    return html`<button
+      @click=${(e) => this.handleClick(e)}
+      class="button"
+      aria-selected=${this.selected ? "true" : "false"}
+    >
+      <span class="label"><slot></slot></span>
+    </button>`
+  }
+}
+
+function defineChipSelectableElements() {
+  defineElement("chip-selectable", LeuChipSelectable);
+}
+
+export { LeuChipSelectable, SIZES, VARIANTS, defineChipSelectableElements };