feat: added codespell

.codespellrc

@@ -0,0 +1,2 @@
+[codespell]
+skip = *.lock,*.json,node_modules,.git,__snapshots__,./showcases/screen-reader/translations.ts

.config/.codespellignorewords

@@ -0,0 +1 @@
+moz,webkit

.github/workflows/01-lint.yml

@@ -14,6 +14,12 @@ jobs:
       - name: 🔄 Init Cache
         uses: ./.github/actions/npm-cache
 
+      - name: 📖 Check spelling
+        uses: codespell-project/actions-codespell@v2
+        with:
+          ignore_words_file: .config/.codespellignorewords
+          check_filenames: true
+
       - name: ⚡ Run Lint
         run: |
           npm run postinstall --workspace=nuxt-showcase

CODEOWNERS

@@ -1,3 +1,3 @@
 # Global Repository owners
 # see https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/about-code-owners for details of syntax
-* [email protected] [email protected] [email protected] [email protected]
+* [email protected] [email protected] [email protected] [email protected] # codespell:ignore merget

CONTRIBUTING.md

@@ -18,7 +18,7 @@ node node_modules/@db-ux/db-theme-illustrative-icons/build/scripts/index.js
 ```
 
 > [!NOTE]
-> If you missed setting up the `.env`-file before running `npm install`, you may need to re-install your packages to ensure the postinstall scrips are executed for decrypting the fonts and other artifacts (`rm --recursive --force node_modules/@db-ux/db-theme* && npm update @db-ux/db-theme`)
+> If you missed setting up the `.env`-file before running `npm install`, you may need to re-install your packages to ensure the postinstall scripts are executed for decrypting the fonts and other artifacts (`rm --recursive --force node_modules/@db-ux/db-theme* && npm update @db-ux/db-theme`)
 
 ## Start locally
 

docs/adr/adr-02-monorepo.md

@@ -2,7 +2,7 @@
 
 ## Decision and Rationale
 
-To reduce the amount of time spent deploying and linking dependant packages, we combined [base](https://github.com/db-ui/base), [core](https://github.com/db-ui/core) and [elements](https://github.com/db-ui/elements) into a single monorepo, and evolved afterwards regarding new technologies (compare to ADR 01).
+To reduce the amount of time spent deploying and linking dependent packages, we combined [base](https://github.com/db-ui/base), [core](https://github.com/db-ui/core) and [elements](https://github.com/db-ui/elements) into a single monorepo, and evolved afterwards regarding new technologies (compare to ADR 01).
 
 ## Problem description and context
 

docs/how-to-develop-a-component.md

@@ -58,7 +58,7 @@ We use [Mitosis](https://github.com/BuilderIO/Mitosis/tree/main/docs) to develop
 ### Good to know
 
 1. You cannot use functions directly in a Mitosis component. A function has to be inside the `state`. So add your function to the `model.ts` `DBMyAwesomeComponentDefaultState`. Then you can define your component inside the `.tsx` file and use it in the `jsx` with `state.myAwsomeFunction()`.
-2. Try to enable multiple ways of data-binding: For example in `select` you are able to pass in a list of `<option>` via the `props.children` similiar to standard HTML composition, but we also give the developers the possibility to pass in a stripped down option list via another property: `options?: DBSelectOptionType[]`. We populate this with the internal `<For>` from Mitosis.
+2. Try to enable multiple ways of data-binding: For example in `select` you are able to pass in a list of `<option>` via the `props.children` similar to standard HTML composition, but we also give the developers the possibility to pass in a stripped down option list via another property: `options?: DBSelectOptionType[]`. We populate this with the internal `<For>` from Mitosis.
    Why do we do this? We have multiple frameworks and all behave differently. With multiple ways of data-binding we try to provide a JS framework native experience as closely as we can.
 3. Try to parameterize a lot: For example if your component includes an icon button you should give it a text for accessibility. You should provide a default text, so it can't be empty, but you should also let the user change it with a property e.g. `iconButtonText`.
 4. To enable some native functionalities for Vue and Angular (`v-model` and `[(ng-model)]`) you might need to add some extra code to your component. At the generation process you might select `formValue` anyhow, but otherwise take a look at the `input` to see what you need to add to make this work.

docs/research-other-design-systems.md

@@ -24,7 +24,7 @@ We'd like to maintain a list of other design systems that might be interesting f
     - Web Components / StencilJS
 - [Porsche Design System](https://designsystem.porsche.com/v3/)
     - Web Components / StencilJS
-- [Barmer Puls Design System](https://barmer-puls.entw.bconnect.barmer.de/)
+- [Barmer Puls Design System](https://barmer-puls.entw.bconnect.barmer.de/) <!-- codespell:ignore -->
     - React Native
     - [Storybook](https://barmer-puls-react.entw.bconnect.barmer.de/?path=/story/surfaces-accordion--base)
 - [SAP UI5 Web Components](https://sap.github.io/ui5-webcomponents/)
@@ -40,7 +40,7 @@ We'd like to maintain a list of other design systems that might be interesting f
     - HTML & CSS first
     - JavaScript only as an addition, mainly because of that the target are content pages even only
     - Web Components (upcoming)
-- ["Informationstechnikzentrum Bund" Germany / KoliBri steht für "Komponentenbibliothek für die Barrierefreiheit"](https://public-ui.github.io/)
+- ["Informationstechnikzentrum Bund" Germany / KoliBri steht für "Komponentenbibliothek für die Barrierefreiheit"](https://public-ui.github.io/) <!-- codespell:ignore -->
     - Web Components / StencilJS
 - [Washington Post Design System (WPDS)](https://build.washingtonpost.com/)
     - React

docs/research/multi-select.md

@@ -14,7 +14,7 @@
 | [MongoDB.design](https://github.com/mongodb/design)                                     |                                 [combobox](https://www.mongodb.design/component/combobox/live-example)                                  | tags with remove button (tabable) + `input` with `aria-expanded` &`role=combobox` + extra container checkbox group                                                       |
 | [Porsche Design System](https://github.com/porsche-design-system/porsche-design-system) |                          [multi-select](https://designsystem.porsche.com/v3/components/multi-select/examples)                           | tags inside input as `text` + input with filter + extra container and checkbox group                                                                                     |
 | [SBB Lyne](https://github.com/lyne-design-system/lyne-components)                       |                   [multi-select](https://lyne-storybook.app.sbb.ch/?path=/story/elements-sbb-select--multiple-select)                   | only divs + extra container and checkbox group                                                                                                                           |
-| [Shopify Polaris](https://github.com/Shopify/polaris)                                   | [combobox](https://polaris.shopify.com/components/selection-and-input/combobox?example=combobox-with-multi-select-and-vertical-content) | ags with remove button (tabable) + `input` with `aria-expanded` &`role=combobox` + extra container checkbox group                                                        |
+| [Shopify Polaris](https://github.com/Shopify/polaris)                                   | [combobox](https://polaris.shopify.com/components/selection-and-input/combobox?example=combobox-with-multi-select-and-vertical-content) | tags with remove button (tabable) + `input` with `aria-expanded` &`role=combobox` + extra container checkbox group                                                       |
 | [SNCF Design System](https://gitlab.com/SNCF/wcs)                                       |                       [multi-select](https://designmetier-bootstrap.sncf.fr/docs/4.3/components/select/#multiple)                       | sr-only `select` + extra container with list buttons                                                                                                                     |
 | [Telefonica Mistica](https://github.com/Telefonica/mistica-web)                         |                                                                   ❌                                                                    | --                                                                                                                                                                       |
 | [Telekom Scale](https://github.com/telekom/scale)                                       |                                                                   ❌                                                                    | --                                                                                                                                                                       |
@@ -26,5 +26,5 @@
 - [combobox_role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role)
 - [combobox example w3](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)
 
-We should work with the button + checkbox approach. Maybe we can replace `button` with `details` + `summary`. Furthermore, out filtering (search inout) will be inside the dropdown/menu (see design). We may use `DBSelectOptionType` for the checkboxes to reflect groups etc.
+We should work with the button + checkbox approach. Maybe we can replace `button` with `details` + `summary`. Furthermore, out filtering (search input) will be inside the dropdown/menu (see design). We may use `DBSelectOptionType` for the checkboxes to reflect groups etc.
 Tags should be our `DBTag` with close function or a `span` based on the props we should change it like this variant="tags|overflow|amount".

docs/research/tabs.md

@@ -18,7 +18,7 @@
 | [SNCF Design System](https://gitlab.com/SNCF/wcs)                                       |                [navs/tabs](https://designmetier-bootstrap.sncf.fr/docs/4.3/layout/navs/#tabs)                | `nav role="navigation"`,`<ul>`,`<li>`                                                                                                                          |
 | [Telefonica Mistica](https://github.com/Telefonica/mistica-web)                         |               [tabs](https://brandfactory.telefonica.com/d/iSp7b1DkYygv/n-a#/components/tabs)                | `div`, `button role=tab`, no panels                                                                                                                            |
 | [Telekom Scale](https://github.com/telekom/scale)                                       |      [tab-navigation](https://telekom.github.io/scale/?path=/docs/components-tab-navigation--text-icon)      | `div role=tablist`, `span role=tab`, `div role="tabpanel"`                                                                                                     |
-| [Washington Post Design System](https://build.washingtonpost.com/)                      |                           [tabs](https://build.washingtonpost.com/components/tabs)                           | `div role=tablist`, `button role=tab`, `div`, alignement, disabled, overflow, !activationMode!                                                                 |
+| [Washington Post Design System](https://build.washingtonpost.com/)                      |                           [tabs](https://build.washingtonpost.com/components/tabs)                           | `div role=tablist`, `button role=tab`, `div`, alignment, disabled, overflow, !activationMode!                                                                  |
 | [W3C](https://www.w3.org/WAI/ARIA/apg/patterns/)                                        |                        [tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)                        | Tabs -> Tablist = set of tab-elements (serves as label for tabpanel) -> activation displays content of tabpanel; aria and role attributes accurately described |
 
 ## Conclusion
@@ -32,7 +32,7 @@
 
 Findings:
 
-- Some design systems are using `activation-mode=auto/manual` - is this a vaild use-case for design? Default should be `auto` select which first tab selected
+- Some design systems are using `activation-mode=auto/manual` - is this a valid use-case for design? Default should be `auto` select which first tab selected
 - Prop `label` should be a slot to pass in e.g. a `<span>` and a `<DBBadge>`
 - Shall we provide a `badgeNumber` as a default property?
 - `fitted` property should be `width=auto/full`

docs/research/tooltip.md

@@ -14,9 +14,9 @@
 | [MongoDB.design](https://github.com/mongodb/design)                                     |                 [tooltip](https://www.mongodb.design/component/tooltip/example/)                  | wrapping tag, onHover add to dom                                                                |
 | [Porsche Design System](https://github.com/porsche-design-system/porsche-design-system) |                                                ❌                                                 |                                                                                                 |
 | [SBB Lyne](https://github.com/lyne-design-system/lyne-components)                       | [tooltip](https://lyne-storybook.app.sbb.ch/?path=/docs/components-sbb-tooltip-sbb-tooltip--docs) | own component + wrapping trigger                                                                |
-| [Shopify Polaris](https://github.com/Shopify/polaris)                                   |                [tooltip](https://polaris.shopify.com/components/overlays/tooltip)                 | warpping tag + `::after`                                                                        |
+| [Shopify Polaris](https://github.com/Shopify/polaris)                                   |                [tooltip](https://polaris.shopify.com/components/overlays/tooltip)                 | wrapping tag + `::after`                                                                        |
 | [SNCF Design System](https://gitlab.com/SNCF/wcs)                                       |         [tooltips](https://designmetier-bootstrap.sncf.fr/docs/4.3/components/tooltips/)          | `data-toggle="tooltip"` + `data-placement="top"` + `title="Tooltip on top"`, onHover add to dom |
-| [Telefonica Mistica](https://github.com/Telefonica/mistica-web)                         |       [tooltip](https://brandfactory.telefonica.com/d/iSp7b1DkYygv/n-a#/components/tooltip)       | warpping tag + `aria-expand`                                                                    |
+| [Telefonica Mistica](https://github.com/Telefonica/mistica-web)                         |       [tooltip](https://brandfactory.telefonica.com/d/iSp7b1DkYygv/n-a#/components/tooltip)       | wrapping tag + `aria-expand`                                                                    |
 | [Telekom Scale](https://github.com/telekom/scale)                                       |        [tooltip](https://telekom.github.io/scale/?path=/docs/components-tooltip--standard)        | wrapping tag + `open`                                                                           |
 | [Washington Post Design System](https://build.washingtonpost.com/)                      |                  [tooltip](https://build.washingtonpost.com/components/tooltip)                   | wrapping tag + dom                                                                              |
 

packages/components/docs/Backdrop.md

@@ -1,7 +1,7 @@
 # Backdrop
 
 There is no `Backdrop` component.
-If you need a backdrop like the one in `DBDrawer` you sould apply those styles:
+If you need a backdrop like the one in `DBDrawer` you should apply those styles:
 
 ## CSS
 

packages/components/docs/Validation.md

@@ -15,4 +15,4 @@ If you use some framework you can pass the props `invalidMessage` and `validMess
 
 You can use `data-validation|validation="'invalid' | 'valid' | 'no-validation'"` to disable [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
 
-> **Note:** This may lead to problems and inconsistency, only use it if you know what you do, and have specific validation conditions that aren't possible to get defined by the huge range of already existing [validation conditions and patterns through attributs](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation).
+> **Note:** This may lead to problems and inconsistency, only use it if you know what you do, and have specific validation conditions that aren't possible to get defined by the huge range of already existing [validation conditions and patterns through attributes](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation).

packages/components/src/components/accordion-item/index.html

@@ -9,7 +9,9 @@
 		<!-- HTML only component -->
 		<details class="db-accordion-item">
 			<summary>DB Accordion Item</summary>
-			<div class="db-accordion-content">Und hier ist der Content</div>
+			<div class="db-accordion-content" lang="de">
+				Und hier ist der Content <!-- codespell:ignore ist -->
+			</div>
 		</details>
 	</body>
 </html>

packages/components/src/components/input/input.lite.tsx

@@ -241,7 +241,7 @@ export default function DBInput(props: DBInputProps) {
 				form={props.form}
 				pattern={props.pattern}
 				size={props.size}
-				// @ts-expect-error inout has a property autoComplete
+				// @ts-expect-error input has a property autoComplete
 				autoComplete={props.autocomplete}
 				autoFocus={getBoolean(props.autofocus, 'autofocus')}
 				onInput={(event: ChangeEvent<HTMLInputElement>) =>

packages/components/src/components/link/docs/Migration.md

@@ -13,8 +13,8 @@
 
 ### icons
 
-| Before        | Status | After | Description                                                            |
-| ------------- | :----: | ----- | ---------------------------------------------------------------------- |
-| `icon`        |   ❌   | ❌    | not valid anymore use `content` to show interal or external arrow icon |
-| `icononly`    |   ❌   | ❌    |                                                                        |
-| `iconVariant` |   ❌   | ❌    |                                                                        |
+| Before        | Status | After | Description                                                             |
+| ------------- | :----: | ----- | ----------------------------------------------------------------------- |
+| `icon`        |   ❌   | ❌    | not valid anymore use `content` to show internal or external arrow icon |
+| `icononly`    |   ❌   | ❌    |                                                                         |
+| `iconVariant` |   ❌   | ❌    |                                                                         |

packages/foundations/assets/fonts/unicode-eu.txt

@@ -1,4 +1,4 @@
-# compare to https://symbl.cc/de/unicode-table/
+# compare to https://symbl.cc/de/unicode-table/ /// codespell:ignore symbl
 U+0000-024F # Latin (all)
 U+0020,U+0009,U+000A,U+000D # white space characters
 U+00E4,U+00F6,U+00FC,U+00DF # German characters