Merge branch 'feat-color-palette' into chore-rename-tab-to-tab-item

packages/components/docs/Validation.md

@@ -11,6 +11,8 @@
 
 If you use some framework you can pass the props `invalidMessage` and `validMessage` to the component. If you use plain html you need to add 2 `.db-infotext` with `[data-semantic="successful"]` &`[data-semantic="critical"]` inside your form-element.
 
-## Force valid/invalid
+## Handle validation by your self
 
-You can use `invalid="true/false"` or `data-invalid="true/false"` to overwrite the default behaviour of [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
+You can use `data-custom-validity|customValidity="'invalid' | 'valid' | 'no-validation'"` to disable [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
+
+> **Note:** This may lead to problems and inconsistency, only use it if you know what you do!

packages/components/scripts/post-build/react.js

@@ -48,15 +48,15 @@ module.exports = (tmp) => {
 				},
 				{
 					from: ` } from "react"`,
-					to: `, forwardRef, HTMLProps } from "react"`
+					to: `, forwardRef, HTMLAttributes } from "react"`
 				},
 				{
 					from: `function DB${upperComponentName}(props: DB${upperComponentName}Props) {`,
-					to: `function DB${upperComponentName}Fn(props: Omit<HTMLProps<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props, component: any) {`
+					to: `function DB${upperComponentName}Fn(props: Omit<HTMLAttributes<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props, component: any) {`
 				},
 				{
 					from: `export default DB${upperComponentName};`,
-					to: `const DB${upperComponentName} = forwardRef<${htmlElement}, Omit<HTMLProps<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props>(DB${upperComponentName}Fn);\nexport default DB${upperComponentName};`
+					to: `const DB${upperComponentName} = forwardRef<${htmlElement}, Omit<HTMLAttributes<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props>(DB${upperComponentName}Fn);\nexport default DB${upperComponentName};`
 				},
 				{
 					from: 'if (ref.current)',

packages/components/src/components/accordion-item/docs/Angular.md

@@ -23,7 +23,7 @@ import { DBAccordionItem } from '@db-ui/ngx-components';
 ```html app.component.html
 <!-- app.component.html -->
 <db-accordion-item>
-	<ng-container *title>Title</ng-container>
+	<ng-container *headline>Title</ng-container>
 	Content
 </db-accordion-item>
 ```
@@ -32,5 +32,5 @@ import { DBAccordionItem } from '@db-ui/ngx-components';
 
 ```html app.component.html
 <!-- app.component.html -->
-<db-accordion-item title="Title" content="Content"></db-accordion-item>
+<db-accordion-item headlinePlain="Title" content="Content"></db-accordion-item>
 ```

packages/components/src/components/accordion-item/docs/Migration.md

@@ -15,7 +15,7 @@
 
 | Before     | Status | After      | Description                                                 |
 | ---------- | :----: | ---------- | ----------------------------------------------------------- |
-| `summary`  |   🔁   | `title`    | The title/summary of the details element.                   |
+| `summary`  |   🔁   | `headline` | The title/summary of the details element.                   |
 | `emphasis` |   ❌   | ❌         | There is no emphasis anymore.                               |
 | `size`     |   ❌   | ❌         | Controlled by the density.                                  |
 |            |   🆕   | `disabled` | Disable the component.                                      |

packages/components/src/components/accordion-item/docs/React.md

@@ -10,7 +10,7 @@ For general installation and configuration look at the [react-components](https:
 // App.tsx
 import { DBAccordionItem } from "@db-ui/react-components";
 
-const App = () => <DBAccordionItem slotTitle="Title">Content</DBAccordionItem>;
+const App = () => <DBAccordionItem headline="Title">Content</DBAccordionItem>;
 export default App;
 ```
 
@@ -20,6 +20,6 @@ export default App;
 // App.tsx
 import { DBAccordionItem } from "@db-ui/react-components";
 
-const App = () => <DBAccordionItem title="Title" content="Content" />;
+const App = () => <DBAccordionItem headline="Title" content="Content" />;
 export default App;
 ```

packages/components/src/components/accordion-item/docs/Vue.md

@@ -14,7 +14,7 @@ import { DBAccordionItem } from "@db-ui/v-components";
 
 <template>
 	<DBAccordionItem>
-		<template v-slot:title>Title</template>
+		<template v-slot:headline>Title</template>
 		Content
 	</DBAccordionItem>
 </template>
@@ -29,6 +29,6 @@ import { DBAccordionItem } from "@db-ui/v-components";
 </script>
 
 <template>
-	<DBAccordionItem title="Title" content="Content"></DBAccordionItem>
+	<DBAccordionItem headline="Title" content="Content"></DBAccordionItem>
 </template>
 ```

packages/components/src/components/accordion/docs/Angular.md

@@ -21,8 +21,17 @@ import { DBAccordion, DBAccordionItem } from '@db-ui/ngx-components';
 ```html app.component.html
 <!-- app.component.html -->
 <db-accordion>
-	<db-accordion-item title="Item 1" content="Content 1"></db-accordion-item>
-	<db-accordion-item title="Item 2" content="Content 2"></db-accordion-item>
-	<db-accordion-item title="Item 3" content="Content 3"></db-accordion-item>
+	<db-accordion-item
+		headlinePlain="Item 1"
+		content="Content 1"
+	></db-accordion-item>
+	<db-accordion-item
+		headlinePlain="Item 2"
+		content="Content 2"
+	></db-accordion-item>
+	<db-accordion-item
+		headlinePlain="Item 3"
+		content="Content 3"
+	></db-accordion-item>
 </db-accordion>
 ```

packages/components/src/components/accordion/docs/React.md

@@ -10,9 +10,9 @@ import { DBAccordion, DBAccordionItem } from "@db-ui/react-components";
 
 const App = () => (
 	<DBAccordion>
-		<DBAccordionItem title="Item 1" content="Content 1" />
-		<DBAccordionItem title="Item 2" content="Content 2" />
-		<DBAccordionItem title="Item 3" content="Content 3" />
+		<DBAccordionItem headlinePlain="Item 1" content="Content 1" />
+		<DBAccordionItem headlinePlain="Item 2" content="Content 2" />
+		<DBAccordionItem headlinePlain="Item 3" content="Content 3" />
 	</DBAccordion>
 );
 export default App;

packages/components/src/components/accordion/docs/Vue.md

@@ -12,9 +12,9 @@ import { DBAccordion, DBAccordionItem } from "@db-ui/v-components";
 
 <template>
 	<DBAccordion>
-		<DBAccordionItem title="Item 1" content="Content 1" />
-		<DBAccordionItem title="Item 2" content="Content 2" />
-		<DBAccordionItem title="Item 3" content="Content 3" />
+		<DBAccordionItem headlinePlain="Item 1" content="Content 1" />
+		<DBAccordionItem headlinePlain="Item 2" content="Content 2" />
+		<DBAccordionItem headlinePlain="Item 3" content="Content 3" />
 	</DBAccordion>
 </template>
 ```

packages/components/src/components/button/button.lite.tsx

@@ -26,7 +26,6 @@ export default function DBButton(props: DBButtonProps) {
 			id={props.id}
 			class={cls('db-button', props.className)}
 			type={props.type}
-			title={props.title}
 			disabled={props.disabled}
 			aria-label={props.label}
 			data-icon={props.icon}

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -121,14 +121,15 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			data-variant={props.variant}>
 			<label htmlFor={state._id}>
 				<input
+					aria-invalid={props.customValidity === 'invalid'}
+					data-custom-validity={props.customValidity}
 					ref={ref}
 					type="checkbox"
 					id={state._id}
 					name={props.name}
 					checked={props.checked}
 					disabled={props.disabled}
 					value={props.value}
-					aria-invalid={props.invalid}
 					required={props.required}
 					onChange={(event: ChangeEvent<HTMLInputElement>) =>
 						state.handleChange(event)

packages/components/src/components/header/header.lite.tsx

@@ -1,17 +1,17 @@
 import {
 	onMount,
 	onUpdate,
-	Show,
 	Slot,
 	useMetadata,
 	useRef,
 	useStore
 } from '@builder.io/mitosis';
-import { DBHeaderState, DBHeaderProps } from './model';
+import { DBHeaderProps, DBHeaderState } from './model';
 import { addAttributeToChildren, cls, uuid } from '../../utils';
 import { DBButton } from '../button';
 import { DBDrawer } from '../drawer';
 import { DEFAULT_ID } from '../../shared/constants';
+import { isEventTargetNavigationItem } from '../../utils/navigation';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -31,6 +31,11 @@ export default function DBHeader(props: DBHeaderProps) {
 			if (props.onToggle) {
 				props.onToggle(!props.drawerOpen);
 			}
+		},
+		handleNavigationItemClick: (event: unknown) => {
+			if (isEventTargetNavigationItem(event)) {
+				state.toggle();
+			}
 		}
 	});
 
@@ -72,7 +77,13 @@ export default function DBHeader(props: DBHeaderProps) {
 				open={props.drawerOpen}
 				onClose={() => state.toggle()}>
 				<div class="db-header-drawer-navigation">
-					<div class="db-header-navigation">{props.children}</div>
+					<div
+						class="db-header-navigation"
+						onClick={(event) =>
+							state.handleNavigationItemClick(event)
+						}>
+						{props.children}
+					</div>
 					<div class="db-header-meta-navigation">
 						<Slot name="metaNavigation" />
 					</div>

packages/components/src/components/header/model.ts

@@ -2,6 +2,7 @@ import {
 	GlobalProps,
 	GlobalState,
 	InitializedState,
+	NavigationBehaviourState,
 	ToggleEventProps,
 	ToggleEventState
 } from '../../shared/model';
@@ -38,4 +39,5 @@ export interface DBHeaderDefaultState {
 export type DBHeaderState = DBHeaderDefaultState &
 	GlobalState &
 	ToggleEventState<HTMLElement> &
-	InitializedState;
+	InitializedState &
+	NavigationBehaviourState;

packages/components/src/components/icon/icon.lite.tsx

@@ -21,8 +21,7 @@ export default function DBIcon(props: DBIconProps) {
 			data-icon={props.icon}
 			data-icon-weight={props.weight}
 			data-icon-variant={props.variant}
-			aria-hidden="true"
-			title={props.title}>
+			aria-hidden="true">
 			{props.children}
 		</span>
 	);

packages/components/src/components/infotext/infotext.lite.tsx

@@ -18,7 +18,6 @@ export default function DBInfotext(props: DBInfotextProps) {
 			ref={ref}
 			id={props.id}
 			class={cls('db-infotext', props.className)}
-			title={props.title}
 			data-icon={props.icon}
 			data-semantic={props.semantic}
 			data-size={props.size}>

packages/components/src/components/input/input.lite.tsx

@@ -111,6 +111,8 @@ export default function DBInput(props: DBInputProps) {
 				{props.label ?? state.defaultValues.label}
 			</label>
 			<input
+				aria-invalid={props.customValidity === 'invalid'}
+				data-custom-validity={props.customValidity}
 				ref={ref}
 				id={state._id}
 				name={props.name}
@@ -122,7 +124,6 @@ export default function DBInput(props: DBInputProps) {
 				required={props.required}
 				step={props.step}
 				value={props.value}
-				aria-invalid={props.invalid}
 				maxLength={props.maxLength}
 				minLength={props.minLength}
 				max={props.max}

packages/components/src/components/link/link.lite.tsx

@@ -28,7 +28,6 @@ export default function DBLink(props: DBLinkProps) {
 			id={props.id}
 			class={cls('db-link', props.className)}
 			href={props.href}
-			title={props.title}
 			target={props.target}
 			rel={props.rel}
 			role={props.role}

packages/components/src/components/navigation/navigation.scss

@@ -86,4 +86,12 @@
 			}
 		}
 	}
+
+	&[data-force-close="true"] {
+		& > menu menu {
+			@include screen-sizes.screen("md") {
+				display: none;
+			}
+		}
+	}
 }

packages/components/src/components/radio/radio.lite.tsx

@@ -85,14 +85,15 @@ export default function DBRadio(props: DBRadioProps) {
 			class={cls('db-radio', props.className)}
 			htmlFor={state._id}>
 			<input
+				aria-invalid={props.customValidity === 'invalid'}
+				data-custom-validity={props.customValidity}
 				ref={ref}
 				type="radio"
 				id={state._id}
 				name={props.name}
 				checked={props.checked}
 				disabled={props.disabled}
 				aria-describedby={props.describedbyid}
-				aria-invalid={props.invalid}
 				value={props.value}
 				required={props.required}
 				onChange={(event: ChangeEvent<HTMLInputElement>) =>

packages/components/src/components/select/select.lite.tsx

@@ -108,8 +108,9 @@ export default function DBSelect(props: DBSelectProps) {
 			data-icon={props.icon}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<select
+				aria-invalid={props.customValidity === 'invalid'}
+				data-custom-validity={props.customValidity}
 				ref={ref}
-				aria-invalid={props.invalid}
 				required={props.required}
 				disabled={props.disabled}
 				id={state._id}

packages/components/src/components/textarea/textarea.lite.tsx

@@ -15,7 +15,6 @@ import {
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 	DEFAULT_LABEL,
 	DEFAULT_MESSAGE_ID_SUFFIX,
-	DEFAULT_PLACEHOLDER_ID_SUFFIX,
 	DEFAULT_VALID_MESSAGE,
 	DEFAULT_VALID_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
@@ -104,13 +103,14 @@ export default function DBTextarea(props: DBTextareaProps) {
 			</label>
 
 			<textarea
+				aria-invalid={props.customValidity === 'invalid'}
+				data-custom-validity={props.customValidity}
 				ref={ref}
 				id={state._id}
 				data-resize={props.resize}
 				disabled={props.disabled}
 				required={props.required}
 				readOnly={props.readOnly}
-				aria-invalid={props.invalid}
 				form={props.form}
 				maxLength={props.maxLength}
 				minLength={props.minLength}

packages/components/src/shared/model.ts

@@ -28,16 +28,6 @@ export type GlobalProps = {
 	 * React specific for render process.
 	 */
 	key?: string;
-
-	/**
-	 * The default tabindex (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex?retiredLocale=de).
-	 */
-	tabIndex?: number;
-
-	/**
-	 * The [title attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) specifies the tooltip of the component.
-	 */
-	title?: string;
 };
 
 export type GlobalState = {
@@ -99,6 +89,10 @@ export type PlacementProps = {
 		| 'bottom-end';
 };
 
+export type NavigationBehaviourState = {
+	handleNavigationItemClick: (event: unknown) => void;
+};
+
 export type GapProps = {
 	/**
 	 * If the absolute element should have a gap between the parent element.
@@ -158,6 +152,10 @@ export type EmphasisProps = {
 };
 
 export type FormProps = {
+	/**
+	 * Marks an input element as invalid (red) | valid(green) | no-validation(grey). Overwrites the :user-valid selector.
+	 */
+	customValidity?: 'invalid' | 'valid' | 'no-validation';
 	/**
 	 * The disabled attribute can be set to keep a user from clicking on the form element.
 	 */
@@ -166,10 +164,7 @@ export type FormProps = {
 	 * 	Associates the control with a form element
 	 */
 	form?: string;
-	/**
-	 * Marks an input element as invalid. Overwrites the :user-valid selector.
-	 */
-	invalid?: boolean;
+
 	/**
 	 * The label attribute specifies the caption of the form element.
 	 */