>(children)
? cloneElement(children, {
...children.props,
"data-additional-prop": true,
diff --git a/packages/components/src/lib/react/cloneElement.ts b/packages/components/src/lib/react/cloneElement.ts
new file mode 100644
index 000000000..bec868d0b
--- /dev/null
+++ b/packages/components/src/lib/react/cloneElement.ts
@@ -0,0 +1,36 @@
+import type { Attributes, ReactElement, ReactNode } from "react";
+import React from "react";
+import { deepMap } from "react-children-utilities";
+
+export const cloneElement = (
+ element: ReactElement
,
+ props?: Partial
& Attributes,
+ ...children: ReactNode[]
+) =>
+ deepMap(element, (child: ReactNode, index) => {
+ if (
+ index === 0 &&
+ React.isValidElement<{
+ element: { properties: P };
+ }>(child) &&
+ "element" in child.props &&
+ "receiver" in child.props &&
+ "properties" in child.props.element
+ ) {
+ child.props.element.properties = {
+ ...props,
+ ...child.props.element.properties,
+ };
+ } else if (
+ (index === undefined || index === 0) &&
+ React.isValidElement
(child)
+ ) {
+ if (children.length >= 1) {
+ return React.cloneElement
(child, props, children);
+ }
+
+ return React.cloneElement
(child, props);
+ }
+
+ return child;
+ });
diff --git a/packages/components/src/lib/types/props.ts b/packages/components/src/lib/types/props.ts
index 21a319e33..5ca9bf473 100644
--- a/packages/components/src/lib/types/props.ts
+++ b/packages/components/src/lib/types/props.ts
@@ -1,8 +1,9 @@
-import type { ExoticComponent, HTMLAttributes, ReactHTML } from "react";
+import type { ExoticComponent, HTMLAttributes, HTMLElementType } from "react";
export type Status = "info" | "success" | "warning" | "danger";
export type PropsWithStatus = P & {
+ /** The elements status */
status?: T;
};
@@ -12,10 +13,11 @@ export interface PropsWithTunnel {
}
export interface PropsWithClassName {
+ /** The elements class name. */
className?: string;
}
-export type PropsWithElementType =
+export type PropsWithElementType =
HTMLAttributes & {
elementType?: T | ExoticComponent;
};
diff --git a/packages/components/src/styles/mixins/menuItem.scss b/packages/components/src/styles/mixins/menuItem.scss
index f3e84fe43..96f94a53e 100644
--- a/packages/components/src/styles/mixins/menuItem.scss
+++ b/packages/components/src/styles/mixins/menuItem.scss
@@ -14,6 +14,10 @@
cursor: default;
}
+ &:has(.switch) {
+ justify-content: space-between;
+ }
+
@include focus.focus;
& {
@@ -34,6 +38,10 @@
margin-inline-start: var(--menu-item--spacing);
}
+ .switch {
+ order: 2;
+ }
+
&:hover {
background-color: var(--menu-item--background-color--hover);
}
diff --git a/packages/components/types.d.ts b/packages/components/types.d.ts
index 11c3d9e4c..e8355f1e7 100644
--- a/packages/components/types.d.ts
+++ b/packages/components/types.d.ts
@@ -1,12 +1,34 @@
/// ;
- export default classes;
+declare global {
+ declare module "*.locale.json" {
+ import type { LocalizedStrings } from "react-aria";
+ const langFile: LocalizedStrings;
+ export default langFile;
+ }
+
+ declare module "*.module.css" {
+ const classes: Record;
+ export default classes;
+ }
+
+ // React 19 types workaround for outdated types from third party deps
+ namespace JSX {
+ type ElementType = Jsx.ElementType;
+ type ElementClass = Jsx.ElementClass;
+ type Element = Jsx.Element;
+ type IntrinsicElements = Jsx.IntrinsicElements;
+ type ElementAttributesProperty = Jsx.ElementAttributesProperty;
+ type ElementChildrenAttribute = Jsx.ElementChildrenAttribute;
+ type IntrinsicClassAttributes = Jsx.IntrinsicClassAttributes;
+ }
}
-declare module "*.locale.json" {
- import type { LocalizedStrings } from "react-aria";
- const langFile: LocalizedStrings;
- export default langFile;
+// allow forwardRef with generic types
+declare module "react" {
+ function forwardRef>(
+ render: (props: P, ref: React.Ref) => React.ReactNode | null,
+ ): (props: P & React.RefAttributes) => React.ReactNode | null;
}
diff --git a/packages/components/vite.build.config.base.ts b/packages/components/vite.build.config.base.ts
index befed86e3..f481c995f 100644
--- a/packages/components/vite.build.config.base.ts
+++ b/packages/components/vite.build.config.base.ts
@@ -61,6 +61,7 @@ export const buildConfig = (opts: Options) => {
FileField: "./src/components/FileField/index.ts",
FileCard: "./src/components/FileCard/index.ts",
FileCardList: "./src/components/FileCardList/index.ts",
+ Fragment: "./src/components/Fragment/index.ts",
Header: "./src/components/Header/index.ts",
HeaderNavigation: "./src/components/HeaderNavigation/index.ts",
Heading: "./src/components/Heading/index.ts",
@@ -78,6 +79,7 @@ export const buildConfig = (opts: Options) => {
List: "./src/components/List/index.ts",
"List/ListLoaderAsyncResource":
"./src/components/List/setupComponents/ListLoaderAsyncResource.ts",
+ "List/Views": "./src/components/List/viewComponents/index.ts",
LoadingSpinner: "./src/components/LoadingSpinner/index.ts",
Markdown: "./src/components/Markdown/index.ts",
MenuItem: "./src/components/MenuItem/index.ts",
diff --git a/packages/components/vite.config.ts b/packages/components/vite.config.ts
index f277f102a..5fa998d2f 100644
--- a/packages/components/vite.config.ts
+++ b/packages/components/vite.config.ts
@@ -1,7 +1,7 @@
import { defineConfig } from "vite";
import { cssModuleClassNameGenerator } from "./dev/cssModuleClassNameGenerator";
import path from "path";
-import viteI18nPlugin from "./dev/viteI18nPlugin";
+import { viteI18nPlugin } from "./dev/viteI18nPlugin";
export default defineConfig({
assetsInclude: ["/sb-preview/runtime.js"],
@@ -12,6 +12,12 @@ export default defineConfig({
find: /@\//,
replacement: path.resolve(__dirname) + "/src/",
},
+ {
+ // https://github.com/tabler/tabler-icons/issues/1233#issuecomment-2428245119
+ // /esm/icons/index.mjs only exports the icons statically, so no separate chunks are created
+ find: "@tabler/icons-react",
+ replacement: "@tabler/icons-react/dist/esm/icons/index.mjs",
+ },
],
},
css: {
diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md
index 5374c7b64..a09004fc7 100644
--- a/packages/design-tokens/CHANGELOG.md
+++ b/packages/design-tokens/CHANGELOG.md
@@ -3,6 +3,194 @@
All notable changes to this project will be documented in this file. See
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [0.1.0-alpha.390](https://github.com/mittwald/flow/compare/0.1.0-alpha.389...0.1.0-alpha.390) (2024-12-18)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.389](https://github.com/mittwald/flow/compare/0.1.0-alpha.388...0.1.0-alpha.389) (2024-12-18)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.388](https://github.com/mittwald/flow/compare/0.1.0-alpha.387...0.1.0-alpha.388) (2024-12-18)
+
+### Features
+
+- **Table:** support row header
+ ([#1058](https://github.com/mittwald/flow/issues/1058))
+ ([b73cfdd](https://github.com/mittwald/flow/commit/b73cfdd0d5603846c7ae0ad1882453ad58e1d6d2))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.387](https://github.com/mittwald/flow/compare/0.1.0-alpha.386...0.1.0-alpha.387) (2024-12-18)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.386](https://github.com/mittwald/flow/compare/0.1.0-alpha.385...0.1.0-alpha.386) (2024-12-18)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.385](https://github.com/mittwald/flow/compare/0.1.0-alpha.384...0.1.0-alpha.385) (2024-12-18)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.384](https://github.com/mittwald/flow/compare/0.1.0-alpha.383...0.1.0-alpha.384) (2024-12-18)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.383](https://github.com/mittwald/flow/compare/0.1.0-alpha.382...0.1.0-alpha.383) (2024-12-18)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.382](https://github.com/mittwald/flow/compare/0.1.0-alpha.381...0.1.0-alpha.382) (2024-12-18)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.381](https://github.com/mittwald/flow/compare/0.1.0-alpha.380...0.1.0-alpha.381) (2024-12-17)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.380](https://github.com/mittwald/flow/compare/0.1.0-alpha.379...0.1.0-alpha.380) (2024-12-12)
+
+### Bug Fixes
+
+- **docs:** layout of the footer component
+ ([#1036](https://github.com/mittwald/flow/issues/1036))
+ ([d8adfa4](https://github.com/mittwald/flow/commit/d8adfa4c8d67b2cb40356b6d932f3d72f59a3bce))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.379](https://github.com/mittwald/flow/compare/0.1.0-alpha.378...0.1.0-alpha.379) (2024-12-11)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.378](https://github.com/mittwald/flow/compare/0.1.0-alpha.377...0.1.0-alpha.378) (2024-12-11)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.377](https://github.com/mittwald/flow/compare/0.1.0-alpha.376...0.1.0-alpha.377) (2024-12-11)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.376](https://github.com/mittwald/flow/compare/0.1.0-alpha.375...0.1.0-alpha.376) (2024-12-11)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.375](https://github.com/mittwald/flow/compare/0.1.0-alpha.374...0.1.0-alpha.375) (2024-12-11)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.374](https://github.com/mittwald/flow/compare/0.1.0-alpha.373...0.1.0-alpha.374) (2024-12-10)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.373](https://github.com/mittwald/flow/compare/0.1.0-alpha.372...0.1.0-alpha.373) (2024-12-10)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.372](https://github.com/mittwald/flow/compare/0.1.0-alpha.371...0.1.0-alpha.372) (2024-12-10)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.371](https://github.com/mittwald/flow/compare/0.1.0-alpha.370...0.1.0-alpha.371) (2024-12-10)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
# [0.1.0-alpha.370](https://github.com/mittwald/flow/compare/0.1.0-alpha.369...0.1.0-alpha.370) (2024-12-10)
**Note:** Version bump only for package @mittwald/flow-design-tokens
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
index 06fa3de4b..835f0d813 100644
--- a/packages/design-tokens/package.json
+++ b/packages/design-tokens/package.json
@@ -1,6 +1,6 @@
{
"name": "@mittwald/flow-design-tokens",
- "version": "0.1.0-alpha.370",
+ "version": "0.1.0-alpha.390",
"type": "module",
"description": "The design tokens used in Flow, mittwald’s design system",
"homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens",
@@ -18,8 +18,8 @@
"devDependencies": {
"@types/js-yaml": "^4.0.9",
"js-yaml": "^4.1.0",
- "nx": "^20.2.0",
+ "nx": "^20.2.2",
"prettier": "^3.4.2",
- "style-dictionary": "^4.2.0"
+ "style-dictionary": "^4.3.0"
}
}
diff --git a/packages/design-tokens/src/navigation/menu-item.yml b/packages/design-tokens/src/actions/menu-item.yml
similarity index 100%
rename from packages/design-tokens/src/navigation/menu-item.yml
rename to packages/design-tokens/src/actions/menu-item.yml
diff --git a/packages/design-tokens/src/color-aliases.yml b/packages/design-tokens/src/color-aliases.yml
index b6a55574b..cf92b12db 100644
--- a/packages/design-tokens/src/color-aliases.yml
+++ b/packages/design-tokens/src/color-aliases.yml
@@ -582,7 +582,7 @@ dark-outline-background-color:
pressed:
value: "{dark.color.200}"
dark-outline-border-color:
- value: "{dark.color.700}"
+ value: "{dark.color.800}"
dark-outline-content-color:
value: "{dark.color.800}"
@@ -630,4 +630,4 @@ light-outline-background-color:
light-outline-border-color:
value: "{light.color.800}"
light-outline-content-color:
- value: "{light.color.700}"
+ value: "{light.color.800}"
diff --git a/packages/design-tokens/src/content/code.yml b/packages/design-tokens/src/content/code.yml
index 3eb002a08..f4312d55d 100644
--- a/packages/design-tokens/src/content/code.yml
+++ b/packages/design-tokens/src/content/code.yml
@@ -5,6 +5,8 @@ code:
value: "{line-height.m}"
padding-x:
value: "{size-px.xs}"
+ padding-y:
+ value: "{size-px.xxs}"
padding:
value: "{size-px.m}"
corner-radius:
diff --git a/packages/design-tokens/src/overlays/modal.yml b/packages/design-tokens/src/overlays/modal.yml
index cfdfdf1d7..b732bf7c1 100644
--- a/packages/design-tokens/src/overlays/modal.yml
+++ b/packages/design-tokens/src/overlays/modal.yml
@@ -22,3 +22,5 @@ modal:
value: "{size-px.s}"
off-canvas-max-width:
value: "calc(100dvw - {size-px.m})"
+ content-min-height:
+ value: 120px
diff --git a/packages/design-tokens/src/status/alert-badge.yml b/packages/design-tokens/src/status/alert-badge.yml
index bd499b275..31305347f 100644
--- a/packages/design-tokens/src/status/alert-badge.yml
+++ b/packages/design-tokens/src/status/alert-badge.yml
@@ -1,7 +1,4 @@
alert-badge:
- icon-to-text-spacing:
- value: "{size-rem.xs}"
-
# Info
info-background-color:
value: "{info-soft-background-color.default}"
diff --git a/packages/design-tokens/src/status/alert.yml b/packages/design-tokens/src/status/alert.yml
index ca37d1579..320566c18 100644
--- a/packages/design-tokens/src/status/alert.yml
+++ b/packages/design-tokens/src/status/alert.yml
@@ -10,9 +10,9 @@ alert:
border-style:
value: "{border-style.default}"
heading-to-content-spacing:
- value: "{size-rem.xs}"
- content-to-content-spacing:
value: "{size-rem.s}"
+ spacing:
+ value: "{size-rem.m}"
font-size-heading:
value: "{font-size-text.m}"
diff --git a/packages/design-tokens/src/status/badge.yml b/packages/design-tokens/src/status/badge.yml
index fdb6a248d..7c1448ed9 100644
--- a/packages/design-tokens/src/status/badge.yml
+++ b/packages/design-tokens/src/status/badge.yml
@@ -15,7 +15,7 @@ badge:
value: "{size-rem.xs}"
padding-x:
value: "{size-rem.s}"
- content-to-content-spacing:
+ spacing:
value: "{size-rem.xs}"
# Neutral
@@ -31,8 +31,6 @@ badge:
neutral-content-color:
default:
value: "{color.gray.900}"
- hover:
- value: "{color.gray.900}"
pressed:
value: "{color.gray.1000}"
neutral-scope-background-color:
@@ -53,8 +51,6 @@ badge:
blue-content-color:
default:
value: "{color.hosting-blue.900}"
- hover:
- value: "{color.hosting-blue.900}"
pressed:
value: "{color.hosting-blue.1000}"
blue-scope-background-color:
@@ -75,8 +71,6 @@ badge:
navy-content-color:
default:
value: "{color.mittwald-navy.900}"
- hover:
- value: "{color.mittwald-navy.900}"
pressed:
value: "{color.mittwald-navy.1000}"
navy-scope-background-color:
@@ -97,8 +91,6 @@ badge:
violet-content-color:
default:
value: "{color.soft-contrast-violet.900}"
- hover:
- value: "{color.soft-contrast-violet.900}"
pressed:
value: "{color.soft-contrast-violet.1000}"
violet-scope-background-color:
@@ -119,8 +111,6 @@ badge:
teal-content-color:
default:
value: "{color.super-teal.900}"
- hover:
- value: "{color.super-teal.900}"
pressed:
value: "{color.super-teal.1000}"
teal-scope-background-color:
@@ -141,8 +131,6 @@ badge:
lilac-content-color:
default:
value: "{color.bright-lilac.900}"
- hover:
- value: "{color.bright-lilac.900}"
pressed:
value: "{color.bright-lilac.1000}"
lilac-scope-background-color:
@@ -163,8 +151,6 @@ badge:
red-content-color:
default:
value: "{color.amaranth-red.900}"
- hover:
- value: "{color.amaranth-red.900}"
pressed:
value: "{color.amaranth-red.1000}"
red-scope-background-color:
@@ -185,8 +171,6 @@ badge:
green-content-color:
default:
value: "{color.espelkamp-green.900}"
- hover:
- value: "{color.espelkamp-green.900}"
pressed:
value: "{color.espelkamp-green.1000}"
green-scope-background-color:
@@ -207,8 +191,6 @@ badge:
orange-content-color:
default:
value: "{color.royal-orange.900}"
- hover:
- value: "{color.royal-orange.900}"
pressed:
value: "{color.royal-orange.1000}"
orange-scope-background-color:
@@ -229,8 +211,6 @@ badge:
dark-content-color:
default:
value: "{dark.color.800}"
- hover:
- value: "{dark.color.800}"
pressed:
value: "{dark.color.800}"
dark-scope-background-color:
@@ -251,8 +231,6 @@ badge:
light-content-color:
default:
value: "{light.color.800}"
- hover:
- value: "{light.color.800}"
pressed:
value: "{light.color.800}"
light-scope-background-color:
@@ -264,9 +242,9 @@ badge:
disabled-border-color:
value: "{disabled-outline-border-color}"
disabled-background-color:
- value: "{disabled-soft-background-color}"
+ value: "{disabled-outline-background-color}"
disabled-content-color:
- value: "{disabled-soft-content-color}"
+ value: "{disabled-outline-content-color}"
disabled-scope-background-color:
value: "{disabled-solid-background-color}"
disabled-scope-content-color:
diff --git a/packages/design-tokens/src/status/counter-badge.yml b/packages/design-tokens/src/status/counter-badge.yml
index d87e9fec2..9601219df 100644
--- a/packages/design-tokens/src/status/counter-badge.yml
+++ b/packages/design-tokens/src/status/counter-badge.yml
@@ -11,7 +11,7 @@ counter-badge:
value: "{size-rem.xs}"
background-color:
value: "{success-solid-background-color.default}"
- color:
+ content-color:
value: "{success-solid-content-color}"
border-width:
value: "{border-width.200}"
diff --git a/packages/design-tokens/src/status/notification.yml b/packages/design-tokens/src/status/notification.yml
index d0d5ec84a..6eaf961f3 100644
--- a/packages/design-tokens/src/status/notification.yml
+++ b/packages/design-tokens/src/status/notification.yml
@@ -13,6 +13,8 @@ notification:
value: 355px
heading-to-text-spacing:
value: "{size-rem.xs}"
+ spacing:
+ value: "{size-rem.s}"
font-size:
value: "{font-size-text.s}"
diff --git a/packages/design-tokens/src/structure/accordion.yml b/packages/design-tokens/src/structure/accordion.yml
index 51029beb7..c39d626a5 100644
--- a/packages/design-tokens/src/structure/accordion.yml
+++ b/packages/design-tokens/src/structure/accordion.yml
@@ -1,15 +1,21 @@
accordion:
- heading-to-chevron-spacing:
+ spacing:
value: "{size-rem.s}"
-
- header-corner-radius:
+ corner-radius:
value: "{corner-radius.default}"
- header-padding-x:
+ border-width:
+ value: "{border-width.100}"
+ border-style:
+ value: "{border-style.default}"
+ border-color:
+ value: "{neutral-outline-border-color}"
+ padding-x:
value: "{size-px.s}"
- header-padding-y:
+ padding-y:
value: "{size-px.xs}"
- header-background-color:
+ background-color:
hover:
- value: "{primary-plain-background-color.hover}"
- content-padding:
- value: "{size-px.s}"
+ value: "{primary.color.100}"
+ pressed:
+ value: "{primary.color.100}"
+
diff --git a/packages/design-tokens/src/structure/column-layout.yml b/packages/design-tokens/src/structure/column-layout.yml
index 13683caed..a9eeb8603 100644
--- a/packages/design-tokens/src/structure/column-layout.yml
+++ b/packages/design-tokens/src/structure/column-layout.yml
@@ -1,6 +1,4 @@
column-layout:
- content-to-content-spacing:
- value: "{size-rem.m}"
gap:
s:
value: "{size-px.s}"
@@ -8,3 +6,5 @@ column-layout:
value: "{size-px.m}"
l:
value: "{size-px.l}"
+ xl:
+ value: "{size-px.xl}"
diff --git a/packages/design-tokens/src/structure/list.yml b/packages/design-tokens/src/structure/list.yml
index db25aa47c..27afd6724 100644
--- a/packages/design-tokens/src/structure/list.yml
+++ b/packages/design-tokens/src/structure/list.yml
@@ -1,5 +1,5 @@
list:
- content-to-content-spacing:
+ spacing:
value: "{size-px.s}"
block-to-block-spacing:
value: "{size-px.m}"
@@ -13,8 +13,10 @@ list-item:
value: "{border-width.100}"
border-style:
value: "{border-style.default}"
- content-to-content-spacing:
+ spacing:
value: "{size-px.m}"
+ avatar-to-title-spacing:
+ value: "{size-px.s}"
background-color:
default:
value: "{neutral.color.200}"
diff --git a/packages/design-tokens/src/structure/section.yml b/packages/design-tokens/src/structure/section.yml
index 5bc94f229..f21b470cf 100644
--- a/packages/design-tokens/src/structure/section.yml
+++ b/packages/design-tokens/src/structure/section.yml
@@ -1,18 +1,13 @@
section:
- border-width:
- value: "{separator.height}"
- border-style:
- value: "{border-style.default}"
- border-color:
- value: "{separator.color}"
section-to-section-spacing:
value: "{size-rem.xl}"
- content-to-content-spacing:
+ spacing:
value: "{size-rem.m}"
sub-heading-spacing:
- value: "{size-rem.s}"
+ value: "{size-rem.m}"
+
section-header:
action-to-action-spacing:
value: "{size-rem.s}"
- heading-to-actions-spacing:
+ heading-to-action-spacing:
value: "{size-rem.m}"
diff --git a/packages/design-tokens/src/structure/separator.yml b/packages/design-tokens/src/structure/separator.yml
index c699479c0..088753219 100644
--- a/packages/design-tokens/src/structure/separator.yml
+++ b/packages/design-tokens/src/structure/separator.yml
@@ -1,5 +1,5 @@
separator:
color:
- value: "{neutral.color.700}"
+ value: "{neutral-outline-border-color}"
height:
value: "{border-width.100}"
diff --git a/packages/design-tokens/src/structure/table.yml b/packages/design-tokens/src/structure/table.yml
index 708ee6921..96cfc3513 100644
--- a/packages/design-tokens/src/structure/table.yml
+++ b/packages/design-tokens/src/structure/table.yml
@@ -11,8 +11,6 @@ table:
value: "{size-px.m}"
padding-y:
value: "{size-px.s}"
- header-color:
- value: "{primary.color.1000}"
header-font-weight:
value: "{font-weight.bold}"
header-border-width:
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 5f2d17442..24fdd803d 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -34,7 +34,7 @@
"raw-loader": "^4.0.2",
"react": "19.0.0",
"react-dom": "19.0.0",
- "react-hook-form": "^7.53.2",
+ "react-hook-form": "^7.54.0",
"react-markdown": "^9.0.1",
"remark-frontmatter": "^5.0.0",
"remark-gfm": "^4.0.0",
@@ -46,12 +46,12 @@
},
"devDependencies": {
"@types/node": "^22.10.1",
- "@types/react": "^19.0.0",
- "@types/react-dom": "^19.0.0",
+ "@types/react": "^19.0.1",
+ "@types/react-dom": "^19.0.2",
"@yarnpkg/pnpify": "^4.1.3",
"eslint": "^9.16.0",
"glob": "^11.0.0",
- "nx": "^20.2.0",
+ "nx": "^20.2.2",
"react-docgen-typescript": "^2.2.2",
"typescript": "^5.7.2"
},
diff --git a/packages/docs/src/app/_components/layout/Footer/Footer.tsx b/packages/docs/src/app/_components/layout/Footer/Footer.tsx
index cab25a58b..abe375016 100644
--- a/packages/docs/src/app/_components/layout/Footer/Footer.tsx
+++ b/packages/docs/src/app/_components/layout/Footer/Footer.tsx
@@ -2,66 +2,66 @@
import type { FC } from "react";
import React from "react";
import { LayoutCard } from "@mittwald/flow-react-components/LayoutCard";
-import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";
-import { Section } from "@mittwald/flow-react-components/Section";
-import { Heading } from "@mittwald/flow-react-components/Heading";
-import { Header } from "@mittwald/flow-react-components/Header";
import { Link } from "@mittwald/flow-react-components/Link";
import styles from "./footer.module.scss";
import { Image } from "@mittwald/flow-react-components/Image";
import feedback from "../../../../../assets/Styleguide-Footer_Feedback.svg";
import logoMittwald from "../../../../../assets/mittwald-logo-footer.svg";
-import clsx from "clsx";
+import { FooterSection } from "./components/FooterSection";
+import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";
const Footer: FC = () => {
return (
+ // logo außerhalb des columns, column außenrum
+ // mobile 32px padding
-
-
-
-
-
-
-
-
-
- Hilf uns, Flow noch besser zu machen!
- Fehlt dir eine bestimmte Component oder etwas Anderes? Hast du
- Feedback? Dann teile es uns gerne auf GitHub mit.
-
-
-
-
+
+
+
+
+
+
+
+ Fehlt dir eine bestimmte Component oder etwas Anderes? Hast du
+ Feedback? Dann teile es uns gerne auf GitHub mit.
+
+
+
+
+
+
+
);
};
diff --git a/packages/docs/src/app/_components/layout/Footer/components/FooterSection.module.scss b/packages/docs/src/app/_components/layout/Footer/components/FooterSection.module.scss
new file mode 100644
index 000000000..fbaa3b29b
--- /dev/null
+++ b/packages/docs/src/app/_components/layout/Footer/components/FooterSection.module.scss
@@ -0,0 +1,11 @@
+.footerSection {
+ display: flex;
+ flex-direction: column;
+ gap: var(--size-px--s);
+ font-size: var(--font-size-text--s);
+}
+
+.footerSectionContent {
+ display: grid;
+ gap: var(--size-px--xs);
+}
diff --git a/packages/docs/src/app/_components/layout/Footer/components/FooterSection.tsx b/packages/docs/src/app/_components/layout/Footer/components/FooterSection.tsx
new file mode 100644
index 000000000..7c3683cfd
--- /dev/null
+++ b/packages/docs/src/app/_components/layout/Footer/components/FooterSection.tsx
@@ -0,0 +1,15 @@
+import styles from "./FooterSection.module.scss";
+import type { FC, PropsWithChildren } from "react";
+import React from "react";
+import { Heading } from "@mittwald/flow-react-components/Heading";
+
+export interface FooterSectionProps extends PropsWithChildren {
+ title: string;
+}
+
+export const FooterSection: FC = ({ children, title }) => (
+
+);
diff --git a/packages/docs/src/app/_components/layout/Footer/footer.module.scss b/packages/docs/src/app/_components/layout/Footer/footer.module.scss
index 4c405d5f5..ec3636134 100644
--- a/packages/docs/src/app/_components/layout/Footer/footer.module.scss
+++ b/packages/docs/src/app/_components/layout/Footer/footer.module.scss
@@ -1,15 +1,50 @@
.footer {
+ container-type: inline-size;
background-color: var(--color--hosting-blue--200);
margin: 0;
+ padding: var(--size-px--xxl);
+}
- & > * {
- max-width: 1500px;
- margin: 0 auto;
- }
+.footerColumnLayout {
+ width: 100%;
+}
+
+.footerWrapper {
+ display: flex;
+ gap: var(--size-px--xxl);
+ max-width: 1500px;
+ margin: 0 auto;
+}
+
+.mittwaldLogo {
+ display: grid;
+ grid-column: span 3 / span 3;
+ gap: var(--size-px--s);
}
@container (max-width: 850px) {
- .feedbackPicture {
- display: none;
+ .footer {
+ .feedbackPicture {
+ display: none;
+ }
+
+ .mittwaldLogo {
+ grid-column: span 3 / span 3;
+ }
+ }
+}
+
+@container (max-width: 550px) {
+ .footer {
+ padding: var(--size-px--xl);
+
+ .footerWrapper {
+ flex-direction: column;
+ gap: var(--size-px--xl);
+ }
+
+ .mittwaldLogo {
+ grid-column: auto;
+ }
}
}
diff --git a/packages/docs/src/app/layout.module.scss b/packages/docs/src/app/layout.module.scss
index a4c24231e..c7a86e14c 100644
--- a/packages/docs/src/app/layout.module.scss
+++ b/packages/docs/src/app/layout.module.scss
@@ -76,7 +76,7 @@
.tabContent {
display: flex;
flex-direction: column;
- row-gap: var(--section--content-to-content-spacing);
+ row-gap: var(--section--spacing);
}
@media (max-width: 900px) {
diff --git a/packages/docs/src/content/03-components/actions/context-menu/examples/avatar.tsx b/packages/docs/src/content/03-components/actions/context-menu/examples/avatar.tsx
new file mode 100644
index 000000000..64142f22d
--- /dev/null
+++ b/packages/docs/src/content/03-components/actions/context-menu/examples/avatar.tsx
@@ -0,0 +1,36 @@
+import { Button } from "@mittwald/flow-react-components/Button";
+import ContextMenu, {
+ ContextMenuTrigger,
+ MenuItem,
+} from "@mittwald/flow-react-components/ContextMenu";
+import { Section } from "@mittwald/flow-react-components/Section";
+import { Avatar } from "@mittwald/flow-react-components/Avatar";
+import { Initials } from "@mittwald/flow-react-components/Initials";
+import { IconCamera } from "@mittwald/flow-react-components/Icons";
+import { Heading } from "@mittwald/flow-react-components/Heading";
+import { Separator } from "@mittwald/flow-react-components/Separator";
+import { Text } from "@mittwald/flow-react-components/Text";
+
+
+ Trigger
+
+
+
+
+ Max Mustermann
+
+
+ Max Mustermann
+
+
+
+ Settings
+
+
+ Logout
+
+
+
+ ;
diff --git a/packages/docs/src/content/03-components/actions/context-menu/examples/section.tsx b/packages/docs/src/content/03-components/actions/context-menu/examples/section.tsx
index 7b022550f..f75f1871e 100644
--- a/packages/docs/src/content/03-components/actions/context-menu/examples/section.tsx
+++ b/packages/docs/src/content/03-components/actions/context-menu/examples/section.tsx
@@ -1,26 +1,26 @@
import ContextMenu, {
+ ContextMenuSection,
ContextMenuTrigger,
} from "@mittwald/flow-react-components/ContextMenu";
import Button from "@mittwald/flow-react-components/Button";
import MenuItem from "@mittwald/flow-react-components/MenuItem";
import Heading from "@mittwald/flow-react-components/Heading";
import Separator from "@mittwald/flow-react-components/Separator";
-import Section from "@mittwald/flow-react-components/Section";
Trigger
-
+
Section 1
Item 1
Item 2
Item 3
-
+
+
Section 2
Item 4
Item 5
-
+
;
diff --git a/packages/docs/src/content/03-components/actions/context-menu/examples/sectionSelectionMode.tsx b/packages/docs/src/content/03-components/actions/context-menu/examples/sectionSelectionMode.tsx
new file mode 100644
index 000000000..4db69580f
--- /dev/null
+++ b/packages/docs/src/content/03-components/actions/context-menu/examples/sectionSelectionMode.tsx
@@ -0,0 +1,24 @@
+import ContextMenu, {
+ ContextMenuSection,
+ ContextMenuTrigger,
+ MenuItem,
+} from "@mittwald/flow-react-components/ContextMenu";
+import { Button } from "@mittwald/flow-react-components/Button";
+import { Separator } from "@mittwald/flow-react-components/Separator";
+
+
+ Trigger
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+ Item 4
+ Item 5
+ Item 6
+
+
+ ;
diff --git a/packages/docs/src/content/03-components/actions/context-menu/examples/switch.tsx b/packages/docs/src/content/03-components/actions/context-menu/examples/switch.tsx
new file mode 100644
index 000000000..fadc3a266
--- /dev/null
+++ b/packages/docs/src/content/03-components/actions/context-menu/examples/switch.tsx
@@ -0,0 +1,14 @@
+import ContextMenu, {
+ ContextMenuTrigger,
+ MenuItem,
+} from "@mittwald/flow-react-components/ContextMenu";
+import { Button } from "@mittwald/flow-react-components/Button";
+
+
+ Trigger
+
+ Item 1
+ Item 2
+ Item 3
+
+ ;
diff --git a/packages/docs/src/content/03-components/actions/context-menu/overview.mdx b/packages/docs/src/content/03-components/actions/context-menu/overview.mdx
index 644f286bb..632addc83 100644
--- a/packages/docs/src/content/03-components/actions/context-menu/overview.mdx
+++ b/packages/docs/src/content/03-components/actions/context-menu/overview.mdx
@@ -28,7 +28,7 @@
---
-# Mit Sections und Headings
+# Mit ContextMenuSections und Headings
Autoresponder
+ Password
+
;
diff --git a/packages/docs/src/content/03-components/content/icon/examples/functional.tsx b/packages/docs/src/content/03-components/content/icon/examples/functional.tsx
index 1e71f9f49..0628e3d49 100644
--- a/packages/docs/src/content/03-components/content/icon/examples/functional.tsx
+++ b/packages/docs/src/content/03-components/content/icon/examples/functional.tsx
@@ -11,6 +11,7 @@ import {
IconClose,
IconCode,
IconContextMenu,
+ IconContextMenuVertical,
IconCopy,
IconDelete,
IconDownload,
@@ -81,6 +82,10 @@ import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout";
Context Menu
+ Context Menu Vertical
+
Maximize
-
- Das TextField darf nie ohne ein zugehöriges Label verwendet werden.
-
-
Verwende ein kurzes, präzises Label, das essentielle Eingabeanforderungen kommuniziert.
-
+
---
## FieldDescription
@@ -81,8 +75,8 @@ Formatierungsbeispiele liefern.
Placeholder sind nicht accessible und dürfen daher keine Informationen
enthalten, die für das korrekte Ausfüllen des TextFields erforderlich sind. Das
größte Problem ist, dass Placeholder verschwinden, sobald Text eingegeben wird.
-Darüber hinaus werden sie von manchen Assistenztechnologien nicht korrekt erkann
-und sind kognitiv schwieriger zu verarbeiten als die FieldDescritption. Statt
+Darüber hinaus werden sie von manchen Assistenztechnologien nicht korrekt erkannt
+und sind kognitiv schwieriger zu verarbeiten als die FieldDescription. Statt
einen Placeholder zu verwenden, ergänze das TextField mit ...
- einem [Label](/03-components/content/label) für Informationen, die essenziell
@@ -108,8 +102,11 @@ Das TextField kann sowohl über die Tastatur erreicht und aktiviert werden als
auch mit Assistenztechnologien angesteuert werden. Damit auch der Inhalt
barrierefrei ist, solltest du:
-- immer ein [Label](/03-components/content/label) verwenden, welches essenzielle
- Eingabeanforderungen über das Label kommuniziert.
+- wenn möglich ein [Label](/03-components/content/label) verwenden, welches essenzielle
+ Eingabeanforderungen über das Label kommuniziert. Können die Eingabeanforderungen an
+ das TextField durch den Kontext erschlossen werden, kann auf den Einsatz eines Labels
+ verzichtet werden. In diesem Fall muss das TextField über **aria-labelledby** verknüpft
+ oder über ein **aria-label** beschrieben werden.
- die FieldDescription nutzen, um Unterstützung, Beispiele oder
Formatierungshilfen zu geben.
- Placeholder nicht für Inhalte verwenden, die zum Ausfüllen des TextFields
diff --git a/packages/docs/src/content/03-components/form-controls/text-field/index.mdx b/packages/docs/src/content/03-components/form-controls/text-field/index.mdx
index 30018176f..775ca4a42 100644
--- a/packages/docs/src/content/03-components/form-controls/text-field/index.mdx
+++ b/packages/docs/src/content/03-components/form-controls/text-field/index.mdx
@@ -2,7 +2,7 @@
component: TextField
description:
Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User
- Interface einzugeben. Ein erforderliches Label und eine optionale
+ Interface einzugeben. Ein Label und eine optionale
FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu
kommunizieren.
---
diff --git a/packages/docs/src/content/03-components/form-controls/text-field/overview.mdx b/packages/docs/src/content/03-components/form-controls/text-field/overview.mdx
index f58294820..e4aff6a1a 100644
--- a/packages/docs/src/content/03-components/form-controls/text-field/overview.mdx
+++ b/packages/docs/src/content/03-components/form-controls/text-field/overview.mdx
@@ -1,9 +1,8 @@
# Playground
-Verwende `>;
+
+export class RemoteFormElement extends FlowRemoteElement {
+ static get remoteEvents() {
+ return {
+ submit: {},
+ };
+ }
+
+ static get remoteProperties() {
+ return {
+ id: {},
+ method: {},
+ enctype: {},
+ action: {},
+ };
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "flr-form": InstanceType;
+ }
+}
+
+customElements.define("flr-form", RemoteFormElement);
diff --git a/packages/remote-elements/src/Fragment.ts b/packages/remote-elements/src/Fragment.ts
new file mode 100644
index 000000000..bc90a0e3c
--- /dev/null
+++ b/packages/remote-elements/src/Fragment.ts
@@ -0,0 +1,15 @@
+import type { FragmentProps } from "@mittwald/flow-react-components/Fragment";
+export type { FragmentProps } from "@mittwald/flow-react-components/Fragment";
+import { createRemoteElement } from "@remote-dom/core/elements";
+
+export const RemoteFragmentElement = createRemoteElement({
+ properties: {},
+});
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "flr-fragment": InstanceType;
+ }
+}
+
+customElements.define("flr-fragment", RemoteFragmentElement);
diff --git a/packages/remote-elements/src/ListActiveFilterItem.ts b/packages/remote-elements/src/ListActiveFilterItem.ts
new file mode 100644
index 000000000..3c572ab1f
--- /dev/null
+++ b/packages/remote-elements/src/ListActiveFilterItem.ts
@@ -0,0 +1,24 @@
+import { FlowRemoteElement } from "@/lib/FlowRemoteElement";
+
+export type { ListProps } from "@mittwald/flow-react-components/List";
+
+export class RemoteListActiveFilterItemElement extends FlowRemoteElement {
+ static get remoteEvents() {
+ return {
+ remove: {},
+ };
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "flr-list-active-filter-item": InstanceType<
+ typeof RemoteListActiveFilterItemElement
+ >;
+ }
+}
+
+customElements.define(
+ "flr-list-active-filter-item",
+ RemoteListActiveFilterItemElement,
+);
diff --git a/packages/remote-elements/src/ListActiveFilterList.ts b/packages/remote-elements/src/ListActiveFilterList.ts
new file mode 100644
index 000000000..680bec3d8
--- /dev/null
+++ b/packages/remote-elements/src/ListActiveFilterList.ts
@@ -0,0 +1,31 @@
+import { FlowRemoteElement } from "@/lib/FlowRemoteElement";
+
+export type { ListProps } from "@mittwald/flow-react-components/List";
+
+export class RemoteListActiveFilterListElement extends FlowRemoteElement {
+ static get remoteEvents() {
+ return {
+ resetFilters: {},
+ clearFilters: {},
+ storeFilterDefaultSettings: {},
+ };
+ }
+ static get remoteProperties() {
+ return {
+ someFiltersChanged: {},
+ };
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "flr-list-active-filter-list": InstanceType<
+ typeof RemoteListActiveFilterListElement
+ >;
+ }
+}
+
+customElements.define(
+ "flr-list-active-filter-list",
+ RemoteListActiveFilterListElement,
+);
diff --git a/packages/remote-elements/src/ListFilterPicker.ts b/packages/remote-elements/src/ListFilterPicker.ts
new file mode 100644
index 000000000..6414a5987
--- /dev/null
+++ b/packages/remote-elements/src/ListFilterPicker.ts
@@ -0,0 +1,30 @@
+import { FlowRemoteElement } from "@/lib/FlowRemoteElement";
+
+export type { ListProps } from "@mittwald/flow-react-components/List";
+
+export class RemoteListFilterPickerElement extends FlowRemoteElement {
+ static get remoteEvents() {
+ return {
+ change: {},
+ };
+ }
+ static get remoteSlots() {
+ return ["buttonText"];
+ }
+ static get remoteProperties() {
+ return {
+ selectedKeys: {},
+ selectionMode: {},
+ };
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "flr-list-filter-picker": InstanceType<
+ typeof RemoteListFilterPickerElement
+ >;
+ }
+}
+
+customElements.define("flr-list-filter-picker", RemoteListFilterPickerElement);
diff --git a/packages/remote-elements/src/ListFilterPickerMenuItem.ts b/packages/remote-elements/src/ListFilterPickerMenuItem.ts
new file mode 100644
index 000000000..c5e3c641b
--- /dev/null
+++ b/packages/remote-elements/src/ListFilterPickerMenuItem.ts
@@ -0,0 +1,29 @@
+import { FlowRemoteElement } from "@/lib/FlowRemoteElement";
+
+export type { ListProps } from "@mittwald/flow-react-components/List";
+
+export class RemoteListFilterPickerMenuItemElement extends FlowRemoteElement {
+ static get remoteEvents() {
+ return {
+ action: {},
+ };
+ }
+ static get remoteProperties() {
+ return {
+ id: {},
+ };
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "flr-list-filter-picker-menu-item": InstanceType<
+ typeof RemoteListFilterPickerMenuItemElement
+ >;
+ }
+}
+
+customElements.define(
+ "flr-list-filter-picker-menu-item",
+ RemoteListFilterPickerMenuItemElement,
+);
diff --git a/packages/remote-elements/src/ListHeader.ts b/packages/remote-elements/src/ListHeader.ts
new file mode 100644
index 000000000..1b480593e
--- /dev/null
+++ b/packages/remote-elements/src/ListHeader.ts
@@ -0,0 +1,27 @@
+import { FlowRemoteElement } from "@/lib/FlowRemoteElement";
+
+export class RemoteListHeaderElement extends FlowRemoteElement {
+ static get remoteSlots() {
+ return ["filterPickerList", "activeFilterList"];
+ }
+ static get remoteProperties() {
+ return {
+ showSearch: {},
+ searchValue: {},
+ autoSubmitSearch: {},
+ };
+ }
+ static get remoteEvents() {
+ return {
+ searchChanged: {},
+ };
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "flr-list-header": InstanceType;
+ }
+}
+
+customElements.define("flr-list-header", RemoteListHeaderElement);
diff --git a/packages/remote-elements/src/ListItem.ts b/packages/remote-elements/src/ListItem.ts
new file mode 100644
index 000000000..9b20a150e
--- /dev/null
+++ b/packages/remote-elements/src/ListItem.ts
@@ -0,0 +1,24 @@
+import { FlowRemoteElement } from "@/lib/FlowRemoteElement";
+
+export class RemoteListItemElement extends FlowRemoteElement {
+ static get remoteEvents() {
+ return {
+ action: {},
+ };
+ }
+ static get remoteProperties() {
+ return {
+ id: {},
+ textValue: {},
+ href: {},
+ };
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "flr-list-item": InstanceType;
+ }
+}
+
+customElements.define("flr-list-item", RemoteListItemElement);
diff --git a/packages/remote-elements/src/ListItemView.ts b/packages/remote-elements/src/ListItemView.ts
new file mode 100644
index 000000000..c4aae13bf
--- /dev/null
+++ b/packages/remote-elements/src/ListItemView.ts
@@ -0,0 +1,18 @@
+import { FlowRemoteElement } from "@/lib/FlowRemoteElement";
+
+export class RemoteListItemViewElement extends FlowRemoteElement {
+ static get remoteEvents() {
+ return {};
+ }
+ static get remoteProperties() {
+ return {};
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "flr-list-item-view": InstanceType;
+ }
+}
+
+customElements.define("flr-list-item-view", RemoteListItemViewElement);
diff --git a/packages/remote-elements/src/ListItems.ts b/packages/remote-elements/src/ListItems.ts
new file mode 100644
index 000000000..5904d3fad
--- /dev/null
+++ b/packages/remote-elements/src/ListItems.ts
@@ -0,0 +1,18 @@
+import { FlowRemoteElement } from "@/lib/FlowRemoteElement";
+
+export class RemoteListItemsElement extends FlowRemoteElement {
+ static get remoteProperties() {
+ return {
+ isLoading: {},
+ isInitiallyLoading: {},
+ };
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "flr-list-items": InstanceType;
+ }
+}
+
+customElements.define("flr-list-items", RemoteListItemsElement);
diff --git a/packages/remote-elements/src/TextField.ts b/packages/remote-elements/src/TextField.ts
index 782d7d39c..d1a424f62 100644
--- a/packages/remote-elements/src/TextField.ts
+++ b/packages/remote-elements/src/TextField.ts
@@ -1,66 +1,28 @@
-/* eslint-disable */
-/* prettier-ignore */
-/* This file is auto-generated with the remote-components-generator */
-import { createRemoteElement } from "@remote-dom/core/elements";
import type { TextFieldProps } from "@mittwald/flow-react-components/TextField";
+import { FlowRemoteElement } from "@/lib/FlowRemoteElement";
+
export type { TextFieldProps } from "@mittwald/flow-react-components/TextField";
-export const RemoteTextFieldElement = createRemoteElement