@pontive/pontkit-core 1.8.0 → 1.9.0

package/dist/styles.css

@@ -315,6 +315,17 @@
  */
 
 :root {
+  /* * TRANSITION PROPERTY * */
+  --pont-ref-motion-property-all: all;
+  --pont-ref-motion-property-colors:
+    color, background-color, border-color, outline-color, text-decoration-color,
+    fill, stroke;
+  --pont-ref-motion-property-opacity: opacity;
+  --pont-ref-motion-property-shadow: box-shadow;
+  --pont-ref-motion-property-transform: transform, translate, scale, rotate;
+  --pont-ref-motion-property-none: none;
+
+  /* * TRANSITION DURATION * */
   --pont-ref-motion-duration-0: 0ms;
   --pont-ref-motion-duration-50: 50ms;
   --pont-ref-motion-duration-100: 100ms;
@@ -336,8 +347,9 @@
   --pont-ref-motion-duration-4000: 4000ms;
   --pont-ref-motion-duration-5000: 5000ms;
 
+  /* * TRANSITION TIMING FUNCTION * */
   --pont-ref-motion-fn-linear: cubic-bezier(0, 0, 1, 1);
-  
+
   --pont-ref-motion-fn-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
   --pont-ref-motion-fn-ease-in: cubic-bezier(0.42, 0, 1, 1);
   --pont-ref-motion-fn-ease-out: cubic-bezier(0, 0, 0.58, 1);
@@ -550,8 +562,14 @@
   --pont-ref-border-style-dashed: dashed;
   --pont-ref-border-style-dotted: dotted;
   --pont-ref-border-style-double: double;
-  --pont-ref-border-style-hidden: hidden;
   --pont-ref-border-style-none: none;
+
+  /* * OUTLINE STYLE * */
+  --pont-ref-border-outline-style-solid: solid;
+  --pont-ref-border-outline-style-dashed: dashed;
+  --pont-ref-border-outline-style-dotted: dotted;
+  --pont-ref-border-outline-style-double: double;
+  --pont-ref-border-outline-style-none: none;
 }
 
 /*
@@ -617,6 +635,63 @@
   --pont-ref-layout-aspect-video: 16 / 9;
 }
 
+/*
+ * ===========================================================================
+ *  SIZING REFERENCE TOKENS
+ *  pont-ref-sizing-*
+ * ===========================================================================
+ */
+
+:root {
+  /* * WIDTH * */
+  --pont-ref-sizing-w-auto: auto;
+  --pont-ref-sizing-w-full: 100%;
+  --pont-ref-sizing-w-screen: 100vw;
+  --pont-ref-sizing-w-dvw: 100dvw;
+  --pont-ref-sizing-w-dvh: 100dvh;
+  --pont-ref-sizing-w-lvw: 100lvw;
+  --pont-ref-sizing-w-lvh: 100lvh;
+  --pont-ref-sizing-w-svw: 100svw;
+  --pont-ref-sizing-w-svh: 100svh;
+  --pont-ref-sizing-w-min: min-content;
+  --pont-ref-sizing-w-max: max-content;
+  --pont-ref-sizing-w-fit: fit-content;
+}
+
+/*
+ * ===========================================================================
+ *  TYPOGRAPHY REFERENCE TOKENS
+ *  pont-ref-typography-*
+ * ===========================================================================
+ */
+
+:root {
+  /* * TEXT DECORATION LINE * */
+  --pont-ref-typography-decoration-line-underline: underline;
+  --pont-ref-typography-decoration-line-overline: overline;
+  --pont-ref-typography-decoration-line-line-through: line-through;
+  --pont-ref-typography-decoration-line-none: none;
+
+  /* * TEXT DECORATION COLOR * */
+  --pont-ref-typography-decoration-color-inherit: inherit;
+  --pont-ref-typography-decoration-color-current: currentColor;
+  --pont-ref-typography-decoration-color-transparent: transparent;
+
+  /* * TEXT DECORATION STYLE * */
+  --pont-ref-typography-decoration-style-solid: solid;
+  --pont-ref-typography-decoration-style-double: double;
+  --pont-ref-typography-decoration-style-dotted: dotted;
+  --pont-ref-typography-decoration-style-dashed: dashed;
+  --pont-ref-typography-decoration-style-wavy: wavy;
+
+  /* * TEXT DECORATION THICKNESS * */
+  --pont-ref-typography-decoration-thickness-auto: auto;
+  --pont-ref-typography-decoration-thickness-from-font: from-font;
+
+  /* * TEXT UNDERLINE OFFSET * */
+  --pont-ref-typography-underline-offset-auto: auto;
+}
+
 /*
  * ===========================================================================
  *  SEMANTIC TOKENS INDEX
@@ -2001,6 +2076,32 @@
   --pont-sem-width-outline-focus: var(--pont-ref-width-1);
 }
 
+/*
+ * ===========================================================================
+ *  TYPOGRAPHY SEMANTIC TOKENS
+ *  pont-sem-typography-*
+ * ===========================================================================
+ */
+
+:root {
+  /* * TEXT DECORATION / UNDERLINE * */
+  --pont-sem-typography-decoration-line-default: var(
+    --pont-ref-typography-decoration-line-none
+  );
+  --pont-sem-typography-decoration-color-default: var(
+    --pont-ref-typography-decoration-color-current
+  );
+  --pont-sem-typography-decoration-style-default: var(
+    --pont-ref-typography-decoration-style-solid
+  );
+  --pont-sem-typography-decoration-thickness-default: var(
+    --pont-ref-typography-decoration-thickness-auto
+  );
+  --pont-sem-typography-underline-offset-default: var(
+    --pont-ref-typography-underline-offset-auto
+  );
+}
+
 /*
  * ===========================================================================
  *  COMPONENT TOKENS INDEX
@@ -2557,100 +2658,1357 @@
 
 /*
  * --------------------------------------------------
- *  COMMON TOKENS
+ *  COMMON
  * --------------------------------------------------
  */
 
 :root {
-  --pont-badge-font-family: var(--pont-sem-font-family-default);
+  /* LAYOUT */
+  --pont-badge-layout-gap-x: calc(var(--pont-ref-space) * 1);
+  --pont-badge-layout-gap-y: calc(var(--pont-ref-space) * 1);
 
-  --pont-badge-space-gap: var(--pont-sem-space-indicator-gap);
-  --pont-badge-space-px: var(--pont-sem-space-indicator-px);
-  --pont-badge-space-px-has-icon: var(--pont-sem-space-indicator-px-has-icon);
-  --pont-badge-space-py: var(--pont-sem-space-indicator-py);
+  /* SPACING */
+  --pont-badge-spacing-pt: calc(var(--pont-ref-space) * 0.5);
+  --pont-badge-spacing-pr: calc(var(--pont-ref-space) * 2);
+  --pont-badge-spacing-pb: calc(var(--pont-ref-space) * 0.5);
+  --pont-badge-spacing-pl: calc(var(--pont-ref-space) * 2);
 
-  --pont-badge-radius: var(--pont-sem-radius-indicator);
-  --pont-badge-width-border: var(--pont-sem-width-border);
-  --pont-badge-color-border: hsl(var(--pont-sem-color-border-transparent));
+  --pont-badge-spacing-pt-has-icon-start: calc(var(--pont-ref-space) * 0.5);
+  --pont-badge-spacing-pr-has-icon-start: calc(var(--pont-ref-space) * 2);
+  --pont-badge-spacing-pb-has-icon-start: calc(var(--pont-ref-space) * 0.5);
+  --pont-badge-spacing-pl-has-icon-start: calc(var(--pont-ref-space) * 1.5);
 
-  --pont-badge-font-size: var(--pont-sem-font-indicator-size);
-  --pont-badge-font-line-height: var(--pont-sem-font-indicator-line-height);
-  --pont-badge-font-weight: var(--pont-sem-font-indicator-weight);
+  --pont-badge-spacing-pt-has-icon-end: calc(var(--pont-ref-space) * 0.5);
+  --pont-badge-spacing-pr-has-icon-end: calc(var(--pont-ref-space) * 1.5);
+  --pont-badge-spacing-pb-has-icon-end: calc(var(--pont-ref-space) * 0.5);
+  --pont-badge-spacing-pl-has-icon-end: calc(var(--pont-ref-space) * 2);
 
-  --pont-badge-motion-fn: var(--pont-sem-motion-fn-default);
+  /* SIZING */
+  --pont-badge-sizing-w: var(--pont-ref-sizing-w-fit);
+  --pont-badge-sizing-h: calc(var(--pont-ref-space) * 5);
+
+  /* TYPOGRAPHY */
+  --pont-badge-typography-font: var(--pont-sem-font-family-default);
+  --pont-badge-typography-size: var(--pont-ref-font-size-xs);
+  --pont-badge-typography-weight: var(--pont-ref-font-weight-medium);
+  --pont-badge-typography-tracking: var(--pont-ref-font-letter-spacing-normal);
+  --pont-badge-typography-leading: var(--pont-ref-font-line-height-of-xs);
+
+  /* BORDER */
+  --pont-badge-border-radius-tl: calc(var(--pont-ref-radius) * 2.6);
+  --pont-badge-border-radius-tr: calc(var(--pont-ref-radius) * 2.6);
+  --pont-badge-border-radius-br: calc(var(--pont-ref-radius) * 2.6);
+  --pont-badge-border-radius-bl: calc(var(--pont-ref-radius) * 2.6);
+
+  /* MOTION */
+  --pont-badge-motion-property: var(--pont-ref-motion-property-all);
   --pont-badge-motion-duration: var(--pont-sem-motion-duration-default);
+  --pont-badge-motion-fn: var(--pont-sem-motion-fn-default);
+}
+
+/* * -------- BADGE > ICON -------- * */
+
+:root {
+  /* SIZING */
+  --pont-badge-icon-sizing-w: calc(var(--pont-ref-space) * 3);
+  --pont-badge-icon-sizing-h: calc(var(--pont-ref-space) * 3);
+}
+
+/*
+ * --------------------------------------------------
+ *  VARIANTS
+ * --------------------------------------------------
+ */
+
+/* * -------- DEFAULT -------- * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-badge-default-typography-color: hsl(
+    var(--pont-sem-color-text-brand-on-fill)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-default-bg-color: hsl(var(--pont-sem-color-bg-fill-brand));
+
+  /* BORDER */
+  --pont-badge-default-border-style: var(--pont-ref-border-style-solid);
+  --pont-badge-default-border-color: transparent;
+  --pont-badge-default-border-width-t: var(--pont-sem-width-border);
+  --pont-badge-default-border-width-r: var(--pont-sem-width-border);
+  --pont-badge-default-border-width-b: var(--pont-sem-width-border);
+  --pont-badge-default-border-width-l: var(--pont-sem-width-border);
+
+  --pont-badge-default-outline-w: 0px;
+  --pont-badge-default-outline-color: transparent;
+  --pont-badge-default-outline-style: var(--pont-ref-border-outline-style-none);
+  --pont-badge-default-outline-offset: 0px;
+
+  /* EFFECT */
+  --pont-badge-default-effect-shadow: var(--pont-ref-effect-shadow-none);
+  --pont-badge-default-effect-inset-shadow: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-default-effect-inset-ring: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-default-effect-ring-offset-w: 0px;
+  --pont-badge-default-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
+  --pont-badge-default-effect-ring-offset: 0 0 0
+    var(--pont-badge-default-effect-ring-offset-w)
+    var(--pont-badge-default-effect-ring-offset-color);
+
+  --pont-badge-default-effect-ring-w: 0px;
+  --pont-badge-default-effect-ring-color: currentColor;
+  --pont-badge-default-effect-ring: 0 0 0
+    calc(
+      var(--pont-badge-default-effect-ring-w) +
+        var(--pont-badge-default-effect-ring-offset-w)
+    )
+    var(--pont-badge-default-effect-ring-color);
+
+  /* * HOVER * */
+  /* TYPOGRAPHY */
+  --pont-badge-default-typography-color-hover: hsl(
+    var(--pont-sem-color-text-brand-on-fill)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-default-bg-color-hover: hsl(
+    var(--pont-sem-color-bg-fill-brand) / 80%
+  );
+
+  /* BORDER */
+  --pont-badge-default-border-style-hover: var(--pont-ref-border-style-solid);
+  --pont-badge-default-border-color-hover: transparent;
+  --pont-badge-default-border-width-t-hover: var(--pont-sem-width-border);
+  --pont-badge-default-border-width-r-hover: var(--pont-sem-width-border);
+  --pont-badge-default-border-width-b-hover: var(--pont-sem-width-border);
+  --pont-badge-default-border-width-l-hover: var(--pont-sem-width-border);
+
+  --pont-badge-default-outline-w-hover: 0px;
+  --pont-badge-default-outline-color-hover: transparent;
+  --pont-badge-default-outline-style-hover: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-default-outline-offset-hover: 0px;
+
+  /* EFFECT */
+  --pont-badge-default-effect-shadow-hover: var(--pont-ref-effect-shadow-none);
+  --pont-badge-default-effect-inset-shadow-hover: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-default-effect-inset-ring-hover: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-default-effect-ring-offset-w-hover: 0px;
+  --pont-badge-default-effect-ring-offset-color-hover: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-default-effect-ring-offset-hover: 0 0 0
+    var(--pont-badge-default-effect-ring-offset-w-hover)
+    var(--pont-badge-default-effect-ring-offset-color-hover);
+
+  --pont-badge-default-effect-ring-w-hover: 0px;
+  --pont-badge-default-effect-ring-color-hover: currentColor;
+  --pont-badge-default-effect-ring-hover: 0 0 0
+    calc(
+      var(--pont-badge-default-effect-ring-w-hover) +
+        var(--pont-badge-default-effect-ring-offset-w-hover)
+    )
+    var(--pont-badge-default-effect-ring-color-hover);
+
+  --pont-badge-default-effect-opacity-hover: 100%;
+
+  /* * FOCUS * */
+  /* TYPOGRAPHY */
+  --pont-badge-default-typography-color-focus: hsl(
+    var(--pont-sem-color-text-brand-on-fill)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-default-bg-color-focus: hsl(var(--pont-sem-color-bg-fill-brand));
+
+  /* BORDER */
+  --pont-badge-default-border-style-focus: var(--pont-ref-border-style-solid);
+  --pont-badge-default-border-color-focus: hsl(
+    var(--pont-sem-color-border-focus)
+  );
+  --pont-badge-default-border-width-t-focus: var(--pont-sem-width-border);
+  --pont-badge-default-border-width-r-focus: var(--pont-sem-width-border);
+  --pont-badge-default-border-width-b-focus: var(--pont-sem-width-border);
+  --pont-badge-default-border-width-l-focus: var(--pont-sem-width-border);
+
+  --pont-badge-default-outline-w-focus: 0px;
+  --pont-badge-default-outline-color-focus: transparent;
+  --pont-badge-default-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-default-outline-offset-focus: 0px;
+
+  /* EFFECT */
+  --pont-badge-default-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
+  --pont-badge-default-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-default-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-default-effect-ring-offset-w-focus: 0px;
+  --pont-badge-default-effect-ring-offset-color-focus: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-default-effect-ring-offset-focus: 0 0 0
+    var(--pont-badge-default-effect-ring-offset-w-focus)
+    var(--pont-badge-default-effect-ring-offset-color-focus);
+
+  --pont-badge-default-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
+  --pont-badge-default-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-focus)
+  );
+  --pont-badge-default-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-badge-default-effect-ring-w-focus) +
+        var(--pont-badge-default-effect-ring-offset-w-focus)
+    )
+    var(--pont-badge-default-effect-ring-color-focus);
+
+  --pont-badge-default-effect-opacity-focus: 100%;
+
+  /* * INVALID * */
+  /* TYPOGRAPHY */
+  --pont-badge-default-typography-color-invalid: hsl(
+    var(--pont-sem-color-text-brand-on-fill)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-default-bg-color-invalid: hsl(
+    var(--pont-sem-color-bg-fill-brand)
+  );
+
+  /* BORDER */
+  --pont-badge-default-border-style-invalid: var(--pont-ref-border-style-solid);
+  --pont-badge-default-border-color-invalid: hsl(
+    var(--pont-sem-color-border-invalid)
+  );
+  --pont-badge-default-border-width-t-invalid: var(--pont-sem-width-border);
+  --pont-badge-default-border-width-r-invalid: var(--pont-sem-width-border);
+  --pont-badge-default-border-width-b-invalid: var(--pont-sem-width-border);
+  --pont-badge-default-border-width-l-invalid: var(--pont-sem-width-border);
+
+  --pont-badge-default-outline-w-invalid: 0px;
+  --pont-badge-default-outline-color-invalid: transparent;
+  --pont-badge-default-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-default-outline-offset-invalid: 0px;
+
+  /* EFFECT */
+  --pont-badge-default-effect-shadow-invalid: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-badge-default-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-default-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-default-effect-ring-offset-w-invalid: 0px;
+  --pont-badge-default-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-default-effect-ring-offset-invalid: 0 0 0
+    var(--pont-badge-default-effect-ring-offset-w-invalid)
+    var(--pont-badge-default-effect-ring-offset-color-invalid);
+
+  --pont-badge-default-effect-ring-w-invalid: var(--pont-sem-width-ring);
+  --pont-badge-default-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-badge-default-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-badge-default-effect-ring-w-invalid) +
+        var(--pont-badge-default-effect-ring-offset-w-invalid)
+    )
+    var(--pont-badge-default-effect-ring-color-invalid);
+
+  --pont-badge-default-effect-opacity-invalid: 100%;
+}
+
+/* * -------- SECONDARY -------- * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-badge-secondary-typography-color: hsl(
+    var(--pont-sem-color-text-secondary-on-fill)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-secondary-bg-color: hsl(var(--pont-sem-color-bg-fill-secondary));
+
+  /* BORDER */
+  --pont-badge-secondary-border-style: var(--pont-ref-border-style-solid);
+  --pont-badge-secondary-border-color: transparent;
+  --pont-badge-secondary-border-width-t: var(--pont-sem-width-border);
+  --pont-badge-secondary-border-width-r: var(--pont-sem-width-border);
+  --pont-badge-secondary-border-width-b: var(--pont-sem-width-border);
+  --pont-badge-secondary-border-width-l: var(--pont-sem-width-border);
+
+  --pont-badge-secondary-outline-w: 0px;
+  --pont-badge-secondary-outline-color: transparent;
+  --pont-badge-secondary-outline-style: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-secondary-outline-offset: 0px;
+
+  /* EFFECT */
+  --pont-badge-secondary-effect-shadow: var(--pont-ref-effect-shadow-none);
+  --pont-badge-secondary-effect-inset-shadow: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-secondary-effect-inset-ring: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-secondary-effect-ring-offset-w: 0px;
+  --pont-badge-secondary-effect-ring-offset-color: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-secondary-effect-ring-offset: 0 0 0
+    var(--pont-badge-secondary-effect-ring-offset-w)
+    var(--pont-badge-secondary-effect-ring-offset-color);
+
+  --pont-badge-secondary-effect-ring-w: 0px;
+  --pont-badge-secondary-effect-ring-color: currentColor;
+  --pont-badge-secondary-effect-ring: 0 0 0
+    calc(
+      var(--pont-badge-secondary-effect-ring-w) +
+        var(--pont-badge-secondary-effect-ring-offset-w)
+    )
+    var(--pont-badge-secondary-effect-ring-color);
+
+  /* * HOVER * */
+  /* TYPOGRAPHY */
+  --pont-badge-secondary-typography-color-hover: hsl(
+    var(--pont-sem-color-text-secondary-on-fill)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-secondary-bg-color-hover: hsl(
+    var(--pont-sem-color-bg-fill-secondary) / 80%
+  );
+
+  /* BORDER */
+  --pont-badge-secondary-border-style-hover: var(--pont-ref-border-style-solid);
+  --pont-badge-secondary-border-color-hover: transparent;
+  --pont-badge-secondary-border-width-t-hover: var(--pont-sem-width-border);
+  --pont-badge-secondary-border-width-r-hover: var(--pont-sem-width-border);
+  --pont-badge-secondary-border-width-b-hover: var(--pont-sem-width-border);
+  --pont-badge-secondary-border-width-l-hover: var(--pont-sem-width-border);
+
+  --pont-badge-secondary-outline-w-hover: 0px;
+  --pont-badge-secondary-outline-color-hover: transparent;
+  --pont-badge-secondary-outline-style-hover: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-secondary-outline-offset-hover: 0px;
+
+  /* EFFECT */
+  --pont-badge-secondary-effect-shadow-hover: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-badge-secondary-effect-inset-shadow-hover: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-secondary-effect-inset-ring-hover: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-secondary-effect-ring-offset-w-hover: 0px;
+  --pont-badge-secondary-effect-ring-offset-color-hover: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-secondary-effect-ring-offset-hover: 0 0 0
+    var(--pont-badge-secondary-effect-ring-offset-w-hover)
+    var(--pont-badge-secondary-effect-ring-offset-color-hover);
+
+  --pont-badge-secondary-effect-ring-w-hover: 0px;
+  --pont-badge-secondary-effect-ring-color-hover: currentColor;
+  --pont-badge-secondary-effect-ring-hover: 0 0 0
+    calc(
+      var(--pont-badge-secondary-effect-ring-w-hover) +
+        var(--pont-badge-secondary-effect-ring-offset-w-hover)
+    )
+    var(--pont-badge-secondary-effect-ring-color-hover);
+
+  --pont-badge-secondary-effect-opacity-hover: 100%;
+
+  /* * FOCUS * */
+  /* TYPOGRAPHY */
+  --pont-badge-secondary-typography-color-focus: hsl(
+    var(--pont-sem-color-text-secondary-on-fill)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-secondary-bg-color-focus: hsl(
+    var(--pont-sem-color-bg-fill-secondary)
+  );
+
+  /* BORDER */
+  --pont-badge-secondary-border-style-focus: var(--pont-ref-border-style-solid);
+  --pont-badge-secondary-border-color-focus: hsl(
+    var(--pont-sem-color-border-focus)
+  );
+  --pont-badge-secondary-border-width-t-focus: var(--pont-sem-width-border);
+  --pont-badge-secondary-border-width-r-focus: var(--pont-sem-width-border);
+  --pont-badge-secondary-border-width-b-focus: var(--pont-sem-width-border);
+  --pont-badge-secondary-border-width-l-focus: var(--pont-sem-width-border);
+
+  --pont-badge-secondary-outline-w-focus: 0px;
+  --pont-badge-secondary-outline-color-focus: transparent;
+  --pont-badge-secondary-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-secondary-outline-offset-focus: 0px;
+
+  /* EFFECT */
+  --pont-badge-secondary-effect-shadow-focus: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-badge-secondary-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-secondary-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-secondary-effect-ring-offset-w-focus: 0px;
+  --pont-badge-secondary-effect-ring-offset-color-focus: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-secondary-effect-ring-offset-focus: 0 0 0
+    var(--pont-badge-secondary-effect-ring-offset-w-focus)
+    var(--pont-badge-secondary-effect-ring-offset-color-focus);
+
+  --pont-badge-secondary-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
+  --pont-badge-secondary-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-focus)
+  );
+  --pont-badge-secondary-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-badge-secondary-effect-ring-w-focus) +
+        var(--pont-badge-secondary-effect-ring-offset-w-focus)
+    )
+    var(--pont-badge-secondary-effect-ring-color-focus);
+
+  --pont-badge-secondary-effect-opacity-focus: 100%;
+
+  /* * INVALID * */
+  /* TYPOGRAPHY */
+  --pont-badge-secondary-typography-color-invalid: hsl(
+    var(--pont-sem-color-text-secondary-on-fill)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-secondary-bg-color-invalid: hsl(
+    var(--pont-sem-color-bg-fill-secondary)
+  );
+
+  /* BORDER */
+  --pont-badge-secondary-border-style-invalid: var(
+    --pont-ref-border-style-solid
+  );
+  --pont-badge-secondary-border-color-invalid: hsl(
+    var(--pont-sem-color-border-invalid)
+  );
+  --pont-badge-secondary-border-width-t-invalid: var(--pont-sem-width-border);
+  --pont-badge-secondary-border-width-r-invalid: var(--pont-sem-width-border);
+  --pont-badge-secondary-border-width-b-invalid: var(--pont-sem-width-border);
+  --pont-badge-secondary-border-width-l-invalid: var(--pont-sem-width-border);
 
-  --pont-badge-color-border-focus: hsl(var(--pont-sem-color-border-focus));
-  --pont-badge-color-ring-focus: hsl(var(--pont-sem-color-ring-focus));
-  --pont-badge-width-ring-focus: var(--pont-sem-width-ring-focus);
+  --pont-badge-secondary-outline-w-invalid: 0px;
+  --pont-badge-secondary-outline-color-invalid: transparent;
+  --pont-badge-secondary-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-secondary-outline-offset-invalid: 0px;
+
+  /* EFFECT */
+  --pont-badge-secondary-effect-shadow-invalid: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-badge-secondary-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-secondary-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-secondary-effect-ring-offset-w-invalid: 0px;
+  --pont-badge-secondary-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-secondary-effect-ring-offset-invalid: 0 0 0
+    var(--pont-badge-secondary-effect-ring-offset-w-invalid)
+    var(--pont-badge-secondary-effect-ring-offset-color-invalid);
+
+  --pont-badge-secondary-effect-ring-w-invalid: var(--pont-sem-width-ring);
+  --pont-badge-secondary-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-badge-secondary-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-badge-secondary-effect-ring-w-invalid) +
+        var(--pont-badge-secondary-effect-ring-offset-w-invalid)
+    )
+    var(--pont-badge-secondary-effect-ring-color-invalid);
+
+  --pont-badge-secondary-effect-opacity-invalid: 100%;
+}
+
+/* * -------- OUTLINE -------- * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-badge-outline-typography-color: hsl(var(--pont-sem-color-text));
+
+  /* BACKGROUND */
+  --pont-badge-outline-bg-color: transparent;
+
+  /* BORDER */
+  --pont-badge-outline-border-style: var(--pont-ref-border-style-solid);
+  --pont-badge-outline-border-color: hsl(var(--pont-sem-color-border));
+  --pont-badge-outline-border-width-t: var(--pont-sem-width-border);
+  --pont-badge-outline-border-width-r: var(--pont-sem-width-border);
+  --pont-badge-outline-border-width-b: var(--pont-sem-width-border);
+  --pont-badge-outline-border-width-l: var(--pont-sem-width-border);
+
+  --pont-badge-outline-outline-w: 0px;
+  --pont-badge-outline-outline-color: transparent;
+  --pont-badge-outline-outline-style: var(--pont-ref-border-outline-style-none);
+  --pont-badge-outline-outline-offset: 0px;
+
+  /* EFFECT */
+  --pont-badge-outline-effect-shadow: var(--pont-ref-effect-shadow-none);
+  --pont-badge-outline-effect-inset-shadow: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-outline-effect-inset-ring: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-outline-effect-ring-offset-w: 0px;
+  --pont-badge-outline-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
+  --pont-badge-outline-effect-ring-offset: 0 0 0
+    var(--pont-badge-outline-effect-ring-offset-w)
+    var(--pont-badge-outline-effect-ring-offset-color);
+
+  --pont-badge-outline-effect-ring-w: 0px;
+  --pont-badge-outline-effect-ring-color: currentColor;
+  --pont-badge-outline-effect-ring: 0 0 0
+    calc(
+      var(--pont-badge-outline-effect-ring-w) +
+        var(--pont-badge-outline-effect-ring-offset-w)
+    )
+    var(--pont-badge-outline-effect-ring-color);
+
+  /* * HOVER * */
+  /* TYPOGRAPHY */
+  --pont-badge-outline-typography-color-hover: hsl(
+    var(--pont-sem-color-text-secondary)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-outline-bg-color-hover: hsl(
+    var(--pont-sem-color-bg-fill-secondary)
+  );
+
+  /* BORDER */
+  --pont-badge-outline-border-style-hover: var(--pont-ref-border-style-solid);
+  --pont-badge-outline-border-color-hover: hsl(var(--pont-sem-color-border));
+  --pont-badge-outline-border-width-t-hover: var(--pont-sem-width-border);
+  --pont-badge-outline-border-width-r-hover: var(--pont-sem-width-border);
+  --pont-badge-outline-border-width-b-hover: var(--pont-sem-width-border);
+  --pont-badge-outline-border-width-l-hover: var(--pont-sem-width-border);
+
+  --pont-badge-outline-outline-w-hover: 0px;
+  --pont-badge-outline-outline-color-hover: transparent;
+  --pont-badge-outline-outline-style-hover: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-outline-outline-offset-hover: 0px;
+
+  /* EFFECT */
+  --pont-badge-outline-effect-shadow-hover: var(--pont-ref-effect-shadow-none);
+  --pont-badge-outline-effect-inset-shadow-hover: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-outline-effect-inset-ring-hover: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-outline-effect-ring-offset-w-hover: 0px;
+  --pont-badge-outline-effect-ring-offset-color-hover: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-outline-effect-ring-offset-hover: 0 0 0
+    var(--pont-badge-outline-effect-ring-offset-w-hover)
+    var(--pont-badge-outline-effect-ring-offset-color-hover);
+
+  --pont-badge-outline-effect-ring-w-hover: 0px;
+  --pont-badge-outline-effect-ring-color-hover: currentColor;
+  --pont-badge-outline-effect-ring-hover: 0 0 0
+    calc(
+      var(--pont-badge-outline-effect-ring-w-hover) +
+        var(--pont-badge-outline-effect-ring-offset-w-hover)
+    )
+    var(--pont-badge-outline-effect-ring-color-hover);
+
+  --pont-badge-outline-effect-opacity-hover: 100%;
+
+  /* * FOCUS * */
+  /* TYPOGRAPHY */
+  --pont-badge-outline-typography-color-focus: hsl(var(--pont-sem-color-text));
+
+  /* BACKGROUND */
+  --pont-badge-outline-bg-color-focus: transparent;
+
+  /* BORDER */
+  --pont-badge-outline-border-style-focus: var(--pont-ref-border-style-solid);
+  --pont-badge-outline-border-color-focus: hsl(
+    var(--pont-sem-color-border-focus)
+  );
+  --pont-badge-outline-border-width-t-focus: var(--pont-sem-width-border);
+  --pont-badge-outline-border-width-r-focus: var(--pont-sem-width-border);
+  --pont-badge-outline-border-width-b-focus: var(--pont-sem-width-border);
+  --pont-badge-outline-border-width-l-focus: var(--pont-sem-width-border);
+
+  --pont-badge-outline-outline-w-focus: 0px;
+  --pont-badge-outline-outline-color-focus: transparent;
+  --pont-badge-outline-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-outline-outline-offset-focus: 0px;
+
+  /* EFFECT */
+  --pont-badge-outline-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
+  --pont-badge-outline-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-outline-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-outline-effect-ring-offset-w-focus: 0px;
+  --pont-badge-outline-effect-ring-offset-color-focus: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-outline-effect-ring-offset-focus: 0 0 0
+    var(--pont-badge-outline-effect-ring-offset-w-focus)
+    var(--pont-badge-outline-effect-ring-offset-color-focus);
+
+  --pont-badge-outline-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
+  --pont-badge-outline-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-focus)
+  );
+  --pont-badge-outline-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-badge-outline-effect-ring-w-focus) +
+        var(--pont-badge-outline-effect-ring-offset-w-focus)
+    )
+    var(--pont-badge-outline-effect-ring-color-focus);
+
+  --pont-badge-outline-effect-opacity-focus: 100%;
+
+  /* * INVALID * */
+  /* TYPOGRAPHY */
+  --pont-badge-outline-typography-color-invalid: hsl(
+    var(--pont-sem-color-text)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-outline-bg-color-invalid: transparent;
+
+  /* BORDER */
+  --pont-badge-outline-border-style-invalid: var(--pont-ref-border-style-solid);
+  --pont-badge-outline-border-color-invalid: hsl(
+    var(--pont-sem-color-border-invalid)
+  );
+  --pont-badge-outline-border-width-t-invalid: var(--pont-sem-width-border);
+  --pont-badge-outline-border-width-r-invalid: var(--pont-sem-width-border);
+  --pont-badge-outline-border-width-b-invalid: var(--pont-sem-width-border);
+  --pont-badge-outline-border-width-l-invalid: var(--pont-sem-width-border);
+
+  --pont-badge-outline-outline-w-invalid: 0px;
+  --pont-badge-outline-outline-color-invalid: transparent;
+  --pont-badge-outline-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-outline-outline-offset-invalid: 0px;
+
+  /* EFFECT */
+  --pont-badge-outline-effect-shadow-invalid: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-badge-outline-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-outline-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-outline-effect-ring-offset-w-invalid: 0px;
+  --pont-badge-outline-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-outline-effect-ring-offset-invalid: 0 0 0
+    var(--pont-badge-outline-effect-ring-offset-w-invalid)
+    var(--pont-badge-outline-effect-ring-offset-color-invalid);
+
+  --pont-badge-outline-effect-ring-w-invalid: var(--pont-sem-width-ring);
+  --pont-badge-outline-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-badge-outline-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-badge-outline-effect-ring-w-invalid) +
+        var(--pont-badge-outline-effect-ring-offset-w-invalid)
+    )
+    var(--pont-badge-outline-effect-ring-color-invalid);
+
+  --pont-badge-outline-effect-opacity-invalid: 100%;
+}
+
+/* * -------- GHOST -------- * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-badge-ghost-typography-color: hsl(var(--pont-sem-color-text));
+
+  /* BACKGROUND */
+  --pont-badge-ghost-bg-color: transparent;
+
+  /* BORDER */
+  --pont-badge-ghost-border-style: var(--pont-ref-border-style-solid);
+  --pont-badge-ghost-border-color: transparent;
+  --pont-badge-ghost-border-width-t: var(--pont-sem-width-border);
+  --pont-badge-ghost-border-width-r: var(--pont-sem-width-border);
+  --pont-badge-ghost-border-width-b: var(--pont-sem-width-border);
+  --pont-badge-ghost-border-width-l: var(--pont-sem-width-border);
+
+  --pont-badge-ghost-outline-w: 0px;
+  --pont-badge-ghost-outline-color: transparent;
+  --pont-badge-ghost-outline-style: var(--pont-ref-border-outline-style-none);
+  --pont-badge-ghost-outline-offset: 0px;
+
+  /* EFFECT */
+  --pont-badge-ghost-effect-shadow: var(--pont-ref-effect-shadow-none);
+  --pont-badge-ghost-effect-inset-shadow: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-ghost-effect-inset-ring: inset var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-ghost-effect-ring-offset-w: 0px;
+  --pont-badge-ghost-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
+  --pont-badge-ghost-effect-ring-offset: 0 0 0
+    var(--pont-badge-ghost-effect-ring-offset-w)
+    var(--pont-badge-ghost-effect-ring-offset-color);
+
+  --pont-badge-ghost-effect-ring-w: 0px;
+  --pont-badge-ghost-effect-ring-color: currentColor;
+  --pont-badge-ghost-effect-ring: 0 0 0
+    calc(
+      var(--pont-badge-ghost-effect-ring-w) +
+        var(--pont-badge-ghost-effect-ring-offset-w)
+    )
+    var(--pont-badge-ghost-effect-ring-color);
+
+  /* * HOVER * */
+  /* TYPOGRAPHY */
+  --pont-badge-ghost-typography-color-hover: hsl(
+    var(--pont-sem-color-text-secondary)
+  );
+
+  /* BACKGROUND */
+  /* Note: alternative 'dark' theme value defined below */
+  --pont-badge-ghost-bg-color-hover: hsl(
+    var(--pont-sem-color-bg-fill-secondary)
+  );
+
+  /* BORDER */
+  --pont-badge-ghost-border-style-hover: var(--pont-ref-border-style-solid);
+  --pont-badge-ghost-border-color-hover: transparent;
+  --pont-badge-ghost-border-width-t-hover: var(--pont-sem-width-border);
+  --pont-badge-ghost-border-width-r-hover: var(--pont-sem-width-border);
+  --pont-badge-ghost-border-width-b-hover: var(--pont-sem-width-border);
+  --pont-badge-ghost-border-width-l-hover: var(--pont-sem-width-border);
+
+  --pont-badge-ghost-outline-w-hover: 0px;
+  --pont-badge-ghost-outline-color-hover: transparent;
+  --pont-badge-ghost-outline-style-hover: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-ghost-outline-offset-hover: 0px;
+
+  /* EFFECT */
+  --pont-badge-ghost-effect-shadow-hover: var(--pont-ref-effect-shadow-none);
+  --pont-badge-ghost-effect-inset-shadow-hover: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-ghost-effect-inset-ring-hover: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-ghost-effect-ring-offset-w-hover: 0px;
+  --pont-badge-ghost-effect-ring-offset-color-hover: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-ghost-effect-ring-offset-hover: 0 0 0
+    var(--pont-badge-ghost-effect-ring-offset-w-hover)
+    var(--pont-badge-ghost-effect-ring-offset-color-hover);
+
+  --pont-badge-ghost-effect-ring-w-hover: 0px;
+  --pont-badge-ghost-effect-ring-color-hover: currentColor;
+  --pont-badge-ghost-effect-ring-hover: 0 0 0
+    calc(
+      var(--pont-badge-ghost-effect-ring-w-hover) +
+        var(--pont-badge-ghost-effect-ring-offset-w-hover)
+    )
+    var(--pont-badge-ghost-effect-ring-color-hover);
+
+  --pont-badge-ghost-effect-opacity-hover: 100%;
+
+  /* * FOCUS * */
+  /* TYPOGRAPHY */
+  --pont-badge-ghost-typography-color-focus: hsl(var(--pont-sem-color-text));
+
+  /* BACKGROUND */
+  --pont-badge-ghost-bg-color-focus: transparent;
+
+  /* BORDER */
+  --pont-badge-ghost-border-style-focus: var(--pont-ref-border-style-solid);
+  --pont-badge-ghost-border-color-focus: hsl(
+    var(--pont-sem-color-border-focus)
+  );
+  --pont-badge-ghost-border-width-t-focus: var(--pont-sem-width-border);
+  --pont-badge-ghost-border-width-r-focus: var(--pont-sem-width-border);
+  --pont-badge-ghost-border-width-b-focus: var(--pont-sem-width-border);
+  --pont-badge-ghost-border-width-l-focus: var(--pont-sem-width-border);
+
+  --pont-badge-ghost-outline-w-focus: 0px;
+  --pont-badge-ghost-outline-color-focus: transparent;
+  --pont-badge-ghost-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-ghost-outline-offset-focus: 0px;
+
+  /* EFFECT */
+  --pont-badge-ghost-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
+  --pont-badge-ghost-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-ghost-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-ghost-effect-ring-offset-w-focus: 0px;
+  --pont-badge-ghost-effect-ring-offset-color-focus: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-ghost-effect-ring-offset-focus: 0 0 0
+    var(--pont-badge-ghost-effect-ring-offset-w-focus)
+    var(--pont-badge-ghost-effect-ring-offset-color-focus);
+
+  --pont-badge-ghost-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
+  --pont-badge-ghost-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-focus)
+  );
+  --pont-badge-ghost-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-badge-ghost-effect-ring-w-focus) +
+        var(--pont-badge-ghost-effect-ring-offset-w-focus)
+    )
+    var(--pont-badge-ghost-effect-ring-color-focus);
+
+  --pont-badge-ghost-effect-opacity-focus: 100%;
+
+  /* * INVALID * */
+  /* TYPOGRAPHY */
+  --pont-badge-ghost-typography-color-invalid: hsl(var(--pont-sem-color-text));
+
+  /* BACKGROUND */
+  --pont-badge-ghost-bg-color-invalid: transparent;
+
+  /* BORDER */
+  --pont-badge-ghost-border-style-invalid: var(--pont-ref-border-style-solid);
+  --pont-badge-ghost-border-color-invalid: hsl(
+    var(--pont-sem-color-border-invalid)
+  );
+  --pont-badge-ghost-border-width-t-invalid: var(--pont-sem-width-border);
+  --pont-badge-ghost-border-width-r-invalid: var(--pont-sem-width-border);
+  --pont-badge-ghost-border-width-b-invalid: var(--pont-sem-width-border);
+  --pont-badge-ghost-border-width-l-invalid: var(--pont-sem-width-border);
+
+  --pont-badge-ghost-outline-w-invalid: 0px;
+  --pont-badge-ghost-outline-color-invalid: transparent;
+  --pont-badge-ghost-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-ghost-outline-offset-invalid: 0px;
+
+  /* EFFECT */
+  --pont-badge-ghost-effect-shadow-invalid: var(--pont-ref-effect-shadow-none);
+  --pont-badge-ghost-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-ghost-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-ghost-effect-ring-offset-w-invalid: 0px;
+  --pont-badge-ghost-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-ghost-effect-ring-offset-invalid: 0 0 0
+    var(--pont-badge-ghost-effect-ring-offset-w-invalid)
+    var(--pont-badge-ghost-effect-ring-offset-color-invalid);
+
+  --pont-badge-ghost-effect-ring-w-invalid: var(--pont-sem-width-ring);
+  --pont-badge-ghost-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-badge-ghost-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-badge-ghost-effect-ring-w-invalid) +
+        var(--pont-badge-ghost-effect-ring-offset-w-invalid)
+    )
+    var(--pont-badge-ghost-effect-ring-color-invalid);
+
+  --pont-badge-ghost-effect-opacity-invalid: 100%;
+}
+
+[data-theme="dark"] {
+  --pont-badge-ghost-bg-color-hover: hsl(
+    var(--pont-sem-color-bg-fill-secondary) / 50%
+  );
+}
+
+/* * -------- DESTRUCTIVE -------- * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-badge-destructive-typography-color: hsl(
+    var(--pont-sem-color-text-destructive)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-destructive-bg-color: hsl(
+    var(--pont-sem-color-bg-fill-destructive-secondary)
+  );
+
+  /* BORDER */
+  --pont-badge-destructive-border-style: var(--pont-ref-border-style-solid);
+  --pont-badge-destructive-border-color: transparent;
+  --pont-badge-destructive-border-width-t: var(--pont-sem-width-border);
+  --pont-badge-destructive-border-width-r: var(--pont-sem-width-border);
+  --pont-badge-destructive-border-width-b: var(--pont-sem-width-border);
+  --pont-badge-destructive-border-width-l: var(--pont-sem-width-border);
+
+  --pont-badge-destructive-outline-w: 0px;
+  --pont-badge-destructive-outline-color: transparent;
+  --pont-badge-destructive-outline-style: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-destructive-outline-offset: 0px;
+
+  /* EFFECT */
+  --pont-badge-destructive-effect-shadow: var(--pont-ref-effect-shadow-none);
+  --pont-badge-destructive-effect-inset-shadow: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-destructive-effect-inset-ring: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-destructive-effect-ring-offset-w: 0px;
+  --pont-badge-destructive-effect-ring-offset-color: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-destructive-effect-ring-offset: 0 0 0
+    var(--pont-badge-destructive-effect-ring-offset-w)
+    var(--pont-badge-destructive-effect-ring-offset-color);
+
+  --pont-badge-destructive-effect-ring-w: 0px;
+  --pont-badge-destructive-effect-ring-color: currentColor;
+  --pont-badge-destructive-effect-ring: 0 0 0
+    calc(
+      var(--pont-badge-destructive-effect-ring-w) +
+        var(--pont-badge-destructive-effect-ring-offset-w)
+    )
+    var(--pont-badge-destructive-effect-ring-color);
+
+  /* * HOVER * */
+  /* TYPOGRAPHY */
+  --pont-badge-destructive-typography-color-hover: hsl(
+    var(--pont-sem-color-text-destructive)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-destructive-bg-color-hover: hsl(
+    var(--pont-sem-color-role-destructive) / 20%
+  );
+
+  /* BORDER */
+  --pont-badge-destructive-border-style-hover: var(
+    --pont-ref-border-style-solid
+  );
+  --pont-badge-destructive-border-color-hover: transparent;
+  --pont-badge-destructive-border-width-t-hover: var(--pont-sem-width-border);
+  --pont-badge-destructive-border-width-r-hover: var(--pont-sem-width-border);
+  --pont-badge-destructive-border-width-b-hover: var(--pont-sem-width-border);
+  --pont-badge-destructive-border-width-l-hover: var(--pont-sem-width-border);
+
+  --pont-badge-destructive-outline-w-hover: 0px;
+  --pont-badge-destructive-outline-color-hover: transparent;
+  --pont-badge-destructive-outline-style-hover: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-destructive-outline-offset-hover: 0px;
+
+  /* EFFECT */
+  --pont-badge-destructive-effect-shadow-hover: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-badge-destructive-effect-inset-shadow-hover: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-destructive-effect-inset-ring-hover: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-destructive-effect-ring-offset-w-hover: 0px;
+  --pont-badge-destructive-effect-ring-offset-color-hover: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-destructive-effect-ring-offset-hover: 0 0 0
+    var(--pont-badge-destructive-effect-ring-offset-w-hover)
+    var(--pont-badge-destructive-effect-ring-offset-color-hover);
+
+  --pont-badge-destructive-effect-ring-w-hover: 0px;
+  --pont-badge-destructive-effect-ring-color-hover: currentColor;
+  --pont-badge-destructive-effect-ring-hover: 0 0 0
+    calc(
+      var(--pont-badge-destructive-effect-ring-w-hover) +
+        var(--pont-badge-destructive-effect-ring-offset-w-hover)
+    )
+    var(--pont-badge-destructive-effect-ring-color-hover);
+
+  --pont-badge-destructive-effect-opacity-hover: 100%;
+
+  /* * FOCUS * */
+  /* TYPOGRAPHY */
+  --pont-badge-destructive-typography-color-focus: hsl(
+    var(--pont-sem-color-text-destructive)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-destructive-bg-color-focus: hsl(
+    var(--pont-sem-color-bg-fill-destructive-secondary)
+  );
+
+  /* BORDER */
+  --pont-badge-destructive-border-style-focus: var(
+    --pont-ref-border-style-solid
+  );
+  --pont-badge-destructive-border-color-focus: hsl(
+    var(--pont-sem-color-border-focus)
+  );
+  --pont-badge-destructive-border-width-t-focus: var(--pont-sem-width-border);
+  --pont-badge-destructive-border-width-r-focus: var(--pont-sem-width-border);
+  --pont-badge-destructive-border-width-b-focus: var(--pont-sem-width-border);
+  --pont-badge-destructive-border-width-l-focus: var(--pont-sem-width-border);
+
+  --pont-badge-destructive-outline-w-focus: 0px;
+  --pont-badge-destructive-outline-color-focus: transparent;
+  --pont-badge-destructive-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-destructive-outline-offset-focus: 0px;
+
+  /* EFFECT */
+  --pont-badge-destructive-effect-shadow-focus: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-badge-destructive-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-destructive-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-destructive-effect-ring-offset-w-focus: 0px;
+  --pont-badge-destructive-effect-ring-offset-color-focus: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-destructive-effect-ring-offset-focus: 0 0 0
+    var(--pont-badge-destructive-effect-ring-offset-w-focus)
+    var(--pont-badge-destructive-effect-ring-offset-color-focus);
+
+  --pont-badge-destructive-effect-ring-w-focus: var(
+    --pont-sem-width-ring-focus
+  );
+  --pont-badge-destructive-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-badge-destructive-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-badge-destructive-effect-ring-w-focus) +
+        var(--pont-badge-destructive-effect-ring-offset-w-focus)
+    )
+    var(--pont-badge-destructive-effect-ring-color-focus);
+
+  --pont-badge-destructive-effect-opacity-focus: 100%;
+
+  /* * INVALID * */
+  /* TYPOGRAPHY */
+  --pont-badge-destructive-typography-color-invalid: hsl(
+    var(--pont-sem-color-text-destructive)
+  );
+
+  /* BACKGROUND */
+  --pont-badge-destructive-bg-color-invalid: hsl(
+    var(--pont-sem-color-bg-fill-destructive-secondary)
+  );
+
+  /* BORDER */
+  --pont-badge-destructive-border-style-invalid: var(
+    --pont-ref-border-style-solid
+  );
+  --pont-badge-destructive-border-color-invalid: hsl(
+    var(--pont-sem-color-border-invalid)
+  );
+  --pont-badge-destructive-border-width-t-invalid: var(--pont-sem-width-border);
+  --pont-badge-destructive-border-width-r-invalid: var(--pont-sem-width-border);
+  --pont-badge-destructive-border-width-b-invalid: var(--pont-sem-width-border);
+  --pont-badge-destructive-border-width-l-invalid: var(--pont-sem-width-border);
+
+  --pont-badge-destructive-outline-w-invalid: 0px;
+  --pont-badge-destructive-outline-color-invalid: transparent;
+  --pont-badge-destructive-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-destructive-outline-offset-invalid: 0px;
+
+  /* EFFECT */
+  --pont-badge-destructive-effect-shadow-invalid: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-badge-destructive-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-destructive-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-destructive-effect-ring-offset-w-invalid: 0px;
+  --pont-badge-destructive-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-destructive-effect-ring-offset-invalid: 0 0 0
+    var(--pont-badge-destructive-effect-ring-offset-w-invalid)
+    var(--pont-badge-destructive-effect-ring-offset-color-invalid);
+
+  --pont-badge-destructive-effect-ring-w-invalid: var(--pont-sem-width-ring);
+  --pont-badge-destructive-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-badge-destructive-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-badge-destructive-effect-ring-w-invalid) +
+        var(--pont-badge-destructive-effect-ring-offset-w-invalid)
+    )
+    var(--pont-badge-destructive-effect-ring-color-invalid);
+
+  --pont-badge-destructive-effect-opacity-invalid: 100%;
+}
+
+/* * -------- LINK -------- * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-badge-link-typography-color: hsl(var(--pont-sem-color-text-brand));
+
+  /* BACKGROUND */
+  --pont-badge-link-bg-color: transparent;
+
+  /* BORDER */
+  --pont-badge-link-border-style: var(--pont-ref-border-style-solid);
+  --pont-badge-link-border-color: transparent;
+  --pont-badge-link-border-width-t: var(--pont-sem-width-border);
+  --pont-badge-link-border-width-r: var(--pont-sem-width-border);
+  --pont-badge-link-border-width-b: var(--pont-sem-width-border);
+  --pont-badge-link-border-width-l: var(--pont-sem-width-border);
+
+  --pont-badge-link-outline-w: 0px;
+  --pont-badge-link-outline-color: transparent;
+  --pont-badge-link-outline-style: var(--pont-ref-border-outline-style-none);
+  --pont-badge-link-outline-offset: 0px;
+
+  /* EFFECT */
+  --pont-badge-link-effect-shadow: var(--pont-ref-effect-shadow-none);
+  --pont-badge-link-effect-inset-shadow: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-link-effect-inset-ring: inset var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-link-effect-ring-offset-w: 0px;
+  --pont-badge-link-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
+  --pont-badge-link-effect-ring-offset: 0 0 0
+    var(--pont-badge-link-effect-ring-offset-w)
+    var(--pont-badge-link-effect-ring-offset-color);
+
+  --pont-badge-link-effect-ring-w: 0px;
+  --pont-badge-link-effect-ring-color: currentColor;
+  --pont-badge-link-effect-ring: 0 0 0
+    calc(
+      var(--pont-badge-link-effect-ring-w) +
+        var(--pont-badge-link-effect-ring-offset-w)
+    )
+    var(--pont-badge-link-effect-ring-color);
+
+  /* * HOVER * */
+  /* TYPOGRAPHY */
+  --pont-badge-link-typography-color-hover: hsl(
+    var(--pont-sem-color-text-brand)
+  );
+
+  --pont-badge-link-typography-decoration-line-hover: var(
+    --pont-ref-typography-decoration-line-underline
+  );
+  --pont-badge-link-typography-decoration-color-hover: var(
+    --pont-sem-typography-decoration-color-default
+  );
+  --pont-badge-link-typography-decoration-style-hover: var(
+    --pont-sem-typography-decoration-style-default
+  );
+  --pont-badge-link-typography-decoration-thickness-hover: var(
+    --pont-sem-typography-decoration-thickness-default
+  );
+  --pont-badge-link-typography-underline-offset-hover: 4px;
+
+  /* BACKGROUND */
+  --pont-badge-link-bg-color-hover: transparent;
+
+  /* BORDER */
+  --pont-badge-link-border-style-hover: var(--pont-ref-border-style-solid);
+  --pont-badge-link-border-color-hover: transparent;
+  --pont-badge-link-border-width-t-hover: var(--pont-sem-width-border);
+  --pont-badge-link-border-width-r-hover: var(--pont-sem-width-border);
+  --pont-badge-link-border-width-b-hover: var(--pont-sem-width-border);
+  --pont-badge-link-border-width-l-hover: var(--pont-sem-width-border);
+
+  --pont-badge-link-outline-w-hover: 0px;
+  --pont-badge-link-outline-color-hover: transparent;
+  --pont-badge-link-outline-style-hover: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-badge-link-outline-offset-hover: 0px;
 
-  --pont-badge-color-border-invalid: hsl(var(--pont-sem-color-border-invalid));
-  --pont-badge-width-ring-invalid: var(--pont-sem-width-ring);
-  --pont-badge-color-ring-invalid: hsl(var(--pont-sem-color-ring-destructive));
+  /* EFFECT */
+  --pont-badge-link-effect-shadow-hover: var(--pont-ref-effect-shadow-none);
+  --pont-badge-link-effect-inset-shadow-hover: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-link-effect-inset-ring-hover: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-link-effect-ring-offset-w-hover: 0px;
+  --pont-badge-link-effect-ring-offset-color-hover: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-link-effect-ring-offset-hover: 0 0 0
+    var(--pont-badge-link-effect-ring-offset-w-hover)
+    var(--pont-badge-link-effect-ring-offset-color-hover);
+
+  --pont-badge-link-effect-ring-w-hover: 0px;
+  --pont-badge-link-effect-ring-color-hover: currentColor;
+  --pont-badge-link-effect-ring-hover: 0 0 0
+    calc(
+      var(--pont-badge-link-effect-ring-w-hover) +
+        var(--pont-badge-link-effect-ring-offset-w-hover)
+    )
+    var(--pont-badge-link-effect-ring-color-hover);
 
-  --pont-badge-icon-space-size: var(--pont-sem-space-icon-size-xs);
-}
+  --pont-badge-link-effect-opacity-hover: 100%;
 
-/*
- * --------------------------------------------------
- *  VARIANT TOKENS
- * --------------------------------------------------
- */
+  /* * FOCUS * */
+  /* TYPOGRAPHY */
+  --pont-badge-link-typography-color-focus: hsl(
+    var(--pont-sem-color-text-brand)
+  );
 
-:root {
-  /* * DEFAULT * */
-  --pont-badge-default-color-text: hsl(var(--pont-sem-color-text-brand-on-fill));
-  --pont-badge-default-color-bg: hsl(var(--pont-sem-color-bg-fill-brand));
+  /* BACKGROUND */
+  --pont-badge-link-bg-color-focus: transparent;
 
-  --pont-badge-default-color-bg-hover: hsl(
-    var(--pont-sem-color-bg-fill-brand-hover)
-  );
+  /* BORDER */
+  --pont-badge-link-border-style-focus: var(--pont-ref-border-style-solid);
+  --pont-badge-link-border-color-focus: hsl(var(--pont-sem-color-border-focus));
+  --pont-badge-link-border-width-t-focus: var(--pont-sem-width-border);
+  --pont-badge-link-border-width-r-focus: var(--pont-sem-width-border);
+  --pont-badge-link-border-width-b-focus: var(--pont-sem-width-border);
+  --pont-badge-link-border-width-l-focus: var(--pont-sem-width-border);
 
-  /* * SECONDARY * */
-  --pont-badge-secondary-color-text: hsl(
-    var(--pont-sem-color-text-secondary-on-fill)
+  --pont-badge-link-outline-w-focus: 0px;
+  --pont-badge-link-outline-color-focus: transparent;
+  --pont-badge-link-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
   );
-  --pont-badge-secondary-color-bg: hsl(var(--pont-sem-color-bg-fill-secondary));
+  --pont-badge-link-outline-offset-focus: 0px;
 
-  --pont-badge-secondary-color-bg-hover: hsl(
-    var(--pont-sem-color-bg-fill-secondary-hover)
-  );
+  /* EFFECT */
+  --pont-badge-link-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
+  --pont-badge-link-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-link-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-link-effect-ring-offset-w-focus: 0px;
+  --pont-badge-link-effect-ring-offset-color-focus: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-link-effect-ring-offset-focus: 0 0 0
+    var(--pont-badge-link-effect-ring-offset-w-focus)
+    var(--pont-badge-link-effect-ring-offset-color-focus);
+
+  --pont-badge-link-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
+  --pont-badge-link-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-focus)
+  );
+  --pont-badge-link-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-badge-link-effect-ring-w-focus) +
+        var(--pont-badge-link-effect-ring-offset-w-focus)
+    )
+    var(--pont-badge-link-effect-ring-color-focus);
 
-  /* * OUTLINE * */
-  --pont-badge-outline-color-text: hsl(var(--pont-sem-color-text));
-  --pont-badge-outline-color-border: hsl(var(--pont-sem-color-border));
+  --pont-badge-link-effect-opacity-focus: 100%;
 
-  --pont-badge-outline-color-text-hover: hsl(
-    var(--pont-sem-color-text-secondary-on-fill)
-  );
-  --pont-badge-outline-color-bg-hover: hsl(
-    var(--pont-sem-color-bg-fill-secondary)
+  /* * INVALID * */
+  /* TYPOGRAPHY */
+  --pont-badge-link-typography-color-invalid: hsl(
+    var(--pont-sem-color-text-brand)
   );
 
-  /* * GHOST * */
-  --pont-badge-ghost-color-text-hover: hsl(
-    var(--pont-sem-color-text-secondary-on-fill)
-  );
-  --pont-badge-ghost-color-bg-hover: hsl(var(--pont-sem-color-bg-fill-secondary));
+  /* BACKGROUND */
+  --pont-badge-link-bg-color-invalid: transparent;
 
-  /* * DESTRUCTIVE * */
-  --pont-badge-destructive-color-text: hsl(
-    var(--pont-sem-color-text-destructive-secondary-on-fill)
-  );
-  --pont-badge-destructive-color-bg: hsl(
-    var(--pont-sem-color-bg-fill-destructive-secondary)
+  /* BORDER */
+  --pont-badge-link-border-style-invalid: var(--pont-ref-border-style-solid);
+  --pont-badge-link-border-color-invalid: hsl(
+    var(--pont-sem-color-border-invalid)
   );
+  --pont-badge-link-border-width-t-invalid: var(--pont-sem-width-border);
+  --pont-badge-link-border-width-r-invalid: var(--pont-sem-width-border);
+  --pont-badge-link-border-width-b-invalid: var(--pont-sem-width-border);
+  --pont-badge-link-border-width-l-invalid: var(--pont-sem-width-border);
 
-  --pont-badge-destructive-color-bg-hover: hsl(
-    var(--pont-sem-color-bg-fill-destructive-secondary-hover)
+  --pont-badge-link-outline-w-invalid: 0px;
+  --pont-badge-link-outline-color-invalid: transparent;
+  --pont-badge-link-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
   );
+  --pont-badge-link-outline-offset-invalid: 0px;
 
-  --pont-badge-destructive-color-ring-focus: hsl(
+  /* EFFECT */
+  --pont-badge-link-effect-shadow-invalid: var(--pont-ref-effect-shadow-none);
+  --pont-badge-link-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-badge-link-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-badge-link-effect-ring-offset-w-invalid: 0px;
+  --pont-badge-link-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-badge-link-effect-ring-offset-invalid: 0 0 0
+    var(--pont-badge-link-effect-ring-offset-w-invalid)
+    var(--pont-badge-link-effect-ring-offset-color-invalid);
+
+  --pont-badge-link-effect-ring-w-invalid: var(--pont-sem-width-ring);
+  --pont-badge-link-effect-ring-color-invalid: hsl(
     var(--pont-sem-color-ring-destructive)
   );
+  --pont-badge-link-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-badge-link-effect-ring-w-invalid) +
+        var(--pont-badge-link-effect-ring-offset-w-invalid)
+    )
+    var(--pont-badge-link-effect-ring-color-invalid);
 
-  /* * LINK * */
-  --pont-badge-link-color-text: hsl(var(--pont-sem-color-text-brand));
+  --pont-badge-link-effect-opacity-invalid: 100%;
 }
 
 /*
@@ -5462,7 +6820,8 @@
  */
 
 :root {
-  --pont-spinner-space-size: var(--pont-sem-space-icon-size);
+  --pont-spinner-sizing-w: var(--pont-sem-space-icon-size);
+  --pont-spinner-sizing-h: var(--pont-sem-space-icon-size);
 
   --pont-spinner-motion-duration: var(--pont-sem-motion-duration-slow);
   --pont-spinner-motion-fn: var(--pont-ref-motion-fn-linear);
@@ -6797,67 +8156,78 @@ pont-avatar-group-count {
 
 pont-badge {
   display: inline-flex;
+
   flex-shrink: 0;
+
+  width: var(--pont-badge-sizing-w);
+  height: var(--pont-badge-sizing-h);
 }
 
-pont-badge > [data-slot='badge'] {
-  display: inline-flex;
-  align-items: center;
+[data-pont-badge] {
+  display: flex;
+  overflow: hidden;
+
+  -moz-column-gap: var(--pont-badge-layout-gap-x);
+
+       column-gap: var(--pont-badge-layout-gap-x);
+  row-gap: var(--pont-badge-layout-gap-y);
   justify-content: center;
-  gap: var(--pont-badge-space-gap);
-  flex-shrink: 0;
-  padding-inline: var(--pont-badge-space-px);
-  padding-block: var(--pont-badge-space-py);
-  width: -moz-fit-content;
-  width: fit-content;
-  font-family: var(--pont-badge-font-family);
-  font-size: var(--pont-badge-font-size);
-  line-height: var(--pont-badge-font-line-height);
-  font-weight: var(--pont-badge-font-weight);
+  align-items: center;
+
+  padding-top: var(--pont-badge-spacing-pt);
+  padding-right: var(--pont-badge-spacing-pr);
+  padding-bottom: var(--pont-badge-spacing-pb);
+  padding-left: var(--pont-badge-spacing-pl);
+
+  width: var(--pont-badge-sizing-w);
+  height: var(--pont-badge-sizing-h);
+
+  font-family: var(--pont-badge-typography-font);
+  font-size: var(--pont-badge-typography-size);
+  font-weight: var(--pont-badge-typography-weight);
+  letter-spacing: var(--pont-badge-typography-tracking);
+  line-height: var(--pont-badge-typography-leading);
+
   white-space: nowrap;
-  border: var(--pont-badge-width-border) solid var(--pont-badge-color-border);
-  border-radius: var(--pont-badge-radius);
-  transition-property:
-    color, background-color, border-color, outline-color, text-decoration-color,
-    fill, stroke, box-shadow;
-  transition-timing-function: var(--pont-badge-motion-fn);
+
+  border-top-left-radius: var(--pont-badge-border-radius-tl);
+  border-top-right-radius: var(--pont-badge-border-radius-tr);
+  border-bottom-right-radius: var(--pont-badge-border-radius-br);
+  border-bottom-left-radius: var(--pont-badge-border-radius-bl);
+
+  transition-property: var(--pont-badge-motion-property);
   transition-duration: var(--pont-badge-motion-duration);
-  overflow: hidden;
+  transition-timing-function: var(--pont-badge-motion-fn);
 }
 
-pont-badge > [data-slot='badge']:has(.pont-icon-inline-start) {
-  padding-left: var(--pont-badge-space-px-has-icon);
+[data-pont-badge]:has(.pont-icon-inline-start) {
+  padding-top: var(--pont-badge-spacing-pt-has-icon-start);
+  padding-right: var(--pont-badge-spacing-pr-has-icon-start);
+  padding-bottom: var(--pont-badge-spacing-pb-has-icon-start);
+  padding-left: var(--pont-badge-spacing-pl-has-icon-start);
 }
 
-pont-badge > [data-slot='badge']:has(.pont-icon-inline-end) {
-  padding-right: var(--pont-badge-space-px-has-icon);
+[data-pont-badge]:has(.pont-icon-inline-end) {
+  padding-top: var(--pont-badge-spacing-pt-has-icon-end);
+  padding-right: var(--pont-badge-spacing-pr-has-icon-end);
+  padding-bottom: var(--pont-badge-spacing-pb-has-icon-end);
+  padding-left: var(--pont-badge-spacing-pl-has-icon-end);
 }
 
-pont-badge > [data-slot='badge']:focus-visible {
-  border-color: var(--pont-badge-color-border-focus);
-  box-shadow:
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 0 var(--pont-badge-width-ring-focus) var(--pont-badge-color-ring-focus),
-    0 0 rgb(0 0 0);
+/* * -------- BADGE > ICON (& SPINNER) -------- * */
+
+[data-pont-badge] > :is(svg, pont-spinner) {
+  pointer-events: none;
 }
 
-pont-badge > [data-slot='badge'][aria-invalid] {
-  border-color: var(--pont-badge-color-border-invalid);
-  box-shadow:
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 0 var(--pont-badge-width-ring-invalid)
-      var(--pont-badge-color-ring-invalid),
-    0 0 rgb(0 0 0);
+[data-pont-badge] > svg {
+  width: var(--pont-badge-icon-sizing-w);
+  height: var(--pont-badge-icon-sizing-h);
 }
 
-pont-badge > [data-slot='badge'] svg {
-  width: var(--pont-badge-icon-space-size);
-  height: var(--pont-badge-icon-space-size);
-  pointer-events: none;
+[data-pont-badge] > pont-spinner {
+  --pont-spinner-sizing-w: var(--pont-badge-icon-sizing-w);
+  --pont-spinner-sizing-h: var(--pont-badge-icon-sizing-h);
 }
 
 /*
@@ -6866,77 +8236,666 @@ pont-badge > [data-slot='badge'] svg {
  * --------------------------------------------------
  */
 
-/* * DEFAULT * */
+/* * -------- DEFAULT -------- * */
+
+[data-pont-badge][data-variant="default"] {
+  color: var(--pont-badge-default-typography-color);
+
+  background-color: var(--pont-badge-default-bg-color);
 
-pont-badge > [data-slot='badge'][data-variant='default'] {
-  color: var(--pont-badge-default-color-text);
-  background-color: var(--pont-badge-default-color-bg);
+  border-style: var(--pont-badge-default-border-style);
+  border-color: var(--pont-badge-default-border-color);
+  border-top-width: var(--pont-badge-default-border-width-t);
+  border-right-width: var(--pont-badge-default-border-width-r);
+  border-bottom-width: var(--pont-badge-default-border-width-b);
+  border-left-width: var(--pont-badge-default-border-width-l);
+
+  outline-width: var(--pont-badge-default-outline-w);
+  outline-color: var(--pont-badge-default-outline-color);
+  outline-style: var(--pont-badge-default-outline-style);
+  outline-offset: var(--pont-badge-default-outline-offset);
+
+  box-shadow:
+    var(--pont-badge-default-effect-inset-shadow),
+    var(--pont-badge-default-effect-inset-ring),
+    var(--pont-badge-default-effect-ring-offset),
+    var(--pont-badge-default-effect-ring),
+    var(--pont-badge-default-effect-shadow);
 }
 
-pont-badge > a[data-slot='badge'][data-variant='default']:hover {
-  background-color: var(--pont-badge-default-color-bg-hover);
+[data-pont-badge][data-variant="default"]:focus-visible {
+  color: var(--pont-badge-default-typography-color-focus);
+
+  background-color: var(--pont-badge-default-bg-color-focus);
+
+  border-style: var(--pont-badge-default-border-style-focus);
+  border-color: var(--pont-badge-default-border-color-focus);
+  border-top-width: var(--pont-badge-default-border-width-t-focus);
+  border-right-width: var(--pont-badge-default-border-width-r-focus);
+  border-bottom-width: var(--pont-badge-default-border-width-b-focus);
+  border-left-width: var(--pont-badge-default-border-width-l-focus);
+
+  outline-width: var(--pont-badge-default-outline-w-focus);
+  outline-color: var(--pont-badge-default-outline-color-focus);
+  outline-style: var(--pont-badge-default-outline-style-focus);
+  outline-offset: var(--pont-badge-default-outline-offset-focus);
+
+  box-shadow:
+    var(--pont-badge-default-effect-inset-shadow-focus),
+    var(--pont-badge-default-effect-inset-ring-focus),
+    var(--pont-badge-default-effect-ring-offset-focus),
+    var(--pont-badge-default-effect-ring-focus),
+    var(--pont-badge-default-effect-shadow-focus);
+
+  opacity: var(--pont-badge-default-effect-opacity-focus);
 }
 
-/* * SECONDARY * */
+[data-pont-badge][data-variant="default"][aria-invalid] {
+  color: var(--pont-badge-default-typography-color-invalid);
+
+  background-color: var(--pont-badge-default-bg-color-invalid);
+
+  border-style: var(--pont-badge-default-border-style-invalid);
+  border-color: var(--pont-badge-default-border-color-invalid);
+  border-top-width: var(--pont-badge-default-border-width-t-invalid);
+  border-right-width: var(--pont-badge-default-border-width-r-invalid);
+  border-bottom-width: var(--pont-badge-default-border-width-b-invalid);
+  border-left-width: var(--pont-badge-default-border-width-l-invalid);
+
+  outline-width: var(--pont-badge-default-outline-w-invalid);
+  outline-color: var(--pont-badge-default-outline-color-invalid);
+  outline-style: var(--pont-badge-default-outline-style-invalid);
+  outline-offset: var(--pont-badge-default-outline-offset-invalid);
+
+  box-shadow:
+    var(--pont-badge-default-effect-inset-shadow-invalid),
+    var(--pont-badge-default-effect-inset-ring-invalid),
+    var(--pont-badge-default-effect-ring-offset-invalid),
+    var(--pont-badge-default-effect-ring-invalid),
+    var(--pont-badge-default-effect-shadow-invalid);
+
+  opacity: var(--pont-badge-default-effect-opacity-invalid);
+}
+
+a[data-pont-badge][data-variant="default"]:hover {
+  color: var(--pont-badge-default-typography-color-hover);
+
+  background-color: var(--pont-badge-default-bg-color-hover);
+
+  border-style: var(--pont-badge-default-border-style-hover);
+  border-color: var(--pont-badge-default-border-color-hover);
+  border-top-width: var(--pont-badge-default-border-width-t-hover);
+  border-right-width: var(--pont-badge-default-border-width-r-hover);
+  border-bottom-width: var(--pont-badge-default-border-width-b-hover);
+  border-left-width: var(--pont-badge-default-border-width-l-hover);
 
-pont-badge > [data-slot='badge'][data-variant='secondary'] {
-  color: var(--pont-badge-secondary-color-text);
-  background-color: var(--pont-badge-secondary-color-bg);
+  outline-width: var(--pont-badge-default-outline-w-hover);
+  outline-color: var(--pont-badge-default-outline-color-hover);
+  outline-style: var(--pont-badge-default-outline-style-hover);
+  outline-offset: var(--pont-badge-default-outline-offset-hover);
+
+  box-shadow:
+    var(--pont-badge-default-effect-inset-shadow-hover),
+    var(--pont-badge-default-effect-inset-ring-hover),
+    var(--pont-badge-default-effect-ring-offset-hover),
+    var(--pont-badge-default-effect-ring-hover),
+    var(--pont-badge-default-effect-shadow-hover);
+
+  opacity: var(--pont-badge-default-effect-opacity-hover);
 }
 
-pont-badge > a[data-slot='badge'][data-variant='secondary']:hover {
-  background-color: var(--pont-badge-secondary-color-bg-hover);
+/* * -------- SECONDARY -------- * */
+
+[data-pont-badge][data-variant="secondary"] {
+  color: var(--pont-badge-secondary-typography-color);
+
+  background-color: var(--pont-badge-secondary-bg-color);
+
+  border-style: var(--pont-badge-secondary-border-style);
+  border-color: var(--pont-badge-secondary-border-color);
+  border-top-width: var(--pont-badge-secondary-border-width-t);
+  border-right-width: var(--pont-badge-secondary-border-width-r);
+  border-bottom-width: var(--pont-badge-secondary-border-width-b);
+  border-left-width: var(--pont-badge-secondary-border-width-l);
+
+  outline-width: var(--pont-badge-secondary-outline-w);
+  outline-color: var(--pont-badge-secondary-outline-color);
+  outline-style: var(--pont-badge-secondary-outline-style);
+  outline-offset: var(--pont-badge-secondary-outline-offset);
+
+  box-shadow:
+    var(--pont-badge-secondary-effect-inset-shadow),
+    var(--pont-badge-secondary-effect-inset-ring),
+    var(--pont-badge-secondary-effect-ring-offset),
+    var(--pont-badge-secondary-effect-ring),
+    var(--pont-badge-secondary-effect-shadow);
 }
 
-/* * OUTLINE * */
+[data-pont-badge][data-variant="secondary"]:focus-visible {
+  color: var(--pont-badge-secondary-typography-color-focus);
+
+  background-color: var(--pont-badge-secondary-bg-color-focus);
+
+  border-style: var(--pont-badge-secondary-border-style-focus);
+  border-color: var(--pont-badge-secondary-border-color-focus);
+  border-top-width: var(--pont-badge-secondary-border-width-t-focus);
+  border-right-width: var(--pont-badge-secondary-border-width-r-focus);
+  border-bottom-width: var(--pont-badge-secondary-border-width-b-focus);
+  border-left-width: var(--pont-badge-secondary-border-width-l-focus);
 
-pont-badge > [data-slot='badge'][data-variant='outline'] {
-  color: var(--pont-badge-outline-color-text);
-  border-color: var(--pont-badge-outline-color-border);
+  outline-width: var(--pont-badge-secondary-outline-w-focus);
+  outline-color: var(--pont-badge-secondary-outline-color-focus);
+  outline-style: var(--pont-badge-secondary-outline-style-focus);
+  outline-offset: var(--pont-badge-secondary-outline-offset-focus);
+
+  box-shadow:
+    var(--pont-badge-secondary-effect-inset-shadow-focus),
+    var(--pont-badge-secondary-effect-inset-ring-focus),
+    var(--pont-badge-secondary-effect-ring-offset-focus),
+    var(--pont-badge-secondary-effect-ring-focus),
+    var(--pont-badge-secondary-effect-shadow-focus);
+
+  opacity: var(--pont-badge-secondary-effect-opacity-focus);
 }
 
-pont-badge > a[data-slot='badge'][data-variant='outline']:hover {
-  color: var(--pont-badge-outline-color-text-hover);
-  background-color: var(--pont-badge-outline-color-bg-hover);
+[data-pont-badge][data-variant="secondary"][aria-invalid] {
+  color: var(--pont-badge-secondary-typography-color-invalid);
+
+  background-color: var(--pont-badge-secondary-bg-color-invalid);
+
+  border-style: var(--pont-badge-secondary-border-style-invalid);
+  border-color: var(--pont-badge-secondary-border-color-invalid);
+  border-top-width: var(--pont-badge-secondary-border-width-t-invalid);
+  border-right-width: var(--pont-badge-secondary-border-width-r-invalid);
+  border-bottom-width: var(--pont-badge-secondary-border-width-b-invalid);
+  border-left-width: var(--pont-badge-secondary-border-width-l-invalid);
+
+  outline-width: var(--pont-badge-secondary-outline-w-invalid);
+  outline-color: var(--pont-badge-secondary-outline-color-invalid);
+  outline-style: var(--pont-badge-secondary-outline-style-invalid);
+  outline-offset: var(--pont-badge-secondary-outline-offset-invalid);
+
+  box-shadow:
+    var(--pont-badge-secondary-effect-inset-shadow-invalid),
+    var(--pont-badge-secondary-effect-inset-ring-invalid),
+    var(--pont-badge-secondary-effect-ring-offset-invalid),
+    var(--pont-badge-secondary-effect-ring-invalid),
+    var(--pont-badge-secondary-effect-shadow-invalid);
+
+  opacity: var(--pont-badge-secondary-effect-opacity-invalid);
 }
 
-/* * GHOST * */
+a[data-pont-badge][data-variant="secondary"]:hover {
+  color: var(--pont-badge-secondary-typography-color-hover);
+
+  background-color: var(--pont-badge-secondary-bg-color-hover);
+
+  border-style: var(--pont-badge-secondary-border-style-hover);
+  border-color: var(--pont-badge-secondary-border-color-hover);
+  border-top-width: var(--pont-badge-secondary-border-width-t-hover);
+  border-right-width: var(--pont-badge-secondary-border-width-r-hover);
+  border-bottom-width: var(--pont-badge-secondary-border-width-b-hover);
+  border-left-width: var(--pont-badge-secondary-border-width-l-hover);
 
-pont-badge > a[data-slot='badge'][data-variant='ghost']:hover {
-  color: var(--pont-badge-ghost-color-text-hover);
-  background-color: var(--pont-badge-ghost-color-bg-hover);
+  outline-width: var(--pont-badge-secondary-outline-w-hover);
+  outline-color: var(--pont-badge-secondary-outline-color-hover);
+  outline-style: var(--pont-badge-secondary-outline-style-hover);
+  outline-offset: var(--pont-badge-secondary-outline-offset-hover);
+
+  box-shadow:
+    var(--pont-badge-secondary-effect-inset-shadow-hover),
+    var(--pont-badge-secondary-effect-inset-ring-hover),
+    var(--pont-badge-secondary-effect-ring-offset-hover),
+    var(--pont-badge-secondary-effect-ring-hover),
+    var(--pont-badge-secondary-effect-shadow-hover);
+
+  opacity: var(--pont-badge-secondary-effect-opacity-hover);
 }
 
-/* * DESTRUCTIVE * */
+/* * -------- OUTLINE -------- * */
 
-pont-badge > [data-slot='badge'][data-variant='destructive'] {
-  color: var(--pont-badge-destructive-color-text);
-  background-color: var(--pont-badge-destructive-color-bg);
+[data-pont-badge][data-variant="outline"] {
+  color: var(--pont-badge-outline-typography-color);
+
+  background-color: var(--pont-badge-outline-bg-color);
+
+  border-style: var(--pont-badge-outline-border-style);
+  border-color: var(--pont-badge-outline-border-color);
+  border-top-width: var(--pont-badge-outline-border-width-t);
+  border-right-width: var(--pont-badge-outline-border-width-r);
+  border-bottom-width: var(--pont-badge-outline-border-width-b);
+  border-left-width: var(--pont-badge-outline-border-width-l);
+
+  outline-width: var(--pont-badge-outline-outline-w);
+  outline-color: var(--pont-badge-outline-outline-color);
+  outline-style: var(--pont-badge-outline-outline-style);
+  outline-offset: var(--pont-badge-outline-outline-offset);
+
+  box-shadow:
+    var(--pont-badge-outline-effect-inset-shadow),
+    var(--pont-badge-outline-effect-inset-ring),
+    var(--pont-badge-outline-effect-ring-offset),
+    var(--pont-badge-outline-effect-ring),
+    var(--pont-badge-outline-effect-shadow);
 }
 
-pont-badge > a[data-slot='badge'][data-variant='destructive']:hover {
-  background-color: var(--pont-badge-destructive-color-bg-hover);
+[data-pont-badge][data-variant="outline"]:focus-visible {
+  color: var(--pont-badge-outline-typography-color-focus);
+
+  background-color: var(--pont-badge-outline-bg-color-focus);
+
+  border-style: var(--pont-badge-outline-border-style-focus);
+  border-color: var(--pont-badge-outline-border-color-focus);
+  border-top-width: var(--pont-badge-outline-border-width-t-focus);
+  border-right-width: var(--pont-badge-outline-border-width-r-focus);
+  border-bottom-width: var(--pont-badge-outline-border-width-b-focus);
+  border-left-width: var(--pont-badge-outline-border-width-l-focus);
+
+  outline-width: var(--pont-badge-outline-outline-w-focus);
+  outline-color: var(--pont-badge-outline-outline-color-focus);
+  outline-style: var(--pont-badge-outline-outline-style-focus);
+  outline-offset: var(--pont-badge-outline-outline-offset-focus);
+
+  box-shadow:
+    var(--pont-badge-outline-effect-inset-shadow-focus),
+    var(--pont-badge-outline-effect-inset-ring-focus),
+    var(--pont-badge-outline-effect-ring-offset-focus),
+    var(--pont-badge-outline-effect-ring-focus),
+    var(--pont-badge-outline-effect-shadow-focus);
+
+  opacity: var(--pont-badge-outline-effect-opacity-focus);
 }
 
-pont-badge > [data-slot='badge'][data-variant='destructive']:focus-visible {
+[data-pont-badge][data-variant="outline"][aria-invalid] {
+  color: var(--pont-badge-outline-typography-color-invalid);
+
+  background-color: var(--pont-badge-outline-bg-color-invalid);
+
+  border-style: var(--pont-badge-outline-border-style-invalid);
+  border-color: var(--pont-badge-outline-border-color-invalid);
+  border-top-width: var(--pont-badge-outline-border-width-t-invalid);
+  border-right-width: var(--pont-badge-outline-border-width-r-invalid);
+  border-bottom-width: var(--pont-badge-outline-border-width-b-invalid);
+  border-left-width: var(--pont-badge-outline-border-width-l-invalid);
+
+  outline-width: var(--pont-badge-outline-outline-w-invalid);
+  outline-color: var(--pont-badge-outline-outline-color-invalid);
+  outline-style: var(--pont-badge-outline-outline-style-invalid);
+  outline-offset: var(--pont-badge-outline-outline-offset-invalid);
+
   box-shadow:
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 0 var(--pont-badge-width-ring-focus)
-      var(--pont-badge-destructive-color-ring-focus),
-    0 0 rgb(0 0 0);
+    var(--pont-badge-outline-effect-inset-shadow-invalid),
+    var(--pont-badge-outline-effect-inset-ring-invalid),
+    var(--pont-badge-outline-effect-ring-offset-invalid),
+    var(--pont-badge-outline-effect-ring-invalid),
+    var(--pont-badge-outline-effect-shadow-invalid);
+
+  opacity: var(--pont-badge-outline-effect-opacity-invalid);
 }
 
-/* * LINK * */
+a[data-pont-badge][data-variant="outline"]:hover {
+  color: var(--pont-badge-outline-typography-color-hover);
 
-pont-badge > [data-slot='badge'][data-variant='link'] {
-  color: var(--pont-badge-link-color-text);
-  text-underline-offset: 4px;
+  background-color: var(--pont-badge-outline-bg-color-hover);
+
+  border-style: var(--pont-badge-outline-border-style-hover);
+  border-color: var(--pont-badge-outline-border-color-hover);
+  border-top-width: var(--pont-badge-outline-border-width-t-hover);
+  border-right-width: var(--pont-badge-outline-border-width-r-hover);
+  border-bottom-width: var(--pont-badge-outline-border-width-b-hover);
+  border-left-width: var(--pont-badge-outline-border-width-l-hover);
+
+  outline-width: var(--pont-badge-outline-outline-w-hover);
+  outline-color: var(--pont-badge-outline-outline-color-hover);
+  outline-style: var(--pont-badge-outline-outline-style-hover);
+  outline-offset: var(--pont-badge-outline-outline-offset-hover);
+
+  box-shadow:
+    var(--pont-badge-outline-effect-inset-shadow-hover),
+    var(--pont-badge-outline-effect-inset-ring-hover),
+    var(--pont-badge-outline-effect-ring-offset-hover),
+    var(--pont-badge-outline-effect-ring-hover),
+    var(--pont-badge-outline-effect-shadow-hover);
+
+  opacity: var(--pont-badge-outline-effect-opacity-hover);
 }
 
-pont-badge > [data-slot='badge'][data-variant='link']:hover {
-  text-decoration-line: underline;
+/* * -------- GHOST -------- * */
+
+[data-pont-badge][data-variant="ghost"] {
+  color: var(--pont-badge-ghost-typography-color);
+
+  background-color: var(--pont-badge-ghost-bg-color);
+
+  border-style: var(--pont-badge-ghost-border-style);
+  border-color: var(--pont-badge-ghost-border-color);
+  border-top-width: var(--pont-badge-ghost-border-width-t);
+  border-right-width: var(--pont-badge-ghost-border-width-r);
+  border-bottom-width: var(--pont-badge-ghost-border-width-b);
+  border-left-width: var(--pont-badge-ghost-border-width-l);
+
+  outline-width: var(--pont-badge-ghost-outline-w);
+  outline-color: var(--pont-badge-ghost-outline-color);
+  outline-style: var(--pont-badge-ghost-outline-style);
+  outline-offset: var(--pont-badge-ghost-outline-offset);
+
+  box-shadow:
+    var(--pont-badge-ghost-effect-inset-shadow),
+    var(--pont-badge-ghost-effect-inset-ring),
+    var(--pont-badge-ghost-effect-ring-offset),
+    var(--pont-badge-ghost-effect-ring), var(--pont-badge-ghost-effect-shadow);
+}
+
+[data-pont-badge][data-variant="ghost"]:focus-visible {
+  color: var(--pont-badge-ghost-typography-color-focus);
+
+  background-color: var(--pont-badge-ghost-bg-color-focus);
+
+  border-style: var(--pont-badge-ghost-border-style-focus);
+  border-color: var(--pont-badge-ghost-border-color-focus);
+  border-top-width: var(--pont-badge-ghost-border-width-t-focus);
+  border-right-width: var(--pont-badge-ghost-border-width-r-focus);
+  border-bottom-width: var(--pont-badge-ghost-border-width-b-focus);
+  border-left-width: var(--pont-badge-ghost-border-width-l-focus);
+
+  outline-width: var(--pont-badge-ghost-outline-w-focus);
+  outline-color: var(--pont-badge-ghost-outline-color-focus);
+  outline-style: var(--pont-badge-ghost-outline-style-focus);
+  outline-offset: var(--pont-badge-ghost-outline-offset-focus);
+
+  box-shadow:
+    var(--pont-badge-ghost-effect-inset-shadow-focus),
+    var(--pont-badge-ghost-effect-inset-ring-focus),
+    var(--pont-badge-ghost-effect-ring-offset-focus),
+    var(--pont-badge-ghost-effect-ring-focus),
+    var(--pont-badge-ghost-effect-shadow-focus);
+
+  opacity: var(--pont-badge-ghost-effect-opacity-focus);
+}
+
+[data-pont-badge][data-variant="ghost"][aria-invalid] {
+  color: var(--pont-badge-ghost-typography-color-invalid);
+
+  background-color: var(--pont-badge-ghost-bg-color-invalid);
+
+  border-style: var(--pont-badge-ghost-border-style-invalid);
+  border-color: var(--pont-badge-ghost-border-color-invalid);
+  border-top-width: var(--pont-badge-ghost-border-width-t-invalid);
+  border-right-width: var(--pont-badge-ghost-border-width-r-invalid);
+  border-bottom-width: var(--pont-badge-ghost-border-width-b-invalid);
+  border-left-width: var(--pont-badge-ghost-border-width-l-invalid);
+
+  outline-width: var(--pont-badge-ghost-outline-w-invalid);
+  outline-color: var(--pont-badge-ghost-outline-color-invalid);
+  outline-style: var(--pont-badge-ghost-outline-style-invalid);
+  outline-offset: var(--pont-badge-ghost-outline-offset-invalid);
+
+  box-shadow:
+    var(--pont-badge-ghost-effect-inset-shadow-invalid),
+    var(--pont-badge-ghost-effect-inset-ring-invalid),
+    var(--pont-badge-ghost-effect-ring-offset-invalid),
+    var(--pont-badge-ghost-effect-ring-invalid),
+    var(--pont-badge-ghost-effect-shadow-invalid);
+
+  opacity: var(--pont-badge-ghost-effect-opacity-invalid);
+}
+
+a[data-pont-badge][data-variant="ghost"]:hover {
+  color: var(--pont-badge-ghost-typography-color-hover);
+
+  background-color: var(--pont-badge-ghost-bg-color-hover);
+
+  border-style: var(--pont-badge-ghost-border-style-hover);
+  border-color: var(--pont-badge-ghost-border-color-hover);
+  border-top-width: var(--pont-badge-ghost-border-width-t-hover);
+  border-right-width: var(--pont-badge-ghost-border-width-r-hover);
+  border-bottom-width: var(--pont-badge-ghost-border-width-b-hover);
+  border-left-width: var(--pont-badge-ghost-border-width-l-hover);
+
+  outline-width: var(--pont-badge-ghost-outline-w-hover);
+  outline-color: var(--pont-badge-ghost-outline-color-hover);
+  outline-style: var(--pont-badge-ghost-outline-style-hover);
+  outline-offset: var(--pont-badge-ghost-outline-offset-hover);
+
+  box-shadow:
+    var(--pont-badge-ghost-effect-inset-shadow-hover),
+    var(--pont-badge-ghost-effect-inset-ring-hover),
+    var(--pont-badge-ghost-effect-ring-offset-hover),
+    var(--pont-badge-ghost-effect-ring-hover),
+    var(--pont-badge-ghost-effect-shadow-hover);
+
+  opacity: var(--pont-badge-ghost-effect-opacity-hover);
+}
+
+/* * -------- DESTRUCTIVE -------- * */
+
+[data-pont-badge][data-variant="destructive"] {
+  color: var(--pont-badge-destructive-typography-color);
+
+  background-color: var(--pont-badge-destructive-bg-color);
+
+  border-style: var(--pont-badge-destructive-border-style);
+  border-color: var(--pont-badge-destructive-border-color);
+  border-top-width: var(--pont-badge-destructive-border-width-t);
+  border-right-width: var(--pont-badge-destructive-border-width-r);
+  border-bottom-width: var(--pont-badge-destructive-border-width-b);
+  border-left-width: var(--pont-badge-destructive-border-width-l);
+
+  outline-width: var(--pont-badge-destructive-outline-w);
+  outline-color: var(--pont-badge-destructive-outline-color);
+  outline-style: var(--pont-badge-destructive-outline-style);
+  outline-offset: var(--pont-badge-destructive-outline-offset);
+
+  box-shadow:
+    var(--pont-badge-destructive-effect-inset-shadow),
+    var(--pont-badge-destructive-effect-inset-ring),
+    var(--pont-badge-destructive-effect-ring-offset),
+    var(--pont-badge-destructive-effect-ring),
+    var(--pont-badge-destructive-effect-shadow);
+}
+
+[data-pont-badge][data-variant="destructive"]:focus-visible {
+  color: var(--pont-badge-destructive-typography-color-focus);
+
+  background-color: var(--pont-badge-destructive-bg-color-focus);
+
+  border-style: var(--pont-badge-destructive-border-style-focus);
+  border-color: var(--pont-badge-destructive-border-color-focus);
+  border-top-width: var(--pont-badge-destructive-border-width-t-focus);
+  border-right-width: var(--pont-badge-destructive-border-width-r-focus);
+  border-bottom-width: var(--pont-badge-destructive-border-width-b-focus);
+  border-left-width: var(--pont-badge-destructive-border-width-l-focus);
+
+  outline-width: var(--pont-badge-destructive-outline-w-focus);
+  outline-color: var(--pont-badge-destructive-outline-color-focus);
+  outline-style: var(--pont-badge-destructive-outline-style-focus);
+  outline-offset: var(--pont-badge-destructive-outline-offset-focus);
+
+  box-shadow:
+    var(--pont-badge-destructive-effect-inset-shadow-focus),
+    var(--pont-badge-destructive-effect-inset-ring-focus),
+    var(--pont-badge-destructive-effect-ring-offset-focus),
+    var(--pont-badge-destructive-effect-ring-focus),
+    var(--pont-badge-destructive-effect-shadow-focus);
+
+  opacity: var(--pont-badge-destructive-effect-opacity-focus);
+}
+
+[data-pont-badge][data-variant="destructive"][aria-invalid] {
+  color: var(--pont-badge-destructive-typography-color-invalid);
+
+  background-color: var(--pont-badge-destructive-bg-color-invalid);
+
+  border-style: var(--pont-badge-destructive-border-style-invalid);
+  border-color: var(--pont-badge-destructive-border-color-invalid);
+  border-top-width: var(--pont-badge-destructive-border-width-t-invalid);
+  border-right-width: var(--pont-badge-destructive-border-width-r-invalid);
+  border-bottom-width: var(--pont-badge-destructive-border-width-b-invalid);
+  border-left-width: var(--pont-badge-destructive-border-width-l-invalid);
+
+  outline-width: var(--pont-badge-destructive-outline-w-invalid);
+  outline-color: var(--pont-badge-destructive-outline-color-invalid);
+  outline-style: var(--pont-badge-destructive-outline-style-invalid);
+  outline-offset: var(--pont-badge-destructive-outline-offset-invalid);
+
+  box-shadow:
+    var(--pont-badge-destructive-effect-inset-shadow-invalid),
+    var(--pont-badge-destructive-effect-inset-ring-invalid),
+    var(--pont-badge-destructive-effect-ring-offset-invalid),
+    var(--pont-badge-destructive-effect-ring-invalid),
+    var(--pont-badge-destructive-effect-shadow-invalid);
+
+  opacity: var(--pont-badge-destructive-effect-opacity-invalid);
+}
+
+a[data-pont-badge][data-variant="destructive"]:hover {
+  color: var(--pont-badge-destructive-typography-color-hover);
+
+  background-color: var(--pont-badge-destructive-bg-color-hover);
+
+  border-style: var(--pont-badge-destructive-border-style-hover);
+  border-color: var(--pont-badge-destructive-border-color-hover);
+  border-top-width: var(--pont-badge-destructive-border-width-t-hover);
+  border-right-width: var(--pont-badge-destructive-border-width-r-hover);
+  border-bottom-width: var(--pont-badge-destructive-border-width-b-hover);
+  border-left-width: var(--pont-badge-destructive-border-width-l-hover);
+
+  outline-width: var(--pont-badge-destructive-outline-w-hover);
+  outline-color: var(--pont-badge-destructive-outline-color-hover);
+  outline-style: var(--pont-badge-destructive-outline-style-hover);
+  outline-offset: var(--pont-badge-destructive-outline-offset-hover);
+
+  box-shadow:
+    var(--pont-badge-destructive-effect-inset-shadow-hover),
+    var(--pont-badge-destructive-effect-inset-ring-hover),
+    var(--pont-badge-destructive-effect-ring-offset-hover),
+    var(--pont-badge-destructive-effect-ring-hover),
+    var(--pont-badge-destructive-effect-shadow-hover);
+
+  opacity: var(--pont-badge-destructive-effect-opacity-hover);
+}
+
+/* * -------- LINK -------- * */
+
+[data-pont-badge][data-variant="link"] {
+  color: var(--pont-badge-link-typography-color);
+
+  background-color: var(--pont-badge-link-bg-color);
+
+  border-style: var(--pont-badge-link-border-style);
+  border-color: var(--pont-badge-link-border-color);
+  border-top-width: var(--pont-badge-link-border-width-t);
+  border-right-width: var(--pont-badge-link-border-width-r);
+  border-bottom-width: var(--pont-badge-link-border-width-b);
+  border-left-width: var(--pont-badge-link-border-width-l);
+
+  outline-width: var(--pont-badge-link-outline-w);
+  outline-color: var(--pont-badge-link-outline-color);
+  outline-style: var(--pont-badge-link-outline-style);
+  outline-offset: var(--pont-badge-link-outline-offset);
+
+  box-shadow:
+    var(--pont-badge-link-effect-inset-shadow),
+    var(--pont-badge-link-effect-inset-ring),
+    var(--pont-badge-link-effect-ring-offset),
+    var(--pont-badge-link-effect-ring), var(--pont-badge-link-effect-shadow);
+}
+
+[data-pont-badge][data-variant="link"]:focus-visible {
+  color: var(--pont-badge-link-typography-color-focus);
+
+  background-color: var(--pont-badge-link-bg-color-focus);
+
+  border-style: var(--pont-badge-link-border-style-focus);
+  border-color: var(--pont-badge-link-border-color-focus);
+  border-top-width: var(--pont-badge-link-border-width-t-focus);
+  border-right-width: var(--pont-badge-link-border-width-r-focus);
+  border-bottom-width: var(--pont-badge-link-border-width-b-focus);
+  border-left-width: var(--pont-badge-link-border-width-l-focus);
+
+  outline-width: var(--pont-badge-link-outline-w-focus);
+  outline-color: var(--pont-badge-link-outline-color-focus);
+  outline-style: var(--pont-badge-link-outline-style-focus);
+  outline-offset: var(--pont-badge-link-outline-offset-focus);
+
+  box-shadow:
+    var(--pont-badge-link-effect-inset-shadow-focus),
+    var(--pont-badge-link-effect-inset-ring-focus),
+    var(--pont-badge-link-effect-ring-offset-focus),
+    var(--pont-badge-link-effect-ring-focus),
+    var(--pont-badge-link-effect-shadow-focus);
+
+  opacity: var(--pont-badge-link-effect-opacity-focus);
+}
+
+[data-pont-badge][data-variant="link"][aria-invalid] {
+  color: var(--pont-badge-link-typography-color-invalid);
+
+  background-color: var(--pont-badge-link-bg-color-invalid);
+
+  border-style: var(--pont-badge-link-border-style-invalid);
+  border-color: var(--pont-badge-link-border-color-invalid);
+  border-top-width: var(--pont-badge-link-border-width-t-invalid);
+  border-right-width: var(--pont-badge-link-border-width-r-invalid);
+  border-bottom-width: var(--pont-badge-link-border-width-b-invalid);
+  border-left-width: var(--pont-badge-link-border-width-l-invalid);
+
+  outline-width: var(--pont-badge-link-outline-w-invalid);
+  outline-color: var(--pont-badge-link-outline-color-invalid);
+  outline-style: var(--pont-badge-link-outline-style-invalid);
+  outline-offset: var(--pont-badge-link-outline-offset-invalid);
+
+  box-shadow:
+    var(--pont-badge-link-effect-inset-shadow-invalid),
+    var(--pont-badge-link-effect-inset-ring-invalid),
+    var(--pont-badge-link-effect-ring-offset-invalid),
+    var(--pont-badge-link-effect-ring-invalid),
+    var(--pont-badge-link-effect-shadow-invalid);
+
+  opacity: var(--pont-badge-link-effect-opacity-invalid);
+}
+
+[data-pont-badge][data-variant="link"]:hover {
+  text-decoration-line: var(--pont-badge-link-typography-decoration-line-hover);
+  text-decoration-color: var(
+    --pont-badge-link-typography-decoration-color-hover
+  );
+  text-decoration-style: var(
+    --pont-badge-link-typography-decoration-style-hover
+  );
+  text-decoration-thickness: var(
+    --pont-badge-link-typography-decoration-thickness-hover
+  );
+  text-underline-offset: var(
+    --pont-badge-link-typography-underline-offset-hover
+  );
+}
+
+a[data-pont-badge][data-variant="link"]:hover {
+  color: var(--pont-badge-link-typography-color-hover);
+
+  background-color: var(--pont-badge-link-bg-color-hover);
+
+  border-style: var(--pont-badge-link-border-style-hover);
+  border-color: var(--pont-badge-link-border-color-hover);
+  border-top-width: var(--pont-badge-link-border-width-t-hover);
+  border-right-width: var(--pont-badge-link-border-width-r-hover);
+  border-bottom-width: var(--pont-badge-link-border-width-b-hover);
+  border-left-width: var(--pont-badge-link-border-width-l-hover);
+
+  outline-width: var(--pont-badge-link-outline-w-hover);
+  outline-color: var(--pont-badge-link-outline-color-hover);
+  outline-style: var(--pont-badge-link-outline-style-hover);
+  outline-offset: var(--pont-badge-link-outline-offset-hover);
+
+  box-shadow:
+    var(--pont-badge-link-effect-inset-shadow-hover),
+    var(--pont-badge-link-effect-inset-ring-hover),
+    var(--pont-badge-link-effect-ring-offset-hover),
+    var(--pont-badge-link-effect-ring-hover),
+    var(--pont-badge-link-effect-shadow-hover);
+
+  opacity: var(--pont-badge-link-effect-opacity-hover);
 }
 
 /*
@@ -9617,8 +11576,8 @@ pont-spinner {
 }
 
 pont-spinner > [data-slot=spinner] {
-  width: var(--pont-spinner-space-size);
-  height: var(--pont-spinner-space-size);
+  width: var(--pont-spinner-sizing-w);
+  height: var(--pont-spinner-sizing-h);
   animation: pont-spinner-motion-spin var(--pont-spinner-motion-duration) var(--pont-spinner-motion-fn) infinite;
 }
 
@@ -13364,8 +15323,11 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
-pont-member-management pont-badge[variant="secondary"] {
-  --pont-badge-radius: var(--pont-member-management-badge-radius);
+pont-member-management [data-pont-badge][data-variant="secondary"] {
+  --pont-badge-border-radius-tl: var(--pont-member-management-badge-radius);
+  --pont-badge-border-radius-tr: var(--pont-member-management-badge-radius);
+  --pont-badge-border-radius-br: var(--pont-member-management-badge-radius);
+  --pont-badge-border-radius-bl: var(--pont-member-management-badge-radius);
 }
 
 pont-member-management