@dmsi/wedgekit-react 0.0.232 → 0.0.234

package/dist/components/index.css

@@ -168,6 +168,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;
@@ -1909,9 +1911,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);
   }
@@ -2052,6 +2051,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);
@@ -2152,6 +2155,9 @@
   .text-success-400 {
     color: var(--color-success-400);
   }
+  .text-text-action-critical-active {
+    color: var(--color-text-action-critical-active);
+  }
   .text-text-action-critical-disabled {
     color: var(--color-text-action-critical-disabled);
   }
@@ -2167,6 +2173,9 @@
   .text-text-critical-normal {
     color: var(--color-text-critical-normal);
   }
+  .text-text-link-active {
+    color: var(--color-text-link-active);
+  }
   .text-text-link-disabled {
     color: var(--color-text-link-disabled);
   }
@@ -3714,11 +3723,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);
@@ -4030,11 +4034,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);
@@ -4136,6 +4135,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/dist/components/index.js

@@ -1,62 +1,62 @@
 import {
   DataGrid
-} from "../chunk-VZVPD3XK.js";
+} from "../chunk-VDO7VGAD.js";
 import {
   Tooltip
-} from "../chunk-3WNXMCZV.js";
+} from "../chunk-QQ5G773N.js";
 import {
   Select
-} from "../chunk-2VRZB2A4.js";
+} from "../chunk-6ZYTR6DU.js";
 import {
   Checkbox
-} from "../chunk-E3UOI2D2.js";
+} from "../chunk-DXVLA32J.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-Q7ETEWBW.js";
+} from "../chunk-VGPOI7UP.js";
 import {
   Menu
 } from "../chunk-NA3ODQCN.js";
 import "../chunk-VP36B2MM.js";
 import {
   MenuOption
-} from "../chunk-QHHNFGEX.js";
+} from "../chunk-RJBKI53P.js";
 import "../chunk-ZU2K7BD3.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-T3F37S6Z.js";
 import {
   Search
-} from "../chunk-7BBXPM5C.js";
+} from "../chunk-OP5XCT3L.js";
 import {
   Input
-} from "../chunk-5JVMULVC.js";
+} from "../chunk-YCKRRAJA.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Label
-} from "../chunk-CJVTFYI4.js";
+} from "../chunk-VP7HJX24.js";
 import "../chunk-WVUIIBRR.js";
 import {
   Subheader
-} from "../chunk-KGVKHWUK.js";
+} from "../chunk-FS2RQE55.js";
 import {
   Accordion
-} from "../chunk-ARC7FOL2.js";
-import "../chunk-BOWQUDUU.js";
+} from "../chunk-NWELJDBW.js";
+import "../chunk-QA3KMRA6.js";
 import {
   Card
 } from "../chunk-TJWGFGWX.js";
 import {
   Paragraph
-} from "../chunk-CJELWEO2.js";
+} from "../chunk-7KLALK3J.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";
 import {
   Button
-} from "../chunk-SK742QNF.js";
-import "../chunk-RDLEIAQU.js";
+} from "../chunk-KNP4LUFA.js";
+import "../chunk-6CTCHYIS.js";
 import "../chunk-BBZEL7EG.js";
 export {
   Accordion,

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);
@@ -2130,6 +2133,9 @@
   .text-success-400 {
     color: var(--color-success-400);
   }
+  .text-text-action-critical-active {
+    color: var(--color-text-action-critical-active);
+  }
   .text-text-action-critical-disabled {
     color: var(--color-text-action-critical-disabled);
   }
@@ -2145,6 +2151,9 @@
   .text-text-critical-normal {
     color: var(--color-text-critical-normal);
   }
+  .text-text-link-active {
+    color: var(--color-text-link-active);
+  }
   .text-text-link-disabled {
     color: var(--color-text-link-disabled);
   }
@@ -3692,11 +3701,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 +4012,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 +4113,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.234",
   "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,8 @@ export type LinkProps = AsProps &
   TextAttributes &
   TypographyProps & {
     variant?: "primary" | "secondary" | "critical";
-    typographyStyle?: "paragraph" | "caption";
+    typographyStyle?: "paragraph" | "caption" | "breadcrumb";
+    active?: boolean;
     disabled?: boolean;
     paddedY?: boolean;
     onClick?: (event: MouseEvent<HTMLElement>) => void;
@@ -28,6 +29,7 @@ export const Link = ({
   align,
   underline = false,
   testid,
+  active,
   ...props
 }: LinkProps) => {
   const Component = as;
@@ -36,21 +38,26 @@ export const Link = ({
     variant === "primary" &&
     !disabled &&
     clsx(
-      "text-text-link-normal hover:text-text-link-hover active:text-text-link-active",
+      active ? "text-text-link-active" : "text-text-link-normal",
+      "hover:text-text-link-hover active:text-text-link-active",
     );
 
   const secondaryStateStyles =
     variant === "secondary" &&
     !disabled &&
     clsx(
-      "text-text-primary-normal hover:text-text-link-hover active:text-text-link-active",
+      active ? "text-text-link-active" : "text-text-primary-normal",
+      "hover:text-text-link-hover active:text-text-link-active",
     );
 
   const criticalStateStyles =
     variant === "critical" &&
     !disabled &&
     clsx(
-      "text-text-action-critical-normal hover:text-text-action-critical-hover active:text-text-action-critical-active",
+      active
+        ? "text-text-action-critical-active"
+        : "text-text-action-critical-normal",
+      "hover:text-text-action-critical-hover active:text-text-action-critical-active",
     );
 
   const criticalStateDisabledStyles =

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);