@statistikzh/leu 0.13.1 → 0.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.json +8 -0
- package/.github/workflows/ci.yml +78 -0
- package/.github/workflows/deploy-github-pages.yaml +2 -1
- package/.github/workflows/release-please.yml +2 -1
- package/.nvmrc +1 -0
- package/.prettierignore +1 -0
- package/.storybook/main.js +19 -3
- package/.storybook/preview.js +11 -0
- package/CHANGELOG.md +27 -0
- package/README.md +0 -67
- package/custom-elements-manifest.config.js +2 -2
- package/dist/Accordion.d.ts +1 -1
- package/dist/Accordion.js +8 -8
- package/dist/Button.d.ts +2 -2
- package/dist/Button.js +2 -2
- package/dist/ButtonGroup.d.ts +1 -1
- package/dist/ButtonGroup.js +1 -1
- package/dist/Checkbox.d.ts +1 -1
- package/dist/Checkbox.d.ts.map +1 -1
- package/dist/Checkbox.js +2 -3
- package/dist/CheckboxGroup.d.ts +1 -1
- package/dist/CheckboxGroup.d.ts.map +1 -1
- package/dist/CheckboxGroup.js +1 -3
- package/dist/Chip.d.ts +1 -1
- package/dist/Chip.d.ts.map +1 -1
- package/dist/Chip.js +1 -3
- package/dist/ChipGroup.d.ts +1 -1
- package/dist/ChipGroup.d.ts.map +1 -1
- package/dist/ChipGroup.js +2 -2
- package/dist/ChipLink.js +1 -1
- package/dist/ChipRemovable.js +1 -1
- package/dist/ChipSelectable.js +1 -1
- package/dist/Dialog.d.ts +1 -1
- package/dist/Dialog.d.ts.map +1 -1
- package/dist/Dialog.js +3 -5
- package/dist/Dropdown.d.ts +1 -1
- package/dist/Dropdown.js +3 -3
- package/dist/Icon.d.ts +2 -98
- package/dist/Icon.d.ts.map +1 -1
- package/dist/Icon.js +1 -1
- package/dist/Input.d.ts +8 -3
- package/dist/Input.d.ts.map +1 -1
- package/dist/Input.js +18 -12
- package/dist/{LeuElement-b670d77c.d.ts → LeuElement-DH0PPSMq.d.ts} +1 -1
- package/dist/LeuElement-DH0PPSMq.d.ts.map +1 -0
- package/dist/{LeuElement-b670d77c.js → LeuElement-DH0PPSMq.js} +2 -2
- package/dist/Menu.d.ts +2 -2
- package/dist/Menu.js +1 -1
- package/dist/MenuItem.d.ts +3 -3
- package/dist/MenuItem.js +1 -1
- package/dist/Pagination.d.ts +1 -1
- package/dist/Pagination.js +3 -3
- package/dist/Popup.d.ts +2 -2
- package/dist/Popup.d.ts.map +1 -1
- package/dist/Popup.js +1 -3
- package/dist/Radio.d.ts +1 -1
- package/dist/Radio.d.ts.map +1 -1
- package/dist/Radio.js +1 -3
- package/dist/RadioGroup.d.ts +1 -1
- package/dist/RadioGroup.d.ts.map +1 -1
- package/dist/RadioGroup.js +1 -3
- package/dist/Range.d.ts +1 -1
- package/dist/Range.d.ts.map +1 -1
- package/dist/Range.js +17 -19
- package/dist/ScrollTop.d.ts +1 -1
- package/dist/ScrollTop.d.ts.map +1 -1
- package/dist/ScrollTop.js +27 -3
- package/dist/Select.d.ts +3 -7
- package/dist/Select.d.ts.map +1 -1
- package/dist/Select.js +7 -18
- package/dist/Spinner.d.ts +1 -1
- package/dist/Spinner.js +1 -1
- package/dist/Table.d.ts +1 -1
- package/dist/Table.d.ts.map +1 -1
- package/dist/Table.js +3 -4
- package/dist/VisuallyHidden.d.ts +1 -1
- package/dist/VisuallyHidden.d.ts.map +1 -1
- package/dist/VisuallyHidden.js +3 -5
- package/dist/{hasSlotController-c09741c5.d.ts → hasSlotController-CYd5tWew.d.ts} +1 -1
- package/dist/hasSlotController-CYd5tWew.d.ts.map +1 -0
- package/dist/{hasSlotController-c09741c5.js → hasSlotController-CYd5tWew.js} +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/index.js +5 -7
- package/dist/leu-accordion.js +1 -1
- package/dist/leu-button-group.js +1 -1
- package/dist/leu-button.js +2 -2
- package/dist/leu-checkbox-group.js +1 -1
- package/dist/leu-checkbox.js +1 -1
- package/dist/leu-chip-group.js +1 -1
- package/dist/leu-chip-link.js +1 -1
- package/dist/leu-chip-removable.js +1 -1
- package/dist/leu-chip-selectable.js +1 -1
- package/dist/leu-dialog.js +2 -2
- package/dist/leu-dropdown.js +2 -2
- package/dist/leu-icon.js +1 -1
- package/dist/leu-input.js +1 -1
- package/dist/leu-menu-item.js +1 -1
- package/dist/leu-menu.js +1 -1
- package/dist/leu-pagination.js +2 -2
- package/dist/leu-popup.js +1 -1
- package/dist/leu-radio-group.js +1 -1
- package/dist/leu-radio.js +1 -1
- package/dist/leu-range.js +1 -1
- package/dist/leu-scroll-top.js +2 -3
- package/dist/leu-select.js +2 -2
- package/dist/leu-spinner.js +1 -1
- package/dist/leu-table.js +2 -2
- package/dist/leu-visually-hidden.js +1 -1
- package/dist/theme.css +143 -107
- package/dist/vscode.html-custom-data.json +4 -33
- package/dist/vue/index.d.ts +11 -78
- package/dist/web-types.json +247 -243
- package/index.js +0 -1
- package/package.json +55 -51
- package/rollup.config.js +3 -3
- package/scripts/generate-component/generate.js +5 -5
- package/scripts/generate-component/templates/stories/[name].stories.js +1 -1
- package/src/components/accordion/Accordion.js +1 -1
- package/src/components/accordion/accordion.css +6 -3
- package/src/components/accordion/stories/accordion.stories.js +7 -6
- package/src/components/accordion/test/accordion.test.js +24 -20
- package/src/components/button/Button.js +1 -1
- package/src/components/button/stories/button.stories.js +44 -46
- package/src/components/button/test/button.test.js +10 -10
- package/src/components/button-group/ButtonGroup.js +1 -1
- package/src/components/button-group/stories/button-group.stories.js +3 -3
- package/src/components/checkbox/checkbox.css +1 -0
- package/src/components/checkbox/stories/checkbox-group.stories.js +1 -1
- package/src/components/checkbox/stories/checkbox.stories.js +1 -1
- package/src/components/chip/ChipSelectable.js +1 -1
- package/src/components/chip/stories/chip-group.stories.js +5 -5
- package/src/components/chip/stories/chip-link.stories.js +1 -1
- package/src/components/chip/stories/chip-removable.stories.js +1 -1
- package/src/components/chip/stories/chip-selectable.stories.js +1 -1
- package/src/components/chip/test/chip-group.test.js +25 -33
- package/src/components/chip/test/chip-link.test.js +5 -5
- package/src/components/chip/test/chip-removable.test.js +6 -8
- package/src/components/chip/test/chip-selectable.test.js +9 -11
- package/src/components/dialog/stories/dialog.stories.js +1 -1
- package/src/components/dialog/test/dialog.test.js +1 -1
- package/src/components/dropdown/stories/dropdown.stories.js +1 -1
- package/src/components/dropdown/test/dropdown.test.js +12 -13
- package/src/components/icon/stories/icon.stories.js +1 -1
- package/src/components/input/Input.js +26 -18
- package/src/components/input/input.css +2 -2
- package/src/components/input/stories/input.stories.js +1 -4
- package/src/components/input/test/input.test.js +26 -0
- package/src/components/menu/stories/menu-item.stories.js +3 -1
- package/src/components/menu/stories/menu.stories.js +1 -1
- package/src/components/menu/test/menu-item.test.js +3 -2
- package/src/components/menu/test/menu.test.js +24 -22
- package/src/components/pagination/Pagination.js +1 -1
- package/src/components/pagination/pagination.css +1 -1
- package/src/components/pagination/stories/pagination.stories.js +3 -2
- package/src/components/pagination/test/pagination.test.js +8 -6
- package/src/components/popup/Popup.js +4 -4
- package/src/components/popup/stories/popup.stories.js +1 -1
- package/src/components/popup/test/popup.test.js +6 -8
- package/src/components/radio/RadioGroup.js +2 -2
- package/src/components/radio/stories/radio-group.stories.js +1 -1
- package/src/components/radio/stories/radio.stories.js +1 -1
- package/src/components/range/Range.js +20 -21
- package/src/components/range/stories/range-slider.stories.js +1 -1
- package/src/components/scroll-top/stories/scroll-top.stories.js +1 -1
- package/src/components/select/Select.js +7 -18
- package/src/components/select/stories/select.stories.js +3 -3
- package/src/components/select/test/select.test.js +18 -16
- package/src/components/spinner/stories/spinner.stories.js +1 -1
- package/src/components/table/Table.js +4 -4
- package/src/components/table/stories/table.stories.js +1 -1
- package/src/components/table/test/table.test.js +3 -2
- package/src/components/visually-hidden/stories/visually-hidden.stories.js +1 -1
- package/src/components/visually-hidden/test/visually-hidden.test.js +6 -8
- package/src/docs/contributing.mdx +154 -0
- package/src/docs/installation.mdx +35 -0
- package/src/docs/theme.mdx +349 -0
- package/src/docs/usage.mdx +73 -0
- package/src/lib/LeuElement.js +2 -2
- package/src/lib/hasSlotController.js +1 -1
- package/src/styles/style.stories.js +4 -2
- package/tsconfig.build.json +4 -3
- package/web-dev-server.config.mjs +1 -0
- package/web-test-runner.config.mjs +1 -1
- package/.github/workflows/test.yml +0 -38
- package/.storybook/preview-head.html +0 -2
- package/dist/Breadcrumb.d.ts +0 -69
- package/dist/Breadcrumb.d.ts.map +0 -1
- package/dist/Breadcrumb.js +0 -391
- package/dist/LeuElement-b670d77c.d.ts.map +0 -1
- package/dist/hasSlotController-c09741c5.d.ts.map +0 -1
- package/dist/leu-breadcrumb.d.ts +0 -3
- package/dist/leu-breadcrumb.d.ts.map +0 -1
- package/dist/leu-breadcrumb.js +0 -17
- package/dist/utils-65469421.d.ts +0 -16
- package/dist/utils-65469421.d.ts.map +0 -1
- package/dist/utils-65469421.js +0 -35
- package/src/components/breadcrumb/Breadcrumb.js +0 -324
- package/src/components/breadcrumb/breadcrumb.css +0 -98
- package/src/components/breadcrumb/leu-breadcrumb.js +0 -5
- package/src/components/breadcrumb/stories/breadcrumb.stories.js +0 -73
- package/src/components/breadcrumb/test/breadcrumb.test.js +0 -141
package/.eslintrc.json
CHANGED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
name: Continuous integration
|
|
2
|
+
|
|
3
|
+
on: [push, pull_request]
|
|
4
|
+
|
|
5
|
+
jobs:
|
|
6
|
+
lint:
|
|
7
|
+
runs-on: ubuntu-latest
|
|
8
|
+
|
|
9
|
+
steps:
|
|
10
|
+
- uses: actions/checkout@v4
|
|
11
|
+
|
|
12
|
+
- name: Use Node.js
|
|
13
|
+
uses: actions/setup-node@v4
|
|
14
|
+
with:
|
|
15
|
+
node-version-file: ".nvmrc"
|
|
16
|
+
cache: "npm"
|
|
17
|
+
|
|
18
|
+
- run: npm ci
|
|
19
|
+
|
|
20
|
+
- name: Run linters
|
|
21
|
+
run: npm run lint
|
|
22
|
+
|
|
23
|
+
build:
|
|
24
|
+
runs-on: ubuntu-latest
|
|
25
|
+
needs: lint
|
|
26
|
+
|
|
27
|
+
steps:
|
|
28
|
+
- uses: actions/checkout@v4
|
|
29
|
+
|
|
30
|
+
- name: Use Node.js
|
|
31
|
+
uses: actions/setup-node@v4
|
|
32
|
+
with:
|
|
33
|
+
node-version-file: ".nvmrc"
|
|
34
|
+
cache: "npm"
|
|
35
|
+
|
|
36
|
+
- run: npm ci
|
|
37
|
+
|
|
38
|
+
- name: Build library
|
|
39
|
+
run: npm run build
|
|
40
|
+
|
|
41
|
+
- name: Build storybook
|
|
42
|
+
run: npm run storybook:build
|
|
43
|
+
|
|
44
|
+
test:
|
|
45
|
+
runs-on: ubuntu-latest
|
|
46
|
+
needs: lint
|
|
47
|
+
|
|
48
|
+
steps:
|
|
49
|
+
- name: Checkout code
|
|
50
|
+
uses: actions/checkout@v4
|
|
51
|
+
|
|
52
|
+
- name: Use Node.js
|
|
53
|
+
uses: actions/setup-node@v4
|
|
54
|
+
with:
|
|
55
|
+
node-version-file: ".nvmrc"
|
|
56
|
+
cache: "npm"
|
|
57
|
+
|
|
58
|
+
- name: Install dependencies
|
|
59
|
+
run: npm ci
|
|
60
|
+
|
|
61
|
+
- name: Install Playwright browsers
|
|
62
|
+
run: npx playwright install
|
|
63
|
+
|
|
64
|
+
- name: Cache Playwright binaries
|
|
65
|
+
uses: actions/cache@v4
|
|
66
|
+
with:
|
|
67
|
+
path: ~/.cache/ms-playwright
|
|
68
|
+
key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
|
|
69
|
+
restore-keys: |
|
|
70
|
+
${{ runner.os }}-playwright-
|
|
71
|
+
|
|
72
|
+
- name: Run tests
|
|
73
|
+
run: npm test
|
|
74
|
+
|
|
75
|
+
- uses: actions/upload-artifact@v4
|
|
76
|
+
with:
|
|
77
|
+
name: coverage
|
|
78
|
+
path: coverage/
|
|
@@ -23,7 +23,8 @@ jobs:
|
|
|
23
23
|
# Set up Node
|
|
24
24
|
- uses: actions/setup-node@v4
|
|
25
25
|
with:
|
|
26
|
-
node-version: "
|
|
26
|
+
node-version-file: ".nvmrc"
|
|
27
|
+
cache: "npm"
|
|
27
28
|
|
|
28
29
|
#👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
|
|
29
30
|
- uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
|
|
@@ -25,7 +25,8 @@ jobs:
|
|
|
25
25
|
if: ${{ steps.release.outputs.release_created }}
|
|
26
26
|
- uses: actions/setup-node@v4
|
|
27
27
|
with:
|
|
28
|
-
node-version: "
|
|
28
|
+
node-version-file: ".nvmrc"
|
|
29
|
+
cache: "npm"
|
|
29
30
|
registry-url: "https://registry.npmjs.org"
|
|
30
31
|
if: ${{ steps.release.outputs.release_created }}
|
|
31
32
|
- run: npm ci
|
package/.nvmrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
v20.9.0
|
package/.prettierignore
CHANGED
package/.storybook/main.js
CHANGED
|
@@ -8,16 +8,32 @@ const config = {
|
|
|
8
8
|
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
|
|
9
9
|
addons: [
|
|
10
10
|
"@storybook/addon-essentials",
|
|
11
|
-
"@storybook/addon-links",
|
|
12
11
|
"@storybook/addon-designs",
|
|
13
12
|
"@whitespace/storybook-addon-html",
|
|
13
|
+
"@storybook/addon-a11y",
|
|
14
14
|
],
|
|
15
15
|
staticDirs: ["static"],
|
|
16
16
|
framework: {
|
|
17
17
|
name: "@web/storybook-framework-web-components",
|
|
18
18
|
},
|
|
19
|
-
docs: {
|
|
20
|
-
|
|
19
|
+
docs: {},
|
|
20
|
+
core: {
|
|
21
|
+
disableTelemetry: true, // 👈 Disables telemetry
|
|
22
|
+
},
|
|
23
|
+
previewHead: (head) => {
|
|
24
|
+
/**
|
|
25
|
+
* Workaround to get the build process working
|
|
26
|
+
* @web/storybook-builder sets `extractAssets: true`
|
|
27
|
+
* for the rollup html plugin. But the same path doesn't
|
|
28
|
+
* work in th development environment.
|
|
29
|
+
* */
|
|
30
|
+
const basePath =
|
|
31
|
+
process.env.NODE_ENV === "production" ? ".storybook/static/" : ""
|
|
32
|
+
return `
|
|
33
|
+
${head}
|
|
34
|
+
<link rel="stylesheet" href="${basePath}fonts.css" />
|
|
35
|
+
<link rel="stylesheet" href="${basePath}theme.css" />
|
|
36
|
+
`
|
|
21
37
|
},
|
|
22
38
|
async wdsFinal(config) {
|
|
23
39
|
config.open = false
|
package/.storybook/preview.js
CHANGED
|
@@ -6,6 +6,7 @@ import customElemenents from "../dist/custom-elements.json"
|
|
|
6
6
|
setCustomElementsManifest(customElemenents)
|
|
7
7
|
|
|
8
8
|
const preview = {
|
|
9
|
+
tags: ["autodocs"],
|
|
9
10
|
parameters: {
|
|
10
11
|
actions: { argTypesRegex: "^on[A-Z].*" },
|
|
11
12
|
controls: {
|
|
@@ -13,6 +14,16 @@ const preview = {
|
|
|
13
14
|
color: /(background|color)$/i,
|
|
14
15
|
},
|
|
15
16
|
},
|
|
17
|
+
options: {
|
|
18
|
+
storySort: {
|
|
19
|
+
order: [
|
|
20
|
+
"Introduction",
|
|
21
|
+
["Installation", "Usage", "Theme", "Contributing"],
|
|
22
|
+
"Components",
|
|
23
|
+
"*",
|
|
24
|
+
],
|
|
25
|
+
},
|
|
26
|
+
},
|
|
16
27
|
viewport: {
|
|
17
28
|
viewports: [
|
|
18
29
|
{
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.14.1](https://github.com/statistikZH/leu/compare/v0.14.0...v0.14.1) (2025-04-02)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* **accordion:** ensure that the heading level is an integer ([bfb65be](https://github.com/statistikZH/leu/commit/bfb65be83d89b5344c96bd1b10c4b6454c66aee0))
|
|
9
|
+
* **accordion:** properly hide content when accordion is closed ([bfb65be](https://github.com/statistikZH/leu/commit/bfb65be83d89b5344c96bd1b10c4b6454c66aee0))
|
|
10
|
+
* **accordion:** use a known property value for margin & formatting ([bfb65be](https://github.com/statistikZH/leu/commit/bfb65be83d89b5344c96bd1b10c4b6454c66aee0))
|
|
11
|
+
* **input:** fix height of inputs with prefix or suffix ([12d6848](https://github.com/statistikZH/leu/commit/12d6848846dd957f7ea8adb0c3dbb11da39a29d0))
|
|
12
|
+
* **select:** don't close the popup when focus leaves the element for now ([74811bc](https://github.com/statistikZH/leu/commit/74811bc481859e8bf3a25bd84eef95d678c171b1))
|
|
13
|
+
|
|
14
|
+
## [0.14.0](https://github.com/statistikZH/leu/compare/v0.13.1...v0.14.0) (2025-02-26)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* **input:** expose checkValidity method ([#270](https://github.com/statistikZH/leu/issues/270)) ([3786a59](https://github.com/statistikZH/leu/commit/3786a59b3b736a41740fd2370dc33e266ec00fac))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Bug Fixes
|
|
23
|
+
|
|
24
|
+
* **checkbox:** display disappeared check icon ([#269](https://github.com/statistikZH/leu/issues/269)) ([b23568f](https://github.com/statistikZH/leu/commit/b23568f3d2957ef755755a8a9fac94fe5c1e08c0))
|
|
25
|
+
* **export:** remove non existing export of the breadcrumbs component ([da5bf4c](https://github.com/statistikZH/leu/commit/da5bf4c337b2b7019ef738de22412ee67c53cb1c))
|
|
26
|
+
* remove breadcrumb component as it isn't part of the design system anymore ([f1d5486](https://github.com/statistikZH/leu/commit/f1d5486261e17981a496ca0be2f63c88a0d99228))
|
|
27
|
+
* **select:** add missing label to the listbox element ([2dff6af](https://github.com/statistikZH/leu/commit/2dff6afd62f00b90dc26fba7ba484a5f3d3dd00b))
|
|
28
|
+
* **select:** reset display value when its value changes ([#266](https://github.com/statistikZH/leu/issues/266)) ([158ed5f](https://github.com/statistikZH/leu/commit/158ed5f48a916f159bb1902b0ae2431df1356253))
|
|
29
|
+
|
|
3
30
|
## [0.13.1](https://github.com/statistikZH/leu/compare/v0.13.0...v0.13.1) (2025-01-16)
|
|
4
31
|
|
|
5
32
|
|
package/README.md
CHANGED
|
@@ -95,73 +95,6 @@ To build a production version of Storybook, run
|
|
|
95
95
|
npm run storybook:build
|
|
96
96
|
```
|
|
97
97
|
|
|
98
|
-
## Create a new component
|
|
99
|
-
|
|
100
|
-
To create a starting point for a new component, run
|
|
101
|
-
|
|
102
|
-
```bash
|
|
103
|
-
./scripts/generate-component/generate.js
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
Running it with `--help` will show you all available options.
|
|
107
|
-
|
|
108
|
-
## Development guidelines
|
|
109
|
-
|
|
110
|
-
A few rules are necessary when developing a component library. The following conventions and guidelines should be followed when new features are implemented.
|
|
111
|
-
|
|
112
|
-
At the same time they're not set in stone. If the there is a good reason to change them open a pull request.
|
|
113
|
-
|
|
114
|
-
### Naming
|
|
115
|
-
|
|
116
|
-
Every element or custom property that will be globally available has to be prefixed with `leu`.
|
|
117
|
-
|
|
118
|
-
```js
|
|
119
|
-
/* Custom elements */
|
|
120
|
-
class LeuRadio extends LeuElement {
|
|
121
|
-
...
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
window.customElements.define("leu-input", LeuInput)
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
```css
|
|
128
|
-
/* CSS custom property of the theme */
|
|
129
|
-
:root {
|
|
130
|
-
--leu-color-black-0: #000;
|
|
131
|
-
}
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
### Scoped styles
|
|
135
|
-
|
|
136
|
-
All CSS declarations have to live inside a custom element. This way we ensure that the styles won't interfere with the environment they're loaded into.
|
|
137
|
-
Styles that are shared between components should be defined as global custom properties inside the `styles/custom-properties.css`.
|
|
138
|
-
When a global custom property is used inside a component it could be a good practice to assign them to a local custom property with a semantic naming.
|
|
139
|
-
This only make a sense when the component has a certain complexity and the global custom property are used multiple times.
|
|
140
|
-
|
|
141
|
-
```css
|
|
142
|
-
:host {
|
|
143
|
-
--radio-color-disabled: var(--leu-color-black-20);
|
|
144
|
-
}
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
### Value property
|
|
148
|
-
|
|
149
|
-
All custom elements that contain a value of some sort have to implement a `value` property.
|
|
150
|
-
Everytime the value of the `value` property changes a `input` event has to be dispatched.
|
|
151
|
-
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.
|
|
152
|
-
|
|
153
|
-
### Custom events
|
|
154
|
-
|
|
155
|
-
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.
|
|
156
|
-
|
|
157
|
-
```js
|
|
158
|
-
this.dispatchEvent(new Event("leu:select", { bubbles: true, composed: true }))
|
|
159
|
-
```
|
|
160
|
-
|
|
161
|
-
### Dependencies
|
|
162
|
-
|
|
163
|
-
Use as little dependencies as possible and as many as needed.
|
|
164
|
-
|
|
165
98
|
## Contributors
|
|
166
99
|
|
|
167
100
|
Thanks to the following people who have contributed to this project
|
|
@@ -18,7 +18,7 @@ export default {
|
|
|
18
18
|
name: "Documentation",
|
|
19
19
|
url: `https://statistikzh.github.io/leu/?path=/story/${tag.replace(
|
|
20
20
|
"leu-",
|
|
21
|
-
""
|
|
21
|
+
"",
|
|
22
22
|
)}`,
|
|
23
23
|
},
|
|
24
24
|
],
|
|
@@ -32,7 +32,7 @@ export default {
|
|
|
32
32
|
name: "Documentation",
|
|
33
33
|
url: `https://statistikzh.github.io/leu/?path=/story/${tag.replace(
|
|
34
34
|
"leu-",
|
|
35
|
-
""
|
|
35
|
+
"",
|
|
36
36
|
)}`,
|
|
37
37
|
}),
|
|
38
38
|
}),
|
package/dist/Accordion.d.ts
CHANGED
|
@@ -28,5 +28,5 @@ export class LeuAccordion extends LeuElement {
|
|
|
28
28
|
_handleToggleClick(): void;
|
|
29
29
|
render(): import("lit-html").TemplateResult;
|
|
30
30
|
}
|
|
31
|
-
import { L as LeuElement } from './LeuElement-
|
|
31
|
+
import { L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
32
32
|
//# sourceMappingURL=Accordion.d.ts.map
|
package/dist/Accordion.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { _ as _defineProperty, L as LeuElement } from './LeuElement-
|
|
1
|
+
import { _ as _defineProperty, L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
2
2
|
import { css, nothing } from 'lit';
|
|
3
|
-
import {
|
|
3
|
+
import { unsafeStatic, html } from 'lit/static-html.js';
|
|
4
4
|
|
|
5
5
|
var css_248z = css`:host {
|
|
6
6
|
--accordion-font-regular: var(--leu-font-family-regular);
|
|
@@ -16,8 +16,6 @@ var css_248z = css`:host {
|
|
|
16
16
|
|
|
17
17
|
--transition: 0.1s ease;
|
|
18
18
|
|
|
19
|
-
font-family: var(--leu-font-family-regular);
|
|
20
|
-
|
|
21
19
|
font-family: var(--accordion-font-regular);
|
|
22
20
|
|
|
23
21
|
position: relative;
|
|
@@ -29,7 +27,7 @@ var css_248z = css`:host {
|
|
|
29
27
|
width: 100%;
|
|
30
28
|
background: none;
|
|
31
29
|
padding: 1rem 0;
|
|
32
|
-
margin:
|
|
30
|
+
margin: 0;
|
|
33
31
|
cursor: pointer;
|
|
34
32
|
|
|
35
33
|
border: none;
|
|
@@ -109,6 +107,8 @@ var css_248z = css`:host {
|
|
|
109
107
|
}
|
|
110
108
|
.contentwrapper[hidden] {
|
|
111
109
|
grid-template-rows: 0fr;
|
|
110
|
+
opacity: 0;
|
|
111
|
+
visibility: hidden;
|
|
112
112
|
}
|
|
113
113
|
slot[name="content"] {
|
|
114
114
|
display: block;
|
|
@@ -125,7 +125,6 @@ slot[name="content"] {
|
|
|
125
125
|
}
|
|
126
126
|
}
|
|
127
127
|
.divider {
|
|
128
|
-
|
|
129
128
|
width: 100%;
|
|
130
129
|
height: 1px;
|
|
131
130
|
margin: 0;
|
|
@@ -133,7 +132,8 @@ slot[name="content"] {
|
|
|
133
132
|
border: none;
|
|
134
133
|
background-color: var(--divider-color);
|
|
135
134
|
|
|
136
|
-
transition:
|
|
135
|
+
transition:
|
|
136
|
+
transform var(--transition), background-color var(--transition);
|
|
137
137
|
}
|
|
138
138
|
:host(:not([open])) .heading:hover ~ .divider {
|
|
139
139
|
background-color: var(--divider-color-active);
|
|
@@ -174,7 +174,7 @@ class LeuAccordion extends LeuElement {
|
|
|
174
174
|
_getHeadingTag() {
|
|
175
175
|
let level = 2;
|
|
176
176
|
if (this.headingLevel > 0 && this.headingLevel < 7) {
|
|
177
|
-
level = this.headingLevel;
|
|
177
|
+
level = Math.floor(this.headingLevel);
|
|
178
178
|
}
|
|
179
179
|
return `h${level}`;
|
|
180
180
|
}
|
package/dist/Button.d.ts
CHANGED
|
@@ -33,7 +33,7 @@ export class LeuButton extends LeuElement {
|
|
|
33
33
|
* @type {("true" | "false" | undefined)}
|
|
34
34
|
*/
|
|
35
35
|
expanded: ("true" | "false" | undefined);
|
|
36
|
-
renderExpandingIcon(): import("lit-html").TemplateResult<1
|
|
36
|
+
renderExpandingIcon(): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
37
37
|
getAriaAttributes(): {
|
|
38
38
|
role: string;
|
|
39
39
|
label: any;
|
|
@@ -41,6 +41,6 @@ export class LeuButton extends LeuElement {
|
|
|
41
41
|
hasTextContent(): boolean;
|
|
42
42
|
render(): import("lit-html").TemplateResult<1>;
|
|
43
43
|
}
|
|
44
|
-
import { L as LeuElement } from './LeuElement-
|
|
44
|
+
import { L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
45
45
|
import { nothing } from 'lit';
|
|
46
46
|
//# sourceMappingURL=Button.d.ts.map
|
package/dist/Button.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { _ as _defineProperty, L as LeuElement } from './LeuElement-
|
|
1
|
+
import { _ as _defineProperty, L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
2
2
|
import { css, html, nothing } from 'lit';
|
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
|
4
4
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
5
|
import { LeuIcon } from './Icon.js';
|
|
6
|
-
import { H as HasSlotController } from './hasSlotController-
|
|
6
|
+
import { H as HasSlotController } from './hasSlotController-CYd5tWew.js';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* All roles that are associated with a aria-checked attribute
|
package/dist/ButtonGroup.d.ts
CHANGED
|
@@ -20,5 +20,5 @@ export class LeuButtonGroup extends LeuElement {
|
|
|
20
20
|
_handleButtonClick(button: any): void;
|
|
21
21
|
render(): import("lit-html").TemplateResult<1>;
|
|
22
22
|
}
|
|
23
|
-
import { L as LeuElement } from './LeuElement-
|
|
23
|
+
import { L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
24
24
|
//# sourceMappingURL=ButtonGroup.d.ts.map
|
package/dist/ButtonGroup.js
CHANGED
package/dist/Checkbox.d.ts
CHANGED
|
@@ -10,5 +10,5 @@ export class LeuCheckbox extends LeuElement {
|
|
|
10
10
|
handleInput(event: any): void;
|
|
11
11
|
render(): import("lit-html").TemplateResult<1>;
|
|
12
12
|
}
|
|
13
|
-
import { L as LeuElement } from './LeuElement-
|
|
13
|
+
import { L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
14
14
|
//# sourceMappingURL=Checkbox.d.ts.map
|
package/dist/Checkbox.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["Checkbox.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["Checkbox.js"],"names":[],"mappings":"AAgGA;;GAEG;AACH;IAGI,iBAAoB;IACpB,kBAAqB;IACrB,aAAc;IACd,cAAe;IAEjB,+BAIC;IACD,8BAEC;IACD,+CAgBC;CACF;gCApIqD,0BAA0B"}
|
package/dist/Checkbox.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { _ as _defineProperty, L as LeuElement } from './LeuElement-
|
|
1
|
+
import { _ as _defineProperty, L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
2
2
|
import { css, html } from 'lit';
|
|
3
3
|
import { LeuIcon } from './Icon.js';
|
|
4
4
|
|
|
@@ -20,8 +20,6 @@ var css_248z = css`:host {
|
|
|
20
20
|
align-items: flex-start;
|
|
21
21
|
gap: 0.5rem;
|
|
22
22
|
|
|
23
|
-
font-family: var(--leu-font-family-regular);
|
|
24
|
-
|
|
25
23
|
font-family: var(--checkbox-font-regular);
|
|
26
24
|
}
|
|
27
25
|
|
|
@@ -88,6 +86,7 @@ var css_248z = css`:host {
|
|
|
88
86
|
|
|
89
87
|
.icon {
|
|
90
88
|
position: absolute;
|
|
89
|
+
display: block;
|
|
91
90
|
top: 0;
|
|
92
91
|
left: 0;
|
|
93
92
|
color: var(--checkbox-tick-color);
|
package/dist/CheckboxGroup.d.ts
CHANGED
|
@@ -10,5 +10,5 @@ export class LeuCheckboxGroup extends LeuElement {
|
|
|
10
10
|
handleItems(): void;
|
|
11
11
|
render(): import("lit-html").TemplateResult<1>;
|
|
12
12
|
}
|
|
13
|
-
import { L as LeuElement } from './LeuElement-
|
|
13
|
+
import { L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
14
14
|
//# sourceMappingURL=CheckboxGroup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["CheckboxGroup.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["CheckboxGroup.js"],"names":[],"mappings":"AAmCA;;GAEG;AACH;IAGI,wCAAwC;IACxC,aADW,YAAY,GAAG,UAAU,CACL;IAC/B,aAAe;IAEjB,mBAEC;IACD,yBAEC;IACD,oBAEC;IACD,+CAWC;CACF;gCAlEqD,0BAA0B"}
|
package/dist/CheckboxGroup.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { _ as _defineProperty, L as LeuElement } from './LeuElement-
|
|
1
|
+
import { _ as _defineProperty, L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
2
2
|
import { css, html } from 'lit';
|
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
|
4
4
|
|
|
@@ -6,8 +6,6 @@ var css_248z = css`:host {
|
|
|
6
6
|
--group-font-regular: var(--leu-font-family-regular);
|
|
7
7
|
--group-font-black: var(--leu-font-family-black);
|
|
8
8
|
|
|
9
|
-
font-family: var(--leu-font-family-regular);
|
|
10
|
-
|
|
11
9
|
font-family: var(--group-font-regular);
|
|
12
10
|
}
|
|
13
11
|
|
package/dist/Chip.d.ts
CHANGED
package/dist/Chip.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["Chip.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["Chip.js"],"names":[],"mappings":"AAqJA;IAGI,kBAAqB;CAExB;gCA1JqD,0BAA0B"}
|
package/dist/Chip.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { _ as _defineProperty, L as LeuElement } from './LeuElement-
|
|
1
|
+
import { _ as _defineProperty, L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
|
|
4
4
|
var css_248z = css`:host *::before,
|
|
@@ -31,8 +31,6 @@ var css_248z = css`:host *::before,
|
|
|
31
31
|
|
|
32
32
|
--leu-icon-size: 1rem;
|
|
33
33
|
|
|
34
|
-
font-family: var(--leu-font-family-regular);
|
|
35
|
-
|
|
36
34
|
font-family: var(--chip-font-regular);
|
|
37
35
|
|
|
38
36
|
/* Allow shrinking to achieve text truncation (ellipsis) */
|
package/dist/ChipGroup.d.ts
CHANGED
package/dist/ChipGroup.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipGroup.d.ts","sourceRoot":"","sources":["ChipGroup.js"],"names":[],"mappings":"AA8BA;;;;GAIG;AACH;IAiBM,aAAkB;IAEpB,kBAAqB;IACrB,qBAAqB;IACrB,cAAe;IAKf,6CAA6C;IAC7C,eADW,QAAQ,GAAG,UAAU,GAAG,MAAM,CACA;IA0B3C;;;;OAIG;IACH
|
|
1
|
+
{"version":3,"file":"ChipGroup.d.ts","sourceRoot":"","sources":["ChipGroup.js"],"names":[],"mappings":"AA8BA;;;;GAIG;AACH;IAiBM,aAAkB;IAEpB,kBAAqB;IACrB,qBAAqB;IACrB,cAAe;IAKf,6CAA6C;IAC7C,eADW,QAAQ,GAAG,UAAU,GAAG,MAAM,CACA;IA0B3C;;;;OAIG;IACH,qBAFW,MAAM,EAAE,EAUlB;IAjBD,aAOW,MAAM,EAAE,CALlB;IAiBD;;;;;;OAMG;IACH,yBAMC;IACD,4CAeC;CACF;AA7GD;;;;GAIG;gCA5BmD,0BAA0B"}
|
package/dist/ChipGroup.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { _ as _defineProperty, L as LeuElement } from './LeuElement-
|
|
2
|
-
import {
|
|
1
|
+
import { _ as _defineProperty, L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
2
|
+
import { unsafeStatic, html } from 'lit/static-html.js';
|
|
3
3
|
import { css } from 'lit';
|
|
4
4
|
|
|
5
5
|
var css_248z = css`.label {
|
package/dist/ChipLink.js
CHANGED
package/dist/ChipRemovable.js
CHANGED
package/dist/ChipSelectable.js
CHANGED
package/dist/Dialog.d.ts
CHANGED
|
@@ -13,5 +13,5 @@ export class LeuDialog extends LeuElement {
|
|
|
13
13
|
close(): void;
|
|
14
14
|
render(): import("lit-html").TemplateResult<1>;
|
|
15
15
|
}
|
|
16
|
-
import { L as LeuElement } from './LeuElement-
|
|
16
|
+
import { L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
17
17
|
//# sourceMappingURL=Dialog.d.ts.map
|
package/dist/Dialog.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["Dialog.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["Dialog.js"],"names":[],"mappings":"AAqKA;;GAEG;AACH;IASI,8DAA6B;IAE7B,qBAAqB;IACrB,OADW,MAAM,CACF;IACf,qBAAqB;IACrB,UADW,MAAM,CACC;IAClB,sBAAsB;IACtB,MADW,OAAO,CACD;IAEnB,aAEC;IACD,cAEC;IACD,+CAiCC;CACF;gCAlOqD,0BAA0B"}
|
package/dist/Dialog.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { _ as _defineProperty, L as LeuElement } from './LeuElement-
|
|
2
|
-
import { css,
|
|
1
|
+
import { _ as _defineProperty, L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
2
|
+
import { css, nothing, html } from 'lit';
|
|
3
3
|
import { createRef, ref } from 'lit/directives/ref.js';
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
|
-
import { H as HasSlotController } from './hasSlotController-
|
|
5
|
+
import { H as HasSlotController } from './hasSlotController-CYd5tWew.js';
|
|
6
6
|
import { LeuIcon } from './Icon.js';
|
|
7
7
|
|
|
8
8
|
var css_248z = css`/* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&t=8VgDy9avMRG5aL7s-0 */
|
|
@@ -10,8 +10,6 @@ var css_248z = css`/* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmb
|
|
|
10
10
|
--dialog-font-regular: var(--leu-font-family-regular);
|
|
11
11
|
--dialog-font-black: var(--leu-font-family-black);
|
|
12
12
|
|
|
13
|
-
font-family: var(--leu-font-family-regular);
|
|
14
|
-
|
|
15
13
|
font-family: var(--dialog-font-regular);
|
|
16
14
|
}
|
|
17
15
|
.dialog {
|
package/dist/Dropdown.d.ts
CHANGED
|
@@ -15,5 +15,5 @@ export class LeuDropdown extends LeuElement {
|
|
|
15
15
|
_getMenu(): any;
|
|
16
16
|
render(): import("lit-html").TemplateResult<1>;
|
|
17
17
|
}
|
|
18
|
-
import { L as LeuElement } from './LeuElement-
|
|
18
|
+
import { L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
19
19
|
//# sourceMappingURL=Dropdown.d.ts.map
|
package/dist/Dropdown.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { _ as _defineProperty, L as LeuElement } from './LeuElement-
|
|
2
|
-
import { css,
|
|
1
|
+
import { _ as _defineProperty, L as LeuElement } from './LeuElement-DH0PPSMq.js';
|
|
2
|
+
import { css, nothing, html } from 'lit';
|
|
3
3
|
import { createRef, ref } from 'lit/directives/ref.js';
|
|
4
|
-
import { H as HasSlotController } from './hasSlotController-
|
|
4
|
+
import { H as HasSlotController } from './hasSlotController-CYd5tWew.js';
|
|
5
5
|
import { LeuButton } from './Button.js';
|
|
6
6
|
import { LeuMenu } from './Menu.js';
|
|
7
7
|
import { LeuMenuItem } from './MenuItem.js';
|