@d4gger/design-system 3.0.0 → 4.0.0

package/dist/components/heading/heading.props.d.ts

@@ -8,36 +8,35 @@ declare const headingPropDefs: {
         type: "enum";
         className: string;
         values: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
-        responsive: true;
     };
     tone: {
         type: "enum";
         values: readonly ["default", "muted", "inverse"];
         default: "default";
     };
-    weight: {
+    weight: Omit<{
         type: "enum";
         className: string;
         values: readonly ["light", "regular", "medium", "bold"];
         responsive: true;
-    };
+    }, "responsive">;
     truncate: {
         type: "boolean";
         className: string;
     };
-    wrap: {
+    wrap: Omit<{
         type: "enum";
         className: string;
         values: readonly ["wrap", "nowrap", "pretty", "balance"];
         responsive: true;
-    };
-    align: {
+    }, "responsive">;
+    align: Omit<{
         type: "enum";
         className: string;
         values: readonly ["left", "center", "right", "justify"];
         responsive: true;
-    };
-    padding: {
+    }, "responsive">;
+    padding: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         default: undefined;
@@ -45,8 +44,8 @@ declare const headingPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    p: {
+    }, "responsive">;
+    p: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -54,8 +53,8 @@ declare const headingPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    px: {
+    }, "responsive">;
+    px: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -63,8 +62,8 @@ declare const headingPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    py: {
+    }, "responsive">;
+    py: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -72,8 +71,8 @@ declare const headingPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    pt: {
+    }, "responsive">;
+    pt: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -81,8 +80,8 @@ declare const headingPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    pr: {
+    }, "responsive">;
+    pr: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -90,8 +89,8 @@ declare const headingPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    pb: {
+    }, "responsive">;
+    pb: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -99,8 +98,8 @@ declare const headingPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    pl: {
+    }, "responsive">;
+    pl: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -108,8 +107,8 @@ declare const headingPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    margin: {
+    }, "responsive">;
+    margin: Omit<{
         type: "enum | string";
         values: readonly ["auto", "none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         default: undefined;
@@ -117,8 +116,8 @@ declare const headingPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    m: {
+    }, "responsive">;
+    m: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -126,8 +125,8 @@ declare const headingPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    mx: {
+    }, "responsive">;
+    mx: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -135,8 +134,8 @@ declare const headingPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    my: {
+    }, "responsive">;
+    my: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -144,8 +143,8 @@ declare const headingPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    mt: {
+    }, "responsive">;
+    mt: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -153,8 +152,8 @@ declare const headingPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    mr: {
+    }, "responsive">;
+    mr: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -162,8 +161,8 @@ declare const headingPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    mb: {
+    }, "responsive">;
+    mb: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -171,8 +170,8 @@ declare const headingPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    ml: {
+    }, "responsive">;
+    ml: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -180,24 +179,24 @@ declare const headingPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    trim: {
+    }, "responsive">;
+    trim: Omit<{
         type: "enum";
         className: string;
         values: readonly ["normal", "start", "end", "both"];
         responsive: true;
-    };
+    }, "responsive">;
     highContrast: {
         type: "boolean";
         default: false;
     };
-    color: {
+    color: Omit<{
         type: "enum";
         className: string;
         values: readonly ["primary", "primary-container", "secondary", "secondary-container", "tertiary", "tertiary-container", "success", "success-container", "error", "error-container", "surface", "surface-raised", "surface-overlay", "surface-sunken", "background", "outline", "outline-variant"];
         default: undefined;
         responsive: true;
-    };
+    }, "responsive">;
     asChild: {
         type: "boolean";
         default: false;

package/dist/components/heading/heading.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading.props.d.ts","sourceRoot":"","sources":["../../../src/components/heading/heading.props.ts"],"names":[],"mappings":"AAiBA,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDpB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"heading.props.d.ts","sourceRoot":"","sources":["../../../src/components/heading/heading.props.ts"],"names":[],"mappings":"AAmBA,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDpB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/heading/heading.props.js

@@ -8,20 +8,21 @@ import { textAlignPropDef } from "../../_internal/props/textAlign.prop.js";
 import { textWrapPropDef } from "../../_internal/props/textWrap.prop.js";
 import { truncatePropDef } from "../../_internal/props/truncate.prop.js";
 import { weightPropDef } from "../../_internal/props/weight.prop.js";
+import { scalarTypographyProps } from "../text/typography.props.js";
 const headingVariants = ["display-large", "display-medium", "headline-large", "headline-medium"];
 const headingTones = ["default", "muted", "inverse"];
 const headingSizes = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const headingPropDefs = {
   ...asChildPropDef,
-  ...colorPropDef,
+  ...scalarTypographyProps(colorPropDef),
   ...highContrastPropDef,
-  ...leadingTrimPropDef,
-  ...marginPropDef,
-  ...paddingPropDef,
-  ...textAlignPropDef,
-  ...textWrapPropDef,
+  ...scalarTypographyProps(leadingTrimPropDef),
+  ...scalarTypographyProps(marginPropDef),
+  ...scalarTypographyProps(paddingPropDef),
+  ...scalarTypographyProps(textAlignPropDef),
+  ...scalarTypographyProps(textWrapPropDef),
   ...truncatePropDef,
-  ...weightPropDef,
+  ...scalarTypographyProps(weightPropDef),
   variant: {
     type: "enum",
     values: headingVariants,
@@ -30,8 +31,7 @@ const headingPropDefs = {
   size: {
     type: "enum",
     className: "dsx-r-heading-size",
-    values: headingSizes,
-    responsive: true
+    values: headingSizes
   },
   tone: {
     type: "enum",

package/dist/components/heading/heading.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/heading/heading.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\nimport { colorPropDef } from '../../_internal/props/color.prop'\nimport { highContrastPropDef } from '../../_internal/props/highContrast.prop'\nimport { leadingTrimPropDef } from '../../_internal/props/leadingTrim.prop'\nimport { marginPropDef } from '../../_internal/props/margin.prop'\nimport { paddingPropDef } from '../../_internal/props/padding.prop'\nimport { textAlignPropDef } from '../../_internal/props/textAlign.prop'\nimport { textWrapPropDef } from '../../_internal/props/textWrap.prop'\nimport { truncatePropDef } from '../../_internal/props/truncate.prop'\nimport { weightPropDef } from '../../_internal/props/weight.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst headingVariants = ['display-large', 'display-medium', 'headline-large', 'headline-medium'] as const\nconst headingTones = ['default', 'muted', 'inverse'] as const\nconst headingSizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const\n\nconst headingPropDefs = {\n  ...asChildPropDef,\n  ...colorPropDef,\n  ...highContrastPropDef,\n  ...leadingTrimPropDef,\n  ...marginPropDef,\n  ...paddingPropDef,\n  ...textAlignPropDef,\n  ...textWrapPropDef,\n  ...truncatePropDef,\n  ...weightPropDef,\n  variant: {\n    type: 'enum',\n    values: headingVariants,\n    default: 'headline-medium',\n  },\n  size: {\n    type: 'enum',\n    className: 'dsx-r-heading-size',\n    values: headingSizes,\n    responsive: true,\n  },\n  tone: {\n    type: 'enum',\n    values: headingTones,\n    default: 'default',\n  },\n} satisfies {\n  asChild: PropDef\n  align: PropDef<(typeof textAlignPropDef.align.values)[number]>\n  color: PropDef<(typeof colorPropDef.color.values)[number]>\n  highContrast: PropDef\n  m: PropDef\n  mb: PropDef\n  ml: PropDef\n  mr: PropDef\n  mt: PropDef\n  mx: PropDef\n  my: PropDef\n  p: PropDef\n  pb: PropDef\n  pl: PropDef\n  pr: PropDef\n  pt: PropDef\n  px: PropDef\n  py: PropDef\n  size: PropDef<(typeof headingSizes)[number]>\n  tone: PropDef<(typeof headingTones)[number]>\n  trim: PropDef<(typeof leadingTrimPropDef.trim.values)[number]>\n  truncate: PropDef\n  variant: PropDef<(typeof headingVariants)[number]>\n  weight: PropDef<(typeof weightPropDef.weight.values)[number]>\n  wrap: PropDef<(typeof textWrapPropDef.wrap.values)[number]>\n}\n\nexport { headingPropDefs }\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAI9B,MAAM,kBAAkB,CAAC,iBAAiB,kBAAkB,kBAAkB,iBAAiB;AAC/F,MAAM,eAAe,CAAC,WAAW,SAAS,SAAS;AACnD,MAAM,eAAe,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AAEjE,MAAM,kBAAkB;AAAA,EACtB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\nimport { colorPropDef } from '../../_internal/props/color.prop'\nimport { highContrastPropDef } from '../../_internal/props/highContrast.prop'\nimport { leadingTrimPropDef } from '../../_internal/props/leadingTrim.prop'\nimport { marginPropDef } from '../../_internal/props/margin.prop'\nimport { paddingPropDef } from '../../_internal/props/padding.prop'\nimport { textAlignPropDef } from '../../_internal/props/textAlign.prop'\nimport { textWrapPropDef } from '../../_internal/props/textWrap.prop'\nimport { truncatePropDef } from '../../_internal/props/truncate.prop'\nimport { weightPropDef } from '../../_internal/props/weight.prop'\n\nimport { scalarTypographyProps } from '../text/typography.props'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst headingVariants = ['display-large', 'display-medium', 'headline-large', 'headline-medium'] as const\nconst headingTones = ['default', 'muted', 'inverse'] as const\nconst headingSizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const\n\nconst headingPropDefs = {\n  ...asChildPropDef,\n  ...scalarTypographyProps(colorPropDef),\n  ...highContrastPropDef,\n  ...scalarTypographyProps(leadingTrimPropDef),\n  ...scalarTypographyProps(marginPropDef),\n  ...scalarTypographyProps(paddingPropDef),\n  ...scalarTypographyProps(textAlignPropDef),\n  ...scalarTypographyProps(textWrapPropDef),\n  ...truncatePropDef,\n  ...scalarTypographyProps(weightPropDef),\n  variant: {\n    type: 'enum',\n    values: headingVariants,\n    default: 'headline-medium',\n  },\n  size: {\n    type: 'enum',\n    className: 'dsx-r-heading-size',\n    values: headingSizes,\n  },\n  tone: {\n    type: 'enum',\n    values: headingTones,\n    default: 'default',\n  },\n} satisfies {\n  asChild: PropDef\n  align: PropDef<(typeof textAlignPropDef.align.values)[number]>\n  color: PropDef<(typeof colorPropDef.color.values)[number]>\n  highContrast: PropDef\n  m: PropDef\n  mb: PropDef\n  ml: PropDef\n  mr: PropDef\n  mt: PropDef\n  mx: PropDef\n  my: PropDef\n  p: PropDef\n  pb: PropDef\n  pl: PropDef\n  pr: PropDef\n  pt: PropDef\n  px: PropDef\n  py: PropDef\n  size: PropDef<(typeof headingSizes)[number]>\n  tone: PropDef<(typeof headingTones)[number]>\n  trim: PropDef<(typeof leadingTrimPropDef.trim.values)[number]>\n  truncate: PropDef\n  variant: PropDef<(typeof headingVariants)[number]>\n  weight: PropDef<(typeof weightPropDef.weight.values)[number]>\n  wrap: PropDef<(typeof textWrapPropDef.wrap.values)[number]>\n}\n\nexport { headingPropDefs }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAE9B,SAAS,6BAA6B;AAItC,MAAM,kBAAkB,CAAC,iBAAiB,kBAAkB,kBAAkB,iBAAiB;AAC/F,MAAM,eAAe,CAAC,WAAW,SAAS,SAAS;AACnD,MAAM,eAAe,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AAEjE,MAAM,kBAAkB;AAAA,EACtB,GAAG;AAAA,EACH,GAAG,sBAAsB,YAAY;AAAA,EACrC,GAAG;AAAA,EACH,GAAG,sBAAsB,kBAAkB;AAAA,EAC3C,GAAG,sBAAsB,aAAa;AAAA,EACtC,GAAG,sBAAsB,cAAc;AAAA,EACvC,GAAG,sBAAsB,gBAAgB;AAAA,EACzC,GAAG,sBAAsB,eAAe;AAAA,EACxC,GAAG;AAAA,EACH,GAAG,sBAAsB,aAAa;AAAA,EACtC,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
   "names": []
 }

package/dist/components/heading.css

@@ -1,12 +1,37 @@
 
 
+:where(.dsx-heading) {
+  --dsx-r-m: initial;
+  --dsx-r-mx: initial;
+  --dsx-r-my: initial;
+  --dsx-r-mt: initial;
+  --dsx-r-mr: initial;
+  --dsx-r-mb: initial;
+  --dsx-r-ml: initial;
+  --dsx-r-margin-top: initial;
+  --dsx-r-margin-right: initial;
+  --dsx-r-margin-bottom: initial;
+  --dsx-r-margin-left: initial;
+  --dsx-r-margin-top-override: initial;
+  --dsx-r-margin-right-override: initial;
+  --dsx-r-margin-bottom-override: initial;
+  --dsx-r-margin-left-override: initial;
+  --dsx-r-p: initial;
+  --dsx-r-px: initial;
+  --dsx-r-py: initial;
+  --dsx-r-pt: initial;
+  --dsx-r-pr: initial;
+  --dsx-r-pb: initial;
+  --dsx-r-pl: initial;
+}
+
 .dsx-heading {
   box-sizing: border-box;
   margin: var(--dsx-r-m, 0);
-  margin-top: var(--dsx-r-mt, var(--dsx-r-my, var(--dsx-r-m, 0)));
-  margin-right: var(--dsx-r-mr, var(--dsx-r-mx, var(--dsx-r-m, 0)));
-  margin-bottom: var(--dsx-r-mb, var(--dsx-r-my, var(--dsx-r-m, 0)));
-  margin-left: var(--dsx-r-ml, var(--dsx-r-mx, var(--dsx-r-m, 0)));
+  margin-top: var(--dsx-r-margin-top-override, var(--dsx-r-margin-top, 0));
+  margin-right: var(--dsx-r-margin-right-override, var(--dsx-r-margin-right, 0));
+  margin-bottom: var(--dsx-r-margin-bottom-override, var(--dsx-r-margin-bottom, 0));
+  margin-left: var(--dsx-r-margin-left-override, var(--dsx-r-margin-left, 0));
   padding: var(--dsx-r-p, 0);
   padding-top: var(--dsx-r-pt, var(--dsx-r-py, var(--dsx-r-p, 0)));
   padding-right: var(--dsx-r-pr, var(--dsx-r-px, var(--dsx-r-p, 0)));
@@ -76,107 +101,105 @@
 }
 
 /* High-contrast mode — shift heading color to HC family (Pattern 3) */
-.dsx-heading[data-high-contrast='true'] {
+.dsx-heading:where(:not(.dsx-heading--inverse))[data-high-contrast='true'] {
   color: var(--dsx-color-high-contrast);
 }
 
-@breakpoints {
-  .dsx-r-heading-size-1 {
-    font-family: var(--dsx-typography-label-small-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-small-font-size);
-    font-weight: var(--dsx-typography-label-small-font-weight);
-    line-height: var(--dsx-typography-label-small-line-height);
-    letter-spacing: var(--dsx-typography-label-small-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-small-font-variation-settings);
-    text-transform: var(--dsx-typography-label-small-text-transform);
-    text-decoration: var(--dsx-typography-label-small-text-decoration);
-  }
-
-  .dsx-r-heading-size-2 {
-    font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-medium-font-size);
-    font-weight: var(--dsx-typography-label-medium-font-weight);
-    line-height: var(--dsx-typography-label-medium-line-height);
-    letter-spacing: var(--dsx-typography-label-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-label-medium-text-transform);
-    text-decoration: var(--dsx-typography-label-medium-text-decoration);
-  }
-
-  .dsx-r-heading-size-3 {
-    font-family: var(--dsx-typography-label-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-large-font-size);
-    font-weight: var(--dsx-typography-label-large-font-weight);
-    line-height: var(--dsx-typography-label-large-line-height);
-    letter-spacing: var(--dsx-typography-label-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-large-font-variation-settings);
-    text-transform: var(--dsx-typography-label-large-text-transform);
-    text-decoration: var(--dsx-typography-label-large-text-decoration);
-  }
-
-  .dsx-r-heading-size-4 {
-    font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-medium-font-size);
-    font-weight: var(--dsx-typography-body-medium-font-weight);
-    line-height: var(--dsx-typography-body-medium-line-height);
-    letter-spacing: var(--dsx-typography-body-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-body-medium-text-transform);
-    text-decoration: var(--dsx-typography-body-medium-text-decoration);
-  }
-
-  .dsx-r-heading-size-5 {
-    font-family: var(--dsx-typography-body-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-large-font-size);
-    font-weight: var(--dsx-typography-body-large-font-weight);
-    line-height: var(--dsx-typography-body-large-line-height);
-    letter-spacing: var(--dsx-typography-body-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-large-font-variation-settings);
-    text-transform: var(--dsx-typography-body-large-text-transform);
-    text-decoration: var(--dsx-typography-body-large-text-decoration);
-  }
-
-  .dsx-r-heading-size-6 {
-    font-family: var(--dsx-typography-headline-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-medium-font-size);
-    font-weight: var(--dsx-typography-headline-medium-font-weight);
-    line-height: var(--dsx-typography-headline-medium-line-height);
-    letter-spacing: var(--dsx-typography-headline-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-medium-text-transform);
-    text-decoration: var(--dsx-typography-headline-medium-text-decoration);
-  }
-
-  .dsx-r-heading-size-7 {
-    font-family: var(--dsx-typography-headline-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-large-font-size);
-    font-weight: var(--dsx-typography-headline-large-font-weight);
-    line-height: var(--dsx-typography-headline-large-line-height);
-    letter-spacing: var(--dsx-typography-headline-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-large-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-large-text-transform);
-    text-decoration: var(--dsx-typography-headline-large-text-decoration);
-  }
-
-  .dsx-r-heading-size-8 {
-    font-family: var(--dsx-typography-display-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-medium-font-size);
-    font-weight: var(--dsx-typography-display-medium-font-weight);
-    line-height: var(--dsx-typography-display-medium-line-height);
-    letter-spacing: var(--dsx-typography-display-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-display-medium-text-transform);
-    text-decoration: var(--dsx-typography-display-medium-text-decoration);
-  }
-
-  .dsx-r-heading-size-9 {
-    font-family: var(--dsx-typography-display-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-large-font-size);
-    font-weight: var(--dsx-typography-display-large-font-weight);
-    line-height: var(--dsx-typography-display-large-line-height);
-    letter-spacing: var(--dsx-typography-display-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-large-font-variation-settings);
-    text-transform: var(--dsx-typography-display-large-text-transform);
-    text-decoration: var(--dsx-typography-display-large-text-decoration);
-  }
+.dsx-r-heading-size-1 {
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+  letter-spacing: var(--dsx-typography-label-small-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-small-font-variation-settings);
+  text-transform: var(--dsx-typography-label-small-text-transform);
+  text-decoration: var(--dsx-typography-label-small-text-decoration);
+}
+
+.dsx-r-heading-size-2 {
+  font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-medium-font-size);
+  font-weight: var(--dsx-typography-label-medium-font-weight);
+  line-height: var(--dsx-typography-label-medium-line-height);
+  letter-spacing: var(--dsx-typography-label-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-medium-font-variation-settings);
+  text-transform: var(--dsx-typography-label-medium-text-transform);
+  text-decoration: var(--dsx-typography-label-medium-text-decoration);
+}
+
+.dsx-r-heading-size-3 {
+  font-family: var(--dsx-typography-label-large-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-large-font-size);
+  font-weight: var(--dsx-typography-label-large-font-weight);
+  line-height: var(--dsx-typography-label-large-line-height);
+  letter-spacing: var(--dsx-typography-label-large-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-large-font-variation-settings);
+  text-transform: var(--dsx-typography-label-large-text-transform);
+  text-decoration: var(--dsx-typography-label-large-text-decoration);
+}
+
+.dsx-r-heading-size-4 {
+  font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-body-medium-font-size);
+  font-weight: var(--dsx-typography-body-medium-font-weight);
+  line-height: var(--dsx-typography-body-medium-line-height);
+  letter-spacing: var(--dsx-typography-body-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-body-medium-font-variation-settings);
+  text-transform: var(--dsx-typography-body-medium-text-transform);
+  text-decoration: var(--dsx-typography-body-medium-text-decoration);
+}
+
+.dsx-r-heading-size-5 {
+  font-family: var(--dsx-typography-body-large-font-family), sans-serif;
+  font-size: var(--dsx-typography-body-large-font-size);
+  font-weight: var(--dsx-typography-body-large-font-weight);
+  line-height: var(--dsx-typography-body-large-line-height);
+  letter-spacing: var(--dsx-typography-body-large-letter-spacing);
+  font-variation-settings: var(--dsx-typography-body-large-font-variation-settings);
+  text-transform: var(--dsx-typography-body-large-text-transform);
+  text-decoration: var(--dsx-typography-body-large-text-decoration);
+}
+
+.dsx-r-heading-size-6 {
+  font-family: var(--dsx-typography-headline-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-headline-medium-font-size);
+  font-weight: var(--dsx-typography-headline-medium-font-weight);
+  line-height: var(--dsx-typography-headline-medium-line-height);
+  letter-spacing: var(--dsx-typography-headline-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-headline-medium-font-variation-settings);
+  text-transform: var(--dsx-typography-headline-medium-text-transform);
+  text-decoration: var(--dsx-typography-headline-medium-text-decoration);
+}
+
+.dsx-r-heading-size-7 {
+  font-family: var(--dsx-typography-headline-large-font-family), sans-serif;
+  font-size: var(--dsx-typography-headline-large-font-size);
+  font-weight: var(--dsx-typography-headline-large-font-weight);
+  line-height: var(--dsx-typography-headline-large-line-height);
+  letter-spacing: var(--dsx-typography-headline-large-letter-spacing);
+  font-variation-settings: var(--dsx-typography-headline-large-font-variation-settings);
+  text-transform: var(--dsx-typography-headline-large-text-transform);
+  text-decoration: var(--dsx-typography-headline-large-text-decoration);
+}
+
+.dsx-r-heading-size-8 {
+  font-family: var(--dsx-typography-display-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-display-medium-font-size);
+  font-weight: var(--dsx-typography-display-medium-font-weight);
+  line-height: var(--dsx-typography-display-medium-line-height);
+  letter-spacing: var(--dsx-typography-display-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-display-medium-font-variation-settings);
+  text-transform: var(--dsx-typography-display-medium-text-transform);
+  text-decoration: var(--dsx-typography-display-medium-text-decoration);
+}
+
+.dsx-r-heading-size-9 {
+  font-family: var(--dsx-typography-display-large-font-family), sans-serif;
+  font-size: var(--dsx-typography-display-large-font-size);
+  font-weight: var(--dsx-typography-display-large-font-weight);
+  line-height: var(--dsx-typography-display-large-line-height);
+  letter-spacing: var(--dsx-typography-display-large-letter-spacing);
+  font-variation-settings: var(--dsx-typography-display-large-font-variation-settings);
+  text-transform: var(--dsx-typography-display-large-text-transform);
+  text-decoration: var(--dsx-typography-display-large-text-decoration);
 }

package/dist/components/hover-card.css

@@ -2,6 +2,8 @@
 @import '../../_internal/baseDialog.css';
 
 .dsx-hover-card__content {
+  z-index: var(--dsx-z-index-popover);
+  overflow-wrap: anywhere;
   gap: var(--dsx-space-md);
   min-width: var(--dsx-size-popover-min-width);
   max-width: min(var(--dsx-size-popover-max-width), calc(100vw - var(--dsx-space-xl)));
@@ -32,8 +34,9 @@
 }
 
 .dsx-hover-card__arrow {
-  fill: currentColor;
+  color: var(--dsx-color-panel-translucent);
+  fill: var(--dsx-color-panel-translucent);
   stroke: var(--dsx-color-outline-variant);
-  stroke-width: 1px;
+  stroke-width: var(--dsx-border-width-sm);
   vector-effect: non-scaling-stroke;
 }