@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/layout/background/background.css

@@ -0,0 +1,160 @@
+.puzzle-background {
+  isolation: isolate;
+  position: relative;
+}
+
+.puzzle-background:before, .puzzle-background:after {
+  content: "";
+  border-radius: inherit;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+.puzzle-background:before {
+  z-index: -2;
+  background-color: var(--_background-color, transparent);
+}
+
+.puzzle-background:after {
+  z-index: -1;
+}
+
+.puzzle-background--grid:after {
+  opacity: var(--_pattern-opacity, .5);
+  background-image: linear-gradient(to right,
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) var(--_background-line-width, 1px),
+            transparent var(--_background-line-width, 1px)),
+        linear-gradient(to bottom,
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) var(--_background-line-width, 1px),
+            transparent var(--_background-line-width, 1px));
+  background-size: var(--_background-size, 24px) var(--_background-size, 24px);
+}
+
+.puzzle-background--dots:after {
+  opacity: var(--_pattern-opacity, .6);
+  background-image: radial-gradient(circle,
+        var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) var(--_background-dot-size, 2px),
+        transparent calc(var(--_background-dot-size, 2px) + .5px));
+  background-size: var(--_background-size, 24px) var(--_background-size, 24px);
+}
+
+.puzzle-background--checkerboard:after {
+  opacity: var(--_pattern-opacity, .2);
+  background-image: conic-gradient(var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) 25%,
+        transparent 0 50%,
+        var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) 0 75%,
+        transparent 0);
+  background-size: calc(var(--_background-size, 24px) + var(--_background-size, 24px))
+        calc(var(--_background-size, 24px) + var(--_background-size, 24px));
+}
+
+.puzzle-background--stripes:after {
+  opacity: var(--_pattern-opacity, .5);
+  background-image: repeating-linear-gradient(var(--_background-angle, 45deg),
+        var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) 0 var(--_background-line-width, 1px),
+        transparent var(--_background-line-width, 1px) var(--_background-size, 24px));
+}
+
+.puzzle-background--crosshatch:after {
+  opacity: var(--_pattern-opacity, .35);
+  background-image: repeating-linear-gradient(var(--_background-angle, 45deg),
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) 0 var(--_background-line-width, 1px),
+            transparent var(--_background-line-width, 1px) var(--_background-size, 24px)),
+        repeating-linear-gradient(calc(180deg - var(--_background-angle, 45deg)),
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) 0 var(--_background-line-width, 1px),
+            transparent var(--_background-line-width, 1px) var(--_background-size, 24px));
+}
+
+.puzzle-background--glow:after {
+  opacity: var(--_pattern-opacity, .28);
+  background-image: radial-gradient(ellipse at 50% 0%,
+        var(--_pattern-color, var(--puzzle-color-primary, #2563eb)) 0%,
+        transparent 70%);
+  background-size: 100% 100%;
+}
+
+.puzzle-background--blueprint:after {
+  opacity: var(--_pattern-opacity, .55);
+  --_blueprint-major-size: var(--_background-major-size, calc(var(--_background-size, 24px) + var(--_background-size, 24px) + var(--_background-size, 24px) +
+                var(--_background-size, 24px) + var(--_background-size, 24px)));
+  --_blueprint-major-width: calc(var(--_background-line-width, 1px) + var(--_background-line-width, 1px));
+  background-image: linear-gradient(to right,
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) var(--_blueprint-major-width),
+            transparent var(--_blueprint-major-width)),
+        linear-gradient(to bottom,
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) var(--_blueprint-major-width),
+            transparent var(--_blueprint-major-width)),
+        linear-gradient(to right,
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) var(--_background-line-width, 1px),
+            transparent var(--_background-line-width, 1px)),
+        linear-gradient(to bottom,
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) var(--_background-line-width, 1px),
+            transparent var(--_background-line-width, 1px));
+  background-size: var(--_blueprint-major-size) var(--_blueprint-major-size),
+        var(--_blueprint-major-size) var(--_blueprint-major-size),
+        var(--_background-size, 24px) var(--_background-size, 24px),
+        var(--_background-size, 24px) var(--_background-size, 24px);
+}
+
+.puzzle-background--topographic:after {
+  opacity: var(--_pattern-opacity, .3);
+  background-image: repeating-radial-gradient(ellipse at 18% 30%,
+            transparent 0,
+            transparent calc(var(--_background-size, 32px) - var(--_background-line-width, 1px)),
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6))
+                calc(var(--_background-size, 32px) - var(--_background-line-width, 1px)),
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) var(--_background-size, 32px)),
+        repeating-radial-gradient(ellipse at 82% 65%,
+            transparent 0,
+            transparent calc(var(--_background-size, 32px) - var(--_background-line-width, 1px)),
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6))
+                calc(var(--_background-size, 32px) - var(--_background-line-width, 1px)),
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) var(--_background-size, 32px)),
+        repeating-radial-gradient(ellipse at 85% 10%,
+            transparent 0,
+            transparent calc(var(--_background-size, 32px) - var(--_background-line-width, 1px)),
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6))
+                calc(var(--_background-size, 32px) - var(--_background-line-width, 1px)),
+            var(--_pattern-color, var(--puzzle-color-border, #e5e0d6)) var(--_background-size, 32px));
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.puzzle-background--mesh:after {
+  opacity: var(--_pattern-opacity, .55);
+  background-image: radial-gradient(ellipse 70% 65% at 15% 20%,
+            var(--_mesh-color-1, var(--_pattern-color, var(--puzzle-color-primary, #2563eb))) 0%,
+            transparent 70%),
+        radial-gradient(ellipse 65% 70% at 85% 15%,
+            var(--_mesh-color-2, var(--_pattern-color, var(--puzzle-color-accent, #7c3aed))) 0%,
+            transparent 70%),
+        radial-gradient(ellipse 75% 65% at 80% 90%,
+            var(--_mesh-color-3, var(--_pattern-color, var(--puzzle-color-info, #0369a1))) 0%,
+            transparent 72%),
+        radial-gradient(ellipse 65% 70% at 10% 85%,
+            var(--_mesh-color-4, var(--_pattern-color, var(--puzzle-color-success, #15803d))) 0%,
+            transparent 68%);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.puzzle-background[data-fade="bottom"]:after {
+  -webkit-mask-image: linear-gradient(#000 0% 35%, #0000 100%);
+  mask-image: linear-gradient(#000 0% 35%, #0000 100%);
+}
+
+.puzzle-background[data-fade="top"]:after {
+  -webkit-mask-image: linear-gradient(to top, #000 0% 35%, #0000 100%);
+  mask-image: linear-gradient(to top, #000 0% 35%, #0000 100%);
+}
+
+.puzzle-background[data-fade="right"]:after {
+  -webkit-mask-image: linear-gradient(to right, #000 0% 35%, #0000 100%);
+  mask-image: linear-gradient(to right, #000 0% 35%, #0000 100%);
+}
+
+.puzzle-background[data-fade="left"]:after {
+  -webkit-mask-image: linear-gradient(to left, #000 0% 35%, #0000 100%);
+  mask-image: linear-gradient(to left, #000 0% 35%, #0000 100%);
+}

package/dist/components/layout/background/index.cjs

@@ -0,0 +1,34 @@
+;/* empty css                 */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+// src/components/layout/background/index.tsx
+const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
+const toCssAngle = (value) => typeof value === "number" ? `${value}deg` : value;
+const clampOpacity = (value) => Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : void 0;
+const Background = ({ as, pattern = "grid", size = 24, majorSize, lineWidth = 1, dotSize = 2, angle = 45, patternColor, backgroundColor, patternOpacity, meshColors, fade, className, style, children, ...props }) => {
+	const Component = as ?? "div";
+	const backgroundStyle = {
+		...style,
+		"--_background-size": toCssLength(size),
+		"--_background-major-size": majorSize ? toCssLength(majorSize) : void 0,
+		"--_background-line-width": toCssLength(lineWidth),
+		"--_background-dot-size": toCssLength(dotSize),
+		"--_background-angle": toCssAngle(angle),
+		"--_background-color": backgroundColor,
+		"--_pattern-color": patternColor,
+		"--_pattern-opacity": patternOpacity === void 0 ? void 0 : clampOpacity(patternOpacity),
+		"--_mesh-color-1": meshColors?.[0],
+		"--_mesh-color-2": meshColors?.[1],
+		"--_mesh-color-3": meshColors?.[2],
+		"--_mesh-color-4": meshColors?.[3]
+	};
+	return (0, react.createElement)(Component, {
+		...props,
+		className: (0, _puzzle_ui_core.cn)("puzzle-background", `puzzle-background--${pattern}`, className),
+		style: backgroundStyle,
+		"data-fade": fade
+	}, children);
+};
+exports.Background = Background;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/layout/background/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["createElement","cn"],"sources":["../../../../src/components/layout/background/index.tsx"],"sourcesContent":["import {\n  createElement,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ElementType,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport \"./background.css\";\n\ntype BackgroundPattern =\n  | \"grid\"\n  | \"dots\"\n  | \"checkerboard\"\n  | \"stripes\"\n  | \"crosshatch\"\n  | \"glow\"\n  | \"blueprint\"\n  | \"topographic\"\n  | \"mesh\";\n\ntype BackgroundFade = \"top\" | \"right\" | \"bottom\" | \"left\";\n\ntype BackgroundLength = number | string;\ntype BackgroundAngle = number | string;\n\ntype BackgroundMeshColors = readonly [string, string, string, string];\n\ntype BackgroundOwnProps<C extends ElementType> = {\n  as?: C;\n  pattern?: BackgroundPattern;\n  size?: BackgroundLength;\n  majorSize?: BackgroundLength;\n  lineWidth?: BackgroundLength;\n  dotSize?: BackgroundLength;\n  angle?: BackgroundAngle;\n  patternColor?: string;\n  backgroundColor?: string;\n  patternOpacity?: number;\n  meshColors?: BackgroundMeshColors;\n  fade?: BackgroundFade;\n};\n\ntype BackgroundProps<C extends ElementType = \"div\"> = BackgroundOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof BackgroundOwnProps<C>>;\n\ntype BackgroundCSSProperties = CSSProperties & {\n  [key: `--${string}`]: string | number | undefined;\n};\n\nconst toCssLength = (value: BackgroundLength) =>\n  typeof value === \"number\" ? `${value}px` : value;\n\nconst toCssAngle = (value: BackgroundAngle) =>\n  typeof value === \"number\" ? `${value}deg` : value;\n\nconst clampOpacity = (value: number) =>\n  Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : undefined;\n\nconst Background = <C extends ElementType = \"div\">({\n  as,\n  pattern = \"grid\",\n  size = 24,\n  majorSize,\n  lineWidth = 1,\n  dotSize = 2,\n  angle = 45,\n  patternColor,\n  backgroundColor,\n  patternOpacity,\n  meshColors,\n  fade,\n  className,\n  style,\n  children,\n  ...props\n}: BackgroundProps<C>) => {\n  const Component = (as ?? \"div\") as ElementType;\n\n  const backgroundStyle: BackgroundCSSProperties = {\n    ...style,\n    \"--_background-size\": toCssLength(size),\n    \"--_background-major-size\": majorSize ? toCssLength(majorSize) : undefined,\n    \"--_background-line-width\": toCssLength(lineWidth),\n    \"--_background-dot-size\": toCssLength(dotSize),\n    \"--_background-angle\": toCssAngle(angle),\n    \"--_background-color\": backgroundColor,\n    \"--_pattern-color\": patternColor,\n    \"--_pattern-opacity\":\n      patternOpacity === undefined ? undefined : clampOpacity(patternOpacity),\n    \"--_mesh-color-1\": meshColors?.[0],\n    \"--_mesh-color-2\": meshColors?.[1],\n    \"--_mesh-color-3\": meshColors?.[2],\n    \"--_mesh-color-4\": meshColors?.[3],\n  };\n\n  return createElement(\n    Component,\n    {\n      ...props,\n      className: cn(\n        \"puzzle-background\",\n        `puzzle-background--${pattern}`,\n        className,\n      ),\n      style: backgroundStyle,\n      \"data-fade\": fade,\n    } as never,\n    children,\n  );\n};\n\nexport {\n  Background,\n  type BackgroundProps,\n  type BackgroundPattern,\n  type BackgroundFade,\n  type BackgroundMeshColors,\n};\n"],"mappings":";;;;AAiDA,MAAM,eAAe,UACnB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;AAE7C,MAAM,cAAc,UAClB,OAAO,UAAU,WAAW,GAAG,MAAM,OAAO;AAE9C,MAAM,gBAAgB,UACpB,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC,IAAI,KAAA;AAE7D,MAAM,cAA6C,EACjD,IACA,UAAU,QACV,OAAO,IACP,WACA,YAAY,GACZ,UAAU,GACV,QAAQ,IACR,cACA,iBACA,gBACA,YACA,MACA,WACA,OACA,UACA,GAAG,YACqB;CACxB,MAAM,YAAa,MAAM;CAEzB,MAAM,kBAA2C;EAC/C,GAAG;EACH,sBAAsB,YAAY,IAAI;EACtC,4BAA4B,YAAY,YAAY,SAAS,IAAI,KAAA;EACjE,4BAA4B,YAAY,SAAS;EACjD,0BAA0B,YAAY,OAAO;EAC7C,uBAAuB,WAAW,KAAK;EACvC,uBAAuB;EACvB,oBAAoB;EACpB,sBACE,mBAAmB,KAAA,IAAY,KAAA,IAAY,aAAa,cAAc;EACxE,mBAAmB,aAAa;EAChC,mBAAmB,aAAa;EAChC,mBAAmB,aAAa;EAChC,mBAAmB,aAAa;CAClC;CAEA,QAAA,GAAOA,MAAAA,cAAAA,CACL,WACA;EACE,GAAG;EACH,YAAA,GAAWC,gBAAAA,GAAAA,CACT,qBACA,sBAAsB,WACtB,SACF;EACA,OAAO;EACP,aAAa;CACf,GACA,QACF;AACF"}

package/dist/components/layout/background/index.d.cts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+type BackgroundPattern = "grid" | "dots" | "checkerboard" | "stripes" | "crosshatch" | "glow" | "blueprint" | "topographic" | "mesh";
+type BackgroundFade = "top" | "right" | "bottom" | "left";
+type BackgroundLength = number | string;
+type BackgroundAngle = number | string;
+type BackgroundMeshColors = readonly [string, string, string, string];
+type BackgroundOwnProps<C extends ElementType> = {
+  as?: C;
+  pattern?: BackgroundPattern;
+  size?: BackgroundLength;
+  majorSize?: BackgroundLength;
+  lineWidth?: BackgroundLength;
+  dotSize?: BackgroundLength;
+  angle?: BackgroundAngle;
+  patternColor?: string;
+  backgroundColor?: string;
+  patternOpacity?: number;
+  meshColors?: BackgroundMeshColors;
+  fade?: BackgroundFade;
+};
+type BackgroundProps<C extends ElementType = "div"> = BackgroundOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof BackgroundOwnProps<C>>;
+declare const Background: <C extends ElementType = "div">({ as, pattern, size, majorSize, lineWidth, dotSize, angle, patternColor, backgroundColor, patternOpacity, meshColors, fade, className, style, children, ...props }: BackgroundProps<C>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export { Background, type BackgroundFade, type BackgroundMeshColors, type BackgroundPattern, type BackgroundProps };

package/dist/components/layout/background/index.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+type BackgroundPattern = "grid" | "dots" | "checkerboard" | "stripes" | "crosshatch" | "glow" | "blueprint" | "topographic" | "mesh";
+type BackgroundFade = "top" | "right" | "bottom" | "left";
+type BackgroundLength = number | string;
+type BackgroundAngle = number | string;
+type BackgroundMeshColors = readonly [string, string, string, string];
+type BackgroundOwnProps<C extends ElementType> = {
+  as?: C;
+  pattern?: BackgroundPattern;
+  size?: BackgroundLength;
+  majorSize?: BackgroundLength;
+  lineWidth?: BackgroundLength;
+  dotSize?: BackgroundLength;
+  angle?: BackgroundAngle;
+  patternColor?: string;
+  backgroundColor?: string;
+  patternOpacity?: number;
+  meshColors?: BackgroundMeshColors;
+  fade?: BackgroundFade;
+};
+type BackgroundProps<C extends ElementType = "div"> = BackgroundOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof BackgroundOwnProps<C>>;
+declare const Background: <C extends ElementType = "div">({ as, pattern, size, majorSize, lineWidth, dotSize, angle, patternColor, backgroundColor, patternOpacity, meshColors, fade, className, style, children, ...props }: BackgroundProps<C>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export { Background, type BackgroundFade, type BackgroundMeshColors, type BackgroundPattern, type BackgroundProps };

package/dist/components/layout/background/index.js

@@ -0,0 +1,34 @@
+import "./background.css";
+import { cn } from "@puzzle-ui/core";
+import { createElement } from "react";
+// src/components/layout/background/index.tsx
+const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
+const toCssAngle = (value) => typeof value === "number" ? `${value}deg` : value;
+const clampOpacity = (value) => Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : void 0;
+const Background = ({ as, pattern = "grid", size = 24, majorSize, lineWidth = 1, dotSize = 2, angle = 45, patternColor, backgroundColor, patternOpacity, meshColors, fade, className, style, children, ...props }) => {
+	const Component = as ?? "div";
+	const backgroundStyle = {
+		...style,
+		"--_background-size": toCssLength(size),
+		"--_background-major-size": majorSize ? toCssLength(majorSize) : void 0,
+		"--_background-line-width": toCssLength(lineWidth),
+		"--_background-dot-size": toCssLength(dotSize),
+		"--_background-angle": toCssAngle(angle),
+		"--_background-color": backgroundColor,
+		"--_pattern-color": patternColor,
+		"--_pattern-opacity": patternOpacity === void 0 ? void 0 : clampOpacity(patternOpacity),
+		"--_mesh-color-1": meshColors?.[0],
+		"--_mesh-color-2": meshColors?.[1],
+		"--_mesh-color-3": meshColors?.[2],
+		"--_mesh-color-4": meshColors?.[3]
+	};
+	return createElement(Component, {
+		...props,
+		className: cn("puzzle-background", `puzzle-background--${pattern}`, className),
+		style: backgroundStyle,
+		"data-fade": fade
+	}, children);
+};
+export { Background };
+
+//# sourceMappingURL=index.js.map

package/dist/components/layout/background/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/background/index.tsx"],"sourcesContent":["import {\n  createElement,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ElementType,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport \"./background.css\";\n\ntype BackgroundPattern =\n  | \"grid\"\n  | \"dots\"\n  | \"checkerboard\"\n  | \"stripes\"\n  | \"crosshatch\"\n  | \"glow\"\n  | \"blueprint\"\n  | \"topographic\"\n  | \"mesh\";\n\ntype BackgroundFade = \"top\" | \"right\" | \"bottom\" | \"left\";\n\ntype BackgroundLength = number | string;\ntype BackgroundAngle = number | string;\n\ntype BackgroundMeshColors = readonly [string, string, string, string];\n\ntype BackgroundOwnProps<C extends ElementType> = {\n  as?: C;\n  pattern?: BackgroundPattern;\n  size?: BackgroundLength;\n  majorSize?: BackgroundLength;\n  lineWidth?: BackgroundLength;\n  dotSize?: BackgroundLength;\n  angle?: BackgroundAngle;\n  patternColor?: string;\n  backgroundColor?: string;\n  patternOpacity?: number;\n  meshColors?: BackgroundMeshColors;\n  fade?: BackgroundFade;\n};\n\ntype BackgroundProps<C extends ElementType = \"div\"> = BackgroundOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof BackgroundOwnProps<C>>;\n\ntype BackgroundCSSProperties = CSSProperties & {\n  [key: `--${string}`]: string | number | undefined;\n};\n\nconst toCssLength = (value: BackgroundLength) =>\n  typeof value === \"number\" ? `${value}px` : value;\n\nconst toCssAngle = (value: BackgroundAngle) =>\n  typeof value === \"number\" ? `${value}deg` : value;\n\nconst clampOpacity = (value: number) =>\n  Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : undefined;\n\nconst Background = <C extends ElementType = \"div\">({\n  as,\n  pattern = \"grid\",\n  size = 24,\n  majorSize,\n  lineWidth = 1,\n  dotSize = 2,\n  angle = 45,\n  patternColor,\n  backgroundColor,\n  patternOpacity,\n  meshColors,\n  fade,\n  className,\n  style,\n  children,\n  ...props\n}: BackgroundProps<C>) => {\n  const Component = (as ?? \"div\") as ElementType;\n\n  const backgroundStyle: BackgroundCSSProperties = {\n    ...style,\n    \"--_background-size\": toCssLength(size),\n    \"--_background-major-size\": majorSize ? toCssLength(majorSize) : undefined,\n    \"--_background-line-width\": toCssLength(lineWidth),\n    \"--_background-dot-size\": toCssLength(dotSize),\n    \"--_background-angle\": toCssAngle(angle),\n    \"--_background-color\": backgroundColor,\n    \"--_pattern-color\": patternColor,\n    \"--_pattern-opacity\":\n      patternOpacity === undefined ? undefined : clampOpacity(patternOpacity),\n    \"--_mesh-color-1\": meshColors?.[0],\n    \"--_mesh-color-2\": meshColors?.[1],\n    \"--_mesh-color-3\": meshColors?.[2],\n    \"--_mesh-color-4\": meshColors?.[3],\n  };\n\n  return createElement(\n    Component,\n    {\n      ...props,\n      className: cn(\n        \"puzzle-background\",\n        `puzzle-background--${pattern}`,\n        className,\n      ),\n      style: backgroundStyle,\n      \"data-fade\": fade,\n    } as never,\n    children,\n  );\n};\n\nexport {\n  Background,\n  type BackgroundProps,\n  type BackgroundPattern,\n  type BackgroundFade,\n  type BackgroundMeshColors,\n};\n"],"mappings":";;;;AAiDA,MAAM,eAAe,UACnB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;AAE7C,MAAM,cAAc,UAClB,OAAO,UAAU,WAAW,GAAG,MAAM,OAAO;AAE9C,MAAM,gBAAgB,UACpB,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC,IAAI,KAAA;AAE7D,MAAM,cAA6C,EACjD,IACA,UAAU,QACV,OAAO,IACP,WACA,YAAY,GACZ,UAAU,GACV,QAAQ,IACR,cACA,iBACA,gBACA,YACA,MACA,WACA,OACA,UACA,GAAG,YACqB;CACxB,MAAM,YAAa,MAAM;CAEzB,MAAM,kBAA2C;EAC/C,GAAG;EACH,sBAAsB,YAAY,IAAI;EACtC,4BAA4B,YAAY,YAAY,SAAS,IAAI,KAAA;EACjE,4BAA4B,YAAY,SAAS;EACjD,0BAA0B,YAAY,OAAO;EAC7C,uBAAuB,WAAW,KAAK;EACvC,uBAAuB;EACvB,oBAAoB;EACpB,sBACE,mBAAmB,KAAA,IAAY,KAAA,IAAY,aAAa,cAAc;EACxE,mBAAmB,aAAa;EAChC,mBAAmB,aAAa;EAChC,mBAAmB,aAAa;EAChC,mBAAmB,aAAa;CAClC;CAEA,OAAO,cACL,WACA;EACE,GAAG;EACH,WAAW,GACT,qBACA,sBAAsB,WACtB,SACF;EACA,OAAO;EACP,aAAa;CACf,GACA,QACF;AACF"}

package/dist/components/layout/bottom-navigation/bottom-navigation.css

@@ -0,0 +1,108 @@
+.puzzle-bottom-navigation {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface);
+  display: block;
+}
+
+.puzzle-bottom-navigation__track {
+  align-items: stretch;
+  gap: var(--puzzle-space-2, .5rem);
+  width: 100%;
+  min-width: 0;
+  padding: var(--puzzle-space-2, .5rem);
+  box-sizing: border-box;
+  scroll-snap-type: x mandatory;
+  scroll-padding-inline: var(--puzzle-space-2, .5rem);
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  scrollbar-color: var(--puzzle-color-border) transparent;
+  flex-direction: row;
+  display: flex;
+  overflow: auto hidden;
+}
+
+.puzzle-bottom-navigation__track::-webkit-scrollbar {
+  height: 3px;
+}
+
+.puzzle-bottom-navigation__track::-webkit-scrollbar-track {
+  background: none;
+}
+
+.puzzle-bottom-navigation__track::-webkit-scrollbar-thumb {
+  background: var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-full, 999px);
+}
+
+.puzzle-bottom-navigation-item.puzzle-link, .puzzle-bottom-navigation-item {
+  gap: var(--puzzle-space-1, .25rem);
+  box-sizing: border-box;
+  min-width: 4.5rem;
+  min-height: 3.5rem;
+  padding: var(--puzzle-space-1, .25rem);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  color: var(--puzzle-color-text-muted);
+  font: inherit;
+  cursor: pointer;
+  scroll-snap-align: center;
+  scroll-snap-stop: normal;
+  transition: color var(--puzzle-duration-fast, .15s) ease,
+        background-color var(--puzzle-duration-fast, .15s) ease;
+  background: none;
+  border: 0;
+  flex-direction: column;
+  flex: 1 0 auto;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+}
+
+.puzzle-bottom-navigation-item:hover {
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface-sunken, var(--puzzle-color-surface));
+}
+
+.puzzle-bottom-navigation-item.active, .puzzle-bottom-navigation-item[data-active="true"] {
+  color: var(--puzzle-color-primary, var(--puzzle-color-text));
+}
+
+.puzzle-bottom-navigation-item__icon {
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: inline-flex;
+}
+
+.puzzle-bottom-navigation-item__icon > * {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.puzzle-bottom-navigation-item__label {
+  max-width: 100%;
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  overflow: hidden;
+}
+
+.puzzle-bottom-navigation-item:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-bottom-navigation-item {
+    transition: none;
+  }
+}

package/dist/components/layout/bottom-navigation/index.cjs

@@ -0,0 +1,51 @@
+const require_index = require("../../navigation/link/index.cjs");
+;/* empty css                        */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/layout/bottom-navigation/index.tsx
+const BottomNavigationItem = ({ icon, label, href, onClick, active = false, className, style }) => {
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-bottom-navigation-item", active && "active", className);
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "puzzle-bottom-navigation-item__icon",
+		"aria-hidden": "true",
+		children: icon
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "puzzle-bottom-navigation-item__label",
+		children: label
+	})] });
+	if (href !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Link, {
+		href,
+		className: classes,
+		style,
+		"aria-label": label,
+		"aria-current": active ? "page" : void 0,
+		"data-active": active || void 0,
+		children: content
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		className: classes,
+		style,
+		onClick,
+		"aria-label": label,
+		"data-active": active || void 0,
+		children: content
+	});
+};
+const BottomNavigation = ({ children, className, style, ariaLabel = "Bottom navigation" }) => {
+	if (react.Children.toArray(children).filter((child) => !(0, react.isValidElement)(child) || child.type !== BottomNavigationItem).length > 0) console.warn("BottomNavigation only accepts BottomNavigationItem as children.");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		className: (0, _puzzle_ui_core.cn)("puzzle-bottom-navigation", className),
+		style,
+		"aria-label": ariaLabel,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "puzzle-bottom-navigation__track",
+			children
+		})
+	});
+};
+exports.BottomNavigation = BottomNavigation;
+exports.BottomNavigationItem = BottomNavigationItem;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/layout/bottom-navigation/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn","Link","Children","isValidElement"],"sources":["../../../../src/components/layout/bottom-navigation/index.tsx"],"sourcesContent":["import {\n  Children,\n  isValidElement,\n  type CSSProperties,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { Link } from \"../../navigation/link\";\nimport \"./bottom-navigation.css\";\n\ntype BottomNavigationItemProps = {\n  icon: ReactNode;\n  label: string;\n  href?: string;\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n  active?: boolean;\n  className?: string;\n  style?: CSSProperties;\n};\n\nconst BottomNavigationItem = ({\n  icon,\n  label,\n  href,\n  onClick,\n  active = false,\n  className,\n  style,\n}: BottomNavigationItemProps) => {\n  const classes = cn(\n    \"puzzle-bottom-navigation-item\",\n    active && \"active\",\n    className,\n  );\n\n  const content = (\n    <>\n      <span className=\"puzzle-bottom-navigation-item__icon\" aria-hidden=\"true\">\n        {icon}\n      </span>\n\n      <span className=\"puzzle-bottom-navigation-item__label\">{label}</span>\n    </>\n  );\n\n  if (href !== undefined) {\n    return (\n      <Link\n        href={href}\n        className={classes}\n        style={style}\n        aria-label={label}\n        aria-current={active ? \"page\" : undefined}\n        data-active={active || undefined}\n      >\n        {content}\n      </Link>\n    );\n  }\n\n  // An action button is not the current page, so it gets no aria-current.\n  return (\n    <button\n      type=\"button\"\n      className={classes}\n      style={style}\n      onClick={onClick}\n      aria-label={label}\n      data-active={active || undefined}\n    >\n      {content}\n    </button>\n  );\n};\n\ntype BottomNavigationProps = {\n  children: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  ariaLabel?: string;\n};\n\nconst BottomNavigation = ({\n  children,\n  className,\n  style,\n  ariaLabel = \"Bottom navigation\",\n}: BottomNavigationProps) => {\n  const invalidChildren = Children.toArray(children).filter(\n    (child) =>\n      !isValidElement<BottomNavigationItemProps>(child) ||\n      child.type !== BottomNavigationItem,\n  );\n\n  if (invalidChildren.length > 0) {\n    console.warn(\n      \"BottomNavigation only accepts BottomNavigationItem as children.\",\n    );\n  }\n\n  return (\n    <nav\n      className={cn(\"puzzle-bottom-navigation\", className)}\n      style={style}\n      aria-label={ariaLabel}\n    >\n      <div className=\"puzzle-bottom-navigation__track\">{children}</div>\n    </nav>\n  );\n};\n\nexport {\n  BottomNavigation,\n  BottomNavigationItem,\n  type BottomNavigationProps,\n  type BottomNavigationItemProps,\n};\n"],"mappings":";;;;;;AAqBA,MAAM,wBAAwB,EAC5B,MACA,OACA,MACA,SACA,SAAS,OACT,WACA,YAC+B;CAC/B,MAAM,WAAA,GAAUA,gBAAAA,GAAAA,CACd,iCACA,UAAU,UACV,SACF;CAEA,MAAM,UACJ,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAU;EAAsC,eAAY;EAC/D,UAAA;CACG,CAAA,GAEN,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAU;EAAwC,UAAA;CAAY,CAAA,CACpE,EAAA,CAAA;CAGJ,IAAI,SAAS,KAAA,GACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,MAAD;EACQ;EACN,WAAW;EACJ;EACP,cAAY;EACZ,gBAAc,SAAS,SAAS,KAAA;EAChC,eAAa,UAAU,KAAA;EAEtB,UAAA;CACG,CAAA;CAKV,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,MAAK;EACL,WAAW;EACJ;EACE;EACT,cAAY;EACZ,eAAa,UAAU,KAAA;EAEtB,UAAA;CACK,CAAA;AAEZ;AASA,MAAM,oBAAoB,EACxB,UACA,WACA,OACA,YAAY,0BACe;CAO3B,IANwBC,MAAAA,SAAS,QAAQ,QAAQ,CAAC,CAAC,QAChD,UACC,EAAA,GAACC,MAAAA,eAAAA,CAA0C,KAAK,KAChD,MAAM,SAAS,oBAGD,CAAC,CAAC,SAAS,GAC3B,QAAQ,KACN,iEACF;CAGF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,YAAA,GAAWH,gBAAAA,GAAAA,CAAG,4BAA4B,SAAS;EAC5C;EACP,cAAY;EAEZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GAAmC;EAAc,CAAA;CAC7D,CAAA;AAET"}

package/dist/components/layout/bottom-navigation/index.d.cts

@@ -0,0 +1,19 @@
+import { CSSProperties, MouseEventHandler, ReactNode } from "react";
+type BottomNavigationItemProps = {
+  icon: ReactNode;
+  label: string;
+  href?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  active?: boolean;
+  className?: string;
+  style?: CSSProperties;
+};
+declare const BottomNavigationItem: ({ icon, label, href, onClick, active, className, style }: BottomNavigationItemProps) => import("react").JSX.Element;
+type BottomNavigationProps = {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  ariaLabel?: string;
+};
+declare const BottomNavigation: ({ children, className, style, ariaLabel }: BottomNavigationProps) => import("react").JSX.Element;
+export { BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps };

package/dist/components/layout/bottom-navigation/index.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, MouseEventHandler, ReactNode } from "react";
+type BottomNavigationItemProps = {
+  icon: ReactNode;
+  label: string;
+  href?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  active?: boolean;
+  className?: string;
+  style?: CSSProperties;
+};
+declare const BottomNavigationItem: ({ icon, label, href, onClick, active, className, style }: BottomNavigationItemProps) => import("react").JSX.Element;
+type BottomNavigationProps = {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  ariaLabel?: string;
+};
+declare const BottomNavigation: ({ children, className, style, ariaLabel }: BottomNavigationProps) => import("react").JSX.Element;
+export { BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps };

package/dist/components/layout/bottom-navigation/index.js

@@ -0,0 +1,50 @@
+import { Link } from "../../navigation/link/index.js";
+import "./bottom-navigation.css";
+import { cn } from "@puzzle-ui/core";
+import { Children, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/layout/bottom-navigation/index.tsx
+const BottomNavigationItem = ({ icon, label, href, onClick, active = false, className, style }) => {
+	const classes = cn("puzzle-bottom-navigation-item", active && "active", className);
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className: "puzzle-bottom-navigation-item__icon",
+		"aria-hidden": "true",
+		children: icon
+	}), /* @__PURE__ */ jsx("span", {
+		className: "puzzle-bottom-navigation-item__label",
+		children: label
+	})] });
+	if (href !== void 0) return /* @__PURE__ */ jsx(Link, {
+		href,
+		className: classes,
+		style,
+		"aria-label": label,
+		"aria-current": active ? "page" : void 0,
+		"data-active": active || void 0,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: classes,
+		style,
+		onClick,
+		"aria-label": label,
+		"data-active": active || void 0,
+		children: content
+	});
+};
+const BottomNavigation = ({ children, className, style, ariaLabel = "Bottom navigation" }) => {
+	if (Children.toArray(children).filter((child) => !isValidElement(child) || child.type !== BottomNavigationItem).length > 0) console.warn("BottomNavigation only accepts BottomNavigationItem as children.");
+	return /* @__PURE__ */ jsx("nav", {
+		className: cn("puzzle-bottom-navigation", className),
+		style,
+		"aria-label": ariaLabel,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "puzzle-bottom-navigation__track",
+			children
+		})
+	});
+};
+export { BottomNavigation, BottomNavigationItem };
+
+//# sourceMappingURL=index.js.map

package/dist/components/layout/bottom-navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/bottom-navigation/index.tsx"],"sourcesContent":["import {\n  Children,\n  isValidElement,\n  type CSSProperties,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { Link } from \"../../navigation/link\";\nimport \"./bottom-navigation.css\";\n\ntype BottomNavigationItemProps = {\n  icon: ReactNode;\n  label: string;\n  href?: string;\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n  active?: boolean;\n  className?: string;\n  style?: CSSProperties;\n};\n\nconst BottomNavigationItem = ({\n  icon,\n  label,\n  href,\n  onClick,\n  active = false,\n  className,\n  style,\n}: BottomNavigationItemProps) => {\n  const classes = cn(\n    \"puzzle-bottom-navigation-item\",\n    active && \"active\",\n    className,\n  );\n\n  const content = (\n    <>\n      <span className=\"puzzle-bottom-navigation-item__icon\" aria-hidden=\"true\">\n        {icon}\n      </span>\n\n      <span className=\"puzzle-bottom-navigation-item__label\">{label}</span>\n    </>\n  );\n\n  if (href !== undefined) {\n    return (\n      <Link\n        href={href}\n        className={classes}\n        style={style}\n        aria-label={label}\n        aria-current={active ? \"page\" : undefined}\n        data-active={active || undefined}\n      >\n        {content}\n      </Link>\n    );\n  }\n\n  // An action button is not the current page, so it gets no aria-current.\n  return (\n    <button\n      type=\"button\"\n      className={classes}\n      style={style}\n      onClick={onClick}\n      aria-label={label}\n      data-active={active || undefined}\n    >\n      {content}\n    </button>\n  );\n};\n\ntype BottomNavigationProps = {\n  children: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  ariaLabel?: string;\n};\n\nconst BottomNavigation = ({\n  children,\n  className,\n  style,\n  ariaLabel = \"Bottom navigation\",\n}: BottomNavigationProps) => {\n  const invalidChildren = Children.toArray(children).filter(\n    (child) =>\n      !isValidElement<BottomNavigationItemProps>(child) ||\n      child.type !== BottomNavigationItem,\n  );\n\n  if (invalidChildren.length > 0) {\n    console.warn(\n      \"BottomNavigation only accepts BottomNavigationItem as children.\",\n    );\n  }\n\n  return (\n    <nav\n      className={cn(\"puzzle-bottom-navigation\", className)}\n      style={style}\n      aria-label={ariaLabel}\n    >\n      <div className=\"puzzle-bottom-navigation__track\">{children}</div>\n    </nav>\n  );\n};\n\nexport {\n  BottomNavigation,\n  BottomNavigationItem,\n  type BottomNavigationProps,\n  type BottomNavigationItemProps,\n};\n"],"mappings":";;;;;;AAqBA,MAAM,wBAAwB,EAC5B,MACA,OACA,MACA,SACA,SAAS,OACT,WACA,YAC+B;CAC/B,MAAM,UAAU,GACd,iCACA,UAAU,UACV,SACF;CAEA,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,WAAU;EAAsC,eAAY;EAC/D,UAAA;CACG,CAAA,GAEN,oBAAC,QAAD;EAAM,WAAU;EAAwC,UAAA;CAAY,CAAA,CACpE,EAAA,CAAA;CAGJ,IAAI,SAAS,KAAA,GACX,OACE,oBAAC,MAAD;EACQ;EACN,WAAW;EACJ;EACP,cAAY;EACZ,gBAAc,SAAS,SAAS,KAAA;EAChC,eAAa,UAAU,KAAA;EAEtB,UAAA;CACG,CAAA;CAKV,OACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACJ;EACE;EACT,cAAY;EACZ,eAAa,UAAU,KAAA;EAEtB,UAAA;CACK,CAAA;AAEZ;AASA,MAAM,oBAAoB,EACxB,UACA,WACA,OACA,YAAY,0BACe;CAO3B,IANwB,SAAS,QAAQ,QAAQ,CAAC,CAAC,QAChD,UACC,CAAC,eAA0C,KAAK,KAChD,MAAM,SAAS,oBAGD,CAAC,CAAC,SAAS,GAC3B,QAAQ,KACN,iEACF;CAGF,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,4BAA4B,SAAS;EAC5C;EACP,cAAY;EAEZ,UAAA,oBAAC,OAAD;GAAK,WAAU;GAAmC;EAAc,CAAA;CAC7D,CAAA;AAET"}

package/dist/components/layout/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,80 @@
+.puzzle-breadcrumbs {
+  min-width: 0;
+  color: var(--puzzle-color-text-muted, #666);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  line-height: var(--puzzle-font-line-height-body1, 1.5);
+}
+
+.puzzle-breadcrumbs__list {
+  align-items: center;
+  gap: var(--puzzle-space-1, .25rem);
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.puzzle-breadcrumbs__item {
+  align-items: center;
+  gap: var(--puzzle-space-1, .25rem);
+  min-width: 0;
+  display: inline-flex;
+}
+
+.puzzle-breadcrumbs__item + .puzzle-breadcrumbs__item:before {
+  content: "/";
+  margin-inline: var(--puzzle-space-1, .25rem);
+  color: var(--puzzle-color-text-subtle, #737373);
+  user-select: none;
+  display: inline-block;
+}
+
+.puzzle-breadcrumbs__icon {
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  display: inline-flex;
+}
+
+.puzzle-breadcrumbs__icon > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.puzzle-breadcrumbs__link, .puzzle-breadcrumbs__label {
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+
+.puzzle-breadcrumbs__link {
+  color: inherit;
+  text-underline-offset: .2em;
+  transition: color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  text-decoration: none;
+}
+
+.puzzle-breadcrumbs__link:hover {
+  color: var(--puzzle-color-primary);
+  text-decoration: underline;
+}
+
+.puzzle-breadcrumbs__link:focus-visible {
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 3px;
+}
+
+.puzzle-breadcrumbs__item--current {
+  color: var(--puzzle-color-text);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-breadcrumbs__link {
+    transition: none;
+  }
+}