diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 6eafecd3e2..e6cf188fd8 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -49,8 +49,8 @@ jobs: - name: Unit Tests run: pnpm -r test:unit - # Tests in sample app are currently failing and hence disabled. - # Remove `--filter @public-ui/components` after tests have been fixed in #7003. + # Tests in sample app are currently failing and hence disabled. + # Remove `--filter @public-ui/components` after tests have been fixed in #7003. - name: E2E Test run: pnpm --filter @public-ui/components test:e2e @@ -69,7 +69,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - package: ['@public-ui/test-tag-name-transformer', '@public-ui/theme-bmf', '@public-ui/theme-default'] + package: ['@public-ui/test-tag-name-transformer', '@public-ui/theme-default'] steps: - uses: actions/checkout@v4 with: diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 4debf83dcf..a18485593e 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -4,7 +4,6 @@ env: access: public npmjs-registry: https://registry.npmjs.org github-registry: https://npm.pkg.github.com - prefix: v2 on: workflow_dispatch: @@ -95,11 +94,11 @@ jobs: git config --local user.email "${{ steps.get-user-id.outputs.user-id }}+${{ steps.app-token.outputs.app-slug }}[bot]@users.noreply.github.com" git config --local user.name "${{ steps.app-token.outputs.app-slug }}[bot]" - - name: Bump versions without dev-tag and with git push + - name: Bump Versions non-dev if: github.event.inputs.tag != 'dev' run: 'HUSKY=0 npx lerna version ${{github.event.inputs.version}} --preid=${{github.event.inputs.label}} --no-private --tag-version-prefix="" -m "chore: release %v" -y --force-publish' - - name: Bump versions with dev-tag and without git push + - name: Bump Versions dev and do not push if: github.event.inputs.tag == 'dev' run: 'HUSKY=0 npx lerna version prerelease --preid=$GITHUB_SHA --no-private --tag-version-prefix="" -m "chore: release %v" -y --force-publish --no-push' @@ -107,97 +106,97 @@ jobs: run: pnpm -r build - name: Build and publish components - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/components env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish adapter angular v15 - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/adapters/angular/v15 env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish adapter angular v16 - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/adapters/angular/v16 env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish adapter angular v17 - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/adapters/angular/v17 env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish adapter angular v18 - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/adapters/angular/v18 env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish adapter react - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/adapters/react env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish adapter react-standalone - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/adapters/react-standalone env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish adapter solid - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/adapters/solid env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish adapter vue - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/adapters/vue env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish adapter preact - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/adapters/preact env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish adapter hydrate - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/adapters/hydrate env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish tools kolibri-cli - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/tools/kolibri-cli env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish theme default - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/themes/default env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish themes - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/themes env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish sample react - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/samples/react env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} NPM_CONFIG_PROVENANCE: true - name: Build and publish tools visual-tests - run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{env.prefix}}-${{github.event.inputs.tag}} + run: pnpm publish --access ${{env.access}} --no-git-checks --tag ${{github.event.inputs.tag}} working-directory: packages/tools/visual-tests env: NODE_AUTH_TOKEN: ${{secrets.NPMJS_GRANULAR_TOKEN}} diff --git a/.gitignore b/.gitignore index b7352f17ab..9a3724ffbe 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,8 @@ dist/ node_modules/ *.log *.tgz + +/packages/components/src/components/*/readme.md +# Diese Readme's wurde nicht in die Doku übernommen. +!/packages/components/src/components/logo/readme.md +!/packages/components/src/components/symbol/readme.md diff --git a/CODE_OF_CONDUCT.de.md b/CODE_OF_CONDUCT.de.md new file mode 100644 index 0000000000..210fea2f97 --- /dev/null +++ b/CODE_OF_CONDUCT.de.md @@ -0,0 +1,82 @@ +```markdown +# Code of Conduct Agreement for Contributors + +## Our Commitment + +We, as members, participants, and leaders of our community, are committed to providing a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender characteristics, identity, and expression, level of experience, education, socioeconomic 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 others +- Respecting differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Taking 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, imagery, or symbolism, and unwelcome sexual attention or advances +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as physical or electronic addresses, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a professional setting + +## Enforcement Responsibilities + +Community leaders are responsible for clarifying and enforcing standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior they deem inappropriate, threatening, or offensive. + +Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, support tickets, 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 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 leadership responsible for enforcement at [kolibri@itzbund.de](mailto:kolibri@itzbund.de). All complaints will be reviewed and investigated promptly and fairly. + +All community leadership is 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 leadership, 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. This includes avoiding interactions in community spaces and 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 form of interaction or public communication with the community. During this time, no public or private interaction with the people involved is allowed, including unsolicited interaction with those enforcing the Code of Conduct. Violating these terms may lead to a permanent ban. + +### 4. Permanent Ban + +**Community Impact**: Demonstrating a pattern of violating community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of groups of people. + +**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 . + +Community Impact Guidelines were inspired by [Mozilla's Code of Conduct Enforcement Ladder][mozilla]. + +For answers to common questions about this Code of Conduct, see the FAQ at (in English). Translations are available at . + +[homepage]: https://www.contributor-covenant.org +[mozilla]: https://github.com/mozilla/inclusion +``` diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index eab9a4ede1..210fea2f97 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,141 +1,82 @@ -# Vereinbarung über Verhaltenskodex für Mitwirkende - -## Unsere Verpflichtung - -Wir als Mitglieder, Teilnehmende und Verantwortliche unserer Gemeinschaft -verpflichten uns, allen Teilnehmenden an dem Projekt und unserer Gemeinschaft -eine belästigungsfreie Beteiligung, unabhängig von Alter, Körpergröße, -Behinderung, ethnischer Zuordnung, Geschlechtermerkmalen, -identität und -ausdruck, -Grad der Erfahrung, Bildung, sozialem Status, Nationalität, persönlicher -Erscheinung, Rasse, Religion oder sexueller Identität und Orientierung -zu ermöglichen. - -Wir verpflichten uns, in einer Weise zu handeln und zu interagieren, die zu -einer offenen, einladenden, vielfältigen, inklusiven und gesunden Gemeinschaft -beiträgt. - -## Unsere Standards +```markdown +# Code of Conduct Agreement for Contributors -Beispiele für Verhaltensweisen, die zu einem positiven Umfeld für unsere -Gemeinschaft beitragen, sind: - -- Einfühlungsvermögen und Freundlichkeit gegenüber anderen Menschen zeigen -- Unterschiedliche Meinungen, Standpunkte und Erfahrungen respektieren -- Konstruktives Feedback geben und würdevoll annehmen -- Verantwortung übernehmen und uns bei denjenigen entschuldigen, die von unseren - Fehlern betroffen sind, und aus den Erfahrungen lernen -- Konzentration auf das, was nicht nur für uns als Individuen, sondern für die - gesamte Gemeinschaft das Beste ist +## Our Commitment -Beispiele für inakzeptables Verhalten sind: +We, as members, participants, and leaders of our community, are committed to providing a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender characteristics, identity, and expression, level of experience, education, socioeconomic status, nationality, personal appearance, race, religion, or sexual identity and orientation. -- Die Verwendung sexualisierter Sprache, Bilder oder Symbolik sowie unerwünschte - Versuche sexueller Annäherung -- Beleidigende oder abwertende Kommentare, persönliche oder politische Angriffe - und Trollen -- Öffentliche oder private Belästigungen -- Das Veröffentlichen von privaten Informationen Anderer, wie zum Beispiel - physische oder elektronische Adressen, ohne deren ausdrückliche Erlaubnis -- Anderes Verhalten, welches in einem professionellen Umfeld begründet als - unangemessen betrachtet werden kann +We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. -## Verantwortlichkeiten bei der Durchsetzung +## Our Standards -Die Gemeinschaftsleitung ist verantwortlich dafür, unsere Standards für ein -akzeptables Verhalten klarzustellen und wird angemessen und fair -korrigierende Maßnahmen ergreifen um auf jegliches Verhalten, das sie für -unangemessen, bedrohlich oder beleidigend hält, zu reagieren. +Examples of behavior that contributes to a positive environment for our community include: -Die Gemeinschaftsleitung hat das Recht und die Verantwortung, Kommentare, -Commits, Code, Wiki-Bearbeitungen, Support-Tickets und andere Beiträge, die -nicht mit diesem Verhaltenskodex vereinbar sind, zu entfernen, zu bearbeiten -oder abzulehnen, und wird die Gründe für eine Mäßigung mitteilen, wenn es -angebracht ist. +- Demonstrating empathy and kindness toward others +- Respecting differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Taking 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 -## **Geltungsbereich** +Examples of unacceptable behavior include: -Dieser Verhaltenskodex gilt für alle Gemeinschaftsbereiche und gilt auch, wenn -eine Einzelperson die Gemeinschaft offiziell in öffentlichen Bereichen vertritt. -Beispiele für die Repräsentation unserer Gemeinschaft sind die Verwendung einer -offiziellen E-Mail-Adresse, das Posten über ein offizielles Social-Media-Konto -oder das Auftreten als ernannte Vertretung bei einer Online- oder -Offline-Veranstaltung. +- The use of sexualized language, imagery, or symbolism, and unwelcome sexual attention or advances +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as physical or electronic addresses, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a professional setting -## Durchsetzung +## Enforcement Responsibilities -Fälle von missbräuchlichem, belästigendem oder anderweitig inakzeptablem -Verhalten können unter [kolibri@itzbund.de](kolibri@itzbund.de) der für die Durchsetzung -zuständigen Gemeinschaftsleitung gemeldet werden. Alle Beschwerden werden -zeitnah und fair geprüft und ermittelt. +Community leaders are responsible for clarifying and enforcing standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior they deem inappropriate, threatening, or offensive. -Die gesamte Gemeinschaftsleitung ist verpflichtet, die Privatsphäre und die -Sicherheit derjenigen, die einen Vorfall gemeldet haben, zu respektieren. +Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, support tickets, and other contributions that are not aligned to this Code of Conduct and will communicate reasons for moderation decisions when appropriate. -## Durchsetzungsrichtlinien +## **Scope** -Die Gemeinschaftsleitung wird sich bei der Bestimmung der Konsequenzen für -jede Handlung, die ihrer Ansicht nach gegen diesen Verhaltenskodex verstößt, an -diese Richtlinien über die Auswirkungen in der Gemeinschaft halten: +This Code of Conduct applies within all community spaces and also applies when an individual is officially representing the community in public spaces. Examples 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. -### 1. Berichtigung +## Enforcement -**Auswirkungen in der Gemeinschaft**: Verwendung unangemessener Sprache oder -anderes Verhalten, das in der Gemeinschaft als unprofessionell oder unwillkommen -gilt. +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leadership responsible for enforcement at [kolibri@itzbund.de](mailto:kolibri@itzbund.de). All complaints will be reviewed and investigated promptly and fairly. -**Folge**: Eine private, schriftliche Verwarnung der Gemeinschaftsleitung, -die Klarheit über die Art des Verstoßes und eine Erklärung dafür bietet, warum -das Verhalten unangemessen war. Eine öffentliche Entschuldigung kann verlangt -werden. +All community leadership is obligated to respect the privacy and security of the reporter of any incident. -### 2. Verwarnung +## Enforcement Guidelines -**Auswirkungen in der Gemeinschaft**: Eine Verletzung durch einen einzelnen -Vorfall oder eine Reihe von Handlungen. +Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: -**Folge**: Eine Warnung mit Konsequenzen bei wiederholtem Fehlverhalten. Keine -Interaktion mit den beteiligten Personen, einschließlich unaufgeforderter -Interaktion mit denjenigen, die den Verhaltenskodex durchsetzen, für einen -bestimmten Zeitraum. Dazu gehört die Vermeidung von Interaktionen in -Gemeinschaftsräumen sowie in externen Kanälen wie sozialen Medien. Ein Verstoß -gegen diese Bedingungen kann zu einem vorübergehenden oder dauerhaften Verbot -führen. +### 1. Correction -### 3. Vorübergehender Ausschluss +**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. -**Auswirkungen in der Gemeinschaft**: Eine schwerwiegende Verletzung von -Gemeinschaftsstandards, einschließlich anhaltend unangemessenen Verhaltens. +**Consequence**: A private, written warning from community leadership, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. -**Folge**: Ein zeitlich begrenztes Verbot jeglicher Art von Interaktion oder -öffentlicher Kommunikation mit der Gemeinschaft. Während dieses Zeitraums ist -keine öffentliche oder private Interaktion mit den beteiligten Personen erlaubt. -Auch keine unaufgeforderte Interaktion mit denjenigen, die den Verhaltenskodex -durchsetzen. Ein Verstoß gegen diese Bedingungen kann zu einem dauerhaften -Verbot führen. +### 2. Warning -### 4. Dauerhafter Ausschluss +**Community Impact**: A violation through a single incident or series of actions. -**Auswirkungen in der Gemeinschaft**: Aufzeigen eines Musters von Verletzungen -der Gemeinschaftsstandards, einschließlich anhaltend unangemessenen Verhaltens, -Belästigung einer Person oder Aggression gegen oder Herabsetzung von Gruppen von -Personen. +**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. This includes avoiding interactions in community spaces and external channels like social media. Violating these terms may lead to a temporary or permanent ban. -**Folge**: Ein dauerhaftes Verbot jeglicher Art von öffentlicher Interaktion -innerhalb der Gemeinschaft. +### 3. Temporary Ban -## Bezug +**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior. -Dieser Verhaltenskodex basiert auf dem [Contributor Covenant][homepage], -Version 2.0, verfügbar unter - +**Consequence**: A temporary ban from any form of interaction or public communication with the community. During this time, no public or private interaction with the people involved is allowed, including unsolicited interaction with those enforcing the Code of Conduct. Violating these terms may lead to a permanent ban. -Community Impact Guidelines wurden von -[Mozillas Code of Conduct Enforcement Ladder][mozilla] inspiriert. +### 4. Permanent Ban -Antworten auf häufig gestellte Fragen zu diesem Verhaltenskodex finden Sie in -den häufig gestellten Fragen unter -(in Englisch). Andere Übersetzungen sind verfügbar unter -. +**Community Impact**: Demonstrating a pattern of violating community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of groups of people. + +**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 . + +Community Impact Guidelines were inspired by [Mozilla's Code of Conduct Enforcement Ladder][mozilla]. + +For answers to common questions about this Code of Conduct, see the FAQ at (in English). Translations are available at . [homepage]: https://www.contributor-covenant.org [mozilla]: https://github.com/mozilla/inclusion +``` diff --git a/KNOWN_ISSUES.md b/KNOWN_ISSUES.md index 3a6e491027..7048d07050 100644 --- a/KNOWN_ISSUES.md +++ b/KNOWN_ISSUES.md @@ -73,3 +73,17 @@ Notably, this issue does not occur with Windows Narrator, which handles empty da There is a Bug Report for this Issue: [VoiceOver reads negative percent values for month, day, and year steppers in ``](https://issuetracker.google.com/issues/361250561?pli=1) + +## Firefox Accessibility Issue with `aria-label` + +Related: [🐞 GitHub issue #7076](https://github.com/public-ui/kolibri/issues/7076) + +The use of `aria-label` or `aria-labelledby` on `` or its nested elements does not work reliably in Firefox. Even applying these attributes directly to `` has no effect, which points to a browser-specific issue with ARIA support in custom elements or shadow DOM contexts. + +### Key Points: +- The issue lies in Firefox's handling of ARIA attributes on custom web components or deeply nested elements. +- This is not related to dynamic announcements (`aria-live`) but specifically to the inability of Firefox to process `aria-label` or `aria-labelledby` correctly in these cases. +- The issue is browser-specific and does not consistently occur in Chrome, Edge, or Safari. + +### Conclusion: +This is a limitation in Firefox’s ARIA implementation. Until it is resolved, alternative strategies like visually hidden text near the element or redundant error messages should be used to ensure accessibility. We have created a ticket for this: [🐞 GitHub issue #7119](https://github.com/public-ui/kolibri/issues/7119) diff --git a/docs/BREAKING_CHANGES.v3.md b/docs/BREAKING_CHANGES.v3.md new file mode 100644 index 0000000000..9f9ef1529b --- /dev/null +++ b/docs/BREAKING_CHANGES.v3.md @@ -0,0 +1,23 @@ +# Breaking Changes for version 3 + +## Introduction + +New major versions of KoliBri are developed with the goal of simplifying maintenance and support and promoting further development. + +For more information, see the [KoliBri Maintenance and Support Strategy](https://github.com/public-ui/kolibri/blob/develop/MIGRATION.md). + +## Components + +### kol-abbr + +- Visually, the tooltip has been replaced by a simple label shown in parentheses after the abbreviation. +- The property `_tooltipAlign` has been removed. + +## Themes + +### BMF-Theme (Bundesministerium der Finanzen) + +- The theme has been removed. +- It will be maintained as a separate repository. +- The maintenance is done by the [DESYBRI](https://www.itzbund.de/desybri)-Team. +- We moved our last code revision to the following repository: https://github.com/public-ui/kolibri-theme-bmf-starter diff --git a/lerna.json b/lerna.json index 5316fea4de..54ab419025 100644 --- a/lerna.json +++ b/lerna.json @@ -15,7 +15,6 @@ "packages/samples/react", "packages/schema", "packages/themes", - "packages/themes/bmf", "packages/themes/default", "packages/themes/ecl", "packages/themes/itzbund", @@ -23,5 +22,5 @@ "packages/tools/visual-tests" ], "useNx": true, - "version": "2.2.0" + "version": "3.0.0-alpha.0" } diff --git a/packages/adapters/angular/v15/package.json b/packages/adapters/angular/v15/package.json index f67c22a83a..20bb908bc0 100644 --- a/packages/adapters/angular/v15/package.json +++ b/packages/adapters/angular/v15/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/angular-v15", - "version": "2.2.0", + "version": "3.0.0-alpha.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/angular/v16/package.json b/packages/adapters/angular/v16/package.json index 7ca14310bf..cbb3c17bc8 100644 --- a/packages/adapters/angular/v16/package.json +++ b/packages/adapters/angular/v16/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/angular-v16", - "version": "2.2.0", + "version": "3.0.0-alpha.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/angular/v17/package.json b/packages/adapters/angular/v17/package.json index 820b64c38b..d61956732d 100644 --- a/packages/adapters/angular/v17/package.json +++ b/packages/adapters/angular/v17/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/angular-v17", - "version": "2.2.0", + "version": "3.0.0-alpha.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/angular/v18/package.json b/packages/adapters/angular/v18/package.json index e511b84624..0fe1c78251 100644 --- a/packages/adapters/angular/v18/package.json +++ b/packages/adapters/angular/v18/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/angular-v18", - "version": "2.2.0", + "version": "3.0.0-alpha.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/hydrate/package.json b/packages/adapters/hydrate/package.json index 431f709ad7..dfd3ba9808 100644 --- a/packages/adapters/hydrate/package.json +++ b/packages/adapters/hydrate/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/hydrate", - "version": "2.2.0", + "version": "3.0.0-alpha.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/preact/package.json b/packages/adapters/preact/package.json index e2e3afa35a..536092defe 100644 --- a/packages/adapters/preact/package.json +++ b/packages/adapters/preact/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/preact", - "version": "2.2.0", + "version": "3.0.0-alpha.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/react-standalone/package.json b/packages/adapters/react-standalone/package.json index 561114e7c6..1e9e5d2e6b 100644 --- a/packages/adapters/react-standalone/package.json +++ b/packages/adapters/react-standalone/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/react-standalone", - "version": "2.2.0", + "version": "3.0.0-alpha.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/react/package.json b/packages/adapters/react/package.json index d45c20e19b..919ed98e24 100644 --- a/packages/adapters/react/package.json +++ b/packages/adapters/react/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/react", - "version": "2.2.0", + "version": "3.0.0-alpha.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/solid/package.json b/packages/adapters/solid/package.json index d98367e3f3..1d5e0c5e18 100644 --- a/packages/adapters/solid/package.json +++ b/packages/adapters/solid/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/solid", - "version": "2.2.0", + "version": "3.0.0-alpha.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/vue/package.json b/packages/adapters/vue/package.json index 9d5094de16..0ccbd4d298 100644 --- a/packages/adapters/vue/package.json +++ b/packages/adapters/vue/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/vue", - "version": "2.2.0", + "version": "3.0.0-alpha.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/components/package.json b/packages/components/package.json index 56879ffb73..3566a019dc 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/components", - "version": "2.2.0", + "version": "3.0.0-alpha.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { @@ -77,6 +77,7 @@ "clsx": "2.1.1", "color-convert": "2.0.1", "color-rgba": "2.4.0", + "lodash-es": "4.17.21", "markdown-it": "14.1.0", "query-selector-all-shadow-root": "0.0.3", "query-selector-shadow-root": "0.0.3", @@ -96,6 +97,7 @@ "@stencil/sass": "3.0.12", "@types/color-convert": "2.0.4", "@types/jest": "26.0.24", + "@types/lodash-es": "4.17.12", "@types/markdown-it": "14.1.2", "@types/mustache": "4.2.5", "@types/pug": "2.0.10", diff --git a/packages/components/src/components/@shared/_kol-alert-mixin.scss b/packages/components/src/components/@shared/_kol-alert-mixin.scss index 346586055d..d4aaacd1db 100644 --- a/packages/components/src/components/@shared/_kol-alert-mixin.scss +++ b/packages/components/src/components/@shared/_kol-alert-mixin.scss @@ -4,22 +4,21 @@ @mixin kol-alert-styles { @layer kol-component { - .kol-alert-wc { + .kol-alert { display: grid; - } - - .kol-alert-wc .heading { - display: flex; - place-items: center; - } - .kol-alert-wc .heading > div { - flex-grow: 1; - } + &__container { + place-items: center; + display: flex; + } + &__container-content { + flex-grow: 1; + } - .close { - /* Visible with forced colors */ - outline: transparent solid rem(1); + &__close-button { + /* Visible with forced colors */ + outline: transparent solid rem(1); + } } } } diff --git a/packages/components/src/components/abbr/abbr.e2e.ts b/packages/components/src/components/abbr/abbr.e2e.ts deleted file mode 100644 index d3edf024b3..0000000000 --- a/packages/components/src/components/abbr/abbr.e2e.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@stencil/playwright'; - -test.describe('kol-abbr', () => { - test('it shows tooltip on hover', async ({ page }) => { - await page.setContent('e.g.'); - const kolAbbr = page.locator('kol-abbr'); - const tooltip = kolAbbr.locator('kol-tooltip-wc kol-span-wc'); - await expect(tooltip).not.toBeVisible(); - await kolAbbr.hover(); - await expect(tooltip).toBeVisible(); - await expect(tooltip).toContainText('for example'); - }); -}); diff --git a/packages/components/src/components/abbr/readme.md b/packages/components/src/components/abbr/readme.md deleted file mode 100644 index feb7da213a..0000000000 --- a/packages/components/src/components/abbr/readme.md +++ /dev/null @@ -1,58 +0,0 @@ -# Abbr - -Die **Abbr**-Komponente implementiert den HTML-Tag `abbr`, wobei hier jedoch der Tooltip barrierefrei ist. -Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Komponente angezeigt und vorgelesen. - -## Konstruktion - -### Code - -```html -

Ich bin eine Abbr mit Tooltip oben.

-

Ich bin eine Abbr mit Tooltip rechts.

-

Ich bin eine Abbr mit Tooltip unten.

-

Ich bin eine Abbr mit Tooltip links.

-``` - -### Beispiel - -

Ich bin eine Abbr mit Tooltip oben.

-

Ich bin eine Abbr mit Tooltip rechts.

-

Ich bin eine Abbr mit Tooltip unten.

-

Ich bin eine Abbr mit Tooltip links.

- -## Verwendung - -### Angabe der Beschreibung zur Abkürzung - -Der Begriff bzw. die Erklärung wird über das Attribut **`_label`** übergeben, die Abkürzung bzw. der erklärungswürdige Begriff kommt zwischen die Tags im HTML. - -### Ausrichtung des Tooltip - -Über das Attribut **`_tooltip-align`** wird die Positionierung des ToolTip, relativ zur Abkürzung, festgelegt. - -## Barrierefreiheit - -Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist. -Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert seine Größe beim Zoomen korrekt. - -## Links und Referenzen - -- - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | ----------- | -| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` | -| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` | - -## Slots - -| Slot | Description | -| ---- | --------------------------------------- | -| | Der Begriff, der erläutert werden soll. | - ---- diff --git a/packages/components/src/components/abbr/shadow.tsx b/packages/components/src/components/abbr/shadow.tsx index ce80fbfdce..66a792f34e 100644 --- a/packages/components/src/components/abbr/shadow.tsx +++ b/packages/components/src/components/abbr/shadow.tsx @@ -1,14 +1,10 @@ import type { JSX } from '@stencil/core'; -import { validateLabel, validateTooltipAlign } from '../../schema'; import { Component, h, Host, Prop, State, Watch } from '@stencil/core'; - -import { nonce } from '../../utils/dev.utils'; -import { KolTooltipWcTag } from '../../core/component-names'; - -import type { AbbrAPI, AbbrStates, LabelPropType, TooltipAlignPropType } from '../../schema'; +import type { AbbrAPI, AbbrStates, LabelPropType } from '../../schema'; +import { validateLabel } from '../../schema'; /** - * @slot - Der Begriff, der erläutert werden soll. + * @slot - The abbreviation (short form). */ @Component({ tag: 'kol-abbr', @@ -18,18 +14,13 @@ import type { AbbrAPI, AbbrStates, LabelPropType, TooltipAlignPropType } from '. shadow: true, }) export class KolAbbr implements AbbrAPI { - private readonly nonce = nonce(); - public render(): JSX.Element { return ( - {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */} - - - - + + - + {this.state._label ? ` (${this.state._label})` : ''} ); } @@ -37,32 +28,12 @@ export class KolAbbr implements AbbrAPI { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ - @Prop() public _label!: LabelPropType; - - /** - * Defines where to show the Tooltip preferably: top, right, bottom or left. - */ - @Prop() public _tooltipAlign?: TooltipAlignPropType = 'top'; + @Prop() public _label?: LabelPropType; - /** - * Die State-Parameter repräsentieren den inneren State - * einer Komponente. - * - * @see: https://stenciljs.com/docs/state - */ @State() public state: AbbrStates = { _label: '', // ⚠ required - _tooltipAlign: 'top', }; - /** - * Die Watch-Methoden dienen der Möglichkeit zur - * Validierung der Werte eines Properties und - * dem Mapping dessen auf einen anderen internen - * State-Typ. - * - * @see: https://stenciljs.com/docs/properties#prop-validation - */ @Watch('_label') public validateLabel(value?: LabelPropType): void { validateLabel(this, value, { @@ -70,13 +41,7 @@ export class KolAbbr implements AbbrAPI { }); } - @Watch('_tooltipAlign') - public validateTooltipAlign(value?: TooltipAlignPropType): void { - validateTooltipAlign(this, value); - } - public componentWillLoad(): void { this.validateLabel(this._label); - this.validateTooltipAlign(this._tooltipAlign); } } diff --git a/packages/components/src/components/abbr/style.scss b/packages/components/src/components/abbr/style.scss index 1a27cd2585..97a26f056d 100644 --- a/packages/components/src/components/abbr/style.scss +++ b/packages/components/src/components/abbr/style.scss @@ -3,11 +3,7 @@ @import '../tooltip/style.scss'; @layer kol-component { - :host { + .kol-abbr { font-size: rem(16); } - - :host > abbr { - cursor: help; - } } diff --git a/packages/components/src/components/abbr/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/abbr/test/__snapshots__/snapshot.spec.tsx.snap index 10bf1f49ff..3d9123da7d 100644 --- a/packages/components/src/components/abbr/test/__snapshots__/snapshot.spec.tsx.snap +++ b/packages/components/src/components/abbr/test/__snapshots__/snapshot.spec.tsx.snap @@ -1,66 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`kol-abbr should render with _label="Text" _tooltipAlign="bottom" 1`] = ` - - - -`; - -exports[`kol-abbr should render with _label="Text" _tooltipAlign="left" 1`] = ` - - - -`; - -exports[`kol-abbr should render with _label="Text" _tooltipAlign="right" 1`] = ` - - - -`; - -exports[`kol-abbr should render with _label="Text" _tooltipAlign="top" 1`] = ` - - - -`; - exports[`kol-abbr should render with _label="Text" 1`] = ` `; diff --git a/packages/components/src/components/abbr/test/snapshot.spec.tsx b/packages/components/src/components/abbr/test/snapshot.spec.tsx index 3e219d2ec8..80c5937ca5 100644 --- a/packages/components/src/components/abbr/test/snapshot.spec.tsx +++ b/packages/components/src/components/abbr/test/snapshot.spec.tsx @@ -4,14 +4,4 @@ import { executeSnapshotTests } from '../../../utils/testing'; import { KolAbbr } from '../shadow'; -executeSnapshotTests( - KolAbbrTag, - [KolAbbr], - [ - { _label: 'Text' }, - { _label: 'Text', _tooltipAlign: 'top' }, - { _label: 'Text', _tooltipAlign: 'left' }, - { _label: 'Text', _tooltipAlign: 'right' }, - { _label: 'Text', _tooltipAlign: 'bottom' }, - ], -); +executeSnapshotTests(KolAbbrTag, [KolAbbr], [{ _label: 'Text' }]); diff --git a/packages/components/src/components/accordion/readme.md b/packages/components/src/components/accordion/readme.md deleted file mode 100644 index 1610f6c64c..0000000000 --- a/packages/components/src/components/accordion/readme.md +++ /dev/null @@ -1,144 +0,0 @@ -# Accordion - -Synonyme: Collapse - -Die **Accordion**-Komponente ist ein Aufklapp-Menü. Klickt man auf den Kopfbereich, bestehend aus Icon und Überschrift, klappt der Inhalt mit zusätzlichen Informationen auf. Somit ist es ein interaktives Navigationselement, welches dazu dient, umfangreiche Inhalte platzsparend darzustellen. - -Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zugeordnete Inhalte angezeigt oder verborgen werden sollen. Sie erlauben umfangreichere Detailinformationen zu einem Oberbegriff, als es aus Gründen der Übersichtlichkeit eigentlich sinnvoll wäre. Sie überlassen es den Besucher:innen selbst, ob sie sich diese Informationen anzeigen lassen möchten. - -## Konstruktion - -### Code - -```html -
- -
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -
- - -
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -
- -
-``` - -### Beispiel - -
- -
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -
- - -
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -
- -
- -## Verwendung - -### Überschrift im Accordion-Tab - -Der Text, der als Überschrift im Accordion-Tab angezeigt werden soll, wird durch das Attribut **`_label`** übergeben. Der Text kann neben Sonderzeichen auch Umlaute oder Leerzeichen enthalten. - -### Überschriftenebene - -Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6** - -### Inhalt des Accordion - -Der Hauptinhalt des Accordions wird über deb Slot übergeben. - -**`Accordion-Inhalt`** - -### Accordion geöffnet anzeigen - -Standardmäßig wird das Accordion nach dem Laden der Seite im geschlossenen Zustand angezeigt. Soll das Accordion geöffnet angezeigt werden, setzen Sie das Attribut **\_open** zusätzlich ein. - -### Best practices - -- Verwenden Sie ein Accordion, um lange Textabschnitte unter einem thematischen Oberbegriff zusammenzufassen -- Verwenden Sie ein Accordion, um weniger wichtige Informationen, als Ergänzung zu Hauptinformationen, zur Verfügung zu stellen. -- Mit einem Accordion können Sie die Länge Ihrer Webseite deutlich reduzieren und stellen gleichzeitig die Erreichbarkeit aller Informationen für die Nutzer:innen sicher. -- Verwenden Sie eindeutige Überschriften, um die Nutzer:innen auf die weiteren Informationen des Accordions hinzuweisen. -- Vermeiden Sie, wichtige `Call-To-Action`-Elemente innerhalb eines Accordions zu verbergen. -- Lassen Sie Fehlermeldungen nicht innerhalb des Accordions anzeigen, um zu vermeiden, dass Nutzer:innen wichtige Informationen übersehen. -- Verwenden Sie ein Accordion nicht als Auswahl-Element für Nutzer:innen. -- Verwenden Sie ein Accordion nicht, um wichtige Informationen zu rechtlichen Angaben oder zum Datenschutz anzuzeigen. - -### Anwendungsfälle - -- Häufig gestellte Fragen (FAQ) - -## Barrierefreiheit - -In der **Accordion**-Komponente wird das Öffnen-/Schließen-Icon links ausgerichtet, um Nutzer:innen mit eingeschränktem Sichtfeld eine bessere Bedienbarkeit zu ermöglichen. - -Es wurde bewusst auf die Verwendung von Icons, wie z.B. `<` oder `>` verzichtet. Die Verwendung der Icons `+` und `-` gewährleistet eine bessere Sicht- und Erkennbarkeit bezüglich des Geöffnet- und Geschlossen-Status. - -Bei der farblichen Gestaltung wurde besonders Wert auf einen höchstmöglichen Kontrast in der -Standardansicht gelegt. - -### Tastatursteuerung - -| Taste | Funktion | -| ------- | ---------------------------------------------------- | -| `Tab` | Springt die einzelnen Accordion-Tabs an. | -| `Enter` | Öffnet bzw. schließt den fokussierten Accordion-Tab. | - -## Links und Referenzen - -- - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ----------- | -| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \| undefined` | `false` | -| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` | -| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1` | -| `_on` | -- | Gibt die EventCallback-Funktionen an. | `undefined \| { onClick?: EventValueOrEventCallback \| undefined; }` | `undefined` | -| `_open` | `_open` | If set (to true) opens/expands the element, closes if not set (or set to false). | `boolean \| undefined` | `false` | - -## Methods - -### `focus() => Promise` - -**[DEPRECATED]** Use kolFocus instead.

- -#### Returns - -Type: `Promise` - -### `kolFocus() => Promise` - -#### Returns - -Type: `Promise` - -## Slots - -| Slot | Description | -| ---- | ------------------------------------------------------------------------------- | -| | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions. | - ---- diff --git a/packages/components/src/components/accordion/shadow.tsx b/packages/components/src/components/accordion/shadow.tsx index b14820d168..c4c2375372 100644 --- a/packages/components/src/components/accordion/shadow.tsx +++ b/packages/components/src/components/accordion/shadow.tsx @@ -1,5 +1,5 @@ // https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml -import { Component, h, Host, Method, Prop, State, Watch } from '@stencil/core'; +import { Component, h, Method, Prop, State, Watch } from '@stencil/core'; import type { JSX } from '@stencil/core'; import type { AccordionAPI, @@ -71,7 +71,7 @@ export class KolAccordion implements AccordionAPI, FocusableElement { public render(): JSX.Element { const { _open, _label, _disabled, _level } = this.state; - const rootClass = 'accordion'; + const rootClass = 'kol-accordion'; const props: CollapsibleProps = { id: this.nonce, @@ -94,11 +94,9 @@ export class KolAccordion implements AccordionAPI, FocusableElement { }; return ( - - - - - + + + ); } diff --git a/packages/components/src/components/accordion/style.scss b/packages/components/src/components/accordion/style.scss index 77d39a4902..20ab484764 100644 --- a/packages/components/src/components/accordion/style.scss +++ b/packages/components/src/components/accordion/style.scss @@ -4,7 +4,7 @@ @import '../../functional-components/Collapsible/collapsible'; @layer kol-component { - :host { + .kol-accordion { font-size: rem(16); } } diff --git a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap index 11f80f1f90..3b870dabd3 100644 --- a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap +++ b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=false _disabled=false 1`] = ` - +