{props.children}
diff --git a/packages/components/src/components/brand/brand.spec.tsx b/packages/components/src/components/brand/brand.spec.tsx
index f55c898b7a4..dc04fbfb8f3 100644
--- a/packages/components/src/components/brand/brand.spec.tsx
+++ b/packages/components/src/components/brand/brand.spec.tsx
@@ -1,9 +1,9 @@
-import { test, expect } from '@playwright/experimental-ct-react';
+import { expect, test } from '@playwright/experimental-ct-react';
import AxeBuilder from '@axe-core/playwright';
import { DBBrand } from './index';
// @ts-ignore - vue can only find it with .ts as file ending
-import { DEFAULT_VIEWPORT, TESTING_VIEWPORTS } from '../../shared/constants.ts';
+import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
const comp: any =
Test;
const testBrand = () => {
diff --git a/packages/components/src/components/brand/model.ts b/packages/components/src/components/brand/model.ts
index ab0d43b2561..9f56adae95a 100644
--- a/packages/components/src/components/brand/model.ts
+++ b/packages/components/src/components/brand/model.ts
@@ -1,12 +1,12 @@
import { GlobalProps, GlobalState, IconProps } from '../../shared/model';
-export interface DBBrandDefaultProps {
+export type DBBrandDefaultProps = {
/* Disabled the default logo svg to pass in a custom img */
hideLogo?: boolean;
-}
+};
export type DBBrandProps = DBBrandDefaultProps & GlobalProps & IconProps;
-export interface DBBrandDefaultState {}
+export type DBBrandDefaultState = {};
export type DBBrandState = DBBrandDefaultState & GlobalState;
diff --git a/packages/components/src/components/button/button-web-component.scss b/packages/components/src/components/button/button-web-component.scss
deleted file mode 100644
index 7cfbefffe0e..00000000000
--- a/packages/components/src/components/button/button-web-component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@forward "button";
diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
index 910142af6e3..ef0d1b20f83 100644
--- a/packages/components/src/components/button/button.lite.tsx
+++ b/packages/components/src/components/button/button.lite.tsx
@@ -1,11 +1,9 @@
import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
import type { DBButtonProps, DBButtonState } from './model';
-import { cls } from '../../utils';
+import { cls, getBooleanAsString } from '../../utils';
import { ClickEvent } from '../../shared/model';
-useMetadata({
- isAttachedToShadowDom: true
-});
+useMetadata({});
export default function DBButton(props: DBButtonProps) {
const ref = useRef
(null);
@@ -33,7 +31,7 @@ export default function DBButton(props: DBButtonProps) {
data-state={props.state}
data-width={props.width}
data-variant={props.variant}
- data-no-text={props.noText}
+ data-no-text={getBooleanAsString(props.noText)}
name={props.name}
value={props.value}
aria-describedby={props.describedbyid}
diff --git a/packages/components/src/components/button/button.scss b/packages/components/src/components/button/button.scss
index 8a231863aed..fd189ea0ef8 100644
--- a/packages/components/src/components/button/button.scss
+++ b/packages/components/src/components/button/button.scss
@@ -110,4 +110,14 @@
content: "";
}
}
+
+ // Workaround for current stencil implementation for header
+ &:has(> .db-button) {
+ margin: 0;
+ padding: 0;
+
+ &::before {
+ content: none;
+ }
+ }
}
diff --git a/packages/components/src/components/button/button.spec.tsx b/packages/components/src/components/button/button.spec.tsx
index 64ad08a98cb..09cf168ed83 100644
--- a/packages/components/src/components/button/button.spec.tsx
+++ b/packages/components/src/components/button/button.spec.tsx
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-react';
+import { expect, test } from '@playwright/experimental-ct-react';
import AxeBuilder from '@axe-core/playwright';
import { DBButton } from './index';
diff --git a/packages/components/src/components/button/model.ts b/packages/components/src/components/button/model.ts
index f4b048edece..469b2cf6094 100644
--- a/packages/components/src/components/button/model.ts
+++ b/packages/components/src/components/button/model.ts
@@ -5,7 +5,6 @@ import {
GlobalState,
IconProps,
SizeProps,
- SizeType,
WidthProps
} from '../../shared/model';
diff --git a/packages/components/src/components/card/card-web-component.scss b/packages/components/src/components/card/card-web-component.scss
deleted file mode 100644
index 00085495f7c..00000000000
--- a/packages/components/src/components/card/card-web-component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@forward "card";
diff --git a/packages/components/src/components/card/card.lite.tsx b/packages/components/src/components/card/card.lite.tsx
index a668d54c9a2..0855be9980f 100644
--- a/packages/components/src/components/card/card.lite.tsx
+++ b/packages/components/src/components/card/card.lite.tsx
@@ -3,9 +3,7 @@ import type { DBCardProps, DBCardState } from './model';
import { cls } from '../../utils';
import { ClickEvent } from '../../shared/model';
-useMetadata({
- isAttachedToShadowDom: true
-});
+useMetadata({});
export default function DBCard(props: DBCardProps) {
const ref = useRef(null);
@@ -24,7 +22,7 @@ export default function DBCard(props: DBCardProps) {
(null);
@@ -136,7 +134,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
return (
Test;
diff --git a/packages/components/src/components/drawer/model.ts b/packages/components/src/components/drawer/model.ts
index ba9314d6860..b8e3321cea0 100644
--- a/packages/components/src/components/drawer/model.ts
+++ b/packages/components/src/components/drawer/model.ts
@@ -22,7 +22,7 @@ export type DrawerDirectionType = (typeof DrawerDirectionList)[number];
export const DrawerVariantList = ['modal', 'inside'] as const;
export type DrawerVariantType = (typeof DrawerVariantList)[number];
-export interface DBDrawerDefaultProps {
+export type DBDrawerDefaultProps = {
/**
* The backdrop attribute changes the opacity of the backdrop.
* The backdrop 'none' will use `dialog.show()` instead of `dialog.showModal()`
@@ -52,7 +52,7 @@ export interface DBDrawerDefaultProps {
* Set the variant modal|inside. Defaults to modal.
*/
variant?: DrawerVariantType;
-}
+};
export type DBDrawerProps = DBDrawerDefaultProps &
GlobalProps &
@@ -61,9 +61,9 @@ export type DBDrawerProps = DBDrawerDefaultProps &
WidthProps &
SpacingProps;
-export interface DBDrawerDefaultState {
+export type DBDrawerDefaultState = {
handleDialogOpen: () => void;
-}
+};
export type DBDrawerState = DBDrawerDefaultState &
GlobalState &
diff --git a/packages/components/src/components/header/header-web-component.scss b/packages/components/src/components/header/header-web-component.scss
deleted file mode 100644
index 08e240bbb45..00000000000
--- a/packages/components/src/components/header/header-web-component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@use "@db-ui/foundations/build/scss/helpers/functions";
-
-@forward "header";
-
-.db-header-navigation-bar {
- block-size: functions.px-to-rem(32);
- inline-size: auto;
-}
-
-.db-header-divider {
- block-size: functions.px-to-rem(32);
-}
diff --git a/packages/components/src/components/header/header.lite.tsx b/packages/components/src/components/header/header.lite.tsx
index 0e55054c0ba..89560ecad3e 100644
--- a/packages/components/src/components/header/header.lite.tsx
+++ b/packages/components/src/components/header/header.lite.tsx
@@ -10,12 +10,10 @@ import { DBHeaderProps, DBHeaderState } from './model';
import { addAttributeToChildren, cls, uuid } from '../../utils';
import DBButton from '../button/button.lite';
import DBDrawer from '../drawer/drawer.lite';
-import { DEFAULT_ID } from '../../shared/constants';
+import { DEFAULT_BURGER_MENU, DEFAULT_ID } from '../../shared/constants';
import { isEventTargetNavigationItem } from '../../utils/navigation';
-useMetadata({
- isAttachedToShadowDom: true
-});
+useMetadata({});
export default function DBHeader(props: DBHeaderProps) {
const ref = useRef(null);
@@ -24,9 +22,6 @@ export default function DBHeader(props: DBHeaderProps) {
_id: DEFAULT_ID,
initialized: false,
forcedToMobile: false,
- defaultValues: {
- burgerMenuLabel: 'BurgerMenu'
- },
toggle: () => {
if (props.onToggle) {
props.onToggle(!props.drawerOpen);
@@ -71,7 +66,7 @@ export default function DBHeader(props: DBHeaderProps) {
data-width={props.width}
data-on-forcing-mobile={props.forceMobile && !state.forcedToMobile}>