@statistikzh/leu 0.0.2

package/.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/.eslintrc.json

@@ -0,0 +1,27 @@
+{
+  "ignorePatterns": ["scripts/generate-component/templates/**/*"],
+  "extends": ["@open-wc", "prettier", "plugin:storybook/recommended"],
+  "rules": {
+    "no-unused-vars": [
+      "error",
+      {
+        "varsIgnorePattern": "^_",
+        "argsIgnorePattern": "^_"
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["**/scripts/**/*.js"],
+      "rules": {
+        "import/no-extraneous-dependencies": [
+          "error",
+          {
+            "devDependencies": true
+          }
+        ],
+        "no-console": "off"
+      }
+    }
+  ]
+}

package/.github/workflows/publish.yml

@@ -0,0 +1,19 @@
+name: Publish Package to npmjs
+on:
+  release:
+    types: [published]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

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

@@ -0,0 +1,19 @@
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+name: release-please
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v3
+        with:
+          release-type: node
+          package-name: "@statistikzh/leu"

package/.github/workflows/test.yml

@@ -0,0 +1,38 @@
+name: Test
+
+on: workflow_dispatch
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install
+
+      - name: Cache Playwright binaries
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: Run tests
+        run: npm test
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: coverage
+          path: coverage/

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged --verbose

package/.prettierignore

@@ -0,0 +1 @@
+scripts/generate-component/templates/**/*.js

package/.storybook/main.js

@@ -0,0 +1,11 @@
+/** @type { import('@web/storybook-framework-web-components').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  framework: {
+    name: "@web/storybook-framework-web-components",
+  },
+  docs: {
+    autodocs: "tag",
+  },
+}
+export default config

package/.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<link rel="stylesheet" href="src/styles/theme.css" />
+<link
+  rel="stylesheet"
+  href="https://www.web.statistik.zh.ch/leu/styles/fonts.css"
+/>

package/.storybook/preview.js

@@ -0,0 +1,23 @@
+/** @type { import('@storybook/web-components').Preview } */
+
+import {
+  setCustomElements,
+  setCustomElementsManifest,
+} from "@web/storybook-prebuilt/web-components.js"
+import customElemenents from "../custom-elements.json"
+
+setCustomElementsManifest(customElemenents)
+
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+}
+
+export default preview

package/CHANGELOG.md

@@ -0,0 +1,63 @@
+# Changelog
+
+## [0.0.2](https://github.com/statistikZH/leu/compare/v0.0.1...v0.0.2) (2023-11-15)
+
+
+### Miscellaneous Chores
+
+* release 0.0.2 ([4371479](https://github.com/statistikZH/leu/commit/437147901d5406f8fe23750a2b3fa3575bdb272f))
+
+## 0.0.1 (2023-11-14)
+
+
+### ⚠ BREAKING CHANGES
+
+* **select:** change optionFilter (rename) from a reactive property to internal state
+* **select:** The value property is not a string anymore but an array.
+* **button:** change negative to inverted to get a consistent API between components
+
+### Features
+
+* add button-group ([#37](https://github.com/statistikZH/leu/issues/37)) ([fd5d170](https://github.com/statistikZH/leu/commit/fd5d170ee2b26e785556c7b5e7e3e65a099a6e13))
+* add HasSlotController which helps to identify if a slot has content ([bc7581e](https://github.com/statistikZH/leu/commit/bc7581e66bf836aabefec19a6717a7016ae552c8))
+* add select component ([58409af](https://github.com/statistikZH/leu/commit/58409af450911bbee273e2223bdb9749c63207ac))
+* add size,comments and update twitter ([2e1ae9b](https://github.com/statistikZH/leu/commit/2e1ae9b2d8c35a897436792be52b2a1aa5a94f22))
+* add table ([624016a](https://github.com/statistikZH/leu/commit/624016a11e2649735f5eb0d00e9a3a112b35f484))
+* **button:** add fluid option to take up full width of the parent container ([3e066b2](https://github.com/statistikZH/leu/commit/3e066b2f4d66cec810051b4e3b58cff9dc7efc34))
+* **button:** add ghost variant ([f397503](https://github.com/statistikZH/leu/commit/f397503ad39c43e7e92e64e08a8a140859f40929))
+* **button:** Implement LeuButton component ([aa26a1a](https://github.com/statistikZH/leu/commit/aa26a1a30b1f390e4f695bcd469f943372a334f9))
+* **chip:** Implement chip components ([971cb4b](https://github.com/statistikZH/leu/commit/971cb4bc2f863172fbfc29ec92526a1e3ca5169a))
+* define global box-shadow styles ([24753ba](https://github.com/statistikZH/leu/commit/24753ba18b84a57f03e0307622727971110882ba))
+* define viewports as a preperation for postcss ([#17](https://github.com/statistikZH/leu/issues/17)) ([e11a819](https://github.com/statistikZH/leu/commit/e11a819b6e7666b60a568f540ccccadaee00d972))
+* **dropdown:** add basic dropdown component ([6896b46](https://github.com/statistikZH/leu/commit/6896b46a4f3a0c48c9645e52020f227ce5125ae9))
+* **input:** add error attribute to display server side errors ([#40](https://github.com/statistikZH/leu/issues/40)) ([1ba3a6f](https://github.com/statistikZH/leu/commit/1ba3a6f23c471d18e9147d2a4a791b9c83d5d477))
+* **input:** implement text input component ([5815327](https://github.com/statistikZH/leu/commit/5815327124c838ede90297ed38731aae3dc19c17))
+* **menu-item:** add an EMPTY icon option to align the label with other items that have an icon ([d7c3fa1](https://github.com/statistikZH/leu/commit/d7c3fa13121022175e9f954be6c1318235a1c360))
+* **menu-item:** add disabled attribute/property ([f150a17](https://github.com/statistikZH/leu/commit/f150a17a8c4897b3c520925739ad270c27b51f4f))
+* **menu-item:** add highlighted property/attribute as a way to set a style similiar to hover ([f150a17](https://github.com/statistikZH/leu/commit/f150a17a8c4897b3c520925739ad270c27b51f4f))
+* **menu:** create menu component abstraction ([6896b46](https://github.com/statistikZH/leu/commit/6896b46a4f3a0c48c9645e52020f227ce5125ae9))
+* **pagination:** implement pagination component ([0b3c11f](https://github.com/statistikZH/leu/commit/0b3c11fcaf1946ddf11688407e0cd0e133d5b519))
+* **select:** reimplement and simplify the select element with a dialog element ([f150a17](https://github.com/statistikZH/leu/commit/f150a17a8c4897b3c520925739ad270c27b51f4f))
+
+
+### Bug Fixes
+
+* **button:** use same border-radius value as other input elements do ([d88ca25](https://github.com/statistikZH/leu/commit/d88ca2533fd1d3442f85cb5b5f438128349d3b0a))
+* correct filename for button export ([16b04d0](https://github.com/statistikZH/leu/commit/16b04d02ef94898f6b0d9eff6440bacc9eaec69f))
+* **Pagination:** remove comment of page property ([21c73e6](https://github.com/statistikZH/leu/commit/21c73e622a9fb8ee7161ba6b7c647a08568e3ec5))
+* **select:** remove unnecessary function call ([4f9c6e5](https://github.com/statistikZH/leu/commit/4f9c6e5e09f393f1bf0d9b19c77ced87dfa12eff))
+* **select:** use fluid option to use the available space ([a0e2eb4](https://github.com/statistikZH/leu/commit/a0e2eb4813c311b8f399c1436f5d116912de8b79))
+* **select:** use the correct name of the close method ([a24fd0b](https://github.com/statistikZH/leu/commit/a24fd0b1e5473ca1a928dac7a0f62d86c2ad3a32))
+* **theme:** reference the font styles on our server ([611afd0](https://github.com/statistikZH/leu/commit/611afd06703b98628dbe604efcf8e2936b9d7a67))
+
+
+### Miscellaneous Chores
+
+* release 0.0.1 ([198ce36](https://github.com/statistikZH/leu/commit/198ce364513f7aaecc39db1dc27d7254de22658e))
+
+
+### Code Refactoring
+
+* **button:** change negative to inverted to get a consistent API between components ([0970036](https://github.com/statistikZH/leu/commit/0970036926324e1f0660e550d884df2e35309ec9))
+* **select:** change optionFilter (rename) from a reactive property to internal state ([a51e0b8](https://github.com/statistikZH/leu/commit/a51e0b8ed08f7d1de9a8e8c89762d9b674e95691))
+* **select:** change the type of the value property to an array ([5772d2d](https://github.com/statistikZH/leu/commit/5772d2de37d5e4e7dacbc186332746681d73ed73))

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+[INSERT CONTACT METHOD].
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

package/CONTRIBUTING.md

@@ -0,0 +1,31 @@
+# Contributing
+
+We welcome contributions!
+
+To submit a contribution:
+
+    1. Fork the repository and make your changes.
+
+    2. Submit a pull request.
+
+## Collaboration guidelines
+
+We don't want to enforce to many rules on how to collaborate on this project. But there are a few things that should be considered when contributing to this project.
+
+### Commit messages
+
+We enforce [conventional commit](https://www.conventionalcommits.org/en/v1.0.0/) messages with [commitlint](https://commitlint.js.org/#/). This way we can automatically generate a changelog and version the project with Release Please accordingly.
+
+If you're working on a component, please use its name as the scope of the commit message.
+For example:
+
+You've added a new feature to the `leu-radio` component. Your commit message should look like this:
+
+```bash
+git commit -m "feat(leu-radio): add new feature"
+```
+
+### Branching
+
+All new features should be developed in a feature branch that is branched off from the `main` branch. Each branch can then be linked to the respective issue on GitHub. Please do not merge feature branches into each other. Try to merge into the `main` branch as soon as possible. This way we can keep the `main` branch up to date and avoid having dependencies between feature branches.
+The feature branch should always be prefixed with the issue number (e.g. `48-dropdown`).

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 leu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,170 @@
+![](stat_zh.png)
+
+# 🦁 leu
+
+A UI component library based on the [design system](https://www.zh.ch/de/webangebote-entwickeln-und-gestalten.html) of the canton of zurich.
+
+## ⚠️ This project is still in alpha state
+
+This package is still in alpha state. It is not recommended to use it in production yet.
+
+## Prerequisites
+
+Node.js > v18.0.0
+
+## Installation
+
+```bash
+npm i @statistikzh/leu
+```
+
+## Usage
+
+```html
+<script type="module">
+  import "@statistikzh/leu/leu-radio.js"
+</script>
+
+<leu-radio></leu-radio>
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+## Demoing with Storybook
+
+To run a local instance of Storybook for your component, run
+
+```bash
+npm run storybook
+```
+
+To build a production version of Storybook, run
+
+```bash
+npm run storybook:build
+```
+
+## Create a new component
+
+To create a starting point for a new component, run
+
+```bash
+./scripts/generate-component/generate.js
+```
+
+Running it with `--help` will show you all available options.
+
+## Development guidelines
+
+A few rules are necessary when developing a component library. The following conventions and guidelines should be followed when new features are implemented.
+
+At the same time they're not set in stone. If the there is a good reason to change them open a pull request.
+
+### Naming
+
+Every element, class or custom property that will be globally available has to be prefixed with `leu`.
+
+```js
+/* Custom elements */
+class LeuRadio extends LitElement {
+  ...
+}
+
+window.customElements.define("leu-input", LeuInput)
+```
+
+```css
+/* CSS class */
+.leu-radio-group {
+  ...;
+}
+
+/* CSS custom property */
+:root {
+  --leu-color-black-0: #000;
+}
+```
+
+### Scoped styles
+
+All CSS declarations should, whenever possible, always live inside a custom element. This way we ensure that the styles won't interfere with the environment they're loaded into.
+The only exceptions are `@font-face` statements and custom property declarations.
+Styles that are shared between components should be defined as global custom properties inside the `styles/custom-properties.css`.
+When a global custom property is used inside a component it should always be assigned to a local custom property in the `:host` declaration block.
+
+```css
+:host {
+  --radio-color-disabled: var(--leu-color-black-20);
+}
+```
+
+### Value property
+
+All custom elements that contain a value of some sort have to implement a `value` property.
+Everytime the value of the `value` property changes a `input` event has to be dispatched.
+This behaviour matches the way [Observable](https://observablehq.com) handles and observes changes of values that are contained in arbitrary elements. We decided to take over this pattern as it is usable in every other environment too.
+
+### Custom events
+
+In case of a custom event that is meant to be catched by an other component of this library, the name of this event has to be prefixed too.
+
+```js
+this.dispatchEvent(new Event("leu-selected", { bubbles: true, composed: true }))
+```
+
+### Dependencies
+
+Use as little dependencies as possible and as many as needed.
+
+## Contributors
+
+Thanks to the following people who have contributed to this project
+
+[@cubmic](https://github.com/cubmic) <br>
+[@resmartiZH](https://github.com/resmartiZH) <br>
+[@daenub](https://github.com/daenub) <br>
+
+## Contact
+
+Dan Büschlen <br>
+dan.bueschlen@statistik.ji.zh.ch <br>
+
+![Twitter Follow](https://img.shields.io/twitter/follow/statistik_zh?style=social)
+
+## License
+
+This project uses the following license: <br>
+
+- Code license: [Copyright (c) <2023> <Statistisches Amt Kanton Zürich>](LICENSE)
+
+## Guidelines for contributing
+
+We welcome contributions. Please see our [CONTRIBUTING.md](CONTRIBUTING.md) file for detailed guidelines of how to contribute.
+
+Please note that this project is released with a [Contributor Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.

package/commitlint.config.cjs

@@ -0,0 +1 @@
+module.exports = { extends: ["@commitlint/config-conventional"] }