@dmsi/wedgekit-react 0.0.232 → 0.0.233

package/dist/index.css

@@ -146,6 +146,8 @@
     --text-caption-desktop-compact: 12px;
     --leading-caption-desktop: 1.333;
     --leading-caption-mobile: 1.333;
+    --spacing-mobile-breadcrumb: 24px;
+    --spacing-desktop-breadcrumb: 24px;
     --spacing-desktop-container-gap: 16px;
     --spacing-mobile-container-gap: 16px;
     --spacing-desktop-compact-container-gap: 16px;
@@ -1887,9 +1889,6 @@
   .py-\[15px\] {
     padding-block: 15px;
   }
-  .py-\[calc\(var\(--spacing-mobile-component-padding\)_\+_3px\)\] {
-    padding-block: calc(var(--spacing-mobile-component-padding) + 3px);
-  }
   .py-mobile-component-gap {
     padding-block: var(--spacing-mobile-component-gap);
   }
@@ -2030,6 +2029,10 @@
     --tw-leading: var(--leading-link-mobile);
     line-height: var(--leading-link-mobile);
   }
+  .leading-mobile-breadcrumb {
+    --tw-leading: var(--spacing-mobile-breadcrumb);
+    line-height: var(--spacing-mobile-breadcrumb);
+  }
   .leading-paragraph-mobile {
     --tw-leading: var(--leading-paragraph-mobile);
     line-height: var(--leading-paragraph-mobile);
@@ -3692,11 +3695,6 @@
       padding-inline: var(--spacing-desktop-compact-layout-padding);
     }
   }
-  .compact\:py-\[calc\(var\(--spacing-desktop-compact-component-padding\)_\+_3px\)\] {
-    &:where([data-compact]) {
-      padding-block: calc(var(--spacing-desktop-compact-component-padding) + 3px);
-    }
-  }
   .compact\:py-desktop-compact-component-gap {
     &:where([data-compact]) {
       padding-block: var(--spacing-desktop-compact-component-gap);
@@ -4008,11 +4006,6 @@
       padding-inline: var(--spacing-desktop-layout-padding);
     }
   }
-  .desktop\:py-\[calc\(var\(--spacing-desktop-component-padding\)_\+_3px\)\] {
-    @container root (width >= 48rem) {
-      padding-block: calc(var(--spacing-desktop-component-padding) + 3px);
-    }
-  }
   .desktop\:py-desktop-component-gap {
     @container root (width >= 48rem) {
       padding-block: var(--spacing-desktop-component-gap);
@@ -4114,6 +4107,12 @@
       line-height: var(--leading-caption-desktop);
     }
   }
+  .desktop\:leading-desktop-breadcrumb {
+    @container root (width >= 48rem) {
+      --tw-leading: var(--spacing-desktop-breadcrumb);
+      line-height: var(--spacing-desktop-breadcrumb);
+    }
+  }
   .desktop\:leading-display-1-desktop {
     @container root (width >= 48rem) {
       --tw-leading: var(--leading-display-1-desktop);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.232",
+  "version": "0.0.233",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/classNames.ts

@@ -65,6 +65,12 @@ export const typography = {
     "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
     "leading-caption-mobile desktop:leading-caption-desktop",
   ),
+
+  breadcrumb: clsx(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-mobile-breadcrumb desktop:leading-desktop-breadcrumb",
+  ),
 };
 
 export const baseTransition = clsx(
@@ -96,8 +102,8 @@ export const componentPaddingBottom = clsx(
 );
 
 export const componentPaddingX = clsx(
-  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
-)
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+);
 
 export const componentPaddingY = clsx(
   "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
@@ -120,7 +126,7 @@ export const componentPaddingMinus2pxBorder = clsx(
 );
 
 export const layoutPaddding = clsx(
-  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
 );
 
 export const layoutPaddingBottom = clsx(

package/src/components/Breadcrumbs.tsx

@@ -26,13 +26,13 @@ export const Breadcrumb = ({
   children,
   onClick,
   id,
-  testid
+  testid,
 }: BreadcrumbProps) => {
   const linkPadding = clsx(
     "!text-text-link-normal  whitespace-nowrap",
-    "py-[calc(var(--spacing-mobile-component-padding)_+_3px)]",
-    "desktop:py-[calc(var(--spacing-desktop-component-padding)_+_3px)]",
-    "compact:py-[calc(var(--spacing-desktop-compact-component-padding)_+_3px)]",
+    "py-mobile-component-padding",
+    "desktop:py-desktop-component-padding",
+    "compact:py-desktop-compact-component-padding",
   );
 
   return (
@@ -42,6 +42,7 @@ export const Breadcrumb = ({
         data-testid={testid ? `${testid}-link` : undefined}
         className={linkPadding}
         href={href}
+        typographyStyle="breadcrumb"
         onClick={onClick}
       >
         {children}
@@ -56,7 +57,12 @@ const Chevron = () => (
   </li>
 );
 
-export const Breadcrumbs = ({ asCardStyle, id, testid, crumbs }: BreadcrumbsProps) => {
+export const Breadcrumbs = ({
+  asCardStyle,
+  id,
+  testid,
+  crumbs,
+}: BreadcrumbsProps) => {
   const scrollableElement = React.useRef<HTMLElement | null>(null);
   const [isOverflow, setIsOverflow] = useState(false);
 
@@ -88,7 +94,8 @@ export const Breadcrumbs = ({ asCardStyle, id, testid, crumbs }: BreadcrumbsProp
         {
           "bg-white rounded-base shadow-4 px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding":
             asCardStyle,
-          "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding": !asCardStyle,
+          "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding":
+            !asCardStyle,
         },
       )}
       aria-label="Breadcrumb"

package/src/components/Link.tsx

@@ -8,7 +8,7 @@ export type LinkProps = AsProps &
   TextAttributes &
   TypographyProps & {
     variant?: "primary" | "secondary" | "critical";
-    typographyStyle?: "paragraph" | "caption";
+    typographyStyle?: "paragraph" | "caption" | "breadcrumb";
     disabled?: boolean;
     paddedY?: boolean;
     onClick?: (event: MouseEvent<HTMLElement>) => void;

package/src/components/Stack.tsx

@@ -29,7 +29,7 @@ type StackProps = {
   width?: number | "full" | "fit" | "max";
   maxWidth?: number;
   minWidth?: number;
-  height?: number | "full";
+  height?: string | number | "full";
   minHeight?: number;
   maxHeight?: number;
   borderColor?: BorderColorTokens;

package/src/index.css

@@ -190,6 +190,9 @@
   --leading-caption-mobile: 1.333;
 
   /* ── Spacing ───────────────────────────── */
+  --spacing-mobile-breadcrumb: 24px;
+  --spacing-desktop-breadcrumb: 24px;
+
   --spacing-desktop-container-gap: 16px;
   --spacing-mobile-container-gap: 16px;
   --spacing-desktop-compact-container-gap: 16px;
@@ -422,8 +425,7 @@
   ); /* Created for Main Navigation */
 }
 
-[data-theme="light"]{
-
+[data-theme="light"] {
   /** Color Token Aliases */
 
   --color-text-primary-normal: var(--color-neutral-500);