@statistikzh/leu 0.0.2 → 0.2.0

package/.github/workflows/release-please.yml

@@ -7,13 +7,32 @@ permissions:
   contents: write
   pull-requests: write
 
-name: release-please
+name: Create release and publish to npm
 
 jobs:
   release-please:
     runs-on: ubuntu-latest
     steps:
       - uses: google-github-actions/release-please-action@v3
+        id: release
         with:
           release-type: node
           package-name: "@statistikzh/leu"
+      # The logic below handles the npm publication:
+      - uses: actions/checkout@v4
+        # these if statements ensure that a publication only occurs when
+        # a new release is created:
+        if: ${{ steps.release.outputs.release_created }}
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm ci
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm run build
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        if: ${{ steps.release.outputs.release_created }}

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [0.2.0](https://github.com/statistikZH/leu/compare/v0.1.0...v0.2.0) (2023-11-28)
+
+
+### Features
+
+* **accordion:** implement accordion component ([b962d2c](https://github.com/statistikZH/leu/commit/b962d2c51aa17dbb909e8cbcb9ed0436d1b4b84d))
+* **input:** move focus into the input field after clearing the value ([#55](https://github.com/statistikZH/leu/issues/55)) ([ec92026](https://github.com/statistikZH/leu/commit/ec9202689ba2997570531c272162be1da54dc156))
+* **select:** add a more specific label if no options are available ([#57](https://github.com/statistikZH/leu/issues/57)) ([9ed62bf](https://github.com/statistikZH/leu/commit/9ed62bf5eb847c0814a92ff6066313eedf32b44a))
+* **select:** close the select element if a click happens outside of the element ([#58](https://github.com/statistikZH/leu/issues/58)) ([b2df185](https://github.com/statistikZH/leu/commit/b2df18537acc294552984eb539706400305564bb))
+
+
+### Bug Fixes
+
+* **input:** delegate focus to the actual input field ([ee9b21d](https://github.com/statistikZH/leu/commit/ee9b21de69322b1ebc822ab3a2f3bfb1a0ba6572))
+* **menu:** enforce styles of the hr element with important as they are part of the light dom ([d6d7a3f](https://github.com/statistikZH/leu/commit/d6d7a3f1a2182854747908cf142678f352e1e014))
+* **select:** actually set the filter input ref and use the correct attribute ([ee9b21d](https://github.com/statistikZH/leu/commit/ee9b21de69322b1ebc822ab3a2f3bfb1a0ba6572))
+* **theme:** fix a typo inside the hex notation ([82a6961](https://github.com/statistikZH/leu/commit/82a6961ae44c93826f6d97924a845f4d418b8f3b))
+
+## [0.1.0](https://github.com/statistikZH/leu/compare/v0.0.2...v0.1.0) (2023-11-15)
+
+
+### Features
+
+* use the transform class property babel plugin for the build ([e582230](https://github.com/statistikZH/leu/commit/e582230ac52bb74babd32cd2a83acea0a3cdd44e))
+
+
+### Bug Fixes
+
+* build all the available components ([f7c27c5](https://github.com/statistikZH/leu/commit/f7c27c53396c0f46f27285f6e1f529d43dc35588))
+
 ## [0.0.2](https://github.com/statistikZH/leu/compare/v0.0.1...v0.0.2) (2023-11-15)
 
 

package/README.md

@@ -20,12 +20,37 @@ npm i @statistikzh/leu
 
 ## Usage
 
+In order for the components to work, you need to load the theme styles and the font definitions globally.
+The theme file is part of the package (`dist/theme.css`).
+The fonts on the other hand have to be licensed and are therefore not included in the package.
+
+If you have an environment that resolves bare module imports, you can use the library like this:
+
+```html
+<link rel="stylesheet" href="@statistikzh/leu/theme.css" />
+<script type="module">
+  import "@statistikzh/leu/leu-input.js"
+</script>
+
+<leu-input></leu-input>
+```
+
+### CDN
+
+Browsers can't resolve bare module imports without import maps. But we can use a CDN to resolve the imports for us.
+This is useful if you're just using plain HTML and JavaScript without any build or transformation steps.
+Also this is applicable in an environment like [Observable](https://observablehq.com).
+
 ```html
+<link
+  rel="stylesheet"
+  href="https://esm.run/@statistikzh/leu@0.1/dist/theme.css"
+/>
 <script type="module">
-  import "@statistikzh/leu/leu-radio.js"
+  import "https://esm.run/@statistikzh/leu@0.1/dist/leu-input.js"
 </script>
 
-<leu-radio></leu-radio>
+<leu-input></leu-input>
 ```
 
 ## Linting and formatting

package/babel.config.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-transform-class-properties"]
+}

package/dist/{Button-83c6df93.js → Button.js}

@@ -1,7 +1,7 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
 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';
+import { I as Icon } from './icon-03e86700.js';
 
 var css_248z = css`:host {
   display: inline-block;
@@ -266,13 +266,10 @@ 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);
 
@@ -280,32 +277,6 @@ 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} */
@@ -339,41 +310,33 @@ class LeuButton extends LitElement {
      */
     this.expanded = undefined;
   }
-
   getIconSize() {
-    return this.size === "small" || this.variant === "ghost" ? 16 : 24
+    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>`
+      </div>`;
     }
-
-    return nothing
+    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>`
+      </div>`;
     }
-
-    return nothing
+    return nothing;
   }
-
   renderExpandingIcon() {
     if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
       return html`<div class="icon-wrapper icon-wrapper--expanded">
         ${Icon("angleDropDown", 24)}
-      </div>`
+      </div>`;
     }
-
-    return nothing
+    return nothing;
   }
-
   render() {
     const cssClasses = {
       icon: !this.label && this.icon && !this.iconAfter,
@@ -381,7 +344,7 @@ class LeuButton extends LitElement {
       active: this.active,
       inverted: this.inverted,
       [this.variant]: true,
-      [this.size]: true,
+      [this.size]: true
     };
     return html`
       <button
@@ -392,12 +355,57 @@ class LeuButton extends LitElement {
         ${this.renderIconBefore()} ${this.label} ${this.renderIconAfter()}
         ${this.renderExpandingIcon()}
       </button>
-    `
+    `;
   }
 }
-
+_defineProperty(LeuButton, "styles", css_248z);
+/**
+ * @internal
+ */
+_defineProperty(LeuButton, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuButton, "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
+  }
+});
 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 };
+export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton, defineButtonElements };

package/dist/ButtonGroup.js

@@ -0,0 +1,75 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { css, LitElement, html } from 'lit';
+import { defineButtonElements } from './Button.js';
+import 'lit/directives/class-map.js';
+import './icon-03e86700.js';
+
+var css_248z = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+.group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+`;
+
+/**
+ * @tagname leu-button-group
+ */
+class LeuButtonGroup extends LitElement {
+  constructor() {
+    super();
+    /** @type {Array} */
+    this.items = [];
+    /** @type {string} */
+    this.value = null;
+  }
+  _setValue(newValue) {
+    this.value = newValue;
+    this.dispatchEvent(new CustomEvent("input", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        value: newValue
+      }
+    }));
+  }
+  render() {
+    return html`
+      <div role="menubar" class="group">
+        ${this.items.map(item => html`
+              <leu-button
+                label=${item}
+                variant=${this.value === item ? "primary" : "secondary"}
+                @click=${() => {
+      this._setValue(item);
+    }}
+                role="menuitemradio"
+                aria-checked=${this.value === item}
+              >
+              </leu-button>
+            `)}
+      </div>
+    `;
+  }
+}
+_defineProperty(LeuButtonGroup, "styles", css_248z);
+_defineProperty(LeuButtonGroup, "properties", {
+  items: {
+    type: Array,
+    reflect: true
+  },
+  value: {
+    type: String,
+    reflect: true
+  }
+});
+function defineButtonGroupElements() {
+  defineButtonElements();
+  defineElement("button-group", LeuButtonGroup);
+}
+
+export { LeuButtonGroup, defineButtonGroupElements };

package/dist/Checkbox.js

@@ -1,12 +1,45 @@
-import { LitElement, css, html } from 'lit';
-import { I as Icon } from './icon-b68c7e1e.js';
-import { d as defineElement } from './defineElement-47d4f665.js';
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { css, LitElement, html } from 'lit';
+import { I as Icon } from './icon-03e86700.js';
 
 /**
  * @tagname leu-checkbox
  */
 class LeuCheckbox extends LitElement {
-  static styles = css`
+  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>
+    `;
+  }
+}
+_defineProperty(LeuCheckbox, "styles", css`
     :host {
       --checkbox-color: var(--leu-color-black-40);
       --checkbox-color-disabled: var(--leu-color-black-20);
@@ -83,60 +116,30 @@ class LeuCheckbox extends LitElement {
       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");
+  `);
+_defineProperty(LeuCheckbox, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuCheckbox, "properties", {
+  checked: {
+    type: Boolean,
+    reflect: true
+  },
+  disabled: {
+    type: Boolean,
+    reflect: true
+  },
+  identifier: {
+    type: String
+  },
+  value: {
+    type: String
+  },
+  name: {
+    type: String
   }
-
-  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);
 }

package/dist/CheckboxGroup.js

@@ -1,12 +1,39 @@
-import { LitElement, css, html } from 'lit';
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { css, LitElement, 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`
+  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>
+    `;
+  }
+}
+_defineProperty(LeuCheckboxGroup, "styles", css`
     :host {
       --group-font-regular: var(--leu-font-regular);
       --group-font-black: var(--leu-font-black);
@@ -36,45 +63,12 @@ class LeuCheckboxGroup extends LitElement {
 
       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])")];
+  `);
+_defineProperty(LeuCheckboxGroup, "properties", {
+  orientation: {
+    type: String
   }
-
-  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);
 }

package/dist/{Chip-60af1402.js → Chip-389013ff.js}

@@ -1,3 +1,4 @@
+import { _ as _defineProperty } from './defineElement-ba770aed.js';
 import { css, LitElement } from 'lit';
 
 var css_248z = css`:host,
@@ -140,23 +141,21 @@ var css_248z = css`:host,
 /* 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;
   }
 }
+_defineProperty(LeuChipBase, "styles", css_248z);
+/** @internal */
+_defineProperty(LeuChipBase, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuChipBase, "properties", {
+  inverted: {
+    type: Boolean
+  }
+});
 
 export { LeuChipBase as L };