Fix typos in technical documentation and static pages/components

README.md

@@ -9,7 +9,7 @@
 [![Coverage Status](https://coveralls.io/repos/github/emdgroup-liquid/liquid/badge.svg?branch=main)](https://coveralls.io/github/emdgroup-liquid/liquid?branch=main)
 [![Open in GitHub Codespaces](https://img.shields.io/badge/Open%20in-GitHub%20Codespaces-black?style=flat&color=24292F)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=344421806&machine=standardLinux32gb&location=WestEurope)
 
-Liquid is a UI component library based on the [Liquid Design System](<https://www.figma.com/file/8GYcAOePm8Tt9qqJ7Gnv99/Liquid-Oxygen-(Share)?node-id=3%3A14310>), focusing on accessibility and interoperability. It is built with [Stencil.js](https://stenciljs.com) and contains, inter alia, CSS Components and Web Components, bundled in several bundle formats, which you can use in a wide veriaty of plattforms and projects.
+Liquid is a UI component library based on the [Liquid Design System](<https://www.figma.com/file/8GYcAOePm8Tt9qqJ7Gnv99/Liquid-Oxygen-(Share)?node-id=3%3A14310>), focusing on accessibility and interoperability. It is built with [Stencil.js](https://stenciljs.com) and contains, inter alia, CSS Components and Web Components, bundled in several bundle formats, which you can use in a wide variety of platforms and projects.
 
 ## Links
 

src/docs/components/docs-deprecation-banner/docs-deprecation-banner.tsx

@@ -133,7 +133,7 @@ export class DocsDeprecationBanner {
 
         <div class="docs-deprecation-banner__text">
           <div>
-            Liquid Oxygen will shortly be depreciated. Please use Liquid Carbon
+            Liquid Oxygen will shortly be deprecated. Please use Liquid Carbon
             from now on.
           </div>
           <a href="https://carbon.merck.design/">Go to Liquid Carbon</a>

src/docs/pages/global/typography.md

@@ -9,7 +9,7 @@ permalink: global/typography/
 
 # Typography
 
-The typography globals consist of CSS custom properties, which you can use to either apply a `font-family` or a `font` value (combining `font-size`, `line-height` and `font-familily`) and a text-rendering setting.
+The typography globals consist of CSS custom properties, which you can use to either apply a `font-family` or a `font` value (combining `font-size`, `line-height` and `font-family`) and a text-rendering setting.
 
 <ld-notice headline="Note" mode="warning">
   <ld-link href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering" target="_blank">text-rendering</ld-link> is set to <code>geometricPrecision</code> by default. If you run into performance issues on text-heavy pages, set the CSS custom property <code>--ld-text-rendering</code> to <code>auto</code> on the <code>body</code> tag.

src/docs/pages/guides/css-vs-web-components.md

@@ -23,7 +23,7 @@ Both look the same, so which one should you use?
 
 ## When to use what
 
-There are a few points to concider, when deciding on one of the two options or a mix of both:
+There are a few points to consider, when deciding on one of the two options or a mix of both:
 
 - **Convenience**: Most Liquid Web Components are much more "compact" when it comes to the amount of code that you have to write than with their CSS counterparts. Your code becomes more readable. Additionally, you may benefit from [type checking and intellisense](guides/type-checking-and-intellisense/).
 
@@ -33,7 +33,7 @@ There are a few points to concider, when deciding on one of the two options or a
 
 - **Functionality / feature set**: We always try to offer both, a Web Component and an equivalent CSS Component, but it is not always possible to achieve the same feature set when not having JavaScript to our disposal. CSS can do only so much. Therefore, some more complex components offer more features as Web Components, while coming with a lighweight / less feature rich CSS Component fallback. 
 
-- **Performance**: Web Components always come with a performance cost, because they require JavaScript to load and execute in the browser. If you are experiencing performance issues because you are using lots of Web Components on one single page (i.e. rendering a long list / table with components in each row and cell), you may concider either re-thinking your UI or using CSS Components.
+- **Performance**: Web Components always come with a performance cost, because they require JavaScript to load and execute in the browser. If you are experiencing performance issues because you are using lots of Web Components on one single page (i.e. rendering a long list / table with components in each row and cell), you may consider either re-thinking your UI or using CSS Components.
 
 With all that in mind, you'll need to make a choice case by case.
 

src/docs/pages/guides/troubleshooting/popped-out-element-is-rendered-in-wrong-container.md

@@ -60,7 +60,7 @@ export default function App() {
         open={open}
         ref={modalRef}
       >
-        <LdTypo slot="header">We make a fruit salat!</LdTypo>
+        <LdTypo slot="header">We make a fruit salad!</LdTypo>
         <LdSelect
           name="fruit"
           placeholder="Pick a fruit"

src/docs/pages/guides/type-checking-and-intellisense.md

@@ -10,15 +10,15 @@ permalink: guides/type-checking-and-intellisense/
 
 # Type checking and intellisense
 
-Liquid comes with Typescript type definitions and hense allows for type checking and intellisense. Both is currently supported in JSX and plain HTML only and an additional setup step is required.
+Liquid comes with Typescript type definitions and hence allows for type checking and intellisense. Both is currently supported in JSX and plain HTML only and an additional setup step is required.
 
 ## With JSX
 
 Typescript checks expressions in JSX. Since it does not “know about” Liquid Web Components, it will “complain” as soon as it “sees” one with an error message like the following:
 
 > Property 'ld-button' does not exist on type 'JSX.IntrinsicElements'
 
-In order to let Typescript “know about” Liquid Web Components, you'll have to decalare a JSX namespace including all Liquid components:
+In order to let Typescript “know about” Liquid Web Components, you'll have to declare a JSX namespace including all Liquid components:
 
 ```ts
 import { JSX as LocalJSX } from '@emdgroup-liquid/liquid/dist/loader'
@@ -59,7 +59,7 @@ Type checking is not yet supported in vanilla HTML, but intellisense can be enab
 }
 ```
 
-The format of the referenced JSON file, which includes type information about each Web Component, doesn't follow a common standard, but is Visual Studio Code specific. Discussions on a standard, which eventually will lead to support in more editors, is (at the time of writing) [still ongoing](https://github.com/WICG/webcomponents/issues/776). Probably due to the fact that there is no standard yet, VS Code extensions are not yet making use of the custom data feature. Hense intellisense is not yet working in Vue templates, Svelte markup etc.
+The format of the referenced JSON file, which includes type information about each Web Component, doesn't follow a common standard, but is Visual Studio Code specific. Discussions on a standard, which eventually will lead to support in more editors, is (at the time of writing) [still ongoing](https://github.com/WICG/webcomponents/issues/776). Probably due to the fact that there is no standard yet, VS Code extensions are not yet making use of the custom data feature. Hence intellisense is not yet working in Vue templates, Svelte markup etc.
 
 [Some efforts](https://youtrack.jetbrains.com/issue/WEB-39620) are also being made to enable intellisense for Web Components in Intellij editors, but we are not there yet.
 

src/docs/pages/introduction/why-liquid-oxygen.md

@@ -14,7 +14,7 @@ We are working hard to make Liquid Oxygen a reliable and easy to use component l
 
 ## 1. Design Compliance
 
-All Liquid Oxygen components follow the Liquid Design Guidelines and are build in close coorperation with the Liquid Design Team. Therefore, Liquid Oxygen is the easiest way to make sure your project is compliant with the Liquid Design System.
+All Liquid Oxygen components follow the Liquid Design Guidelines and are built in close cooperation with the Liquid Design Team. Therefore, Liquid Oxygen is the easiest way to make sure your project is compliant with the Liquid Design System.
 
 ## 2. Accessibility
 

src/liquid/components/ld-button/readme.md

@@ -500,7 +500,7 @@ To give a button a custom width, simply assign the `width` or `min-width` CSS pr
   You shouldn't use a button with too much text in it! Instead, put the description in a label outside the button.
 </ld-notice>
 
-You can align the text inside the button using the `align-text` propperty.
+You can align the text inside the button using the `align-text` property.
 
 {% example %}
 <ld-button>

src/liquid/components/ld-checkbox/readme.md

@@ -404,7 +404,7 @@ The checkbox in mode "danger" looks and behaves the same as a checkbox with the
 </label>
 {% endexample %}
 
-Please reffer to the [ld-label](components/ld-label/) docs for more information on the label component.
+Please refer to the [ld-label](components/ld-label/) docs for more information on the label component.
 
 ### With label and input message
 

src/liquid/components/ld-input-message/readme.md

@@ -12,7 +12,7 @@ permalink: components/ld-input-message/
 <link rel="stylesheet" href="{{ env.base }}/{{ buildstamp }}css_components/ld-input-message.css">
 <link rel="stylesheet" href="{{ env.base }}/{{ buildstamp }}css_components/ld-icon.css">
 
-This component is meant to be used in conjunction with the [`ld-input`](components/ld-input/) and the [`ld-label`](components/ld-label/) component. Please reffer to the [`ld-input`](components/ld-input/) docs for further usage examples.
+This component is meant to be used in conjunction with the [`ld-input`](components/ld-input/) and the [`ld-label`](components/ld-label/) component. Please refer to the [`ld-input`](components/ld-input/) docs for further usage examples.
 
 <ld-notice headline="Note" mode="warning">
   The <code>ld-input-message</code> with a mode other than <code>"info"</code> is supposed to be used on white background only, as on other backgrounds the color contrast of the text is insufficient against the background. 

src/liquid/components/ld-input/readme.md

@@ -15,7 +15,7 @@ permalink: components/ld-input/
 
 # ld-input
 
-The `ld-input` component can be used in forms to accept data from the user. While the [native HTML input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) supports a wide variety of types of input data and offers different control widgets, depending on the user agent, this component supports only a subset of the types available in the native HTML input element. All officially supported types of `ld-input` are documented here. Other form input widgets either have been implemented as separate components or may eventually be concidered for implementation in the future.
+The `ld-input` component can be used in forms to accept data from the user. While the [native HTML input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) supports a wide variety of types of input data and offers different control widgets, depending on the user agent, this component supports only a subset of the types available in the native HTML input element. All officially supported types of `ld-input` are documented here. Other form input widgets either have been implemented as separate components or may eventually be considered for implementation in the future.
 
 This component can be used in conjunction with the [`ld-label`](components/ld-label/) and the [`ld-input-message`](components/ld-input-message/) component.
 
@@ -185,7 +185,7 @@ By default, the `ld-input` component is of [type `text`](https://developer.mozil
 
 ### Type email
 
-Triggerts associated keyboard in supporting browsers and devices with dynamic keyboards.
+Triggers associated keyboard in supporting browsers and devices with dynamic keyboards.
 
 {% example %}
 <ld-input placeholder="Your email address" type="email"></ld-input>
@@ -382,7 +382,7 @@ Triggers a telephone keypad in some devices with dynamic keypads.
 
 ### Type url
 
-Triggerts associated keyboard in supporting browsers and devices with dynamic keyboards.
+Triggers associated keyboard in supporting browsers and devices with dynamic keyboards.
 
 {% example %}
 <ld-input placeholder="Your website URL" type="url"></ld-input>
@@ -499,7 +499,7 @@ You can change the way how the multiline input element can be resized by the use
 </label>
 {% endexample %}
 
-Please reffer to the [ld-label](components/ld-label/) docs for more information on the label component.
+Please refer to the [ld-label](components/ld-label/) docs for more information on the label component.
 
 ### With label and input message
 

src/liquid/components/ld-link/readme.md

@@ -13,7 +13,7 @@ permalink: components/ld-link/
 <link rel="stylesheet" href="{{ env.base }}/{{ buildstamp }}css_components/ld-icon.css">
 <link rel="stylesheet" href="{{ env.base }}/{{ buildstamp }}css_components/ld-typo.css">
 
-This component is meant to be used in conjunction with the [`ld-icon`](components/ld-icon/). Please reffer to the [`ld-icon`](components/ld-icon/) docs for further usage examples.
+This component is meant to be used in conjunction with the [`ld-icon`](components/ld-icon/). Please refer to the [`ld-icon`](components/ld-icon/) docs for further usage examples.
 
 ## Examples
 

src/liquid/components/ld-notice/readme.md

@@ -15,7 +15,7 @@ tags:
 <link rel="stylesheet" href="{{ env.base }}/{{ buildstamp }}css_components/ld-icon.css">
 <link rel="stylesheet" href="{{ env.base }}/{{ buildstamp }}css_components/ld-typo.css">
 
-This component is meant to be used in conjunction with the [`ld-input`](components/ld-input/) and the [`ld-label`](components/ld-label/) component. Please reffer to the [`ld-input`](components/ld-input/) docs for further usage examples.
+This component is meant to be used in conjunction with the [`ld-input`](components/ld-input/) and the [`ld-label`](components/ld-label/) component. Please refer to the [`ld-input`](components/ld-input/) docs for further usage examples.
 
 ## Examples
 

src/liquid/components/ld-radio/readme.md

@@ -274,7 +274,7 @@ The radio button in mode "danger" looks and behaves the same as a radio button w
 </label>
 {% endexample %}
 
-Please reffer to the [ld-label](components/ld-label/) docs for more information on the label component.
+Please refer to the [ld-label](components/ld-label/) docs for more information on the label component.
 
 ### With label and input message