feat: add breadcrumb component

__snapshots__/breadcrumb/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBBreadcrumb-should-have-same-aria-snapshot.yaml

@@ -0,0 +1,36 @@
+- main:
+  - heading "DBBreadcrumb" [level=1]
+  - link "Size"
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - link "Separator"
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: /
+        - link "Category"
+      - listitem: / Current Page

__snapshots__/breadcrumb/showcase/chromium/should-have-same-aria-snapshot/DBBreadcrumb-should-have-same-aria-snapshot.yaml

@@ -0,0 +1,36 @@
+- main:
+  - heading "DBBreadcrumb" [level=1]
+  - link "Size"
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - link "Separator"
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: /
+        - link "Category"
+      - listitem: / Current Page

__snapshots__/breadcrumb/showcase/firefox/should-have-same-aria-snapshot/DBBreadcrumb-should-have-same-aria-snapshot.yaml

@@ -0,0 +1,36 @@
+- main:
+  - heading "DBBreadcrumb" [level=1]
+  - link "Size"
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - link "Separator"
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: /
+        - link "Category"
+      - listitem: / Current Page

__snapshots__/breadcrumb/showcase/mobile-chrome/should-have-same-aria-snapshot/DBBreadcrumb-should-have-same-aria-snapshot.yaml

@@ -0,0 +1,36 @@
+- main:
+  - heading "DBBreadcrumb" [level=1]
+  - link "Size"
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - link "Separator"
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: /
+        - link "Category"
+      - listitem: / Current Page

__snapshots__/breadcrumb/showcase/mobile-safari/should-have-same-aria-snapshot/DBBreadcrumb-should-have-same-aria-snapshot.yaml

@@ -0,0 +1,36 @@
+- main:
+  - heading "DBBreadcrumb" [level=1]
+  - link "Size"
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - link "Separator"
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: /
+        - link "Category"
+      - listitem: / Current Page

__snapshots__/breadcrumb/showcase/webkit/should-have-same-aria-snapshot/DBBreadcrumb-should-have-same-aria-snapshot.yaml

@@ -0,0 +1,36 @@
+- main:
+  - heading "DBBreadcrumb" [level=1]
+  - link "Size"
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - link "Separator"
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: ›
+        - link "Category"
+      - listitem: › Current Page
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home"
+      - listitem:
+        - text: /
+        - link "Category"
+      - listitem: / Current Page

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

@@ -355,6 +355,34 @@ export const getComponents = (): Component[] => [
 	{
 		name: 'brand'
 	},
+	{
+		name: 'breadcrumb',
+		overwrites: {
+			stencil: [{ from: 'import { DBIcon } from "../icon";\n', to: '' }],
+			angular: [
+				// Fix TypeScript strict null checks by adding non-null assertions
+				// Within the conditional block where items() is checked, subsequent accesses need !
+				{ from: /items\(\)\.length/g, to: 'items()!.length' },
+				{ from: /items\(\)\[0\]/g, to: 'items()![0]' },
+				{ from: /items\(\)\.slice/g, to: 'items()!.slice' },
+				{ from: /maxItems\(\) >/g, to: 'maxItems()! >' },
+				{ from: /> maxItems\(\)/g, to: '> maxItems()!' },
+				{ from: /maxItems\(\) - 1/g, to: 'maxItems()! - 1' }
+			]
+		}
+	},
+	{
+		name: 'breadcrumb-item',
+		overwrites: {
+			stencil: [
+				{ from: 'import { DBIcon } from "../icon";\n', to: '' },
+				{
+					from: '{this.text || this.children}',
+					to: '{this.text ? this.text : <slot></slot>}'
+				}
+			]
+		}
+	},
 	{
 		name: 'input',
 		overwrites: {

packages/components/src/components/breadcrumb-item/agent/breadcrumb-item.agent.lite.tsx

@@ -0,0 +1,71 @@
+import { DBBreadcrumb } from '../../breadcrumb/index';
+import { DBBreadcrumbItem } from '../index';
+
+export default function BreadcrumbItem() {
+	return (
+		<>
+			<h1>DBBreadcrumbItem Documentation Examples</h1>
+
+			<h2>1. Basic Breadcrumb with Items</h2>
+			<DBBreadcrumb>
+				<DBBreadcrumbItem href="/">Home</DBBreadcrumbItem>
+				<DBBreadcrumbItem href="/category">Category</DBBreadcrumbItem>
+				<DBBreadcrumbItem ariaCurrent="page">
+					Current Page
+				</DBBreadcrumbItem>
+			</DBBreadcrumb>
+
+			<h2>2. With Text Prop</h2>
+			<DBBreadcrumb>
+				<DBBreadcrumbItem href="/" text="Home" />
+				<DBBreadcrumbItem href="/products" text="Products" />
+				<DBBreadcrumbItem text="Details" ariaCurrent="page" />
+			</DBBreadcrumb>
+
+			<h2>3. Disabled Item</h2>
+			<DBBreadcrumb>
+				<DBBreadcrumbItem href="/">Home</DBBreadcrumbItem>
+				<DBBreadcrumbItem disabled>Disabled Item</DBBreadcrumbItem>
+				<DBBreadcrumbItem ariaCurrent="page">Current</DBBreadcrumbItem>
+			</DBBreadcrumb>
+
+			<h2>4. Different Sizes</h2>
+			<DBBreadcrumb size="small">
+				<DBBreadcrumbItem href="/">Home</DBBreadcrumbItem>
+				<DBBreadcrumbItem href="/category">Category</DBBreadcrumbItem>
+				<DBBreadcrumbItem ariaCurrent="page">
+					Current (Small)
+				</DBBreadcrumbItem>
+			</DBBreadcrumb>
+
+			<DBBreadcrumb size="medium">
+				<DBBreadcrumbItem href="/">Home</DBBreadcrumbItem>
+				<DBBreadcrumbItem href="/category">Category</DBBreadcrumbItem>
+				<DBBreadcrumbItem ariaCurrent="page">
+					Current (Medium)
+				</DBBreadcrumbItem>
+			</DBBreadcrumb>
+
+			<h2>5. Different Separators</h2>
+			<DBBreadcrumb separator="chevron">
+				<DBBreadcrumbItem href="/">Home</DBBreadcrumbItem>
+				<DBBreadcrumbItem href="/category">Category</DBBreadcrumbItem>
+				<DBBreadcrumbItem ariaCurrent="page">Chevron</DBBreadcrumbItem>
+			</DBBreadcrumb>
+
+			<DBBreadcrumb separator="slash">
+				<DBBreadcrumbItem href="/">Home</DBBreadcrumbItem>
+				<DBBreadcrumbItem href="/category">Category</DBBreadcrumbItem>
+				<DBBreadcrumbItem ariaCurrent="page">Slash</DBBreadcrumbItem>
+			</DBBreadcrumb>
+
+			<h2>6. Custom Class</h2>
+			<DBBreadcrumb>
+				<DBBreadcrumbItem href="/" className="custom-breadcrumb-item">
+					Home with Custom Class
+				</DBBreadcrumbItem>
+				<DBBreadcrumbItem ariaCurrent="page">Current</DBBreadcrumbItem>
+			</DBBreadcrumb>
+		</>
+	);
+}

packages/components/src/components/breadcrumb-item/breadcrumb-item.lite.tsx

@@ -0,0 +1,28 @@
+import { useDefaultProps, useMetadata, useRef } from '@builder.io/mitosis';
+import { cls } from '../../utils';
+import { DBIcon } from '../icon';
+import type { DBBreadcrumbItemProps } from './model';
+
+useMetadata({});
+
+useDefaultProps<DBBreadcrumbItemProps>({});
+
+export default function DBBreadcrumbItem(props: DBBreadcrumbItemProps) {
+	const _ref = useRef<HTMLLIElement | any>(null);
+
+	return (
+		<li ref={_ref} id={props.id} class={cls(props.className)}>
+			{props.href && !props.disabled ? (
+				<a href={props.href} aria-current={props.ariaCurrent}>
+					{props.icon && <DBIcon icon={props.icon} />}
+					{props.text ? props.text : props.children}
+				</a>
+			) : (
+				<span aria-current={props.ariaCurrent}>
+					{props.icon && <DBIcon icon={props.icon} />}
+					{props.text ? props.text : props.children}
+				</span>
+			)}
+		</li>
+	);
+}

packages/components/src/components/breadcrumb-item/breadcrumb-item.scss

@@ -0,0 +1,4 @@
+@charset "utf-8";
+
+// Breadcrumb item styling is handled by the parent breadcrumb component
+// This file exists to maintain the component structure