@statistikzh/leu 0.4.0 → 0.5.0

package/.storybook/preview.js

@@ -1,7 +1,7 @@
 /** @type { import('@storybook/web-components').Preview } */
 
 import { setCustomElementsManifest } from "@storybook/web-components"
-import customElemenents from "../custom-elements.json"
+import customElemenents from "../dist/custom-elements.json"
 
 setCustomElementsManifest(customElemenents)
 
@@ -11,7 +11,6 @@ const preview = {
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/i,
       },
     },
     viewport: {

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [0.5.0](https://github.com/statistikZH/leu/compare/v0.4.0...v0.5.0) (2024-05-02)
+
+
+### Features
+
+* **button:** reflect aria-checked, aria-selected and role ([8e11d3e](https://github.com/statistikZH/leu/commit/8e11d3ea9c77dc27582dfca3b7f240e184b91316))
+* **chip-group:** add optional label to the chip group ([03cc159](https://github.com/statistikZH/leu/commit/03cc159a9edfb0b710572f4b88aa3b3b52000e80))
+* **dropdown:** close dropdown with a click outside the element or with pressing escape ([#146](https://github.com/statistikZH/leu/issues/146)) ([8b07146](https://github.com/statistikZH/leu/commit/8b071467b76c3e4b502e7daf28d432f722736ad9))
+* export type declaration files and add type checking ([#155](https://github.com/statistikZH/leu/issues/155)) ([781ff9a](https://github.com/statistikZH/leu/commit/781ff9a865e52d8076df12e198d9a173202b352d))
+* **input:** add step attribute that will be reflected to the native input element ([59aa303](https://github.com/statistikZH/leu/commit/59aa30352b77d0f46c9e1f3b688bbf556c9b592b))
+* **scroll-top:** implement scroll-top component ([07c670c](https://github.com/statistikZH/leu/commit/07c670c173719398d1e0a04345a1c2a6d4f3a5e4))
+* **theme:** define custom properties for all font styles and curves ([#142](https://github.com/statistikZH/leu/issues/142)) ([fadafde](https://github.com/statistikZH/leu/commit/fadafde3e2c4a8f0607ad08624515c907920ce9d))
+* **visually-hidden:** implement a utility component to visually hide content ([98143c6](https://github.com/statistikZH/leu/commit/98143c69523d17164cbb5b2d71879193cf442219))
+
+
+### Bug Fixes
+
+* **chip:** prefix custom event according to the event naming guidelines ([4d3709c](https://github.com/statistikZH/leu/commit/4d3709c6b0a06c5be0daf2f6df54feed5f7e6ce4))
+* **chip:** truncate text instead of wrapping inside the chip ([03cc159](https://github.com/statistikZH/leu/commit/03cc159a9edfb0b710572f4b88aa3b3b52000e80))
+* **chip:** use correct aria attribute to represent the state of the chip ([4d3709c](https://github.com/statistikZH/leu/commit/4d3709c6b0a06c5be0daf2f6df54feed5f7e6ce4))
+* **input:** avoid empty strings to be converted to the value zero ([59aa303](https://github.com/statistikZH/leu/commit/59aa30352b77d0f46c9e1f3b688bbf556c9b592b))
+* **pagination:** add a visually hidden label for the page input field ([98143c6](https://github.com/statistikZH/leu/commit/98143c69523d17164cbb5b2d71879193cf442219))
+* **pagination:** define visually hidden labels for the buttons ([201464b](https://github.com/statistikZH/leu/commit/201464b24f997657029275a763b61ef07c8e26d1))
+
 ## [0.4.0](https://github.com/statistikZH/leu/compare/v0.3.0...v0.4.0) (2024-02-21)
 
 

package/custom-elements-manifest.config.js

@@ -0,0 +1,46 @@
+import { customElementJetBrainsPlugin } from "custom-element-jet-brains-integration"
+import { customElementVsCodePlugin } from "custom-element-vs-code-integration"
+import { customElementVuejsPlugin } from "custom-element-vuejs-integration"
+
+export default {
+  globs: ["src/components/*/*.js"],
+  exclude: ["src/**/test/**/*.js", "src/**/stories/**/*.js"],
+  outdir: "./dist",
+  /** Enable special handling for litelement */
+  litelement: true,
+  plugins: [
+    // Generate custom VS Code data
+    customElementVsCodePlugin({
+      outdir: "./dist",
+      cssFileName: null,
+      referencesTemplate: (_, tag) => [
+        {
+          name: "Documentation",
+          url: `https://statistikzh.github.io/leu/?path=/story/${tag.replace(
+            "leu-",
+            ""
+          )}`,
+        },
+      ],
+    }),
+
+    customElementJetBrainsPlugin({
+      outdir: "./dist",
+      excludeCss: true,
+      packageJson: false,
+      referencesTemplate: (_, tag) => ({
+        name: "Documentation",
+        url: `https://statistikzh.github.io/leu/?path=/story/${tag.replace(
+          "leu-",
+          ""
+        )}`,
+      }),
+    }),
+
+    customElementVuejsPlugin({
+      outdir: "./dist/vue",
+      fileName: "index.d.ts",
+      componentTypePath: (name) => `../${name.replace("Leu", "")}.js`,
+    }),
+  ],
+}

package/dist/Accordion.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @tagname leu-accordion
+ * @slot content - The content of the accordion. No styles will be applied to the content.
+ * @prop {Number} headingLevel - The heading level of the accordion title. Must be between 1 and 6.
+ * @prop {Boolean} open - The expanded state of the accordion.
+ * @prop {String} label - The label (title) of the accordion.
+ * @prop {String} labelPrefix - The prefix of the accordion label. e.g. "01"
+ * @attr {Number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
+ * @attr {String} label-prefix - The prefix of the accordion label. e.g. "01"
+ */
+export class LeuAccordion extends LitElement {
+    headingLevel: number;
+    open: boolean;
+    label: string;
+    /**
+     * Determines the heading tag of the accordion toggle.
+     * The headingLevel shouldn't be used directly to render the heading tag
+     * in order to avoid XSS issues.
+     * @returns {String} The heading tag of the accordion toggle.
+     * @internal
+     */
+    _getHeadingTag(): string;
+    /**
+     * Toggles the accordion open state.
+     * @internal
+     */
+    _handleToggleClick(): void;
+    render(): import("lit-html").TemplateResult;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["Accordion.js"],"names":[],"mappings":"AA+JA;;;;;;;;;GASG;AACH;IAGI,qBAAqB;IACrB,cAAiB;IACjB,cAAe;IAGjB;;;;;;OAMG;IACH,yBAMC;IAED;;;OAGG;IACH,2BAEC;IACD,4CA2BC;CAEF;2BAnOwC,KAAK"}

package/dist/Accordion.js

@@ -0,0 +1,257 @@
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
+import { css, LitElement, nothing } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
+
+var css_248z = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+:host {
+  --accordion-font-regular: var(--leu-font-family-regular);
+  --accordion-font-black: var(--leu-font-family-black);
+
+  --accordion-toggle-font: var(--accordion-font-black);
+
+  --label-color: var(--leu-color-black-60);
+  --label-color-active: var(--leu-color-black-100);
+
+  --divider-color: var(--leu-color-black-20);
+  --divider-color-active: var(--leu-color-black-100);
+
+  --transition: 0.1s ease;
+
+  font-family: var(--chip-font-regular);
+
+  position: relative;
+  display: grid;
+  grid-template-rows: auto 0fr;
+
+  transition: grid-template-rows 0.1s ease;
+
+  transition: grid-template-rows var(--transition);
+}
+:host([open]) {
+  grid-template-rows: auto 1fr;
+}
+.heading {
+  margin: 0;
+}
+.button {
+  width: 100%;
+  background: none;
+  padding: 1rem 0;
+  margin: none;
+  cursor: pointer;
+
+  border: none;
+
+  color: var(--label-color);
+  font-family: var(--accordion-toggle-font);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  text-align: left;
+
+  display: flex;
+  gap: 0.25rem;
+
+  transition: color var(--transition);
+}
+@media (min-width: 600px) {
+.button {
+    font-size: 1.125rem;
+    gap: 0.8rem;
+}
+  }
+@media (min-width: 1280px) {
+.button {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+}
+  }
+.button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 4px;
+}
+.button:hover,
+.button:focus-visible,
+:host([open]) .button {
+  color: var(--label-color-active);
+}
+.plus {
+  position: relative;
+  flex: 0 0 1rem;
+  aspect-ratio: 1;
+  align-self: center;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.plus::before,
+.plus::after {
+  content: "";
+
+  position: absolute;
+  top: calc(50% - 0.0625rem);
+  left: 0;
+
+  display: block;
+  width: 1rem;
+  height: 0.125rem;
+  aspect-ratio: 1 / 0.125;
+  background-color: currentcolor;
+  transition: transform var(--transition);
+}
+.plus::before {
+  transform: rotate(90deg);
+}
+:host([open]) .plus::before {
+  transform: rotate(180deg);
+}
+.label {
+  display: block;
+  flex-grow: 1;
+}
+.content {
+  overflow: hidden;
+  transition: visibility var(--transition), opacity var(--transition);
+}
+.content[hidden] {
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+}
+slot[name="content"] {
+  display: block;
+  padding: 0.5rem 0 1.5rem;
+}
+@media (min-width: 840px) {
+slot[name="content"] {
+    padding: 0.75rem 0 1.5rem;
+}
+  }
+@media (min-width: 1280px) {
+slot[name="content"] {
+    padding: 1rem 0 2.5rem;
+}
+  }
+.divider {
+  position: absolute;
+  top: 100%;
+  left: 0;
+
+  width: 100%;
+  height: 1px;
+  margin: 0;
+
+  border: none;
+  background-color: var(--divider-color);
+
+  transition: transform var(--transition), background-color var(--transition);
+}
+:host(:not([open])) .heading:hover ~ .divider {
+  background-color: var(--divider-color-active);
+  transform: scaleY(3);
+}
+:host(:not([open])) .heading:focus-visible ~ .divider {
+  background-color: var(--divider-color-active);
+  transform: scaleY(3);
+}
+`;
+
+/**
+ * @tagname leu-accordion
+ * @slot content - The content of the accordion. No styles will be applied to the content.
+ * @prop {Number} headingLevel - The heading level of the accordion title. Must be between 1 and 6.
+ * @prop {Boolean} open - The expanded state of the accordion.
+ * @prop {String} label - The label (title) of the accordion.
+ * @prop {String} labelPrefix - The prefix of the accordion label. e.g. "01"
+ * @attr {Number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
+ * @attr {String} label-prefix - The prefix of the accordion label. e.g. "01"
+ */
+class LeuAccordion extends LitElement {
+  constructor() {
+    super();
+    this.headingLevel = 2;
+    this.open = false;
+    this.label = "";
+  }
+
+  /**
+   * Determines the heading tag of the accordion toggle.
+   * The headingLevel shouldn't be used directly to render the heading tag
+   * in order to avoid XSS issues.
+   * @returns {String} The heading tag of the accordion toggle.
+   * @internal
+   */
+  _getHeadingTag() {
+    let level = 2;
+    if (this.headingLevel > 0 && this.headingLevel < 7) {
+      level = this.headingLevel;
+    }
+    return `h${level}`;
+  }
+
+  /**
+   * Toggles the accordion open state.
+   * @internal
+   */
+  _handleToggleClick() {
+    this.open = !this.open;
+  }
+  render() {
+    const hTag = this._getHeadingTag();
+
+    /* The eslint rules don't recognize html import from lit/static-html.js */
+    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+    return html`<${unsafeStatic(hTag)} class="heading"><button
+        id="toggle"
+        type="button"
+        class="button"
+        aria-controls="content"
+        aria-expanded="${this.open}"
+        @click=${this._handleToggleClick}
+      >
+        ${this.labelPrefix ? html`<span class="label-prefix">${this.labelPrefix}</span>` : nothing}
+        <span class="label">${this.label}</span>
+        <div class="plus"></div>
+      </button></${unsafeStatic(hTag)}>
+      <div
+        id="content"
+        class="content"
+        aria-labelledby="toggle"
+        role="region"
+        ?hidden=${!this.open}
+      >
+        <slot name="content"></slot>
+      </div>
+      <hr class="divider" />`;
+  }
+  /* eslint-enable lit/binding-positions, lit/no-invalid-html */
+}
+_defineProperty(LeuAccordion, "styles", css_248z);
+/** @internal */
+_defineProperty(LeuAccordion, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuAccordion, "properties", {
+  headingLevel: {
+    type: Number,
+    attribute: "heading-level",
+    reflect: true
+  },
+  open: {
+    type: Boolean,
+    reflect: true
+  },
+  label: {
+    type: String,
+    reflect: true
+  },
+  labelPrefix: {
+    type: String,
+    attribute: "label-prefix",
+    reflect: true
+  }
+});
+
+export { LeuAccordion };

package/dist/Breadcrumb.d.ts

@@ -0,0 +1,69 @@
+/**
+ * A Breadcrumb Navigation.
+ *
+ * The breadcrumbs can be displayed in two different layouts.
+ * Only the back link (the last item / parent of the current page)
+ * is displayed when…
+ * -  … the width of the container is smaller
+ *      than the BACK_ONLY_BREAKPOINT.
+ * -  … less then two breadcrumb items could be displayed
+ *      without overflowing the container.
+ *
+ * Otherwise as many items as possible are displayed in an inline list
+ * without overflowing the container. The remaining items are displayed
+ * in a dropdown menu.
+ *
+ * In order to determine the exact numbers of items that have to be
+ * hidden inside the dropdown, all of them have to be rendered first.
+ * 1. Render all items
+ * 2. Calculate (measure) the number of items that can be displayed
+ *    without overflowing the container.
+ * 3. Updating the state (_hiddeItems) which will trigger a rerender
+ * 4. Render the items again with the new state.
+ *
+ * This results in multiple updates scheduled one after another. Lit
+ * will also print a waring in the console beacause of that.
+ * It's no a nice behaviour but the only one that works without
+ * having duplicate and hidden markup to derive the sizes from that.
+ *
+ *
+ * @prop {Array} items - Object array with { label, href }
+ * @prop {Boolean} inverted - invert color on dark background
+ *
+ * @tagname leu-breadcrumb
+ */
+export class LeuBreadcrumb extends LitElement {
+    _lastContainerWidth: any;
+    _showBackOnly: boolean;
+    _isRecalculating: boolean;
+    _hiddenItems: number;
+    _isDropdownOpen: boolean;
+    items: any[];
+    /** @type {Boolean} - will be used on dark Background */
+    inverted: boolean;
+    /** @internal */
+    _containerRef: import("lit-html/directives/ref.js").Ref<Element>;
+    resizeObserver: ResizeObserver;
+    firstUpdated(): void;
+    updated(changedProperties: any): Promise<void>;
+    /** @internal */
+    get _listItems(): any;
+    /** @internal */
+    get _dropdownItems(): any[];
+    /**
+     * Calculate the number of items that can be displayed
+     * without overflowing the container.
+     * @internal
+     * @returns {void}
+     */
+    _checkWidth(): void;
+    /**
+     * Render the dropdown menu
+     * @returns
+     */
+    renderDropdown(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+import { LitElement } from 'lit';
+import { nothing } from 'lit';
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["Breadcrumb.js"],"names":[],"mappings":"AA+HA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH;IAOM,yBAA+C;IAO7C,uBAAyB;IACzB,0BAA6B;IAY7B,qBAAqB;IASvB,yBAA4C;IAW9C,aAAe;IACf,wDAAwD;IACxD,kBAAqB;IAErB,gBAAgB;IAChB,iEAAgC;IAehC,+BAEQ;IAEV,qBAEC;IACD,+CAOC;IAOD,gBAAgB;IAChB,sBAEC;IAED,gBAAgB;IAChB,4BAEC;IACD;;;;;OAKG;IACH,eAFa,IAAI,CA4BhB;IACD;;;OAGG;IACH,wEAoCC;IACD,gEAiCC;CACF;2BA7W8C,KAAK;wBAAL,KAAK"}