Merge branch 'main' into a11y-page

.changeset/bright-masks-love.md

@@ -0,0 +1,19 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+"@marigold/system": patch
+"@marigold/theme-b2b": patch
+---
+
+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>`.

.changeset/config.json

@@ -3,7 +3,7 @@
   "baseBranch": "main",
   "access": "public",
   "changelog": [
-    "@changesets/changelog-github",
+    "@changesets/changelog-git",
     { "repo": "marigold-ui/marigold" }
   ],
   "fixed": [["@marigold/system", "@marigold/components", "@marigold/docs"]]

.changeset/early-sloths-work.md

@@ -0,0 +1,16 @@
+---
+'@marigold/components': major
+'@marigold/theme-core': major
+'@marigold/theme-b2b': major
+---
+
+**Breaking changes**
+
+- `Dialog.Headline` has been renamed to `Dialog.Title`. Please update your code accordingly.
+
+- `<Dialog.Content>`, `<Dialog.Actions>`, and `<Dialog.Footer>` 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.
+

.changeset/friendly-plants-check.md

@@ -0,0 +1,8 @@
+---
+"@marigold/docs": patch
+---
+
+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. 

.changeset/fuzzy-terms-relax.md

@@ -0,0 +1,8 @@
+---
+"@marigold/components": minor
+"@marigold/types": minor
+---
+
+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.

.changeset/large-cows-explain.md

@@ -0,0 +1,8 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+---
+
+[DST-494]: add loading states pattern
+
+[DST-494]: added prop `mode`to the `<XLoader />` to support inline and full-section loading

.changeset/lovely-rivers-kiss.md

@@ -0,0 +1,8 @@
+---
+"@marigold/components": patch
+"@marigold/theme-core": patch
+---
+
+fix(components): Display `<Checkbox>` focus ring and adjust focus ring of `<Table>`
+
+Focus ring was not showing for the `<Checkbox>`. It does now!

.changeset/quiet-meals-shake.md

@@ -0,0 +1,9 @@
+---
+"@marigold/docs": patch
+---
+
+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

.changeset/twelve-elephants-attack.md

@@ -0,0 +1,5 @@
+---
+"@marigold/docs": patch
+---
+
+docs(Combobox): add info that section headers are not included wehen filtering

.changeset/warm-ducks-battle.md

@@ -0,0 +1,7 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+"@marigold/system": patch
+---
+
+chore(deps): update react-aria to 1.4

config/eslint/package.json

@@ -19,20 +19,20 @@
     "directory": "config/eslint"
   },
   "dependencies": {
-    "@babel/core": "7.25.2",
+    "@babel/core": "7.25.8",
     "@babel/eslint-parser": "^7.24.8",
     "@babel/plugin-syntax-flow": "^7.24.7",
     "@babel/plugin-transform-react-jsx": "^7.24.7",
-    "@typescript-eslint/eslint-plugin": "8.8.0",
-    "@typescript-eslint/parser": "8.8.0",
+    "@typescript-eslint/eslint-plugin": "8.8.1",
+    "@typescript-eslint/parser": "8.8.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jest": "28.8.3",
-    "eslint-plugin-jsx-a11y": "6.9.0",
+    "eslint-plugin-jsx-a11y": "6.10.0",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react": "7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-testing-library": "6.3.0",
     "prettier": "3.3.3"
@@ -42,7 +42,7 @@
     "typescript": "5.3.x || 5.5.x"
   },
   "devDependencies": {
-    "eslint": "9.9.1",
+    "eslint": "9.12.0",
     "eslint-plugin-tailwindcss": "3.17.4",
     "typescript": "5.5.4"
   }

config/jest/package.json

@@ -21,7 +21,7 @@
     "directory": "config/jest"
   },
   "dependencies": {
-    "@babel/core": "7.25.2",
+    "@babel/core": "7.25.8",
     "@swc/core": "1.7.26",
     "@swc/jest": "0.2.36",
     "@types/jest": "29.5.13",

docs/CHANGELOG.md

@@ -124,7 +124,7 @@
 
 ### Patch Changes
 
-- [#3939](https://github.com/marigold-ui/marigold/pull/3939) [`2cde433`](https://github.com/marigold-ui/marigold/commit/2cde433e21bc49e378b96c9d812baf21914cf382) Thanks [@sarahgm](https://github.com/sarahgm)! - feat[DST-481]: rename <Message> in <SectionMessage>
+- [#3939](https://github.com/marigold-ui/marigold/pull/3939) [`2cde433`](https://github.com/marigold-ui/marigold/commit/2cde433e21bc49e378b96c9d812baf21914cf382) Thanks [@sarahgm](https://github.com/sarahgm)! - feat[DST-481]: rename `<Message>` in `<SectionMessage>`
 
 - [#3967](https://github.com/marigold-ui/marigold/pull/3967) [`0773aa8`](https://github.com/marigold-ui/marigold/commit/0773aa8cd6ee71faf4f0d04f80f33cbe7fc56202) Thanks [@sebald](https://github.com/sebald)! - refa: Update TypeScript and adjust `<NumericFormat>` props
 

docs/app/[...slug]/layout.tsx

@@ -1,35 +1,10 @@
 import type { PropsWithChildren } from 'react';
-import { Footer } from './_components/Footer';
-import { SectionNavigation } from './_components/SectionNavigation';
+import { DefaultLayout } from '@/ui/layout/DefaultLayout';
 
 // Layout
 // ---------------
 const Layout = ({ children }: PropsWithChildren) => (
-  <>
-    <aside
-      className={[
-        'top-[--page-header-height]',
-        'py-[--page-sub-nav-padding] xl:py-[--page-sub-nav-padding-xl]',
-        'pl-[--page-padding-md] xl:pl-[--page-padding-xl]',
-        'h-[calc(100vh-var(--page-header-height))] w-[--page-sub-nav-width] xl:w-[--page-sub-nav-width-xl]',
-        'fixed z-10 hidden overflow-hidden hover:overflow-y-auto md:block',
-        'scrollbar-thin scrollbar-thumb-secondary-400 scrollbar-thumb-rounded-full scrollbar-track-transparent',
-        'border-secondary-200 border-r',
-      ].join(' ')}
-    >
-      <SectionNavigation />
-    </aside>
-    <main
-      className={[
-        'pt-[--page-main-padding] xl:pt-[--page-main-padding-xl]',
-        'px-[--page-padding] md:px-[--page-padding-md] xl:pr-[--page-padding-xl]',
-        'md:pl-[calc(var(--page-sub-nav-width)+var(--page-main-padding))] xl:pl-[calc(var(--page-sub-nav-width-xl)+var(--page-main-padding-xl))]',
-      ].join(' ')}
-    >
-      {children}
-      <Footer />
-    </main>
-  </>
+  <DefaultLayout>{children}</DefaultLayout>
 );
 
 export default Layout;

docs/app/[...slug]/page.tsx

@@ -16,13 +16,15 @@ interface ContentPageProps {
 async function getPageFromParams(params: ContentPageProps['params']) {
   const slug = params?.slug?.join('/');
   const page = allContentPages.find(page => page.slug === slug);
+
   return page || null;
 }
 
 export async function generateMetadata({
   params,
 }: ContentPageProps): Promise<Metadata> {
   const page = await getPageFromParams(params);
+
   return page
     ? {
         title: page.title,
@@ -57,7 +59,6 @@ export async function generateStaticParams(): Promise<
 
 export default async function ContentPage({ params }: ContentPageProps) {
   const page = await getPageFromParams(params);
-
   if (!page) {
     notFound();
   }
@@ -69,14 +70,16 @@ export default async function ContentPage({ params }: ContentPageProps) {
         <div className="text-secondary-400 pt-1">{page.caption}</div>
       </div>
       <div className="prose max-w-[70ch]">
-        <Mdx className="" title={page.title} code={page.body.code} />
-      </div>
-      <div className="col-start-2 hidden min-[1400px]:block">
-        <TocContainer />
-      </div>
-      <div className="text-text-primary-muted text-xs italic">
-        Last update: <RelativeTime date={new Date(page.modified)} />
+        <Mdx title={page.title} code={page.body.code} />
+        <div className="text-text-primary-muted pt-8 text-xs italic">
+          Last update: <RelativeTime date={new Date(page.modified)} />
+        </div>
       </div>
+      {page.toc === false ? null : (
+        <div className="col-start-2 hidden min-[1400px]:block">
+          <TocContainer />
+        </div>
+      )}
     </article>
   );
 }

docs/app/_components/CommandItems.tsx

@@ -225,6 +225,7 @@ export const PagesItem = ({
   setPages,
 }: PagesItemProps) => {
   const goto = useGoto(setOpen, setPages);
+
   return (
     <CommandGroup heading={name} key={name} className={classNames.section}>
       {items.map(page => (
@@ -233,6 +234,7 @@ export const PagesItem = ({
             className={cn(classNames.item, 'group')}
             key={page.slug}
             value={page.slug}
+            keywords={[page.title]}
             onSelect={() => goto({ slug: page.slug })}
           >
             <Inline space={4} alignY="center">

docs/app/_components/SiteNavigation.tsx

@@ -20,8 +20,8 @@ export const SiteNavigation = () => {
           variant="main"
           className="text-sm font-medium lg:px-1"
           key={index}
-          current={pathname.includes(slug)}
-          href={link?.href ?? '/'}
+          current={pathname.startsWith(`/${slug}`)}
+          href={link?.href ?? `/${slug}`}
         >
           {name}
         </NavLink>

docs/app/releases/blog/[...slug]/layout.tsx

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+import { DefaultLayout } from '@/ui/layout/DefaultLayout';
+
+// Layout
+// ---------------
+const Layout = ({ children }: PropsWithChildren) => (
+  <DefaultLayout>{children}</DefaultLayout>
+);
+
+export default Layout;

docs/app/releases/blog/[...slug]/page.tsx

@@ -0,0 +1,78 @@
+import { baseUrl } from '@/lib/config';
+import { DateFormat, Headline } from '@/ui';
+import { allBlogs } from 'contentlayer/generated';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { TocContainer } from '@/ui/Toc';
+import { Mdx } from '@/ui/mdx';
+
+interface BlogPostProps {
+  params: {
+    slug: string[];
+  };
+}
+async function getPostFromParams(params: BlogPostProps['params']) {
+  const fullPath = `releases/blog/${params.slug}`;
+  const currentPost = allBlogs.find(post => post.slug === fullPath);
+
+  return currentPost || null;
+}
+
+export async function generateMetadata({
+  params,
+}: BlogPostProps): Promise<Metadata> {
+  const post = await getPostFromParams(params);
+
+  return post
+    ? {
+        title: post.title,
+        description: post.date,
+        applicationName: 'Marigold Design System',
+        appleWebApp: {
+          title: 'Marigold Design System',
+        },
+        metadataBase: new URL(baseUrl),
+        openGraph: {
+          siteName: 'Marigold Design System',
+          title: post.title,
+          description: post.date,
+          images: `${baseUrl}/api/og.png?title=${encodeURIComponent(post.title)}`,
+          type: 'website',
+        },
+        twitter: {
+          card: 'summary_large_image',
+          creator: '@reservix',
+        },
+      }
+    : {};
+}
+
+const BlogPost = async ({ params }: BlogPostProps) => {
+  const currentPost = await getPostFromParams(params);
+
+  if (!currentPost) {
+    notFound();
+  }
+
+  return (
+    <article
+      key={currentPost.title}
+      className="grid grid-cols-1 gap-x-24 gap-y-14 min-[1400px]:grid-cols-[minmax(min-content,70ch)_1fr]"
+    >
+      <div className="col-span-full">
+        <Headline level={1}>{currentPost.title}</Headline>
+        <div className="text-secondary-400 pt-1">
+          <DateFormat value={new Date(currentPost.date)} dateStyle="medium" />
+        </div>
+      </div>
+      <div className="prose max-w-[70ch]">
+        <Mdx title={currentPost.title} code={currentPost.body.code} />
+      </div>
+      <div className="col-start-2 hidden min-[1400px]:block">
+        <TocContainer />
+      </div>
+    </article>
+  );
+};
+
+export default BlogPost;

docs/content/components/collection/selectlist/selectlist.mdx

@@ -29,12 +29,18 @@ import { SelectList } from '@marigold/components';
 
 This example shows the standard appearance for `SelectList` component.
 
-<ComponentDemo file="./selectlist-basic.demo.tsx" />
+<ComponentDemo disableLabelWidth file="./selectlist-basic.demo.tsx" />
 
 ### SelectList with single selection mode
 
-<ComponentDemo file="./selectlist-single-selection.demo.tsx" />
+<ComponentDemo
+  disableLabelWidth
+  file="./selectlist-single-selection.demo.tsx"
+/>
 
 ### SelectList with multiple selection mode
 
-<ComponentDemo file="./selectlist-multiple-selection.demo.tsx" />
+<ComponentDemo
+  disableLabelWidth
+  file="./selectlist-multiple-selection.demo.tsx"
+/>