From 8892d063f02ea9ff4da6712c13778941141335e2 Mon Sep 17 00:00:00 2001
From: sarahgm <38324334+sarahgm@users.noreply.github.com>
Date: Wed, 30 Oct 2024 06:42:44 +0100
Subject: [PATCH] chore: add typecheck to our documentation (#4267)

* typescript docs

* save

* add tsconfig check

* refa card in iconlist

* add to root command

* test

* update

* test

* test

* test

* undo

* move in one file

* test test test

* test

* update

* maybe build

* add build step for typecheck
---
 .github/workflows/typecheck.yml               |   2 +
 docs/app/page.tsx                             |   2 +-
 .../form/form/form-focus-management.demo.tsx  |   2 +-
 .../form/slider/slider-width.demo.tsx         |   2 +-
 .../overlay/menu/menu-open-dialog.demo.tsx    |  12 +-
 .../accessibility-aria-live.demo.tsx          |   1 -
 .../form-fields-required-state.demo.tsx       |   7 +-
 .../multiple-selection-selectlist.demo.tsx    |   6 +-
 .../tag-group-multiselect.demo.tsx            |   5 +-
 .../releases/config/storybook/release.mdx     |  30 +++++
 docs/content/releases/docs/release.mdx        | 106 ++++++++++++++++++
 .../releases/packages/components/release.mdx  |  99 ++++++++++++++++
 .../releases/packages/icons/release.mdx       |  10 ++
 .../releases/packages/system/release.mdx      |  32 ++++++
 .../packages/theme-preset/release.mdx         |  10 ++
 .../releases/packages/types/release.mdx       |  13 +++
 .../releases/themes/theme-b2b/release.mdx     |  77 +++++++++++++
 .../releases/themes/theme-core/release.mdx    |  65 +++++++++++
 .../releases/themes/theme-docs/release.mdx    |  39 +++++++
 docs/next.config.js                           |   4 -
 docs/ui/IconList.tsx                          |  35 +++---
 docs/ui/navigation/Navigation.tsx             |  10 +-
 package.json                                  |   2 +-
 tsconfig.check.json                           |  16 +--
 24 files changed, 519 insertions(+), 68 deletions(-)

diff --git a/.github/workflows/typecheck.yml b/.github/workflows/typecheck.yml
index 2da363d922..e8803fe5e7 100644
--- a/.github/workflows/typecheck.yml
+++ b/.github/workflows/typecheck.yml
@@ -23,6 +23,8 @@ jobs:
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm install
+      - name: Build docs for generated files
+        run: pnpm build:docs
 
       # Action
       - name: Typecheck
diff --git a/docs/app/page.tsx b/docs/app/page.tsx
index fbae913dcf..6f9f522eff 100644
--- a/docs/app/page.tsx
+++ b/docs/app/page.tsx
@@ -34,7 +34,7 @@ const SectionLink = ({
 
 // Page
 // ---------------
-export const Page = () => {
+const Page = () => {
   const latestPost = getLatestPost();
   return (
     <main className="grid justify-center px-[--page-padding-md] xl:px-[--page-padding-xl]">
diff --git a/docs/content/components/form/form/form-focus-management.demo.tsx b/docs/content/components/form/form/form-focus-management.demo.tsx
index 5138ad82b8..37736b9d4b 100644
--- a/docs/content/components/form/form/form-focus-management.demo.tsx
+++ b/docs/content/components/form/form/form-focus-management.demo.tsx
@@ -26,7 +26,7 @@ export default () => {
       <Inset space={8}>
         <Stack space={4}>
           {invalid ? (
-            <SectionMessage variant="error" role="alert" tabIndex={-1}>
+            <SectionMessage variant="error">
               <SectionMessage.Title>Whoopsies!</SectionMessage.Title>
               <SectionMessage.Content>
                 Please enter both your email address and password to proceed.
diff --git a/docs/content/components/form/slider/slider-width.demo.tsx b/docs/content/components/form/slider/slider-width.demo.tsx
index ba3911cdb5..2ba14ffb44 100644
--- a/docs/content/components/form/slider/slider-width.demo.tsx
+++ b/docs/content/components/form/slider/slider-width.demo.tsx
@@ -1,7 +1,7 @@
 import { Slider } from '@marigold/components';
 
 export default () => (
-  <Slider width="180px" aria-label="width">
+  <Slider width="full" aria-label="width">
     Example
   </Slider>
 );
diff --git a/docs/content/components/overlay/menu/menu-open-dialog.demo.tsx b/docs/content/components/overlay/menu/menu-open-dialog.demo.tsx
index d7e28edd23..e0067c215f 100644
--- a/docs/content/components/overlay/menu/menu-open-dialog.demo.tsx
+++ b/docs/content/components/overlay/menu/menu-open-dialog.demo.tsx
@@ -1,15 +1,5 @@
 import { useState } from 'react';
-import {
-  Body,
-  Button,
-  Dialog,
-  Footer,
-  Header,
-  Inline,
-  Menu,
-  Stack,
-  Text,
-} from '@marigold/components';
+import { Button, Dialog, Menu } from '@marigold/components';
 
 export default () => {
   const [open, setDialogOpen] = useState(false);
diff --git a/docs/content/foundations/accessibility/accessibility-aria-live.demo.tsx b/docs/content/foundations/accessibility/accessibility-aria-live.demo.tsx
index 391bfc6aa2..facbb7b9c6 100644
--- a/docs/content/foundations/accessibility/accessibility-aria-live.demo.tsx
+++ b/docs/content/foundations/accessibility/accessibility-aria-live.demo.tsx
@@ -7,7 +7,6 @@ import {
   Form,
   Image,
   Inline,
-  Menu,
   Select,
   Stack,
   Text,
diff --git a/docs/content/foundations/form-fields/form-fields-required-state.demo.tsx b/docs/content/foundations/form-fields/form-fields-required-state.demo.tsx
index 98cb1206aa..99aef6478f 100644
--- a/docs/content/foundations/form-fields/form-fields-required-state.demo.tsx
+++ b/docs/content/foundations/form-fields/form-fields-required-state.demo.tsx
@@ -1,12 +1,7 @@
 import { Select } from '@marigold/components';
 
 export default () => (
-  <Select
-    label="Genre"
-    placeholder="Select genre"
-    width="fit"
-    required
-  >
+  <Select label="Genre" placeholder="Select genre" width="fit" required>
     <Select.Option id="pop">Pop</Select.Option>
     <Select.Option id="hiphop">Hip Hop</Select.Option>
     <Select.Option id="rock">Rock</Select.Option>
diff --git a/docs/content/patterns/multiple-selection/multiple-selection-selectlist.demo.tsx b/docs/content/patterns/multiple-selection/multiple-selection-selectlist.demo.tsx
index b37da60135..8ebeb14381 100644
--- a/docs/content/patterns/multiple-selection/multiple-selection-selectlist.demo.tsx
+++ b/docs/content/patterns/multiple-selection/multiple-selection-selectlist.demo.tsx
@@ -11,9 +11,11 @@ const paymentMethods = [
 export default () => (
   <SelectList
     selectionMode="multiple"
-    label="Payment Methods"
+    aria-label="Payment Methods"
     items={paymentMethods}
   >
-    {item => <SelectList.Item id={item.id}>{item.name}</SelectList.Item>}
+    {(item: { id: string; name: string }) => (
+      <SelectList.Item id={item.id}>{item.name}</SelectList.Item>
+    )}
   </SelectList>
 );
diff --git a/docs/content/patterns/multiple-selection/tag-group-multiselect.demo.tsx b/docs/content/patterns/multiple-selection/tag-group-multiselect.demo.tsx
index db0967fcfd..36bc27cbeb 100644
--- a/docs/content/patterns/multiple-selection/tag-group-multiselect.demo.tsx
+++ b/docs/content/patterns/multiple-selection/tag-group-multiselect.demo.tsx
@@ -18,10 +18,7 @@ export default () => {
         <Tag id="pool">Swimming pool</Tag>
         <Tag id="breakfast">Breakfast</Tag>
       </Tag.Group>
-      <p>
-        Current selection (controlled):{' '}
-        {selected === 'all' ? 'all' : [...selected].join(', ')}
-      </p>
+      <p>Current selection (controlled): {[...selected].join(', ')}</p>
     </>
   );
 };
diff --git a/docs/content/releases/config/storybook/release.mdx b/docs/content/releases/config/storybook/release.mdx
index a0f7cc104f..94e1db359e 100644
--- a/docs/content/releases/config/storybook/release.mdx
+++ b/docs/content/releases/config/storybook/release.mdx
@@ -1,9 +1,39 @@
 ---
 title: '@marigold/storybook-config'
 caption: 'Have a look on the latest changes regarding @marigold/storybook-config'
+badge: new
 toc: false
 ---
 
+## 1.1.50 (Released on <DateFormat value={new Date("Fri Oct 25 2024 18:15:28 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
+
+### Patch Changes
+
+- Updated dependencies [65608b4]
+- Updated dependencies [caefbe4]
+- Updated dependencies [2d9917f]
+- Updated dependencies [6f8e3a2]
+- Updated dependencies [7ea3838]
+- Updated dependencies [6687af7]
+- Updated dependencies [2babc0b]
+- Updated dependencies [8c539d3]
+- Updated dependencies [f18c8aa]
+- Updated dependencies [d5386e4]
+- Updated dependencies [5798b4d]
+- Updated dependencies [5c029ec]
+- Updated dependencies [2169b6f]
+- Updated dependencies [bfd2843]
+- Updated dependencies [0e77996]
+- Updated dependencies [b8cd92a]
+- Updated dependencies [45fb3c4]
+- Updated dependencies [f6a132c]
+- Updated dependencies [956982a]
+- Updated dependencies [df04623]
+- Updated dependencies [f3f0ea0]
+  - @marigold/components@10.0.0
+  - @marigold/theme-b2b@28.0.0
+  - @marigold/theme-core@27.0.0
+
 ## 1.1.49 (Released on <DateFormat value={new Date("Wed Sep 11 2024 14:52:49 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
 
 ### Patch Changes
diff --git a/docs/content/releases/docs/release.mdx b/docs/content/releases/docs/release.mdx
index f598b5acca..8fbc3669b0 100644
--- a/docs/content/releases/docs/release.mdx
+++ b/docs/content/releases/docs/release.mdx
@@ -1,9 +1,115 @@
 ---
 title: '@marigold/docs'
 caption: 'Have a look on the latest changes regarding @marigold/docs'
+badge: new
 toc: false
 ---
 
+## 10.0.0 (Released on <DateFormat value={new Date("Fri Oct 25 2024 18:15:28 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
+
+### Major Changes
+
+- caefbe4: refa(listbox): Allow sections in `<Combobox>` and `<Autocomplete>`, adjust Section API in `<Select>`, `<Combobox>` and `<Autocomplete>`.
+
+  - Added the possibility to use sections with `<Combobox>` and `<Autocomplete>`
+  - Refactored the `<Section>` (from `<Listbox>`) to fit our API, no need for the extra `<Header>` anymore. Instead you can do `<Select.Section header="My header">`, same for the other components
+  - Renamed `<Item>` to `<Option>` in `<Combobox>` and `<Autocomplete>` to align with `<Select>`
+  - Updated the docs for `<Select>`, `<Combobox>` and `<Autocomplete>`
+  - Updated Storybook for `<Select>`, `<Combobox>` and `<Autocomplete>` with section stories
+  - Renamed the part of the `<ListBox>` accordingly (from `sectionTitle` to `header`)
+
+    **BREAKING CHANGE:** We changed the API of the `<Section>` component that is used in `<Select>`, `<Combobox>` and `<Autocomplete>`. It is no longer necessary to add a `Header` within the `<Section>`.
+
+    Use the newly added `header` prop instead. Additionally, to unify the APIs all choices of `<Select>`, `<Combobox>` and `<Autocomplete>` are now called `<Option>` instead of `<Item>`.
+
+### Minor Changes
+
+- 6687af7: refa: remove footer from `<Dialog>` + allow styles
+
+  - dialogs can only have action now
+  - align buttons in `<Dialog.Actions>` correctly
+
+- f3f0ea0: With the changes of the `<Dialog>` component, we also needed to update they docs page.
+
+### Patch Changes
+
+- 4818227: docs([DST-570]): Added "Release" pages to our documentation
+
+  We now create for each changelog a page on our documentation, it is also possible to create release blog posts.
+  With these pages we improve communication, enhance user experience, and ensure all users have easy access to the latest updates in one central location.
+
+- f18c8aa: [DST-494]: add loading states pattern
+
+  [DST-494]: added prop `mode`to the `<XLoader />` to support inline and full-section loading
+
+- e83566d: docs: remove examples from checkbox page and add guidline section
+
+  - removed the examples section
+  - add a guidline about the difference between a checkbox and a switch
+  - site clean up
+
+- 9ff555b: docs: add landing page to the site
+- 0e77996: docs([DST-572]): Adding a general form guideline in docs explaining different concepts such as when to use lable and help text
+- 380704d: docs[DST-519]: Clean up Marigold Docs/ Improve Navigation
+
+  - deleted old files (scripts, about , release)
+  - updated some faqs
+  - improved the navigation structure
+  - added overview pages
+  - improved folder structure in code (a bit)
+  - adjust some links
+
+- b8cd92a: feat: `CheckboxGroup` can now be used as a compound component
+
+  - Refactored the `CheckboxGroup` to be a compound component and align it with other components: `<CheckboxGroup>` -> `<Checkbox.Group>`
+  - Adjusted the Checkbox appearance demo a bit
+
+- a582035: docs: Update the `MarigoldProvider` page
+
+  Updated the MarigoldProvider page according to our new page layout and information.
+
+- fab9442: docs(Combobox): add info that section headers are not included wehen filtering
+- 45fb3c4: chore(deps): update react-aria to 1.4
+- f6a132c: docs([DST-582]): revise `<SectionMessage>` page according to new component page structure
+  feat(components): add close button on `<SectionMessage>`
+
+  Revised the `<SectionMessage>` documentation page to our new layout of component pages. And added a close button to allow the user to dismiss the `<SectionMessage>` this is now aligned with our feedback message pattern.
+
+- f85bb04: docs: Apply root styles to overlay portal so they are displayed correctly.
+
+  Overlay components (e.g. `<Dialog>` did not display correctly in the docs.
+
+- Updated dependencies [65608b4]
+- Updated dependencies [caefbe4]
+- Updated dependencies [165e184]
+- Updated dependencies [2d9917f]
+- Updated dependencies [6f8e3a2]
+- Updated dependencies [7ea3838]
+- Updated dependencies [6687af7]
+- Updated dependencies [2babc0b]
+- Updated dependencies [8c539d3]
+- Updated dependencies [f18c8aa]
+- Updated dependencies [d5386e4]
+- Updated dependencies [5798b4d]
+- Updated dependencies [5c029ec]
+- Updated dependencies [2169b6f]
+- Updated dependencies [bfd2843]
+- Updated dependencies [9ff555b]
+- Updated dependencies [0e77996]
+- Updated dependencies [b8cd92a]
+- Updated dependencies [45fb3c4]
+- Updated dependencies [f6a132c]
+- Updated dependencies [956982a]
+- Updated dependencies [df04623]
+- Updated dependencies [f3f0ea0]
+  - @marigold/components@10.0.0
+  - @marigold/theme-b2b@28.0.0
+  - @marigold/theme-core@27.0.0
+  - @marigold/system@10.0.0
+  - @marigold/theme-docs@2.2.0
+  - @marigold/icons@1.2.58
+  - @marigold/theme-preset@1.3.23
+
 ## 9.0.2 (Released on <DateFormat value={new Date("Wed Sep 11 2024 14:52:49 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
 
 ### Patch Changes
diff --git a/docs/content/releases/packages/components/release.mdx b/docs/content/releases/packages/components/release.mdx
index 31859466d3..8e7e5d3f56 100644
--- a/docs/content/releases/packages/components/release.mdx
+++ b/docs/content/releases/packages/components/release.mdx
@@ -1,9 +1,108 @@
 ---
 title: '@marigold/components'
 caption: 'Have a look on the latest changes regarding @marigold/components'
+badge: new
 toc: false
 ---
 
+## 10.0.0 (Released on <DateFormat value={new Date("Fri Oct 25 2024 18:15:28 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
+
+### Major Changes
+
+- 65608b4: fix([DSTSUP-94]): Adjust date unavailable property from `<DatePicker>`
+
+  **Breaking Change:** Adjusted `isDateUnavailable` prop to our code guidelines `dateUnavailable`
+
+  Added disabled styles for `data-unavailable` in both b2b and core theme
+
+- caefbe4: refa(listbox): Allow sections in `<Combobox>` and `<Autocomplete>`, adjust Section API in `<Select>`, `<Combobox>` and `<Autocomplete>`.
+
+  - Added the possibility to use sections with `<Combobox>` and `<Autocomplete>`
+  - Refactored the `<Section>` (from `<Listbox>`) to fit our API, no need for the extra `<Header>` anymore. Instead you can do `<Select.Section header="My header">`, same for the other components
+  - Renamed `<Item>` to `<Option>` in `<Combobox>` and `<Autocomplete>` to align with `<Select>`
+  - Updated the docs for `<Select>`, `<Combobox>` and `<Autocomplete>`
+  - Updated Storybook for `<Select>`, `<Combobox>` and `<Autocomplete>` with section stories
+  - Renamed the part of the `<ListBox>` accordingly (from `sectionTitle` to `header`)
+
+    **BREAKING CHANGE:** We changed the API of the `<Section>` component that is used in `<Select>`, `<Combobox>` and `<Autocomplete>`. It is no longer necessary to add a `Header` within the `<Section>`.
+
+    Use the newly added `header` prop instead. Additionally, to unify the APIs all choices of `<Select>`, `<Combobox>` and `<Autocomplete>` are now called `<Option>` instead of `<Item>`.
+
+- 2d9917f: **Breaking changes**
+
+  - `Dialog.Headline` has been renamed to `Dialog.Title`. Please update your code accordingly.
+  - `<Dialog.Content>` and `<Dialog.Actions>` have been introduced for better organization and flexibility.
+  - The internal layout now uses grid areas, ensuring consistent ordering and layout of the dialog elements.
+  - Existing implementations of the `<Dialog>` component will need to be updated to use these new subcomponents.
+
+### Minor Changes
+
+- 6f8e3a2: style(dialog): make `<Dialog>` sizes responsive
+
+  Using `size` with a `<Dialog>` will allow the dialog to be at most sm/md/lg wide. Will use full width on smaller screens.
+
+- 6687af7: refa: remove footer from `<Dialog>` + allow styles
+
+  - dialogs can only have action now
+  - align buttons in `<Dialog.Actions>` correctly
+
+- 2babc0b: feat(components): Mark layout components as regions for accessibility.
+
+  Added the ability to mark layout components as regions (ARIA role). This improves accessibility by allowing assistive technologies to identify significant sections of the page, making navigation easier for users with disabilities.
+
+- 956982a: feat(components): Make `<Text>` and `<Headline>` accessible by allowing ARIA labelling props
+
+  `<Text>` and `<Headline>` will no longer cause type errors when ARIA labelling is used (`aria-label`, `id`, ...).
+
+- df04623: Adding size to dialog component
+
+### Patch Changes
+
+- 7ea3838: feat(Menu): pass `aria-label` to menu button instead of menu
+- f18c8aa: [DST-494]: add loading states pattern
+
+  [DST-494]: added prop `mode`to the `<XLoader />` to support inline and full-section loading
+
+- d5386e4: fix(components): Display `<Checkbox>` focus ring and adjust focus ring of `<Table>`
+
+  Focus ring was not showing for the `<Checkbox>`. It does now!
+
+- 5c029ec: feat(components): Expose `Selection` type for easy usage with `Table` and other components
+
+  When working with a `<Table>` you can now use
+
+  ```ts
+  import type { Selection } from '@marigold/components';
+  ```
+
+  instead of creating the type.
+
+- 2169b6f: bugfix([DSTSUP-92]): fixed variants in table stories
+
+  At certain stories the control variants doesn't worked properly. Now it should work at least for all table stories.
+
+- bfd2843: chore: refa `<Text>` component. Based on the slot property it now takes the RAC text or not. Needed to prevent other components breaking.
+- 0e77996: docs([DST-572]): Adding a general form guideline in docs explaining different concepts such as when to use lable and help text
+- b8cd92a: feat: `CheckboxGroup` can now be used as a compound component
+
+  - Refactored the `CheckboxGroup` to be a compound component and align it with other components: `<CheckboxGroup>` -> `<Checkbox.Group>`
+  - Adjusted the Checkbox appearance demo a bit
+
+- 45fb3c4: chore(deps): update react-aria to 1.4
+- f6a132c: docs([DST-582]): revise `<SectionMessage>` page according to new component page structure
+  feat(components): add close button on `<SectionMessage>`
+
+  Revised the `<SectionMessage>` documentation page to our new layout of component pages. And added a close button to allow the user to dismiss the `<SectionMessage>` this is now aligned with our feedback message pattern.
+
+- Updated dependencies [caefbe4]
+- Updated dependencies [6687af7]
+- Updated dependencies [2babc0b]
+- Updated dependencies [45fb3c4]
+- Updated dependencies [956982a]
+  - @marigold/system@10.0.0
+  - @marigold/types@1.2.0
+  - @marigold/icons@1.2.58
+
 ## 9.0.2 (Released on <DateFormat value={new Date("Wed Sep 11 2024 14:52:49 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
 
 ### Patch Changes
diff --git a/docs/content/releases/packages/icons/release.mdx b/docs/content/releases/packages/icons/release.mdx
index dbb39f35ff..dd73b3fbab 100644
--- a/docs/content/releases/packages/icons/release.mdx
+++ b/docs/content/releases/packages/icons/release.mdx
@@ -1,9 +1,19 @@
 ---
 title: '@marigold/icons'
 caption: 'Have a look on the latest changes regarding @marigold/icons'
+badge: new
 toc: false
 ---
 
+## 1.2.58 (Released on <DateFormat value={new Date("Fri Oct 25 2024 18:15:28 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
+
+### Patch Changes
+
+- Updated dependencies [caefbe4]
+- Updated dependencies [6687af7]
+- Updated dependencies [45fb3c4]
+  - @marigold/system@10.0.0
+
 ## 1.2.57 (Released on <DateFormat value={new Date("Wed Sep 11 2024 14:52:49 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
 
 ### Patch Changes
diff --git a/docs/content/releases/packages/system/release.mdx b/docs/content/releases/packages/system/release.mdx
index aa036cd9d0..ce0f08a4c9 100644
--- a/docs/content/releases/packages/system/release.mdx
+++ b/docs/content/releases/packages/system/release.mdx
@@ -1,9 +1,41 @@
 ---
 title: '@marigold/system'
 caption: 'Have a look on the latest changes regarding @marigold/system'
+badge: new
 toc: false
 ---
 
+## 10.0.0 (Released on <DateFormat value={new Date("Fri Oct 25 2024 18:15:28 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
+
+### Major Changes
+
+- caefbe4: refa(listbox): Allow sections in `<Combobox>` and `<Autocomplete>`, adjust Section API in `<Select>`, `<Combobox>` and `<Autocomplete>`.
+
+  - Added the possibility to use sections with `<Combobox>` and `<Autocomplete>`
+  - Refactored the `<Section>` (from `<Listbox>`) to fit our API, no need for the extra `<Header>` anymore. Instead you can do `<Select.Section header="My header">`, same for the other components
+  - Renamed `<Item>` to `<Option>` in `<Combobox>` and `<Autocomplete>` to align with `<Select>`
+  - Updated the docs for `<Select>`, `<Combobox>` and `<Autocomplete>`
+  - Updated Storybook for `<Select>`, `<Combobox>` and `<Autocomplete>` with section stories
+  - Renamed the part of the `<ListBox>` accordingly (from `sectionTitle` to `header`)
+
+    **BREAKING CHANGE:** We changed the API of the `<Section>` component that is used in `<Select>`, `<Combobox>` and `<Autocomplete>`. It is no longer necessary to add a `Header` within the `<Section>`.
+
+    Use the newly added `header` prop instead. Additionally, to unify the APIs all choices of `<Select>`, `<Combobox>` and `<Autocomplete>` are now called `<Option>` instead of `<Item>`.
+
+### Minor Changes
+
+- 6687af7: refa: remove footer from `<Dialog>` + allow styles
+
+  - dialogs can only have action now
+  - align buttons in `<Dialog.Actions>` correctly
+
+### Patch Changes
+
+- 45fb3c4: chore(deps): update react-aria to 1.4
+- Updated dependencies [2babc0b]
+- Updated dependencies [956982a]
+  - @marigold/types@1.2.0
+
 ## 9.0.2 (Released on <DateFormat value={new Date("Wed Sep 11 2024 14:52:49 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
 
 ## 9.0.1 (Released on <DateFormat value={new Date("Tue Aug 06 2024 13:45:06 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
diff --git a/docs/content/releases/packages/theme-preset/release.mdx b/docs/content/releases/packages/theme-preset/release.mdx
index 675508a413..138544f373 100644
--- a/docs/content/releases/packages/theme-preset/release.mdx
+++ b/docs/content/releases/packages/theme-preset/release.mdx
@@ -1,9 +1,19 @@
 ---
 title: '@marigold/theme-preset'
 caption: 'Have a look on the latest changes regarding @marigold/theme-preset'
+badge: new
 toc: false
 ---
 
+## 1.3.23 (Released on <DateFormat value={new Date("Fri Oct 25 2024 18:15:28 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
+
+### Patch Changes
+
+- Updated dependencies [caefbe4]
+- Updated dependencies [6687af7]
+- Updated dependencies [45fb3c4]
+  - @marigold/system@10.0.0
+
 ## 1.3.22 (Released on <DateFormat value={new Date("Wed Sep 11 2024 14:52:49 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
 
 ### Patch Changes
diff --git a/docs/content/releases/packages/types/release.mdx b/docs/content/releases/packages/types/release.mdx
index f9e620efea..9368213d72 100644
--- a/docs/content/releases/packages/types/release.mdx
+++ b/docs/content/releases/packages/types/release.mdx
@@ -1,9 +1,22 @@
 ---
 title: '@marigold/types'
 caption: 'Have a look on the latest changes regarding @marigold/types'
+badge: new
 toc: false
 ---
 
+## 1.2.0 (Released on <DateFormat value={new Date("Fri Oct 25 2024 18:15:28 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
+
+### Minor Changes
+
+- 2babc0b: feat(components): Mark layout components as regions for accessibility.
+
+  Added the ability to mark layout components as regions (ARIA role). This improves accessibility by allowing assistive technologies to identify significant sections of the page, making navigation easier for users with disabilities.
+
+- 956982a: feat(components): Make `<Text>` and `<Headline>` accessible by allowing ARIA labelling props
+
+  `<Text>` and `<Headline>` will no longer cause type errors when ARIA labelling is used (`aria-label`, `id`, ...).
+
 ## 1.1.1 (Released on <DateFormat value={new Date("Fri Jun 28 2024 13:44:24 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
 
 ### Patch Changes
diff --git a/docs/content/releases/themes/theme-b2b/release.mdx b/docs/content/releases/themes/theme-b2b/release.mdx
index ff87a82e59..6b3df98628 100644
--- a/docs/content/releases/themes/theme-b2b/release.mdx
+++ b/docs/content/releases/themes/theme-b2b/release.mdx
@@ -1,9 +1,86 @@
 ---
 title: '@marigold/theme-b2b'
 caption: 'Have a look on the latest changes regarding @marigold/theme-b2b'
+badge: new
 toc: false
 ---
 
+## 28.0.0 (Released on <DateFormat value={new Date("Fri Oct 25 2024 18:15:28 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
+
+### Major Changes
+
+- caefbe4: refa(listbox): Allow sections in `<Combobox>` and `<Autocomplete>`, adjust Section API in `<Select>`, `<Combobox>` and `<Autocomplete>`.
+
+  - Added the possibility to use sections with `<Combobox>` and `<Autocomplete>`
+  - Refactored the `<Section>` (from `<Listbox>`) to fit our API, no need for the extra `<Header>` anymore. Instead you can do `<Select.Section header="My header">`, same for the other components
+  - Renamed `<Item>` to `<Option>` in `<Combobox>` and `<Autocomplete>` to align with `<Select>`
+  - Updated the docs for `<Select>`, `<Combobox>` and `<Autocomplete>`
+  - Updated Storybook for `<Select>`, `<Combobox>` and `<Autocomplete>` with section stories
+  - Renamed the part of the `<ListBox>` accordingly (from `sectionTitle` to `header`)
+
+    **BREAKING CHANGE:** We changed the API of the `<Section>` component that is used in `<Select>`, `<Combobox>` and `<Autocomplete>`. It is no longer necessary to add a `Header` within the `<Section>`.
+
+    Use the newly added `header` prop instead. Additionally, to unify the APIs all choices of `<Select>`, `<Combobox>` and `<Autocomplete>` are now called `<Option>` instead of `<Item>`.
+
+- 2d9917f: **Breaking changes**
+
+  - `Dialog.Headline` has been renamed to `Dialog.Title`. Please update your code accordingly.
+  - `<Dialog.Content>` and `<Dialog.Actions>` have been introduced for better organization and flexibility.
+  - The internal layout now uses grid areas, ensuring consistent ordering and layout of the dialog elements.
+  - Existing implementations of the `<Dialog>` component will need to be updated to use these new subcomponents.
+
+### Minor Changes
+
+- 6f8e3a2: style(dialog): make `<Dialog>` sizes responsive
+
+  Using `size` with a `<Dialog>` will allow the dialog to be at most sm/md/lg wide. Will use full width on smaller screens.
+
+- 6687af7: refa: remove footer from `<Dialog>` + allow styles
+
+  - dialogs can only have action now
+  - align buttons in `<Dialog.Actions>` correctly
+
+- df04623: Adding size to dialog component
+
+### Patch Changes
+
+- 65608b4: fix([DSTSUP-94]): Adjust date unavailable property from `<DatePicker>`
+
+  **Breaking Change:** Adjusted `isDateUnavailable` prop to our code guidelines `dateUnavailable`
+
+  Added disabled styles for `data-unavailable` in both b2b and core theme
+
+- 5798b4d: style(b2b): Adjust disabled label color
+
+  Labels where unreadyble when the field was disabled. They had a really bad constrast on the white background. Use regular text color instead.
+
+- f6a132c: docs([DST-582]): revise `<SectionMessage>` page according to new component page structure
+  feat(components): add close button on `<SectionMessage>`
+
+  Revised the `<SectionMessage>` documentation page to our new layout of component pages. And added a close button to allow the user to dismiss the `<SectionMessage>` this is now aligned with our feedback message pattern.
+
+- Updated dependencies [65608b4]
+- Updated dependencies [caefbe4]
+- Updated dependencies [2d9917f]
+- Updated dependencies [6f8e3a2]
+- Updated dependencies [7ea3838]
+- Updated dependencies [6687af7]
+- Updated dependencies [2babc0b]
+- Updated dependencies [f18c8aa]
+- Updated dependencies [d5386e4]
+- Updated dependencies [5c029ec]
+- Updated dependencies [2169b6f]
+- Updated dependencies [bfd2843]
+- Updated dependencies [0e77996]
+- Updated dependencies [b8cd92a]
+- Updated dependencies [45fb3c4]
+- Updated dependencies [f6a132c]
+- Updated dependencies [956982a]
+- Updated dependencies [df04623]
+  - @marigold/components@10.0.0
+  - @marigold/system@10.0.0
+  - @marigold/theme-preset@1.3.23
+
 ## 27.2.1 (Released on <DateFormat value={new Date("Wed Sep 11 2024 14:52:49 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
 
 ### Patch Changes
diff --git a/docs/content/releases/themes/theme-core/release.mdx b/docs/content/releases/themes/theme-core/release.mdx
index 9ae199c575..7404b57637 100644
--- a/docs/content/releases/themes/theme-core/release.mdx
+++ b/docs/content/releases/themes/theme-core/release.mdx
@@ -1,9 +1,74 @@
 ---
 title: '@marigold/theme-core'
 caption: 'Have a look on the latest changes regarding @marigold/theme-core'
+badge: new
 toc: false
 ---
 
+## 27.0.0 (Released on <DateFormat value={new Date("Fri Oct 25 2024 18:15:28 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
+
+### Major Changes
+
+- 2d9917f: **Breaking changes**
+
+  - `Dialog.Headline` has been renamed to `Dialog.Title`. Please update your code accordingly.
+  - `<Dialog.Content>` and `<Dialog.Actions>` have been introduced for better organization and flexibility.
+  - The internal layout now uses grid areas, ensuring consistent ordering and layout of the dialog elements.
+  - Existing implementations of the `<Dialog>` component will need to be updated to use these new subcomponents.
+
+### Minor Changes
+
+- 6f8e3a2: style(dialog): make `<Dialog>` sizes responsive
+
+  Using `size` with a `<Dialog>` will allow the dialog to be at most sm/md/lg wide. Will use full width on smaller screens.
+
+- 6687af7: refa: remove footer from `<Dialog>` + allow styles
+
+  - dialogs can only have action now
+  - align buttons in `<Dialog.Actions>` correctly
+
+- f3f0ea0: With the changes of the `<Dialog>` component, we also needed to update they docs page.
+
+### Patch Changes
+
+- 65608b4: fix([DSTSUP-94]): Adjust date unavailable property from `<DatePicker>`
+
+  **Breaking Change:** Adjusted `isDateUnavailable` prop to our code guidelines `dateUnavailable`
+
+  Added disabled styles for `data-unavailable` in both b2b and core theme
+
+- 8c539d3: style(core): adjust the underlay color to be darker
+- d5386e4: fix(components): Display `<Checkbox>` focus ring and adjust focus ring of `<Table>`
+
+  Focus ring was not showing for the `<Checkbox>`. It does now!
+
+- f6a132c: docs([DST-582]): revise `<SectionMessage>` page according to new component page structure
+  feat(components): add close button on `<SectionMessage>`
+
+  Revised the `<SectionMessage>` documentation page to our new layout of component pages. And added a close button to allow the user to dismiss the `<SectionMessage>` this is now aligned with our feedback message pattern.
+
+- Updated dependencies [65608b4]
+- Updated dependencies [caefbe4]
+- Updated dependencies [2d9917f]
+- Updated dependencies [6f8e3a2]
+- Updated dependencies [7ea3838]
+- Updated dependencies [6687af7]
+- Updated dependencies [2babc0b]
+- Updated dependencies [f18c8aa]
+- Updated dependencies [d5386e4]
+- Updated dependencies [5c029ec]
+- Updated dependencies [2169b6f]
+- Updated dependencies [bfd2843]
+- Updated dependencies [0e77996]
+- Updated dependencies [b8cd92a]
+- Updated dependencies [45fb3c4]
+- Updated dependencies [f6a132c]
+- Updated dependencies [956982a]
+- Updated dependencies [df04623]
+  - @marigold/components@10.0.0
+  - @marigold/system@10.0.0
+  - @marigold/theme-preset@1.3.23
+
 ## 26.2.1 (Released on <DateFormat value={new Date("Wed Sep 11 2024 14:52:49 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
 
 ### Patch Changes
diff --git a/docs/content/releases/themes/theme-docs/release.mdx b/docs/content/releases/themes/theme-docs/release.mdx
index c609afa7ec..33eb276fbb 100644
--- a/docs/content/releases/themes/theme-docs/release.mdx
+++ b/docs/content/releases/themes/theme-docs/release.mdx
@@ -1,9 +1,48 @@
 ---
 title: '@marigold/theme-docs'
 caption: 'Have a look on the latest changes regarding @marigold/theme-docs'
+badge: new
 toc: false
 ---
 
+## 2.2.0 (Released on <DateFormat value={new Date("Fri Oct 25 2024 18:15:28 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
+
+### Minor Changes
+
+- 6687af7: refa: remove footer from `<Dialog>` + allow styles
+
+  - dialogs can only have action now
+  - align buttons in `<Dialog.Actions>` correctly
+
+### Patch Changes
+
+- 165e184: style(docs): Improve whitespace of `p`
+
+  Removed the top margin because this lead to some weird extra whitespace.
+
+- 9ff555b: docs: add landing page to the site
+- Updated dependencies [65608b4]
+- Updated dependencies [caefbe4]
+- Updated dependencies [2d9917f]
+- Updated dependencies [6f8e3a2]
+- Updated dependencies [7ea3838]
+- Updated dependencies [6687af7]
+- Updated dependencies [2babc0b]
+- Updated dependencies [f18c8aa]
+- Updated dependencies [d5386e4]
+- Updated dependencies [5c029ec]
+- Updated dependencies [2169b6f]
+- Updated dependencies [bfd2843]
+- Updated dependencies [0e77996]
+- Updated dependencies [b8cd92a]
+- Updated dependencies [45fb3c4]
+- Updated dependencies [f6a132c]
+- Updated dependencies [956982a]
+- Updated dependencies [df04623]
+  - @marigold/components@10.0.0
+  - @marigold/system@10.0.0
+  - @marigold/theme-preset@1.3.23
+
 ## 2.1.1 (Released on <DateFormat value={new Date("Wed Sep 11 2024 14:52:49 GMT+0200 (Central European Summer Time)")} dateStyle="medium" />)
 
 ### Patch Changes
diff --git a/docs/next.config.js b/docs/next.config.js
index 7388a0645b..6b21452b8f 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -6,13 +6,9 @@ const nextConfig = {
   reactStrictMode: false,
   swcMinify: true,
   distDir: '.next',
-  typescript: {
-    ignoreBuildErrors: true,
-  },
   eslint: {
     ignoreDuringBuilds: true,
   },
-
   transpilePackages: [
     '@marigold/components',
     '@marigold/system',
diff --git a/docs/ui/IconList.tsx b/docs/ui/IconList.tsx
index 73f0eec6a5..92a7ca56b3 100644
--- a/docs/ui/IconList.tsx
+++ b/docs/ui/IconList.tsx
@@ -1,6 +1,6 @@
 'use-client';
 
-import { Card, Text, Tiles, cn } from '@/ui';
+import { Button, Card, Text, Tiles, cn } from '@/ui';
 import { Icons } from '@/ui';
 import { useRef, useState } from 'react';
 import { useCopyToClipboard, useDebounce } from 'react-use';
@@ -17,7 +17,6 @@ const IconListItem = ({ icon }: IconListItemProps) => {
   const Component = Icons[icon];
 
   const svgRef = useRef<SVGElement>();
-  const [isHovered, setHovered] = useState(false);
   const [isCopied, setCopied] = useState(false);
   const [, copyToClipboard] = useCopyToClipboard();
   const [isReady, cancel] = useDebounce(() => setCopied(false), 2000, [
@@ -45,25 +44,21 @@ const IconListItem = ({ icon }: IconListItemProps) => {
 
   return (
     <div className="mt-2">
-      <Card
-        p={3}
-        variant="hovering"
-        onClick={handleClick}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-      >
-        <div className="relative grid h-24 place-items-center">
-          <div
-            className={cn(
-              isCopied || isHovered ? 'opacity-1' : 'opacity-0',
-              'bg-bg-surface absolute flex size-full select-none items-center justify-center whitespace-nowrap font-medium tracking-wider'
-            )}
-          >
-            {isCopied ? 'COPIED!' : 'COPY SVG'}
+      <Button onPress={handleClick} className="size-full h-auto p-0">
+        <Card p={3} variant="hovering">
+          <div className="relative grid h-24 place-items-center">
+            <div
+              className={cn(
+                isCopied ? 'opacity-1' : 'opacity-0',
+                'bg-bg-surface absolute flex size-full select-none items-center justify-center whitespace-nowrap font-medium tracking-wider'
+              )}
+            >
+              {isCopied ? 'COPIED!' : 'COPY SVG'}
+            </div>
+            <Component width={48} height={48} ref={svgRef as any} />
           </div>
-          <Component width={48} height={48} ref={svgRef as any} />
-        </div>
-      </Card>
+        </Card>
+      </Button>
       <Text size="small" align="center">
         {icon}
       </Text>
diff --git a/docs/ui/navigation/Navigation.tsx b/docs/ui/navigation/Navigation.tsx
index 9b752f8fec..fc51b9d9ed 100644
--- a/docs/ui/navigation/Navigation.tsx
+++ b/docs/ui/navigation/Navigation.tsx
@@ -2,7 +2,7 @@
 
 import { siteConfig } from '@/lib/config';
 import { Badge } from '@/ui';
-import { allContentPages } from 'contentlayer/generated';
+import { ContentPage, allContentPages } from 'contentlayer/generated';
 import { usePathname } from 'next/navigation';
 import { NavLink } from './NavLink';
 
@@ -31,13 +31,13 @@ export const useNavigation = (): NavigationSection[] => {
   return navigation.map(({ name, slug, subsections = [] }) => {
     // Section Page = has a section but NO subsection
     const sectionPages = allContentPages
-      .filter(page => page.section === slug && !page.subsection)
+      .filter((page: ContentPage) => page.section === slug && !page.subsection)
       .sort((a, b) => (a.order || 1000) - (b.order || 1000));
 
     return {
       name,
       slug,
-      links: sectionPages.map(page => ({
+      links: sectionPages.map((page: ContentPage) => ({
         name: page.title,
         href: `/${page.slug}`,
         badge: page.badge,
@@ -49,10 +49,10 @@ export const useNavigation = (): NavigationSection[] => {
             ...allContentPages
               .filter(
                 // Subsection Page = has a section AND a subsection
-                page =>
+                (page: ContentPage) =>
                   page.section === slug && page.subsection === subsection.slug
               )
-              .map(page => ({
+              .map((page: ContentPage) => ({
                 name: page.title,
                 href: `/${page.slug}`,
                 badge: page.badge,
diff --git a/package.json b/package.json
index 790e511fcd..9a2ae4ab48 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "lint": "eslint . --ignore-pattern node_modules --ignore-pattern dist --ignore-pattern packages/types/src/index.ts --ignore-pattern \".cache\" --ignore-pattern public",
     "format": "prettier --write \"**/*\"",
     "format:fix": "prettier --write \"**/*\" --fix",
-    "typecheck": "tsc --noEmit --project tsconfig.check.json",
+    "typecheck": "tsc --noEmit --resolveJsonModule --project tsconfig.check.json",
     "contributor": "all-contributors",
     "changeset": "changeset",
     "release:notification": "zx scripts/create-slack-notification.mjs",
diff --git a/tsconfig.check.json b/tsconfig.check.json
index b572b665ec..bc49b1b138 100644
--- a/tsconfig.check.json
+++ b/tsconfig.check.json
@@ -1,6 +1,5 @@
 /*
- * This is only used for typechecking! The docs have their own tsconfig.
- * Using this as root config will make it slow.
+ * This is only used for typechecking!
  */
 {
   "extends": "@marigold/tsconfig/react",
@@ -8,16 +7,11 @@
     "jsx": "preserve",
     "baseUrl": ".",
     "paths": {
+      "contentlayer/generated": ["./docs/.contentlayer/generated"],
+      "@/registry/*": ["./docs/.registry/*"],
       "@marigold/*": ["./packages/*/src", "./themes/*/src"],
-      "~/*": ["docs/src/*"]
+      "@/*": ["./docs/*"]
     }
   },
-  "exclude": [
-    "coverage/*",
-    "jest.config.js",
-    "**/node_modules/*",
-    "**/dist/**/*",
-    "**/scripts/template/*",
-    "docs"
-  ]
+  "exclude": ["coverage/*", "jest.config.js", "**/node_modules/*"]
 }