Merge branch '6568-expansion-table-selection' of https://github.com/p…

…ublic-ui/kolibri into 6568-expansion-table-selection
public-ui · Jul 18, 2024 · 7de96dd · 7de96dd
2 parents 2bc0618 + 7ef3e2d
commit 7de96dd
Show file tree

Hide file tree

Showing 333 changed files with 1,431 additions and 1,169 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -66,7 +66,7 @@ jobs:
           git config --local user.name "GitHub Action"
 
       - name: Bump Versions
-        run: 'npx lerna version ${{github.event.inputs.version}} --no-private --tag-version-prefix="" -m "chore: release %v" -y'
+        run: 'HUSKY=0 npx lerna version ${{github.event.inputs.version}} --preid=rc --no-private --tag-version-prefix="" -m "chore: release %v" -y --force-publish'
 
       - name: Build
         run: pnpm -r build

diff --git a/.github/workflows/update-snapshots.yml b/.github/workflows/update-snapshots.yml
@@ -14,16 +14,25 @@ on:
 jobs:
   update-snapshots:
     runs-on: ubuntu-latest
-    permissions:
-      # Give the default GITHUB_TOKEN write permission to commit and push the
-      # added or changed files to the repository.
-      contents: write
     steps:
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+
+      - name: Get GitHub App User ID
+        id: get-user-id
+        run: echo "user-id=$(gh api "/users/${{ steps.app-token.outputs.app-slug }}[bot]" --jq .id)" >> "$GITHUB_OUTPUT"
+        env:
+          GH_TOKEN: ${{ steps.app-token.outputs.token }}
+
       - name: Checkout branch
         uses: actions/checkout@v4
         with:
           ref: ${{ github.event.inputs.target_branch }}
           fetch-depth: 0
+          token: ${{ steps.app-token.outputs.token }}
 
       # https://github.com/pnpm/action-setup#use-cache-to-reduce-installation-time
       - name: Install Node.js
@@ -75,3 +84,5 @@ jobs:
         with:
           commit_message: Update all snapshots
           file_pattern: 'packages/themes/**/snapshots/* packages/test-tag-name-transformer/snapshots/*'
+          commit_user_name: '${{ steps.app-token.outputs.app-slug }}[bot]'
+          commit_user_email: '${{ steps.get-user-id.outputs.user-id }}+${{ steps.app-token.outputs.app-slug }}[bot]@users.noreply.github.com'
diff --git a/lerna.json b/lerna.json
@@ -24,5 +24,5 @@
 		"packages/tools/visual-tests"
 	],
 	"useNx": true,
-	"version": "2.1.3"
+	"version": "2.1.4"
 }
diff --git a/packages/adapters/angular/v15/package.json b/packages/adapters/angular/v15/package.json
@@ -1,12 +1,12 @@
 {
 	"name": "@public-ui/angular-v15",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
-    "type": "git",
-    "url": "https://github.com/public-ui/kolibri"
-  },
+		"type": "git",
+		"url": "https://github.com/public-ui/kolibri"
+	},
 	"bugs": {
 		"url": "https://github.com/public-ui/kolibri/issues",
 		"email": "kolibri@itzbund.de"

diff --git a/packages/adapters/angular/v16/package.json b/packages/adapters/angular/v16/package.json
@@ -1,12 +1,12 @@
 {
 	"name": "@public-ui/angular-v16",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
-    "type": "git",
-    "url": "https://github.com/public-ui/kolibri"
-  },
+		"type": "git",
+		"url": "https://github.com/public-ui/kolibri"
+	},
 	"bugs": {
 		"url": "https://github.com/public-ui/kolibri/issues",
 		"email": "kolibri@itzbund.de"

diff --git a/packages/adapters/angular/v17/package.json b/packages/adapters/angular/v17/package.json
@@ -1,12 +1,12 @@
 {
 	"name": "@public-ui/angular-v17",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
-    "type": "git",
-    "url": "https://github.com/public-ui/kolibri"
-  },
+		"type": "git",
+		"url": "https://github.com/public-ui/kolibri"
+	},
 	"bugs": {
 		"url": "https://github.com/public-ui/kolibri/issues",
 		"email": "kolibri@itzbund.de"

diff --git a/packages/adapters/angular/v18/package.json b/packages/adapters/angular/v18/package.json
@@ -1,12 +1,12 @@
 {
 	"name": "@public-ui/angular-v18",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
-    "type": "git",
-    "url": "https://github.com/public-ui/kolibri"
-  },
+		"type": "git",
+		"url": "https://github.com/public-ui/kolibri"
+	},
 	"bugs": {
 		"url": "https://github.com/public-ui/kolibri/issues",
 		"email": "kolibri@itzbund.de"

diff --git a/packages/adapters/hydrate/package.json b/packages/adapters/hydrate/package.json
@@ -1,12 +1,12 @@
 {
 	"name": "@public-ui/hydrate",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
-    "type": "git",
-    "url": "https://github.com/public-ui/kolibri"
-  },
+		"type": "git",
+		"url": "https://github.com/public-ui/kolibri"
+	},
 	"bugs": {
 		"url": "https://github.com/public-ui/kolibri/issues",
 		"email": "kolibri@itzbund.de"

diff --git a/packages/adapters/preact/package.json b/packages/adapters/preact/package.json
@@ -1,12 +1,12 @@
 {
 	"name": "@public-ui/preact",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
-    "type": "git",
-    "url": "https://github.com/public-ui/kolibri"
-  },
+		"type": "git",
+		"url": "https://github.com/public-ui/kolibri"
+	},
 	"bugs": {
 		"url": "https://github.com/public-ui/kolibri/issues",
 		"email": "kolibri@itzbund.de"

diff --git a/packages/adapters/react-standalone/package.json b/packages/adapters/react-standalone/package.json
@@ -1,12 +1,12 @@
 {
 	"name": "@public-ui/react-standalone",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
-    "type": "git",
-    "url": "https://github.com/public-ui/kolibri"
-  },
+		"type": "git",
+		"url": "https://github.com/public-ui/kolibri"
+	},
 	"bugs": {
 		"url": "https://github.com/public-ui/kolibri/issues",
 		"email": "kolibri@itzbund.de"

diff --git a/packages/adapters/react/package.json b/packages/adapters/react/package.json
@@ -1,12 +1,12 @@
 {
 	"name": "@public-ui/react",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
-    "type": "git",
-    "url": "https://github.com/public-ui/kolibri"
-  },
+		"type": "git",
+		"url": "https://github.com/public-ui/kolibri"
+	},
 	"bugs": {
 		"url": "https://github.com/public-ui/kolibri/issues",
 		"email": "kolibri@itzbund.de"

diff --git a/packages/adapters/solid/package.json b/packages/adapters/solid/package.json
@@ -1,12 +1,12 @@
 {
 	"name": "@public-ui/solid",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
-    "type": "git",
-    "url": "https://github.com/public-ui/kolibri"
-  },
+		"type": "git",
+		"url": "https://github.com/public-ui/kolibri"
+	},
 	"bugs": {
 		"url": "https://github.com/public-ui/kolibri/issues",
 		"email": "kolibri@itzbund.de"

diff --git a/packages/adapters/vue/package.json b/packages/adapters/vue/package.json
@@ -1,12 +1,12 @@
 {
 	"name": "@public-ui/vue",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
-    "type": "git",
-    "url": "https://github.com/public-ui/kolibri"
-  },
+		"type": "git",
+		"url": "https://github.com/public-ui/kolibri"
+	},
 	"bugs": {
 		"url": "https://github.com/public-ui/kolibri/issues",
 		"email": "kolibri@itzbund.de"

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/components",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
@@ -85,8 +85,8 @@
 		"@public-ui/stencil-react-output-target": "0.6.0",
 		"@public-ui/stencil-solid-output-target": "0.2.0",
 		"@public-ui/stencil-vue-output-target": "0.9.0",
-		"@stencil/core": "4.18.3",
 		"@stencil-community/postcss": "2.2.0",
+		"@stencil/core": "4.18.3",
 		"@stencil/sass": "3.0.12",
 		"@types/color-convert": "2.0.3",
 		"@types/jest": "26.0.24",

diff --git a/packages/components/src/components/accordion/readme.md b/packages/components/src/components/accordion/readme.md
@@ -1,5 +1,7 @@
 # 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.
@@ -117,6 +119,22 @@ Standardansicht gelegt.
 | `_on`                 | --          | Gibt die EventCallback-Funktionen an.                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<Event, boolean> \| 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<void>`
+
+<span style="color:red">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
+
+#### Returns
+
+Type: `Promise<void>`
+
+### `kolFocus() => Promise<void>`
+
+#### Returns
+
+Type: `Promise<void>`
+
 ## Slots
 
 | Slot | Description                                                                     |

diff --git a/packages/components/src/components/accordion/shadow.tsx b/packages/components/src/components/accordion/shadow.tsx
@@ -1,14 +1,23 @@
 // https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml
 
-import { featureHint, propagateFocus, setState, validateDisabled, validateLabel, validateOpen } from '../../schema';
+import type {
+	AccordionAPI,
+	AccordionStates,
+	DisabledPropType,
+	FocusableElement,
+	HeadingLevel,
+	KoliBriAccordionCallbacks,
+	LabelPropType,
+	OpenPropType,
+} from '../../schema';
+import { featureHint, setState, validateDisabled, validateLabel, validateOpen } from '../../schema';
 import type { JSX } from '@stencil/core';
-import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
+import { Component, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { watchHeadingLevel } from '../heading/validation';
-import { KolHeadingWcTag, KolButtonWcTag } from '../../core/component-names';
+import { KolButtonWcTag, KolHeadingWcTag } from '../../core/component-names';
 
-import type { AccordionAPI, AccordionStates, DisabledPropType, HeadingLevel, KoliBriAccordionCallbacks, LabelPropType, OpenPropType } from '../../schema';
 featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
 
 - onClick auf der KolAccordion anwenden
@@ -27,14 +36,27 @@ featureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);
 	},
 	shadow: true,
 })
-export class KolAccordion implements AccordionAPI {
-	@Element() private readonly host?: HTMLKolDetailsElement;
+export class KolAccordion implements AccordionAPI, FocusableElement {
 	private readonly nonce = nonce();
+	private buttonWcRef?: HTMLKolButtonWcElement;
 
 	private readonly catchRef = (ref?: HTMLKolButtonWcElement) => {
-		propagateFocus(this.host, ref);
+		this.buttonWcRef = ref;
 	};
 
+	/**
+	 * @deprecated Use kolFocus instead.
+	 */
+	@Method()
+	public async focus() {
+		await this.kolFocus();
+	}
+
+	@Method()
+	public async kolFocus() {
+		await this.buttonWcRef?.kolFocus();
+	}
+
 	public render(): JSX.Element {
 		return (
 			<Host class="kol-accordion">

diff --git a/packages/components/src/components/alert/readme.md b/packages/components/src/components/alert/readme.md
@@ -1,5 +1,7 @@
 # Alert
 
+Synonyme: Message
+
 Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie besteht aus einem farblich gestalteten Container, einer Überschrift, einem Inhaltstext sowie einem Icon. Das verwendete Icon und die farbliche Gestaltung sind abhängig vom Typ `_type` des Alert.
 
 ## Konstruktion

diff --git a/packages/components/src/components/avatar/readme.md b/packages/components/src/components/avatar/readme.md
@@ -1,5 +1,7 @@
 # Avatar
 
+Synonyme: Persona
+
 Die **Avatar**-Komponente zeigt entweder ein kleines Bild des Users oder dessen Initialen an, falls kein Bild vorhanden ist.
 
 ## Konstruktion

diff --git a/packages/components/src/components/badge/readme.md b/packages/components/src/components/badge/readme.md
@@ -104,6 +104,6 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 | `_color`              | `_color`        | Defines the backgroundColor and foregroundColor.                                                                   | `string \| undefined \| { backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `'#000'`    |
 | `_icons`              | `_icons`        | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                    | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 | `_label` _(required)_ | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
-| `_smartButton`        | `_smart-button` | Allows to add a button with an arbitrary action within the element (\_hide-label only).                            | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
+| `_smartButton`        | `_smart-button` | Allows to add a button with an arbitrary action within the element (\_hide-label only).                            | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _ariaExpanded?: boolean \| undefined; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
 
 ---
diff --git a/packages/components/src/components/button-link/readme.md b/packages/components/src/components/button-link/readme.md
@@ -64,18 +64,32 @@ kolibriElement._on = {
 | `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                     | `string`                                                                                                                                               | `undefined` |
 | `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
 | `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                      | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| undefined; }` | `undefined` |
-| `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                              | `"button" \| "link" \| "tab" \| undefined`                                                                                                             | `undefined` |
+| `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                              | `"button" \| "link" \| "tab" \| "treeitem" \| undefined`                                                                                               | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                 | `number \| undefined`                                                                                                                                  | `undefined` |
 | `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                        | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                  | `'top'`     |
 | `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                                               | `"button" \| "reset" \| "submit" \| undefined`                                                                                                         | `'button'`  |
 | `_value`              | `_value`         | Defines the value that the button emits on click.                                                                                                                                | `boolean \| null \| number \| object \| string \| undefined`                                                                                           | `undefined` |
 
 ## Methods
 
+### `focus() => Promise<void>`
+
+<span style="color:red">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
+
+#### Returns
+
+Type: `Promise<void>`
+
 ### `getValue() => Promise<Stringified<StencilUnknown> | undefined>`
 
 #### Returns
 
 Type: `Promise<Stringified<StencilUnknown>>`
 
+### `kolFocus() => Promise<void>`
+
+#### Returns
+
+Type: `Promise<void>`
+
 ---