From 3a42b4d79bbb15e22bce648c2b664862d8810edf Mon Sep 17 00:00:00 2001
From: Ville Eriksson <ville.eriksson@csc.fi>
Date: Thu, 24 Oct 2024 13:40:57 +0300
Subject: [PATCH 1/3] fix(Attributes): Override reserved attributes correctly

---
 package-lock.json                             |   9 +-
 .../components/examples/c-slider/Basic.vue    |   1 +
 .../csc-ui-documentation/layouts/Default.vue  |  11 +
 packages/csc-ui-documentation/package.json    |   3 +-
 .../pages/getting-started/react.vue           | 292 ++++++++++++++++++
 packages/csc-ui/src/components.d.ts           |  36 +--
 .../csc-ui/src/components/c-input/c-input.tsx |  10 +-
 .../csc-ui/src/components/c-input/readme.md   |  57 ++--
 .../src/components/c-slider/c-slider.tsx      |   9 +-
 .../csc-ui/src/components/c-slider/readme.md  |  32 +-
 .../components/c-text-field/c-text-field.tsx  |  11 +-
 .../src/components/c-text-field/readme.md     |  54 ++--
 packages/csc-ui/vscode-data.json              |  12 +-
 13 files changed, 416 insertions(+), 121 deletions(-)
 create mode 100644 packages/csc-ui-documentation/pages/getting-started/react.vue

diff --git a/package-lock.json b/package-lock.json
index e0586da4..9b64cf6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4990,6 +4990,12 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@stackblitz/sdk": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.11.0.tgz",
+      "integrity": "sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ==",
+      "license": "MIT"
+    },
     "node_modules/@stencil-community/eslint-plugin": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@stencil-community/eslint-plugin/-/eslint-plugin-0.8.0.tgz",
@@ -27555,7 +27561,7 @@
     },
     "packages/csc-ui": {
       "name": "@cscfi/csc-ui",
-      "version": "2.2.6",
+      "version": "2.2.8",
       "license": "MIT",
       "dependencies": {
         "@mdi/js": "^7.4.47",
@@ -27602,6 +27608,7 @@
         "@cscfi/csc-ui-vue": "*",
         "@mdi/js": "^7.4.47",
         "@pinia/nuxt": "^0.4.11",
+        "@stackblitz/sdk": "^1.11.0",
         "@vueuse/nuxt": "^10.7.2",
         "nuxt-stencil": "^0.1.1",
         "pinia": "^2.1.7",
diff --git a/packages/csc-ui-documentation/components/examples/c-slider/Basic.vue b/packages/csc-ui-documentation/components/examples/c-slider/Basic.vue
index 57733008..52dcef93 100644
--- a/packages/csc-ui-documentation/components/examples/c-slider/Basic.vue
+++ b/packages/csc-ui-documentation/components/examples/c-slider/Basic.vue
@@ -23,6 +23,7 @@
     <c-slider
       v-model="sliderValue"
       v-control
+      aria-label="Taunos slider"
       label="Monthly usage"
       class="flex-1"
       :labels="showLabels"
diff --git a/packages/csc-ui-documentation/layouts/Default.vue b/packages/csc-ui-documentation/layouts/Default.vue
index 2cceedd4..8e018927 100644
--- a/packages/csc-ui-documentation/layouts/Default.vue
+++ b/packages/csc-ui-documentation/layouts/Default.vue
@@ -47,6 +47,16 @@
           Html page
         </c-sub-navigation-item>
 
+        <c-sub-navigation-item
+          class="capitalize"
+          :active="route?.name === 'getting-started-react'"
+          @keyup.enter="navigateTo('/getting-started/react')"
+          @click="navigateTo('/getting-started/react')"
+        >
+          <c-icon :path="mdiReact" />
+          React
+        </c-sub-navigation-item>
+
         <c-sub-navigation-item
           class="capitalize"
           :active="route?.name === 'getting-started-vue3'"
@@ -140,6 +150,7 @@ import {
   mdiLanguageTypescript,
   mdiMagnify,
   mdiPalette,
+  mdiReact,
   mdiVuejs,
 } from '@mdi/js';
 import { storeToRefs } from 'pinia';
diff --git a/packages/csc-ui-documentation/package.json b/packages/csc-ui-documentation/package.json
index 290da46b..a3faf112 100644
--- a/packages/csc-ui-documentation/package.json
+++ b/packages/csc-ui-documentation/package.json
@@ -4,6 +4,7 @@
     "@cscfi/csc-ui-vue": "*",
     "@mdi/js": "^7.4.47",
     "@pinia/nuxt": "^0.4.11",
+    "@stackblitz/sdk": "^1.11.0",
     "@vueuse/nuxt": "^10.7.2",
     "nuxt-stencil": "^0.1.1",
     "pinia": "^2.1.7",
@@ -48,4 +49,4 @@
   },
   "type": "module",
   "version": "2.0.1"
-}
\ No newline at end of file
+}
diff --git a/packages/csc-ui-documentation/pages/getting-started/react.vue b/packages/csc-ui-documentation/pages/getting-started/react.vue
new file mode 100644
index 00000000..bc44f003
--- /dev/null
+++ b/packages/csc-ui-documentation/pages/getting-started/react.vue
@@ -0,0 +1,292 @@
+<template>
+  <c-card ref="cardRef" class="max-w-screen-xl mx-auto">
+    <c-card-content>
+      <h1 class="text-4xl capitalize font-bold text-primary-600">
+        Usage in React
+      </h1>
+
+      <p><strong>1. Install the required dependencies</strong></p>
+
+      <code-block
+        theme="atom-one-dark"
+        lang="html"
+        code="npm install @cscfi/csc-ui @cscfi/csc-ui-react"
+        code-block-radius="6px"
+        highlightjs
+        persistent-copy-button
+      />
+
+      <p>
+        This command will install the CSC Design system component library
+        <code>@cscfi/csc-ui</code>
+        and the wrapper
+        <code>@cscfi/csc-ui-react</code>
+        which allows the components to support 2-way model binding.
+      </p>
+
+      <p>
+        <strong>
+          2. Add the following line to eg.
+          <code>App.css</code>
+        </strong>
+      </p>
+
+      <code-block
+        theme="atom-one-dark"
+        lang="css"
+        code="@import url('@cscfi/csc-ui-react/css/theme.css');"
+        code-block-radius="6px"
+        highlightjs
+        persistent-copy-button
+      />
+
+      <p>
+        <strong>3. Use in your React components</strong>
+      </p>
+
+      <code-block
+        theme="atom-one-dark"
+        lang="typescript"
+        :code="appTsx"
+        code-block-radius="6px"
+        highlightjs
+        persistent-copy-button
+      />
+
+      <p>
+        <strong>Working example</strong>
+      </p>
+
+      <div id="react-example" />
+    </c-card-content>
+  </c-card>
+</template>
+
+<script setup lang="ts">
+import sdk from '@stackblitz/sdk';
+
+onMounted(() => {
+  sdk.embedProjectId('react-example', 'vitejs-vite-d6igeu', {
+    forceEmbedLayout: true,
+    openFile: 'src/App.tsx',
+  });
+});
+
+const appTsx = `import { useState } from 'react';
+import {
+  CMain,
+  CToolbar,
+  CCscLogo,
+  CSideNavigation,
+  CSideNavigationItem,
+  CSideNavigationTitle,
+  CSubNavigationItem,
+  CPage,
+  CCard,
+  CCardTitle,
+  CCardContent,
+  CCardActions,
+  CTable,
+  CAlert,
+  CButton,
+  CModal,
+  CTextField,
+  CToasts,
+} from '@cscfi/csc-ui-react';
+import { CAlertType, CToastMessage } from '@cscfi/csc-ui';
+import './App.css';
+import { useRef } from 'react';
+
+function App() {
+  const toastRef = useRef<HTMLCToastsElement>(null);
+
+  const [users, setUsers] = useState([
+    { id: 1, name: 'Jason Miller', age: 23 },
+    { id: 2, name: 'Silvia Nyholm', age: 18 },
+    { id: 3, name: 'Mark Samsonov', age: 56 },
+    { id: 4, name: 'Michael Nielsen', age: 29 },
+  ]);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [name, setName] = useState('');
+  const [age, setAge] = useState(0);
+
+  const onAddUser = () => {
+    setUsers([...users, { name, age, id: users.length + 1 }]);
+
+    setIsModalOpen(false);
+
+    const message: CToastMessage = {
+      message: 'New user added',
+    };
+
+    toastRef.current?.addToast(message);
+
+    setName('');
+    setAge(0);
+
+    console.log(name, age);
+  };
+
+  const onOpenDialog = () => {
+    setIsModalOpen(true);
+  };
+
+  const onRemoveUser = (id: number) => {
+    setUsers(users.filter((user) => user.id !== id));
+  };
+
+  const getCurrentYear = () => new Date().getFullYear();
+
+  return (
+    <>
+      <CMain>
+        <CToolbar>
+          <CCscLogo></CCscLogo>
+          CSC UI React
+        </CToolbar>
+
+        <CSideNavigation>
+          <CSideNavigationItem>About</CSideNavigationItem>
+
+          <CSideNavigationTitle>Two level navigation</CSideNavigationTitle>
+
+          <CSideNavigationItem>
+            Examples
+            <CSubNavigationItem>Html</CSubNavigationItem>
+            <CSubNavigationItem>Javascript</CSubNavigationItem>
+          </CSideNavigationItem>
+
+          <CButton style={{ marginRight: '24px' }} slot="bottom" inverted ghost>
+            Logout
+          </CButton>
+        </CSideNavigation>
+
+        <CPage>
+          <CCard>
+            <CCardTitle>Dashboard layout</CCardTitle>
+
+            <CCardContent>
+              <CAlert type={'info' as CAlertType}>
+                <p slot="title">Using the layout</p>
+                The default layout can be disabled using the 'disable-layout'
+                prop
+              </CAlert>
+
+              <CTable responsive>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Id</th>
+
+                      <th>Name</th>
+
+                      <th>Age</th>
+
+                      <th></th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {users.map((user) => (
+                      <tr key={user.id}>
+                        <td>{user.id}</td>
+
+                        <td>{user.name}</td>
+
+                        <td>{user.age}</td>
+
+                        <td>
+                          <div
+                            style={{
+                              display: 'flex',
+                              width: '100%',
+                              justifyContent: 'end',
+                            }}
+                          >
+                            <CButton
+                              size="small"
+                              text
+                              onClick={() => onRemoveUser(user.id)}
+                            >
+                              Delete
+                            </CButton>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                    {!users.length && (
+                      <tr>
+                        <td colSpan={4}>No more users to delete</td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </CTable>
+            </CCardContent>
+
+            <CCardActions>
+              <CButton onClick={() => onOpenDialog()}>Add user</CButton>
+            </CCardActions>
+          </CCard>
+
+          <footer
+            slot="footer"
+            style={{
+              width: '100%',
+              padding: '24px',
+              backgroundColor: 'var(--c-tertiary-200)',
+            }}
+          >
+            {getCurrentYear()} - CSC Design system
+          </footer>
+        </CPage>
+
+        <CModal
+          value={isModalOpen}
+          onChangeValue={(event: CustomEvent<boolean>) =>
+            setIsModalOpen(event.detail)
+          }
+        >
+          <CCard>
+            <CCardTitle>Add a new user</CCardTitle>
+
+            <CCardContent>
+              <p>User Id: {users.length + 1}</p>
+
+              <CTextField
+                label="Name"
+                value={name}
+                onChangeValue={(event: CustomEvent<string>) =>
+                  setName(event.detail)
+                }
+              ></CTextField>
+
+              <CTextField
+                label="Age"
+                type="number"
+                value={age.toString()}
+                onChangeValue={(event: CustomEvent<string>) =>
+                  setAge(+event.detail)
+                }
+              ></CTextField>
+            </CCardContent>
+
+            <CCardActions justify="end">
+              <CButton onClick={() => setIsModalOpen(false)} text>
+                Cancel
+              </CButton>
+              <CButton onClick={() => onAddUser()}>Add user</CButton>
+            </CCardActions>
+          </CCard>
+        </CModal>
+
+        <CToasts ref={toastRef}></CToasts>
+      </CMain>
+    </>
+  );
+}
+
+export default App;
+`;
+</script>
diff --git a/packages/csc-ui/src/components.d.ts b/packages/csc-ui/src/components.d.ts
index ee6c3ff8..f194fda3 100644
--- a/packages/csc-ui/src/components.d.ts
+++ b/packages/csc-ui/src/components.d.ts
@@ -568,15 +568,11 @@ export namespace Components {
         /**
           * Auto focus the input
          */
-        "autofocus": boolean;
+        "automaticFocus": boolean;
         /**
           * Disable the input
          */
         "disabled": boolean;
-        /**
-          * Render a hidden input outside the shadow dom
-         */
-        "form": boolean;
         /**
           * Hide the hint and error messages
          */
@@ -1337,7 +1333,7 @@ export namespace Components {
         /**
           * Aria label
          */
-        "ariaLabel": string;
+        "ariaLabelInternal": string;
         /**
           * Disable tooltip
          */
@@ -1728,10 +1724,6 @@ export namespace Components {
      * @group Form
      */
     interface CTextField {
-        /**
-          * HTML input autocapitalize
-         */
-        "autocapitalize": string;
         /**
           * HTML input autocomplete
          */
@@ -1740,10 +1732,14 @@ export namespace Components {
           * HTML input autocorrect
          */
         "autocorrect": string;
+        /**
+          * HTML input autocapitalize
+         */
+        "automaticCapitalize": string;
         /**
           * Auto focus the input
          */
-        "autofocus": boolean;
+        "automaticFocus": boolean;
         /**
           * Disable the input
          */
@@ -3576,15 +3572,11 @@ declare namespace LocalJSX {
         /**
           * Auto focus the input
          */
-        "autofocus"?: boolean;
+        "automaticFocus"?: boolean;
         /**
           * Disable the input
          */
         "disabled"?: boolean;
-        /**
-          * Render a hidden input outside the shadow dom
-         */
-        "form"?: boolean;
         /**
           * Hide the hint and error messages
          */
@@ -4389,7 +4381,7 @@ declare namespace LocalJSX {
         /**
           * Aria label
          */
-        "ariaLabel"?: string;
+        "ariaLabelInternal"?: string;
         /**
           * Disable tooltip
          */
@@ -4830,10 +4822,6 @@ declare namespace LocalJSX {
      * @group Form
      */
     interface CTextField {
-        /**
-          * HTML input autocapitalize
-         */
-        "autocapitalize"?: string;
         /**
           * HTML input autocomplete
          */
@@ -4842,10 +4830,14 @@ declare namespace LocalJSX {
           * HTML input autocorrect
          */
         "autocorrect"?: string;
+        /**
+          * HTML input autocapitalize
+         */
+        "automaticCapitalize"?: string;
         /**
           * Auto focus the input
          */
-        "autofocus"?: boolean;
+        "automaticFocus"?: boolean;
         /**
           * Disable the input
          */
diff --git a/packages/csc-ui/src/components/c-input/c-input.tsx b/packages/csc-ui/src/components/c-input/c-input.tsx
index fa269de1..74d92874 100644
--- a/packages/csc-ui/src/components/c-input/c-input.tsx
+++ b/packages/csc-ui/src/components/c-input/c-input.tsx
@@ -31,19 +31,13 @@ export class CInput {
   /**
    * Auto focus the input
    */
-  // eslint-disable-next-line @stencil-community/reserved-member-names
-  @Prop() autofocus = false;
+  @Prop({ attribute: 'autofocus' }) automaticFocus = false;
 
   /**
    * Disable the input
    */
   @Prop() disabled = false;
 
-  /**
-   * Render a hidden input outside the shadow dom
-   */
-  @Prop() form = false;
-
   /**
    * Hide the hint and error messages
    */
@@ -228,7 +222,7 @@ export class CInput {
   }
 
   componentDidLoad() {
-    if (this.autofocus) {
+    if (this.automaticFocus) {
       setTimeout(() => {
         this._onFocus(false);
       }, 500);
diff --git a/packages/csc-ui/src/components/c-input/readme.md b/packages/csc-ui/src/components/c-input/readme.md
index b27f1e7e..02aa0cd2 100644
--- a/packages/csc-ui/src/components/c-input/readme.md
+++ b/packages/csc-ui/src/components/c-input/readme.md
@@ -7,35 +7,34 @@
 
 ## Properties
 
-| Property         | Attribute          | Description                                  | Type                                                                                                                                    | Default            |
-| ---------------- | ------------------ | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `active`         | `active`           | Active state                                 | `boolean`                                                                                                                               | `false`            |
-| `autofocus`      | `autofocus`        | Auto focus the input                         | `boolean`                                                                                                                               | `false`            |
-| `disabled`       | `disabled`         | Disable the input                            | `boolean`                                                                                                                               | `false`            |
-| `form`           | `form`             | Render a hidden input outside the shadow dom | `boolean`                                                                                                                               | `false`            |
-| `hideDetails`    | `hide-details`     | Hide the hint and error messages             | `boolean`                                                                                                                               | `false`            |
-| `hint`           | `hint`             | Hint text for the input                      | `string`                                                                                                                                | `''`               |
-| `hostId`         | `id`               | Id of the input                              | `string`                                                                                                                                | `undefined`        |
-| `inputId`        | `input-id`         | Id of the input element                      | `string`                                                                                                                                | `undefined`        |
-| `items`          | --                 | Items for the dropdown                       | `CSelectItem[]`                                                                                                                         | `undefined`        |
-| `itemsPerPage`   | `items-per-page`   | Items per page before adding scroll          | `number`                                                                                                                                | `6`                |
-| `label`          | `label`            | Label of the input                           | `string`                                                                                                                                | `undefined`        |
-| `max`            | `max`              | Maximum value on a numeric input             | `number`                                                                                                                                | `null`             |
-| `min`            | `min`              | Minimum value on a numeric input             | `number`                                                                                                                                | `null`             |
-| `name`           | `name`             | Name of the input                            | `string`                                                                                                                                | `undefined`        |
-| `placeholder`    | `placeholder`      | Placeholder of the input                     | `string`                                                                                                                                | `undefined`        |
-| `readonly`       | `readonly`         | Mark as readonly                             | `boolean`                                                                                                                               | `false`            |
-| `required`       | `required`         | Set the input as required                    | `boolean`                                                                                                                               | `false`            |
-| `rows`           | `rows`             | Rows on the input                            | `number`                                                                                                                                | `1`                |
-| `shadow`         | `shadow`           | Shadow variant of the input                  | `boolean`                                                                                                                               | `false`            |
-| `step`           | `step`             | Step size on a numeric input                 | `number`                                                                                                                                | `null`             |
-| `type`           | `type`             | Type of the input                            | `string`                                                                                                                                | `undefined`        |
-| `valid`          | `valid`            | Set the validíty of the input                | `boolean`                                                                                                                               | `true`             |
-| `validate`       | `validate`         | Manual validation                            | `boolean`                                                                                                                               | `false`            |
-| `validateOnBlur` | `validate-on-blur` | Validate the input on blur                   | `boolean`                                                                                                                               | `false`            |
-| `validation`     | `validation`       | Custom validation message                    | `string`                                                                                                                                | `'Required field'` |
-| `value`          | `value`            | Value of the input                           | `CSelectItem & { ref?: HTMLElement; } \| boolean \| number \| string \| { name: string; value: string \| number; disabled?: boolean; }` | `undefined`        |
-| `variant`        | `variant`          | Variant                                      | `"select" \| "text"`                                                                                                                    | `'text'`           |
+| Property         | Attribute          | Description                         | Type                                                                                                                                    | Default            |
+| ---------------- | ------------------ | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `active`         | `active`           | Active state                        | `boolean`                                                                                                                               | `false`            |
+| `automaticFocus` | `autofocus`        | Auto focus the input                | `boolean`                                                                                                                               | `false`            |
+| `disabled`       | `disabled`         | Disable the input                   | `boolean`                                                                                                                               | `false`            |
+| `hideDetails`    | `hide-details`     | Hide the hint and error messages    | `boolean`                                                                                                                               | `false`            |
+| `hint`           | `hint`             | Hint text for the input             | `string`                                                                                                                                | `''`               |
+| `hostId`         | `id`               | Id of the input                     | `string`                                                                                                                                | `undefined`        |
+| `inputId`        | `input-id`         | Id of the input element             | `string`                                                                                                                                | `undefined`        |
+| `items`          | --                 | Items for the dropdown              | `CSelectItem[]`                                                                                                                         | `undefined`        |
+| `itemsPerPage`   | `items-per-page`   | Items per page before adding scroll | `number`                                                                                                                                | `6`                |
+| `label`          | `label`            | Label of the input                  | `string`                                                                                                                                | `undefined`        |
+| `max`            | `max`              | Maximum value on a numeric input    | `number`                                                                                                                                | `null`             |
+| `min`            | `min`              | Minimum value on a numeric input    | `number`                                                                                                                                | `null`             |
+| `name`           | `name`             | Name of the input                   | `string`                                                                                                                                | `undefined`        |
+| `placeholder`    | `placeholder`      | Placeholder of the input            | `string`                                                                                                                                | `undefined`        |
+| `readonly`       | `readonly`         | Mark as readonly                    | `boolean`                                                                                                                               | `false`            |
+| `required`       | `required`         | Set the input as required           | `boolean`                                                                                                                               | `false`            |
+| `rows`           | `rows`             | Rows on the input                   | `number`                                                                                                                                | `1`                |
+| `shadow`         | `shadow`           | Shadow variant of the input         | `boolean`                                                                                                                               | `false`            |
+| `step`           | `step`             | Step size on a numeric input        | `number`                                                                                                                                | `null`             |
+| `type`           | `type`             | Type of the input                   | `string`                                                                                                                                | `undefined`        |
+| `valid`          | `valid`            | Set the validíty of the input       | `boolean`                                                                                                                               | `true`             |
+| `validate`       | `validate`         | Manual validation                   | `boolean`                                                                                                                               | `false`            |
+| `validateOnBlur` | `validate-on-blur` | Validate the input on blur          | `boolean`                                                                                                                               | `false`            |
+| `validation`     | `validation`       | Custom validation message           | `string`                                                                                                                                | `'Required field'` |
+| `value`          | `value`            | Value of the input                  | `CSelectItem & { ref?: HTMLElement; } \| boolean \| number \| string \| { name: string; value: string \| number; disabled?: boolean; }` | `undefined`        |
+| `variant`        | `variant`          | Variant                             | `"select" \| "text"`                                                                                                                    | `'text'`           |
 
 
 ## Events
diff --git a/packages/csc-ui/src/components/c-slider/c-slider.tsx b/packages/csc-ui/src/components/c-slider/c-slider.tsx
index f3efa462..2c8809dc 100644
--- a/packages/csc-ui/src/components/c-slider/c-slider.tsx
+++ b/packages/csc-ui/src/components/c-slider/c-slider.tsx
@@ -31,8 +31,7 @@ export class CSlider {
   /**
    * Aria label
    */
-  // eslint-disable-next-line @stencil-community/reserved-member-names
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string;
+  @Prop({ attribute: 'aria-label' }) ariaLabelInternal: string;
 
   /**
    * Max value
@@ -176,7 +175,9 @@ export class CSlider {
     return (
       <Host class={classes} style={styles}>
         {!!this.label && (
-          <label class="c-slider__label">{!!this.label && this.label}</label>
+          <label class="c-slider__label">
+            {!!this.label && this.label} {this.ariaLabelInternal}
+          </label>
         )}
 
         <div class="c-slider__wrapper">
@@ -190,7 +191,7 @@ export class CSlider {
 
           <input
             ref={(el) => (this._inputElement = el)}
-            aria-label={this.ariaLabel || this.label}
+            aria-label={this.ariaLabelInternal || this.label}
             aria-valuenow={this.value}
             aria-valuetext={`${this.value}${this.unit}`}
             aria-valuemin={this.min}
diff --git a/packages/csc-ui/src/components/c-slider/readme.md b/packages/csc-ui/src/components/c-slider/readme.md
index 375debf5..9faa6fe8 100644
--- a/packages/csc-ui/src/components/c-slider/readme.md
+++ b/packages/csc-ui/src/components/c-slider/readme.md
@@ -7,22 +7,22 @@
 
 ## Properties
 
-| Property         | Attribute         | Description         | Type               | Default     |
-| ---------------- | ----------------- | ------------------- | ------------------ | ----------- |
-| `ariaLabel`      | `aria-label`      | Aria label          | `string`           | `undefined` |
-| `disableTooltip` | `disable-tooltip` | Disable tooltip     | `boolean`          | `false`     |
-| `disabled`       | `disabled`        | Disable the slider  | `boolean`          | `false`     |
-| `hostId`         | `id`              | Id of the element   | `string`           | `undefined` |
-| `hostName`       | `name`            | Id of the element   | `string`           | `undefined` |
-| `label`          | `label`           | Label of the slider | `string`           | `undefined` |
-| `labels`         | `labels`          | Show tick labels    | `boolean`          | `false`     |
-| `max`            | `max`             | Max value           | `string`           | `'100'`     |
-| `min`            | `min`             | Min value           | `string`           | `'0'`       |
-| `segments`       | `segments`        | Segment count       | `string`           | `'10'`      |
-| `step`           | `step`            | Step                | `string`           | `'1'`       |
-| `ticks`          | `ticks`           | Thow ticks          | `boolean`          | `false`     |
-| `unit`           | `unit`            | Unit                | `string`           | `'%'`       |
-| `value`          | `value`           | Value               | `number \| string` | `'50'`      |
+| Property            | Attribute         | Description         | Type               | Default     |
+| ------------------- | ----------------- | ------------------- | ------------------ | ----------- |
+| `ariaLabelInternal` | `aria-label`      | Aria label          | `string`           | `undefined` |
+| `disableTooltip`    | `disable-tooltip` | Disable tooltip     | `boolean`          | `false`     |
+| `disabled`          | `disabled`        | Disable the slider  | `boolean`          | `false`     |
+| `hostId`            | `id`              | Id of the element   | `string`           | `undefined` |
+| `hostName`          | `name`            | Id of the element   | `string`           | `undefined` |
+| `label`             | `label`           | Label of the slider | `string`           | `undefined` |
+| `labels`            | `labels`          | Show tick labels    | `boolean`          | `false`     |
+| `max`               | `max`             | Max value           | `string`           | `'100'`     |
+| `min`               | `min`             | Min value           | `string`           | `'0'`       |
+| `segments`          | `segments`        | Segment count       | `string`           | `'10'`      |
+| `step`              | `step`            | Step                | `string`           | `'1'`       |
+| `ticks`             | `ticks`           | Thow ticks          | `boolean`          | `false`     |
+| `unit`              | `unit`            | Unit                | `string`           | `'%'`       |
+| `value`             | `value`           | Value               | `number \| string` | `'50'`      |
 
 
 ## Events
diff --git a/packages/csc-ui/src/components/c-text-field/c-text-field.tsx b/packages/csc-ui/src/components/c-text-field/c-text-field.tsx
index ea11b5ba..850f0948 100644
--- a/packages/csc-ui/src/components/c-text-field/c-text-field.tsx
+++ b/packages/csc-ui/src/components/c-text-field/c-text-field.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @stencil-community/reserved-member-names */
 import {
   AttachInternals,
   Component,
@@ -30,12 +29,12 @@ export class CTextField {
   /**
    * Auto focus the input
    */
-  @Prop() autofocus = false;
+  @Prop({ attribute: 'autofocus' }) automaticFocus = false;
 
   /**
    * HTML input autocapitalize
    */
-  @Prop() autocapitalize = '';
+  @Prop({ attribute: 'autocapitalize' }) automaticCapitalize = '';
 
   /**
    * HTML input autocorrect
@@ -240,7 +239,9 @@ export class CTextField {
         max: this.max,
         step: this.step,
         ...(!!this.autocomplete && { autocomplete: this.autocomplete }),
-        ...(!!this.autocapitalize && { autocapitalize: this.autocapitalize }),
+        ...(!!this.automaticCapitalize && {
+          autocapitalize: this.automaticCapitalize,
+        }),
         ...(!!this.autocorrect && { autocorrect: this.autocorrect }),
       },
       textArea: {
@@ -324,7 +325,7 @@ export class CTextField {
     return (
       <Host>
         <c-input
-          autofocus={this.autofocus}
+          autofocus={this.automaticFocus}
           disabled={this.disabled}
           hide-details={this.hideDetails}
           hint={this.hint}
diff --git a/packages/csc-ui/src/components/c-text-field/readme.md b/packages/csc-ui/src/components/c-text-field/readme.md
index 1d11f478..3f3ae7de 100644
--- a/packages/csc-ui/src/components/c-text-field/readme.md
+++ b/packages/csc-ui/src/components/c-text-field/readme.md
@@ -7,33 +7,33 @@
 
 ## Properties
 
-| Property         | Attribute          | Description                           | Type      | Default            |
-| ---------------- | ------------------ | ------------------------------------- | --------- | ------------------ |
-| `autocapitalize` | `autocapitalize`   | HTML input autocapitalize             | `string`  | `''`               |
-| `autocomplete`   | `autocomplete`     | HTML input autocomplete               | `string`  | `''`               |
-| `autocorrect`    | `autocorrect`      | HTML input autocorrect                | `string`  | `''`               |
-| `autofocus`      | `autofocus`        | Auto focus the input                  | `boolean` | `false`            |
-| `disabled`       | `disabled`         | Disable the input                     | `boolean` | `false`            |
-| `hideDetails`    | `hide-details`     | Hide the hint and error messages      | `boolean` | `false`            |
-| `hint`           | `hint`             | Hint text for the input               | `string`  | `''`               |
-| `hostId`         | `id`               | Id of the input                       | `string`  | `undefined`        |
-| `label`          | `label`            | Label of the input                    | `string`  | `undefined`        |
-| `max`            | `max`              | Maximum value on a numeric input      | `number`  | `null`             |
-| `min`            | `min`              | Minimum value on a numeric input      | `number`  | `null`             |
-| `name`           | `name`             | Name of the input                     | `string`  | `undefined`        |
-| `placeholder`    | `placeholder`      | Placeholder of the input              | `string`  | `undefined`        |
-| `readonly`       | `readonly`         | Mark as readonly                      | `boolean` | `false`            |
-| `required`       | `required`         | Set the input as required             | `boolean` | `false`            |
-| `rows`           | `rows`             | Rows on the input                     | `number`  | `1`                |
-| `shadow`         | `shadow`           | Shadow variant of the input           | `boolean` | `false`            |
-| `step`           | `step`             | Step size on a numeric input          | `number`  | `null`             |
-| `trimWhitespace` | `trim-whitespace`  | Trim whitespace from the return value | `boolean` | `false`            |
-| `type`           | `type`             | Type of the input                     | `string`  | `'text'`           |
-| `valid`          | `valid`            | Set the validity of the input         | `boolean` | `true`             |
-| `validate`       | `validate`         | Manual validation                     | `boolean` | `false`            |
-| `validateOnBlur` | `validate-on-blur` | Validate the input on blur            | `boolean` | `false`            |
-| `validation`     | `validation`       | Custom validation message             | `string`  | `'Required field'` |
-| `value`          | `value`            | Value of the input                    | `string`  | `undefined`        |
+| Property              | Attribute          | Description                           | Type      | Default            |
+| --------------------- | ------------------ | ------------------------------------- | --------- | ------------------ |
+| `autocomplete`        | `autocomplete`     | HTML input autocomplete               | `string`  | `''`               |
+| `autocorrect`         | `autocorrect`      | HTML input autocorrect                | `string`  | `''`               |
+| `automaticCapitalize` | `autocapitalize`   | HTML input autocapitalize             | `string`  | `''`               |
+| `automaticFocus`      | `autofocus`        | Auto focus the input                  | `boolean` | `false`            |
+| `disabled`            | `disabled`         | Disable the input                     | `boolean` | `false`            |
+| `hideDetails`         | `hide-details`     | Hide the hint and error messages      | `boolean` | `false`            |
+| `hint`                | `hint`             | Hint text for the input               | `string`  | `''`               |
+| `hostId`              | `id`               | Id of the input                       | `string`  | `undefined`        |
+| `label`               | `label`            | Label of the input                    | `string`  | `undefined`        |
+| `max`                 | `max`              | Maximum value on a numeric input      | `number`  | `null`             |
+| `min`                 | `min`              | Minimum value on a numeric input      | `number`  | `null`             |
+| `name`                | `name`             | Name of the input                     | `string`  | `undefined`        |
+| `placeholder`         | `placeholder`      | Placeholder of the input              | `string`  | `undefined`        |
+| `readonly`            | `readonly`         | Mark as readonly                      | `boolean` | `false`            |
+| `required`            | `required`         | Set the input as required             | `boolean` | `false`            |
+| `rows`                | `rows`             | Rows on the input                     | `number`  | `1`                |
+| `shadow`              | `shadow`           | Shadow variant of the input           | `boolean` | `false`            |
+| `step`                | `step`             | Step size on a numeric input          | `number`  | `null`             |
+| `trimWhitespace`      | `trim-whitespace`  | Trim whitespace from the return value | `boolean` | `false`            |
+| `type`                | `type`             | Type of the input                     | `string`  | `'text'`           |
+| `valid`               | `valid`            | Set the validity of the input         | `boolean` | `true`             |
+| `validate`            | `validate`         | Manual validation                     | `boolean` | `false`            |
+| `validateOnBlur`      | `validate-on-blur` | Validate the input on blur            | `boolean` | `false`            |
+| `validation`          | `validation`       | Custom validation message             | `string`  | `'Required field'` |
+| `value`               | `value`            | Value of the input                    | `string`  | `undefined`        |
 
 
 ## Events
diff --git a/packages/csc-ui/vscode-data.json b/packages/csc-ui/vscode-data.json
index 2ba4c5cc..da6222a7 100644
--- a/packages/csc-ui/vscode-data.json
+++ b/packages/csc-ui/vscode-data.json
@@ -634,10 +634,6 @@
           "name": "disabled",
           "description": "Disable the input"
         },
-        {
-          "name": "form",
-          "description": "Render a hidden input outside the shadow dom"
-        },
         {
           "name": "hide-details",
           "description": "Hide the hint and error messages"
@@ -2089,10 +2085,6 @@
         "value": ""
       },
       "attributes": [
-        {
-          "name": "autocapitalize",
-          "description": "HTML input autocapitalize"
-        },
         {
           "name": "autocomplete",
           "description": "HTML input autocomplete"
@@ -2101,6 +2093,10 @@
           "name": "autocorrect",
           "description": "HTML input autocorrect"
         },
+        {
+          "name": "autocapitalize",
+          "description": "HTML input autocapitalize"
+        },
         {
           "name": "autofocus",
           "description": "Auto focus the input"

From 6b60956527ee1a6ca4b758d3d5ee3cf028824604 Mon Sep 17 00:00:00 2001
From: Ville Eriksson <ville.eriksson@csc.fi>
Date: Thu, 24 Oct 2024 13:40:57 +0300
Subject: [PATCH 2/3] fix(Attributes): Override reserved attributes correctly

---
 package-lock.json                             |   9 +-
 .../csc-ui-documentation/layouts/Default.vue  |  11 +
 packages/csc-ui-documentation/package.json    |   3 +-
 .../pages/getting-started/react.vue           | 292 ++++++++++++++++++
 packages/csc-ui/src/components.d.ts           |  36 +--
 .../csc-ui/src/components/c-input/c-input.tsx |  10 +-
 .../csc-ui/src/components/c-input/readme.md   |  57 ++--
 .../src/components/c-slider/c-slider.tsx      |   9 +-
 .../csc-ui/src/components/c-slider/readme.md  |  32 +-
 .../components/c-text-field/c-text-field.tsx  |  11 +-
 .../src/components/c-text-field/readme.md     |  54 ++--
 packages/csc-ui/vscode-data.json              |  12 +-
 12 files changed, 415 insertions(+), 121 deletions(-)
 create mode 100644 packages/csc-ui-documentation/pages/getting-started/react.vue

diff --git a/package-lock.json b/package-lock.json
index e0586da4..9b64cf6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4990,6 +4990,12 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@stackblitz/sdk": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.11.0.tgz",
+      "integrity": "sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ==",
+      "license": "MIT"
+    },
     "node_modules/@stencil-community/eslint-plugin": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@stencil-community/eslint-plugin/-/eslint-plugin-0.8.0.tgz",
@@ -27555,7 +27561,7 @@
     },
     "packages/csc-ui": {
       "name": "@cscfi/csc-ui",
-      "version": "2.2.6",
+      "version": "2.2.8",
       "license": "MIT",
       "dependencies": {
         "@mdi/js": "^7.4.47",
@@ -27602,6 +27608,7 @@
         "@cscfi/csc-ui-vue": "*",
         "@mdi/js": "^7.4.47",
         "@pinia/nuxt": "^0.4.11",
+        "@stackblitz/sdk": "^1.11.0",
         "@vueuse/nuxt": "^10.7.2",
         "nuxt-stencil": "^0.1.1",
         "pinia": "^2.1.7",
diff --git a/packages/csc-ui-documentation/layouts/Default.vue b/packages/csc-ui-documentation/layouts/Default.vue
index 2cceedd4..8e018927 100644
--- a/packages/csc-ui-documentation/layouts/Default.vue
+++ b/packages/csc-ui-documentation/layouts/Default.vue
@@ -47,6 +47,16 @@
           Html page
         </c-sub-navigation-item>
 
+        <c-sub-navigation-item
+          class="capitalize"
+          :active="route?.name === 'getting-started-react'"
+          @keyup.enter="navigateTo('/getting-started/react')"
+          @click="navigateTo('/getting-started/react')"
+        >
+          <c-icon :path="mdiReact" />
+          React
+        </c-sub-navigation-item>
+
         <c-sub-navigation-item
           class="capitalize"
           :active="route?.name === 'getting-started-vue3'"
@@ -140,6 +150,7 @@ import {
   mdiLanguageTypescript,
   mdiMagnify,
   mdiPalette,
+  mdiReact,
   mdiVuejs,
 } from '@mdi/js';
 import { storeToRefs } from 'pinia';
diff --git a/packages/csc-ui-documentation/package.json b/packages/csc-ui-documentation/package.json
index 290da46b..a3faf112 100644
--- a/packages/csc-ui-documentation/package.json
+++ b/packages/csc-ui-documentation/package.json
@@ -4,6 +4,7 @@
     "@cscfi/csc-ui-vue": "*",
     "@mdi/js": "^7.4.47",
     "@pinia/nuxt": "^0.4.11",
+    "@stackblitz/sdk": "^1.11.0",
     "@vueuse/nuxt": "^10.7.2",
     "nuxt-stencil": "^0.1.1",
     "pinia": "^2.1.7",
@@ -48,4 +49,4 @@
   },
   "type": "module",
   "version": "2.0.1"
-}
\ No newline at end of file
+}
diff --git a/packages/csc-ui-documentation/pages/getting-started/react.vue b/packages/csc-ui-documentation/pages/getting-started/react.vue
new file mode 100644
index 00000000..bc44f003
--- /dev/null
+++ b/packages/csc-ui-documentation/pages/getting-started/react.vue
@@ -0,0 +1,292 @@
+<template>
+  <c-card ref="cardRef" class="max-w-screen-xl mx-auto">
+    <c-card-content>
+      <h1 class="text-4xl capitalize font-bold text-primary-600">
+        Usage in React
+      </h1>
+
+      <p><strong>1. Install the required dependencies</strong></p>
+
+      <code-block
+        theme="atom-one-dark"
+        lang="html"
+        code="npm install @cscfi/csc-ui @cscfi/csc-ui-react"
+        code-block-radius="6px"
+        highlightjs
+        persistent-copy-button
+      />
+
+      <p>
+        This command will install the CSC Design system component library
+        <code>@cscfi/csc-ui</code>
+        and the wrapper
+        <code>@cscfi/csc-ui-react</code>
+        which allows the components to support 2-way model binding.
+      </p>
+
+      <p>
+        <strong>
+          2. Add the following line to eg.
+          <code>App.css</code>
+        </strong>
+      </p>
+
+      <code-block
+        theme="atom-one-dark"
+        lang="css"
+        code="@import url('@cscfi/csc-ui-react/css/theme.css');"
+        code-block-radius="6px"
+        highlightjs
+        persistent-copy-button
+      />
+
+      <p>
+        <strong>3. Use in your React components</strong>
+      </p>
+
+      <code-block
+        theme="atom-one-dark"
+        lang="typescript"
+        :code="appTsx"
+        code-block-radius="6px"
+        highlightjs
+        persistent-copy-button
+      />
+
+      <p>
+        <strong>Working example</strong>
+      </p>
+
+      <div id="react-example" />
+    </c-card-content>
+  </c-card>
+</template>
+
+<script setup lang="ts">
+import sdk from '@stackblitz/sdk';
+
+onMounted(() => {
+  sdk.embedProjectId('react-example', 'vitejs-vite-d6igeu', {
+    forceEmbedLayout: true,
+    openFile: 'src/App.tsx',
+  });
+});
+
+const appTsx = `import { useState } from 'react';
+import {
+  CMain,
+  CToolbar,
+  CCscLogo,
+  CSideNavigation,
+  CSideNavigationItem,
+  CSideNavigationTitle,
+  CSubNavigationItem,
+  CPage,
+  CCard,
+  CCardTitle,
+  CCardContent,
+  CCardActions,
+  CTable,
+  CAlert,
+  CButton,
+  CModal,
+  CTextField,
+  CToasts,
+} from '@cscfi/csc-ui-react';
+import { CAlertType, CToastMessage } from '@cscfi/csc-ui';
+import './App.css';
+import { useRef } from 'react';
+
+function App() {
+  const toastRef = useRef<HTMLCToastsElement>(null);
+
+  const [users, setUsers] = useState([
+    { id: 1, name: 'Jason Miller', age: 23 },
+    { id: 2, name: 'Silvia Nyholm', age: 18 },
+    { id: 3, name: 'Mark Samsonov', age: 56 },
+    { id: 4, name: 'Michael Nielsen', age: 29 },
+  ]);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [name, setName] = useState('');
+  const [age, setAge] = useState(0);
+
+  const onAddUser = () => {
+    setUsers([...users, { name, age, id: users.length + 1 }]);
+
+    setIsModalOpen(false);
+
+    const message: CToastMessage = {
+      message: 'New user added',
+    };
+
+    toastRef.current?.addToast(message);
+
+    setName('');
+    setAge(0);
+
+    console.log(name, age);
+  };
+
+  const onOpenDialog = () => {
+    setIsModalOpen(true);
+  };
+
+  const onRemoveUser = (id: number) => {
+    setUsers(users.filter((user) => user.id !== id));
+  };
+
+  const getCurrentYear = () => new Date().getFullYear();
+
+  return (
+    <>
+      <CMain>
+        <CToolbar>
+          <CCscLogo></CCscLogo>
+          CSC UI React
+        </CToolbar>
+
+        <CSideNavigation>
+          <CSideNavigationItem>About</CSideNavigationItem>
+
+          <CSideNavigationTitle>Two level navigation</CSideNavigationTitle>
+
+          <CSideNavigationItem>
+            Examples
+            <CSubNavigationItem>Html</CSubNavigationItem>
+            <CSubNavigationItem>Javascript</CSubNavigationItem>
+          </CSideNavigationItem>
+
+          <CButton style={{ marginRight: '24px' }} slot="bottom" inverted ghost>
+            Logout
+          </CButton>
+        </CSideNavigation>
+
+        <CPage>
+          <CCard>
+            <CCardTitle>Dashboard layout</CCardTitle>
+
+            <CCardContent>
+              <CAlert type={'info' as CAlertType}>
+                <p slot="title">Using the layout</p>
+                The default layout can be disabled using the 'disable-layout'
+                prop
+              </CAlert>
+
+              <CTable responsive>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Id</th>
+
+                      <th>Name</th>
+
+                      <th>Age</th>
+
+                      <th></th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {users.map((user) => (
+                      <tr key={user.id}>
+                        <td>{user.id}</td>
+
+                        <td>{user.name}</td>
+
+                        <td>{user.age}</td>
+
+                        <td>
+                          <div
+                            style={{
+                              display: 'flex',
+                              width: '100%',
+                              justifyContent: 'end',
+                            }}
+                          >
+                            <CButton
+                              size="small"
+                              text
+                              onClick={() => onRemoveUser(user.id)}
+                            >
+                              Delete
+                            </CButton>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                    {!users.length && (
+                      <tr>
+                        <td colSpan={4}>No more users to delete</td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </CTable>
+            </CCardContent>
+
+            <CCardActions>
+              <CButton onClick={() => onOpenDialog()}>Add user</CButton>
+            </CCardActions>
+          </CCard>
+
+          <footer
+            slot="footer"
+            style={{
+              width: '100%',
+              padding: '24px',
+              backgroundColor: 'var(--c-tertiary-200)',
+            }}
+          >
+            {getCurrentYear()} - CSC Design system
+          </footer>
+        </CPage>
+
+        <CModal
+          value={isModalOpen}
+          onChangeValue={(event: CustomEvent<boolean>) =>
+            setIsModalOpen(event.detail)
+          }
+        >
+          <CCard>
+            <CCardTitle>Add a new user</CCardTitle>
+
+            <CCardContent>
+              <p>User Id: {users.length + 1}</p>
+
+              <CTextField
+                label="Name"
+                value={name}
+                onChangeValue={(event: CustomEvent<string>) =>
+                  setName(event.detail)
+                }
+              ></CTextField>
+
+              <CTextField
+                label="Age"
+                type="number"
+                value={age.toString()}
+                onChangeValue={(event: CustomEvent<string>) =>
+                  setAge(+event.detail)
+                }
+              ></CTextField>
+            </CCardContent>
+
+            <CCardActions justify="end">
+              <CButton onClick={() => setIsModalOpen(false)} text>
+                Cancel
+              </CButton>
+              <CButton onClick={() => onAddUser()}>Add user</CButton>
+            </CCardActions>
+          </CCard>
+        </CModal>
+
+        <CToasts ref={toastRef}></CToasts>
+      </CMain>
+    </>
+  );
+}
+
+export default App;
+`;
+</script>
diff --git a/packages/csc-ui/src/components.d.ts b/packages/csc-ui/src/components.d.ts
index ee6c3ff8..f194fda3 100644
--- a/packages/csc-ui/src/components.d.ts
+++ b/packages/csc-ui/src/components.d.ts
@@ -568,15 +568,11 @@ export namespace Components {
         /**
           * Auto focus the input
          */
-        "autofocus": boolean;
+        "automaticFocus": boolean;
         /**
           * Disable the input
          */
         "disabled": boolean;
-        /**
-          * Render a hidden input outside the shadow dom
-         */
-        "form": boolean;
         /**
           * Hide the hint and error messages
          */
@@ -1337,7 +1333,7 @@ export namespace Components {
         /**
           * Aria label
          */
-        "ariaLabel": string;
+        "ariaLabelInternal": string;
         /**
           * Disable tooltip
          */
@@ -1728,10 +1724,6 @@ export namespace Components {
      * @group Form
      */
     interface CTextField {
-        /**
-          * HTML input autocapitalize
-         */
-        "autocapitalize": string;
         /**
           * HTML input autocomplete
          */
@@ -1740,10 +1732,14 @@ export namespace Components {
           * HTML input autocorrect
          */
         "autocorrect": string;
+        /**
+          * HTML input autocapitalize
+         */
+        "automaticCapitalize": string;
         /**
           * Auto focus the input
          */
-        "autofocus": boolean;
+        "automaticFocus": boolean;
         /**
           * Disable the input
          */
@@ -3576,15 +3572,11 @@ declare namespace LocalJSX {
         /**
           * Auto focus the input
          */
-        "autofocus"?: boolean;
+        "automaticFocus"?: boolean;
         /**
           * Disable the input
          */
         "disabled"?: boolean;
-        /**
-          * Render a hidden input outside the shadow dom
-         */
-        "form"?: boolean;
         /**
           * Hide the hint and error messages
          */
@@ -4389,7 +4381,7 @@ declare namespace LocalJSX {
         /**
           * Aria label
          */
-        "ariaLabel"?: string;
+        "ariaLabelInternal"?: string;
         /**
           * Disable tooltip
          */
@@ -4830,10 +4822,6 @@ declare namespace LocalJSX {
      * @group Form
      */
     interface CTextField {
-        /**
-          * HTML input autocapitalize
-         */
-        "autocapitalize"?: string;
         /**
           * HTML input autocomplete
          */
@@ -4842,10 +4830,14 @@ declare namespace LocalJSX {
           * HTML input autocorrect
          */
         "autocorrect"?: string;
+        /**
+          * HTML input autocapitalize
+         */
+        "automaticCapitalize"?: string;
         /**
           * Auto focus the input
          */
-        "autofocus"?: boolean;
+        "automaticFocus"?: boolean;
         /**
           * Disable the input
          */
diff --git a/packages/csc-ui/src/components/c-input/c-input.tsx b/packages/csc-ui/src/components/c-input/c-input.tsx
index fa269de1..74d92874 100644
--- a/packages/csc-ui/src/components/c-input/c-input.tsx
+++ b/packages/csc-ui/src/components/c-input/c-input.tsx
@@ -31,19 +31,13 @@ export class CInput {
   /**
    * Auto focus the input
    */
-  // eslint-disable-next-line @stencil-community/reserved-member-names
-  @Prop() autofocus = false;
+  @Prop({ attribute: 'autofocus' }) automaticFocus = false;
 
   /**
    * Disable the input
    */
   @Prop() disabled = false;
 
-  /**
-   * Render a hidden input outside the shadow dom
-   */
-  @Prop() form = false;
-
   /**
    * Hide the hint and error messages
    */
@@ -228,7 +222,7 @@ export class CInput {
   }
 
   componentDidLoad() {
-    if (this.autofocus) {
+    if (this.automaticFocus) {
       setTimeout(() => {
         this._onFocus(false);
       }, 500);
diff --git a/packages/csc-ui/src/components/c-input/readme.md b/packages/csc-ui/src/components/c-input/readme.md
index b27f1e7e..02aa0cd2 100644
--- a/packages/csc-ui/src/components/c-input/readme.md
+++ b/packages/csc-ui/src/components/c-input/readme.md
@@ -7,35 +7,34 @@
 
 ## Properties
 
-| Property         | Attribute          | Description                                  | Type                                                                                                                                    | Default            |
-| ---------------- | ------------------ | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `active`         | `active`           | Active state                                 | `boolean`                                                                                                                               | `false`            |
-| `autofocus`      | `autofocus`        | Auto focus the input                         | `boolean`                                                                                                                               | `false`            |
-| `disabled`       | `disabled`         | Disable the input                            | `boolean`                                                                                                                               | `false`            |
-| `form`           | `form`             | Render a hidden input outside the shadow dom | `boolean`                                                                                                                               | `false`            |
-| `hideDetails`    | `hide-details`     | Hide the hint and error messages             | `boolean`                                                                                                                               | `false`            |
-| `hint`           | `hint`             | Hint text for the input                      | `string`                                                                                                                                | `''`               |
-| `hostId`         | `id`               | Id of the input                              | `string`                                                                                                                                | `undefined`        |
-| `inputId`        | `input-id`         | Id of the input element                      | `string`                                                                                                                                | `undefined`        |
-| `items`          | --                 | Items for the dropdown                       | `CSelectItem[]`                                                                                                                         | `undefined`        |
-| `itemsPerPage`   | `items-per-page`   | Items per page before adding scroll          | `number`                                                                                                                                | `6`                |
-| `label`          | `label`            | Label of the input                           | `string`                                                                                                                                | `undefined`        |
-| `max`            | `max`              | Maximum value on a numeric input             | `number`                                                                                                                                | `null`             |
-| `min`            | `min`              | Minimum value on a numeric input             | `number`                                                                                                                                | `null`             |
-| `name`           | `name`             | Name of the input                            | `string`                                                                                                                                | `undefined`        |
-| `placeholder`    | `placeholder`      | Placeholder of the input                     | `string`                                                                                                                                | `undefined`        |
-| `readonly`       | `readonly`         | Mark as readonly                             | `boolean`                                                                                                                               | `false`            |
-| `required`       | `required`         | Set the input as required                    | `boolean`                                                                                                                               | `false`            |
-| `rows`           | `rows`             | Rows on the input                            | `number`                                                                                                                                | `1`                |
-| `shadow`         | `shadow`           | Shadow variant of the input                  | `boolean`                                                                                                                               | `false`            |
-| `step`           | `step`             | Step size on a numeric input                 | `number`                                                                                                                                | `null`             |
-| `type`           | `type`             | Type of the input                            | `string`                                                                                                                                | `undefined`        |
-| `valid`          | `valid`            | Set the validíty of the input                | `boolean`                                                                                                                               | `true`             |
-| `validate`       | `validate`         | Manual validation                            | `boolean`                                                                                                                               | `false`            |
-| `validateOnBlur` | `validate-on-blur` | Validate the input on blur                   | `boolean`                                                                                                                               | `false`            |
-| `validation`     | `validation`       | Custom validation message                    | `string`                                                                                                                                | `'Required field'` |
-| `value`          | `value`            | Value of the input                           | `CSelectItem & { ref?: HTMLElement; } \| boolean \| number \| string \| { name: string; value: string \| number; disabled?: boolean; }` | `undefined`        |
-| `variant`        | `variant`          | Variant                                      | `"select" \| "text"`                                                                                                                    | `'text'`           |
+| Property         | Attribute          | Description                         | Type                                                                                                                                    | Default            |
+| ---------------- | ------------------ | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `active`         | `active`           | Active state                        | `boolean`                                                                                                                               | `false`            |
+| `automaticFocus` | `autofocus`        | Auto focus the input                | `boolean`                                                                                                                               | `false`            |
+| `disabled`       | `disabled`         | Disable the input                   | `boolean`                                                                                                                               | `false`            |
+| `hideDetails`    | `hide-details`     | Hide the hint and error messages    | `boolean`                                                                                                                               | `false`            |
+| `hint`           | `hint`             | Hint text for the input             | `string`                                                                                                                                | `''`               |
+| `hostId`         | `id`               | Id of the input                     | `string`                                                                                                                                | `undefined`        |
+| `inputId`        | `input-id`         | Id of the input element             | `string`                                                                                                                                | `undefined`        |
+| `items`          | --                 | Items for the dropdown              | `CSelectItem[]`                                                                                                                         | `undefined`        |
+| `itemsPerPage`   | `items-per-page`   | Items per page before adding scroll | `number`                                                                                                                                | `6`                |
+| `label`          | `label`            | Label of the input                  | `string`                                                                                                                                | `undefined`        |
+| `max`            | `max`              | Maximum value on a numeric input    | `number`                                                                                                                                | `null`             |
+| `min`            | `min`              | Minimum value on a numeric input    | `number`                                                                                                                                | `null`             |
+| `name`           | `name`             | Name of the input                   | `string`                                                                                                                                | `undefined`        |
+| `placeholder`    | `placeholder`      | Placeholder of the input            | `string`                                                                                                                                | `undefined`        |
+| `readonly`       | `readonly`         | Mark as readonly                    | `boolean`                                                                                                                               | `false`            |
+| `required`       | `required`         | Set the input as required           | `boolean`                                                                                                                               | `false`            |
+| `rows`           | `rows`             | Rows on the input                   | `number`                                                                                                                                | `1`                |
+| `shadow`         | `shadow`           | Shadow variant of the input         | `boolean`                                                                                                                               | `false`            |
+| `step`           | `step`             | Step size on a numeric input        | `number`                                                                                                                                | `null`             |
+| `type`           | `type`             | Type of the input                   | `string`                                                                                                                                | `undefined`        |
+| `valid`          | `valid`            | Set the validíty of the input       | `boolean`                                                                                                                               | `true`             |
+| `validate`       | `validate`         | Manual validation                   | `boolean`                                                                                                                               | `false`            |
+| `validateOnBlur` | `validate-on-blur` | Validate the input on blur          | `boolean`                                                                                                                               | `false`            |
+| `validation`     | `validation`       | Custom validation message           | `string`                                                                                                                                | `'Required field'` |
+| `value`          | `value`            | Value of the input                  | `CSelectItem & { ref?: HTMLElement; } \| boolean \| number \| string \| { name: string; value: string \| number; disabled?: boolean; }` | `undefined`        |
+| `variant`        | `variant`          | Variant                             | `"select" \| "text"`                                                                                                                    | `'text'`           |
 
 
 ## Events
diff --git a/packages/csc-ui/src/components/c-slider/c-slider.tsx b/packages/csc-ui/src/components/c-slider/c-slider.tsx
index f3efa462..2c8809dc 100644
--- a/packages/csc-ui/src/components/c-slider/c-slider.tsx
+++ b/packages/csc-ui/src/components/c-slider/c-slider.tsx
@@ -31,8 +31,7 @@ export class CSlider {
   /**
    * Aria label
    */
-  // eslint-disable-next-line @stencil-community/reserved-member-names
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string;
+  @Prop({ attribute: 'aria-label' }) ariaLabelInternal: string;
 
   /**
    * Max value
@@ -176,7 +175,9 @@ export class CSlider {
     return (
       <Host class={classes} style={styles}>
         {!!this.label && (
-          <label class="c-slider__label">{!!this.label && this.label}</label>
+          <label class="c-slider__label">
+            {!!this.label && this.label} {this.ariaLabelInternal}
+          </label>
         )}
 
         <div class="c-slider__wrapper">
@@ -190,7 +191,7 @@ export class CSlider {
 
           <input
             ref={(el) => (this._inputElement = el)}
-            aria-label={this.ariaLabel || this.label}
+            aria-label={this.ariaLabelInternal || this.label}
             aria-valuenow={this.value}
             aria-valuetext={`${this.value}${this.unit}`}
             aria-valuemin={this.min}
diff --git a/packages/csc-ui/src/components/c-slider/readme.md b/packages/csc-ui/src/components/c-slider/readme.md
index 375debf5..9faa6fe8 100644
--- a/packages/csc-ui/src/components/c-slider/readme.md
+++ b/packages/csc-ui/src/components/c-slider/readme.md
@@ -7,22 +7,22 @@
 
 ## Properties
 
-| Property         | Attribute         | Description         | Type               | Default     |
-| ---------------- | ----------------- | ------------------- | ------------------ | ----------- |
-| `ariaLabel`      | `aria-label`      | Aria label          | `string`           | `undefined` |
-| `disableTooltip` | `disable-tooltip` | Disable tooltip     | `boolean`          | `false`     |
-| `disabled`       | `disabled`        | Disable the slider  | `boolean`          | `false`     |
-| `hostId`         | `id`              | Id of the element   | `string`           | `undefined` |
-| `hostName`       | `name`            | Id of the element   | `string`           | `undefined` |
-| `label`          | `label`           | Label of the slider | `string`           | `undefined` |
-| `labels`         | `labels`          | Show tick labels    | `boolean`          | `false`     |
-| `max`            | `max`             | Max value           | `string`           | `'100'`     |
-| `min`            | `min`             | Min value           | `string`           | `'0'`       |
-| `segments`       | `segments`        | Segment count       | `string`           | `'10'`      |
-| `step`           | `step`            | Step                | `string`           | `'1'`       |
-| `ticks`          | `ticks`           | Thow ticks          | `boolean`          | `false`     |
-| `unit`           | `unit`            | Unit                | `string`           | `'%'`       |
-| `value`          | `value`           | Value               | `number \| string` | `'50'`      |
+| Property            | Attribute         | Description         | Type               | Default     |
+| ------------------- | ----------------- | ------------------- | ------------------ | ----------- |
+| `ariaLabelInternal` | `aria-label`      | Aria label          | `string`           | `undefined` |
+| `disableTooltip`    | `disable-tooltip` | Disable tooltip     | `boolean`          | `false`     |
+| `disabled`          | `disabled`        | Disable the slider  | `boolean`          | `false`     |
+| `hostId`            | `id`              | Id of the element   | `string`           | `undefined` |
+| `hostName`          | `name`            | Id of the element   | `string`           | `undefined` |
+| `label`             | `label`           | Label of the slider | `string`           | `undefined` |
+| `labels`            | `labels`          | Show tick labels    | `boolean`          | `false`     |
+| `max`               | `max`             | Max value           | `string`           | `'100'`     |
+| `min`               | `min`             | Min value           | `string`           | `'0'`       |
+| `segments`          | `segments`        | Segment count       | `string`           | `'10'`      |
+| `step`              | `step`            | Step                | `string`           | `'1'`       |
+| `ticks`             | `ticks`           | Thow ticks          | `boolean`          | `false`     |
+| `unit`              | `unit`            | Unit                | `string`           | `'%'`       |
+| `value`             | `value`           | Value               | `number \| string` | `'50'`      |
 
 
 ## Events
diff --git a/packages/csc-ui/src/components/c-text-field/c-text-field.tsx b/packages/csc-ui/src/components/c-text-field/c-text-field.tsx
index ea11b5ba..850f0948 100644
--- a/packages/csc-ui/src/components/c-text-field/c-text-field.tsx
+++ b/packages/csc-ui/src/components/c-text-field/c-text-field.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @stencil-community/reserved-member-names */
 import {
   AttachInternals,
   Component,
@@ -30,12 +29,12 @@ export class CTextField {
   /**
    * Auto focus the input
    */
-  @Prop() autofocus = false;
+  @Prop({ attribute: 'autofocus' }) automaticFocus = false;
 
   /**
    * HTML input autocapitalize
    */
-  @Prop() autocapitalize = '';
+  @Prop({ attribute: 'autocapitalize' }) automaticCapitalize = '';
 
   /**
    * HTML input autocorrect
@@ -240,7 +239,9 @@ export class CTextField {
         max: this.max,
         step: this.step,
         ...(!!this.autocomplete && { autocomplete: this.autocomplete }),
-        ...(!!this.autocapitalize && { autocapitalize: this.autocapitalize }),
+        ...(!!this.automaticCapitalize && {
+          autocapitalize: this.automaticCapitalize,
+        }),
         ...(!!this.autocorrect && { autocorrect: this.autocorrect }),
       },
       textArea: {
@@ -324,7 +325,7 @@ export class CTextField {
     return (
       <Host>
         <c-input
-          autofocus={this.autofocus}
+          autofocus={this.automaticFocus}
           disabled={this.disabled}
           hide-details={this.hideDetails}
           hint={this.hint}
diff --git a/packages/csc-ui/src/components/c-text-field/readme.md b/packages/csc-ui/src/components/c-text-field/readme.md
index 1d11f478..3f3ae7de 100644
--- a/packages/csc-ui/src/components/c-text-field/readme.md
+++ b/packages/csc-ui/src/components/c-text-field/readme.md
@@ -7,33 +7,33 @@
 
 ## Properties
 
-| Property         | Attribute          | Description                           | Type      | Default            |
-| ---------------- | ------------------ | ------------------------------------- | --------- | ------------------ |
-| `autocapitalize` | `autocapitalize`   | HTML input autocapitalize             | `string`  | `''`               |
-| `autocomplete`   | `autocomplete`     | HTML input autocomplete               | `string`  | `''`               |
-| `autocorrect`    | `autocorrect`      | HTML input autocorrect                | `string`  | `''`               |
-| `autofocus`      | `autofocus`        | Auto focus the input                  | `boolean` | `false`            |
-| `disabled`       | `disabled`         | Disable the input                     | `boolean` | `false`            |
-| `hideDetails`    | `hide-details`     | Hide the hint and error messages      | `boolean` | `false`            |
-| `hint`           | `hint`             | Hint text for the input               | `string`  | `''`               |
-| `hostId`         | `id`               | Id of the input                       | `string`  | `undefined`        |
-| `label`          | `label`            | Label of the input                    | `string`  | `undefined`        |
-| `max`            | `max`              | Maximum value on a numeric input      | `number`  | `null`             |
-| `min`            | `min`              | Minimum value on a numeric input      | `number`  | `null`             |
-| `name`           | `name`             | Name of the input                     | `string`  | `undefined`        |
-| `placeholder`    | `placeholder`      | Placeholder of the input              | `string`  | `undefined`        |
-| `readonly`       | `readonly`         | Mark as readonly                      | `boolean` | `false`            |
-| `required`       | `required`         | Set the input as required             | `boolean` | `false`            |
-| `rows`           | `rows`             | Rows on the input                     | `number`  | `1`                |
-| `shadow`         | `shadow`           | Shadow variant of the input           | `boolean` | `false`            |
-| `step`           | `step`             | Step size on a numeric input          | `number`  | `null`             |
-| `trimWhitespace` | `trim-whitespace`  | Trim whitespace from the return value | `boolean` | `false`            |
-| `type`           | `type`             | Type of the input                     | `string`  | `'text'`           |
-| `valid`          | `valid`            | Set the validity of the input         | `boolean` | `true`             |
-| `validate`       | `validate`         | Manual validation                     | `boolean` | `false`            |
-| `validateOnBlur` | `validate-on-blur` | Validate the input on blur            | `boolean` | `false`            |
-| `validation`     | `validation`       | Custom validation message             | `string`  | `'Required field'` |
-| `value`          | `value`            | Value of the input                    | `string`  | `undefined`        |
+| Property              | Attribute          | Description                           | Type      | Default            |
+| --------------------- | ------------------ | ------------------------------------- | --------- | ------------------ |
+| `autocomplete`        | `autocomplete`     | HTML input autocomplete               | `string`  | `''`               |
+| `autocorrect`         | `autocorrect`      | HTML input autocorrect                | `string`  | `''`               |
+| `automaticCapitalize` | `autocapitalize`   | HTML input autocapitalize             | `string`  | `''`               |
+| `automaticFocus`      | `autofocus`        | Auto focus the input                  | `boolean` | `false`            |
+| `disabled`            | `disabled`         | Disable the input                     | `boolean` | `false`            |
+| `hideDetails`         | `hide-details`     | Hide the hint and error messages      | `boolean` | `false`            |
+| `hint`                | `hint`             | Hint text for the input               | `string`  | `''`               |
+| `hostId`              | `id`               | Id of the input                       | `string`  | `undefined`        |
+| `label`               | `label`            | Label of the input                    | `string`  | `undefined`        |
+| `max`                 | `max`              | Maximum value on a numeric input      | `number`  | `null`             |
+| `min`                 | `min`              | Minimum value on a numeric input      | `number`  | `null`             |
+| `name`                | `name`             | Name of the input                     | `string`  | `undefined`        |
+| `placeholder`         | `placeholder`      | Placeholder of the input              | `string`  | `undefined`        |
+| `readonly`            | `readonly`         | Mark as readonly                      | `boolean` | `false`            |
+| `required`            | `required`         | Set the input as required             | `boolean` | `false`            |
+| `rows`                | `rows`             | Rows on the input                     | `number`  | `1`                |
+| `shadow`              | `shadow`           | Shadow variant of the input           | `boolean` | `false`            |
+| `step`                | `step`             | Step size on a numeric input          | `number`  | `null`             |
+| `trimWhitespace`      | `trim-whitespace`  | Trim whitespace from the return value | `boolean` | `false`            |
+| `type`                | `type`             | Type of the input                     | `string`  | `'text'`           |
+| `valid`               | `valid`            | Set the validity of the input         | `boolean` | `true`             |
+| `validate`            | `validate`         | Manual validation                     | `boolean` | `false`            |
+| `validateOnBlur`      | `validate-on-blur` | Validate the input on blur            | `boolean` | `false`            |
+| `validation`          | `validation`       | Custom validation message             | `string`  | `'Required field'` |
+| `value`               | `value`            | Value of the input                    | `string`  | `undefined`        |
 
 
 ## Events
diff --git a/packages/csc-ui/vscode-data.json b/packages/csc-ui/vscode-data.json
index 2ba4c5cc..da6222a7 100644
--- a/packages/csc-ui/vscode-data.json
+++ b/packages/csc-ui/vscode-data.json
@@ -634,10 +634,6 @@
           "name": "disabled",
           "description": "Disable the input"
         },
-        {
-          "name": "form",
-          "description": "Render a hidden input outside the shadow dom"
-        },
         {
           "name": "hide-details",
           "description": "Hide the hint and error messages"
@@ -2089,10 +2085,6 @@
         "value": ""
       },
       "attributes": [
-        {
-          "name": "autocapitalize",
-          "description": "HTML input autocapitalize"
-        },
         {
           "name": "autocomplete",
           "description": "HTML input autocomplete"
@@ -2101,6 +2093,10 @@
           "name": "autocorrect",
           "description": "HTML input autocorrect"
         },
+        {
+          "name": "autocapitalize",
+          "description": "HTML input autocapitalize"
+        },
         {
           "name": "autofocus",
           "description": "Auto focus the input"

From da1b535ea4353324727af608edb6d8e730ca1210 Mon Sep 17 00:00:00 2001
From: Ville Eriksson <ville.eriksson@csc.fi>
Date: Thu, 24 Oct 2024 13:45:07 +0300
Subject: [PATCH 3/3] remove aria label

---
 .../csc-ui-documentation/components/examples/c-slider/Basic.vue  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/csc-ui-documentation/components/examples/c-slider/Basic.vue b/packages/csc-ui-documentation/components/examples/c-slider/Basic.vue
index 52dcef93..57733008 100644
--- a/packages/csc-ui-documentation/components/examples/c-slider/Basic.vue
+++ b/packages/csc-ui-documentation/components/examples/c-slider/Basic.vue
@@ -23,7 +23,6 @@
     <c-slider
       v-model="sliderValue"
       v-control
-      aria-label="Taunos slider"
       label="Monthly usage"
       class="flex-1"
       :labels="showLabels"