chore: rename tab to tab item (#2491)

* chore(deps-dev): bump the playwright group with 3 updates

Bumps the playwright group with 3 updates: [@playwright/test](https://github.com/microsoft/playwright), [@playwright/experimental-ct-react](https://github.com/microsoft/playwright) and [@playwright/experimental-ct-vue](https://github.com/microsoft/playwright).


Updates `@playwright/test` from 1.35.1 to 1.40.0
- [Release notes](https://github.com/microsoft/playwright/releases)
- [Commits](microsoft/playwright@v1.35.1...v1.40.0)

Updates `@playwright/experimental-ct-react` from 1.35.1 to 1.40.0
- [Release notes](https://github.com/microsoft/playwright/releases)
- [Commits](microsoft/playwright@v1.35.1...v1.40.0)

Updates `@playwright/experimental-ct-vue` from 1.35.1 to 1.40.0
- [Release notes](https://github.com/microsoft/playwright/releases)
- [Commits](microsoft/playwright@v1.35.1...v1.40.0)

---
updated-dependencies:
- dependency-name: "@playwright/test"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: playwright
- dependency-name: "@playwright/experimental-ct-react"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: playwright
- dependency-name: "@playwright/experimental-ct-vue"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: playwright
...

Signed-off-by: dependabot[bot] <[email protected]>

* chore: update playwright

* fix: issue with new playwright - webkit browser

* chore: update package-lock.json

* chore: update snapshots

* fix: issue with webkit

* chore: update snapshots for webkit

* feat: add color palette and refactor color consumption

* fix: missing token in showcase

* fix: missing token in showcase

* chore: update snapshots

* chore: reverted webkit workaround

* chore: changed playwright image and update snapshots

* chore: update snapshots

* chore: update snapshots

* chore: removed webkit screenshots because of icon font issue

* chore: update snapshots

* chore: update snapshots

* chore: update from main

* chore: fix issues from playwright tests

* chore: update from main

* chore: update from main

* chore: update speaking colors

* chore: update snapshots

* chore: update color consumption

* chore: fix issues with checkbox/radio

* fix: issue with removed colorVariants from card

* chore: update colors

* chore: update snapshots

* fix: issue with wrong brand hover color

* fix: issue with solid button

* chore: update colors to use bg-1,2,3

* chore: update snapshots

* fix: issue with wrong import

* chore: update default color scheme

* chore: update playwright

* chore: update from main

* chore: update snapshots

* chore: replaced base with neutral and renamed bg-1 to bg-lvl-1

* fix: issue with brand colors

* chore: update from main

* chore: update from main

* chore: update snapshots

* feat: add headline icon size and weight

* chore: aligned disabled opacity

* chore: reworked button and link

* chore: rename tonality to density

* chore: add db-puls to tab directly

* fix: issue with missing block-size for scrollbar

* chore: removed semantic colors from form-elements
chore: renamed labelVariant to variant
chore: renamed variant to semantic

* chore: update radio border logic

* chore: update card

* chore: update card

* chore: update active state navigation item

* chore: update snapshots

* chore: update colors to use "-enabled"

* fix: issue with wrong color tokens

* fix: issue with popover

* fix: issue with angular active tab

* chore: refactored alert and renamed it to notification
chore: update new color palette

* fix: issue with wrong dir name for notification

* chore: add "on-contrast" color

* fix: issue with base path

* chore: update fonts and transitions
chore: update background-color for adaptive components
chore: removed style-dictionary

* chore: update brand colors

* chore: update from main

* chore: update from main

* chore: update border variables

* feat: add cursor pointer to interactive components

* fix: issue with textarea scrollbar

* fix: issue with wrong prop

* chore: update snapshots

* chore: update font-size and color issues found in theme-builder

* chore: fix issue with notification close button

* fix: issue with notification

* fix: issue with tab disabled state

* fix: issue with missing not[data-placement] for popover

* chore: add brand-on variables for colors

* fix: issue with tab ids when changing amount of tabs

* chore: update from main

* fix: default color palette

* feat: handle correct validation

* chore: revert patternhub delete -.-

* fix: issue with angular compile

* fix: issue with angular compile

* chore: update notification

* chore: update snapshots

* fix: issues with validation for form-components

* fix: issue with tabs

* fix: issue with missing type

* fix: issue with typo in button variant

* fix: add missing on-contrast variable

* chore: update from main

* docs: add migration doc for beta

* Chore mitosis update (#2349)

* chore(deps-dev): bump @builder.io/mitosis-cli from 0.0.100 to 0.0.143

Bumps @builder.io/mitosis-cli from 0.0.100 to 0.0.143.

---
updated-dependencies:
- dependency-name: "@builder.io/mitosis-cli"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

* fix: issue with new slot update from mitosis

* chore: update mitosis (changing slots for react)

* fix: issue in patternhub with slots

* Update README.md

* fix: issue with accordion

* fix: issue with vue component tests

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Maximilian Franzke <[email protected]>

* docs: add migration to global readme

* chore: update from main

* fix: issues with checkbox and radio tags

* chore: update snapshots

* chore: update from main

* feat: add message to checkbox (#2364)

* feat: add message to checkbox

* chore: update snapshots

* Update packages/components/src/styles/_form-components.scss

Co-authored-by: Maximilian Franzke <[email protected]>

* Update packages/components/src/styles/_form-components.scss

Co-authored-by: Maximilian Franzke <[email protected]>

---------

Co-authored-by: Maximilian Franzke <[email protected]>

* fix: issue with code docs

* fix: issue with angular css selectors

* chore: typo

* chore: update from main

* chore: update package-lock.json

* fix: issue with vue output

* chore: update from main

* chore: update package-lock.json

* fix: issue with accordion test

* chore: rename main-navigation to navigation

* chore: update package-lock.json

* chore: update from main

* chore: regenerate package-lock.json

* chore: regenerate package-lock.json

* fix: issue with validation and add additional information for this

* fix: issue with popover component test

* chore: update snapshots

* fix: wrong docs for vue main-navigation

* fix: wrong docs for vue main-navigation

* chore: renames tab to tab item

* chore: adds TabItem screenshots

* chore: update package-lock.json

* fix: adds missing angular component selectors for tab items

* fix: issue with user-valid for checkbox

* fix: adds dbtabitem to not angular selector

* fix: adds db-tab-item and dbtabitem to angular workarounds

* feat: add customValidity

* fix: removes minor layout bugs like spacings caused by merging

* fix: issues from merging

* docs: moves tab-item overview into tabs overview

* fix: changes ui classes to density classes

* fix: sets track to full width at width auto

* fix: changes import from DBTab to DBTabItem

* chore: regenerated snapshots

* Update packages/components/src/index.ts

Co-authored-by: Maximilian Franzke <[email protected]>

* Update packages/components/src/components/tabs/tabs.scss

Co-authored-by: Maximilian Franzke <[email protected]>

* refactor: regenerated package lock file

* chore: revert wrong changes from merge

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: NicolasMerget <[email protected]>
Co-authored-by: Nicolas Merget <[email protected]>
Co-authored-by: Maximilian Franzke <[email protected]>
Co-authored-by: Maximilian Franzke <[email protected]>

packages/components/index.html

@@ -13,7 +13,7 @@
 			</li>
 
 			<li>
-				<a href="./src/components/tab/index.html">DBTab</a>
+				<a href="src/components/tab-item/index.html">DBTabItem</a>
 			</li>
 
 			<li>

packages/components/overrides/angular/src/components/tab-item/index.ts

@@ -0,0 +1 @@
+export { DBTabItem } from './tab-item';

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

@@ -37,7 +37,7 @@ const getComponents = () => [
 		}
 	},
 	{
-		name: 'tab',
+		name: 'tab-item',
 		config: {
 			angular: {
 				initValues: [

packages/components/src/components/tab/docs/Angular.md → packages/components/src/components/tab-item/docs/Angular.md

@@ -8,12 +8,12 @@ You can't use the component standalone!
 
 ```ts app.module.ts
 //app.module.ts
-import { DBTab, DBTabList, DBTabPanel, DBTabs } from '@db-ui/ngx-components';
+import { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ui/ngx-components';
 
 @NgModule({
   ...
   standalone: true,
-  imports: [..., DBTab,DBTabList,DBTabPanel,DBTabs],
+  imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],
   ...
 })
 
@@ -25,9 +25,9 @@ import { DBTab, DBTabList, DBTabPanel, DBTabs } from '@db-ui/ngx-components';
 <!-- app.component.html -->
 <db-tabs>
 	<db-tab-list>
-		<db-tab>Tab 1</db-tab>
-		<db-tab>Tab 2</db-tab>
-		<db-tab>Tab 3</db-tab>
+		<db-tab-item>Tab 1</db-tab-item>
+		<db-tab-item>Tab 2</db-tab-item>
+		<db-tab-item>Tab 3</db-tab-item>
 	</db-tab-list>
 	<db-tab-panel>Tab Panel 1</db-tab-panel>
 	<db-tab-panel>Tab Panel 2</db-tab-panel>

packages/components/src/components/tab/docs/HTML.md → packages/components/src/components/tab-item/docs/HTML.md

@@ -14,7 +14,7 @@ For general installation and configuration take a look at the [components](https
 				<label
 					role="tab"
 					for="my-tabs-tab-0"
-					class="db-tab"
+					class="db-tab-item"
 					data-width="auto"
 					data-alignment="start"
 					aria-controls="my-tabs-tab-panel-0"
@@ -26,7 +26,7 @@ For general installation and configuration take a look at the [components](https
 				><label
 					role="tab"
 					for="my-tabs-tab-1"
-					class="db-tab"
+					class="db-tab-item"
 					data-width="auto"
 					data-alignment="start"
 					aria-controls="my-tabs-tab-panel-1"
@@ -38,7 +38,7 @@ For general installation and configuration take a look at the [components](https
 				><label
 					role="tab"
 					for="my-tabs-tab-2"
-					class="db-tab"
+					class="db-tab-item"
 					data-width="auto"
 					data-alignment="start"
 					aria-controls="my-tabs-tab-panel-2"

packages/components/src/components/tab/docs/Migration.md → packages/components/src/components/tab-item/docs/Migration.md

@@ -7,9 +7,9 @@
 
 ### class
 
-| Before       | Status | After    | Description |
-| ------------ | :----: | -------- | ----------- |
-| `cmp-db-tab` |   🔁   | `db-tab` |             |
+| Before       | Status | After         | Description |
+| ------------ | :----: | ------------- | ----------- |
+| `cmp-db-tab` |   🔁   | `db-tab-item` |             |
 
 ### name
 

packages/components/src/components/tab/docs/React.md → packages/components/src/components/tab-item/docs/React.md

@@ -6,14 +6,19 @@ For general installation and configuration take a look at the [react-components]
 
 ```tsx App.tsx
 // App.tsx
-import { DBTab, DBTabList, DBTabs, DBTabPanel } from "@db-ui/react-components";
+import {
+	DBTabItem,
+	DBTabList,
+	DBTabs,
+	DBTabPanel
+} from "@db-ui/react-components";
 
 const App = () => (
 	<DBTabs>
 		<DBTabList>
-			<DBTab>Tab 1</DBTab>
-			<DBTab>Tab 2</DBTab>
-			<DBTab>Tab 3</DBTab>
+			<DBTabItem>Tab 1</DBTabItem>
+			<DBTabItem>Tab 2</DBTabItem>
+			<DBTabItem>Tab 3</DBTabItem>
 		</DBTabList>
 		<DBTabPanel>Tab Panel 1</DBTabPanel>
 		<DBTabPanel>Tab Panel 2</DBTabPanel>

packages/components/src/components/tab/docs/Vue.md → packages/components/src/components/tab-item/docs/Vue.md

@@ -7,15 +7,15 @@ For general installation and configuration take a look at the [v-components](htt
 ```vue App.vue
 <!-- App.vue -->
 <script>
-import { DBTabPanel, DBTabs, DBTabList, DBTab } from "@db-ui/v-components";
+import { DBTabPanel, DBTabs, DBTabList, DBTabItem } from "@db-ui/v-components";
 </script>
 
 <template>
 	<DBTabs>
 		<DBTabList>
-			<DBTab>Tab 1</DBTab>
-			<DBTab>Tab 2</DBTab>
-			<DBTab>Tab 3</DBTab>
+			<DBTabItem>Tab 1</DBTabItem>
+			<DBTabItem>Tab 2</DBTabItem>
+			<DBTabItem>Tab 3</DBTabItem>
 		</DBTabList>
 		<DBTabPanel>Tab Panel 1</DBTabPanel>
 		<DBTabPanel>Tab Panel 2</DBTabPanel>

packages/components/src/components/tab/index.html → packages/components/src/components/tab-item/index.html

@@ -2,22 +2,22 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<title>DBTab</title>
+		<title>DBTabItem</title>
 		<link rel="stylesheet" href="/styles/db-ui-42.css" />
 	</head>
 	<body style="padding: var(--db-spacing-fixed-md)">
-		<label class="db-tab" htmlFor="test1" role="tab">
+		<label class="db-tab-item" htmlFor="test1" role="tab">
 			<input type="radio" name="test" id="test1" />
 			label 1
 		</label>
 
-		<label class="db-tab" htmlFor="test2" role="tab">
+		<label class="db-tab-item" htmlFor="test2" role="tab">
 			<input type="radio" name="test" id="test2" checked />
 			active
 		</label>
 
 		<label
-			class="db-tab"
+			class="db-tab-item"
 			htmlFor="test3"
 			role="tab"
 			data-icon="x_placeholder"
@@ -27,7 +27,7 @@
 		</label>
 
 		<label
-			class="db-tab"
+			class="db-tab-item"
 			htmlFor="test4"
 			role="tab"
 			data-icon-after="x_placeholder"
@@ -37,7 +37,7 @@
 		</label>
 
 		<label
-			class="db-tab"
+			class="db-tab-item"
 			htmlFor="test5"
 			role="tab"
 			data-icon="x_placeholder"
@@ -46,13 +46,13 @@
 			<input type="radio" name="test" id="test5" />
 		</label>
 
-		<label class="db-tab" htmlFor="test6" role="tab" data-width="full">
+		<label class="db-tab-item" htmlFor="test6" role="tab" data-width="full">
 			<input type="radio" name="test" id="test6" />
 			width (full)
 		</label>
 
 		<label
-			class="db-tab"
+			class="db-tab-item"
 			htmlFor="test7"
 			role="tab"
 			data-width="full"

packages/components/src/components/tab-item/index.ts

@@ -0,0 +1 @@
+export { default as DBTabItem } from './tab-item';

packages/components/src/components/tab/model.ts → packages/components/src/components/tab-item/model.ts

@@ -7,9 +7,9 @@ import {
 	InitializedState
 } from '../../shared/model';
 
-export type DBTabDefaultProps = {
+export type DBTabItemDefaultProps = {
 	/**
-	 * The label of the tab, if you don't want to use children.
+	 * The label of the tab-item, if you don't want to use children.
 	 */
 	label?: string;
 
@@ -18,17 +18,19 @@ export type DBTabDefaultProps = {
 	 */
 	noText?: boolean;
 	/**
-	 * The disabled attribute can be set to keep a user from clicking on the tab.
+	 * The disabled attribute can be set to keep a user from clicking on the tab-item.
 	 */
 	disabled?: boolean;
 };
 
-export type DBTabProps = GlobalProps &
-	DBTabDefaultProps &
+export type DBTabItemProps = GlobalProps &
+	DBTabItemDefaultProps &
 	IconProps &
 	IconAfterProps &
 	ActiveProps;
 
-export type DBTabDefaultState = {};
+export type DBTabItemDefaultState = {};
 
-export type DBTabState = DBTabDefaultState & GlobalState & InitializedState;
+export type DBTabItemState = DBTabItemDefaultState &
+	GlobalState &
+	InitializedState;

packages/components/src/components/tab-item/tab-item-web-component.scss

@@ -0,0 +1 @@
+@forward "tab-item";

packages/components/src/components/tab/tab.lite.tsx → packages/components/src/components/tab-item/tab-item.lite.tsx

@@ -6,18 +6,18 @@ import {
 	useRef,
 	useStore
 } from '@builder.io/mitosis';
-import type { DBTabProps, DBTabState } from './model';
+import type { DBTabItemProps, DBTabItemState } from './model';
 import { cls } from '../../utils';
 import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
 });
 
-export default function DBTab(props: DBTabProps) {
+export default function DBTabItem(props: DBTabItemProps) {
 	const ref = useRef<HTMLInputElement>(null);
 	// jscpd:ignore-start
-	const state = useStore<DBTabState>({
+	const state = useStore<DBTabItemState>({
 		_id: DEFAULT_ID,
 		initialized: false
 	});
@@ -35,7 +35,7 @@ export default function DBTab(props: DBTabProps) {
 	}, [ref, state.initialized]);
 
 	return (
-		<li className={cls('db-tab', props.className)} role="tab">
+		<li className={cls('db-tab-item', props.className)} role="tab">
 			<label
 				htmlFor={state._id}
 				data-icon={props.icon}

packages/components/src/components/tab/tab.scss → packages/components/src/components/tab-item/tab-item.scss

@@ -13,7 +13,7 @@ $with-icon-padding: calc(
 
 $tab-border-radius: variables.$db-border-radius-sm;
 
-.db-tab {
+.db-tab-item {
 	position: relative;
 	display: inline-flex;
 	list-style-type: none;
@@ -31,7 +31,6 @@ $tab-border-radius: variables.$db-border-radius-sm;
 		white-space: nowrap;
 		border: none;
 		border-radius: $tab-border-radius;
-
 		overflow: hidden;
 		text-overflow: ellipsis;
 
@@ -113,7 +112,7 @@ $tab-border-radius: variables.$db-border-radius-sm;
 		/*
 		focus must be set on input:
 		- parent label tag may use before AND after for displaying icons
-		- placed on li.db-tab focus would get cut off partially by by overflow hidden (orientation vertical)
+		- placed on li.db-tab-item focus would get cut off partially by by overflow hidden (orientation vertical)
 		 */
 		&:focus-visible {
 			&:is(input[type="radio"]) {

packages/components/src/components/tab-list/docs/Angular.md

@@ -8,12 +8,12 @@ You can't use the component standalone!
 
 ```ts app.module.ts
 //app.module.ts
-import { DBTab, DBTabList, DBTabPanel, DBTabs } from '@db-ui/ngx-components';
+import { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ui/ngx-components';
 
 @NgModule({
   ...
   standalone: true,
-  imports: [..., DBTab,DBTabList,DBTabPanel,DBTabs],
+  imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],
   ...
 })
 
@@ -25,9 +25,9 @@ import { DBTab, DBTabList, DBTabPanel, DBTabs } from '@db-ui/ngx-components';
 <!-- app.component.html -->
 <db-tabs>
 	<db-tab-list>
-		<db-tab>Tab 1</db-tab>
-		<db-tab>Tab 2</db-tab>
-		<db-tab>Tab 3</db-tab>
+		<db-tab-item>Tab 1</db-tab-item>
+		<db-tab-item>Tab 2</db-tab-item>
+		<db-tab-item>Tab 3</db-tab-item>
 	</db-tab-list>
 	<db-tab-panel>Tab Panel 1</db-tab-panel>
 	<db-tab-panel>Tab Panel 2</db-tab-panel>

packages/components/src/components/tab-list/docs/React.md

@@ -6,14 +6,19 @@ For general installation and configuration take a look at the [react-components]
 
 ```tsx App.tsx
 // App.tsx
-import { DBTab, DBTabList, DBTabs, DBTabPanel } from "@db-ui/react-components";
+import {
+	DBTabItem,
+	DBTabList,
+	DBTabs,
+	DBTabPanel
+} from "@db-ui/react-components";
 
 const App = () => (
 	<DBTabs>
 		<DBTabList>
-			<DBTab>Tab 1</DBTab>
-			<DBTab>Tab 2</DBTab>
-			<DBTab>Tab 3</DBTab>
+			<DBTabItem>Tab 1</DBTabItem>
+			<DBTabItem>Tab 2</DBTabItem>
+			<DBTabItem>Tab 3</DBTabItem>
 		</DBTabList>
 		<DBTabPanel>Tab Panel 1</DBTabPanel>
 		<DBTabPanel>Tab Panel 2</DBTabPanel>

packages/components/src/components/tab-list/docs/Vue.md

@@ -7,15 +7,15 @@ For general installation and configuration take a look at the [v-components](htt
 ```vue App.vue
 <!-- App.vue -->
 <script>
-import { DBTabPanel, DBTabs, DBTabList, DBTab } from "@db-ui/v-components";
+import { DBTabPanel, DBTabs, DBTabList, DBTabItem } from "@db-ui/v-components";
 </script>
 
 <template>
 	<DBTabs>
 		<DBTabList>
-			<DBTab>Tab 1</DBTab>
-			<DBTab>Tab 2</DBTab>
-			<DBTab>Tab 3</DBTab>
+			<DBTabItem>Tab 1</DBTabItem>
+			<DBTabItem>Tab 2</DBTabItem>
+			<DBTabItem>Tab 3</DBTabItem>
 		</DBTabList>
 		<DBTabPanel>Tab Panel 1</DBTabPanel>
 		<DBTabPanel>Tab Panel 2</DBTabPanel>

packages/components/src/components/tab-panel/docs/Angular.md

@@ -8,12 +8,12 @@ You can't use the component standalone!
 
 ```ts app.module.ts
 //app.module.ts
-import { DBTab, DBTabList, DBTabPanel, DBTabs } from '@db-ui/ngx-components';
+import { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ui/ngx-components';
 
 @NgModule({
   ...
   standalone: true,
-  imports: [..., DBTab,DBTabList,DBTabPanel,DBTabs],
+  imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],
   ...
 })
 
@@ -25,9 +25,9 @@ import { DBTab, DBTabList, DBTabPanel, DBTabs } from '@db-ui/ngx-components';
 <!-- app.component.html -->
 <db-tabs>
 	<db-tab-list>
-		<db-tab>Tab 1</db-tab>
-		<db-tab>Tab 2</db-tab>
-		<db-tab>Tab 3</db-tab>
+		<db-tab-item>Tab 1</db-tab-item>
+		<db-tab-item>Tab 2</db-tab-item>
+		<db-tab-item>Tab 3</db-tab-item>
 	</db-tab-list>
 	<db-tab-panel>Tab Panel 1</db-tab-panel>
 	<db-tab-panel>Tab Panel 2</db-tab-panel>