@pontive/pontkit-core 1.11.1 → 1.13.0

package/dist/styles.css

@@ -640,6 +640,33 @@
   --pont-ref-layout-inset-neg-full: -100%;
 }
 
+/* * -------- FLEXBOX & GRID -------- * */
+
+:root {
+  /* * JUSTIFY CONTENT * */
+  --pont-ref-layout-justify-start: flex-start;
+  --pont-ref-layout-justify-end: flex-end;
+  --pont-ref-layout-justify-end-safe: safe flex-end;
+  --pont-ref-layout-justify-center: center;
+  --pont-ref-layout-justify-center-safe: safe center;
+  --pont-ref-layout-justify-between: space-between;
+  --pont-ref-layout-justify-around: space-around;
+  --pont-ref-layout-justify-evenly: space-evenly;
+  --pont-ref-layout-justify-stretch: stretch;
+  --pont-ref-layout-justify-baseline: baseline;
+  --pont-ref-layout-justify-normal: normal;
+
+  /* * ALIGN ITEMS * */
+  --pont-ref-layout-items-start: flex-start;
+  --pont-ref-layout-items-end: flex-end;
+  --pont-ref-layout-items-end-safe: safe flex-end;
+  --pont-ref-layout-items-center: center;
+  --pont-ref-layout-items-center-safe: safe center;
+  --pont-ref-layout-items-baseline: baseline;
+  --pont-ref-layout-items-baseline-last: last baseline;
+  --pont-ref-layout-items-stretch: stretch;
+}
+
 /*
  * ===========================================================================
  *  SIZING REFERENCE TOKENS
@@ -650,6 +677,7 @@
 :root {
   /* * WIDTH * */
   --pont-ref-sizing-w-auto: auto;
+  --pont-ref-sizing-w-px: 1px;
   --pont-ref-sizing-w-full: 100%;
   --pont-ref-sizing-w-screen: 100vw;
   --pont-ref-sizing-w-dvw: 100dvw;
@@ -664,6 +692,7 @@
 
   /* * HEIGHT * */
   --pont-ref-sizing-h-auto: auto;
+  --pont-ref-sizing-h-px: 1px;
   --pont-ref-sizing-h-full: 100%;
   --pont-ref-sizing-h-screen: 100vh;
   --pont-ref-sizing-h-dvh: 100dvh;
@@ -679,6 +708,7 @@
 
   /* * MIN WIDTH * */
   --pont-ref-sizing-min-w-auto: auto;
+  --pont-ref-sizing-min-w-px: 1px;
   --pont-ref-sizing-min-w-full: 100%;
   --pont-ref-sizing-min-w-screen: 100vw;
   --pont-ref-sizing-min-w-dvw: 100dvw;
@@ -693,6 +723,7 @@
 
   /* * MAX WIDTH * */
   --pont-ref-sizing-max-w-none: none;
+  --pont-ref-sizing-max-w-px: 1px;
   --pont-ref-sizing-max-w-full: 100%;
   --pont-ref-sizing-max-w-dvw: 100dvw;
   --pont-ref-sizing-max-w-dvh: 100dvh;
@@ -706,6 +737,7 @@
   --pont-ref-sizing-max-w-fit: fit-content;
 
   /* * MIN HEIGHT * */
+  --pont-ref-sizing-min-h-px: 1px;
   --pont-ref-sizing-min-h-full: 100%;
   --pont-ref-sizing-min-h-screen: 100vh;
   --pont-ref-sizing-min-h-dvh: 100dvh;
@@ -722,6 +754,7 @@
 
   /* * MAX HEIGHT * */
   --pont-ref-sizing-max-h-none: none;
+  --pont-ref-sizing-max-h-px: 1px;
   --pont-ref-sizing-max-h-full: 100%;
   --pont-ref-sizing-max-h-screen: 100vh;
   --pont-ref-sizing-max-h-dvh: 100dvh;
@@ -795,6 +828,12 @@
   /* * FIELD SIZING * */
   --pont-ref-interactivity-field-sizing-fixed: fixed;
   --pont-ref-interactivity-field-sizing-content: content;
+
+  /* * USER SELECT * */
+  --pont-ref-interactivity-select-none: none;
+  --pont-ref-interactivity-select-text: text;
+  --pont-ref-interactivity-select-all: all;
+  --pont-ref-interactivity-select-auto: auto;
 }
 
 /*
@@ -912,6 +951,8 @@
   --pont-sem-color-bg-fill-tertiary: var(--pont-ref-color-white);
   --pont-sem-color-bg-fill-tertiary-hover: var(--pont-ref-color-base-100);
 
+  --pont-sem-color-bg-fill-transparent-hover: var(--pont-ref-color-base-100);
+
   /* Used for select */
   --pont-sem-color-bg-fill-quaternary: var(--pont-ref-color-transparent);
   --pont-sem-color-bg-fill-quaternary-hover: var(--pont-ref-color-transparent);
@@ -1197,6 +1238,8 @@
   --pont-sem-color-bg-fill-tertiary-hover: var(--pont-ref-color-white) /
     var(--pont-ref-opacity-7-5);
 
+  --pont-sem-color-bg-fill-transparent-hover: var(--pont-ref-color-base-800) / 50%;
+
   /* Used for select */
   --pont-sem-color-bg-fill-quaternary: var(--pont-ref-color-white) /
     var(--pont-ref-opacity-4-5);
@@ -2354,8 +2397,8 @@
   /* BORDER */
   --pont-callout-border-radius-tl: var(--pont-ref-radius-lg);
   --pont-callout-border-radius-tr: var(--pont-ref-radius-lg);
-  --pont-callout-border-radius-bl: var(--pont-ref-radius-lg);
   --pont-callout-border-radius-br: var(--pont-ref-radius-lg);
+  --pont-callout-border-radius-bl: var(--pont-ref-radius-lg);
 }
 
 /* * -------- VARIANTS -------- * */
@@ -4073,9 +4116,8 @@
   );
 
   /* BACKGROUND */
-  /* Note: alternative 'dark' theme value defined below */
   --pont-badge-ghost-bg-color-hover: hsl(
-    var(--pont-sem-color-bg-fill-secondary)
+    var(--pont-sem-color-bg-fill-transparent-hover)
   );
 
   /* BORDER */
@@ -4224,12 +4266,6 @@
   --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 {
@@ -4707,240 +4743,1162 @@
   /* * BREADCRUMB SEPARATOR * */
   --pont-breadcrumb-separator-icon-space-size: var(--pont-sem-space-icon-size-sm);
 
-  /* * BREADCRUMB ELLIPSIS * */
-  --pont-breadcrumb-ellipsis-space-size: var(--pont-sem-space-navigation-size);
-  --pont-breadcrumb-ellipsis-icon-space-size: var(--pont-sem-space-icon-size);
+  /* * BREADCRUMB ELLIPSIS * */
+  --pont-breadcrumb-ellipsis-space-size: var(--pont-sem-space-navigation-size);
+  --pont-breadcrumb-ellipsis-icon-space-size: var(--pont-sem-space-icon-size);
+}
+
+/*
+ * ===========================================================================
+ * BUTTON COMPONENT TOKENS
+ * pont-button-*
+ * ===========================================================================
+ */
+
+/* TODO(button-group): once `pont-button-group` has been created...
+add tokens and styles for if the `pont-button` is a `pont-button-group` child,
+set its border radius (all corners) to `--pont-ref-radius-lg` for all sizes. */
+
+/*
+ * --------------------------------------------------
+ * COMMON
+ * --------------------------------------------------
+ */
+
+:root {
+  /* LAYOUT */
+  --pont-button-layout-justify: var(--pont-ref-layout-justify-center);
+  --pont-button-layout-items: var(--pont-ref-layout-items-center);
+
+  /* TYPOGRAPHY */
+  --pont-button-typography-font: var(--pont-sem-font-family-default);
+
+  /* MOTION */
+  --pont-button-motion-property: var(--pont-ref-motion-property-all);
+  --pont-button-motion-duration: var(--pont-sem-motion-duration-default);
+  --pont-button-motion-fn: var(--pont-sem-motion-fn-default);
+
+  /* TRANSFORMS */
+  --pont-button-transform-translate-x-active: 0px;
+  --pont-button-transform-translate-y-active: 1px;
+
+  /* INTERACTIVITY */
+  --pont-button-interactivity-select: var(--pont-ref-interactivity-select-none);
+}
+
+/*
+ * --------------------------------------------------
+ * VARIANTS
+ * --------------------------------------------------
+ */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-button-default-typography-color: hsl(
+    var(--pont-sem-color-text-brand-on-fill)
+  );
+  --pont-button-secondary-typography-color: hsl(
+    var(--pont-sem-color-text-secondary-on-fill)
+  );
+  --pont-button-outline-typography-color: hsl(var(--pont-sem-color-text));
+  --pont-button-ghost-typography-color: hsl(var(--pont-sem-color-text));
+  --pont-button-destructive-typography-color: hsl(
+    var(--pont-sem-color-text-destructive)
+  );
+  --pont-button-link-typography-color: hsl(var(--pont-sem-color-text-brand));
+
+  /* BACKGROUND */
+  --pont-button-default-bg-color: hsl(var(--pont-sem-color-bg-fill-brand));
+  --pont-button-secondary-bg-color: hsl(
+    var(--pont-sem-color-bg-fill-secondary)
+  );
+  --pont-button-outline-bg-color: hsl(var(--pont-sem-color-bg-fill-tertiary));
+  --pont-button-ghost-bg-color: transparent;
+  --pont-button-destructive-bg-color: hsl(
+    var(--pont-sem-color-bg-fill-destructive-secondary)
+  );
+  --pont-button-link-bg-color: transparent;
+
+  /* BORDER */
+  --pont-button-default-border-style: var(--pont-ref-border-style-solid);
+  --pont-button-secondary-border-style: var(--pont-ref-border-style-solid);
+  --pont-button-outline-border-style: var(--pont-ref-border-style-solid);
+  --pont-button-ghost-border-style: var(--pont-ref-border-style-solid);
+  --pont-button-destructive-border-style: var(--pont-ref-border-style-solid);
+  --pont-button-link-border-style: var(--pont-ref-border-style-solid);
+
+  --pont-button-default-border-color: transparent;
+  --pont-button-secondary-border-color: transparent;
+  --pont-button-outline-border-color: hsl(
+    var(--pont-sem-color-border-secondary)
+  );
+  --pont-button-ghost-border-color: transparent;
+  --pont-button-destructive-border-color: transparent;
+  --pont-button-link-border-color: transparent;
+
+  --pont-button-default-border-width-t: var(--pont-sem-width-border);
+  --pont-button-default-border-width-r: var(--pont-sem-width-border);
+  --pont-button-default-border-width-b: var(--pont-sem-width-border);
+  --pont-button-default-border-width-l: var(--pont-sem-width-border);
+
+  --pont-button-secondary-border-width-t: var(--pont-sem-width-border);
+  --pont-button-secondary-border-width-r: var(--pont-sem-width-border);
+  --pont-button-secondary-border-width-b: var(--pont-sem-width-border);
+  --pont-button-secondary-border-width-l: var(--pont-sem-width-border);
+
+  --pont-button-outline-border-width-t: var(--pont-sem-width-border);
+  --pont-button-outline-border-width-r: var(--pont-sem-width-border);
+  --pont-button-outline-border-width-b: var(--pont-sem-width-border);
+  --pont-button-outline-border-width-l: var(--pont-sem-width-border);
+
+  --pont-button-ghost-border-width-t: var(--pont-sem-width-border);
+  --pont-button-ghost-border-width-r: var(--pont-sem-width-border);
+  --pont-button-ghost-border-width-b: var(--pont-sem-width-border);
+  --pont-button-ghost-border-width-l: var(--pont-sem-width-border);
+
+  --pont-button-destructive-border-width-t: var(--pont-sem-width-border);
+  --pont-button-destructive-border-width-r: var(--pont-sem-width-border);
+  --pont-button-destructive-border-width-b: var(--pont-sem-width-border);
+  --pont-button-destructive-border-width-l: var(--pont-sem-width-border);
+
+  --pont-button-link-border-width-t: var(--pont-sem-width-border);
+  --pont-button-link-border-width-r: var(--pont-sem-width-border);
+  --pont-button-link-border-width-b: var(--pont-sem-width-border);
+  --pont-button-link-border-width-l: var(--pont-sem-width-border);
+  --pont-button-secondary-outline-w: 0px;
+  --pont-button-outline-outline-w: 0px;
+  --pont-button-ghost-outline-w: 0px;
+  --pont-button-destructive-outline-w: 0px;
+  --pont-button-link-outline-w: 0px;
+  --pont-button-default-outline-w: 0px;
+
+  --pont-button-default-outline-color: transparent;
+  --pont-button-secondary-outline-color: transparent;
+  --pont-button-outline-outline-color: transparent;
+  --pont-button-ghost-outline-color: transparent;
+  --pont-button-destructive-outline-color: transparent;
+  --pont-button-link-outline-color: transparent;
+
+  --pont-button-default-outline-style: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-secondary-outline-style: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-outline-outline-style: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-ghost-outline-style: var(--pont-ref-border-outline-style-none);
+  --pont-button-destructive-outline-style: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-link-outline-style: var(--pont-ref-border-outline-style-none);
+
+  --pont-button-default-outline-offset: 0px;
+  --pont-button-secondary-outline-offset: 0px;
+  --pont-button-outline-outline-offset: 0px;
+  --pont-button-ghost-outline-offset: 0px;
+  --pont-button-destructive-outline-offset: 0px;
+  --pont-button-link-outline-offset: 0px;
+
+  /* EFFECT */
+  --pont-button-default-effect-shadow: var(--pont-ref-effect-shadow-none);
+  --pont-button-secondary-effect-shadow: var(--pont-ref-effect-shadow-none);
+  --pont-button-outline-effect-shadow: var(--pont-ref-effect-shadow-none);
+  --pont-button-ghost-effect-shadow: var(--pont-ref-effect-shadow-none);
+  --pont-button-destructive-effect-shadow: var(--pont-ref-effect-shadow-none);
+  --pont-button-link-effect-shadow: var(--pont-ref-effect-shadow-none);
+
+  --pont-button-default-effect-inset-shadow: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-secondary-effect-inset-shadow: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-outline-effect-inset-shadow: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-ghost-effect-inset-shadow: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-destructive-effect-inset-shadow: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-link-effect-inset-shadow: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-button-default-effect-inset-ring: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-secondary-effect-inset-ring: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-outline-effect-inset-ring: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-ghost-effect-inset-ring: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-destructive-effect-inset-ring: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-link-effect-inset-ring: inset var(--pont-ref-effect-shadow-none);
+
+  --pont-button-default-effect-ring-offset-w: 0px;
+  --pont-button-secondary-effect-ring-offset-w: 0px;
+  --pont-button-outline-effect-ring-offset-w: 0px;
+  --pont-button-ghost-effect-ring-offset-w: 0px;
+  --pont-button-destructive-effect-ring-offset-w: 0px;
+  --pont-button-link-effect-ring-offset-w: 0px;
+
+  --pont-button-default-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
+  --pont-button-secondary-effect-ring-offset-color: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-button-outline-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
+  --pont-button-ghost-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
+  --pont-button-destructive-effect-ring-offset-color: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-button-link-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
+
+  --pont-button-default-effect-ring-offset: 0 0 0
+    var(--pont-button-default-effect-ring-offset-w)
+    var(--pont-button-default-effect-ring-offset-color);
+  --pont-button-secondary-effect-ring-offset: 0 0 0
+    var(--pont-button-secondary-effect-ring-offset-w)
+    var(--pont-button-secondary-effect-ring-offset-color);
+  --pont-button-outline-effect-ring-offset: 0 0 0
+    var(--pont-button-outline-effect-ring-offset-w)
+    var(--pont-button-outline-effect-ring-offset-color);
+  --pont-button-ghost-effect-ring-offset: 0 0 0
+    var(--pont-button-ghost-effect-ring-offset-w)
+    var(--pont-button-ghost-effect-ring-offset-color);
+  --pont-button-destructive-effect-ring-offset: 0 0 0
+    var(--pont-button-destructive-effect-ring-offset-w)
+    var(--pont-button-destructive-effect-ring-offset-color);
+  --pont-button-link-effect-ring-offset: 0 0 0
+    var(--pont-button-link-effect-ring-offset-w)
+    var(--pont-button-link-effect-ring-offset-color);
+
+  --pont-button-default-effect-ring-w: 0px;
+  --pont-button-secondary-effect-ring-w: 0px;
+  --pont-button-outline-effect-ring-w: 0px;
+  --pont-button-ghost-effect-ring-w: 0px;
+  --pont-button-destructive-effect-ring-w: 0px;
+  --pont-button-link-effect-ring-w: 0px;
+
+  --pont-button-default-effect-ring-color: transparent;
+  --pont-button-secondary-effect-ring-color: transparent;
+  --pont-button-outline-effect-ring-color: transparent;
+  --pont-button-ghost-effect-ring-color: transparent;
+  --pont-button-destructive-effect-ring-color: transparent;
+  --pont-button-link-effect-ring-color: transparent;
+
+  --pont-button-default-effect-ring: 0 0 0
+    calc(
+      var(--pont-button-default-effect-ring-w) +
+        var(--pont-button-default-effect-ring-offset-w)
+    )
+    var(--pont-button-default-effect-ring-color);
+  --pont-button-secondary-effect-ring: 0 0 0
+    calc(
+      var(--pont-button-secondary-effect-ring-w) +
+        var(--pont-button-secondary-effect-ring-offset-w)
+    )
+    var(--pont-button-secondary-effect-ring-color);
+  --pont-button-outline-effect-ring: 0 0 0
+    calc(
+      var(--pont-button-outline-effect-ring-w) +
+        var(--pont-button-outline-effect-ring-offset-w)
+    )
+    var(--pont-button-outline-effect-ring-color);
+  --pont-button-ghost-effect-ring: 0 0 0
+    calc(
+      var(--pont-button-ghost-effect-ring-w) +
+        var(--pont-button-ghost-effect-ring-offset-w)
+    )
+    var(--pont-button-ghost-effect-ring-color);
+  --pont-button-destructive-effect-ring: 0 0 0
+    calc(
+      var(--pont-button-destructive-effect-ring-w) +
+        var(--pont-button-destructive-effect-ring-offset-w)
+    )
+    var(--pont-button-destructive-effect-ring-color);
+  --pont-button-link-effect-ring: 0 0 0
+    calc(
+      var(--pont-button-link-effect-ring-w) +
+        var(--pont-button-link-effect-ring-offset-w)
+    )
+    var(--pont-button-link-effect-ring-color);
+}
+
+/* * -------- STATES -------- * */
+
+/* * EXPANDED * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-button-default-typography-color-expanded: var(
+    --pont-button-default-typography-color
+  );
+  --pont-button-secondary-typography-color-expanded: var(
+    --pont-button-secondary-typography-color
+  );
+  --pont-button-outline-typography-color-expanded: var(
+    --pont-button-outline-typography-color
+  );
+  --pont-button-ghost-typography-color-expanded: var(
+    --pont-button-ghost-typography-color
+  );
+  --pont-button-destructive-typography-color-expanded: var(
+    --pont-button-destructive-typography-color
+  );
+  --pont-button-link-typography-color-expanded: var(
+    --pont-button-link-typography-color
+  );
+
+  /* BACKGROUND */
+  --pont-button-default-bg-color-expanded: var(--pont-button-default-bg-color);
+  --pont-button-secondary-bg-color-expanded: var(
+    --pont-button-secondary-bg-color
+  );
+  --pont-button-outline-bg-color-expanded: hsl(
+    var(--pont-sem-color-bg-fill-secondary)
+  );
+  --pont-button-ghost-bg-color-expanded: hsl(
+    var(--pont-sem-color-bg-fill-secondary)
+  );
+  --pont-button-destructive-bg-color-expanded: hsl(
+    var(--pont-sem-color-bg-fill-destructive-secondary-hover)
+  );
+  --pont-button-link-bg-color-expanded: var(--pont-button-link-bg-color);
+}
+
+/* * HOVER * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-button-default-typography-color-hover: var(
+    --pont-button-default-typography-color
+  );
+  --pont-button-secondary-typography-color-hover: var(
+    --pont-button-secondary-typography-color
+  );
+  --pont-button-outline-typography-color-hover: var(
+    --pont-button-outline-typography-color
+  );
+  --pont-button-ghost-typography-color-hover: var(
+    --pont-button-ghost-typography-color
+  );
+  --pont-button-destructive-typography-color-hover: var(
+    --pont-button-destructive-typography-color
+  );
+  --pont-button-link-typography-color-hover: var(
+    --pont-button-link-typography-color
+  );
+
+  --pont-button-link-typography-decoration-line-hover: var(
+    --pont-ref-typography-decoration-line-underline
+  );
+  --pont-button-link-typography-decoration-color-hover: var(
+    --pont-sem-typography-decoration-color-default
+  );
+  --pont-button-link-typography-decoration-style-hover: var(
+    --pont-sem-typography-decoration-style-default
+  );
+  --pont-button-link-typography-decoration-thickness-hover: var(
+    --pont-sem-typography-decoration-thickness-default
+  );
+  --pont-button-link-typography-underline-offset-hover: 4px;
+
+  /* BACKGROUND */
+  --pont-button-default-bg-color-hover: hsl(
+    var(--pont-sem-color-bg-fill-brand) / 80%
+  );
+  --pont-button-secondary-bg-color-hover: color-mix(
+    in oklch,
+    hsl(var(--pont-sem-color-bg-fill-secondary)),
+    hsl(var(--pont-sem-color-text)) 5%
+  );
+  --pont-button-outline-bg-color-hover: hsl(
+    var(--pont-sem-color-bg-fill-tertiary-hover)
+  );
+  --pont-button-ghost-bg-color-hover: hsl(
+    var(--pont-sem-color-bg-fill-transparent-hover)
+  );
+  --pont-button-destructive-bg-color-hover: hsl(
+    var(--pont-sem-color-bg-fill-destructive-secondary-hover)
+  );
+  --pont-button-link-bg-color-hover: var(--pont-button-link-bg-color);
+}
+
+/* * FOCUS * */
+
+:root {
+  /* BORDER */
+  --pont-button-default-border-style-focus: var(--pont-ref-border-style-solid);
+  --pont-button-secondary-border-style-focus: var(
+    --pont-ref-border-style-solid
+  );
+  --pont-button-outline-border-style-focus: var(--pont-ref-border-style-solid);
+  --pont-button-ghost-border-style-focus: var(--pont-ref-border-style-solid);
+  --pont-button-destructive-border-style-focus: var(
+    --pont-ref-border-style-solid
+  );
+  --pont-button-link-border-style-focus: var(--pont-ref-border-style-solid);
+
+  --pont-button-default-border-color-focus: hsl(
+    var(--pont-sem-color-border-focus)
+  );
+  --pont-button-secondary-border-color-focus: hsl(
+    var(--pont-sem-color-border-focus)
+  );
+  --pont-button-outline-border-color-focus: hsl(
+    var(--pont-sem-color-border-focus)
+  );
+  --pont-button-ghost-border-color-focus: hsl(
+    var(--pont-sem-color-border-focus)
+  );
+  --pont-button-destructive-border-color-focus: hsl(
+    var(--pont-sem-color-border-destructive-focus)
+  );
+  --pont-button-link-border-color-focus: hsl(
+    var(--pont-sem-color-border-focus)
+  );
+
+  --pont-button-default-border-width-t-focus: var(--pont-sem-width-border);
+  --pont-button-default-border-width-r-focus: var(--pont-sem-width-border);
+  --pont-button-default-border-width-b-focus: var(--pont-sem-width-border);
+  --pont-button-default-border-width-l-focus: var(--pont-sem-width-border);
+
+  --pont-button-secondary-border-width-t-focus: var(--pont-sem-width-border);
+  --pont-button-secondary-border-width-r-focus: var(--pont-sem-width-border);
+  --pont-button-secondary-border-width-b-focus: var(--pont-sem-width-border);
+  --pont-button-secondary-border-width-l-focus: var(--pont-sem-width-border);
+
+  --pont-button-outline-border-width-t-focus: var(--pont-sem-width-border);
+  --pont-button-outline-border-width-r-focus: var(--pont-sem-width-border);
+  --pont-button-outline-border-width-b-focus: var(--pont-sem-width-border);
+  --pont-button-outline-border-width-l-focus: var(--pont-sem-width-border);
+
+  --pont-button-ghost-border-width-t-focus: var(--pont-sem-width-border);
+  --pont-button-ghost-border-width-r-focus: var(--pont-sem-width-border);
+  --pont-button-ghost-border-width-b-focus: var(--pont-sem-width-border);
+  --pont-button-ghost-border-width-l-focus: var(--pont-sem-width-border);
+
+  --pont-button-destructive-border-width-t-focus: var(--pont-sem-width-border);
+  --pont-button-destructive-border-width-r-focus: var(--pont-sem-width-border);
+  --pont-button-destructive-border-width-b-focus: var(--pont-sem-width-border);
+  --pont-button-destructive-border-width-l-focus: var(--pont-sem-width-border);
+
+  --pont-button-link-border-width-t-focus: var(--pont-sem-width-border);
+  --pont-button-link-border-width-r-focus: var(--pont-sem-width-border);
+  --pont-button-link-border-width-b-focus: var(--pont-sem-width-border);
+  --pont-button-link-border-width-l-focus: var(--pont-sem-width-border);
+
+  --pont-button-default-outline-w-focus: 0px;
+  --pont-button-secondary-outline-w-focus: 0px;
+  --pont-button-outline-outline-w-focus: 0px;
+  --pont-button-ghost-outline-w-focus: 0px;
+  --pont-button-destructive-outline-w-focus: 0px;
+  --pont-button-link-outline-w-focus: 0px;
+
+  --pont-button-default-outline-color-focus: transparent;
+  --pont-button-secondary-outline-color-focus: transparent;
+  --pont-button-outline-outline-color-focus: transparent;
+  --pont-button-ghost-outline-color-focus: transparent;
+  --pont-button-destructive-outline-color-focus: transparent;
+  --pont-button-link-outline-color-focus: transparent;
+
+  --pont-button-default-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-secondary-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-outline-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-ghost-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-destructive-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-link-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
+  );
+
+  --pont-button-default-outline-offset-focus: 0px;
+  --pont-button-secondary-outline-offset-focus: 0px;
+  --pont-button-outline-outline-offset-focus: 0px;
+  --pont-button-ghost-outline-offset-focus: 0px;
+  --pont-button-destructive-outline-offset-focus: 0px;
+  --pont-button-link-outline-offset-focus: 0px;
+
+  /* EFFECT */
+  --pont-button-default-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
+  --pont-button-secondary-effect-shadow-focus: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-button-outline-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
+  --pont-button-ghost-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
+  --pont-button-destructive-effect-shadow-focus: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-button-link-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
+
+  --pont-button-default-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-secondary-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-outline-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-ghost-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-destructive-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-link-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-button-default-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-secondary-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-outline-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-ghost-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-destructive-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-link-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-button-default-effect-ring-offset-w-focus: 0px;
+  --pont-button-secondary-effect-ring-offset-w-focus: 0px;
+  --pont-button-outline-effect-ring-offset-w-focus: 0px;
+  --pont-button-ghost-effect-ring-offset-w-focus: 0px;
+  --pont-button-destructive-effect-ring-offset-w-focus: 0px;
+  --pont-button-link-effect-ring-offset-w-focus: 0px;
+
+  --pont-button-default-effect-ring-offset-color-focus: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-button-secondary-effect-ring-offset-color-focus: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-button-outline-effect-ring-offset-color-focus: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-button-ghost-effect-ring-offset-color-focus: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-button-destructive-effect-ring-offset-color-focus: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-button-link-effect-ring-offset-color-focus: hsl(
+    var(--pont-sem-color-bg)
+  );
+
+  --pont-button-default-effect-ring-offset-focus: 0 0 0
+    var(--pont-button-default-effect-ring-offset-w-focus)
+    var(--pont-button-default-effect-ring-offset-color-focus);
+  --pont-button-secondary-effect-ring-offset-focus: 0 0 0
+    var(--pont-button-secondary-effect-ring-offset-w-focus)
+    var(--pont-button-secondary-effect-ring-offset-color-focus);
+  --pont-button-outline-effect-ring-offset-focus: 0 0 0
+    var(--pont-button-outline-effect-ring-offset-w-focus)
+    var(--pont-button-outline-effect-ring-offset-color-focus);
+  --pont-button-ghost-effect-ring-offset-focus: 0 0 0
+    var(--pont-button-ghost-effect-ring-offset-w-focus)
+    var(--pont-button-ghost-effect-ring-offset-color-focus);
+  --pont-button-destructive-effect-ring-offset-focus: 0 0 0
+    var(--pont-button-destructive-effect-ring-offset-w-focus)
+    var(--pont-button-destructive-effect-ring-offset-color-focus);
+  --pont-button-link-effect-ring-offset-focus: 0 0 0
+    var(--pont-button-link-effect-ring-offset-w-focus)
+    var(--pont-button-link-effect-ring-offset-color-focus);
+
+  --pont-button-default-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
+  --pont-button-secondary-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
+  --pont-button-outline-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
+  --pont-button-ghost-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
+  --pont-button-destructive-effect-ring-w-focus: var(
+    --pont-sem-width-ring-focus
+  );
+  --pont-button-link-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
+
+  --pont-button-default-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-focus)
+  );
+  --pont-button-secondary-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-focus)
+  );
+  --pont-button-outline-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-focus)
+  );
+  --pont-button-ghost-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-focus)
+  );
+  --pont-button-destructive-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-button-link-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-focus)
+  );
+
+  --pont-button-default-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-button-default-effect-ring-w-focus) +
+        var(--pont-button-default-effect-ring-offset-w-focus)
+    )
+    var(--pont-button-default-effect-ring-color-focus);
+  --pont-button-secondary-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-button-secondary-effect-ring-w-focus) +
+        var(--pont-button-secondary-effect-ring-offset-w-focus)
+    )
+    var(--pont-button-secondary-effect-ring-color-focus);
+  --pont-button-outline-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-button-outline-effect-ring-w-focus) +
+        var(--pont-button-outline-effect-ring-offset-w-focus)
+    )
+    var(--pont-button-outline-effect-ring-color-focus);
+  --pont-button-ghost-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-button-ghost-effect-ring-w-focus) +
+        var(--pont-button-ghost-effect-ring-offset-w-focus)
+    )
+    var(--pont-button-ghost-effect-ring-color-focus);
+  --pont-button-destructive-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-button-destructive-effect-ring-w-focus) +
+        var(--pont-button-destructive-effect-ring-offset-w-focus)
+    )
+    var(--pont-button-destructive-effect-ring-color-focus);
+  --pont-button-link-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-button-link-effect-ring-w-focus) +
+        var(--pont-button-link-effect-ring-offset-w-focus)
+    )
+    var(--pont-button-link-effect-ring-color-focus);
+}
+
+/* * DISABLED * */
+
+:root {
+  /* EFFECT */
+  --pont-button-default-effect-opacity-disabled: var(
+    --pont-sem-opacity-disabled
+  );
+  --pont-button-secondary-effect-opacity-disabled: var(
+    --pont-sem-opacity-disabled
+  );
+  --pont-button-outline-effect-opacity-disabled: var(
+    --pont-sem-opacity-disabled
+  );
+  --pont-button-ghost-effect-opacity-disabled: var(--pont-sem-opacity-disabled);
+  --pont-button-destructive-effect-opacity-disabled: var(
+    --pont-sem-opacity-disabled
+  );
+  --pont-button-link-effect-opacity-disabled: var(--pont-sem-opacity-disabled);
+}
+
+/* * INVALID * */
+
+:root {
+  /* BORDER */
+  --pont-button-default-border-style-invalid: var(
+    --pont-ref-border-style-solid
+  );
+  --pont-button-secondary-border-style-invalid: var(
+    --pont-ref-border-style-solid
+  );
+  --pont-button-outline-border-style-invalid: var(
+    --pont-ref-border-style-solid
+  );
+  --pont-button-ghost-border-style-invalid: var(--pont-ref-border-style-solid);
+  --pont-button-destructive-border-style-invalid: var(
+    --pont-ref-border-style-solid
+  );
+  --pont-button-link-border-style-invalid: var(--pont-ref-border-style-solid);
+
+  --pont-button-default-border-color-invalid: hsl(
+    var(--pont-sem-color-border-invalid-secondary)
+  );
+  --pont-button-secondary-border-color-invalid: hsl(
+    var(--pont-sem-color-border-invalid-secondary)
+  );
+  --pont-button-outline-border-color-invalid: hsl(
+    var(--pont-sem-color-border-invalid-secondary)
+  );
+  --pont-button-ghost-border-color-invalid: hsl(
+    var(--pont-sem-color-border-invalid-secondary)
+  );
+  --pont-button-destructive-border-color-invalid: hsl(
+    var(--pont-sem-color-border-invalid-secondary)
+  );
+  --pont-button-link-border-color-invalid: hsl(
+    var(--pont-sem-color-border-invalid-secondary)
+  );
+
+  --pont-button-default-border-width-t-invalid: var(--pont-sem-width-border);
+  --pont-button-default-border-width-r-invalid: var(--pont-sem-width-border);
+  --pont-button-default-border-width-b-invalid: var(--pont-sem-width-border);
+  --pont-button-default-border-width-l-invalid: var(--pont-sem-width-border);
+
+  --pont-button-secondary-border-width-t-invalid: var(--pont-sem-width-border);
+  --pont-button-secondary-border-width-r-invalid: var(--pont-sem-width-border);
+  --pont-button-secondary-border-width-b-invalid: var(--pont-sem-width-border);
+  --pont-button-secondary-border-width-l-invalid: var(--pont-sem-width-border);
+
+  --pont-button-outline-border-width-t-invalid: var(--pont-sem-width-border);
+  --pont-button-outline-border-width-r-invalid: var(--pont-sem-width-border);
+  --pont-button-outline-border-width-b-invalid: var(--pont-sem-width-border);
+  --pont-button-outline-border-width-l-invalid: var(--pont-sem-width-border);
+
+  --pont-button-ghost-border-width-t-invalid: var(--pont-sem-width-border);
+  --pont-button-ghost-border-width-r-invalid: var(--pont-sem-width-border);
+  --pont-button-ghost-border-width-b-invalid: var(--pont-sem-width-border);
+  --pont-button-ghost-border-width-l-invalid: var(--pont-sem-width-border);
+
+  --pont-button-destructive-border-width-t-invalid: var(
+    --pont-sem-width-border
+  );
+  --pont-button-destructive-border-width-r-invalid: var(
+    --pont-sem-width-border
+  );
+  --pont-button-destructive-border-width-b-invalid: var(
+    --pont-sem-width-border
+  );
+  --pont-button-destructive-border-width-l-invalid: var(
+    --pont-sem-width-border
+  );
+
+  --pont-button-link-border-width-t-invalid: var(--pont-sem-width-border);
+  --pont-button-link-border-width-r-invalid: var(--pont-sem-width-border);
+  --pont-button-link-border-width-b-invalid: var(--pont-sem-width-border);
+  --pont-button-link-border-width-l-invalid: var(--pont-sem-width-border);
+
+  --pont-button-default-outline-w-invalid: 0px;
+  --pont-button-secondary-outline-w-invalid: 0px;
+  --pont-button-outline-outline-w-invalid: 0px;
+  --pont-button-ghost-outline-w-invalid: 0px;
+  --pont-button-destructive-outline-w-invalid: 0px;
+  --pont-button-link-outline-w-invalid: 0px;
+
+  --pont-button-default-outline-color-invalid: transparent;
+  --pont-button-secondary-outline-color-invalid: transparent;
+  --pont-button-outline-outline-color-invalid: transparent;
+  --pont-button-ghost-outline-color-invalid: transparent;
+  --pont-button-destructive-outline-color-invalid: transparent;
+  --pont-button-link-outline-color-invalid: transparent;
+
+  --pont-button-default-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-secondary-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-outline-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-ghost-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-destructive-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-button-link-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
+  );
+
+  --pont-button-default-outline-offset-invalid: 0px;
+  --pont-button-secondary-outline-offset-invalid: 0px;
+  --pont-button-outline-outline-offset-invalid: 0px;
+  --pont-button-ghost-outline-offset-invalid: 0px;
+  --pont-button-destructive-outline-offset-invalid: 0px;
+  --pont-button-link-outline-offset-invalid: 0px;
+
+  /* EFFECT */
+  --pont-button-default-effect-shadow-invalid: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-button-secondary-effect-shadow-invalid: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-button-outline-effect-shadow-invalid: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-button-ghost-effect-shadow-invalid: var(--pont-ref-effect-shadow-none);
+  --pont-button-destructive-effect-shadow-invalid: var(
+    --pont-ref-effect-shadow-none
+  );
+  --pont-button-link-effect-shadow-invalid: var(--pont-ref-effect-shadow-none);
+
+  --pont-button-default-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-secondary-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-outline-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-ghost-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-destructive-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-link-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-button-default-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-secondary-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-outline-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-ghost-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-destructive-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-button-link-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-button-default-effect-ring-offset-w-invalid: 0px;
+  --pont-button-secondary-effect-ring-offset-w-invalid: 0px;
+  --pont-button-outline-effect-ring-offset-w-invalid: 0px;
+  --pont-button-ghost-effect-ring-offset-w-invalid: 0px;
+  --pont-button-destructive-effect-ring-offset-w-invalid: 0px;
+  --pont-button-link-effect-ring-offset-w-invalid: 0px;
+
+  --pont-button-default-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-button-secondary-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-button-outline-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-button-ghost-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-button-destructive-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-button-link-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+
+  --pont-button-default-effect-ring-offset-invalid: 0 0 0
+    var(--pont-button-default-effect-ring-offset-w-invalid)
+    var(--pont-button-default-effect-ring-offset-color-invalid);
+  --pont-button-secondary-effect-ring-offset-invalid: 0 0 0
+    var(--pont-button-secondary-effect-ring-offset-w-invalid)
+    var(--pont-button-secondary-effect-ring-offset-color-invalid);
+  --pont-button-outline-effect-ring-offset-invalid: 0 0 0
+    var(--pont-button-outline-effect-ring-offset-w-invalid)
+    var(--pont-button-outline-effect-ring-offset-color-invalid);
+  --pont-button-ghost-effect-ring-offset-invalid: 0 0 0
+    var(--pont-button-ghost-effect-ring-offset-w-invalid)
+    var(--pont-button-ghost-effect-ring-offset-color-invalid);
+  --pont-button-destructive-effect-ring-offset-invalid: 0 0 0
+    var(--pont-button-destructive-effect-ring-offset-w-invalid)
+    var(--pont-button-destructive-effect-ring-offset-color-invalid);
+  --pont-button-link-effect-ring-offset-invalid: 0 0 0
+    var(--pont-button-link-effect-ring-offset-w-invalid)
+    var(--pont-button-link-effect-ring-offset-color-invalid);
+
+  --pont-button-default-effect-ring-w-invalid: var(
+    --pont-sem-width-ring-invalid
+  );
+  --pont-button-secondary-effect-ring-w-invalid: var(
+    --pont-sem-width-ring-invalid
+  );
+  --pont-button-outline-effect-ring-w-invalid: var(
+    --pont-sem-width-ring-invalid
+  );
+  --pont-button-ghost-effect-ring-w-invalid: var(--pont-sem-width-ring-invalid);
+  --pont-button-destructive-effect-ring-w-invalid: var(
+    --pont-sem-width-ring-invalid
+  );
+  --pont-button-link-effect-ring-w-invalid: var(--pont-sem-width-ring-invalid);
+
+  --pont-button-default-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-button-secondary-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-button-outline-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-button-ghost-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-button-destructive-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-button-link-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+
+  --pont-button-default-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-button-default-effect-ring-w-invalid) +
+        var(--pont-button-default-effect-ring-offset-w-invalid)
+    )
+    var(--pont-button-default-effect-ring-color-invalid);
+  --pont-button-secondary-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-button-secondary-effect-ring-w-invalid) +
+        var(--pont-button-secondary-effect-ring-offset-w-invalid)
+    )
+    var(--pont-button-secondary-effect-ring-color-invalid);
+  --pont-button-outline-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-button-outline-effect-ring-w-invalid) +
+        var(--pont-button-outline-effect-ring-offset-w-invalid)
+    )
+    var(--pont-button-outline-effect-ring-color-invalid);
+  --pont-button-ghost-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-button-ghost-effect-ring-w-invalid) +
+        var(--pont-button-ghost-effect-ring-offset-w-invalid)
+    )
+    var(--pont-button-ghost-effect-ring-color-invalid);
+  --pont-button-destructive-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-button-destructive-effect-ring-w-invalid) +
+        var(--pont-button-destructive-effect-ring-offset-w-invalid)
+    )
+    var(--pont-button-destructive-effect-ring-color-invalid);
+  --pont-button-link-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-button-link-effect-ring-w-invalid) +
+        var(--pont-button-link-effect-ring-offset-w-invalid)
+    )
+    var(--pont-button-link-effect-ring-color-invalid);
 }
 
-/*
- * ===========================================================================
- * BUTTON COMPONENT TOKENS
- * pont-button-*
- * ===========================================================================
- */
-
 /*
  * --------------------------------------------------
- * COMMON
+ * SIZES
  * --------------------------------------------------
  */
 
 :root {
-  --pont-button-font-weight: var(--pont-sem-font-action-weight);
+  /* LAYOUT */
+  --pont-button-layout-gap-x-default: calc(var(--pont-ref-space) * 1.5);
+  --pont-button-layout-gap-y-default: calc(var(--pont-ref-space) * 1.5);
+  --pont-button-layout-gap-x-xs: calc(var(--pont-ref-space) * 1);
+  --pont-button-layout-gap-y-xs: calc(var(--pont-ref-space) * 1);
+  --pont-button-layout-gap-x-sm: calc(var(--pont-ref-space) * 1);
+  --pont-button-layout-gap-y-sm: calc(var(--pont-ref-space) * 1);
+  --pont-button-layout-gap-x-lg: calc(var(--pont-ref-space) * 1.5);
+  --pont-button-layout-gap-y-lg: calc(var(--pont-ref-space) * 1.5);
 
-  --pont-button-width-border: var(--pont-sem-width-border);
-  --pont-button-color-border: hsl(var(--pont-sem-color-border-transparent));
-  --pont-button-radius-in-group: var(--pont-sem-radius-action);
+  /* SPACING */
+  --pont-button-spacing-pt-default: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pr-default: calc(var(--pont-ref-space) * 2.5);
+  --pont-button-spacing-pb-default: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pl-default: calc(var(--pont-ref-space) * 2.5);
 
-  --pont-button-motion-fn: var(--pont-sem-motion-fn-default);
-  --pont-button-motion-duration: var(--pont-sem-motion-duration-default);
+  --pont-button-spacing-pt-xs: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pr-xs: calc(var(--pont-ref-space) * 2);
+  --pont-button-spacing-pb-xs: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pl-xs: calc(var(--pont-ref-space) * 2);
 
-  --pont-button-color-border-focus: hsl(var(--pont-sem-color-border-focus));
-  --pont-button-width-ring-focus: var(--pont-sem-width-ring-focus);
-  --pont-button-color-ring-focus: hsl(var(--pont-sem-color-ring-focus));
+  --pont-button-spacing-pt-sm: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pr-sm: calc(var(--pont-ref-space) * 2.5);
+  --pont-button-spacing-pb-sm: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pl-sm: calc(var(--pont-ref-space) * 2.5);
 
-  --pont-button-opacity-disabled: var(--pont-sem-opacity-disabled);
+  --pont-button-spacing-pt-lg: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pr-lg: calc(var(--pont-ref-space) * 2.5);
+  --pont-button-spacing-pb-lg: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pl-lg: calc(var(--pont-ref-space) * 2.5);
 
-  --pont-button-color-border-invalid: hsl(
-    var(--pont-sem-color-border-invalid-secondary)
-  );
-  --pont-button-width-ring-invalid: var(--pont-sem-width-ring-invalid);
-  --pont-button-color-ring-invalid: hsl(var(--pont-sem-color-ring-destructive));
-  --pont-button-font-family: var(--pont-sem-font-family-default);
-}
+  --pont-button-spacing-pt-icon: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pr-icon: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pb-icon: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pl-icon: calc(var(--pont-ref-space) * 0);
 
-/*
- * --------------------------------------------------
- * VARIANTS
- * --------------------------------------------------
- */
+  --pont-button-spacing-pt-icon-xs: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pr-icon-xs: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pb-icon-xs: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pl-icon-xs: calc(var(--pont-ref-space) * 0);
 
-:root {
-  /* * DEFAULT * */
-  --pont-button-default-color-text: hsl(var(--pont-sem-color-text-brand-on-fill));
-  --pont-button-default-color-bg: hsl(var(--pont-sem-color-bg-fill-brand));
+  --pont-button-spacing-pt-icon-sm: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pr-icon-sm: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pb-icon-sm: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pl-icon-sm: calc(var(--pont-ref-space) * 0);
 
-  --pont-button-default-color-border: var(--pont-button-color-border);
-  --pont-button-default-color-border-focus: var(--pont-button-color-border-focus);
-  --pont-button-default-color-ring-focus: var(--pont-button-color-ring-focus);
+  --pont-button-spacing-pt-icon-lg: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pr-icon-lg: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pb-icon-lg: calc(var(--pont-ref-space) * 0);
+  --pont-button-spacing-pl-icon-lg: calc(var(--pont-ref-space) * 0);
 
-  --pont-button-default-color-bg-hover: hsl(
-    var(--pont-sem-color-bg-fill-brand-hover)
+  /* Has Icon Start/End */
+  --pont-button-spacing-pt-default-has-icon-start: var(
+    --pont-button-spacing-pt-default
   );
-
-  --pont-button-default-opacity-disabled: var(--pont-button-opacity-disabled);
-
-  --pont-button-default-font-family: var(--pont-button-font-family);
-  --pont-button-default-font-weight: var(--pont-button-font-weight);
-  --pont-button-default-font-size: var(--pont-button-font-size);
-  --pont-button-default-width-border: var(--pont-button-width-border);
-  --pont-button-default-radius: var(--pont-button-radius);
-  --pont-button-default-space-size: var(--pont-button-space-size);
-
-  /* * SECONDARY * */
-  --pont-button-secondary-color-text: hsl(
-    var(--pont-sem-color-text-secondary-on-fill)
+  --pont-button-spacing-pr-default-has-icon-start: var(
+    --pont-button-spacing-pr-default
   );
-  --pont-button-secondary-color-bg: hsl(var(--pont-sem-color-bg-fill-secondary));
-  --pont-button-secondary-color-border: var(--pont-button-color-border);
-
-  --pont-button-secondary-color-bg-hover: hsl(
-    var(--pont-sem-color-bg-fill-secondary-hover)
+  --pont-button-spacing-pb-default-has-icon-start: var(
+    --pont-button-spacing-pb-default
+  );
+  --pont-button-spacing-pl-default-has-icon-start: calc(
+    var(--pont-ref-space) * 2
   );
 
-  --pont-button-secondary-color-text-expanded: hsl(
-    var(--pont-sem-color-text-secondary-on-fill)
+  --pont-button-spacing-pt-default-has-icon-end: var(
+    --pont-button-spacing-pt-default
   );
-  --pont-button-secondary-color-bg-expanded: hsl(
-    var(--pont-sem-color-bg-fill-secondary)
+  --pont-button-spacing-pr-default-has-icon-end: calc(
+    var(--pont-ref-space) * 2
   );
-
-  --pont-button-secondary-color-border-focus: var(
-    --pont-button-color-border-focus
+  --pont-button-spacing-pb-default-has-icon-end: var(
+    --pont-button-spacing-pb-default
+  );
+  --pont-button-spacing-pl-default-has-icon-end: var(
+    --pont-button-spacing-pl-default
   );
-  --pont-button-secondary-color-ring-focus: var(--pont-button-color-ring-focus);
-  --pont-button-secondary-font-family: var(--pont-button-font-family);
-  --pont-button-secondary-opacity-disabled: var(--pont-button-opacity-disabled);
-  --pont-button-secondary-font-weight: var(--pont-button-font-weight);
-  --pont-button-secondary-font-size: var(--pont-button-font-size);
-  --pont-button-secondary-width-border: var(--pont-button-width-border);
-  --pont-button-secondary-radius: var(--pont-button-radius);
-  --pont-button-secondary-space-size: var(--pont-button-space-size);
 
-  /* * OUTLINE * */
-  --pont-button-outline-color-text: hsl(var(--pont-sem-color-text));
-  --pont-button-outline-color-bg: hsl(var(--pont-sem-color-bg-fill-tertiary));
-  --pont-button-outline-color-border: hsl(var(--pont-sem-color-border-secondary));
+  --pont-button-spacing-pt-xs-has-icon-start: var(--pont-button-spacing-pt-xs);
+  --pont-button-spacing-pr-xs-has-icon-start: var(--pont-button-spacing-pr-xs);
+  --pont-button-spacing-pb-xs-has-icon-start: var(--pont-button-spacing-pb-xs);
+  --pont-button-spacing-pl-xs-has-icon-start: calc(var(--pont-ref-space) * 1.5);
 
-  --pont-button-outline-color-border-focus: var(--pont-button-color-border-focus);
-  --pont-button-outline-color-ring-focus: var(--pont-button-color-ring-focus);
+  --pont-button-spacing-pt-xs-has-icon-end: var(--pont-button-spacing-pt-xs);
+  --pont-button-spacing-pr-xs-has-icon-end: calc(var(--pont-ref-space) * 1.5);
+  --pont-button-spacing-pb-xs-has-icon-end: var(--pont-button-spacing-pb-xs);
+  --pont-button-spacing-pl-xs-has-icon-end: var(--pont-button-spacing-pl-xs);
 
-  --pont-button-outline-color-text-hover: hsl(var(--pont-sem-color-text));
-  --pont-button-outline-color-bg-hover: hsl(
-    var(--pont-sem-color-bg-fill-tertiary-hover)
-  );
+  --pont-button-spacing-pt-sm-has-icon-start: var(--pont-button-spacing-pt-sm);
+  --pont-button-spacing-pr-sm-has-icon-start: var(--pont-button-spacing-pr-sm);
+  --pont-button-spacing-pb-sm-has-icon-start: var(--pont-button-spacing-pb-sm);
+  --pont-button-spacing-pl-sm-has-icon-start: calc(var(--pont-ref-space) * 1.5);
 
-  --pont-button-outline-color-text-expanded: hsl(var(--pont-sem-color-text));
-  --pont-button-outline-color-bg-expanded: hsl(
-    var(--pont-sem-color-bg-fill-secondary)
-  );
-  --pont-button-outline-font-family: var(--pont-button-font-family);
-  --pont-button-outline-opacity-disabled: var(--pont-button-opacity-disabled);
-  --pont-button-outline-font-weight: var(--pont-button-font-weight);
-  --pont-button-outline-font-size: var(--pont-button-font-size);
-  --pont-button-outline-width-border: var(--pont-button-width-border);
-  --pont-button-outline-radius: var(--pont-button-radius);
-  --pont-button-outline-space-size: var(--pont-button-space-size);
-
-  /* * GHOST * */
-  --pont-button-ghost-color-text-hover: hsl(var(--pont-sem-color-text));
-  --pont-button-ghost-color-bg-hover: hsl(
-    var(--pont-sem-color-bg-fill-tertiary-hover)
-  );
+  --pont-button-spacing-pt-sm-has-icon-end: var(--pont-button-spacing-pt-sm);
+  --pont-button-spacing-pr-sm-has-icon-end: calc(var(--pont-ref-space) * 1.5);
+  --pont-button-spacing-pb-sm-has-icon-end: var(--pont-button-spacing-pb-sm);
+  --pont-button-spacing-pl-sm-has-icon-end: var(--pont-button-spacing-pl-sm);
 
-  --pont-button-ghost-color-text-expanded: hsl(var(--pont-sem-color-text));
-  --pont-button-ghost-color-bg-expanded: hsl(
-    var(--pont-sem-color-bg-fill-secondary)
-  );
-  --pont-button-ghost-font-family: var(--pont-button-font-family);
-  --pont-button-ghost-opacity-disabled: var(--pont-button-opacity-disabled);
-  --pont-button-ghost-font-weight: var(--pont-button-font-weight);
-  --pont-button-ghost-font-size: var(--pont-button-font-size);
-  --pont-button-ghost-width-border: var(--pont-button-width-border);
-  --pont-button-ghost-radius: var(--pont-button-radius);
-  --pont-button-ghost-space-size: var(--pont-button-space-size);
+  --pont-button-spacing-pt-lg-has-icon-start: var(--pont-button-spacing-pt-lg);
+  --pont-button-spacing-pr-lg-has-icon-start: var(--pont-button-spacing-pr-lg);
+  --pont-button-spacing-pb-lg-has-icon-start: var(--pont-button-spacing-pb-lg);
+  --pont-button-spacing-pl-lg-has-icon-start: calc(var(--pont-ref-space) * 2);
 
-  /* * DESTRUCTIVE * */
-  --pont-button-destructive-color-text: hsl(
-    var(--pont-sem-color-text-destructive-secondary-on-fill)
-  );
-  --pont-button-destructive-color-bg: hsl(
-    var(--pont-sem-color-bg-fill-destructive-secondary)
-  );
+  --pont-button-spacing-pt-lg-has-icon-end: var(--pont-button-spacing-pt-lg);
+  --pont-button-spacing-pr-lg-has-icon-end: calc(var(--pont-ref-space) * 2);
+  --pont-button-spacing-pb-lg-has-icon-end: var(--pont-button-spacing-pb-lg);
+  --pont-button-spacing-pl-lg-has-icon-end: var(--pont-button-spacing-pl-lg);
 
-  --pont-button-destructive-color-border: var(--pont-button-color-border);
+  /* SIZING */
+  --pont-button-sizing-w-default: var(--pont-ref-sizing-w-auto);
+  --pont-button-sizing-w-xs: var(--pont-ref-sizing-w-auto);
+  --pont-button-sizing-w-sm: var(--pont-ref-sizing-w-auto);
+  --pont-button-sizing-w-lg: var(--pont-ref-sizing-w-auto);
+  --pont-button-sizing-w-icon: calc(var(--pont-ref-space) * 8);
+  --pont-button-sizing-w-icon-xs: calc(var(--pont-ref-space) * 6);
+  --pont-button-sizing-w-icon-sm: calc(var(--pont-ref-space) * 7);
+  --pont-button-sizing-w-icon-lg: calc(var(--pont-ref-space) * 9);
+
+  --pont-button-sizing-h-default: calc(var(--pont-ref-space) * 8);
+  --pont-button-sizing-h-xs: calc(var(--pont-ref-space) * 6);
+  --pont-button-sizing-h-sm: calc(var(--pont-ref-space) * 7);
+  --pont-button-sizing-h-lg: calc(var(--pont-ref-space) * 9);
+  --pont-button-sizing-h-icon: calc(var(--pont-ref-space) * 8);
+  --pont-button-sizing-h-icon-xs: calc(var(--pont-ref-space) * 6);
+  --pont-button-sizing-h-icon-sm: calc(var(--pont-ref-space) * 7);
+  --pont-button-sizing-h-icon-lg: calc(var(--pont-ref-space) * 9);
 
-  --pont-button-destructive-color-bg-hover: hsl(
-    var(--pont-sem-color-bg-fill-destructive-secondary-hover)
-  );
+  /* TYPOGRAPHY */
+  --pont-button-typography-size-default: var(--pont-ref-font-size-sm);
+  --pont-button-typography-size-xs: var(--pont-ref-font-size-xs);
+  --pont-button-typography-size-sm: 0.8rem;
+  --pont-button-typography-size-lg: var(--pont-ref-font-size-sm);
 
-  --pont-button-destructive-color-border-focus: hsl(
-    var(--pont-sem-color-border-destructive-focus)
+  --pont-button-typography-weight-default: var(--pont-ref-font-weight-medium);
+  --pont-button-typography-weight-xs: var(--pont-ref-font-weight-medium);
+  --pont-button-typography-weight-sm: var(--pont-ref-font-weight-medium);
+  --pont-button-typography-weight-lg: var(--pont-ref-font-weight-medium);
+
+  --pont-button-typography-tracking-default: var(
+    --pont-ref-font-letter-spacing-normal
   );
-  --pont-button-destructive-color-ring-focus: hsl(
-    var(--pont-sem-color-ring-destructive)
+  --pont-button-typography-tracking-xs: var(
+    --pont-ref-font-letter-spacing-normal
+  );
+  --pont-button-typography-tracking-sm: var(
+    --pont-ref-font-letter-spacing-normal
+  );
+  --pont-button-typography-tracking-lg: var(
+    --pont-ref-font-letter-spacing-normal
   );
-  --pont-button-destructive-font-family: var(--pont-button-font-family);
-  --pont-button-destructive-opacity-disabled: var(--pont-button-opacity-disabled);
-  --pont-button-destructive-font-weight: var(--pont-button-font-weight);
-  --pont-button-destructive-font-size: var(--pont-button-font-size);
-  --pont-button-destructive-width-border: var(--pont-button-width-border);
-  --pont-button-destructive-radius: var(--pont-button-radius);
-  --pont-button-destructive-space-size: var(--pont-button-space-size);
 
-  /* * LINK * */
-  --pont-button-link-color-text: hsl(var(--pont-sem-color-text-brand));
-  --pont-button-link-font-family: var(--pont-button-font-family);
-  --pont-button-link-opacity-disabled: var(--pont-button-opacity-disabled);
-  --pont-button-link-font-weight: var(--pont-button-font-weight);
-  --pont-button-link-font-size: var(--pont-button-font-size);
-  --pont-button-link-width-border: var(--pont-button-width-border);
-  --pont-button-link-radius: var(--pont-button-radius);
-  --pont-button-link-space-size: var(--pont-button-space-size);
-}
+  --pont-button-typography-leading-default: var(
+    --pont-ref-font-line-height-of-sm
+  );
+  --pont-button-typography-leading-xs: var(--pont-ref-font-line-height-of-xs);
+  --pont-button-typography-leading-sm: var(--pont-ref-font-line-height-of-sm);
+  --pont-button-typography-leading-lg: var(--pont-ref-font-line-height-of-sm);
 
-/*
- * --------------------------------------------------
- * SIZES
- * --------------------------------------------------
- */
+  /* BORDER */
+  --pont-button-border-radius-tl-default: var(--pont-ref-radius-lg);
+  --pont-button-border-radius-tr-default: var(--pont-ref-radius-lg);
+  --pont-button-border-radius-br-default: var(--pont-ref-radius-lg);
+  --pont-button-border-radius-bl-default: var(--pont-ref-radius-lg);
 
-:root {
-  --pont-button-space-gap: var(--pont-sem-space-action-gap);
-  --pont-button-space-gap-xs: var(--pont-sem-space-action-gap-xs);
-  --pont-button-space-gap-sm: var(--pont-sem-space-action-gap-sm);
-  --pont-button-space-gap-lg: var(--pont-sem-space-action-gap-lg);
+  --pont-button-border-radius-tl-xs: min(var(--pont-ref-radius-md), 10px);
+  --pont-button-border-radius-tr-xs: min(var(--pont-ref-radius-md), 10px);
+  --pont-button-border-radius-br-xs: min(var(--pont-ref-radius-md), 10px);
+  --pont-button-border-radius-bl-xs: min(var(--pont-ref-radius-md), 10px);
 
-  --pont-button-space-px: var(--pont-sem-space-action-px);
-  --pont-button-space-px-xs: var(--pont-sem-space-action-px-xs);
-  --pont-button-space-px-sm: var(--pont-sem-space-action-px);
-  --pont-button-space-px-lg: var(--pont-sem-space-action-px);
+  --pont-button-border-radius-tl-sm: min(var(--pont-ref-radius-md), 12px);
+  --pont-button-border-radius-tr-sm: min(var(--pont-ref-radius-md), 12px);
+  --pont-button-border-radius-br-sm: min(var(--pont-ref-radius-md), 12px);
+  --pont-button-border-radius-bl-sm: min(var(--pont-ref-radius-md), 12px);
 
-  --pont-button-space-px-has-icon: var(--pont-sem-space-action-px-has-icon);
-  --pont-button-space-px-xs-has-icon: var(--pont-sem-space-action-px-sm-has-icon);
-  --pont-button-space-px-sm-has-icon: var(--pont-sem-space-action-px-sm-has-icon);
-  --pont-button-space-px-lg-has-icon: var(--pont-sem-space-action-px-lg-has-icon);
+  --pont-button-border-radius-tl-lg: var(--pont-ref-radius-lg);
+  --pont-button-border-radius-tr-lg: var(--pont-ref-radius-lg);
+  --pont-button-border-radius-br-lg: var(--pont-ref-radius-lg);
+  --pont-button-border-radius-bl-lg: var(--pont-ref-radius-lg);
 
-  --pont-button-space-size: var(--pont-sem-space-action-size);
-  --pont-button-space-size-xs: var(--pont-sem-space-action-size-xs);
-  --pont-button-space-size-sm: var(--pont-sem-space-action-size-sm);
-  --pont-button-space-size-lg: var(--pont-sem-space-action-size-lg);
+  --pont-button-border-radius-tl-icon: var(--pont-ref-radius-lg);
+  --pont-button-border-radius-tr-icon: var(--pont-ref-radius-lg);
+  --pont-button-border-radius-br-icon: var(--pont-ref-radius-lg);
+  --pont-button-border-radius-bl-icon: var(--pont-ref-radius-lg);
 
-  --pont-button-font-size: var(--pont-sem-font-action-size);
-  --pont-button-font-size-xs: var(--pont-sem-font-action-size-xs);
-  --pont-button-font-size-sm: var(--pont-sem-font-action-size-sm);
-  --pont-button-font-size-lg: var(--pont-sem-font-action-size);
+  --pont-button-border-radius-tl-icon-xs: min(var(--pont-ref-radius-md), 10px);
+  --pont-button-border-radius-tr-icon-xs: min(var(--pont-ref-radius-md), 10px);
+  --pont-button-border-radius-br-icon-xs: min(var(--pont-ref-radius-md), 10px);
+  --pont-button-border-radius-bl-icon-xs: min(var(--pont-ref-radius-md), 10px);
 
-  --pont-button-font-line-height: var(--pont-sem-font-action-line-height);
-  --pont-button-font-line-height-xs: var(--pont-sem-font-action-line-height-xs);
-  --pont-button-font-line-height-sm: var(--pont-sem-font-action-line-height-sm);
-  --pont-button-font-line-height-lg: var(--pont-sem-font-action-line-height);
+  --pont-button-border-radius-tl-icon-sm: min(var(--pont-ref-radius-md), 12px);
+  --pont-button-border-radius-tr-icon-sm: min(var(--pont-ref-radius-md), 12px);
+  --pont-button-border-radius-br-icon-sm: min(var(--pont-ref-radius-md), 12px);
+  --pont-button-border-radius-bl-icon-sm: min(var(--pont-ref-radius-md), 12px);
 
-  --pont-button-radius: var(--pont-sem-radius-action);
-  --pont-button-radius-xs: min(
-    var(--pont-sem-radius-action-xs),
-    var(--pont-sem-radius-action-xs-as-px)
-  );
-  --pont-button-radius-sm: min(
-    var(--pont-sem-radius-action-sm),
-    var(--pont-sem-radius-action-sm-as-px)
-  );
-  --pont-button-radius-lg: var(--pont-sem-radius-action-lg);
+  --pont-button-border-radius-tl-icon-lg: var(--pont-ref-radius-lg);
+  --pont-button-border-radius-tr-icon-lg: var(--pont-ref-radius-lg);
+  --pont-button-border-radius-br-icon-lg: var(--pont-ref-radius-lg);
+  --pont-button-border-radius-bl-icon-lg: var(--pont-ref-radius-lg);
+}
+
+/* * -------- BUTTON > ICON (& SPINNER) -------- * */
 
-  --pont-button-icon-space-size: var(--pont-sem-space-icon-size);
-  --pont-button-icon-space-size-xs: var(--pont-sem-space-icon-size-xs);
-  --pont-button-icon-space-size-sm: var(--pont-sem-space-icon-size-sm);
-  --pont-button-icon-space-size-lg: var(--pont-sem-space-icon-size);
+:root {
+  /* SIZING */
+  --pont-button-icon-sizing-w-default: calc(var(--pont-ref-space) * 4);
+  --pont-button-icon-sizing-w-xs: calc(var(--pont-ref-space) * 3);
+  --pont-button-icon-sizing-w-sm: calc(var(--pont-ref-space) * 3.5);
+  --pont-button-icon-sizing-w-lg: calc(var(--pont-ref-space) * 4);
+  --pont-button-icon-sizing-w-icon: calc(var(--pont-ref-space) * 4);
+  --pont-button-icon-sizing-w-icon-xs: calc(var(--pont-ref-space) * 3);
+  --pont-button-icon-sizing-w-icon-sm: calc(var(--pont-ref-space) * 4);
+  --pont-button-icon-sizing-w-icon-lg: calc(var(--pont-ref-space) * 4);
+
+  --pont-button-icon-sizing-h-default: calc(var(--pont-ref-space) * 4);
+  --pont-button-icon-sizing-h-xs: calc(var(--pont-ref-space) * 3);
+  --pont-button-icon-sizing-h-sm: calc(var(--pont-ref-space) * 3.5);
+  --pont-button-icon-sizing-h-lg: calc(var(--pont-ref-space) * 4);
+  --pont-button-icon-sizing-h-icon: calc(var(--pont-ref-space) * 4);
+  --pont-button-icon-sizing-h-icon-xs: calc(var(--pont-ref-space) * 3);
+  --pont-button-icon-sizing-h-icon-sm: calc(var(--pont-ref-space) * 4);
+  --pont-button-icon-sizing-h-icon-lg: calc(var(--pont-ref-space) * 4);
 }
 
 /*
@@ -7158,16 +8116,37 @@ them all being named `--pont-checkbox-icon-*`. */
  * ===========================================================================
  */
 
+/* TODO(label) */
+/* 
+group-data-[disabled=true]:pointer-events-none
+group-data-[disabled=true]:opacity-50
+
+peer-disabled:cursor-not-allowed
+peer-disabled:opacity-50
+*/
+
 :root {
-  --pont-label-font-family: var(--pont-sem-font-family-default);
+  /* LAYOUT */
+  --pont-label-layout-gap-x: calc(var(--pont-ref-space) * 2);
+  --pont-label-layout-gap-y: calc(var(--pont-ref-space) * 2);
+
+  /* TYPOGRAPHY */
+  --pont-label-typography-font: var(--pont-sem-font-family-default);
+  --pont-label-typography-size: var(--pont-ref-font-size-sm);
+  --pont-label-typography-weight: var(--pont-ref-font-weight-medium);
+  --pont-label-typography-tracking: var(--pont-ref-font-letter-spacing-normal);
+  --pont-label-typography-leading: var(--pont-ref-font-line-height-shortest);
+  --pont-label-typography-color: hsl(var(--pont-sem-color-text));
 
-  --pont-label-space-gap: var(--pont-sem-space-form-gap-sm);
+  /* EFFECT */
+  --pont-label-effect-opacity-disabled: var(--pont-sem-opacity-disabled);
+}
 
-  --pont-label-font-size: var(--pont-sem-font-form-label-size);
-  --pont-label-font-line-height: var(--pont-sem-font-form-label-line-height);
-  --pont-label-font-weight: var(--pont-sem-font-form-label-weight);
+/* * -------- DISABLED -------- * */
 
-  --pont-label-opacity-disabled: var(--pont-sem-opacity-disabled);
+:root {
+  /* INTERACTIVITY */
+  --pont-label-interactivity-select: var(--pont-ref-interactivity-select-none);
 }
 
 /*
@@ -7734,9 +8713,36 @@ them all being named `--pont-checkbox-icon-*`. */
  */
 
 :root {
-  --pont-separator-color-bg: hsl(var(--pont-sem-color-border));
-  --pont-separator-horizontal-space-h: var(--pont-sem-width-border);
-  --pont-separator-vertical-space-w: var(--pont-sem-width-border);
+  /* BACKGROUND */
+  --pont-separator-bg-color: hsl(var(--pont-sem-color-border));
+}
+
+/* * -------- ORIENTATIONS -------- * */
+
+/* * HORIZONTAL * */
+
+:root {
+  /* SIZING */
+  --pont-separator-horizontal-sizing-w: var(--pont-ref-sizing-w-full);
+  --pont-separator-horizontal-sizing-h: var(--pont-ref-sizing-h-px);
+
+  --pont-separator-horizontal-sizing-min-w: var(--pont-ref-sizing-min-w-auto);
+  --pont-separator-horizontal-sizing-max-w: var(--pont-ref-sizing-max-w-none);
+  --pont-separator-horizontal-sizing-min-h: var(--pont-ref-sizing-min-h-auto);
+  --pont-separator-horizontal-sizing-max-h: var(--pont-ref-sizing-max-h-none);
+}
+
+/* * VERTICAL * */
+
+:root {
+  /* SIZING */
+  --pont-separator-vertical-sizing-w: var(--pont-ref-sizing-w-px);
+  --pont-separator-vertical-sizing-h: var(--pont-ref-sizing-h-auto);
+
+  --pont-separator-vertical-sizing-min-w: var(--pont-ref-sizing-min-w-auto);
+  --pont-separator-vertical-sizing-max-w: var(--pont-ref-sizing-max-w-none);
+  --pont-separator-vertical-sizing-min-h: var(--pont-ref-sizing-min-h-auto);
+  --pont-separator-vertical-sizing-max-h: var(--pont-ref-sizing-max-h-none);
 }
 
 /*
@@ -8659,8 +9665,8 @@ pont-callout {
 
   border-top-left-radius: var(--pont-callout-border-radius-tl);
   border-top-right-radius: var(--pont-callout-border-radius-tr);
-  border-bottom-left-radius: var(--pont-callout-border-radius-bl);
   border-bottom-right-radius: var(--pont-callout-border-radius-br);
+  border-bottom-left-radius: var(--pont-callout-border-radius-bl);
 }
 
 [data-pont-callout]:has(> :is(svg, pont-spinner)) {
@@ -10466,63 +11472,55 @@ a[data-pont-badge][data-variant="link"]:hover {
 
 pont-button {
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
+
   flex-shrink: 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
 }
 
-pont-button > [data-slot='button'] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+[data-pont-button] {
+  display: flex;
 
-  width: 100%;
-  height: 100%;
+  justify-content: var(--pont-button-layout-justify);
+  align-items: var(--pont-button-layout-items);
+
+  width: var(--pont-ref-sizing-w-full);
+  height: var(--pont-ref-sizing-h-full);
 
-  font-weight: var(--pont-button-font-weight);
+  font-family: var(--pont-button-typography-font);
   white-space: nowrap;
 
   background-clip: padding-box;
 
-  border: var(--pont-button-width-border) solid var(--pont-button-color-border);
-  outline: none;
-
-  transition-property: all;
-  transition-timing-function: var(--pont-button-motion-fn);
+  transition-property: var(--pont-button-motion-property);
   transition-duration: var(--pont-button-motion-duration);
-}
+  transition-timing-function: var(--pont-button-motion-fn);
 
-pont-button > [data-slot='button']:focus-visible {
-  border-color: var(--pont-button-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-button-width-ring-focus) var(--pont-button-color-ring-focus),
-    0 0 rgb(0 0 0);
+  -webkit-user-select: var(--pont-button-interactivity-select);
+
+     -moz-user-select: var(--pont-button-interactivity-select);
+
+          user-select: var(--pont-button-interactivity-select);
 }
 
-pont-button > [data-slot='button']:disabled {
-  opacity: var(--pont-button-opacity-disabled);
+/* * -------- BUTTON > ICON (& SPINNER) -------- * */
+
+[data-pont-button] > :is(svg, pont-spinner) {
+  flex-shrink: 0;
+
   pointer-events: none;
 }
 
-pont-button > [data-slot='button'][aria-invalid] {
-  border-color: var(--pont-button-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-button-width-ring-invalid)
-      var(--pont-button-color-ring-invalid),
-    0 0 rgb(0 0 0);
+/* * -------- STATES -------- * */
+
+/* * ACTIVE (PRESSED) * */
+
+[data-pont-button]:active:not([aria-haspopup]) {
+  translate: var(--pont-button-transform-translate-x-active)
+    var(--pont-button-transform-translate-y-active);
 }
 
-pont-button > [data-slot='button'] > :is(svg, pont-spinner, pont-kbd) {
-  flex-shrink: 0;
+/* * DISABLED * */
+
+[data-pont-button]:disabled {
   pointer-events: none;
 }
 
@@ -10534,184 +11532,525 @@ pont-button > [data-slot='button'] > :is(svg, pont-spinner, pont-kbd) {
 
 /* * DEFAULT * */
 
-pont-button > [data-slot='button'][data-variant='default'] {
-  color: var(--pont-button-default-color-text);
-  background-color: var(--pont-button-default-color-bg);
-  border-color: var(--pont-button-default-color-border);
-  border-width: var(--pont-button-default-width-border);
-  font-family: var(--pont-button-default-font-family);
-  font-weight: var(--pont-button-default-font-weight);
-  font-size: var(--pont-button-default-font-size);
-  border-radius: var(--pont-button-default-radius);
+[data-pont-button][data-variant="default"] {
+  color: var(--pont-button-default-typography-color);
+
+  background-color: var(--pont-button-default-bg-color);
+
+  border-style: var(--pont-button-default-border-style);
+  border-color: var(--pont-button-default-border-color);
+  border-top-width: var(--pont-button-default-border-width-t);
+  border-right-width: var(--pont-button-default-border-width-r);
+  border-bottom-width: var(--pont-button-default-border-width-b);
+  border-left-width: var(--pont-button-default-border-width-l);
+
+  outline-width: var(--pont-button-default-outline-w);
+  outline-color: var(--pont-button-default-outline-color);
+  outline-style: var(--pont-button-default-outline-style);
+  outline-offset: var(--pont-button-default-outline-offset);
+
+  box-shadow:
+    var(--pont-button-default-effect-inset-shadow),
+    var(--pont-button-default-effect-inset-ring),
+    var(--pont-button-default-effect-ring-offset),
+    var(--pont-button-default-effect-ring),
+    var(--pont-button-default-effect-shadow);
+}
+
+[data-pont-button][data-variant="default"]:hover {
+  color: var(--pont-button-default-typography-color-hover);
+
+  background-color: var(--pont-button-default-bg-color-hover);
+}
+
+[data-pont-button][data-variant="default"][aria-expanded] {
+  color: var(--pont-button-default-typography-color-expanded);
+
+  background-color: var(--pont-button-default-bg-color-expanded);
+}
+
+[data-pont-button][data-variant="default"]:focus-visible {
+  border-style: var(--pont-button-default-border-style-focus);
+  border-color: var(--pont-button-default-border-color-focus);
+  border-top-width: var(--pont-button-default-border-width-t-focus);
+  border-right-width: var(--pont-button-default-border-width-r-focus);
+  border-bottom-width: var(--pont-button-default-border-width-b-focus);
+  border-left-width: var(--pont-button-default-border-width-l-focus);
+
+  outline-width: var(--pont-button-default-outline-w-focus);
+  outline-color: var(--pont-button-default-outline-color-focus);
+  outline-style: var(--pont-button-default-outline-style-focus);
+  outline-offset: var(--pont-button-default-outline-offset-focus);
+
+  box-shadow:
+    var(--pont-button-default-effect-inset-shadow-focus),
+    var(--pont-button-default-effect-inset-ring-focus),
+    var(--pont-button-default-effect-ring-offset-focus),
+    var(--pont-button-default-effect-ring-focus),
+    var(--pont-button-default-effect-shadow-focus);
+}
+
+[data-pont-button][data-variant="default"]:disabled {
+  opacity: var(--pont-button-default-effect-opacity-disabled);
+}
+
+[data-pont-button][data-variant="default"][aria-invalid] {
+  border-style: var(--pont-button-default-border-style-invalid);
+  border-color: var(--pont-button-default-border-color-invalid);
+  border-top-width: var(--pont-button-default-border-width-t-invalid);
+  border-right-width: var(--pont-button-default-border-width-r-invalid);
+  border-bottom-width: var(--pont-button-default-border-width-b-invalid);
+  border-left-width: var(--pont-button-default-border-width-l-invalid);
+
+  outline-width: var(--pont-button-default-outline-w-invalid);
+  outline-color: var(--pont-button-default-outline-color-invalid);
+  outline-style: var(--pont-button-default-outline-style-invalid);
+  outline-offset: var(--pont-button-default-outline-offset-invalid);
+
+  box-shadow:
+    var(--pont-button-default-effect-inset-shadow-invalid),
+    var(--pont-button-default-effect-inset-ring-invalid),
+    var(--pont-button-default-effect-ring-offset-invalid),
+    var(--pont-button-default-effect-ring-invalid),
+    var(--pont-button-default-effect-shadow-invalid);
+}
+
+/* * SECONDARY * */
+
+[data-pont-button][data-variant="secondary"] {
+  color: var(--pont-button-secondary-typography-color);
+
+  background-color: var(--pont-button-secondary-bg-color);
+
+  border-style: var(--pont-button-secondary-border-style);
+  border-color: var(--pont-button-secondary-border-color);
+  border-top-width: var(--pont-button-secondary-border-width-t);
+  border-right-width: var(--pont-button-secondary-border-width-r);
+  border-bottom-width: var(--pont-button-secondary-border-width-b);
+  border-left-width: var(--pont-button-secondary-border-width-l);
+
+  outline-width: var(--pont-button-secondary-outline-w);
+  outline-color: var(--pont-button-secondary-outline-color);
+  outline-style: var(--pont-button-secondary-outline-style);
+  outline-offset: var(--pont-button-secondary-outline-offset);
+
+  box-shadow:
+    var(--pont-button-secondary-effect-inset-shadow),
+    var(--pont-button-secondary-effect-inset-ring),
+    var(--pont-button-secondary-effect-ring-offset),
+    var(--pont-button-secondary-effect-ring),
+    var(--pont-button-secondary-effect-shadow);
+}
+
+[data-pont-button][data-variant="secondary"]:hover {
+  color: var(--pont-button-secondary-typography-color-hover);
+
+  background-color: var(--pont-button-secondary-bg-color-hover);
+}
+
+[data-pont-button][data-variant="secondary"][aria-expanded] {
+  color: var(--pont-button-secondary-typography-color-expanded);
+
+  background-color: var(--pont-button-secondary-bg-color-expanded);
+}
+
+[data-pont-button][data-variant="secondary"]:focus-visible {
+  border-style: var(--pont-button-secondary-border-style-focus);
+  border-color: var(--pont-button-secondary-border-color-focus);
+  border-top-width: var(--pont-button-secondary-border-width-t-focus);
+  border-right-width: var(--pont-button-secondary-border-width-r-focus);
+  border-bottom-width: var(--pont-button-secondary-border-width-b-focus);
+  border-left-width: var(--pont-button-secondary-border-width-l-focus);
+
+  outline-width: var(--pont-button-secondary-outline-w-focus);
+  outline-color: var(--pont-button-secondary-outline-color-focus);
+  outline-style: var(--pont-button-secondary-outline-style-focus);
+  outline-offset: var(--pont-button-secondary-outline-offset-focus);
+
+  box-shadow:
+    var(--pont-button-secondary-effect-inset-shadow-focus),
+    var(--pont-button-secondary-effect-inset-ring-focus),
+    var(--pont-button-secondary-effect-ring-offset-focus),
+    var(--pont-button-secondary-effect-ring-focus),
+    var(--pont-button-secondary-effect-shadow-focus);
+}
+
+[data-pont-button][data-variant="secondary"]:disabled {
+  opacity: var(--pont-button-secondary-effect-opacity-disabled);
+}
+
+[data-pont-button][data-variant="secondary"][aria-invalid] {
+  border-style: var(--pont-button-secondary-border-style-invalid);
+  border-color: var(--pont-button-secondary-border-color-invalid);
+  border-top-width: var(--pont-button-secondary-border-width-t-invalid);
+  border-right-width: var(--pont-button-secondary-border-width-r-invalid);
+  border-bottom-width: var(--pont-button-secondary-border-width-b-invalid);
+  border-left-width: var(--pont-button-secondary-border-width-l-invalid);
+
+  outline-width: var(--pont-button-secondary-outline-w-invalid);
+  outline-color: var(--pont-button-secondary-outline-color-invalid);
+  outline-style: var(--pont-button-secondary-outline-style-invalid);
+  outline-offset: var(--pont-button-secondary-outline-offset-invalid);
+
+  box-shadow:
+    var(--pont-button-secondary-effect-inset-shadow-invalid),
+    var(--pont-button-secondary-effect-inset-ring-invalid),
+    var(--pont-button-secondary-effect-ring-offset-invalid),
+    var(--pont-button-secondary-effect-ring-invalid),
+    var(--pont-button-secondary-effect-shadow-invalid);
+}
+
+/* * OUTLINE * */
+
+[data-pont-button][data-variant="outline"] {
+  color: var(--pont-button-outline-typography-color);
+
+  background-color: var(--pont-button-outline-bg-color);
+
+  border-style: var(--pont-button-outline-border-style);
+  border-color: var(--pont-button-outline-border-color);
+  border-top-width: var(--pont-button-outline-border-width-t);
+  border-right-width: var(--pont-button-outline-border-width-r);
+  border-bottom-width: var(--pont-button-outline-border-width-b);
+  border-left-width: var(--pont-button-outline-border-width-l);
+
+  outline-width: var(--pont-button-outline-outline-w);
+  outline-color: var(--pont-button-outline-outline-color);
+  outline-style: var(--pont-button-outline-outline-style);
+  outline-offset: var(--pont-button-outline-outline-offset);
+
+  box-shadow:
+    var(--pont-button-outline-effect-inset-shadow),
+    var(--pont-button-outline-effect-inset-ring),
+    var(--pont-button-outline-effect-ring-offset),
+    var(--pont-button-outline-effect-ring),
+    var(--pont-button-outline-effect-shadow);
+}
+
+[data-pont-button][data-variant="outline"]:hover {
+  color: var(--pont-button-outline-typography-color-hover);
+
+  background-color: var(--pont-button-outline-bg-color-hover);
+}
+
+[data-pont-button][data-variant="outline"][aria-expanded] {
+  color: var(--pont-button-outline-typography-color-expanded);
+
+  background-color: var(--pont-button-outline-bg-color-expanded);
+}
+
+[data-pont-button][data-variant="outline"]:focus-visible {
+  border-style: var(--pont-button-outline-border-style-focus);
+  border-color: var(--pont-button-outline-border-color-focus);
+  border-top-width: var(--pont-button-outline-border-width-t-focus);
+  border-right-width: var(--pont-button-outline-border-width-r-focus);
+  border-bottom-width: var(--pont-button-outline-border-width-b-focus);
+  border-left-width: var(--pont-button-outline-border-width-l-focus);
+
+  outline-width: var(--pont-button-outline-outline-w-focus);
+  outline-color: var(--pont-button-outline-outline-color-focus);
+  outline-style: var(--pont-button-outline-outline-style-focus);
+  outline-offset: var(--pont-button-outline-outline-offset-focus);
+
+  box-shadow:
+    var(--pont-button-outline-effect-inset-shadow-focus),
+    var(--pont-button-outline-effect-inset-ring-focus),
+    var(--pont-button-outline-effect-ring-offset-focus),
+    var(--pont-button-outline-effect-ring-focus),
+    var(--pont-button-outline-effect-shadow-focus);
+}
+
+[data-pont-button][data-variant="outline"]:disabled {
+  opacity: var(--pont-button-outline-effect-opacity-disabled);
+}
+
+[data-pont-button][data-variant="outline"][aria-invalid] {
+  border-style: var(--pont-button-outline-border-style-invalid);
+  border-color: var(--pont-button-outline-border-color-invalid);
+  border-top-width: var(--pont-button-outline-border-width-t-invalid);
+  border-right-width: var(--pont-button-outline-border-width-r-invalid);
+  border-bottom-width: var(--pont-button-outline-border-width-b-invalid);
+  border-left-width: var(--pont-button-outline-border-width-l-invalid);
+
+  outline-width: var(--pont-button-outline-outline-w-invalid);
+  outline-color: var(--pont-button-outline-outline-color-invalid);
+  outline-style: var(--pont-button-outline-outline-style-invalid);
+  outline-offset: var(--pont-button-outline-outline-offset-invalid);
+
+  box-shadow:
+    var(--pont-button-outline-effect-inset-shadow-invalid),
+    var(--pont-button-outline-effect-inset-ring-invalid),
+    var(--pont-button-outline-effect-ring-offset-invalid),
+    var(--pont-button-outline-effect-ring-invalid),
+    var(--pont-button-outline-effect-shadow-invalid);
+}
+
+/* * GHOST * */
+
+[data-pont-button][data-variant="ghost"] {
+  color: var(--pont-button-ghost-typography-color);
+
+  background-color: var(--pont-button-ghost-bg-color);
+
+  border-style: var(--pont-button-ghost-border-style);
+  border-color: var(--pont-button-ghost-border-color);
+  border-top-width: var(--pont-button-ghost-border-width-t);
+  border-right-width: var(--pont-button-ghost-border-width-r);
+  border-bottom-width: var(--pont-button-ghost-border-width-b);
+  border-left-width: var(--pont-button-ghost-border-width-l);
+
+  outline-width: var(--pont-button-ghost-outline-w);
+  outline-color: var(--pont-button-ghost-outline-color);
+  outline-style: var(--pont-button-ghost-outline-style);
+  outline-offset: var(--pont-button-ghost-outline-offset);
+
+  box-shadow:
+    var(--pont-button-ghost-effect-inset-shadow),
+    var(--pont-button-ghost-effect-inset-ring),
+    var(--pont-button-ghost-effect-ring-offset),
+    var(--pont-button-ghost-effect-ring), var(--pont-button-ghost-effect-shadow);
+}
+
+[data-pont-button][data-variant="ghost"]:hover {
+  color: var(--pont-button-ghost-typography-color-hover);
+
+  background-color: var(--pont-button-ghost-bg-color-hover);
 }
 
-pont-button > [data-slot='button'][data-variant='default']:hover {
-  background-color: var(--pont-button-default-color-bg-hover);
+[data-pont-button][data-variant="ghost"][aria-expanded] {
+  color: var(--pont-button-ghost-typography-color-expanded);
+
+  background-color: var(--pont-button-ghost-bg-color-expanded);
 }
 
-pont-button > [data-slot='button'][data-variant='default']:focus-visible {
-  border-color: var(--pont-button-default-color-border-focus);
+[data-pont-button][data-variant="ghost"]:focus-visible {
+  border-style: var(--pont-button-ghost-border-style-focus);
+  border-color: var(--pont-button-ghost-border-color-focus);
+  border-top-width: var(--pont-button-ghost-border-width-t-focus);
+  border-right-width: var(--pont-button-ghost-border-width-r-focus);
+  border-bottom-width: var(--pont-button-ghost-border-width-b-focus);
+  border-left-width: var(--pont-button-ghost-border-width-l-focus);
+
+  outline-width: var(--pont-button-ghost-outline-w-focus);
+  outline-color: var(--pont-button-ghost-outline-color-focus);
+  outline-style: var(--pont-button-ghost-outline-style-focus);
+  outline-offset: var(--pont-button-ghost-outline-offset-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-button-width-ring-focus)
-      var(--pont-button-default-color-ring-focus),
-    0 0 rgb(0 0 0);
+    var(--pont-button-ghost-effect-inset-shadow-focus),
+    var(--pont-button-ghost-effect-inset-ring-focus),
+    var(--pont-button-ghost-effect-ring-offset-focus),
+    var(--pont-button-ghost-effect-ring-focus),
+    var(--pont-button-ghost-effect-shadow-focus);
 }
 
-pont-button > [data-slot='button'][data-variant='default']:disabled {
-  opacity: var(--pont-button-default-opacity-disabled);
+[data-pont-button][data-variant="ghost"]:disabled {
+  opacity: var(--pont-button-ghost-effect-opacity-disabled);
 }
 
-/* * SECONDARY * */
+[data-pont-button][data-variant="ghost"][aria-invalid] {
+  border-style: var(--pont-button-ghost-border-style-invalid);
+  border-color: var(--pont-button-ghost-border-color-invalid);
+  border-top-width: var(--pont-button-ghost-border-width-t-invalid);
+  border-right-width: var(--pont-button-ghost-border-width-r-invalid);
+  border-bottom-width: var(--pont-button-ghost-border-width-b-invalid);
+  border-left-width: var(--pont-button-ghost-border-width-l-invalid);
 
-pont-button > [data-slot='button'][data-variant='secondary'] {
-  color: var(--pont-button-secondary-color-text);
-  background-color: var(--pont-button-secondary-color-bg);
-  border-color: var(--pont-button-secondary-color-border);
-  border-width: var(--pont-button-secondary-width-border);
-  font-family: var(--pont-button-secondary-font-family);
-  font-weight: var(--pont-button-secondary-font-weight);
-  font-size: var(--pont-button-secondary-font-size);
-  border-radius: var(--pont-button-secondary-radius);
-}
+  outline-width: var(--pont-button-ghost-outline-w-invalid);
+  outline-color: var(--pont-button-ghost-outline-color-invalid);
+  outline-style: var(--pont-button-ghost-outline-style-invalid);
+  outline-offset: var(--pont-button-ghost-outline-offset-invalid);
 
-pont-button > [data-slot='button'][data-variant='secondary']:hover {
-  background-color: var(--pont-button-secondary-color-bg-hover);
+  box-shadow:
+    var(--pont-button-ghost-effect-inset-shadow-invalid),
+    var(--pont-button-ghost-effect-inset-ring-invalid),
+    var(--pont-button-ghost-effect-ring-offset-invalid),
+    var(--pont-button-ghost-effect-ring-invalid),
+    var(--pont-button-ghost-effect-shadow-invalid);
 }
 
-pont-button > [data-slot='button'][data-variant='secondary'][aria-expanded] {
-  color: var(--pont-button-secondary-color-text-expanded);
-  background-color: var(--pont-button-secondary-color-bg-expanded);
-}
+/* * DESTRUCTIVE * */
+
+[data-pont-button][data-variant="destructive"] {
+  color: var(--pont-button-destructive-typography-color);
+
+  background-color: var(--pont-button-destructive-bg-color);
+
+  border-style: var(--pont-button-destructive-border-style);
+  border-color: var(--pont-button-destructive-border-color);
+  border-top-width: var(--pont-button-destructive-border-width-t);
+  border-right-width: var(--pont-button-destructive-border-width-r);
+  border-bottom-width: var(--pont-button-destructive-border-width-b);
+  border-left-width: var(--pont-button-destructive-border-width-l);
+
+  outline-width: var(--pont-button-destructive-outline-w);
+  outline-color: var(--pont-button-destructive-outline-color);
+  outline-style: var(--pont-button-destructive-outline-style);
+  outline-offset: var(--pont-button-destructive-outline-offset);
 
-pont-button > [data-slot='button'][data-variant='secondary']:focus-visible {
-  border-color: var(--pont-button-secondary-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-button-width-ring-focus)
-      var(--pont-button-secondary-color-ring-focus),
-    0 0 rgb(0 0 0);
+    var(--pont-button-destructive-effect-inset-shadow),
+    var(--pont-button-destructive-effect-inset-ring),
+    var(--pont-button-destructive-effect-ring-offset),
+    var(--pont-button-destructive-effect-ring),
+    var(--pont-button-destructive-effect-shadow);
 }
 
-pont-button > [data-slot='button'][data-variant='secondary']:disabled {
-  opacity: var(--pont-button-secondary-opacity-disabled);
+[data-pont-button][data-variant="destructive"]:hover {
+  color: var(--pont-button-destructive-typography-color-hover);
+
+  background-color: var(--pont-button-destructive-bg-color-hover);
 }
 
-/* * OUTLINE * */
+[data-pont-button][data-variant="destructive"][aria-expanded] {
+  color: var(--pont-button-destructive-typography-color-expanded);
 
-pont-button > [data-slot='button'][data-variant='outline'] {
-  background-color: var(--pont-button-outline-color-bg);
-  border-color: var(--pont-button-outline-color-border);
-  border-width: var(--pont-button-outline-width-border);
-  font-family: var(--pont-button-outline-font-family);
-  font-weight: var(--pont-button-outline-font-weight);
-  font-size: var(--pont-button-outline-font-size);
-  border-radius: var(--pont-button-outline-radius);
+  background-color: var(--pont-button-destructive-bg-color-expanded);
 }
 
-pont-button > [data-slot='button'][data-variant='outline']:hover {
-  color: var(--pont-button-outline-color-text-hover);
-  background-color: var(--pont-button-outline-color-bg-hover);
-}
+[data-pont-button][data-variant="destructive"]:focus-visible {
+  border-style: var(--pont-button-destructive-border-style-focus);
+  border-color: var(--pont-button-destructive-border-color-focus);
+  border-top-width: var(--pont-button-destructive-border-width-t-focus);
+  border-right-width: var(--pont-button-destructive-border-width-r-focus);
+  border-bottom-width: var(--pont-button-destructive-border-width-b-focus);
+  border-left-width: var(--pont-button-destructive-border-width-l-focus);
 
-pont-button > [data-slot='button'][data-variant='outline'][aria-expanded] {
-  color: var(--pont-button-outline-color-text-expanded);
-  background-color: var(--pont-button-outline-color-bg-expanded);
-}
+  outline-width: var(--pont-button-destructive-outline-w-focus);
+  outline-color: var(--pont-button-destructive-outline-color-focus);
+  outline-style: var(--pont-button-destructive-outline-style-focus);
+  outline-offset: var(--pont-button-destructive-outline-offset-focus);
 
-pont-button > [data-slot='button'][data-variant='outline']:focus-visible {
-  border-color: var(--pont-button-outline-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-button-width-ring-focus)
-      var(--pont-button-outline-color-ring-focus),
-    0 0 rgb(0 0 0);
+    var(--pont-button-destructive-effect-inset-shadow-focus),
+    var(--pont-button-destructive-effect-inset-ring-focus),
+    var(--pont-button-destructive-effect-ring-offset-focus),
+    var(--pont-button-destructive-effect-ring-focus),
+    var(--pont-button-destructive-effect-shadow-focus);
 }
 
-pont-button > [data-slot='button'][data-variant='outline']:disabled {
-  opacity: var(--pont-button-outline-opacity-disabled);
+[data-pont-button][data-variant="destructive"]:disabled {
+  opacity: var(--pont-button-destructive-effect-opacity-disabled);
 }
 
-/* * GHOST * */
+[data-pont-button][data-variant="destructive"][aria-invalid] {
+  border-style: var(--pont-button-destructive-border-style-invalid);
+  border-color: var(--pont-button-destructive-border-color-invalid);
+  border-top-width: var(--pont-button-destructive-border-width-t-invalid);
+  border-right-width: var(--pont-button-destructive-border-width-r-invalid);
+  border-bottom-width: var(--pont-button-destructive-border-width-b-invalid);
+  border-left-width: var(--pont-button-destructive-border-width-l-invalid);
 
-pont-button > [data-slot='button'][data-variant='ghost'] {
-  font-family: var(--pont-button-ghost-font-family);
-  font-weight: var(--pont-button-ghost-font-weight);
-  font-size: var(--pont-button-ghost-font-size);
-  border-width: var(--pont-button-ghost-width-border);
-  border-radius: var(--pont-button-ghost-radius);
-}
+  outline-width: var(--pont-button-destructive-outline-w-invalid);
+  outline-color: var(--pont-button-destructive-outline-color-invalid);
+  outline-style: var(--pont-button-destructive-outline-style-invalid);
+  outline-offset: var(--pont-button-destructive-outline-offset-invalid);
 
-pont-button > [data-slot='button'][data-variant='ghost']:hover {
-  color: var(--pont-button-ghost-color-text-hover);
-  background-color: var(--pont-button-ghost-color-bg-hover);
+  box-shadow:
+    var(--pont-button-destructive-effect-inset-shadow-invalid),
+    var(--pont-button-destructive-effect-inset-ring-invalid),
+    var(--pont-button-destructive-effect-ring-offset-invalid),
+    var(--pont-button-destructive-effect-ring-invalid),
+    var(--pont-button-destructive-effect-shadow-invalid);
 }
 
-pont-button > [data-slot='button'][data-variant='ghost'][aria-expanded] {
-  color: var(--pont-button-ghost-color-text-expanded);
-  background-color: var(--pont-button-ghost-color-bg-expanded);
-}
+/* * LINK * */
 
-pont-button > [data-slot='button'][data-variant='ghost']:disabled {
-  opacity: var(--pont-button-ghost-opacity-disabled);
-}
+[data-pont-button][data-variant="link"] {
+  color: var(--pont-button-link-typography-color);
 
-/* * DESTRUCTIVE * */
+  background-color: var(--pont-button-link-bg-color);
 
-pont-button > [data-slot='button'][data-variant='destructive'] {
-  color: var(--pont-button-destructive-color-text);
-  background-color: var(--pont-button-destructive-color-bg);
-  border-color: var(--pont-button-destructive-color-border);
-  border-width: var(--pont-button-destructive-width-border);
-  font-family: var(--pont-button-destructive-font-family);
-  font-weight: var(--pont-button-destructive-font-weight);
-  font-size: var(--pont-button-destructive-font-size);
-  border-radius: var(--pont-button-destructive-radius);
-}
+  border-style: var(--pont-button-link-border-style);
+  border-color: var(--pont-button-link-border-color);
+  border-top-width: var(--pont-button-link-border-width-t);
+  border-right-width: var(--pont-button-link-border-width-r);
+  border-bottom-width: var(--pont-button-link-border-width-b);
+  border-left-width: var(--pont-button-link-border-width-l);
 
-pont-button > [data-slot='button'][data-variant='destructive']:hover {
-  background-color: var(--pont-button-destructive-color-bg-hover);
-}
+  outline-width: var(--pont-button-link-outline-w);
+  outline-color: var(--pont-button-link-outline-color);
+  outline-style: var(--pont-button-link-outline-style);
+  outline-offset: var(--pont-button-link-outline-offset);
 
-pont-button > [data-slot='button'][data-variant='destructive']:focus-visible {
-  border-color: var(--pont-button-destructive-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-button-width-ring-focus)
-      var(--pont-button-destructive-color-ring-focus),
-    0 0 rgb(0 0 0);
+    var(--pont-button-link-effect-inset-shadow),
+    var(--pont-button-link-effect-inset-ring),
+    var(--pont-button-link-effect-ring-offset),
+    var(--pont-button-link-effect-ring), var(--pont-button-link-effect-shadow);
+}
+
+[data-pont-button][data-variant="link"]:hover {
+  color: var(--pont-button-link-typography-color-hover);
+  text-decoration-line: var(
+    --pont-button-link-typography-decoration-line-hover
+  );
+  text-decoration-color: var(
+    --pont-button-link-typography-decoration-color-hover
+  );
+  text-decoration-style: var(
+    --pont-button-link-typography-decoration-style-hover
+  );
+  text-decoration-thickness: var(
+    --pont-button-link-typography-decoration-thickness-hover
+  );
+  text-underline-offset: var(
+    --pont-button-link-typography-underline-offset-hover
+  );
+
+  background-color: var(--pont-button-link-bg-color-hover);
 }
 
-pont-button > [data-slot='button'][data-variant='destructive']:disabled {
-  opacity: var(--pont-button-destructive-opacity-disabled);
+[data-pont-button][data-variant="link"][aria-expanded] {
+  color: var(--pont-button-link-typography-color-expanded);
+
+  background-color: var(--pont-button-link-bg-color-expanded);
 }
 
-/* * LINK * */
+[data-pont-button][data-variant="link"]:focus-visible {
+  border-style: var(--pont-button-link-border-style-focus);
+  border-color: var(--pont-button-link-border-color-focus);
+  border-top-width: var(--pont-button-link-border-width-t-focus);
+  border-right-width: var(--pont-button-link-border-width-r-focus);
+  border-bottom-width: var(--pont-button-link-border-width-b-focus);
+  border-left-width: var(--pont-button-link-border-width-l-focus);
 
-pont-button > [data-slot='button'][data-variant='link'] {
-  color: var(--pont-button-link-color-text);
-  text-underline-offset: 4px;
-  font-family: var(--pont-button-link-font-family);
-  font-weight: var(--pont-button-link-font-weight);
-  font-size: var(--pont-button-link-font-size);
-  border-width: var(--pont-button-link-width-border);
-  border-radius: var(--pont-button-link-radius);
+  outline-width: var(--pont-button-link-outline-w-focus);
+  outline-color: var(--pont-button-link-outline-color-focus);
+  outline-style: var(--pont-button-link-outline-style-focus);
+  outline-offset: var(--pont-button-link-outline-offset-focus);
+
+  box-shadow:
+    var(--pont-button-link-effect-inset-shadow-focus),
+    var(--pont-button-link-effect-inset-ring-focus),
+    var(--pont-button-link-effect-ring-offset-focus),
+    var(--pont-button-link-effect-ring-focus),
+    var(--pont-button-link-effect-shadow-focus);
 }
 
-pont-button > [data-slot='button'][data-variant='link']:hover {
-  text-decoration-line: underline;
+[data-pont-button][data-variant="link"]:disabled {
+  opacity: var(--pont-button-link-effect-opacity-disabled);
 }
 
-pont-button > [data-slot='button'][data-variant='link']:disabled {
-  opacity: var(--pont-button-link-opacity-disabled);
+[data-pont-button][data-variant="link"][aria-invalid] {
+  border-style: var(--pont-button-link-border-style-invalid);
+  border-color: var(--pont-button-link-border-color-invalid);
+  border-top-width: var(--pont-button-link-border-width-t-invalid);
+  border-right-width: var(--pont-button-link-border-width-r-invalid);
+  border-bottom-width: var(--pont-button-link-border-width-b-invalid);
+  border-left-width: var(--pont-button-link-border-width-l-invalid);
+
+  outline-width: var(--pont-button-link-outline-w-invalid);
+  outline-color: var(--pont-button-link-outline-color-invalid);
+  outline-style: var(--pont-button-link-outline-style-invalid);
+  outline-offset: var(--pont-button-link-outline-offset-invalid);
+
+  box-shadow:
+    var(--pont-button-link-effect-inset-shadow-invalid),
+    var(--pont-button-link-effect-inset-ring-invalid),
+    var(--pont-button-link-effect-ring-offset-invalid),
+    var(--pont-button-link-effect-ring-invalid),
+    var(--pont-button-link-effect-shadow-invalid);
 }
 
 /*
@@ -10722,269 +12061,370 @@ pont-button > [data-slot='button'][data-variant='link']:disabled {
 
 /* * DEFAULT * */
 
-/* fallback (no variant or unknown variant) */
-pont-button:has(> [data-slot='button'][data-size='default']) {
-  height: var(--pont-button-space-size);
+pont-button:has([data-pont-button][data-size="default"]) {
+  width: var(--pont-button-sizing-w-default);
+  height: var(--pont-button-sizing-h-default);
 }
 
-/* variant-specific default size */
-pont-button:has(
-  > [data-slot='button'][data-variant='default'][data-size='default']
-) {
-  height: var(--pont-button-default-space-size);
+[data-pont-button][data-size="default"] {
+  -moz-column-gap: var(--pont-button-layout-gap-x-default);
+       column-gap: var(--pont-button-layout-gap-x-default);
+  row-gap: var(--pont-button-layout-gap-y-default);
+
+  padding-top: var(--pont-button-spacing-pt-default);
+  padding-right: var(--pont-button-spacing-pr-default);
+  padding-bottom: var(--pont-button-spacing-pb-default);
+  padding-left: var(--pont-button-spacing-pl-default);
+
+  font-size: var(--pont-button-typography-size-default);
+  font-weight: var(--pont-button-typography-weight-default);
+  letter-spacing: var(--pont-button-typography-tracking-default);
+  line-height: var(--pont-button-typography-leading-default);
+
+  border-top-left-radius: var(--pont-button-border-radius-tl-default);
+  border-top-right-radius: var(--pont-button-border-radius-tr-default);
+  border-bottom-right-radius: var(--pont-button-border-radius-br-default);
+  border-bottom-left-radius: var(--pont-button-border-radius-bl-default);
 }
 
-pont-button:has(
-  > [data-slot='button'][data-variant='secondary'][data-size='default']
-) {
-  height: var(--pont-button-secondary-space-size);
+/* HAS ICON START/END */
+
+[data-pont-button][data-size="default"]:has(.pont-icon-inline-start) {
+  padding-top: var(--pont-button-spacing-pt-default-has-icon-start);
+  padding-right: var(--pont-button-spacing-pr-default-has-icon-start);
+  padding-bottom: var(--pont-button-spacing-pb-default-has-icon-start);
+  padding-left: var(--pont-button-spacing-pl-default-has-icon-start);
 }
 
-pont-button:has(
-  > [data-slot='button'][data-variant='outline'][data-size='default']
-) {
-  height: var(--pont-button-outline-space-size);
+[data-pont-button][data-size="default"]:has(.pont-icon-inline-end) {
+  padding-top: var(--pont-button-spacing-pt-default-has-icon-end);
+  padding-right: var(--pont-button-spacing-pr-default-has-icon-end);
+  padding-bottom: var(--pont-button-spacing-pb-default-has-icon-end);
+  padding-left: var(--pont-button-spacing-pl-default-has-icon-end);
 }
 
-pont-button:has(
-  > [data-slot='button'][data-variant='ghost'][data-size='default']
-) {
-  height: var(--pont-button-ghost-space-size);
+[data-pont-button][data-size="default"]:has(.pont-icon-inline-start):has(
+    .pont-icon-inline-end
+  ) {
+  padding-right: var(--pont-button-spacing-pr-default-has-icon-end);
+  padding-left: var(--pont-button-spacing-pl-default-has-icon-start);
 }
 
-pont-button:has(
-  > [data-slot='button'][data-variant='destructive'][data-size='default']
-) {
-  height: var(--pont-button-destructive-space-size);
+/* BUTTON > ICON (& SPINNER) */
+
+[data-pont-button][data-size="default"] > svg {
+  width: var(--pont-button-icon-sizing-w-default);
+  height: var(--pont-button-icon-sizing-h-default);
 }
 
-pont-button:has(
-  > [data-slot='button'][data-variant='link'][data-size='default']
-) {
-  height: var(--pont-button-link-space-size);
+[data-pont-button][data-size="default"] > pont-spinner {
+  --pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-default);
+  --pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-default);
+}
+
+/* * X SMALL * */
+
+pont-button:has([data-pont-button][data-size="xs"]) {
+  width: var(--pont-button-sizing-w-xs);
+  height: var(--pont-button-sizing-h-xs);
 }
 
-pont-button > [data-slot='button'][data-size='default'] {
-  gap: var(--pont-button-space-gap);
+[data-pont-button][data-size="xs"] {
+  -moz-column-gap: var(--pont-button-layout-gap-x-xs);
+       column-gap: var(--pont-button-layout-gap-x-xs);
+  row-gap: var(--pont-button-layout-gap-y-xs);
 
-  padding-left: var(--pont-button-space-px);
-  padding-right: var(--pont-button-space-px);
+  padding-top: var(--pont-button-spacing-pt-xs);
+  padding-right: var(--pont-button-spacing-pr-xs);
+  padding-bottom: var(--pont-button-spacing-pb-xs);
+  padding-left: var(--pont-button-spacing-pl-xs);
 
-  font-size: var(--pont-button-font-size);
-  line-height: var(--pont-button-font-line-height);
+  font-size: var(--pont-button-typography-size-xs);
+  font-weight: var(--pont-button-typography-weight-xs);
+  letter-spacing: var(--pont-button-typography-tracking-xs);
+  line-height: var(--pont-button-typography-leading-xs);
 
-  border-radius: var(--pont-button-radius);
+  border-top-left-radius: var(--pont-button-border-radius-tl-xs);
+  border-top-right-radius: var(--pont-button-border-radius-tr-xs);
+  border-bottom-right-radius: var(--pont-button-border-radius-br-xs);
+  border-bottom-left-radius: var(--pont-button-border-radius-bl-xs);
 }
 
-pont-button
-  > [data-slot='button'][data-size='default']:has(.pont-icon-inline-start) {
-  padding-left: var(--pont-button-space-px-has-icon);
+/* HAS ICON START/END */
+
+[data-pont-button][data-size="xs"]:has(.pont-icon-inline-start) {
+  padding-top: var(--pont-button-spacing-pt-xs-has-icon-start);
+  padding-right: var(--pont-button-spacing-pr-xs-has-icon-start);
+  padding-bottom: var(--pont-button-spacing-pb-xs-has-icon-start);
+  padding-left: var(--pont-button-spacing-pl-xs-has-icon-start);
 }
 
-pont-button
-  > [data-slot='button'][data-size='default']:has(.pont-icon-inline-end) {
-  padding-right: var(--pont-button-space-px-has-icon);
+[data-pont-button][data-size="xs"]:has(.pont-icon-inline-end) {
+  padding-top: var(--pont-button-spacing-pt-xs-has-icon-end);
+  padding-right: var(--pont-button-spacing-pr-xs-has-icon-end);
+  padding-bottom: var(--pont-button-spacing-pb-xs-has-icon-end);
+  padding-left: var(--pont-button-spacing-pl-xs-has-icon-end);
 }
 
-pont-button > [data-slot='button'][data-size='default'] svg {
-  width: var(--pont-button-icon-space-size);
-  height: var(--pont-button-icon-space-size);
+[data-pont-button][data-size="xs"]:has(.pont-icon-inline-start):has(
+    .pont-icon-inline-end
+  ) {
+  padding-right: var(--pont-button-spacing-pr-xs-has-icon-end);
+  padding-left: var(--pont-button-spacing-pl-xs-has-icon-start);
 }
 
-/* * EXTRA SMALL & ICON EXTRA SMALL * */
+/* BUTTON > ICON (& SPINNER) */
 
-/* xs & icon-xs */
-pont-button:has(> [data-slot='button'][data-size$='xs']) {
-  height: var(--pont-button-space-size-xs);
+[data-pont-button][data-size="xs"] > svg {
+  width: var(--pont-button-icon-sizing-w-xs);
+  height: var(--pont-button-icon-sizing-h-xs);
 }
 
-pont-button > [data-slot='button'][data-size$='xs'] {
-  font-size: var(--pont-button-font-size-xs);
-  line-height: var(--pont-button-font-line-height-xs);
+[data-pont-button][data-size="xs"] > pont-spinner {
+  --pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-xs);
+  --pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-xs);
+}
+
+/* * SMALL * */
 
-  border-radius: var(--pont-button-radius-xs);
+pont-button:has([data-pont-button][data-size="sm"]) {
+  width: var(--pont-button-sizing-w-sm);
+  height: var(--pont-button-sizing-h-sm);
 }
 
-/* xs */
-pont-button > [data-slot='button'][data-size='xs'] {
-  gap: var(--pont-button-space-gap-xs);
+[data-pont-button][data-size="sm"] {
+  -moz-column-gap: var(--pont-button-layout-gap-x-sm);
+       column-gap: var(--pont-button-layout-gap-x-sm);
+  row-gap: var(--pont-button-layout-gap-y-sm);
+
+  padding-top: var(--pont-button-spacing-pt-sm);
+  padding-right: var(--pont-button-spacing-pr-sm);
+  padding-bottom: var(--pont-button-spacing-pb-sm);
+  padding-left: var(--pont-button-spacing-pl-sm);
+
+  font-size: var(--pont-button-typography-size-sm);
+  font-weight: var(--pont-button-typography-weight-sm);
+  letter-spacing: var(--pont-button-typography-tracking-sm);
+  line-height: var(--pont-button-typography-leading-sm);
 
-  padding-left: var(--pont-button-space-px-xs);
-  padding-right: var(--pont-button-space-px-xs);
+  border-top-left-radius: var(--pont-button-border-radius-tl-sm);
+  border-top-right-radius: var(--pont-button-border-radius-tr-sm);
+  border-bottom-right-radius: var(--pont-button-border-radius-br-sm);
+  border-bottom-left-radius: var(--pont-button-border-radius-bl-sm);
 }
 
-pont-button > [data-slot='button'][data-size='xs']:has(.pont-icon-inline-start) {
-  padding-left: var(--pont-button-space-px-xs-has-icon);
+/* HAS ICON START/END */
+
+[data-pont-button][data-size="sm"]:has(.pont-icon-inline-start) {
+  padding-top: var(--pont-button-spacing-pt-sm-has-icon-start);
+  padding-right: var(--pont-button-spacing-pr-sm-has-icon-start);
+  padding-bottom: var(--pont-button-spacing-pb-sm-has-icon-start);
+  padding-left: var(--pont-button-spacing-pl-sm-has-icon-start);
 }
 
-pont-button > [data-slot='button'][data-size='xs']:has(.pont-icon-inline-end) {
-  padding-right: var(--pont-button-space-px-xs-has-icon);
+[data-pont-button][data-size="sm"]:has(.pont-icon-inline-end) {
+  padding-top: var(--pont-button-spacing-pt-sm-has-icon-end);
+  padding-right: var(--pont-button-spacing-pr-sm-has-icon-end);
+  padding-bottom: var(--pont-button-spacing-pb-sm-has-icon-end);
+  padding-left: var(--pont-button-spacing-pl-sm-has-icon-end);
 }
 
-/* icon-xs */
-pont-button:has(> [data-slot='button'][data-size='icon-xs']) {
-  width: var(--pont-button-space-size-xs);
+[data-pont-button][data-size="sm"]:has(.pont-icon-inline-start):has(
+    .pont-icon-inline-end
+  ) {
+  padding-right: var(--pont-button-spacing-pr-sm-has-icon-end);
+  padding-left: var(--pont-button-spacing-pl-sm-has-icon-start);
 }
 
-/* xs & icon-xs: in button-group */
-[data-slot='button-group']
-  > pont-button
-  > [data-slot='button'][data-size$='xs'] {
-  border-radius: var(--pont-button-radius-in-group);
+/* BUTTON > ICON (& SPINNER) */
+
+[data-pont-button][data-size="sm"] > svg {
+  width: var(--pont-button-icon-sizing-w-sm);
+  height: var(--pont-button-icon-sizing-h-sm);
 }
 
-/* xs & icon-xs: icon/svg child */
-pont-button > [data-slot='button'][data-size$='xs'] svg {
-  width: var(--pont-button-icon-space-size-xs);
-  height: var(--pont-button-icon-space-size-xs);
+[data-pont-button][data-size="sm"] > pont-spinner {
+  --pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-sm);
+  --pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-sm);
 }
 
-/* * SMALL & ICON SMALL * */
+/* * LARGE * */
 
-/* sm & icon-sm */
-pont-button:has(> [data-slot='button'][data-size$='sm']) {
-  height: var(--pont-button-space-size-sm);
+pont-button:has([data-pont-button][data-size="lg"]) {
+  width: var(--pont-button-sizing-w-lg);
+  height: var(--pont-button-sizing-h-lg);
 }
 
-pont-button > [data-slot='button'][data-size$='sm'] {
-  font-size: var(--pont-button-font-size-sm);
-  line-height: var(--pont-button-font-line-height-sm);
+[data-pont-button][data-size="lg"] {
+  -moz-column-gap: var(--pont-button-layout-gap-x-lg);
+       column-gap: var(--pont-button-layout-gap-x-lg);
+  row-gap: var(--pont-button-layout-gap-y-lg);
 
-  border-radius: var(--pont-button-radius-sm);
-}
+  padding-top: var(--pont-button-spacing-pt-lg);
+  padding-right: var(--pont-button-spacing-pr-lg);
+  padding-bottom: var(--pont-button-spacing-pb-lg);
+  padding-left: var(--pont-button-spacing-pl-lg);
 
-/* sm */
-pont-button > [data-slot='button'][data-size='sm'] {
-  gap: var(--pont-button-space-gap-sm);
+  font-size: var(--pont-button-typography-size-lg);
+  font-weight: var(--pont-button-typography-weight-lg);
+  letter-spacing: var(--pont-button-typography-tracking-lg);
+  line-height: var(--pont-button-typography-leading-lg);
 
-  padding-left: var(--pont-button-space-px-sm);
-  padding-right: var(--pont-button-space-px-sm);
+  border-top-left-radius: var(--pont-button-border-radius-tl-lg);
+  border-top-right-radius: var(--pont-button-border-radius-tr-lg);
+  border-bottom-right-radius: var(--pont-button-border-radius-br-lg);
+  border-bottom-left-radius: var(--pont-button-border-radius-bl-lg);
 }
 
-pont-button > [data-slot='button'][data-size='sm']:has(.pont-icon-inline-start) {
-  padding-left: var(--pont-button-space-px-sm-has-icon);
+/* HAS ICON START/END */
+
+[data-pont-button][data-size="lg"]:has(.pont-icon-inline-start) {
+  padding-top: var(--pont-button-spacing-pt-lg-has-icon-start);
+  padding-right: var(--pont-button-spacing-pr-lg-has-icon-start);
+  padding-bottom: var(--pont-button-spacing-pb-lg-has-icon-start);
+  padding-left: var(--pont-button-spacing-pl-lg-has-icon-start);
 }
 
-pont-button > [data-slot='button'][data-size='sm']:has(.pont-icon-inline-end) {
-  padding-right: var(--pont-button-space-px-sm-has-icon);
+[data-pont-button][data-size="lg"]:has(.pont-icon-inline-end) {
+  padding-top: var(--pont-button-spacing-pt-lg-has-icon-end);
+  padding-right: var(--pont-button-spacing-pr-lg-has-icon-end);
+  padding-bottom: var(--pont-button-spacing-pb-lg-has-icon-end);
+  padding-left: var(--pont-button-spacing-pl-lg-has-icon-end);
 }
 
-/* icon-sm */
-pont-button:has(> [data-slot='button'][data-size='icon-sm']) {
-  width: var(--pont-button-space-size-sm);
+[data-pont-button][data-size="lg"]:has(.pont-icon-inline-start):has(
+    .pont-icon-inline-end
+  ) {
+  padding-right: var(--pont-button-spacing-pr-lg-has-icon-end);
+  padding-left: var(--pont-button-spacing-pl-lg-has-icon-start);
 }
 
-/* sm & icon-sm: in button-group */
-[data-slot='button-group']
-  > pont-button
-  > [data-slot='button'][data-size$='sm'] {
-  border-radius: var(--pont-button-radius-in-group);
+/* BUTTON > ICON (& SPINNER) */
+
+[data-pont-button][data-size="lg"] > svg {
+  width: var(--pont-button-icon-sizing-w-lg);
+  height: var(--pont-button-icon-sizing-h-lg);
 }
 
-/* sm & icon-sm: icon/svg child */
-pont-button > [data-slot='button'][data-size$='sm'] svg {
-  width: var(--pont-button-icon-space-size-sm);
-  height: var(--pont-button-icon-space-size-sm);
+[data-pont-button][data-size="lg"] > pont-spinner {
+  --pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-lg);
+  --pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-lg);
 }
 
-/* * LARGE & ICON LARGE * */
+/* * ICON * */
 
-/* lg & icon-lg */
-pont-button:has(> [data-slot='button'][data-size$='lg']) {
-  height: var(--pont-button-space-size-lg);
+pont-button:has([data-pont-button][data-size="icon"]) {
+  width: var(--pont-button-sizing-w-icon);
+  height: var(--pont-button-sizing-h-icon);
 }
 
-pont-button > [data-slot='button'][data-size$='lg'] {
-  font-size: var(--pont-button-font-size-lg);
-  line-height: var(--pont-button-font-line-height-lg);
+[data-pont-button][data-size="icon"] {
+  padding-top: var(--pont-button-spacing-pt-icon);
+  padding-right: var(--pont-button-spacing-pr-icon);
+  padding-bottom: var(--pont-button-spacing-pb-icon);
+  padding-left: var(--pont-button-spacing-pl-icon);
 
-  border-radius: var(--pont-button-radius-lg);
+  border-top-left-radius: var(--pont-button-border-radius-tl-icon);
+  border-top-right-radius: var(--pont-button-border-radius-tr-icon);
+  border-bottom-right-radius: var(--pont-button-border-radius-br-icon);
+  border-bottom-left-radius: var(--pont-button-border-radius-bl-icon);
 }
 
-/* lg */
-pont-button > [data-slot='button'][data-size='lg'] {
-  gap: var(--pont-button-space-gap-lg);
+[data-pont-button][data-size="icon"] > svg {
+  width: var(--pont-button-icon-sizing-w-icon);
+  height: var(--pont-button-icon-sizing-h-icon);
+}
 
-  padding-left: var(--pont-button-space-px-lg);
-  padding-right: var(--pont-button-space-px-lg);
+[data-pont-button][data-size="icon"] > pont-spinner {
+  --pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-icon);
+  --pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-icon);
 }
 
-pont-button > [data-slot='button'][data-size='lg']:has(.pont-icon-inline-start) {
-  padding-left: var(--pont-button-space-px-lg-has-icon);
+/* * ICON X SMALL * */
+
+pont-button:has([data-pont-button][data-size="icon-xs"]) {
+  width: var(--pont-button-sizing-w-icon-xs);
+  height: var(--pont-button-sizing-h-icon-xs);
 }
 
-pont-button > [data-slot='button'][data-size='lg']:has(.pont-icon-inline-end) {
-  padding-right: var(--pont-button-space-px-lg-has-icon);
+[data-pont-button][data-size="icon-xs"] {
+  padding-top: var(--pont-button-spacing-pt-icon-xs);
+  padding-right: var(--pont-button-spacing-pr-icon-xs);
+  padding-bottom: var(--pont-button-spacing-pb-icon-xs);
+  padding-left: var(--pont-button-spacing-pl-icon-xs);
+
+  border-top-left-radius: var(--pont-button-border-radius-tl-icon-xs);
+  border-top-right-radius: var(--pont-button-border-radius-tr-icon-xs);
+  border-bottom-right-radius: var(--pont-button-border-radius-br-icon-xs);
+  border-bottom-left-radius: var(--pont-button-border-radius-bl-icon-xs);
 }
 
-/* icon-lg */
-pont-button:has(> [data-slot='button'][data-size='icon-lg']) {
-  width: var(--pont-button-space-size-lg);
+[data-pont-button][data-size="icon-xs"] > svg {
+  width: var(--pont-button-icon-sizing-w-icon-xs);
+  height: var(--pont-button-icon-sizing-h-icon-xs);
 }
 
-/* lg & icon-lg: icon/svg child */
-pont-button > [data-slot='button'][data-size$='lg'] svg {
-  width: var(--pont-button-icon-space-size-lg);
-  height: var(--pont-button-icon-space-size-lg);
+[data-pont-button][data-size="icon-xs"] > pont-spinner {
+  --pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-icon-xs);
+  --pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-icon-xs);
 }
 
-/* * ICON * */
+/* * ICON SMALL * */
 
-/* fallback (no variant or unknown variant) */
-pont-button:has(> [data-slot='button'][data-size='icon']) {
-  width: var(--pont-button-space-size);
-  height: var(--pont-button-space-size);
+pont-button:has([data-pont-button][data-size="icon-sm"]) {
+  width: var(--pont-button-sizing-w-icon-sm);
+  height: var(--pont-button-sizing-h-icon-sm);
 }
 
-/* variant-specific icon size */
-pont-button:has(
-  > [data-slot='button'][data-variant='default'][data-size='icon']
-) {
-  width: var(--pont-button-default-space-size);
-  height: var(--pont-button-default-space-size);
-}
+[data-pont-button][data-size="icon-sm"] {
+  padding-top: var(--pont-button-spacing-pt-icon-sm);
+  padding-right: var(--pont-button-spacing-pr-icon-sm);
+  padding-bottom: var(--pont-button-spacing-pb-icon-sm);
+  padding-left: var(--pont-button-spacing-pl-icon-sm);
 
-pont-button:has(
-  > [data-slot='button'][data-variant='secondary'][data-size='icon']
-) {
-  width: var(--pont-button-secondary-space-size);
-  height: var(--pont-button-secondary-space-size);
+  border-top-left-radius: var(--pont-button-border-radius-tl-icon-sm);
+  border-top-right-radius: var(--pont-button-border-radius-tr-icon-sm);
+  border-bottom-right-radius: var(--pont-button-border-radius-br-icon-sm);
+  border-bottom-left-radius: var(--pont-button-border-radius-bl-icon-sm);
 }
 
-pont-button:has(
-  > [data-slot='button'][data-variant='outline'][data-size='icon']
-) {
-  width: var(--pont-button-outline-space-size);
-  height: var(--pont-button-outline-space-size);
+[data-pont-button][data-size="icon-sm"] > svg {
+  width: var(--pont-button-icon-sizing-w-icon-sm);
+  height: var(--pont-button-icon-sizing-h-icon-sm);
 }
 
-pont-button:has(> [data-slot='button'][data-variant='ghost'][data-size='icon']) {
-  width: var(--pont-button-ghost-space-size);
-  height: var(--pont-button-ghost-space-size);
+[data-pont-button][data-size="icon-sm"] > pont-spinner {
+  --pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-icon-sm);
+  --pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-icon-sm);
 }
 
-pont-button:has(
-  > [data-slot='button'][data-variant='destructive'][data-size='icon']
-) {
-  width: var(--pont-button-destructive-space-size);
-  height: var(--pont-button-destructive-space-size);
-}
+/* * ICON LARGE * */
 
-pont-button:has(> [data-slot='button'][data-variant='link'][data-size='icon']) {
-  width: var(--pont-button-link-space-size);
-  height: var(--pont-button-link-space-size);
+pont-button:has([data-pont-button][data-size="icon-lg"]) {
+  width: var(--pont-button-sizing-w-icon-lg);
+  height: var(--pont-button-sizing-h-icon-lg);
 }
 
-pont-button > [data-slot='button'][data-size='icon'] {
-  font-size: var(--pont-button-font-size);
-  line-height: var(--pont-button-font-line-height);
+[data-pont-button][data-size="icon-lg"] {
+  padding-top: var(--pont-button-spacing-pt-icon-lg);
+  padding-right: var(--pont-button-spacing-pr-icon-lg);
+  padding-bottom: var(--pont-button-spacing-pb-icon-lg);
+  padding-left: var(--pont-button-spacing-pl-icon-lg);
+
+  border-top-left-radius: var(--pont-button-border-radius-tl-icon-lg);
+  border-top-right-radius: var(--pont-button-border-radius-tr-icon-lg);
+  border-bottom-right-radius: var(--pont-button-border-radius-br-icon-lg);
+  border-bottom-left-radius: var(--pont-button-border-radius-bl-icon-lg);
+}
 
-  border-radius: var(--pont-button-radius);
+[data-pont-button][data-size="icon-lg"] > svg {
+  width: var(--pont-button-icon-sizing-w-icon-lg);
+  height: var(--pont-button-icon-sizing-h-icon-lg);
 }
 
-pont-button > [data-slot='button'][data-size='icon'] svg {
-  width: var(--pont-button-icon-space-size);
-  height: var(--pont-button-icon-space-size);
+[data-pont-button][data-size="icon-lg"] > pont-spinner {
+  --pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-icon-lg);
+  --pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-icon-lg);
 }
 
 /*
@@ -12484,21 +13924,53 @@ pont-input-group-button {
   justify-content: center;
 }
 
-pont-input-group-button > pont-button[data-slot='input-group-button'] {
+pont-input-group-button > pont-button[data-slot="input-group-button"] {
   display: flex;
 
-  --pont-button-space-gap-sm: var(--pont-input-group-button-space-gap-sm);
-  --pont-button-space-px-xs: var(--pont-input-group-button-space-px-xs);
-  --pont-button-font-size-xs: var(--pont-input-group-button-font-size);
-  --pont-button-font-size-sm: var(--pont-input-group-button-font-size);
-  --pont-button-font-line-height-xs: var(
+  --pont-button-layout-gap-x-sm: var(--pont-input-group-button-space-gap-sm);
+  --pont-button-layout-gap-y-sm: var(--pont-input-group-button-space-gap-sm);
+
+  --pont-button-spacing-pr-xs: var(--pont-input-group-button-space-px-xs);
+  --pont-button-spacing-pl-xs: var(--pont-input-group-button-space-px-xs);
+
+  --pont-button-typography-size-xs: var(--pont-input-group-button-font-size);
+  --pont-button-typography-size-sm: var(--pont-input-group-button-font-size);
+  --pont-button-typography-leading-xs: var(
     --pont-input-group-button-font-line-height
   );
-  --pont-button-font-line-height-sm: var(
+  --pont-button-typography-leading-sm: var(
     --pont-input-group-button-font-line-height
   );
-  --pont-button-radius-xs: var(--pont-input-group-button-radius-xs);
-  --pont-button-icon-space-size-xs: var(
+
+  --pont-button-border-radius-tl-xs: var(--pont-input-group-button-radius-xs);
+  --pont-button-border-radius-tr-xs: var(--pont-input-group-button-radius-xs);
+  --pont-button-border-radius-br-xs: var(--pont-input-group-button-radius-xs);
+  --pont-button-border-radius-bl-xs: var(--pont-input-group-button-radius-xs);
+
+  --pont-button-border-radius-tl-icon-xs: var(
+    --pont-input-group-button-radius-xs
+  );
+  --pont-button-border-radius-tr-icon-xs: var(
+    --pont-input-group-button-radius-xs
+  );
+  --pont-button-border-radius-br-icon-xs: var(
+    --pont-input-group-button-radius-xs
+  );
+  --pont-button-border-radius-bl-icon-xs: var(
+    --pont-input-group-button-radius-xs
+  );
+
+  --pont-button-icon-sizing-w-xs: var(
+    --pont-input-group-button-icon-space-size-xs
+  );
+  --pont-button-icon-sizing-h-xs: var(
+    --pont-input-group-button-icon-space-size-xs
+  );
+
+  --pont-button-icon-sizing-w-icon-xs: var(
+    --pont-input-group-button-icon-space-size-xs
+  );
+  --pont-button-icon-sizing-h-icon-xs: var(
     --pont-input-group-button-icon-space-size-xs
   );
 }
@@ -13226,29 +14698,45 @@ pont-kbd-group > [data-slot=kbd-group] {
  * ===========================================================================
  */
 
-pont-label > [data-slot='label'] {
+[data-pont-label] {
   display: flex;
+
+  -moz-column-gap: var(--pont-label-layout-gap-x);
+
+       column-gap: var(--pont-label-layout-gap-x);
+  row-gap: var(--pont-label-layout-gap-y);
   align-items: center;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  gap: var(--pont-label-space-gap);
 
-  font-size: var(--pont-label-font-size);
-  line-height: var(--pont-label-font-line-height);
-  font-weight: var(--pont-label-font-weight);
-  font-family: var(--pont-label-font-family);
+  font-family: var(--pont-label-typography-font);
+  font-size: var(--pont-label-typography-size);
+  font-weight: var(--pont-label-typography-weight);
+  letter-spacing: var(--pont-label-typography-tracking);
+  line-height: var(--pont-label-typography-leading);
+  color: var(--pont-label-typography-color);
+
+  -webkit-user-select: var(--pont-label-interactivity-select);
+
+     -moz-user-select: var(--pont-label-interactivity-select);
+
+          user-select: var(--pont-label-interactivity-select);
 }
 
-/* DISABLED */
+/* * -------- DISABLED -------- * */
+
+/* * GROUP DISABLED * */
+
+*:has([data-disabled="true"]) [data-pont-label] {
+  opacity: var(--pont-label-effect-opacity-disabled);
 
-*:has([disabled]) > pont-label > [data-slot='label'] {
-  opacity: var(--pont-label-opacity-disabled);
   pointer-events: none;
 }
 
-*:has(> [disabled]) + pont-label > [data-slot='label'] {
-  opacity: var(--pont-label-opacity-disabled);
+/* * PEER DISABLED * */
+
+*:disabled ~ pont-label [data-pont-label],
+*:has(> :disabled) ~ pont-label [data-pont-label] {
+  opacity: var(--pont-label-effect-opacity-disabled);
+
   cursor: not-allowed;
 }
 
@@ -13274,20 +14762,39 @@ pont-separator {
   flex-shrink: 0;
 }
 
-pont-separator:has(> [data-slot="separator"][data-orientation="horizontal"]) {
+[data-pont-separator] {
   width: 100%;
-  height: var(--pont-separator-horizontal-space-h);
+  height: 100%;
+
+  background-color: var(--pont-separator-bg-color);
 }
 
-pont-separator:has(> [data-slot="separator"][data-orientation="vertical"]) {
-  align-self: stretch;
-  width: var(--pont-separator-vertical-space-w);
+/* * -------- ORIENTATIONS -------- * */
+
+/* * HORIZONTAL * */
+
+pont-separator:has([data-orientation="horizontal"]) {
+  width: var(--pont-separator-horizontal-sizing-w);
+  height: var(--pont-separator-horizontal-sizing-h);
+
+  min-width: var(--pont-separator-horizontal-sizing-min-w);
+  max-width: var(--pont-separator-horizontal-sizing-max-w);
+  min-height: var(--pont-separator-horizontal-sizing-min-h);
+  max-height: var(--pont-separator-horizontal-sizing-max-h);
 }
 
-pont-separator > [data-slot="separator"] {
-  width: 100%;
-  height: 100%;
-  background-color: var(--pont-separator-color-bg);
+/* * VERTICAL * */
+
+pont-separator:has([data-orientation="vertical"]) {
+  align-self: stretch;
+
+  width: var(--pont-separator-vertical-sizing-w);
+  height: var(--pont-separator-vertical-sizing-h);
+
+  min-width: var(--pont-separator-horizontal-sizing-min-w);
+  max-width: var(--pont-separator-horizontal-sizing-max-w);
+  min-height: var(--pont-separator-horizontal-sizing-min-h);
+  max-height: var(--pont-separator-horizontal-sizing-max-h);
 }
 
 /*
@@ -14137,6 +15644,39 @@ pont-scroll-area > [data-slot=scroll-area] {
   border-radius: inherit;
 }
 
+/*
+ * ===========================================================================
+ *  DATE PICKER COMPONENT STYLES
+ * ===========================================================================
+ */
+
+/*
+ * --------------------------------------------------
+ * DATE PICKER TRIGGER
+ * --------------------------------------------------
+ */
+
+[data-pont-date-picker-trigger] {
+  --pont-button-layout-justify: var(--pont-ref-layout-justify-start);
+  --pont-button-typography-weight-default: var(--pont-ref-font-weight-normal);
+}
+
+[data-pont-date-picker-trigger] [data-pont-button] {
+  text-align: left;
+}
+
+[data-pont-date-picker-trigger][data-empty="true"] {
+  --pont-button-outline-typography-color: hsl(
+    var(--pont-sem-color-text-secondary)
+  );
+  --pont-button-outline-typography-color-hover: hsl(
+    var(--pont-sem-color-text-secondary)
+  );
+  --pont-button-outline-typography-color-expanded: hsl(
+    var(--pont-sem-color-text-secondary)
+  );
+}
+
 /* ---- widget layer -------------------------------------------------------- */
 
 /*
@@ -14447,8 +15987,8 @@ pont-scroll-area > [data-slot=scroll-area] {
   --pont-field-forgot-space-px: var(--pont-ref-space-0);
   --pont-field-forgot-space-size: auto;
   --pont-field-forgot-color-text: inherit;
-  --pont-field-forgot-font-size: var(--pont-label-font-size);
-  --pont-field-forgot-font-line-height: var(--pont-label-font-line-height);
+  --pont-field-forgot-font-size: var(--pont-label-typography-size);
+  --pont-field-forgot-font-line-height: var(--pont-label-typography-leading);
   --pont-field-forgot-font-weight: var(--pont-ref-font-weight-normal);
 }
 
@@ -14949,13 +16489,14 @@ pont-password-field:has([part="password-field-forgot"])
 pont-password-field [part="password-field-forgot"] {
   margin-left: auto;
 
-  --pont-button-space-px-default: var(--pont-field-forgot-space-px);
-  --pont-button-space-size-default: var(--pont-field-forgot-space-size);
+  --pont-button-spacing-pr-default: var(--pont-field-forgot-space-px);
+  --pont-button-spacing-pl-default: var(--pont-field-forgot-space-px);
+  --pont-button-sizing-h-default: var(--pont-field-forgot-space-size);
 
-  --pont-button-font-weight: var(--pont-field-forgot-font-weight);
-  --pont-button-link-color-text: var(--pont-field-forgot-color-text);
-  --pont-button-font-size-default: var(--pont-field-forgot-font-size);
-  --pont-button-font-line-height-default: var(
+  --pont-button-typography-weight-default: var(--pont-field-forgot-font-weight);
+  --pont-button-link-typography-color: var(--pont-field-forgot-color-text);
+  --pont-button-typography-size-default: var(--pont-field-forgot-font-size);
+  --pont-button-typography-leading-default: var(
     --pont-field-forgot-font-line-height
   );
 }
@@ -14984,7 +16525,7 @@ pont-otp {
   --pont-typography-p-font-size: var(--pont-otp-typography-font-size);
   --pont-typography-p-font-weight: var(--pont-otp-typography-font-weight);
   --pont-typography-p-color-text: var(--pont-otp-typography-color-text);
-  --pont-button-link-color-text: var(--pont-otp-button-color-text-brand);
+  --pont-button-link-typography-color: var(--pont-otp-button-color-text-brand);
   display: grid;
   justify-content: var(--pont-otp-alignment-justify-content);
   align-self: var(--pont-otp-alignment-align-self);
@@ -15676,15 +17217,18 @@ pont-link > [part="link"] {
 
   justify-content: var(--pont-link-alignment-justify-content);
 
-  --pont-button-space-px-default: var(--pont-link-button-space-px);
-  --pont-button-space-size-default: var(--pont-link-button-space-size);
+  --pont-button-spacing-pr-default: var(--pont-link-button-space-px);
+  --pont-button-spacing-pl-default: var(--pont-link-button-space-px);
+  --pont-button-sizing-h-default: var(--pont-link-button-space-size);
 
-  --pont-button-link-color-text: var(--pont-link-color-text);
-  --pont-button-font-size-default: var(--pont-link-font-size);
-  --pont-button-font-line-height-default: var(--pont-link-font-line-height);
-  --pont-button-font-weight: var(--pont-link-font-weight);
+  --pont-button-link-typography-color: var(--pont-link-color-text);
+  --pont-button-typography-size-default: var(--pont-link-font-size);
+  --pont-button-typography-leading-default: var(--pont-link-font-line-height);
+  --pont-button-typography-weight-default: var(--pont-link-font-weight);
 
-  --pont-button-opacity-disabled: var(--pont-link-button-opacity-disabled);
+  --pont-button-link-effect-opacity-disabled: var(
+    --pont-link-button-opacity-disabled
+  );
 }
 
 pont-link > [part="link"] > [part="link-button"] > [data-slot="button"] {
@@ -16160,7 +17704,10 @@ pont-profile pont-card[part="personal-info-card"][editing="true"] {
   --pont-card-color-bg: var(
     --pont-account-settings-personal-info-card-color-bg-editing
   );
-  --pont-button-space-px-lg: var(
+  --pont-button-spacing-pr-lg: var(
+    --pont-account-settings-info-card-button-space-px-lg
+  );
+  --pont-button-spacing-pl-lg: var(
     --pont-account-settings-info-card-button-space-px-lg
   );
 }
@@ -16179,7 +17726,10 @@ pont-profile pont-popover[part="account-info-popover"] {
   --pont-popover-content-space-w: var(
     --pont-account-settings-account-info-popover-space-w
   );
-  --pont-button-space-px-lg: var(
+  --pont-button-spacing-pr-lg: var(
+    --pont-account-settings-info-card-button-space-px-lg
+  );
+  --pont-button-spacing-pl-lg: var(
     --pont-account-settings-info-card-button-space-px-lg
   );
 }
@@ -16195,7 +17745,10 @@ pont-profile pont-card[part="urls-info-card"][editing="true"] {
   --pont-card-color-bg: var(
     --pont-account-settings-urls-info-card-color-bg-editing
   );
-  --pont-button-space-px-lg: var(
+  --pont-button-spacing-pr-lg: var(
+    --pont-account-settings-info-card-button-space-px-lg
+  );
+  --pont-button-spacing-pl-lg: var(
     --pont-account-settings-info-card-button-space-px-lg
   );
 }
@@ -16204,7 +17757,7 @@ pont-profile pont-card[part="location-info-card"][editing="true"] {
   --pont-card-color-bg: var(
     --pont-account-settings-location-info-card-color-bg-editing
   );
-  --pont-button-space-px-lg: var(
+  --pont-button-spacing-pl-lg: var(
     --pont-account-settings-info-card-button-space-px-lg
   );
 }
@@ -16939,7 +18492,10 @@ pont-account-settings pont-button[part="burger-close-button"] button {
 pont-account-info pont-card[part="edit-form"] {
   --pont-card-color-bg: var(--pont-account-info-edit-form-card-color-bg);
   margin-bottom: var(--pont-ref-space-4);
-  --pont-button-space-px-lg: var(
+  --pont-button-spacing-pr-lg: var(
+    --pont-account-settings-info-card-button-space-px-lg
+  );
+  --pont-button-spacing-pl-lg: var(
     --pont-account-settings-info-card-button-space-px-lg
   );
 }
@@ -16964,7 +18520,10 @@ pont-account-info pont-card > [data-slot="card"] {
 }
 
 pont-button[part="upload-image-button"] {
-  --pont-button-radius-lg: 100%;
+  --pont-button-border-radius-tl-lg: var(--pont-ref-radius-full);
+  --pont-button-border-radius-tr-lg: var(--pont-ref-radius-full);
+  --pont-button-border-radius-br-lg: var(--pont-ref-radius-full);
+  --pont-button-border-radius-bl-lg: var(--pont-ref-radius-full);
 }
 
 pont-account-info pont-avatar > [data-slot="avatar"][data-size="lg"] {
@@ -18101,22 +19660,6 @@ video {
   width: var(--pont-breadcrumb-ellipsis-space-size);
   height: var(--pont-breadcrumb-ellipsis-space-size);
 }
-.pont-size-button-icon-space-size{
-  width: var(--pont-button-icon-space-size-default);
-  height: var(--pont-button-icon-space-size-default);
-}
-.pont-size-button-space-size-icon{
-  width: var(--pont-button-space-size-default);
-  height: var(--pont-button-space-size-default);
-}
-.pont-size-button-space-size-icon-lg{
-  width: var(--pont-button-space-size-lg);
-  height: var(--pont-button-space-size-lg);
-}
-.pont-size-button-space-size-icon-sm{
-  width: var(--pont-button-space-size-sm);
-  height: var(--pont-button-space-size-sm);
-}
 .pont-size-calendar-chevron-space-size{
   width: var(--pont-calendar-chevron-space-size);
   height: var(--pont-calendar-chevron-space-size);
@@ -18283,15 +19826,6 @@ video {
 .pont-h-auto{
   height: auto;
 }
-.pont-h-button-space-h-default{
-  height: var(--pont-button-space-size-default);
-}
-.pont-h-button-space-h-lg{
-  height: var(--pont-button-space-size-lg);
-}
-.pont-h-button-space-h-sm{
-  height: var(--pont-button-space-size-sm);
-}
 .pont-h-calendar-month-caption-space-h{
   height: var(--pont-calendar-month-caption-space-h);
 }
@@ -18538,9 +20072,6 @@ video {
 .pont-w-command-space-w{
   width: var(--pont-command-space-w);
 }
-.pont-w-date-picker-trigger-button-space-w{
-  width: var(--pont-date-picker-trigger-button-space-w);
-}
 .pont-w-dialog-content-space-w{
   width: var(--pont-dialog-content-space-w);
 }
@@ -18883,15 +20414,6 @@ video {
 .pont-gap-breadcrumb-list-space-gap-sm{
   gap: var(--pont-breadcrumb-list-space-gap-sm);
 }
-.pont-gap-button-space-gap-default{
-  gap: var(--pont-button-space-gap-default);
-}
-.pont-gap-button-space-gap-lg{
-  gap: var(--pont-button-space-gap-lg);
-}
-.pont-gap-button-space-gap-sm{
-  gap: var(--pont-button-space-gap-sm);
-}
 .pont-gap-calendar-day-button-space-gap{
   gap: var(--pont-calendar-day-button-space-gap);
 }
@@ -19068,9 +20590,6 @@ video {
 .pont-rounded-accordion-trigger-radius{
   border-radius: var(--pont-accordion-trigger-radius);
 }
-.pont-rounded-button-radius{
-  border-radius: var(--pont-button-radius-default);
-}
 .pont-rounded-calendar-day-radius{
   border-radius: var(--pont-calendar-day-radius);
 }
@@ -19236,9 +20755,6 @@ video {
 .pont-border-0{
   border-width: 0px;
 }
-.pont-border-button-outline-width-border{
-  border-width: var(--pont-button-width-border);
-}
 .pont-border-combo-box-group-width-border{
   border-width: var(--pont-combo-box-group-width-border);
 }
@@ -19317,9 +20833,6 @@ video {
 .pont-border-border{
   border-color: hsl(var(--border));
 }
-.pont-border-button-outline-color-border{
-  border-color: var(--pont-button-outline-color-border);
-}
 .pont-border-combo-box-group-color-border{
   border-color: hsl(var(--pont-combo-box-group-color-border));
 }
@@ -19413,18 +20926,6 @@ video {
 .pont-bg-background{
   background-color: hsl(var(--background));
 }
-.pont-bg-button-default-color-bg{
-  background-color: var(--pont-button-default-color-bg);
-}
-.pont-bg-button-destructive-color-bg{
-  background-color: var(--pont-button-destructive-color-bg);
-}
-.pont-bg-button-outline-color-bg{
-  background-color: var(--pont-button-outline-color-bg);
-}
-.pont-bg-button-secondary-color-bg{
-  background-color: var(--pont-button-secondary-color-bg);
-}
 .pont-bg-calendar-color-bg{
   background-color: hsl(var(--pont-calendar-color-bg));
 }
@@ -19684,18 +21185,6 @@ video {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
-.pont-px-button-space-px-default{
-  padding-left: var(--pont-button-space-px-default);
-  padding-right: var(--pont-button-space-px-default);
-}
-.pont-px-button-space-px-lg{
-  padding-left: var(--pont-button-space-px-lg);
-  padding-right: var(--pont-button-space-px-lg);
-}
-.pont-px-button-space-px-sm{
-  padding-left: var(--pont-button-space-px-sm);
-  padding-right: var(--pont-button-space-px-sm);
-}
 .pont-px-calendar-month-caption-space-px{
   padding-left: var(--pont-calendar-month-caption-space-px);
   padding-right: var(--pont-calendar-month-caption-space-px);
@@ -19868,10 +21357,6 @@ video {
   padding-top: var(--pont-accordion-trigger-space-py);
   padding-bottom: var(--pont-accordion-trigger-space-py);
 }
-.pont-py-button-space-py-default{
-  padding-top: var(--pont-ref-space-2);
-  padding-bottom: var(--pont-ref-space-2);
-}
 .pont-py-carousel-button-space-py{
   padding-top: var(--pont-carousel-button-space-py);
   padding-bottom: var(--pont-carousel-button-space-py);
@@ -20117,10 +21602,6 @@ video {
   font-size: var(--pont-breadcrumb-list-font-size);
   line-height: var(--breadcrumb-list-font-line-height);
 }
-.pont-text-button-font-size{
-  font-size: var(--pont-button-font-size-default);
-  line-height: var(--pont-button-font-line-height-default);
-}
 .pont-text-calendar-caption-label-font{
   font-size: var(--pont-calendar-caption-label-font-size);
   line-height: var(--pont-calendar-caption-label-font-line-height);
@@ -20332,9 +21813,6 @@ video {
 .pont-font-breadcrumb-page-font-weight{
   font-weight: var(--pont-breadcrumb-page-font-weight);
 }
-.pont-font-button-font-weight{
-  font-weight: var(--pont-button-font-weight);
-}
 .pont-font-calendar-caption-label-font-weight{
   font-weight: var(--pont-calendar-caption-label-font-weight);
 }
@@ -20350,9 +21828,6 @@ video {
 .pont-font-context-menu-label-font-weight{
   font-weight: var(--pont-context-menu-label-font-weight);
 }
-.pont-font-date-picker-trigger-button-font-weight{
-  font-weight: var(--pont-date-picker-trigger-button-font-weight);
-}
 .pont-font-dialog-description-font-weight{
   font-weight: var(--pont-dialog-description-font-weight);
 }
@@ -20432,18 +21907,6 @@ video {
 .pont-text-breadcrumb-page-color-text{
   color: hsl(var(--pont-breadcrumb-page-color-text));
 }
-.pont-text-button-default-color-text{
-  color: var(--pont-button-default-color-text);
-}
-.pont-text-button-destructive-color-text{
-  color: var(--pont-button-destructive-color-text);
-}
-.pont-text-button-link-color-text{
-  color: var(--pont-button-link-color-text);
-}
-.pont-text-button-secondary-color-text{
-  color: var(--pont-button-secondary-color-text);
-}
 .pont-text-calendar-day-button-outside-color-text{
   color: hsl(var(--pont-calendar-day-button-outside-color-text));
 }
@@ -21110,26 +22573,6 @@ body {
   background-color: hsl(var(--accent));
 }
 
-.hover\:pont-bg-button-default-color-bg-hover:hover{
-  background-color: var(--pont-button-default-color-bg-hover);
-}
-
-.hover\:pont-bg-button-destructive-color-bg-hover:hover{
-  background-color: var(--pont-button-destructive-color-bg-hover);
-}
-
-.hover\:pont-bg-button-ghost-color-bg-hover:hover{
-  background-color: var(--pont-button-ghost-color-bg-hover);
-}
-
-.hover\:pont-bg-button-outline-color-bg-hover:hover{
-  background-color: var(--pont-button-outline-color-bg-hover);
-}
-
-.hover\:pont-bg-button-secondary-color-bg-hover:hover{
-  background-color: var(--pont-button-secondary-color-bg-hover);
-}
-
 .hover\:pont-bg-carousel-button-color-bg-hover:hover{
   background-color: hsl(var(--pont-carousel-button-color-bg-hover));
 }
@@ -21219,14 +22662,6 @@ body {
   color: hsl(var(--pont-breadcrumb-link-color-text-hover));
 }
 
-.hover\:pont-text-button-ghost-color-text-hover:hover{
-  color: var(--pont-button-ghost-color-text-hover);
-}
-
-.hover\:pont-text-button-outline-color-text-hover:hover{
-  color: var(--pont-button-outline-color-text-hover);
-}
-
 .hover\:pont-text-command-item-color-text-hover:hover{
   color: hsl(var(--pont-command-item-color-text-hover));
 }
@@ -21373,18 +22808,10 @@ body {
   border-width: var(--pont-accordion-trigger-width-border-focus);
 }
 
-.focus-visible\:pont-border-button-width-border-focus:focus-visible{
-  border-width: var(--pont-button-width-border);
-}
-
 .focus-visible\:pont-border-accordion-trigger-color-border-focus:focus-visible{
   border-color: hsl(var(--pont-accordion-trigger-color-border-focus));
 }
 
-.focus-visible\:pont-border-button-color-border-focus:focus-visible{
-  border-color: var(--pont-button-color-border-focus);
-}
-
 .focus-visible\:pont-border-radio-group-item-color-border-focus:focus-visible{
   border-color: hsl(var(--pont-radio-group-item-color-border-focus));
 }
@@ -21430,12 +22857,6 @@ body {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus-visible\:pont-ring-button-width-ring-focus:focus-visible{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--pont-button-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 .focus-visible\:pont-ring-radio-group-item-width-ring-focus:focus-visible{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--pont-radio-group-item-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -21470,30 +22891,6 @@ body {
   --tw-ring-color: hsl(var(--pont-accordion-trigger-color-ring-focus));
 }
 
-.focus-visible\:pont-ring-button-default-color-ring-focus:focus-visible{
-  --tw-ring-color: var(--pont-button-color-ring-focus);
-}
-
-.focus-visible\:pont-ring-button-destructive-color-ring-focus:focus-visible{
-  --tw-ring-color: var(--pont-button-destructive-color-ring-focus);
-}
-
-.focus-visible\:pont-ring-button-ghost-color-ring-focus:focus-visible{
-  --tw-ring-color: var(--pont-button-color-ring-focus);
-}
-
-.focus-visible\:pont-ring-button-link-color-ring-focus:focus-visible{
-  --tw-ring-color: var(--pont-button-color-ring-focus);
-}
-
-.focus-visible\:pont-ring-button-outline-color-ring-focus:focus-visible{
-  --tw-ring-color: var(--pont-button-color-ring-focus);
-}
-
-.focus-visible\:pont-ring-button-secondary-color-ring-focus:focus-visible{
-  --tw-ring-color: var(--pont-button-color-ring-focus);
-}
-
 .focus-visible\:pont-ring-radio-group-item-color-ring-focus:focus-visible{
   --tw-ring-color: hsl(var(--pont-radio-group-item-color-ring-focus));
 }
@@ -21554,10 +22951,6 @@ body {
   opacity: 0.5;
 }
 
-.disabled\:pont-opacity-button-opacity-disabled:disabled{
-  opacity: var(--pont-button-opacity-disabled);
-}
-
 .disabled\:pont-opacity-calendar-day-button-opacity-disabled:disabled{
   opacity: var(--pont-calendar-day-button-opacity-disabled);
 }
@@ -21603,29 +22996,6 @@ body {
   padding-right: 0.75rem;
 }
 
-.has-\[\>svg\]\:pont-px-button-space-px-default-has-icon:has(>svg){
-  padding-left: var(--pont-button-space-px-default-has-icon);
-  padding-right: var(--pont-button-space-px-default-has-icon);
-}
-
-.has-\[\>svg\]\:pont-px-button-space-px-lg-has-icon:has(>svg){
-  padding-left: var(--pont-button-space-px-lg-has-icon);
-  padding-right: var(--pont-button-space-px-lg-has-icon);
-}
-
-.has-\[\>svg\]\:pont-px-button-space-px-sm-has-icon:has(>svg){
-  padding-left: var(--pont-button-space-px-sm-has-icon);
-  padding-right: var(--pont-button-space-px-sm-has-icon);
-}
-
-.aria-disabled\:pont-opacity-calendar-button-next-opacity-disabled[aria-disabled="true"]{
-  opacity: var(--pont-calendar-button-next-opacity-disabled);
-}
-
-.aria-disabled\:pont-opacity-calendar-button-previous-opacity-disabled[aria-disabled="true"]{
-  opacity: var(--pont-calendar-button-previous-opacity-disabled);
-}
-
 .aria-selected\:pont-bg-command-item-color-bg-selected[aria-selected="true"]{
   background-color: hsl(var(--pont-command-item-color-bg-selected));
 }
@@ -21828,10 +23198,6 @@ body {
   background-color: hsl(var(--pont-menubar-trigger-color-bg-active));
 }
 
-.data-\[empty\=true\]\:pont-text-date-picker-trigger-button-color-text-empty[data-empty="true"]{
-  color: hsl(var(--pont-date-picker-trigger-button-color-text-empty));
-}
-
 .data-\[placeholder\]\:pont-text-select-trigger-placeholder-color-text[data-placeholder]{
   color: hsl(var(--pont-select-trigger-placeholder-color-text));
 }
@@ -22283,11 +23649,6 @@ body {
   width: 1.25rem;
 }
 
-.\[\&_svg\:not\(\[class\*\=\"pont-size-\"\]\)\]\:pont-size-button-icon-space-size svg:not([class*="pont-size-"]){
-  width: var(--pont-button-icon-space-size-default);
-  height: var(--pont-button-icon-space-size-default);
-}
-
 .\[\&_svg\:not\(\[class\*\=\"pont-size-\"\]\)\]\:pont-size-command-item-icon-space-size svg:not([class*="pont-size-"]){
   width: var(--pont-command-item-icon-space-size);
   height: var(--pont-command-item-icon-space-size);