@statistikzh/leu 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,26 +1,36 @@
-export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton, defineButtonElements } from './Button.js';
-export { LeuButtonGroup, defineButtonGroupElements } from './ButtonGroup.js';
-export { LeuCheckbox, defineCheckboxElements } from './Checkbox.js';
-export { LeuCheckboxGroup, defineCheckboxGroupElements } from './CheckboxGroup.js';
-export { LeuChipGroup, defineChipGroupElements } from './ChipGroup.js';
-export { LeuChipLink, defineChipLinkElements } from './ChipLink.js';
-export { LeuChipRemovable, defineChipRemovableElements } from './ChipRemovable.js';
-export { LeuChipSelectable, defineChipSelectableElements } from './ChipSelectable.js';
-export { LeuDropdown, defineDropdownElements } from './Dropdown.js';
-export { LeuInput, SIZE_TYPES, defineInputElements } from './Input.js';
-export { LeuMenu, defineMenuElements } from './Menu.js';
-export { LeuMenuItem, defineMenuItemElements } from './MenuItem.js';
-export { LeuPagination, definePaginationElements } from './Pagination.js';
-export { LeuRadio, defineRadioElements } from './Radio.js';
-export { LeuRadioGroup, defineRadioGroupElements } from './RadioGroup.js';
-export { LeuSelect, defineSelectElements } from './Select.js';
-export { LeuTable, defineTableElements } from './Table.js';
-import './defineElement-ba770aed.js';
+export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton } from './Button.js';
+export { LeuButtonGroup } from './ButtonGroup.js';
+export { LeuCheckbox } from './Checkbox.js';
+export { LeuCheckboxGroup } from './CheckboxGroup.js';
+export { LeuChipGroup } from './ChipGroup.js';
+export { LeuChipLink } from './ChipLink.js';
+export { LeuChipRemovable } from './ChipRemovable.js';
+export { LeuChipSelectable } from './ChipSelectable.js';
+export { LeuDropdown } from './Dropdown.js';
+export { LeuInput, SIZE_TYPES } from './Input.js';
+export { LeuMenu } from './Menu.js';
+export { LeuMenuItem } from './MenuItem.js';
+export { LeuPagination } from './Pagination.js';
+export { LeuRadio } from './Radio.js';
+export { LeuRadioGroup } from './RadioGroup.js';
+export { LeuSelect } from './Select.js';
+export { LeuTable } from './Table.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import './icon-03e86700.js';
-import './Chip-389013ff.js';
+import './leu-button.js';
+import './defineElement-47d4f665.js';
+import './Chip-dac7337d.js';
+import './leu-menu.js';
+import './leu-menu-item.js';
+import './leu-popup-4bf6f1f4.js';
+import '@floating-ui/dom';
 import 'lit/directives/if-defined.js';
+import 'lit/directives/live.js';
 import 'lit/directives/ref.js';
+import 'lit/static-html.js';
 import 'lit/directives/map.js';
+import './leu-input.js';
 import 'lit/directives/style-map.js';
+import './leu-pagination.js';

package/dist/leu-button-group.js

@@ -1,8 +1,12 @@
-import { defineButtonGroupElements } from './ButtonGroup.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuButtonGroup } from './ButtonGroup.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
+import './leu-button.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import './icon-03e86700.js';
 
-defineButtonGroupElements();
+defineElement("button-group", LeuButtonGroup);
+
+export { LeuButtonGroup };

package/dist/leu-button.js

@@ -1,7 +1,10 @@
-import { defineButtonElements } from './Button.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuButton } from './Button.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import './icon-03e86700.js';
 
-defineButtonElements();
+defineElement("button", LeuButton);
+
+export { LeuButton };

package/dist/leu-checkbox-group.js

@@ -1,6 +1,9 @@
-import { defineCheckboxGroupElements } from './CheckboxGroup.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuCheckboxGroup } from './CheckboxGroup.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 
-defineCheckboxGroupElements();
+defineElement("checkbox-group", LeuCheckboxGroup);
+
+export { LeuCheckboxGroup };

package/dist/leu-checkbox.js

@@ -1,6 +1,9 @@
-import { defineCheckboxElements } from './Checkbox.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuCheckbox } from './Checkbox.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import './icon-03e86700.js';
 
-defineCheckboxElements();
+defineElement("checkbox", LeuCheckbox);
+
+export { LeuCheckbox };

package/dist/leu-chip-group.js

@@ -1,5 +1,8 @@
-import { defineChipGroupElements } from './ChipGroup.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuChipGroup } from './ChipGroup.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 
-defineChipGroupElements();
+defineElement("chip-group", LeuChipGroup);
+
+export { LeuChipGroup };

package/dist/leu-chip-link.js

@@ -1,6 +1,9 @@
-import { defineChipLinkElements } from './ChipLink.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuChipLink } from './ChipLink.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
-import './Chip-389013ff.js';
+import './Chip-dac7337d.js';
 
-defineChipLinkElements();
+defineElement("chip-link", LeuChipLink);
+
+export { LeuChipLink };

package/dist/leu-chip-removable.js

@@ -1,7 +1,10 @@
-import { defineChipRemovableElements } from './ChipRemovable.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuChipRemovable } from './ChipRemovable.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
-import './Chip-389013ff.js';
+import './Chip-dac7337d.js';
 import './icon-03e86700.js';
 
-defineChipRemovableElements();
+defineElement("chip-removable", LeuChipRemovable);
+
+export { LeuChipRemovable };

package/dist/leu-chip-selectable.js

@@ -1,6 +1,9 @@
-import { defineChipSelectableElements } from './ChipSelectable.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuChipSelectable } from './ChipSelectable.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
-import './Chip-389013ff.js';
+import './Chip-dac7337d.js';
 
-defineChipSelectableElements();
+defineElement("chip-selectable", LeuChipSelectable);
+
+export { LeuChipSelectable };

package/dist/leu-dropdown.js

@@ -1,10 +1,20 @@
-import { defineDropdownElements } from './Dropdown.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuDropdown } from './Dropdown.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
+import './leu-button.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import './icon-03e86700.js';
+import './leu-menu.js';
 import './Menu.js';
+import './leu-menu-item.js';
 import './MenuItem.js';
+import 'lit/static-html.js';
+import 'lit/directives/if-defined.js';
+import './leu-popup-4bf6f1f4.js';
+import '@floating-ui/dom';
 
-defineDropdownElements();
+defineElement("dropdown", LeuDropdown);
+
+export { LeuDropdown };

package/dist/leu-input.js

@@ -1,9 +1,13 @@
-import { defineInputElements } from './Input.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuInput } from './Input.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
+import 'lit/directives/live.js';
 import 'lit/directives/ref.js';
 import './icon-03e86700.js';
 
-defineInputElements();
+defineElement("input", LeuInput);
+
+export { LeuInput };

package/dist/leu-menu-item.js

@@ -1,6 +1,11 @@
-import { defineMenuItemElements } from './MenuItem.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuMenuItem } from './MenuItem.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
+import 'lit/static-html.js';
+import 'lit/directives/if-defined.js';
 import './icon-03e86700.js';
 
-defineMenuItemElements();
+defineElement("menu-item", LeuMenuItem);
+
+export { LeuMenuItem };

package/dist/leu-menu.js

@@ -1,5 +1,8 @@
-import { defineMenuElements } from './Menu.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuMenu } from './Menu.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 
-defineMenuElements();
+defineElement("menu", LeuMenu);
+
+export { LeuMenu };

package/dist/leu-pagination.js

@@ -1,8 +1,13 @@
-import { definePaginationElements } from './Pagination.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuPagination } from './Pagination.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
+import 'lit/directives/live.js';
+import './leu-button.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import './icon-03e86700.js';
 
-definePaginationElements();
+defineElement("pagination", LeuPagination);
+
+export { LeuPagination };

package/dist/leu-popup-4bf6f1f4.js

@@ -0,0 +1,216 @@
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
+import { css, LitElement, html } from 'lit';
+import { autoUpdate, size, flip, shift, computePosition } from '@floating-ui/dom';
+
+var css_248z = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --popup-font-regular: var(--leu-font-regular);
+  --popup-font-black: var(--leu-font-black);
+
+  font-family: var(--leu-font-regular);
+
+  font-family: var(--popup-font-regular);
+}
+
+.popup {
+  display: none;
+
+  max-width: none;
+
+  max-width: var(--auto-size-available-width, none);
+  max-height: none;
+  max-height: var(--auto-size-available-height, none);
+
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* TODO: Should visibility be a matter of the popup component? */
+
+:host([active]) .popup {
+  display: block;
+}
+`;
+
+/**
+ * @tagname leu-popup
+ */
+class LeuPopup extends LitElement {
+  constructor() {
+    super();
+    this.anchorEl = null;
+    this.cleanup = undefined;
+    this.flip = false;
+    this.shift = false;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stop();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("active")) {
+      if (this.active) {
+        this.start();
+      } else {
+        this.stop();
+      }
+    }
+    if (changedProperties.has("anchor")) {
+      this.handleAnchorChange();
+    }
+    if (this.active) {
+      this.reposition();
+    }
+  }
+  get popupEl() {
+    return this.renderRoot?.querySelector(".popup") ?? null;
+  }
+  start() {
+    if (!this.anchorEl || !this.active) return;
+    this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => {
+      this.reposition();
+    });
+  }
+  stop() {
+    this.cleanup?.();
+    this.style.removeProperty("--auto-size-available-width");
+    this.style.removeProperty("--auto-size-available-height");
+  }
+  reposition() {
+    if (!this.anchorEl || !this.popupEl || !this.active) return;
+    const middleware = [];
+    if (this.matchSize) {
+      middleware.push(size({
+        apply: ({
+          rects
+        }) => {
+          const matchWidth = this.matchSize === "width" || this.matchSize === "both";
+          const matchHeight = this.matchSize === "height" || this.matchSize === "both";
+          this.popupEl.style.width = matchWidth ? `${rects.reference.width}px` : "";
+          this.popupEl.style.height = matchHeight ? `${rects.reference.height}px` : "";
+        }
+      }));
+    } else {
+      // Cleanup styles if we're not matching width/height
+      this.popupEl.style.width = "";
+      this.popupEl.style.height = "";
+    }
+    if (this.flip) {
+      middleware.push(flip());
+    }
+    if (this.shift) {
+      middleware.push(shift({
+        padding: this.shiftPadding
+      }));
+    }
+    if (this.autoSize) {
+      middleware.push(size({
+        padding: this.autoSizePadding,
+        apply: ({
+          availableWidth,
+          availableHeight
+        }) => {
+          const setMaxWidth = this.autoSize === "width" || this.autoSize === "both";
+          const setMaxHeight = this.autoSize === "height" || this.autoSize === "both";
+          if (setMaxHeight) {
+            this.style.setProperty("--auto-size-available-height", `${availableHeight}px`);
+          } else {
+            this.style.removeProperty("--auto-size-available-height");
+          }
+          if (setMaxWidth) {
+            this.style.setProperty("--auto-size-available-width", `${availableWidth}px`);
+          } else {
+            this.style.removeProperty("--auto-size-available-width");
+          }
+        }
+      }));
+    } else {
+      // Cleanup styles if we're not auto-sizing
+      this.style.removeProperty("--auto-size-available-width");
+      this.style.removeProperty("--auto-size-available-height");
+    }
+    computePosition(this.anchorEl, this.popupEl, {
+      placement: this.placement,
+      middleware
+    }).then(({
+      x,
+      y
+    }) => {
+      Object.assign(this.popupEl.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+    });
+  }
+  handleAnchorChange() {
+    if (this.anchor && typeof this.anchor === "string") {
+      const root = this.getRootNode();
+      this.anchorEl = root.getElementById(this.anchor);
+    } else if (this.anchor instanceof HTMLElement) {
+      this.anchorEl = this.anchor;
+    } else {
+      this.anchorEl = this.querySelector("[slot=anchor]");
+    }
+    if (this.anchorEl instanceof HTMLSlotElement) {
+      [this.anchorEl] = this.anchorEl.assignedElements({
+        flatten: true
+      });
+    }
+    if (this.anchorEl) {
+      this.start();
+    }
+  }
+  render() {
+    return html`
+      <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
+      <div class="popup">
+        <slot> </slot>
+      </div>
+    `;
+  }
+}
+_defineProperty(LeuPopup, "styles", css_248z);
+_defineProperty(LeuPopup, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuPopup, "properties", {
+  anchor: {},
+  active: {
+    type: Boolean
+  },
+  /**
+   * @type {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"}
+   */
+  placement: {
+    type: String
+  },
+  flip: {
+    type: Boolean
+  },
+  shift: {
+    type: Boolean
+  },
+  shiftPadding: {
+    type: Number
+  },
+  /** @type {"width" | "height" | "both"} */
+  matchSize: {
+    type: String
+  },
+  /** @type {"width" | "height" | "both"} */
+  autoSize: {
+    type: String
+  },
+  autoSizePadding: {
+    type: Number
+  }
+});
+
+defineElement("popup", LeuPopup);

package/dist/leu-radio-group.js

@@ -1,6 +1,9 @@
-import { defineRadioGroupElements } from './RadioGroup.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuRadioGroup } from './RadioGroup.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 
-defineRadioGroupElements();
+defineElement("radio-group", LeuRadioGroup);
+
+export { LeuRadioGroup };

package/dist/leu-radio.js

@@ -1,5 +1,8 @@
-import { defineRadioElements } from './Radio.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuRadio } from './Radio.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 
-defineRadioElements();
+defineElement("radio", LeuRadio);
+
+export { LeuRadio };

package/dist/leu-select.js

@@ -1,14 +1,25 @@
-import { defineSelectElements } from './Select.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuSelect } from './Select.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/map.js';
 import 'lit/directives/if-defined.js';
 import 'lit/directives/ref.js';
 import './icon-03e86700.js';
+import './leu-button.js';
 import './Button.js';
+import './leu-menu.js';
 import './Menu.js';
+import './leu-menu-item.js';
 import './MenuItem.js';
+import 'lit/static-html.js';
+import './leu-input.js';
 import './Input.js';
+import 'lit/directives/live.js';
+import './leu-popup-4bf6f1f4.js';
+import '@floating-ui/dom';
 
-defineSelectElements();
+defineElement("select", LeuSelect);
+
+export { LeuSelect };

package/dist/leu-table.js

@@ -1,11 +1,17 @@
-import { defineTableElements } from './Table.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuTable } from './Table.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/style-map.js';
 import 'lit/directives/ref.js';
 import './icon-03e86700.js';
+import './leu-pagination.js';
 import './Pagination.js';
+import 'lit/directives/live.js';
+import './leu-button.js';
 import './Button.js';
 
-defineTableElements();
+defineElement("table", LeuTable);
+
+export { LeuTable };

package/package.json

@@ -3,15 +3,21 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/statistikzh/leu.git"
+  },
+  "homepage": "https://github.com/statistikzh/leu/",
   "scripts": {
     "analyze": "cem analyze --litelement --globs \"src/**/*.js\"",
     "build": "rimraf dist && npm run build:js && npm run build:css",
     "build:js": "rollup -c rollup.config.js",
-    "build:css": "postcss src/styles/theme.css -o dist/theme.css",
+    "build:css": "postcss src/styles/theme.css -o dist/theme.css && cp dist/theme.css .storybook/static/",
+    "watch:css": "nodemon --watch 'src/styles/*' -e css --exec npm run build:css",
     "lint": "npm run lint:eslint && npm run lint:prettier",
     "lint:eslint": "eslint --ext .js,.mjs,.html . --ignore-path .gitignore ",
     "lint:prettier": "prettier \"**/*.{js,mjs,md,html,json}\" --check --ignore-path .gitignore",
@@ -22,10 +28,12 @@
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
     "prepare": "husky install",
-    "storybook": "npm run analyze && web-dev-server --config web-dev-server-storybook.config.mjs --watch",
-    "build-storybook": "storybook build"
+    "storybook": "npm run storybook:start",
+    "storybook:start": "npm run analyze && npm run watch:css & storybook dev -p 8080 --no-open",
+    "storybook:build": "npm run analyze && npm run build:css && storybook build --output-dir docs"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.6.3",
     "lit": "^3.0.2"
   },
   "devDependencies": {
@@ -34,25 +42,32 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@open-wc/eslint-config": "^9.2.1",
-    "@open-wc/testing": "^3.1.6",
+    "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.0.0",
+    "@storybook/addon-designs": "^7.0.9",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/web-components": "^7.6.10",
     "@web/dev-server": "^0.1.34",
     "@web/dev-server-rollup": "^0.5.2",
-    "@web/dev-server-storybook": "^1.0.6",
-    "@web/storybook-builder": "^0.1.0",
+    "@web/storybook-builder": "^0.1.2",
     "@web/storybook-framework-web-components": "^0.1.1",
-    "@web/test-runner": "^0.14.0",
-    "@web/test-runner-commands": "^0.8.0",
-    "@web/test-runner-playwright": "^0.10.1",
+    "@web/test-runner": "^0.18.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "@whitespace/storybook-addon-html": "^5.1.6",
     "arg": "^5.0.2",
     "es-dev-server": "^2.1.0",
-    "esbuild": "^0.19.4",
+    "esbuild": "^0.20.0",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-storybook": "^0.6.14",
     "husky": "^8.0.0",
     "lint-staged": "^10.5.4",
+    "nodemon": "^3.0.2",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
@@ -61,12 +76,14 @@
     "prettier": "^2.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
     "rimraf": "^5.0.5",
     "rollup": "^3.29.4",
     "rollup-plugin-esbuild": "^6.0.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-postcss-lit": "^2.1.0",
-    "storybook": "^7.4.5",
+    "sinon": "^17.0.1",
+    "storybook": "^7.6.10",
     "stylelint": "^15.10.3",
     "stylelint-config-standard": "^34.0.0"
   },