@pontive/pontkit-core 1.9.0 → 1.10.0

package/dist/styles.css

@@ -633,6 +633,11 @@
   /* * ASPECT RATIO * */
   --pont-ref-layout-aspect-square: 1 / 1;
   --pont-ref-layout-aspect-video: 16 / 9;
+
+  /* * INSET * */
+  --pont-ref-layout-inset-auto: auto;
+  --pont-ref-layout-inset-full: 100%;
+  --pont-ref-layout-inset-neg-full: -100%;
 }
 
 /*
@@ -656,6 +661,21 @@
   --pont-ref-sizing-w-min: min-content;
   --pont-ref-sizing-w-max: max-content;
   --pont-ref-sizing-w-fit: fit-content;
+
+  /* * HEIGHT * */
+  --pont-ref-sizing-h-auto: auto;
+  --pont-ref-sizing-h-full: 100%;
+  --pont-ref-sizing-h-screen: 100vh;
+  --pont-ref-sizing-h-dvh: 100dvh;
+  --pont-ref-sizing-h-dvw: 100dvw;
+  --pont-ref-sizing-h-lvh: 100lvh;
+  --pont-ref-sizing-h-lvw: 100lvw;
+  --pont-ref-sizing-h-svh: 100svh;
+  --pont-ref-sizing-h-svw: 100svw;
+  --pont-ref-sizing-h-min: min-content;
+  --pont-ref-sizing-h-max: max-content;
+  --pont-ref-sizing-h-fit: fit-content;
+  --pont-ref-sizing-h-lh: 1lh;
 }
 
 /*
@@ -666,6 +686,14 @@
  */
 
 :root {
+  /* * TEXT ALIGN * */
+  --pont-ref-typography-align-left: left;
+  --pont-ref-typography-align-center: center;
+  --pont-ref-typography-align-right: right;
+  --pont-ref-typography-align-justify: justify;
+  --pont-ref-typography-align-start: start;
+  --pont-ref-typography-align-end: end;
+
   /* * TEXT DECORATION LINE * */
   --pont-ref-typography-decoration-line-underline: underline;
   --pont-ref-typography-decoration-line-overline: overline;
@@ -690,6 +718,12 @@
 
   /* * TEXT UNDERLINE OFFSET * */
   --pont-ref-typography-underline-offset-auto: auto;
+
+  /* * TEXT WRAP * */
+  --pont-ref-typography-wrap-wrap: wrap;
+  --pont-ref-typography-wrap-nowrap: nowrap;
+  --pont-ref-typography-wrap-balance: balance;
+  --pont-ref-typography-wrap-pretty: pretty;
 }
 
 /*
@@ -721,6 +755,9 @@
   --pont-sem-color-role-text: var(--pont-ref-color-base-950);
   --pont-sem-color-role-focus: var(--pont-ref-color-base-400);
 
+  --pont-sem-color-role-base: var(--pont-ref-color-base-900);
+  --pont-sem-color-role-on-base: var(--pont-ref-color-base-50);
+
   --pont-sem-color-role-brand: var(--pont-ref-color-brand-900);
   --pont-sem-color-role-on-brand: var(--pont-ref-color-brand-50);
 
@@ -768,6 +805,8 @@
   --pont-sem-color-bg-surface-quaternary: var(--pont-ref-color-base-100) /
     var(--pont-ref-opacity-50);
 
+  --pont-sem-color-bg-surface-base: var(--pont-sem-color-role-base) /
+    var(--pont-sem-opacity-surface);
   --pont-sem-color-bg-surface-brand: var(--pont-sem-color-role-brand) /
     var(--pont-sem-opacity-surface);
   --pont-sem-color-bg-surface-destructive: var(--pont-sem-color-role-destructive) /
@@ -924,6 +963,10 @@
 
   --pont-sem-color-border-transparent: var(--pont-ref-color-transparent);
 
+  --pont-sem-color-border-base: var(--pont-sem-color-role-base);
+  --pont-sem-color-border-base-secondary: var(--pont-sem-color-role-base) /
+    var(--pont-sem-opacity-border-secondary);
+
   --pont-sem-color-border-brand: var(--pont-sem-color-role-brand);
   --pont-sem-color-border-brand-secondary: var(--pont-sem-color-role-brand) /
     var(--pont-sem-opacity-border-secondary);
@@ -994,6 +1037,9 @@
   --pont-sem-color-role-text: var(--pont-ref-color-base-50);
   --pont-sem-color-role-focus: var(--pont-ref-color-base-500);
 
+  --pont-sem-color-role-base: var(--pont-ref-color-base-200);
+  --pont-sem-color-role-on-base: var(--pont-ref-color-base-900);
+
   --pont-sem-color-role-brand: var(--pont-ref-color-brand-200);
   --pont-sem-color-role-on-brand: var(--pont-ref-color-brand-900);
 
@@ -1041,6 +1087,8 @@
   --pont-sem-color-bg-surface-quaternary: var(--pont-ref-color-base-800) /
     var(--pont-ref-opacity-50);
 
+  --pont-sem-color-bg-surface-base: var(--pont-sem-color-role-base) /
+    var(--pont-sem-opacity-surface);
   --pont-sem-color-bg-surface-brand: var(--pont-sem-color-role-brand) /
     var(--pont-sem-opacity-surface);
   --pont-sem-color-bg-surface-destructive: var(--pont-sem-color-role-destructive) /
@@ -1207,6 +1255,10 @@
 
   --pont-sem-color-border-transparent: var(--pont-ref-color-transparent);
 
+  --pont-sem-color-border-base: var(--pont-sem-color-role-base);
+  --pont-sem-color-border-base-secondary: var(--pont-sem-color-role-base) /
+    var(--pont-sem-opacity-border-secondary);
+
   --pont-sem-color-border-brand: var(--pont-sem-color-role-brand);
   --pont-sem-color-border-brand-secondary: var(--pont-sem-color-role-brand) /
     var(--pont-sem-opacity-border-secondary);
@@ -2182,165 +2234,706 @@
 }
 /*
  * ===========================================================================
- *  ALERT COMPONENT TOKENS
+ *  CALLOUT COMPONENT TOKENS
  *  pont-callout-*
+ *  [previously pont-alert-*]
  * ===========================================================================
  */
 
 /*
  * --------------------------------------------------
- *  ALERT
+ *  CALLOUT
  * --------------------------------------------------
  */
 
 :root {
-  --pont-callout-space-gap: var(--pont-sem-space-feedback-gap);
-  --pont-callout-space-gap-x-has-icon: var(--pont-sem-space-feedback-gap-lg);
-  --pont-callout-font-family: var(--pont-sem-font-family-default);
+  /* LAYOUT */
+  --pont-callout-layout-gap-x: calc(var(--pont-ref-space) * 0.5);
+  --pont-callout-layout-gap-y: calc(var(--pont-ref-space) * 0.5);
 
-  --pont-callout-space-py: var(--pont-sem-space-feedback-py);
-  --pont-callout-space-px: var(--pont-sem-space-feedback-px);
-  --pont-callout-space-pr-has-action: var(--pont-sem-space-feedback-pr-has-action);
+  --pont-callout-layout-gap-x-has-icon: calc(var(--pont-ref-space) * 2);
+  --pont-callout-layout-gap-y-has-icon: calc(var(--pont-ref-space) * 0.5);
 
-  --pont-callout-font-size: var(--pont-sem-font-content-body-size);
-  --pont-callout-font-line-height: var(--pont-sem-font-content-body-line-height);
+  /* SPACING */
+  --pont-callout-spacing-pt: calc(var(--pont-ref-space) * 2);
+  --pont-callout-spacing-pr: calc(var(--pont-ref-space) * 2.5);
+  --pont-callout-spacing-pb: calc(var(--pont-ref-space) * 2);
+  --pont-callout-spacing-pl: calc(var(--pont-ref-space) * 2.5);
 
-  --pont-callout-color-bg: hsl(var(--pont-sem-color-bg-surface-secondary));
+  --pont-callout-spacing-pt-has-action: calc(var(--pont-ref-space) * 2);
+  --pont-callout-spacing-pr-has-action: calc(var(--pont-ref-space) * 18);
+  --pont-callout-spacing-pb-has-action: calc(var(--pont-ref-space) * 2);
+  --pont-callout-spacing-pl-has-action: calc(var(--pont-ref-space) * 2.5);
 
-  --pont-callout-width-border: var(--pont-sem-width-border);
-  --pont-callout-color-border: hsl(var(--pont-sem-color-border));
-  --pont-callout-radius: var(--pont-sem-radius-feedback);
+  /* SIZING */
+  --pont-callout-sizing-w: var(--pont-ref-sizing-w-full);
+  --pont-callout-sizing-h: var(--pont-ref-sizing-h-auto);
 
-  /* * VARIANTS * */
-  /* DEFAULT */
-  --pont-callout-default-color-text: hsl(var(--pont-sem-color-text));
-  --pont-callout-default-color-bg: hsl(var(--pont-callout-color-bg));
-  --pont-callout-default-color-border: hsl(var(--pont-sem-color-border));
-  /* BRAND & BRAND TONAL */
-  --pont-callout-brand-color-text: hsl(var(--pont-sem-color-text-brand));
-  --pont-callout-brand-color-bg: hsl(var(--pont-callout-color-bg));
-  --pont-callout-brand-color-border: hsl(var(--pont-sem-color-border));
-
-  --pont-callout-brand-tonal-color-text: hsl(var(--pont-sem-color-text-brand));
-  --pont-callout-brand-tonal-color-bg: hsl(var(--pont-sem-color-bg-surface-brand));
-  --pont-callout-brand-tonal-color-border: hsl(
+  /* TYPOGRAPHY */
+  --pont-callout-typography-font: var(--pont-sem-font-family-default);
+  --pont-callout-typography-size: var(--pont-ref-font-size-sm);
+  --pont-callout-typography-weight: var(--pont-ref-font-weight-normal);
+  --pont-callout-typography-tracking: var(
+    --pont-ref-font-letter-spacing-normal
+  );
+  --pont-callout-typography-leading: var(--pont-ref-font-line-height-of-sm);
+
+  --pont-callout-typography-align: var(--pont-ref-typography-align-left);
+
+  /* BORDER */
+  --pont-callout-border-radius-tl: var(--pont-ref-radius-lg);
+  --pont-callout-border-radius-tr: var(--pont-ref-radius-lg);
+  --pont-callout-border-radius-bl: var(--pont-ref-radius-lg);
+  --pont-callout-border-radius-br: var(--pont-ref-radius-lg);
+}
+
+/* * -------- VARIANTS -------- * */
+
+/* * DEFAULT * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-callout-default-typography-color: hsl(var(--pont-sem-color-text));
+
+  /* BACKGROUND */
+  --pont-callout-default-bg-color: hsl(
+    var(--pont-sem-color-bg-surface-secondary)
+  );
+
+  /* BORDER */
+  --pont-callout-default-border-style: var(--pont-ref-border-style-solid);
+  --pont-callout-default-border-color: hsl(var(--pont-sem-color-border));
+  --pont-callout-default-border-width-t: var(--pont-sem-width-border);
+  --pont-callout-default-border-width-r: var(--pont-sem-width-border);
+  --pont-callout-default-border-width-b: var(--pont-sem-width-border);
+  --pont-callout-default-border-width-l: var(--pont-sem-width-border);
+}
+
+/* * BRAND * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-callout-brand-typography-color: hsl(var(--pont-sem-color-text-brand));
+
+  /* BACKGROUND */
+  --pont-callout-brand-bg-color: hsl(
+    var(--pont-sem-color-bg-surface-secondary)
+  );
+
+  /* BORDER */
+  --pont-callout-brand-border-style: var(--pont-ref-border-style-solid);
+  --pont-callout-brand-border-color: hsl(var(--pont-sem-color-border));
+  --pont-callout-brand-border-width-t: var(--pont-sem-width-border);
+  --pont-callout-brand-border-width-r: var(--pont-sem-width-border);
+  --pont-callout-brand-border-width-b: var(--pont-sem-width-border);
+  --pont-callout-brand-border-width-l: var(--pont-sem-width-border);
+}
+
+/* * BRAND TONAL * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-callout-brand-tonal-typography-color: hsl(
+    var(--pont-sem-color-text-brand)
+  );
+
+  /* BACKGROUND */
+  --pont-callout-brand-tonal-bg-color: hsl(
+    var(--pont-sem-color-bg-surface-brand)
+  );
+
+  /* BORDER */
+  --pont-callout-brand-tonal-border-style: var(--pont-ref-border-style-solid);
+  --pont-callout-brand-tonal-border-color: hsl(
     var(--pont-sem-color-border-brand-secondary)
   );
+  --pont-callout-brand-tonal-border-width-t: var(--pont-sem-width-border);
+  --pont-callout-brand-tonal-border-width-r: var(--pont-sem-width-border);
+  --pont-callout-brand-tonal-border-width-b: var(--pont-sem-width-border);
+  --pont-callout-brand-tonal-border-width-l: var(--pont-sem-width-border);
+}
+
+/* * DESTRUCTIVE * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-callout-destructive-typography-color: hsl(
+    var(--pont-sem-color-text-destructive)
+  );
+
+  /* BACKGROUND */
+  --pont-callout-destructive-bg-color: hsl(
+    var(--pont-sem-color-bg-surface-secondary)
+  );
+
+  /* BORDER */
+  --pont-callout-destructive-border-style: var(--pont-ref-border-style-solid);
+  --pont-callout-destructive-border-color: hsl(var(--pont-sem-color-border));
+  --pont-callout-destructive-border-width-t: var(--pont-sem-width-border);
+  --pont-callout-destructive-border-width-r: var(--pont-sem-width-border);
+  --pont-callout-destructive-border-width-b: var(--pont-sem-width-border);
+  --pont-callout-destructive-border-width-l: var(--pont-sem-width-border);
+}
+
+/* * DESTRUCTIVE TONAL * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-callout-destructive-tonal-typography-color: hsl(
+    var(--pont-sem-color-text-destructive)
+  );
+
+  /* BACKGROUND */
+  --pont-callout-destructive-tonal-bg-color: hsl(
+    var(--pont-sem-color-bg-surface-destructive)
+  );
+
+  /* BORDER */
+  --pont-callout-destructive-tonal-border-style: var(
+    --pont-ref-border-style-solid
+  );
+  --pont-callout-destructive-tonal-border-color: hsl(
+    var(--pont-sem-color-border-destructive-secondary)
+  );
+  --pont-callout-destructive-tonal-border-width-t: var(--pont-sem-width-border);
+  --pont-callout-destructive-tonal-border-width-r: var(--pont-sem-width-border);
+  --pont-callout-destructive-tonal-border-width-b: var(--pont-sem-width-border);
+  --pont-callout-destructive-tonal-border-width-l: var(--pont-sem-width-border);
+}
+
+/* * WARNING * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-callout-warning-typography-color: hsl(
+    var(--pont-sem-color-text-warning)
+  );
+
+  /* BACKGROUND */
+  --pont-callout-warning-bg-color: hsl(
+    var(--pont-sem-color-bg-surface-secondary)
+  );
+
+  /* BORDER */
+  --pont-callout-warning-border-style: var(--pont-ref-border-style-solid);
+  --pont-callout-warning-border-color: hsl(var(--pont-sem-color-border));
+  --pont-callout-warning-border-width-t: var(--pont-sem-width-border);
+  --pont-callout-warning-border-width-r: var(--pont-sem-width-border);
+  --pont-callout-warning-border-width-b: var(--pont-sem-width-border);
+  --pont-callout-warning-border-width-l: var(--pont-sem-width-border);
+}
+
+/* * WARNING TONAL * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-callout-warning-tonal-typography-color: hsl(
+    var(--pont-sem-color-text-warning)
+  );
+
+  /* BACKGROUND */
+  --pont-callout-warning-tonal-bg-color: hsl(
+    var(--pont-sem-color-bg-surface-warning)
+  );
+
+  /* BORDER */
+  --pont-callout-warning-tonal-border-style: var(--pont-ref-border-style-solid);
+  --pont-callout-warning-tonal-border-color: hsl(
+    var(--pont-sem-color-border-warning-secondary)
+  );
+  --pont-callout-warning-tonal-border-width-t: var(--pont-sem-width-border);
+  --pont-callout-warning-tonal-border-width-r: var(--pont-sem-width-border);
+  --pont-callout-warning-tonal-border-width-b: var(--pont-sem-width-border);
+  --pont-callout-warning-tonal-border-width-l: var(--pont-sem-width-border);
+}
+
+/* * SUCCESS * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-callout-success-typography-color: hsl(
+    var(--pont-sem-color-text-success)
+  );
+
+  /* BACKGROUND */
+  --pont-callout-success-bg-color: hsl(
+    var(--pont-sem-color-bg-surface-secondary)
+  );
+
+  /* BORDER */
+  --pont-callout-success-border-style: var(--pont-ref-border-style-solid);
+  --pont-callout-success-border-color: hsl(var(--pont-sem-color-border));
+  --pont-callout-success-border-width-t: var(--pont-sem-width-border);
+  --pont-callout-success-border-width-r: var(--pont-sem-width-border);
+  --pont-callout-success-border-width-b: var(--pont-sem-width-border);
+  --pont-callout-success-border-width-l: var(--pont-sem-width-border);
+}
+
+/* * SUCCESS TONAL * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-callout-success-tonal-typography-color: hsl(
+    var(--pont-sem-color-text-success)
+  );
+
+  /* BACKGROUND */
+  --pont-callout-success-tonal-bg-color: hsl(
+    var(--pont-sem-color-bg-surface-success)
+  );
+
+  /* BORDER */
+  --pont-callout-success-tonal-border-style: var(--pont-ref-border-style-solid);
+  --pont-callout-success-tonal-border-color: hsl(
+    var(--pont-sem-color-border-success-secondary)
+  );
+  --pont-callout-success-tonal-border-width-t: var(--pont-sem-width-border);
+  --pont-callout-success-tonal-border-width-r: var(--pont-sem-width-border);
+  --pont-callout-success-tonal-border-width-b: var(--pont-sem-width-border);
+  --pont-callout-success-tonal-border-width-l: var(--pont-sem-width-border);
+}
+
+/* * INFO * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-callout-info-typography-color: hsl(var(--pont-sem-color-text-info));
+
+  /* BACKGROUND */
+  --pont-callout-info-bg-color: hsl(var(--pont-sem-color-bg-surface-secondary));
+
+  /* BORDER */
+  --pont-callout-info-border-style: var(--pont-ref-border-style-solid);
+  --pont-callout-info-border-color: hsl(var(--pont-sem-color-border));
+  --pont-callout-info-border-width-t: var(--pont-sem-width-border);
+  --pont-callout-info-border-width-r: var(--pont-sem-width-border);
+  --pont-callout-info-border-width-b: var(--pont-sem-width-border);
+  --pont-callout-info-border-width-l: var(--pont-sem-width-border);
+}
+
+/* * INFO TONAL * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-callout-info-tonal-typography-color: hsl(
+    var(--pont-sem-color-text-info)
+  );
+
+  /* BACKGROUND */
+  --pont-callout-info-tonal-bg-color: hsl(
+    var(--pont-sem-color-bg-surface-info)
+  );
+
+  /* BORDER */
+  --pont-callout-info-tonal-border-style: var(--pont-ref-border-style-solid);
+  --pont-callout-info-tonal-border-color: hsl(
+    var(--pont-sem-color-border-info-secondary)
+  );
+  --pont-callout-info-tonal-border-width-t: var(--pont-sem-width-border);
+  --pont-callout-info-tonal-border-width-r: var(--pont-sem-width-border);
+  --pont-callout-info-tonal-border-width-b: var(--pont-sem-width-border);
+  --pont-callout-info-tonal-border-width-l: var(--pont-sem-width-border);
+}
+
+/*
+ * --------------------------------------------------
+ *  CALLOUT 'ICON'
+ * --------------------------------------------------
+ */
+
+:root {
+  /* SIZING */
+  --pont-callout-icon-sizing-w: var(--pont-sem-space-icon-size);
+  --pont-callout-icon-sizing-h: var(--pont-sem-space-icon-size);
+
+  /* TRANSFORM */
+  --pont-callout-icon-transform-translate-x: 0;
+  --pont-callout-icon-transform-translate-y: calc(var(--pont-ref-space) * 0.5);
+}
+
+/* * -------- VARIANTS -------- * */
+
+:root {
+  --pont-callout-default-icon-svg-color: var(
+    --pont-callout-default-typography-color
+  );
+  --pont-callout-brand-icon-svg-color: var(
+    --pont-callout-brand-typography-color
+  );
+  --pont-callout-brand-tonal-icon-svg-color: var(
+    --pont-callout-brand-tonal-typography-color
+  );
+  --pont-callout-destructive-icon-svg-color: var(
+    --pont-callout-destructive-typography-color
+  );
+  --pont-callout-destructive-tonal-icon-svg-color: var(
+    --pont-callout-destructive-tonal-typography-color
+  );
+  --pont-callout-warning-icon-svg-color: var(
+    --pont-callout-warning-typography-color
+  );
+  --pont-callout-warning-tonal-icon-svg-color: var(
+    --pont-callout-warning-tonal-typography-color
+  );
+  --pont-callout-success-icon-svg-color: var(
+    --pont-callout-success-typography-color
+  );
+  --pont-callout-success-tonal-icon-svg-color: var(
+    --pont-callout-success-tonal-typography-color
+  );
+  --pont-callout-info-icon-svg-color: var(--pont-callout-info-typography-color);
+  --pont-callout-info-tonal-icon-svg-color: var(
+    --pont-callout-info-tonal-typography-color
+  );
+}
+
+/*
+ * --------------------------------------------------
+ *  CALLOUT TITLE
+ * --------------------------------------------------
+ */
+
+:root {
+  /* Note: shadcn does not apply the heading font to alert/callout title */
+  --pont-callout-title-typography-font: var(--pont-sem-font-family-heading);
+  --pont-callout-title-typography-size: var(--pont-callout-typography-size);
+  --pont-callout-title-typography-weight: var(--pont-ref-font-weight-medium);
+  --pont-callout-title-typography-tracking: var(
+    --pont-callout-typography-tracking
+  );
+  --pont-callout-title-typography-leading: var(
+    --pont-callout-typography-leading
+  );
+}
+
+/* * -------- VARIANTS -------- * */
+
+:root {
+  --pont-callout-default-title-typography-color: var(
+    --pont-callout-default-typography-color
+  );
+  --pont-callout-brand-title-typography-color: var(
+    --pont-callout-brand-typography-color
+  );
+  --pont-callout-brand-tonal-title-typography-color: var(
+    --pont-callout-brand-tonal-typography-color
+  );
+  --pont-callout-destructive-title-typography-color: var(
+    --pont-callout-destructive-typography-color
+  );
+  --pont-callout-destructive-tonal-title-typography-color: var(
+    --pont-callout-destructive-tonal-typography-color
+  );
+  --pont-callout-warning-title-typography-color: var(
+    --pont-callout-warning-typography-color
+  );
+  --pont-callout-warning-tonal-title-typography-color: var(
+    --pont-callout-warning-tonal-typography-color
+  );
+  --pont-callout-success-title-typography-color: var(
+    --pont-callout-success-typography-color
+  );
+  --pont-callout-success-tonal-title-typography-color: var(
+    --pont-callout-success-tonal-typography-color
+  );
+  --pont-callout-info-title-typography-color: var(
+    --pont-callout-info-typography-color
+  );
+  --pont-callout-info-tonal-title-typography-color: var(
+    --pont-callout-info-tonal-typography-color
+  );
+}
+
+/* * -------- CALLOUT TITLE > LINK -------- * */
+
+:root {
+  --pont-callout-title-link-typography-decoration-line: var(
+    --pont-ref-typography-decoration-line-underline
+  );
+  --pont-callout-title-link-typography-decoration-color: var(
+    --pont-sem-typography-decoration-color-default
+  );
+  --pont-callout-title-link-typography-decoration-style: var(
+    --pont-sem-typography-decoration-style-default
+  );
+  --pont-callout-title-link-typography-decoration-thickness: var(
+    --pont-sem-typography-decoration-thickness-default
+  );
+  --pont-callout-title-link-typography-underline-offset: 3px;
+}
+
+/* * VARIANTS * */
+
+:root {
+  --pont-callout-default-title-link-typography-color: var(
+    --pont-callout-default-title-typography-color
+  );
+  --pont-callout-default-title-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
+
+  --pont-callout-brand-title-link-typography-color: var(
+    --pont-callout-brand-title-typography-color
+  );
+  --pont-callout-brand-title-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
+
+  --pont-callout-brand-tonal-title-link-typography-color: var(
+    --pont-callout-brand-tonal-title-typography-color
+  );
+  --pont-callout-brand-tonal-title-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
+
+  --pont-callout-destructive-title-link-typography-color: var(
+    --pont-callout-destructive-title-typography-color
+  );
+  --pont-callout-destructive-title-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
+
+  --pont-callout-destructive-tonal-title-link-typography-color: var(
+    --pont-callout-destructive-tonal-title-typography-color
+  );
+  --pont-callout-destructive-tonal-title-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
+
+  --pont-callout-warning-title-link-typography-color: var(
+    --pont-callout-warning-title-typography-color
+  );
+  --pont-callout-warning-title-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
+
+  --pont-callout-warning-tonal-title-link-typography-color: var(
+    --pont-callout-warning-tonal-title-typography-color
+  );
+  --pont-callout-warning-tonal-title-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
+
+  --pont-callout-success-title-link-typography-color: var(
+    --pont-callout-success-title-typography-color
+  );
+  --pont-callout-success-title-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
+
+  --pont-callout-success-tonal-title-link-typography-color: var(
+    --pont-callout-success-tonal-title-typography-color
+  );
+  --pont-callout-success-tonal-title-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
+
+  --pont-callout-info-title-link-typography-color: var(
+    --pont-callout-info-title-typography-color
+  );
+  --pont-callout-info-title-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
+
+  --pont-callout-info-tonal-title-link-typography-color: var(
+    --pont-callout-info-tonal-title-typography-color
+  );
+  --pont-callout-info-tonal-title-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
+}
+
+/*
+ * --------------------------------------------------
+ *  CALLOUT DESCRIPTION
+ * --------------------------------------------------
+ */
+
+:root {
+  --pont-callout-description-typography-font: var(
+    --pont-callout-typography-font
+  );
+  --pont-callout-description-typography-size: var(
+    --pont-callout-typography-size
+  );
+  --pont-callout-description-typography-weight: var(
+    --pont-callout-typography-weight
+  );
+  --pont-callout-description-typography-tracking: var(
+    --pont-callout-typography-tracking
+  );
+  --pont-callout-description-typography-leading: var(
+    --pont-callout-typography-leading
+  );
+
+  /* Note: responsive variable with media query below */
+  --pont-callout-description-typography-wrap: var(
+    --pont-ref-typography-wrap-balance
+  );
+
+  /* Note: this is actually applied as a margin-bottom to every `<p>` child, excluding the last child */
+  --pont-callout-description-typography-p-spacing: calc(
+    var(--pont-ref-space) * 4
+  );
+}
+
+@media (width >= 48rem) {
+  :root {
+    --pont-callout-description-typography-wrap: var(
+      --pont-ref-typography-wrap-pretty
+    );
+  }
+}
+
+/* * -------- VARIANTS -------- * */
+
+:root {
+  --pont-callout-default-description-typography-color: hsl(
+    var(--pont-sem-color-text-secondary)
+  );
+  --pont-callout-brand-description-typography-color: hsl(
+    var(--pont-sem-color-text-brand-secondary)
+  );
+  --pont-callout-brand-tonal-description-typography-color: hsl(
+    var(--pont-sem-color-text-brand-secondary)
+  );
+  --pont-callout-destructive-description-typography-color: hsl(
+    var(--pont-sem-color-text-destructive-secondary)
+  );
+  --pont-callout-destructive-tonal-description-typography-color: hsl(
+    var(--pont-sem-color-text-destructive-secondary)
+  );
+  --pont-callout-warning-description-typography-color: hsl(
+    var(--pont-sem-color-text-warning-secondary)
+  );
+  --pont-callout-warning-tonal-description-typography-color: hsl(
+    var(--pont-sem-color-text-warning-secondary)
+  );
+  --pont-callout-success-description-typography-color: hsl(
+    var(--pont-sem-color-text-success-secondary)
+  );
+  --pont-callout-success-tonal-description-typography-color: hsl(
+    var(--pont-sem-color-text-success-secondary)
+  );
+  --pont-callout-info-description-typography-color: hsl(
+    var(--pont-sem-color-text-info-secondary)
+  );
+  --pont-callout-info-tonal-description-typography-color: hsl(
+    var(--pont-sem-color-text-info-secondary)
+  );
+}
+
+/* * -------- CALLOUT DESCRIPTION > LINK -------- * */
+
+:root {
+  --pont-callout-description-link-typography-decoration-line: var(
+    --pont-ref-typography-decoration-line-underline
+  );
+  --pont-callout-description-link-typography-decoration-color: var(
+    --pont-sem-typography-decoration-color-default
+  );
+  --pont-callout-description-link-typography-decoration-style: var(
+    --pont-sem-typography-decoration-style-default
+  );
+  --pont-callout-description-link-typography-decoration-thickness: var(
+    --pont-sem-typography-decoration-thickness-default
+  );
+  --pont-callout-description-link-typography-underline-offset: 3px;
+}
 
-  /* DESTRUCTIVE & DESTRUCTIVE TONAL */
-  --pont-callout-destructive-color-text: hsl(var(--pont-sem-color-text-destructive));
-  --pont-callout-destructive-color-bg: hsl(var(--pont-callout-color-bg));
-  --pont-callout-destructive-color-border: hsl(var(--pont-sem-color-border));
+/* * VARIANTS * */
 
-  --pont-callout-destructive-tonal-color-bg: hsl(
-    var(--pont-sem-color-bg-surface-destructive)
+:root {
+  --pont-callout-default-description-link-typography-color: var(
+    --pont-callout-default-description-typography-color
   );
-  --pont-callout-destructive-tonal-color-border: hsl(
-    var(--pont-sem-color-border-destructive-secondary)
+  --pont-callout-default-description-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
   );
 
-  /* WARNING & WARNING TONAL */
-  --pont-callout-warning-color-text: hsl(var(--pont-sem-color-text-warning));
-  --pont-callout-warning-color-bg: hsl(var(--pont-callout-color-bg));
-  --pont-callout-warning-color-border: hsl(var(--pont-sem-color-border));
-
-  --pont-callout-warning-tonal-color-bg: hsl(
-    var(--pont-sem-color-bg-surface-warning)
+  --pont-callout-brand-description-link-typography-color: var(
+    --pont-callout-brand-description-typography-color
   );
-  --pont-callout-warning-tonal-color-border: hsl(
-    var(--pont-sem-color-border-warning-secondary)
+  --pont-callout-brand-description-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
   );
 
-  /* SUCCESS & SUCCESS TONAL */
-  --pont-callout-success-color-text: hsl(var(--pont-sem-color-text-success));
-  --pont-callout-success-color-bg: hsl(var(--pont-callout-color-bg));
-  --pont-callout-success-color-border: hsl(var(--pont-sem-color-border));
-
-  --pont-callout-success-tonal-color-bg: hsl(
-    var(--pont-sem-color-bg-surface-success)
+  --pont-callout-brand-tonal-description-link-typography-color: var(
+    --pont-callout-brand-tonal-description-typography-color
   );
-  --pont-callout-success-tonal-color-border: hsl(
-    var(--pont-sem-color-border-success-secondary)
+  --pont-callout-brand-tonal-description-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
   );
 
-  /* INFO & INFO TONAL */
-  --pont-callout-info-color-text: hsl(var(--pont-sem-color-text-info));
-  --pont-callout-info-color-bg: hsl(var(--pont-callout-color-bg));
-  --pont-callout-info-color-border: hsl(var(--pont-sem-color-border));
-
-  --pont-callout-info-tonal-color-bg: hsl(var(--pont-sem-color-bg-surface-info));
-  --pont-callout-info-tonal-color-border: hsl(
-    var(--pont-sem-color-border-info-secondary)
+  --pont-callout-destructive-description-link-typography-color: var(
+    --pont-callout-destructive-description-typography-color
+  );
+  --pont-callout-destructive-description-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
   );
 
-  /* * ICON CHILD * */
-  --pont-callout-icon-space-size: var(--pont-sem-space-icon-size);
-  --pont-callout-icon-space-translate-y: var(--pont-sem-space-icon-translate-y);
-}
-
-/*
- * --------------------------------------------------
- *  ALERT TITLE
- * --------------------------------------------------
- */
-
-:root {
-  --pont-callout-title-font-weight: var(--pont-sem-font-content-heading-weight-sm);
-  --pont-callout-title-font-size: var(--pont-callout-font-size);
-
-  /* * LINK CHILD * */
-  --pont-callout-title-color-link-hover: hsl(var(--pont-sem-color-text));
-}
-
-/*
- * --------------------------------------------------
- *  ALERT DESCRIPTION
- * --------------------------------------------------
- */
+  --pont-callout-destructive-tonal-description-link-typography-color: var(
+    --pont-callout-destructive-tonal-description-typography-color
+  );
+  --pont-callout-destructive-tonal-description-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
 
-:root {
-  --pont-callout-description-font-size: var(--pont-sem-font-content-body-size);
-  --pont-callout-description-font-weight: var(--pont-sem-font-content-body-weight);
-  --pont-callout-description-font-line-height: var(
-    --pont-sem-font-content-body-line-height
+  --pont-callout-warning-description-link-typography-color: var(
+    --pont-callout-warning-description-typography-color
+  );
+  --pont-callout-warning-description-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
   );
 
-  /* * VARIANTS * */
-  --pont-callout-description-default-color-text: hsl(
-    var(--pont-sem-color-text-secondary)
+  --pont-callout-warning-tonal-description-link-typography-color: var(
+    --pont-callout-warning-tonal-description-typography-color
   );
-  --pont-callout-description-brand-color-text: hsl(
-    var(--pont-sem-color-text-brand-secondary)
+  --pont-callout-warning-tonal-description-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
   );
-  --pont-callout-description-destructive-color-text: hsl(
-    var(--pont-sem-color-text-destructive-secondary)
+
+  --pont-callout-success-description-link-typography-color: var(
+    --pont-callout-success-description-typography-color
   );
-  --pont-callout-description-warning-color-text: hsl(
-    var(--pont-sem-color-text-warning-secondary)
+  --pont-callout-success-description-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
   );
-  --pont-callout-description-success-color-text: hsl(
-    var(--pont-sem-color-text-success-secondary)
+
+  --pont-callout-success-tonal-description-link-typography-color: var(
+    --pont-callout-success-tonal-description-typography-color
   );
-  --pont-callout-description-info-color-text: hsl(
-    var(--pont-sem-color-text-info-secondary)
+  --pont-callout-success-tonal-description-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
   );
 
-  /* * LINK CHILD * */
-  --pont-callout-description-color-link-hover: hsl(var(--pont-sem-color-text));
+  --pont-callout-info-description-link-typography-color: var(
+    --pont-callout-info-description-typography-color
+  );
+  --pont-callout-info-description-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
 
-  /* * PARAGRAPH CHILD * */
-  --pont-callout-description-p-space-mb: var(--pont-ref-space-4);
+  --pont-callout-info-tonal-description-link-typography-color: var(
+    --pont-callout-info-tonal-description-typography-color
+  );
+  --pont-callout-info-tonal-description-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text)
+  );
 }
 
 /*
  * --------------------------------------------------
- *  ALERT ACTION
+ *  CALLOUT ACTION
  * --------------------------------------------------
  */
 
 :root {
-  --pont-callout-action-space-top: var(--pont-ref-space-2);
-  --pont-callout-action-space-right: var(--pont-ref-space-2);
+  /* LAYOUT */
+  --pont-callout-action-layout-inset-t: calc(var(--pont-ref-space) * 2);
+  --pont-callout-action-layout-inset-r: calc(var(--pont-ref-space) * 2);
+  --pont-callout-action-layout-inset-b: var(--pont-ref-layout-inset-auto);
+  --pont-callout-action-layout-inset-l: var(--pont-ref-layout-inset-auto);
 }
 
 /*
@@ -2495,10 +3088,10 @@
 
 :root {
   /* LAYOUT */
-  --pont-avatar-badge-layout-inset-t: auto;
+  --pont-avatar-badge-layout-inset-t: var(--pont-ref-layout-inset-auto);
   --pont-avatar-badge-layout-inset-r: calc(var(--pont-ref-space) * 0);
   --pont-avatar-badge-layout-inset-b: calc(var(--pont-ref-space) * 0);
-  --pont-avatar-badge-layout-inset-l: auto;
+  --pont-avatar-badge-layout-inset-l: var(--pont-ref-layout-inset-auto);
 
   --pont-avatar-badge-layout-z: 10;
 
@@ -7452,346 +8045,827 @@
     --pont-sem-font-code-letter-spacing
   );
 
-  --pont-typography-code-color-bg: hsl(var(--pont-sem-color-bg-fill-secondary));
+  --pont-typography-code-color-bg: hsl(var(--pont-sem-color-bg-fill-secondary));
+
+  --pont-typography-code-radius: var(--pont-ref-radius-lg);
+}
+
+/*
+ * --------------------------------------------------
+ *  TYPOGRAPHY LEAD
+ * --------------------------------------------------
+ */
+
+:root {
+  --pont-typography-lead-space-mt: var(--pont-sem-space-typography);
+
+  --pont-typography-lead-color-text: hsl(var(--pont-sem-color-text-secondary));
+  --pont-typography-lead-font-family: var(--pont-sem-font-family-default);
+  --pont-typography-lead-font-size: var(--pont-sem-font-size-xl);
+  --pont-typography-lead-font-line-height: var(--pont-sem-font-line-height-xl);
+  --pont-typography-lead-font-weight: var(--pont-sem-font-weight);
+  --pont-typography-lead-font-letter-spacing: var(--pont-sem-font-letter-spacing);
+}
+
+/*
+ * --------------------------------------------------
+ *  TYPOGRAPHY LARGE
+ * --------------------------------------------------
+ */
+
+:root {
+  --pont-typography-large-font-family: var(--pont-sem-font-family-default);
+  --pont-typography-large-font-size: var(--pont-sem-font-size-lg);
+  --pont-typography-large-font-line-height: var(--pont-sem-font-line-height-lg);
+  --pont-typography-large-font-weight: var(--pont-sem-font-weight-lg);
+  --pont-typography-large-font-letter-spacing: var(--pont-sem-font-letter-spacing);
+}
+
+/*
+ * --------------------------------------------------
+ *  TYPOGRAPHY SMALL
+ * --------------------------------------------------
+ */
+
+:root {
+  --pont-typography-small-font-family: var(--pont-sem-font-family-default);
+  --pont-typography-small-font-size: var(--pont-sem-font-size-sm);
+  --pont-typography-small-font-line-height: var(--pont-sem-font-line-height-sm);
+  --pont-typography-small-font-weight: var(--pont-sem-font-weight-sm);
+  --pont-typography-small-font-letter-spacing: var(--pont-sem-font-letter-spacing);
+}
+
+/*
+ * --------------------------------------------------
+ *  TYPOGRAPHY MUTED
+ * --------------------------------------------------
+ */
+
+:root {
+  --pont-typography-muted-color-text: hsl(var(--pont-sem-color-text-secondary));
+  --pont-typography-muted-font-family: var(--pont-sem-font-family-default);
+  --pont-typography-muted-font-size: var(--pont-sem-font-muted-size);
+  --pont-typography-muted-font-line-height: var(--pont-sem-font-muted-line-height);
+  --pont-typography-muted-font-weight: var(--pont-sem-font-muted-weight);
+  --pont-typography-muted-font-letter-spacing: var(--pont-sem-font-letter-spacing);
+  --pont-data-table-font-family: var(--pont-sem-font-family-default);
+
+  --pont-data-table-head-width-border: var(--pont-sem-width-border);
+  --pont-data-table-head-color-border: hsl(var(--pont-sem-color-border));
+  --pont-data-table-head-color-bg: hsl(var(--pont-sem-color-bg-fill-secondary));
+  --pont-data-table-color-text: hsl(var(--pont-sem-color-text));
+  --pont-data-table-head-space-h: var(--pont-ref-space-10);
+  --pont-data-table-body-width-border: var(--pont-sem-width-border);
+  --pont-data-table-body-color-border: hsl(var(--pont-sem-color-border));
+  --pont-data-table-body-color-bg-hover: hsl(
+    var(--pont-sem-color-bg-fill-secondary-hover)
+  );
+  --pont-data-table-body-empty-space-h: calc(var(--pont-ref-space-6) * 4);
+  --pont-data-table-select-items-color-text: hsl(
+    var(--pont-sem-color-text-secondary)
+  );
+  --pont-data-table-select-items-font-size: var(--pont-sem-font-size-sm);
+  --pont-data-table-width-border: var(--pont-sem-width-border);
+  --pont-data-table-color-border: hsl(var(--pont-sem-color-border));
+  --pont-data-table-radius: var(--pont-ref-radius-md);
+  --pont-data-table-body-font-size: var(--pont-sem-font-size-sm);
+  --pont-data-table-head-font-size: var(--pont-sem-font-size-sm);
+}
+
+/* ---- primitive layer: component styles ----------------------------------- */
+
+/*
+ * ===========================================================================
+ *  CALLOUT COMPONENT STYLES
+ *  [previously alert]
+ * ===========================================================================
+ */
+
+/*
+ * --------------------------------------------------
+ *  CALLOUT
+ * --------------------------------------------------
+ */
+
+pont-callout {
+  width: var(--pont-callout-sizing-w);
+  height: var(--pont-callout-sizing-h);
+}
+
+[data-pont-callout] {
+  display: grid;
+  position: relative;
+
+  -moz-column-gap: var(--pont-callout-layout-gap-x);
+
+       column-gap: var(--pont-callout-layout-gap-x);
+  row-gap: var(--pont-callout-layout-gap-y);
+
+  padding-top: var(--pont-callout-spacing-pt);
+  padding-right: var(--pont-callout-spacing-pr);
+  padding-bottom: var(--pont-callout-spacing-pb);
+  padding-left: var(--pont-callout-spacing-pl);
+
+  width: var(--pont-callout-sizing-w);
+  height: var(--pont-callout-sizing-h);
+
+  font-family: var(--pont-callout-typography-font);
+  font-size: var(--pont-callout-typography-size);
+  font-weight: var(--pont-callout-typography-weight);
+  letter-spacing: var(--pont-callout-typography-tracking);
+  line-height: var(--pont-callout-typography-leading);
+
+  text-align: var(--pont-callout-typography-align);
+
+  border-top-left-radius: var(--pont-callout-border-radius-tl);
+  border-top-right-radius: var(--pont-callout-border-radius-tr);
+  border-bottom-left-radius: var(--pont-callout-border-radius-bl);
+  border-bottom-right-radius: var(--pont-callout-border-radius-br);
+}
+
+[data-pont-callout]:has(> :is(svg, pont-spinner)) {
+  grid-template-columns: auto 1fr;
+  -moz-column-gap: var(--pont-callout-layout-gap-x-has-icon);
+       column-gap: var(--pont-callout-layout-gap-x-has-icon);
+  row-gap: var(--pont-callout-layout-gap-y-has-icon);
+}
+
+[data-pont-callout]:has(> pont-callout-action) {
+  padding-top: var(--pont-callout-spacing-pt-has-action);
+  padding-right: var(--pont-callout-spacing-pr-has-action);
+  padding-bottom: var(--pont-callout-spacing-pb-has-action);
+  padding-left: var(--pont-callout-spacing-pl-has-action);
+}
+
+/* * -------- VARIANTS -------- * */
+
+/* * DEFAULT * */
+
+[data-pont-callout][data-variant="default"] {
+  color: var(--pont-callout-default-typography-color);
+
+  background-color: var(--pont-callout-default-bg-color);
+
+  border-style: var(--pont-callout-default-border-style);
+  border-color: var(--pont-callout-default-border-color);
+  border-top-width: var(--pont-callout-default-border-width-t);
+  border-right-width: var(--pont-callout-default-border-width-r);
+  border-bottom-width: var(--pont-callout-default-border-width-b);
+  border-left-width: var(--pont-callout-default-border-width-l);
+}
+
+/* * BRAND * */
+
+[data-pont-callout][data-variant="brand"] {
+  color: var(--pont-callout-brand-typography-color);
+
+  background-color: var(--pont-callout-brand-bg-color);
+
+  border-style: var(--pont-callout-brand-border-style);
+  border-color: var(--pont-callout-brand-border-color);
+  border-top-width: var(--pont-callout-brand-border-width-t);
+  border-right-width: var(--pont-callout-brand-border-width-r);
+  border-bottom-width: var(--pont-callout-brand-border-width-b);
+  border-left-width: var(--pont-callout-brand-border-width-l);
+}
+
+/* * BRAND TONAL * */
+
+[data-pont-callout][data-variant="brand-tonal"] {
+  color: var(--pont-callout-brand-tonal-typography-color);
+
+  background-color: var(--pont-callout-brand-tonal-bg-color);
+
+  border-style: var(--pont-callout-brand-tonal-border-style);
+  border-color: var(--pont-callout-brand-tonal-border-color);
+  border-top-width: var(--pont-callout-brand-tonal-border-width-t);
+  border-right-width: var(--pont-callout-brand-tonal-border-width-r);
+  border-bottom-width: var(--pont-callout-brand-tonal-border-width-b);
+  border-left-width: var(--pont-callout-brand-tonal-border-width-l);
+}
+
+/* * DESTRUCTIVE * */
+
+[data-pont-callout][data-variant="destructive"] {
+  color: var(--pont-callout-destructive-typography-color);
+
+  background-color: var(--pont-callout-destructive-bg-color);
+
+  border-style: var(--pont-callout-destructive-border-style);
+  border-color: var(--pont-callout-destructive-border-color);
+  border-top-width: var(--pont-callout-destructive-border-width-t);
+  border-right-width: var(--pont-callout-destructive-border-width-r);
+  border-bottom-width: var(--pont-callout-destructive-border-width-b);
+  border-left-width: var(--pont-callout-destructive-border-width-l);
+}
+
+/* * DESTRUCTIVE TONAL * */
+
+[data-pont-callout][data-variant="destructive-tonal"] {
+  color: var(--pont-callout-destructive-tonal-typography-color);
+
+  background-color: var(--pont-callout-destructive-tonal-bg-color);
+
+  border-style: var(--pont-callout-destructive-tonal-border-style);
+  border-color: var(--pont-callout-destructive-tonal-border-color);
+  border-top-width: var(--pont-callout-destructive-tonal-border-width-t);
+  border-right-width: var(--pont-callout-destructive-tonal-border-width-r);
+  border-bottom-width: var(--pont-callout-destructive-tonal-border-width-b);
+  border-left-width: var(--pont-callout-destructive-tonal-border-width-l);
+}
+
+/* * WARNING * */
+
+[data-pont-callout][data-variant="warning"] {
+  color: var(--pont-callout-warning-typography-color);
+
+  background-color: var(--pont-callout-warning-bg-color);
+
+  border-style: var(--pont-callout-warning-border-style);
+  border-color: var(--pont-callout-warning-border-color);
+  border-top-width: var(--pont-callout-warning-border-width-t);
+  border-right-width: var(--pont-callout-warning-border-width-r);
+  border-bottom-width: var(--pont-callout-warning-border-width-b);
+  border-left-width: var(--pont-callout-warning-border-width-l);
+}
+
+/* * WARNING TONAL * */
+
+[data-pont-callout][data-variant="warning-tonal"] {
+  color: var(--pont-callout-warning-tonal-typography-color);
+
+  background-color: var(--pont-callout-warning-tonal-bg-color);
+
+  border-style: var(--pont-callout-warning-tonal-border-style);
+  border-color: var(--pont-callout-warning-tonal-border-color);
+  border-top-width: var(--pont-callout-warning-tonal-border-width-t);
+  border-right-width: var(--pont-callout-warning-tonal-border-width-r);
+  border-bottom-width: var(--pont-callout-warning-tonal-border-width-b);
+  border-left-width: var(--pont-callout-warning-tonal-border-width-l);
+}
+
+/* * SUCCESS * */
+
+[data-pont-callout][data-variant="success"] {
+  color: var(--pont-callout-success-typography-color);
+
+  background-color: var(--pont-callout-success-bg-color);
+
+  border-style: var(--pont-callout-success-border-style);
+  border-color: var(--pont-callout-success-border-color);
+  border-top-width: var(--pont-callout-success-border-width-t);
+  border-right-width: var(--pont-callout-success-border-width-r);
+  border-bottom-width: var(--pont-callout-success-border-width-b);
+  border-left-width: var(--pont-callout-success-border-width-l);
+}
+
+/* * SUCCESS TONAL * */
+
+[data-pont-callout][data-variant="success-tonal"] {
+  color: var(--pont-callout-success-tonal-typography-color);
+
+  background-color: var(--pont-callout-success-tonal-bg-color);
+
+  border-style: var(--pont-callout-success-tonal-border-style);
+  border-color: var(--pont-callout-success-tonal-border-color);
+  border-top-width: var(--pont-callout-success-tonal-border-width-t);
+  border-right-width: var(--pont-callout-success-tonal-border-width-r);
+  border-bottom-width: var(--pont-callout-success-tonal-border-width-b);
+  border-left-width: var(--pont-callout-success-tonal-border-width-l);
+}
+
+/* * INFO * */
+
+[data-pont-callout][data-variant="info"] {
+  color: var(--pont-callout-info-typography-color);
+
+  background-color: var(--pont-callout-info-bg-color);
+
+  border-style: var(--pont-callout-info-border-style);
+  border-color: var(--pont-callout-info-border-color);
+  border-top-width: var(--pont-callout-info-border-width-t);
+  border-right-width: var(--pont-callout-info-border-width-r);
+  border-bottom-width: var(--pont-callout-info-border-width-b);
+  border-left-width: var(--pont-callout-info-border-width-l);
+}
+
+/* * INFO TONAL * */
+
+[data-pont-callout][data-variant="info-tonal"] {
+  color: var(--pont-callout-info-tonal-typography-color);
+
+  background-color: var(--pont-callout-info-tonal-bg-color);
+
+  border-style: var(--pont-callout-info-tonal-border-style);
+  border-color: var(--pont-callout-info-tonal-border-color);
+  border-top-width: var(--pont-callout-info-tonal-border-width-t);
+  border-right-width: var(--pont-callout-info-tonal-border-width-r);
+  border-bottom-width: var(--pont-callout-info-tonal-border-width-b);
+  border-left-width: var(--pont-callout-info-tonal-border-width-l);
+}
+
+/*
+ * --------------------------------------------------
+ *  CALLOUT 'ICON'
+ * --------------------------------------------------
+ */
+
+[data-pont-callout] > :is(svg, pont-spinner) {
+  grid-row: span 2 / span 2;
+
+  translate: var(--pont-callout-icon-transform-translate-x)
+    var(--pont-callout-icon-transform-translate-y);
+}
+
+[data-pont-callout] > svg {
+  width: var(--pont-callout-icon-sizing-w);
+  height: var(--pont-callout-icon-sizing-h);
+}
+
+[data-pont-callout] > pont-spinner {
+  --pont-spinner-sizing-w: var(--pont-callout-icon-sizing-w);
+  --pont-spinner-sizing-h: var(--pont-callout-icon-sizing-h);
+}
+
+/* * -------- VARIANTS -------- * */
+
+[data-pont-callout][data-variant="default"] > :is(svg, pont-spinner) {
+  color: var(--pont-callout-default-icon-svg-color);
+}
+
+[data-pont-callout][data-variant="brand"] > :is(svg, pont-spinner) {
+  color: var(--pont-callout-brand-icon-svg-color);
+}
+
+[data-pont-callout][data-variant="brand-tonal"] > :is(svg, pont-spinner) {
+  color: var(--pont-callout-brand-tonal-icon-svg-color);
+}
 
-  --pont-typography-code-radius: var(--pont-ref-radius-lg);
+[data-pont-callout][data-variant="destructive"] > :is(svg, pont-spinner) {
+  color: var(--pont-callout-destructive-icon-svg-color);
 }
 
-/*
- * --------------------------------------------------
- *  TYPOGRAPHY LEAD
- * --------------------------------------------------
- */
+[data-pont-callout][data-variant="destructive-tonal"] > :is(svg, pont-spinner) {
+  color: var(--pont-callout-destructive-tonal-icon-svg-color);
+}
 
-:root {
-  --pont-typography-lead-space-mt: var(--pont-sem-space-typography);
+[data-pont-callout][data-variant="warning"] > :is(svg, pont-spinner) {
+  color: var(--pont-callout-warning-icon-svg-color);
+}
 
-  --pont-typography-lead-color-text: hsl(var(--pont-sem-color-text-secondary));
-  --pont-typography-lead-font-family: var(--pont-sem-font-family-default);
-  --pont-typography-lead-font-size: var(--pont-sem-font-size-xl);
-  --pont-typography-lead-font-line-height: var(--pont-sem-font-line-height-xl);
-  --pont-typography-lead-font-weight: var(--pont-sem-font-weight);
-  --pont-typography-lead-font-letter-spacing: var(--pont-sem-font-letter-spacing);
+[data-pont-callout][data-variant="warning-tonal"] > :is(svg, pont-spinner) {
+  color: var(--pont-callout-warning-tonal-icon-svg-color);
 }
 
-/*
- * --------------------------------------------------
- *  TYPOGRAPHY LARGE
- * --------------------------------------------------
- */
+[data-pont-callout][data-variant="success"] > :is(svg, pont-spinner) {
+  color: var(--pont-callout-success-icon-svg-color);
+}
 
-:root {
-  --pont-typography-large-font-family: var(--pont-sem-font-family-default);
-  --pont-typography-large-font-size: var(--pont-sem-font-size-lg);
-  --pont-typography-large-font-line-height: var(--pont-sem-font-line-height-lg);
-  --pont-typography-large-font-weight: var(--pont-sem-font-weight-lg);
-  --pont-typography-large-font-letter-spacing: var(--pont-sem-font-letter-spacing);
+[data-pont-callout][data-variant="success-tonal"] > :is(svg, pont-spinner) {
+  color: var(--pont-callout-success-tonal-icon-svg-color);
 }
 
-/*
- * --------------------------------------------------
- *  TYPOGRAPHY SMALL
- * --------------------------------------------------
- */
+[data-pont-callout][data-variant="info"] > :is(svg, pont-spinner) {
+  color: var(--pont-callout-info-icon-svg-color);
+}
 
-:root {
-  --pont-typography-small-font-family: var(--pont-sem-font-family-default);
-  --pont-typography-small-font-size: var(--pont-sem-font-size-sm);
-  --pont-typography-small-font-line-height: var(--pont-sem-font-line-height-sm);
-  --pont-typography-small-font-weight: var(--pont-sem-font-weight-sm);
-  --pont-typography-small-font-letter-spacing: var(--pont-sem-font-letter-spacing);
+[data-pont-callout][data-variant="info-tonal"] > :is(svg, pont-spinner) {
+  color: var(--pont-callout-info-tonal-icon-svg-color);
 }
 
 /*
  * --------------------------------------------------
- *  TYPOGRAPHY MUTED
+ *  CALLOUT TITLE
  * --------------------------------------------------
  */
 
-:root {
-  --pont-typography-muted-color-text: hsl(var(--pont-sem-color-text-secondary));
-  --pont-typography-muted-font-family: var(--pont-sem-font-family-default);
-  --pont-typography-muted-font-size: var(--pont-sem-font-muted-size);
-  --pont-typography-muted-font-line-height: var(--pont-sem-font-muted-line-height);
-  --pont-typography-muted-font-weight: var(--pont-sem-font-muted-weight);
-  --pont-typography-muted-font-letter-spacing: var(--pont-sem-font-letter-spacing);
-  --pont-data-table-font-family: var(--pont-sem-font-family-default);
+[data-pont-callout-title] {
+  font-family: var(--pont-callout-title-typography-font);
+  font-size: var(--pont-callout-title-typography-size);
+  font-weight: var(--pont-callout-title-typography-weight);
+  letter-spacing: var(--pont-callout-title-typography-tracking);
+  line-height: var(--pont-callout-title-typography-leading);
+}
 
-  --pont-data-table-head-width-border: var(--pont-sem-width-border);
-  --pont-data-table-head-color-border: hsl(var(--pont-sem-color-border));
-  --pont-data-table-head-color-bg: hsl(var(--pont-sem-color-bg-fill-secondary));
-  --pont-data-table-color-text: hsl(var(--pont-sem-color-text));
-  --pont-data-table-head-space-h: var(--pont-ref-space-10);
-  --pont-data-table-body-width-border: var(--pont-sem-width-border);
-  --pont-data-table-body-color-border: hsl(var(--pont-sem-color-border));
-  --pont-data-table-body-color-bg-hover: hsl(
-    var(--pont-sem-color-bg-fill-secondary-hover)
-  );
-  --pont-data-table-body-empty-space-h: calc(var(--pont-ref-space-6) * 4);
-  --pont-data-table-select-items-color-text: hsl(
-    var(--pont-sem-color-text-secondary)
-  );
-  --pont-data-table-select-items-font-size: var(--pont-sem-font-size-sm);
-  --pont-data-table-width-border: var(--pont-sem-width-border);
-  --pont-data-table-color-border: hsl(var(--pont-sem-color-border));
-  --pont-data-table-radius: var(--pont-ref-radius-md);
-  --pont-data-table-body-font-size: var(--pont-sem-font-size-sm);
-  --pont-data-table-head-font-size: var(--pont-sem-font-size-sm);
+[data-pont-callout]:has(> :is(svg, pont-spinner)) pont-callout-title {
+  grid-column-start: 2;
 }
 
-/* ---- primitive layer: component styles ----------------------------------- */
+/* * -------- VARIANTS -------- * */
 
-/*
- * ===========================================================================
- *  ALERT COMPONENT STYLES
- * ===========================================================================
- */
+[data-pont-callout][data-variant="default"] [data-pont-callout-title] {
+  color: var(--pont-callout-default-title-typography-color);
+}
 
-/*
- * --------------------------------------------------
- *  ALERT
- * --------------------------------------------------
- */
+[data-pont-callout][data-variant="brand"] [data-pont-callout-title] {
+  color: var(--pont-callout-brand-title-typography-color);
+}
 
-pont-callout {
-  width: 100%;
+[data-pont-callout][data-variant="brand-tonal"] [data-pont-callout-title] {
+  color: var(--pont-callout-brand-tonal-title-typography-color);
 }
 
-pont-callout > [data-slot='alert'] {
-  display: grid;
+[data-pont-callout][data-variant="destructive"] [data-pont-callout-title] {
+  color: var(--pont-callout-destructive-title-typography-color);
+}
 
-  gap: var(--pont-callout-space-gap);
-  padding: var(--pont-callout-space-py) var(--pont-callout-space-px);
+[data-pont-callout][data-variant="destructive-tonal"]
+  [data-pont-callout-title] {
+  color: var(--pont-callout-destructive-tonal-title-typography-color);
+}
 
-  width: 100%;
+[data-pont-callout][data-variant="warning"] [data-pont-callout-title] {
+  color: var(--pont-callout-warning-title-typography-color);
+}
 
-  font-family: var(--pont-callout-font-family);
-  font-size: var(--pont-callout-font-size);
-  line-height: var(--pont-callout-font-line-height);
-  text-align: left;
+[data-pont-callout][data-variant="warning-tonal"] [data-pont-callout-title] {
+  color: var(--pont-callout-warning-tonal-title-typography-color);
+}
 
-  background-color: var(--pont-callout-color-bg);
+[data-pont-callout][data-variant="success"] [data-pont-callout-title] {
+  color: var(--pont-callout-success-title-typography-color);
+}
 
-  border: var(--pont-callout-width-border) solid var(--pont-callout-color-border);
-  border-radius: var(--pont-callout-radius);
+[data-pont-callout][data-variant="success-tonal"] [data-pont-callout-title] {
+  color: var(--pont-callout-success-tonal-title-typography-color);
 }
 
-pont-callout > [data-slot='alert']:has(> svg) {
-  grid-template-columns: auto 1fr;
-  -moz-column-gap: var(--pont-callout-space-gap-x-has-icon);
-       column-gap: var(--pont-callout-space-gap-x-has-icon);
+[data-pont-callout][data-variant="info"] [data-pont-callout-title] {
+  color: var(--pont-callout-info-title-typography-color);
 }
 
-pont-callout > [data-slot='alert']:has(> pont-callout-action) {
-  position: relative;
-  padding-right: var(--pont-callout-space-pr-has-action);
+[data-pont-callout][data-variant="info-tonal"] [data-pont-callout-title] {
+  color: var(--pont-callout-info-tonal-title-typography-color);
+}
+
+/* * -------- CALLOUT TITLE > LINK -------- * */
+
+[data-pont-callout-title] a {
+  text-decoration-line: var(
+    --pont-callout-title-link-typography-decoration-line
+  );
+  text-decoration-color: var(
+    --pont-callout-title-link-typography-decoration-color
+  );
+  text-decoration-style: var(
+    --pont-callout-title-link-typography-decoration-style
+  );
+  text-decoration-thickness: var(
+    --pont-callout-title-link-typography-decoration-thickness
+  );
+  text-underline-offset: var(
+    --pont-callout-title-link-typography-underline-offset
+  );
 }
 
 /* * VARIANTS * */
 
-pont-callout > [data-slot='alert'][data-variant='default'] {
-  color: var(--pont-callout-default-color-text);
-  background-color: var(--pont-callout-default-color-bg);
-  border-color: var(--pont-callout-default-color-border);
+[data-pont-callout][data-variant="default"] [data-pont-callout-title] a {
+  color: var(--pont-callout-default-title-link-typography-color);
+}
+
+[data-pont-callout][data-variant="default"] [data-pont-callout-title] a:hover {
+  color: var(--pont-callout-default-title-link-typography-color-hover);
 }
 
-/* BRAND & BRAND TONAL */
+[data-pont-callout][data-variant="brand"] [data-pont-callout-title] a {
+  color: var(--pont-callout-brand-title-link-typography-color);
+}
 
-pont-callout > [data-slot='alert'][data-variant^='brand'] {
-  color: var(--pont-callout-brand-color-text);
-  background-color: var(--pont-callout-brand-color-bg);
-  border-color: var(--pont-callout-brand-color-border);
+[data-pont-callout][data-variant="brand"] [data-pont-callout-title] a:hover {
+  color: var(--pont-callout-brand-title-link-typography-color-hover);
 }
 
-pont-callout > [data-slot='alert'][data-variant='brand-tonal'] {
-  background-color: var(--pont-callout-brand-tonal-color-bg);
-  border-color: var(--pont-callout-brand-tonal-color-border);
+[data-pont-callout][data-variant="brand-tonal"] [data-pont-callout-title] a {
+  color: var(--pont-callout-brand-tonal-title-link-typography-color);
 }
 
-/* DESTRUCTIVE & DESTRUCTIVE TONAL */
+[data-pont-callout][data-variant="brand-tonal"]
+  [data-pont-callout-title]
+  a:hover {
+  color: var(--pont-callout-brand-tonal-title-link-typography-color-hover);
+}
 
-pont-callout > [data-slot='alert'][data-variant^='destructive'] {
-  color: var(--pont-callout-destructive-color-text);
-  background-color: var(--pont-callout-destructive-color-bg);
-  border-color: var(--pont-callout-destructive-color-border);
+[data-pont-callout][data-variant="destructive"] [data-pont-callout-title] a {
+  color: var(--pont-callout-destructive-title-link-typography-color);
 }
 
-pont-callout > [data-slot='alert'][data-variant='destructive-tonal'] {
-  background-color: var(--pont-callout-destructive-tonal-color-bg);
-  border-color: var(--pont-callout-destructive-tonal-color-border);
+[data-pont-callout][data-variant="destructive"]
+  [data-pont-callout-title]
+  a:hover {
+  color: var(--pont-callout-destructive-title-link-typography-color-hover);
 }
 
-/* WARNING & WARNING TONAL */
+[data-pont-callout][data-variant="destructive-tonal"]
+  [data-pont-callout-title]
+  a {
+  color: var(--pont-callout-destructive-tonal-title-link-typography-color);
+}
 
-pont-callout > [data-slot='alert'][data-variant^='warning'] {
-  color: var(--pont-callout-warning-color-text);
-  background-color: var(--pont-callout-warning-color-bg);
-  border-color: var(--pont-callout-warning-color-border);
+[data-pont-callout][data-variant="destructive-tonal"]
+  [data-pont-callout-title]
+  a:hover {
+  color: var(
+    --pont-callout-destructive-tonal-title-link-typography-color-hover
+  );
 }
 
-pont-callout > [data-slot='alert'][data-variant='warning-tonal'] {
-  background-color: var(--pont-callout-warning-tonal-color-bg);
-  border-color: var(--pont-callout-warning-tonal-color-border);
+[data-pont-callout][data-variant="warning"] [data-pont-callout-title] a {
+  color: var(--pont-callout-warning-title-link-typography-color);
 }
 
-/* SUCCESS & SUCCESS TONAL */
+[data-pont-callout][data-variant="warning"] [data-pont-callout-title] a:hover {
+  color: var(--pont-callout-warning-title-link-typography-color-hover);
+}
 
-pont-callout > [data-slot='alert'][data-variant^='success'] {
-  color: var(--pont-callout-success-color-text);
-  background-color: var(--pont-callout-success-color-bg);
-  border-color: var(--pont-callout-success-color-border);
+[data-pont-callout][data-variant="warning-tonal"] [data-pont-callout-title] a {
+  color: var(--pont-callout-warning-tonal-title-link-typography-color);
 }
 
-pont-callout > [data-slot='alert'][data-variant='success-tonal'] {
-  background-color: var(--pont-callout-success-tonal-color-bg);
-  border-color: var(--pont-callout-success-tonal-color-border);
+[data-pont-callout][data-variant="warning-tonal"]
+  [data-pont-callout-title]
+  a:hover {
+  color: var(--pont-callout-warning-tonal-title-link-typography-color-hover);
 }
 
-/* INFO & INFO TONAL */
+[data-pont-callout][data-variant="success"] [data-pont-callout-title] a {
+  color: var(--pont-callout-success-title-link-typography-color);
+}
 
-pont-callout > [data-slot='alert'][data-variant^='info'] {
-  color: var(--pont-callout-info-color-text);
-  background-color: var(--pont-callout-info-color-bg);
-  border-color: var(--pont-callout-info-color-border);
+[data-pont-callout][data-variant="success"] [data-pont-callout-title] a:hover {
+  color: var(--pont-callout-success-title-link-typography-color-hover);
 }
 
-pont-callout > [data-slot='alert'][data-variant='info-tonal'] {
-  background-color: var(--pont-callout-info-tonal-color-bg);
-  border-color: var(--pont-callout-info-tonal-color-border);
+[data-pont-callout][data-variant="success-tonal"] [data-pont-callout-title] a {
+  color: var(--pont-callout-success-tonal-title-link-typography-color);
 }
 
-/* * ICON CHILD * */
+[data-pont-callout][data-variant="success-tonal"]
+  [data-pont-callout-title]
+  a:hover {
+  color: var(--pont-callout-success-tonal-title-link-typography-color-hover);
+}
 
-pont-callout > [data-slot='alert'] svg {
-  grid-row: span 2 / span 2;
+[data-pont-callout][data-variant="info"] [data-pont-callout-title] a {
+  color: var(--pont-callout-info-title-link-typography-color);
+}
 
-  width: var(--pont-callout-icon-space-size);
-  height: var(--pont-callout-icon-space-size);
+[data-pont-callout][data-variant="info"] [data-pont-callout-title] a:hover {
+  color: var(--pont-callout-info-title-link-typography-color-hover);
+}
 
-  color: currentColor;
+[data-pont-callout][data-variant="info-tonal"] [data-pont-callout-title] a {
+  color: var(--pont-callout-info-tonal-title-link-typography-color);
+}
 
-  translate: 0 var(--pont-callout-icon-space-translate-y);
+[data-pont-callout][data-variant="info-tonal"]
+  [data-pont-callout-title]
+  a:hover {
+  color: var(--pont-callout-info-tonal-title-link-typography-color-hover);
 }
 
 /*
  * --------------------------------------------------
- *  ALERT TITLE
+ *  CALLOUT DESCRIPTION
  * --------------------------------------------------
  */
 
-pont-callout-title > [data-slot='alert-title'] {
-  font-weight: var(--pont-callout-title-font-weight);
-  font-size: var(--pont-callout-title-font-size);
+[data-pont-callout-description] {
+  font-family: var(--pont-callout-description-typography-font);
+  font-size: var(--pont-callout-description-typography-size);
+  font-weight: var(--pont-callout-description-typography-weight);
+  letter-spacing: var(--pont-callout-description-typography-tracking);
+  line-height: var(--pont-callout-description-typography-leading);
+
+  text-wrap: var(--pont-callout-description-typography-wrap);
 }
 
-pont-callout
-  > [data-slot='alert']:has(> svg)
-  > pont-callout-title
-  > [data-slot='alert-title'] {
-  grid-column-start: 2;
+[data-pont-callout-description] p:not(:last-child) {
+  margin-bottom: var(--pont-callout-description-typography-p-spacing);
 }
 
-/* * LINK CHILD * */
+/* * -------- VARIANTS -------- * */
 
-pont-callout-title > [data-slot='alert-title'] a {
-  text-decoration-line: underline;
-  text-underline-offset: 3px;
+[data-pont-callout][data-variant="default"] [data-pont-callout-description] {
+  color: var(--pont-callout-default-description-typography-color);
 }
 
-pont-callout-title > [data-slot='alert-title'] a:hover {
-  color: var(--pont-callout-title-color-link-hover);
+[data-pont-callout][data-variant="brand"] [data-pont-callout-description] {
+  color: var(--pont-callout-brand-description-typography-color);
 }
 
-/*
- * --------------------------------------------------
- *  ALERT DESCRIPTION
- * --------------------------------------------------
- */
+[data-pont-callout][data-variant="brand-tonal"]
+  [data-pont-callout-description] {
+  color: var(
+    --pont-callout-destrubrandctive-tonal-description-typography-color
+  );
+}
 
-pont-callout-description > [data-slot='alert-description'] {
-  font-size: var(--pont-callout-description-font-size);
-  line-height: var(--pont-callout-description-font-line-height);
-  font-weight: var(--pont-callout-description-font-weight);
-  text-wrap: balance;
+[data-pont-callout][data-variant="destructive"]
+  [data-pont-callout-description] {
+  color: var(--pont-callout-destructive-description-typography-color);
 }
 
-@media (width >= 48rem) {
-  pont-callout-description > [data-slot='alert-description'] {
-    text-wrap: pretty;
-  }
+[data-pont-callout][data-variant="destructive-tonal"]
+  [data-pont-callout-description] {
+  color: var(--pont-callout-destructive-tonal-description-typography-color);
+}
+
+[data-pont-callout][data-variant="warning"] [data-pont-callout-description] {
+  color: var(--pont-callout-warning-description-typography-color);
+}
+
+[data-pont-callout][data-variant="warning-tonal"]
+  [data-pont-callout-description] {
+  color: var(--pont-callout-warning-tonal-description-typography-color);
+}
+
+[data-pont-callout][data-variant="success"] [data-pont-callout-description] {
+  color: var(--pont-callout-success-description-typography-color);
+}
+
+[data-pont-callout][data-variant="success-tonal"]
+  [data-pont-callout-description] {
+  color: var(--pont-callout-success-tonal-description-typography-color);
+}
+
+[data-pont-callout][data-variant="info"] [data-pont-callout-description] {
+  color: var(--pont-callout-info-description-typography-color);
+}
+
+[data-pont-callout][data-variant="info-tonal"] [data-pont-callout-description] {
+  color: var(--pont-callout-info-tonal-description-typography-color);
+}
+
+/* * -------- CALLOUT DESCRIPTION > LINK -------- * */
+
+[data-pont-callout-description] a {
+  text-decoration-line: var(
+    --pont-callout-description-link-typography-decoration-line
+  );
+  text-decoration-color: var(
+    --pont-callout-description-link-typography-decoration-color
+  );
+  text-decoration-style: var(
+    --pont-callout-description-link-typography-decoration-style
+  );
+  text-decoration-thickness: var(
+    --pont-callout-description-link-typography-decoration-thickness
+  );
+  text-underline-offset: var(
+    --pont-callout-description-link-typography-underline-offset
+  );
 }
 
 /* * VARIANTS * */
 
-pont-callout
-  > [data-slot='alert'][data-variant='default']
-  > pont-callout-description
-  > [data-slot='alert-description'] {
-  color: var(--pont-callout-description-default-color-text);
+[data-pont-callout][data-variant="default"] [data-pont-callout-description] a {
+  color: var(--pont-callout-default-description-link-typography-color);
 }
 
-pont-callout
-  > [data-slot='alert'][data-variant^='brand']
-  > pont-callout-description
-  > [data-slot='alert-description'] {
-  color: var(--pont-callout-brand-default-color-text);
+[data-pont-callout][data-variant="default"]
+  [data-pont-callout-description]
+  a:hover {
+  color: var(--pont-callout-default-description-link-typography-color-hover);
 }
 
-pont-callout
-  > [data-slot='alert'][data-variant^='destructive']
-  > pont-callout-description
-  > [data-slot='alert-description'] {
-  color: var(--pont-callout-destructive-default-color-text);
+[data-pont-callout][data-variant="brand"] [data-pont-callout-description] a {
+  color: var(--pont-callout-brand-description-link-typography-color);
 }
 
-pont-callout
-  > [data-slot='alert'][data-variant^='warning']
-  > pont-callout-description
-  > [data-slot='alert-description'] {
-  color: var(--pont-callout-warning-default-color-text);
+[data-pont-callout][data-variant="brand"]
+  [data-pont-callout-description]
+  a:hover {
+  color: var(--pont-callout-brand-description-link-typography-color-hover);
 }
 
-pont-callout
-  > [data-slot='alert'][data-variant^='success']
-  > pont-callout-description
-  > [data-slot='alert-description'] {
-  color: var(--pont-callout-success-default-color-text);
+[data-pont-callout][data-variant="brand-tonal"]
+  [data-pont-callout-description]
+  a {
+  color: var(--pont-callout-brand-tonal-description-link-typography-color);
 }
 
-pont-callout
-  > [data-slot='alert'][data-variant^='info']
-  > pont-callout-description
-  > [data-slot='alert-description'] {
-  color: var(--pont-callout-info-default-color-text);
+[data-pont-callout][data-variant="brand-tonal"]
+  [data-pont-callout-description]
+  a:hover {
+  color: var(
+    --pont-callout-brand-tonal-description-link-typography-color-hover
+  );
 }
 
-/* * LINK CHILD * */
+[data-pont-callout][data-variant="destructive"]
+  [data-pont-callout-description]
+  a {
+  color: var(--pont-callout-destructive-description-link-typography-color);
+}
 
-pont-callout-description > [data-slot='alert-description'] a {
-  text-decoration-line: underline;
-  text-underline-offset: 3px;
+[data-pont-callout][data-variant="destructive"]
+  [data-pont-callout-description]
+  a:hover {
+  color: var(
+    --pont-callout-destructive-description-link-typography-color-hover
+  );
+}
+
+[data-pont-callout][data-variant="destructive-tonal"]
+  [data-pont-callout-description]
+  a {
+  color: var(
+    --pont-callout-destructive-tonal-description-link-typography-color
+  );
+}
+
+[data-pont-callout][data-variant="destructive-tonal"]
+  [data-pont-callout-description]
+  a:hover {
+  color: var(
+    --pont-callout-destructive-tonal-description-link-typography-color-hover
+  );
+}
+
+[data-pont-callout][data-variant="warning"] [data-pont-callout-description] a {
+  color: var(--pont-callout-warning-description-link-typography-color);
+}
+
+[data-pont-callout][data-variant="warning"]
+  [data-pont-callout-description]
+  a:hover {
+  color: var(--pont-callout-warning-description-link-typography-color-hover);
+}
+
+[data-pont-callout][data-variant="warning-tonal"]
+  [data-pont-callout-description]
+  a {
+  color: var(--pont-callout-warning-tonal-description-link-typography-color);
 }
 
-pont-callout-description > [data-slot='alert-description'] a:hover {
-  color: var(--pont-callout-description-color-link-hover);
+[data-pont-callout][data-variant="warning-tonal"]
+  [data-pont-callout-description]
+  a:hover {
+  color: var(
+    --pont-callout-warning-tonal-description-link-typography-color-hover
+  );
+}
+
+[data-pont-callout][data-variant="success"] [data-pont-callout-description] a {
+  color: var(--pont-callout-success-description-link-typography-color);
+}
+
+[data-pont-callout][data-variant="success"]
+  [data-pont-callout-description]
+  a:hover {
+  color: var(--pont-callout-success-description-link-typography-color-hover);
+}
+
+[data-pont-callout][data-variant="success-tonal"]
+  [data-pont-callout-description]
+  a {
+  color: var(--pont-callout-success-tonal-description-link-typography-color);
+}
+
+[data-pont-callout][data-variant="success-tonal"]
+  [data-pont-callout-description]
+  a:hover {
+  color: var(
+    --pont-callout-success-tonal-description-link-typography-color-hover
+  );
+}
+
+[data-pont-callout][data-variant="info"] [data-pont-callout-description] a {
+  color: var(--pont-callout-info-description-link-typography-color);
 }
 
-/* * PARAGRAPH CHILD * */
+[data-pont-callout][data-variant="info"]
+  [data-pont-callout-description]
+  a:hover {
+  color: var(--pont-callout-info-description-link-typography-color-hover);
+}
+
+[data-pont-callout][data-variant="info-tonal"]
+  [data-pont-callout-description]
+  a {
+  color: var(--pont-callout-info-tonal-description-link-typography-color);
+}
 
-pont-callout-description > [data-slot='alert-description'] p:not(:last-child) {
-  margin-bottom: var(--pont-callout-description-p-space-mb);
+[data-pont-callout][data-variant="info-tonal"]
+  [data-pont-callout-description]
+  a:hover {
+  color: var(--pont-callout-info-tonal-description-link-typography-color-hover);
 }
 
 /*
  * --------------------------------------------------
- *  ALERT ACTION
+ *  CALLOUT ACTION
  * --------------------------------------------------
  */
 
 pont-callout-action {
   position: absolute;
-  top: var(--pont-callout-action-space-top);
-  right: var(--pont-callout-action-space-right);
+
+  top: var(--pont-callout-action-layout-inset-t);
+  right: var(--pont-callout-action-layout-inset-r);
+  bottom: var(--pont-callout-action-layout-inset-b);
+  left: var(--pont-callout-action-layout-inset-l);
 }
 
 /*
@@ -13061,62 +14135,6 @@ DIVIDER
   --pont-multi-select-input-item-space-px: var(--pont-ref-space-4);
 }
 
-/*
- * ============================================================
- *  HELPERS: Some of these styles are future UI Kit fixes.
- * ============================================================
- */
-
-/*
- * ----------------------------------------
- *  TOKENS
- * ----------------------------------------
- */
-
-:root {
-  --pont-sem-color-role-base: var(--pont-ref-color-base-900);
-  --pont-sem-color-role-on-base: var(--pont-ref-color-base-50);
-
-  --pont-sem-color-bg-surface-base: var(--pont-sem-color-role-base) /
-    var(--pont-sem-opacity-surface);
-  --pont-sem-color-border-base-secondary: var(--pont-sem-color-role-base) /
-    var(--pont-sem-opacity-border-secondary);
-}
-
-[data-theme="dark"] {
-  --pont-sem-color-role-base: var(--pont-ref-color-base-200);
-  --pont-sem-color-role-on-base: var(--pont-ref-color-base-900);
-}
-
-/*
- * ----------------------------------------
- *  ALERT
- * ----------------------------------------
- */
-
-/* * TOKENS * */
-
-:root {
-  --pont-callout-default-tonal-color-bg: hsl(var(--pont-sem-color-bg-surface-base));
-  --pont-callout-default-tonal-color-border: hsl(
-    var(--pont-sem-color-border-base-secondary)
-  );
-}
-
-pont-callout {
-  display: block;
-}
-
-/*
- * ----------------------------------------
- *  FIELD
- * ----------------------------------------
- */
-
-pont-field {
-  display: block;
-}
-
 /*
  * ============================================================
  *  BUTTON
@@ -13553,43 +14571,60 @@ pont-alert {
   width: 100%;
 }
 
+pont-alert > [part="alert"] {
+  display: block;
+}
+
 /* * DEFAULT (BASE) TONAL * */
 
 pont-alert
   > [part="alert"][data-variant="tonal"]:has(> [data-variant="default"]) {
-  --pont-callout-color-bg: var(--pont-callout-default-tonal-color-bg);
-  --pont-callout-color-border: var(--pont-callout-default-tonal-color-border);
+  --pont-callout-default-bg-color: hsl(var(--pont-sem-color-bg-surface-base));
+  --pont-callout-default-border-color: hsl(
+    var(--pont-sem-color-border-base-secondary)
+  );
 }
 
 /* * OUTLINE VARIANT * */
 
 pont-alert
   > [part="alert"][data-variant="outline"]:has(> [data-variant="default"]) {
-  --pont-callout-color-border: var(--pont-callout-default-tonal-color-border);
+  --pont-callout-default-border-color: hsl(
+    var(--pont-sem-color-border-base-secondary)
+  );
 }
 
 pont-alert
   > [part="alert"][data-variant="outline"]:has(> [data-variant="brand"]) {
-  --pont-callout-color-border: var(--pont-callout-brand-tonal-color-border);
+  --pont-callout-brand-border-color: var(
+    --pont-callout-brand-tonal-border-color
+  );
 }
 
 pont-alert
   > [part="alert"][data-variant="outline"]:has(> [data-variant="destructive"]) {
-  --pont-callout-color-border: var(--pont-callout-destructive-tonal-color-border);
+  --pont-callout-destructive-border-color: var(
+    --pont-callout-destructive-tonal-border-color
+  );
 }
 
 pont-alert
   > [part="alert"][data-variant="outline"]:has(> [data-variant="warning"]) {
-  --pont-callout-color-border: var(--pont-callout-warning-tonal-color-border);
+  --pont-callout-warning-border-color: var(
+    --pont-callout-warning-tonal-border-color
+  );
 }
 
 pont-alert
   > [part="alert"][data-variant="outline"]:has(> [data-variant="success"]) {
-  --pont-callout-color-border: var(--pont-callout-success-tonal-color-border);
+  --pont-callout-success-border-color: var(
+    --pont-callout-success-tonal-border-color
+  );
 }
 
-pont-alert > [part="alert"][data-variant="outline"]:has(> [data-variant="info"]) {
-  --pont-callout-color-border: var(--pont-callout-info-tonal-color-border);
+pont-alert
+  > [part="alert"][data-variant="outline"]:has(> [data-variant="info"]) {
+  --pont-callout-info-border-color: var(--pont-callout-info-tonal-border-color);
 }
 
 pont-countdown {