@pontive/pontkit-core 1.10.0 → 1.11.1

package/dist/styles.css

@@ -676,6 +676,64 @@
   --pont-ref-sizing-h-max: max-content;
   --pont-ref-sizing-h-fit: fit-content;
   --pont-ref-sizing-h-lh: 1lh;
+
+  /* * MIN WIDTH * */
+  --pont-ref-sizing-min-w-auto: auto;
+  --pont-ref-sizing-min-w-full: 100%;
+  --pont-ref-sizing-min-w-screen: 100vw;
+  --pont-ref-sizing-min-w-dvw: 100dvw;
+  --pont-ref-sizing-min-w-dvh: 100dvh;
+  --pont-ref-sizing-min-w-lvw: 100lvw;
+  --pont-ref-sizing-min-w-lvh: 100lvh;
+  --pont-ref-sizing-min-w-svw: 100svw;
+  --pont-ref-sizing-min-w-svh: 100svh;
+  --pont-ref-sizing-min-w-min: min-content;
+  --pont-ref-sizing-min-w-max: max-content;
+  --pont-ref-sizing-min-w-fit: fit-content;
+
+  /* * MAX WIDTH * */
+  --pont-ref-sizing-max-w-none: none;
+  --pont-ref-sizing-max-w-full: 100%;
+  --pont-ref-sizing-max-w-dvw: 100dvw;
+  --pont-ref-sizing-max-w-dvh: 100dvh;
+  --pont-ref-sizing-max-w-lvw: 100lvw;
+  --pont-ref-sizing-max-w-lvh: 100lvh;
+  --pont-ref-sizing-max-w-svw: 100svw;
+  --pont-ref-sizing-max-w-svh: 100svh;
+  --pont-ref-sizing-max-w-screen: 100vw;
+  --pont-ref-sizing-max-w-min: min-content;
+  --pont-ref-sizing-max-w-max: max-content;
+  --pont-ref-sizing-max-w-fit: fit-content;
+
+  /* * MIN HEIGHT * */
+  --pont-ref-sizing-min-h-full: 100%;
+  --pont-ref-sizing-min-h-screen: 100vh;
+  --pont-ref-sizing-min-h-dvh: 100dvh;
+  --pont-ref-sizing-min-h-dvw: 100dvw;
+  --pont-ref-sizing-min-h-lvh: 100lvh;
+  --pont-ref-sizing-min-h-lvw: 100lvw;
+  --pont-ref-sizing-min-h-svw: 100svw;
+  --pont-ref-sizing-min-h-svh: 100svh;
+  --pont-ref-sizing-min-h-auto: auto;
+  --pont-ref-sizing-min-h-min: min-content;
+  --pont-ref-sizing-min-h-max: max-content;
+  --pont-ref-sizing-min-h-fit: fit-content;
+  --pont-ref-sizing-min-h-lh: 1lh;
+
+  /* * MAX HEIGHT * */
+  --pont-ref-sizing-max-h-none: none;
+  --pont-ref-sizing-max-h-full: 100%;
+  --pont-ref-sizing-max-h-screen: 100vh;
+  --pont-ref-sizing-max-h-dvh: 100dvh;
+  --pont-ref-sizing-max-h-dvw: 100dvw;
+  --pont-ref-sizing-max-h-lvh: 100lvh;
+  --pont-ref-sizing-max-h-lvw: 100lvw;
+  --pont-ref-sizing-max-h-svh: 100svh;
+  --pont-ref-sizing-max-h-svw: 100svw;
+  --pont-ref-sizing-max-h-min: min-content;
+  --pont-ref-sizing-max-h-max: max-content;
+  --pont-ref-sizing-max-h-fit: fit-content;
+  --pont-ref-sizing-max-h-lh: 1lh;
 }
 
 /*
@@ -726,6 +784,19 @@
   --pont-ref-typography-wrap-pretty: pretty;
 }
 
+/*
+ * ===========================================================================
+ *  INTERACTIVITY REFERENCE TOKENS
+ *  pont-ref-interactivity-*
+ * ===========================================================================
+ */
+
+:root {
+  /* * FIELD SIZING * */
+  --pont-ref-interactivity-field-sizing-fixed: fixed;
+  --pont-ref-interactivity-field-sizing-content: content;
+}
+
 /*
  * ===========================================================================
  *  SEMANTIC TOKENS INDEX
@@ -5163,49 +5234,199 @@
  */
 
 :root {
-  --pont-checkbox-space-size: var(--pont-sem-space-indicator-size-lg);
+  /* SIZING */
+  --pont-checkbox-sizing-w: calc(var(--pont-ref-space) * 4);
+  --pont-checkbox-sizing-h: calc(var(--pont-ref-space) * 4);
 
-  --pont-checkbox-color-bg: hsl(var(--pont-sem-color-bg-fill-quaternary));
+  /* TYPOGRAPHY */
+  --pont-checkbox-typography-color: hsl(
+    var(--pont-sem-color-text-brand-on-fill)
+  );
 
-  --pont-checkbox-width-border: var(--pont-sem-width-border);
-  --pont-checkbox-color-border: hsl(var(--pont-sem-color-border-secondary));
-  --pont-checkbox-radius: var(--pont-sem-radius-indicator-sm-as-px);
+  /* BACKGROUND */
+  --pont-checkbox-bg-color: hsl(var(--pont-sem-color-bg-fill-quaternary));
 
-  --pont-checkbox-motion-fn: var(--pont-sem-motion-fn-default);
+  /* BORDER */
+  --pont-checkbox-border-radius-tl: 4px;
+  --pont-checkbox-border-radius-tr: 4px;
+  --pont-checkbox-border-radius-bl: 4px;
+  --pont-checkbox-border-radius-br: 4px;
+
+  --pont-checkbox-border-style: var(--pont-ref-border-style-solid);
+  --pont-checkbox-border-color: hsl(var(--pont-sem-color-border-secondary));
+  --pont-checkbox-border-width-t: var(--pont-sem-width-border);
+  --pont-checkbox-border-width-r: var(--pont-sem-width-border);
+  --pont-checkbox-border-width-b: var(--pont-sem-width-border);
+  --pont-checkbox-border-width-l: var(--pont-sem-width-border);
+
+  --pont-checkbox-outline-w: 0px;
+  --pont-checkbox-outline-color: transparent;
+  --pont-checkbox-outline-style: var(--pont-ref-border-outline-style-none);
+  --pont-checkbox-outline-offset: 0px;
+
+  /* MOTION */
+  --pont-checkbox-motion-property: var(--pont-ref-motion-property-colors);
   --pont-checkbox-motion-duration: var(--pont-sem-motion-duration-default);
+  --pont-checkbox-motion-fn: var(--pont-sem-motion-fn-default);
+}
 
-  /* CHECKED */
-  --pont-checkbox-color-text-checked: hsl(var(--pont-sem-color-text-brand-on-fill));
-  --pont-checkbox-color-bg-checked: hsl(var(--pont-sem-color-bg-fill-brand));
-  --pont-checkbox-color-border-checked: hsl(var(--pont-sem-color-border-brand));
+/* * -------- STATES -------- * */
 
-  /* INVALID */
-  --pont-checkbox-color-border-invalid: hsl(var(--pont-sem-color-border-invalid-secondary));
-  --pont-checkbox-width-ring-invalid: var(--pont-sem-width-ring-invalid);
-  --pont-checkbox-color-ring-invalid: hsl(var(--pont-sem-color-ring-destructive));
+/* * ACTIVE (CHECKED) * */
 
-  /* FOCUS VISIBLE */
-  --pont-checkbox-color-border-focus: hsl(var(--pont-sem-color-border-focus));
-  --pont-checkbox-width-ring-focus: var(--pont-sem-width-ring-focus);
-  --pont-checkbox-color-ring-focus: hsl(var(--pont-sem-color-ring-focus));
+:root {
+  /* TYPOGRAPHY */
+  --pont-checkbox-typography-color-active: var(
+    --pont-checkbox-typography-color
+  );
 
-  /* DISABLED */
-  --pont-checkbox-opacity-disabled: var(--pont-sem-opacity-disabled);
+  /* BACKGROUND */
+  --pont-checkbox-bg-color-active: hsl(var(--pont-sem-color-bg-fill-brand));
+
+  /* BORDER */
+  --pont-checkbox-border-style-active: var(--pont-checkbox-border-style);
+  --pont-checkbox-border-color-active: hsl(var(--pont-sem-color-border-brand));
+  --pont-checkbox-border-width-t-active: var(--pont-checkbox-border-width-t);
+  --pont-checkbox-border-width-r-active: var(--pont-checkbox-border-width-r);
+  --pont-checkbox-border-width-b-active: var(--pont-checkbox-border-width-b);
+  --pont-checkbox-border-width-l-active: var(--pont-checkbox-border-width-l);
+
+  --pont-checkbox-outline-w-active: 0px;
+  --pont-checkbox-outline-color-active: transparent;
+  --pont-checkbox-outline-style-active: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-checkbox-outline-offset-active: 0px;
+}
+
+/* * FOCUS * */
+
+:root {
+  /* BORDER */
+  --pont-checkbox-border-style-focus: var(--pont-checkbox-border-style);
+  --pont-checkbox-border-color-focus: hsl(var(--pont-sem-color-border-focus));
+  --pont-checkbox-border-width-t-focus: var(--pont-checkbox-border-width-t);
+  --pont-checkbox-border-width-r-focus: var(--pont-checkbox-border-width-r);
+  --pont-checkbox-border-width-b-focus: var(--pont-checkbox-border-width-b);
+  --pont-checkbox-border-width-l-focus: var(--pont-checkbox-border-width-l);
+
+  --pont-checkbox-outline-w-focus: 0px;
+  --pont-checkbox-outline-color-focus: transparent;
+  --pont-checkbox-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-checkbox-outline-offset-focus: 0px;
+
+  /* EFFECT */
+  --pont-checkbox-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
+  --pont-checkbox-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-checkbox-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-checkbox-effect-ring-offset-w-focus: 0px;
+  --pont-checkbox-effect-ring-offset-color-focus: hsl(var(--pont-sem-color-bg));
+  --pont-checkbox-effect-ring-offset-focus: 0 0 0
+    var(--pont-checkbox-effect-ring-offset-w-focus)
+    var(--pont-checkbox-effect-ring-offset-color-focus);
+
+  --pont-checkbox-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
+  --pont-checkbox-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-focus)
+  );
+  --pont-checkbox-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-checkbox-effect-ring-w-focus) +
+        var(--pont-checkbox-effect-ring-offset-w-focus)
+    )
+    var(--pont-checkbox-effect-ring-color-focus);
+}
+
+/* * DISABLED * */
 
-  /* * AFTER (::after) * */
-  --pont-checkbox-after-space-inset-x: var(--pont-ref-space-neg-3);
-  --pont-checkbox-after-space-inset-y: var(--pont-ref-space-neg-2);
+:root {
+  /* EFFECT */
+  --pont-checkbox-effect-opacity-disabled: var(--pont-sem-opacity-disabled);
+}
+
+/* * INVALID * */
+
+:root {
+  /* BORDER */
+  --pont-checkbox-border-style-invalid: var(--pont-checkbox-border-style);
+  --pont-checkbox-border-color-invalid: hsl(
+    var(--pont-sem-color-border-invalid-secondary)
+  );
+  --pont-checkbox-border-width-t-invalid: var(--pont-checkbox-border-width-t);
+  --pont-checkbox-border-width-r-invalid: var(--pont-checkbox-border-width-r);
+  --pont-checkbox-border-width-b-invalid: var(--pont-checkbox-border-width-b);
+  --pont-checkbox-border-width-l-invalid: var(--pont-checkbox-border-width-l);
+
+  --pont-checkbox-outline-w-invalid: 0px;
+  --pont-checkbox-outline-color-invalid: transparent;
+  --pont-checkbox-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-checkbox-outline-offset-invalid: 0px;
+
+  /* EFFECT */
+  --pont-checkbox-effect-shadow-invalid: var(--pont-ref-effect-shadow-none);
+  --pont-checkbox-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-checkbox-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-checkbox-effect-ring-offset-w-invalid: 0px;
+  --pont-checkbox-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-checkbox-effect-ring-offset-invalid: 0 0 0
+    var(--pont-checkbox-effect-ring-offset-w-invalid)
+    var(--pont-checkbox-effect-ring-offset-color-invalid);
+
+  --pont-checkbox-effect-ring-w-invalid: var(--pont-sem-width-ring-invalid);
+  --pont-checkbox-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-checkbox-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-checkbox-effect-ring-w-invalid) +
+        var(--pont-checkbox-effect-ring-offset-w-invalid)
+    )
+    var(--pont-checkbox-effect-ring-color-invalid);
+}
+
+/* * -------- CHECKBOX... AFTER -------- * */
+
+:root {
+  --pont-checkbox-after-layout-inset-t: calc(var(--pont-ref-space) * -2);
+  --pont-checkbox-after-layout-inset-r: calc(var(--pont-ref-space) * -3);
+  --pont-checkbox-after-layout-inset-b: calc(var(--pont-ref-space) * -2);
+  --pont-checkbox-after-layout-inset-l: calc(var(--pont-ref-space) * -3);
 }
 
 /*
  * --------------------------------------------------
- *  CHECKBOX INDICATOR
+ *  CHECKBOX INDICATOR & CHECKBOX ICON
  * --------------------------------------------------
  */
 
+/* Note: some of the tokens below are applied to the indicator part (color and
+motion tokens) while others are applied to the icon (sizing tokens) despite
+them all being named `--pont-checkbox-icon-*`. */
+
 :root {
-  /* * CHECKBOX INDICATOR ICON * */
-  --pont-checkbox-indicator-icon-space-size: var(--pont-sem-space-icon-size-sm);
+  /* SIZING */
+  --pont-checkbox-icon-sizing-w: var(--pont-sem-space-icon-size-sm);
+  --pont-checkbox-icon-sizing-h: var(--pont-sem-space-icon-size-sm);
+
+  /* COLOR */
+  --pont-checkbox-icon-color: currentColor;
+
+  /* MOTION */
+  --pont-checkbox-icon-motion-property: var(--pont-ref-motion-property-none);
+  --pont-checkbox-icon-motion-duration: var(--pont-sem-motion-duration-default);
+  --pont-checkbox-icon-motion-fn: var(--pont-sem-motion-fn-default);
   /* empty */
   --pont-combo-box-empty-font-size: var(--pont-sem-font-form-size);
   --pont-combo-box-empty-space-py: var(--pont-ref-space-6);
@@ -6540,62 +6761,190 @@
  */
 
 :root {
-  --pont-input-font-family: var(--pont-sem-font-family-default);
+  /* SPACING */
+  --pont-input-spacing-pt: calc(var(--pont-ref-space) * 1);
+  --pont-input-spacing-pr: calc(var(--pont-ref-space) * 2.5);
+  --pont-input-spacing-pb: calc(var(--pont-ref-space) * 1);
+  --pont-input-spacing-pl: calc(var(--pont-ref-space) * 2.5);
 
-  --pont-input-space-py: var(--pont-sem-space-form-py);
-  --pont-input-space-px: var(--pont-sem-space-form-px);
+  /* SIZING */
+  --pont-input-sizing-w: var(--pont-ref-sizing-w-full);
+  --pont-input-sizing-h: calc(var(--pont-ref-space) * 8);
 
-  --pont-input-space-h: var(--pont-sem-space-form-size-sm);
+  --pont-input-sizing-min-w: 0px;
+  --pont-input-sizing-max-w: var(--pont-ref-sizing-max-w-none);
+  --pont-input-sizing-min-h: var(--pont-ref-sizing-min-h-auto);
+  --pont-input-sizing-max-h: var(--pont-ref-sizing-max-h-none);
 
-  --pont-input-font-size: var(--pont-sem-font-form-size);
-  --pont-input-font-weight: var(--pont-sem-font-form-weight);
-  --pont-input-font-size-vw-sm: var(--pont-sem-font-form-size-vw-sm);
-  --pont-input-font-line-height: var(--pont-sem-font-form-line-height);
-  --pont-input-font-line-height-vw-sm: var(--pont-sem-font-form-line-height-vw-sm);
+  /* TYPOGRAPHY */
+  --pont-input-typography-font: var(--pont-sem-font-family-default);
+  --pont-input-typography-size: var(--pont-ref-font-size-sm);
+  --pont-input-typography-weight: var(--pont-ref-font-weight-normal);
+  --pont-input-typography-tracking: var(--pont-ref-font-letter-spacing-normal);
+  --pont-input-typography-leading: var(--pont-ref-font-line-height-of-sm);
+
+  --pont-input-typography-size-bp-max-md: var(--pont-ref-font-size-base);
+  --pont-input-typography-leading-bp-max-md: var(
+    --pont-ref-font-line-height-of-base
+  );
 
-  --pont-input-color-bg: hsl(var(--pont-sem-color-bg-fill-quaternary));
+  --pont-input-typography-color: hsl(var(--pont-sem-color-text));
 
-  --pont-input-width-border: var(--pont-sem-width-border);
-  --pont-input-color-border: hsl(var(--pont-sem-color-border-secondary));
-  --pont-input-radius: var(--pont-sem-radius-form);
+  /* BACKGROUND */
+  --pont-input-bg-color: hsl(var(--pont-sem-color-bg-fill-quaternary));
 
-  --pont-input-motion-fn: var(--pont-sem-motion-fn-default);
+  /* BORDER */
+  --pont-input-border-radius-tl: var(--pont-ref-radius-lg);
+  --pont-input-border-radius-tr: var(--pont-ref-radius-lg);
+  --pont-input-border-radius-br: var(--pont-ref-radius-lg);
+  --pont-input-border-radius-bl: var(--pont-ref-radius-lg);
+
+  --pont-input-border-style: var(--pont-ref-border-style-solid);
+  --pont-input-border-color: hsl(var(--pont-sem-color-border-secondary));
+  --pont-input-border-width-t: var(--pont-sem-width-border);
+  --pont-input-border-width-r: var(--pont-sem-width-border);
+  --pont-input-border-width-b: var(--pont-sem-width-border);
+  --pont-input-border-width-l: var(--pont-sem-width-border);
+
+  --pont-input-outline-w: 0px;
+  --pont-input-outline-color: transparent;
+  --pont-input-outline-style: var(--pont-ref-border-outline-style-none);
+  --pont-input-outline-offset: 0px;
+
+  /* MOTION */
+  --pont-input-motion-property: var(--pont-ref-motion-property-colors);
   --pont-input-motion-duration: var(--pont-sem-motion-duration-default);
+  --pont-input-motion-fn: var(--pont-sem-motion-fn-default);
+}
 
-  /* FOCUS VISIBLE */
-  --pont-input-color-border-focus: hsl(var(--pont-sem-color-border-focus));
-  --pont-input-width-ring-focus: var(--pont-sem-width-ring-focus);
-  --pont-input-color-ring-focus: hsl(var(--pont-sem-color-ring-focus));
+/* * -------- STATES -------- * */
 
-  /* INVALID */
-  --pont-input-color-border-invalid: hsl(
+/* * FOCUS * */
+
+:root {
+  /* BORDER */
+  --pont-input-border-style-focus: var(--pont-input-border-style);
+  --pont-input-border-color-focus: hsl(var(--pont-sem-color-border-focus));
+  --pont-input-border-width-t-focus: var(--pont-input-border-width-t);
+  --pont-input-border-width-r-focus: var(--pont-input-border-width-r);
+  --pont-input-border-width-b-focus: var(--pont-input-border-width-b);
+  --pont-input-border-width-l-focus: var(--pont-input-border-width-l);
+
+  --pont-input-outline-w-focus: 0px;
+  --pont-input-outline-color-focus: transparent;
+  --pont-input-outline-style-focus: var(--pont-ref-border-outline-style-none);
+  --pont-input-outline-offset-focus: 0px;
+
+  /* EFFECT */
+  --pont-input-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
+  --pont-input-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-input-effect-inset-ring-focus: inset var(--pont-ref-effect-shadow-none);
+
+  --pont-input-effect-ring-offset-w-focus: 0px;
+  --pont-input-effect-ring-offset-color-focus: hsl(var(--pont-sem-color-bg));
+  --pont-input-effect-ring-offset-focus: 0 0 0
+    var(--pont-input-effect-ring-offset-w-focus)
+    var(--pont-input-effect-ring-offset-color-focus);
+
+  --pont-input-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
+  --pont-input-effect-ring-color-focus: hsl(var(--pont-sem-color-ring-focus));
+  --pont-input-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-input-effect-ring-w-focus) +
+        var(--pont-input-effect-ring-offset-w-focus)
+    )
+    var(--pont-input-effect-ring-color-focus);
+}
+
+/* * DISABLED * */
+
+:root {
+  /* BACKGROUND */
+  --pont-input-bg-color-disabled: hsl(var(--pont-sem-color-bg-fill-disabled));
+
+  /* EFFECT */
+  --pont-input-effect-opacity-disabled: var(--pont-sem-opacity-disabled);
+}
+
+/* * INVALID * */
+
+:root {
+  /* BORDER */
+  --pont-input-border-style-invalid: var(--pont-input-border-style);
+  --pont-input-border-color-invalid: hsl(
     var(--pont-sem-color-border-invalid-secondary)
   );
-  --pont-input-width-ring-invalid: var(--pont-sem-width-ring-invalid);
-  --pont-input-color-ring-invalid: hsl(var(--pont-sem-color-ring-destructive));
+  --pont-input-border-width-t-invalid: var(--pont-input-border-width-t);
+  --pont-input-border-width-r-invalid: var(--pont-input-border-width-r);
+  --pont-input-border-width-b-invalid: var(--pont-input-border-width-b);
+  --pont-input-border-width-l-invalid: var(--pont-input-border-width-l);
 
-  /* DISABLED */
-  --pont-input-color-bg-disabled: hsl(var(--pont-sem-color-bg-fill-disabled));
-  --pont-input-opacity-disabled: var(--pont-sem-opacity-disabled);
+  --pont-input-outline-w-invalid: 0px;
+  --pont-input-outline-color-invalid: transparent;
+  --pont-input-outline-style-invalid: var(--pont-ref-border-outline-style-none);
+  --pont-input-outline-offset-invalid: 0px;
 
-  /* * PLACEHOLDER * */
-  --pont-input-placeholder-color-text: hsl(var(--pont-sem-color-text-secondary));
+  /* EFFECT */
+  --pont-input-effect-shadow-invalid: var(--pont-ref-effect-shadow-none);
+  --pont-input-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-input-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
 
-  /* * FILE SELECTOR BUTTON * */
-  --pont-input-file-button-space-h: var(--pont-sem-space-action-size-xs);
+  --pont-input-effect-ring-offset-w-invalid: 0px;
+  --pont-input-effect-ring-offset-color-invalid: hsl(var(--pont-sem-color-bg));
+  --pont-input-effect-ring-offset-invalid: 0 0 0
+    var(--pont-input-effect-ring-offset-w-invalid)
+    var(--pont-input-effect-ring-offset-color-invalid);
 
-  --pont-input-file-button-font-size: var(--pont-sem-font-action-size);
-  --pont-input-file-button-font-line-height: var(
-    --pont-sem-font-action-line-height
+  --pont-input-effect-ring-w-invalid: var(--pont-sem-width-ring-invalid);
+  --pont-input-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
   );
-  --pont-input-file-button-font-weight: var(--pont-sem-font-action-weight);
-  --pont-input-file-button-color-text: hsl(var(--pont-sem-color-text));
+  --pont-input-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-input-effect-ring-w-invalid) +
+        var(--pont-input-effect-ring-offset-w-invalid)
+    )
+    var(--pont-input-effect-ring-color-invalid);
+}
+
+/* * -------- INPUT > PLACEHOLDER -------- * */
 
-  --pont-input-file-button-color-bg: hsl(
-    var(--pont-sem-color-bg-fill-transparent)
+:root {
+  /* TYPOGRAPHY */
+  --pont-input-placeholder-typography-color: hsl(
+    var(--pont-sem-color-text-secondary)
   );
+}
+
+/* * -------- INPUT > FILE (SELECTOR BUTTON) -------- * */
+
+:root {
+  /* SIZING */
+  --pont-input-file-sizing-w: var(--pont-ref-sizing-w-auto);
+  --pont-input-file-sizing-h: calc(var(--pont-ref-space) * 6);
+
+  /* TYPOGRAPHY */
+  --pont-input-file-typography-font: var(--pont-input-typography-font);
+  --pont-input-file-typography-size: var(--pont-ref-font-size-sm);
+  --pont-input-file-typography-weight: var(--pont-ref-font-weight-medium);
+  --pont-input-file-typography-tracking: var(--pont-input-typography-tracking);
+  --pont-input-file-typography-leading: var(--pont-ref-font-line-height-of-sm);
+
+  --pont-input-file-typography-color: var(--pont-input-typography-color);
+
+  /* BACKGROUND */
+  --pont-input-file-bg-color: transparent;
 
-  --pont-input-file-button-width-border: 0px;
+  /* BORDER */
+  --pont-input-file-border-style: var(--pont-ref-border-style-solid);
+  --pont-input-file-border-color: transparent;
+  --pont-input-file-border-width-t: 0px;
+  --pont-input-file-border-width-r: 0px;
+  --pont-input-file-border-width-b: 0px;
+  --pont-input-file-border-width-l: 0px;
 }
 
 /*
@@ -7635,47 +7984,178 @@
  */
 
 :root {
-  --pont-textarea-space-px: var(--pont-sem-space-form-px);
-  --pont-textarea-space-py: var(--pont-sem-space-form-py-lg);
+  /* SPACING */
+  --pont-textarea-spacing-pt: calc(var(--pont-ref-space) * 2);
+  --pont-textarea-spacing-pr: calc(var(--pont-ref-space) * 2.5);
+  --pont-textarea-spacing-pb: calc(var(--pont-ref-space) * 2);
+  --pont-textarea-spacing-pl: calc(var(--pont-ref-space) * 2.5);
 
-  --pont-textarea-space-min-h: var(--pont-sem-space-form-min-h);
+  /* SIZING */
+  --pont-textarea-sizing-w: var(--pont-ref-sizing-w-full);
+  --pont-textarea-sizing-h: var(--pont-ref-sizing-h-auto);
+
+  --pont-textarea-sizing-min-w: var(--pont-ref-sizing-min-w-auto);
+  --pont-textarea-sizing-max-w: var(--pont-ref-sizing-max-w-none);
+  --pont-textarea-sizing-min-h: calc(var(--pont-ref-space) * 16);
+  --pont-textarea-sizing-max-h: var(--pont-ref-sizing-max-h-none);
 
-  --pont-text-area-font-family: var(--pont-sem-font-family-default);
-  --pont-textarea-font-weight: var(--pont-sem-font-form-weight);
-  --pont-textarea-font-size: var(--pont-sem-font-form-size);
-  --pont-textarea-font-size-vw-sm: var(--pont-sem-font-form-size-vw-sm);
-  --pont-textarea-font-line-height: var(--pont-sem-font-form-line-height);
-  --pont-textarea-font-line-height-vw-sm: var(
-    --pont-sem-font-form-line-height-vw-sm
+  /* TYPOGRAPHY */
+  --pont-textarea-typography-font: var(--pont-sem-font-family-default);
+  --pont-textarea-typography-size: var(--pont-ref-font-size-sm);
+  --pont-textarea-typography-weight: var(--pont-ref-font-weight-normal);
+  --pont-textarea-typography-tracking: var(
+    --pont-ref-font-letter-spacing-normal
+  );
+  --pont-textarea-typography-leading: var(--pont-ref-font-line-height-of-sm);
+
+  --pont-textarea-typography-size-bp-max-md: var(--pont-ref-font-size-base);
+  --pont-textarea-typography-leading-bp-max-md: var(
+    --pont-ref-font-line-height-of-base
   );
 
-  --pont-textarea-color-bg: hsl(var(--pont-sem-color-bg-fill-quaternary));
+  --pont-textarea-typography-color: hsl(var(--pont-sem-color-text));
 
-  --pont-textarea-width-border: var(--pont-sem-width-border);
-  --pont-textarea-color-border: hsl(var(--pont-sem-color-border-secondary));
-  --pont-textarea-radius: var(--pont-sem-radius-form);
+  /* BACKGROUND */
+  --pont-textarea-bg-color: hsl(var(--pont-sem-color-bg-fill-quaternary));
 
-  --pont-textarea-motion-fn: var(--pont-sem-motion-fn-default);
+  /* BORDER */
+  --pont-textarea-border-radius-tl: var(--pont-ref-radius-lg);
+  --pont-textarea-border-radius-tr: var(--pont-ref-radius-lg);
+  --pont-textarea-border-radius-br: var(--pont-ref-radius-lg);
+  --pont-textarea-border-radius-bl: var(--pont-ref-radius-lg);
+
+  --pont-textarea-border-style: var(--pont-ref-border-style-solid);
+  --pont-textarea-border-color: hsl(var(--pont-sem-color-border-secondary));
+  --pont-textarea-border-width-t: var(--pont-sem-width-border);
+  --pont-textarea-border-width-r: var(--pont-sem-width-border);
+  --pont-textarea-border-width-b: var(--pont-sem-width-border);
+  --pont-textarea-border-width-l: var(--pont-sem-width-border);
+
+  --pont-textarea-outline-w: 0px;
+  --pont-textarea-outline-color: transparent;
+  --pont-textarea-outline-style: var(--pont-ref-border-outline-style-none);
+  --pont-textarea-outline-offset: 0px;
+
+  /* MOTION */
+  --pont-textarea-motion-property: var(--pont-ref-motion-property-colors);
   --pont-textarea-motion-duration: var(--pont-sem-motion-duration-default);
+  --pont-textarea-motion-fn: var(--pont-sem-motion-fn-default);
 
-  /* FOCUS VISIBLE */
-  --pont-textarea-color-border-focus: hsl(var(--pont-sem-color-border-focus));
-  --pont-textarea-width-ring-focus: var(--pont-sem-width-ring-focus);
-  --pont-textarea-color-ring-focus: hsl(var(--pont-sem-color-ring-focus));
+  /* INTERACTIVITY */
+  --pont-textarea-interactivity-field-sizing: var(
+    --pont-ref-interactivity-field-sizing-content
+  );
+}
 
-  /* INVALID */
-  --pont-textarea-color-border-invalid: hsl(
+/* * -------- STATES -------- * */
+
+/* * FOCUS * */
+
+:root {
+  /* BORDER */
+  --pont-textarea-border-style-focus: var(--pont-textarea-border-style);
+  --pont-textarea-border-color-focus: hsl(var(--pont-sem-color-border-focus));
+  --pont-textarea-border-width-t-focus: var(--pont-textarea-border-width-t);
+  --pont-textarea-border-width-r-focus: var(--pont-textarea-border-width-r);
+  --pont-textarea-border-width-b-focus: var(--pont-textarea-border-width-b);
+  --pont-textarea-border-width-l-focus: var(--pont-textarea-border-width-l);
+
+  --pont-textarea-outline-w-focus: 0px;
+  --pont-textarea-outline-color-focus: transparent;
+  --pont-textarea-outline-style-focus: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-textarea-outline-offset-focus: 0px;
+
+  /* EFFECT */
+  --pont-textarea-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
+  --pont-textarea-effect-inset-shadow-focus: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-textarea-effect-inset-ring-focus: inset
+    var(--pont-ref-effect-shadow-none);
+
+  --pont-textarea-effect-ring-offset-w-focus: 0px;
+  --pont-textarea-effect-ring-offset-color-focus: hsl(var(--pont-sem-color-bg));
+  --pont-textarea-effect-ring-offset-focus: 0 0 0
+    var(--pont-textarea-effect-ring-offset-w-focus)
+    var(--pont-textarea-effect-ring-offset-color-focus);
+
+  --pont-textarea-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
+  --pont-textarea-effect-ring-color-focus: hsl(
+    var(--pont-sem-color-ring-focus)
+  );
+  --pont-textarea-effect-ring-focus: 0 0 0
+    calc(
+      var(--pont-textarea-effect-ring-w-focus) +
+        var(--pont-textarea-effect-ring-offset-w-focus)
+    )
+    var(--pont-textarea-effect-ring-color-focus);
+}
+
+/* * DISABLED * */
+
+:root {
+  /* BACKGROUND */
+  --pont-textarea-bg-color-disabled: hsl(
+    var(--pont-sem-color-bg-fill-disabled)
+  );
+
+  /* EFFECT */
+  --pont-textarea-effect-opacity-disabled: var(--pont-sem-opacity-disabled);
+}
+
+/* * INVALID * */
+
+:root {
+  /* BORDER */
+  --pont-textarea-border-style-invalid: var(--pont-textarea-border-style);
+  --pont-textarea-border-color-invalid: hsl(
     var(--pont-sem-color-border-invalid-secondary)
   );
-  --pont-textarea-width-ring-invalid: var(--pont-sem-width-ring-invalid);
-  --pont-textarea-color-ring-invalid: hsl(var(--pont-sem-color-ring-destructive));
+  --pont-textarea-border-width-t-invalid: var(--pont-textarea-border-width-t);
+  --pont-textarea-border-width-r-invalid: var(--pont-textarea-border-width-r);
+  --pont-textarea-border-width-b-invalid: var(--pont-textarea-border-width-b);
+  --pont-textarea-border-width-l-invalid: var(--pont-textarea-border-width-l);
 
-  /* DISABLED */
-  --pont-textarea-color-bg-disabled: hsl(var(--pont-sem-color-bg-fill-disabled));
-  --pont-textarea-opacity-disabled: var(--pont-sem-opacity-disabled);
+  --pont-textarea-outline-w-invalid: 0px;
+  --pont-textarea-outline-color-invalid: transparent;
+  --pont-textarea-outline-style-invalid: var(
+    --pont-ref-border-outline-style-none
+  );
+  --pont-textarea-outline-offset-invalid: 0px;
+
+  /* EFFECT */
+  --pont-textarea-effect-shadow-invalid: var(--pont-ref-effect-shadow-none);
+  --pont-textarea-effect-inset-shadow-invalid: inset
+    var(--pont-ref-effect-shadow-none);
+  --pont-textarea-effect-inset-ring-invalid: inset
+    var(--pont-ref-effect-shadow-none);
 
-  /* * PLACEHOLDER * */
-  --pont-textarea-placeholder-color-text: hsl(
+  --pont-textarea-effect-ring-offset-w-invalid: 0px;
+  --pont-textarea-effect-ring-offset-color-invalid: hsl(
+    var(--pont-sem-color-bg)
+  );
+  --pont-textarea-effect-ring-offset-invalid: 0 0 0
+    var(--pont-textarea-effect-ring-offset-w-invalid)
+    var(--pont-textarea-effect-ring-offset-color-invalid);
+
+  --pont-textarea-effect-ring-w-invalid: var(--pont-sem-width-ring-invalid);
+  --pont-textarea-effect-ring-color-invalid: hsl(
+    var(--pont-sem-color-ring-destructive)
+  );
+  --pont-textarea-effect-ring-invalid: 0 0 0
+    calc(
+      var(--pont-textarea-effect-ring-w-invalid) +
+        var(--pont-textarea-effect-ring-offset-w-invalid)
+    )
+    var(--pont-textarea-effect-ring-color-invalid);
+}
+
+/* * -------- TEXTAREA > PLACEHOLDER -------- * */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-textarea-placeholder-typography-color: hsl(
     var(--pont-sem-color-text-secondary)
   );
   /* toast title */
@@ -10735,104 +11215,187 @@ pont-card
  */
 
 pont-checkbox {
-  display: flex;
-  position: relative;
-
-  align-items: center;
-  justify-content: center;
   flex-shrink: 0;
+
+  width: var(--pont-checkbox-sizing-w);
+  height: var(--pont-checkbox-sizing-h);
 }
 
-pont-checkbox > [data-slot="checkbox"] {
+[data-pont-checkbox] {
   display: flex;
   position: relative;
 
-  align-items: center;
   justify-content: center;
+  align-items: center;
 
-  width: var(--pont-checkbox-space-size);
-  height: var(--pont-checkbox-space-size);
+  width: var(--pont-checkbox-sizing-w);
+  height: var(--pont-checkbox-sizing-h);
 
-  background-color: var(--pont-checkbox-color-bg);
+  color: var(--pont-checkbox-typography-color);
 
-  border: var(--pont-checkbox-width-border) solid var(--pont-checkbox-color-border);
-  border-radius: var(--pont-checkbox-radius);
-  outline: none;
+  background-color: var(--pont-checkbox-bg-color);
 
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
-  transition-timing-function: var(--pont-checkbox-motion-fn);
+  border-top-left-radius: var(--pont-checkbox-border-radius-tl);
+  border-top-right-radius: var(--pont-checkbox-border-radius-tr);
+  border-bottom-left-radius: var(--pont-checkbox-border-radius-bl);
+  border-bottom-right-radius: var(--pont-checkbox-border-radius-br);
+
+  border-style: var(--pont-checkbox-border-style);
+  border-color: var(--pont-checkbox-border-color);
+  border-top-width: var(--pont-checkbox-border-width-t);
+  border-right-width: var(--pont-checkbox-border-width-r);
+  border-bottom-width: var(--pont-checkbox-border-width-b);
+  border-left-width: var(--pont-checkbox-border-width-l);
+
+  outline-width: var(--pont-checkbox-outline-w);
+  outline-color: var(--pont-checkbox-outline-color);
+  outline-style: var(--pont-checkbox-outline-style);
+  outline-offset: var(--pont-checkbox-outline-offset);
+
+  transition-property: var(--pont-checkbox-motion-property);
   transition-duration: var(--pont-checkbox-motion-duration);
+  transition-timing-function: var(--pont-checkbox-motion-fn);
 }
 
-/* CHECKED */
-pont-checkbox > [data-slot="checkbox"][data-state="checked"] {
-  color: var(--pont-checkbox-color-text-checked);
-  background-color: var(--pont-checkbox-color-bg-checked);
-  border-color: var(--pont-checkbox-color-border-checked);
+/* * -------- STATES -------- * */
+
+/* * ACTIVE (CHECKED) * */
+
+[data-pont-checkbox][data-state="checked"] {
+  color: var(--pont-checkbox-typography-color-active);
+
+  background-color: var(--pont-checkbox-bg-color-active);
+
+  border-style: var(--pont-checkbox-border-style-active);
+  border-color: var(--pont-checkbox-border-color-active);
+  border-top-width: var(--pont-checkbox-border-width-t-active);
+  border-right-width: var(--pont-checkbox-border-width-r-active);
+  border-bottom-width: var(--pont-checkbox-border-width-b-active);
+  border-left-width: var(--pont-checkbox-border-width-l-active);
+
+  outline-width: var(--pont-checkbox-outline-w-active);
+  outline-color: var(--pont-checkbox-outline-color-active);
+  outline-style: var(--pont-checkbox-outline-style-active);
+  outline-offset: var(--pont-checkbox-outline-offset-active);
 }
 
-/* INVALID */
-pont-checkbox > [data-slot="checkbox"][aria-invalid] {
-  border-color: var(--pont-checkbox-color-border-invalid);
+/* * FOCUS * */
+
+[data-pont-checkbox]:focus-visible {
+  border-style: var(--pont-checkbox-border-style-focus);
+  border-color: var(--pont-checkbox-border-color-focus);
+  border-top-width: var(--pont-checkbox-border-width-t-focus);
+  border-right-width: var(--pont-checkbox-border-width-r-focus);
+  border-bottom-width: var(--pont-checkbox-border-width-b-focus);
+  border-left-width: var(--pont-checkbox-border-width-l-focus);
+
+  outline-width: var(--pont-checkbox-outline-w-focus);
+  outline-color: var(--pont-checkbox-outline-color-focus);
+  outline-style: var(--pont-checkbox-outline-style-focus);
+  outline-offset: var(--pont-checkbox-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-checkbox-width-ring-invalid) var(--pont-checkbox-color-ring-invalid),
-    0 0 rgb(0 0 0);
+    var(--pont-checkbox-effect-inset-shadow-focus),
+    var(--pont-checkbox-effect-inset-ring-focus),
+    var(--pont-checkbox-effect-ring-offset-focus),
+    var(--pont-checkbox-effect-ring-focus),
+    var(--pont-checkbox-effect-shadow-focus);
 }
 
-/* CHECKED & INVAlID */
-pont-checkbox > [data-slot="checkbox"][data-state="checked"][aria-invalid] {
-  border-color: var(--pont-checkbox-color-border-checked);
+/* * DISABLED * */
+
+[data-pont-checkbox]:disabled {
+  opacity: var(--pont-checkbox-effect-opacity-disabled);
+
+  cursor: not-allowed;
 }
 
-/* FOCUS VISIBLE */
-pont-checkbox > [data-slot="checkbox"]:focus-visible {
-  border-color: var(--pont-checkbox-color-border-focus);
+[data-pont-field]:has(:disabled) [data-pont-checkbox] {
+  opacity: var(--pont-checkbox-effect-opacity-disabled);
+}
+
+/* * INVALID * */
+
+[data-pont-checkbox][aria-invalid] {
+  border-style: var(--pont-checkbox-border-style-invalid);
+  border-color: var(--pont-checkbox-border-color-invalid);
+  border-top-width: var(--pont-checkbox-border-width-t-invalid);
+  border-right-width: var(--pont-checkbox-border-width-r-invalid);
+  border-bottom-width: var(--pont-checkbox-border-width-b-invalid);
+  border-left-width: var(--pont-checkbox-border-width-l-invalid);
+
+  outline-width: var(--pont-checkbox-outline-w-invalid);
+  outline-color: var(--pont-checkbox-outline-color-invalid);
+  outline-style: var(--pont-checkbox-outline-style-invalid);
+  outline-offset: var(--pont-checkbox-outline-offset-invalid);
+
   box-shadow:
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 0 var(--pont-checkbox-width-ring-focus) var(--pont-checkbox-color-ring-focus),
-    0 0 rgb(0 0 0);
+    var(--pont-checkbox-effect-inset-shadow-invalid),
+    var(--pont-checkbox-effect-inset-ring-invalid),
+    var(--pont-checkbox-effect-ring-offset-invalid),
+    var(--pont-checkbox-effect-ring-invalid),
+    var(--pont-checkbox-effect-shadow-invalid);
 }
 
-/* DISABLED */
-pont-checkbox > [data-slot="checkbox"]:disabled {
-  opacity: var(--pont-checkbox-opacity-disabled);
-  cursor: not-allowed;
+/* * MISCELLANEOUS * */
+
+[data-pont-field-label]:has(:focus-visible) [data-pont-checkbox] {
+  border-color: var(--pont-checkbox-border-color);
+}
+
+[data-pont-field-label]:has(:focus-visible)
+  [data-pont-checkbox][data-state="checked"] {
+  border-color: var(--pont-checkbox-border-color-active);
+}
+
+[data-pont-field-label]:has(:focus-visible) [data-pont-checkbox] {
+  --pont-checkbox-effect-ring: var(--pont-ref-effect-shadow-none);
+}
+
+[data-pont-field-label]:has(:focus-visible) [data-pont-checkbox]:focus-visible {
+  --pont-checkbox-effect-ring-focus: var(--pont-ref-effect-shadow-none);
 }
 
-pont-field > [data-slot="field"][data-disabled] pont-checkbox > [data-slot="checkbox"] {
-  opacity: var(--pont-checkbox-opacity-disabled);
+[data-pont-field-label]:has(:focus-visible) [data-pont-checkbox][aria-invalid] {
+  --pont-checkbox-effect-ring-invalid: var(--pont-ref-effect-shadow-none);
 }
 
-/* * AFTER (::after) * */
-pont-checkbox > [data-slot="checkbox"]::after {
+[data-pont-checkbox][data-state="checked"][aria-invalid] {
+  border-color: var(--pont-checkbox-border-color-active);
+}
+
+/* * -------- CHECKBOX... AFTER -------- * */
+
+[data-pont-checkbox]::after {
   position: absolute;
-  inset-inline: var(--pont-checkbox-after-space-inset-x);
-  inset-block: var(--pont-checkbox-after-space-inset-y);
+
+  top: var(--pont-checkbox-after-layout-inset-t);
+  right: var(--pont-checkbox-after-layout-inset-r);
+  bottom: var(--pont-checkbox-after-layout-inset-b);
+  left: var(--pont-checkbox-after-layout-inset-l);
 }
 
 /*
  * --------------------------------------------------
- *  CHECKBOX INDICATOR
+ *  CHECKBOX INDICATOR & CHECKBOX ICON
  * --------------------------------------------------
  */
 
-pont-checkbox > [data-slot="checkbox"] > [data-slot="checkbox-indicator"] {
+[data-pont-checkbox-indicator] {
   display: grid;
+
   place-content: center;
-  color: currentColor;
-  transition-property: none;
-  pointer-events: none;
+
+  color: var(--pont-checkbox-icon-color);
+
+  transition-property: var(--pont-checkbox-indicator-motion-property);
+  transition-duration: var(--pont-checkbox-indicator-motion-duration);
+  transition-timing-function: var(--pont-checkbox-indicator-motion-fn);
 }
 
-/* * CHECKBOX INDICATOR ICON * */
-pont-checkbox > [data-slot="checkbox"] > [data-slot="checkbox-indicator"] > svg {
-  width: var(--pont-checkbox-indicator-icon-space-size);
-  height: var(--pont-checkbox-indicator-icon-space-size);
+[data-pont-checkbox-icon] {
+  width: var(--pont-checkbox-icon-sizing-w);
+  height: var(--pont-checkbox-icon-sizing-h);
 }
 
 /*
@@ -10840,15 +11403,22 @@ pont-checkbox > [data-slot="checkbox"] > [data-slot="checkbox-indicator"] > svg
  *  CHECKBOX INPUT
  * --------------------------------------------------
  */
-pont-checkbox > [data-slot="checkbox-input"] {
+
+[data-pont-checkbox-input] {
   position: absolute;
+
   margin: 0px;
-  width: var(--pont-checkbox-space-size);
-  height: var(--pont-checkbox-space-size);
+
+  width: var(--pont-checkbox-sizing-w);
+  height: var(--pont-checkbox-sizing-h);
+
   opacity: 0;
+
   transform: translateX(-100%);
+
   pointer-events: none;
 }
+
 /*
  * ===========================================================================
  *  EMPTY COMPONENT STYLES
@@ -11461,98 +12031,162 @@ pont-field-error
  */
 
 pont-input {
-  width: 100%;
-  min-width: 0;
+  width: var(--pont-input-sizing-w);
+  height: var(--pont-input-sizing-h);
+
+  min-width: var(--pont-input-sizing-min-w);
+  max-width: var(--pont-input-sizing-max-w);
+  min-height: var(--pont-input-sizing-min-h);
+  max-height: var(--pont-input-sizing-max-h);
+}
+
+[data-pont-input] {
+  padding-top: var(--pont-input-spacing-pt);
+  padding-right: var(--pont-input-spacing-pr);
+  padding-bottom: var(--pont-input-spacing-pb);
+  padding-left: var(--pont-input-spacing-pl);
+
+  width: var(--pont-input-sizing-w);
+  height: var(--pont-input-sizing-h);
+
+  min-width: var(--pont-input-sizing-min-w);
+  max-width: var(--pont-input-sizing-max-w);
+  min-height: var(--pont-input-sizing-min-h);
+  max-height: var(--pont-input-sizing-max-h);
+
+  font-family: var(--pont-input-typography-font);
+  /* Note: media query below with font size in smaller viewports */
+  font-size: var(--pont-input-typography-size);
+  font-weight: var(--pont-input-typography-weight);
+  /* Note: media query below with line height in smaller viewports */
+  letter-spacing: var(--pont-input-typography-tracking);
+  line-height: var(--pont-input-typography-leading);
+
+  color: var(--pont-input-typography-color);
+
+  background-color: var(--pont-input-bg-color);
+
+  border-top-left-radius: var(--pont-input-border-radius-tl);
+  border-top-right-radius: var(--pont-input-border-radius-tr);
+  border-bottom-right-radius: var(--pont-input-border-radius-br);
+  border-bottom-left-radius: var(--pont-input-border-radius-bl);
+
+  border-style: var(--pont-input-border-style);
+  border-color: var(--pont-input-border-color);
+  border-top-width: var(--pont-input-border-width-t);
+  border-right-width: var(--pont-input-border-width-r);
+  border-bottom-width: var(--pont-input-border-width-b);
+  border-left-width: var(--pont-input-border-width-l);
+
+  outline-width: var(--pont-input-outline-w);
+  outline-color: var(--pont-input-outline-color);
+  outline-style: var(--pont-input-outline-style);
+  outline-offset: var(--pont-input-outline-offset);
+
+  transition-property: var(--pont-input-motion-property);
+  transition-duration: var(--pont-input-motion-duration);
+  transition-timing-function: var(--pont-input-motion-fn);
 }
 
-pont-input > [data-slot='input'] {
-  width: 100%;
-  height: var(--pont-input-space-h);
-
-  padding: var(--pont-input-space-py) var(--pont-input-space-px);
+@media (width < 48rem) {
+  [data-pont-input] {
+    font-size: var(--pont-input-typography-size-bp-max-md);
+    line-height: var(--pont-input-typography-leading-bp-max-md);
+  }
+}
 
-  font-family: var(--pont-input-font-family);
-  font-size: var(--pont-input-font-size-vw-sm);
-  font-weight: var(--pont-input-font-weight);
+/* * -------- STATES -------- * */
 
-  line-height: var(--pont-input-font-line-height-vw-sm);
+/* * FOCUS * */
 
-  background-color: var(--pont-input-color-bg);
+[data-pont-input]:focus-visible {
+  border-style: var(--pont-input-border-style-focus);
+  border-color: var(--pont-input-border-color-focus);
+  border-top-width: var(--pont-input-border-width-t-focus);
+  border-right-width: var(--pont-input-border-width-r-focus);
+  border-bottom-width: var(--pont-input-border-width-b-focus);
+  border-left-width: var(--pont-input-border-width-l-focus);
 
-  border: var(--pont-input-width-border) solid var(--pont-input-color-border);
-  border-radius: var(--pont-input-radius);
-  outline: none;
+  outline-width: var(--pont-input-outline-w-focus);
+  outline-color: var(--pont-input-outline-color-focus);
+  outline-style: var(--pont-input-outline-style-focus);
+  outline-offset: var(--pont-input-outline-offset-focus);
 
-  transition-property:
-    color, background-color, border-color, outline-color, text-decoration-color,
-    fill, stroke;
-  transition-timing-function: var(--pont-input-motion-fn);
-  transition-duration: var(--pont-input-motion-duration);
+  box-shadow:
+    var(--pont-input-effect-inset-shadow-focus),
+    var(--pont-input-effect-inset-ring-focus),
+    var(--pont-input-effect-ring-offset-focus),
+    var(--pont-input-effect-ring-focus), var(--pont-input-effect-shadow-focus);
 }
 
-@media (width >= 48rem) {
-  pont-input > [data-slot='input'] {
-    font-size: var(--pont-input-font-size);
-    line-height: var(--pont-input-font-line-height);
-  }
-}
+/* * DISABLED * */
 
-/* FOCUS VISIBLE */
-pont-input > [data-slot='input']:focus-visible {
-  border-color: var(--pont-input-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-input-width-ring-focus) var(--pont-input-color-ring-focus),
-    0 0 rgb(0 0 0);
-}
+[data-pont-input]:disabled {
+  background-color: var(--pont-input-bg-color-disabled);
 
-/* INVALID */
-pont-input > [data-slot='input'][aria-invalid] {
-  border-color: var(--pont-input-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-input-width-ring-invalid)
-      var(--pont-input-color-ring-invalid),
-    0 0 rgb(0 0 0);
-}
+  opacity: var(--pont-input-effect-opacity-disabled);
 
-/* DISABLED */
-pont-input > [data-slot='input']:disabled {
-  background-color: var(--pont-input-color-bg-disabled);
-  opacity: var(--pont-input-opacity-disabled);
-  pointer-events: none;
   cursor: not-allowed;
+  pointer-events: none;
 }
 
-/* * PLACEHOLDER * */
+/* * INVALID * */
 
-pont-input > [data-slot='input']::-moz-placeholder {
-  color: var(--pont-input-placeholder-color-text);
+[data-pont-input][aria-invalid] {
+  border-style: var(--pont-input-border-style-invalid);
+  border-color: var(--pont-input-border-color-invalid);
+  border-top-width: var(--pont-input-border-width-t-invalid);
+  border-right-width: var(--pont-input-border-width-r-invalid);
+  border-bottom-width: var(--pont-input-border-width-b-invalid);
+  border-left-width: var(--pont-input-border-width-l-invalid);
+
+  outline-width: var(--pont-input-outline-w-invalid);
+  outline-color: var(--pont-input-outline-color-invalid);
+  outline-style: var(--pont-input-outline-style-invalid);
+  outline-offset: var(--pont-input-outline-offset-invalid);
+
+  box-shadow:
+    var(--pont-input-effect-inset-shadow-invalid),
+    var(--pont-input-effect-inset-ring-invalid),
+    var(--pont-input-effect-ring-offset-invalid),
+    var(--pont-input-effect-ring-invalid),
+    var(--pont-input-effect-shadow-invalid);
 }
 
-pont-input > [data-slot='input']::placeholder {
-  color: var(--pont-input-placeholder-color-text);
+/* * -------- INPUT > PLACEHOLDER -------- * */
+
+[data-pont-input]::-moz-placeholder {
+  color: var(--pont-input-placeholder-typography-color);
 }
 
-/* * FILE SELECTOR BUTTON * */
+[data-pont-input]::placeholder {
+  color: var(--pont-input-placeholder-typography-color);
+}
 
-pont-input > [data-slot='input']::file-selector-button {
+/* * -------- INPUT > FILE (SELECTOR BUTTON) -------- * */
+
+[data-pont-input]::file-selector-button {
   display: inline-flex;
 
-  height: var(--pont-input-file-button-space-h);
+  width: var(--pont-input-file-sizing-w);
+  height: var(--pont-input-file-sizing-h);
+
+  font-family: var(--pont-input-file-typography-font);
+  font-size: var(--pont-input-file-typography-size);
+  font-weight: var(--pont-input-file-typography-weight);
+  letter-spacing: var(--pont-input-file-typography-tracking);
+  line-height: var(--pont-input-file-typography-leading);
 
-  font-size: var(--pont-input-file-button-font-size);
-  line-height: var(--pont-input-file-button-font-line-height);
-  font-weight: var(--pont-input-file-button-font-weight);
-  color: var(--pont-input-file-button-color-text);
+  color: var(--pont-input-file-typography-color);
 
-  background-color: var(--pont-input-file-button-color-bg);
+  background-color: var(--pont-input-file-bg-color);
 
-  border-width: var(--pont-input-file-button-width-border);
+  border-style: var(--pont-input-file-border-style);
+  border-color: var(--pont-input-file-border-color);
+  border-top-width: var(--pont-input-file-border-width-t);
+  border-right-width: var(--pont-input-file-border-width-r);
+  border-bottom-width: var(--pont-input-file-border-width-b);
+  border-left-width: var(--pont-input-file-border-width-l);
 }
 
 /*
@@ -11913,12 +12547,22 @@ pont-input-group-input {
   flex: 1;
   width: 100%;
 
-  --pont-input-color-bg: transparent;
-  --pont-input-width-border: 0;
-  --pont-input-radius: 0;
-  --pont-input-width-ring-focus: 0;
-  --pont-input-width-ring-invalid: 0;
-  --pont-input-color-bg-disabled: transparent;
+  --pont-input-bg-color: transparent;
+
+  --pont-input-border-width-t: 0;
+  --pont-input-border-width-r: 0;
+  --pont-input-border-width-b: 0;
+  --pont-input-border-width-l: 0;
+  
+  --pont-input-border-radius-tl: 0;
+  --pont-input-border-radius-tr: 0;
+  --pont-input-border-radius-br: 0;
+  --pont-input-border-radius-bl: 0;
+
+  --pont-input-effect-ring-w-focus: 0px;
+  --pont-input-effect-ring-w-invalid: 0px;
+  
+  --pont-input-bg-color-disabled: transparent;
 }
 
 /*
@@ -11931,17 +12575,27 @@ pont-input-group-textarea {
   flex: 1;
   width: 100%;
 
-  --pont-textarea-color-bg: transparent;
-  --pont-textarea-width-border: 0;
-  --pont-textarea-radius: 0;
-  --pont-textarea-width-ring-focus: 0;
-  --pont-textarea-width-ring-invalid: 0;
-  --pont-textarea-color-bg-disabled: transparent;
+  --pont-textarea-bg-color: transparent;
+
+  --pont-textarea-border-radius-tl: 0;
+  --pont-textarea-border-radius-tr: 0;
+  --pont-textarea-border-radius-br: 0;
+  --pont-textarea-border-radius-bl: 0;
+
+  --pont-textarea-border-width-t: 0;
+  --pont-textarea-border-width-r: 0;
+  --pont-textarea-border-width-b: 0;
+  --pont-textarea-border-width-l: 0;
+
+  --pont-textarea-effect-ring-w-focus: 0px;
+  --pont-textarea-effect-ring-w-invalid: 0px;
+
+  --pont-textarea-bg-color-disabled: transparent;
 }
 
 pont-input-group-textarea
   > pont-textarea[data-slot='input-group-textarea']
-  > [data-slot='textarea'] {
+  > [data-pont-textarea] {
   resize: none;
 }
 
@@ -12899,74 +13553,140 @@ pont-tabs-content > [data-slot="tabs-content"][data-state="active"] {
  */
 
 pont-textarea {
-  width: 100%;
+  width: var(--pont-textarea-sizing-w);
+  height: var(--pont-textarea-sizing-h);
+
+  min-width: var(--pont-textarea-sizing-min-w);
+  max-width: var(--pont-textarea-sizing-max-w);
+  min-height: var(--pont-textarea-sizing-min-h);
+  max-height: var(--pont-textarea-sizing-max-h);
 }
 
-pont-textarea > [data-slot='textarea'] {
-  field-sizing: content;
+[data-pont-textarea] {
   display: flex;
-  padding-inline: var(--pont-textarea-space-px);
-  padding-block: var(--pont-textarea-space-py);
-  width: 100%;
-  min-height: var(--pont-textarea-space-min-h);
-
-  font-family: var(--pont-textarea-font-family);
-  font-size: var(--pont-textarea-font-size-vw-sm);
-  font-weight: var(--pont-textarea-font-weight);
-  line-height: var(--pont-textarea-font-line-height-vw-sm);
-  background-color: var(--pont-textarea-color-bg);
-  border: var(--pont-textarea-width-border) solid
-    var(--pont-textarea-color-border);
-  border-radius: var(--pont-textarea-radius);
-  outline: none;
-  transition-property:
-    color, background-color, border-color, outline-color, text-decoration-color,
-    fill, stroke;
-  transition-timing-function: var(--pont-textarea-motion-fn);
+
+  padding-top: var(--pont-textarea-spacing-pt);
+  padding-right: var(--pont-textarea-spacing-pr);
+  padding-bottom: var(--pont-textarea-spacing-pb);
+  padding-left: var(--pont-textarea-spacing-pl);
+
+  width: var(--pont-textarea-sizing-w);
+  height: var(--pont-textarea-sizing-h);
+
+  min-width: var(--pont-textarea-sizing-min-w);
+  max-width: var(--pont-textarea-sizing-max-w);
+  min-height: var(--pont-textarea-sizing-min-h);
+  max-height: var(--pont-textarea-sizing-max-h);
+
+  font-family: var(--pont-textarea-typography-font);
+  /* Note: media query below with font size in smaller viewports */
+  font-size: var(--pont-textarea-typography-size);
+  font-weight: var(--pont-textarea-typography-weight);
+  /* Note: media query below with line height in smaller viewports */
+  letter-spacing: var(--pont-textarea-typography-tracking);
+  line-height: var(--pont-textarea-typography-leading);
+
+  color: var(--pont-textarea-typography-color);
+
+  background-color: var(--pont-textarea-bg-color);
+
+  border-top-left-radius: var(--pont-textarea-border-radius-tl);
+  border-top-right-radius: var(--pont-textarea-border-radius-tr);
+  border-bottom-right-radius: var(--pont-textarea-border-radius-br);
+  border-bottom-left-radius: var(--pont-textarea-border-radius-bl);
+
+  border-style: var(--pont-textarea-border-style);
+  border-color: var(--pont-textarea-border-color);
+  border-top-width: var(--pont-textarea-border-width-t);
+  border-right-width: var(--pont-textarea-border-width-r);
+  border-bottom-width: var(--pont-textarea-border-width-b);
+  border-left-width: var(--pont-textarea-border-width-l);
+
+  outline-width: var(--pont-textarea-outline-w);
+  outline-color: var(--pont-textarea-outline-color);
+  outline-style: var(--pont-textarea-outline-style);
+  outline-offset: var(--pont-textarea-outline-offset);
+
+  transition-property: var(--pont-textarea-motion-property);
   transition-duration: var(--pont-textarea-motion-duration);
+  transition-timing-function: var(--pont-textarea-motion-fn);
+
+  field-sizing: var(--pont-textarea-interactivity-field-sizing);
 }
 
-@media (width >= 48rem) {
-  pont-textarea > [data-slot='textarea'] {
-    font-size: var(--pont-textarea-font-size);
-    line-height: var(--pont-textarea-font-line-height);
+@media (width < 48rem) {
+  [data-pont-textarea] {
+    font-size: var(--pont-textarea-typography-size-bp-max-md);
+    line-height: var(--pont-textarea-typography-leading-bp-max-md);
   }
 }
 
-pont-textarea > [data-slot='textarea']:focus-visible {
-  border-color: var(--pont-textarea-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-textarea-width-ring-focus)
-      var(--pont-textarea-color-ring-focus),
-    0 0 rgb(0 0 0);
-}
+/* * -------- STATES -------- * */
+
+/* * FOCUS * */
+
+[data-pont-textarea]:focus-visible {
+  border-style: var(--pont-textarea-border-style-focus);
+  border-color: var(--pont-textarea-border-color-focus);
+  border-top-width: var(--pont-textarea-border-width-t-focus);
+  border-right-width: var(--pont-textarea-border-width-r-focus);
+  border-bottom-width: var(--pont-textarea-border-width-b-focus);
+  border-left-width: var(--pont-textarea-border-width-l-focus);
+
+  outline-width: var(--pont-textarea-outline-w-focus);
+  outline-color: var(--pont-textarea-outline-color-focus);
+  outline-style: var(--pont-textarea-outline-style-focus);
+  outline-offset: var(--pont-textarea-outline-offset-focus);
 
-pont-textarea > [data-slot='textarea'][aria-invalid] {
-  border-color: var(--pont-textarea-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-textarea-width-ring-invalid)
-      var(--pont-textarea-color-ring-invalid),
-    0 0 rgb(0 0 0);
+    var(--pont-textarea-effect-inset-shadow-focus),
+    var(--pont-textarea-effect-inset-ring-focus),
+    var(--pont-textarea-effect-ring-offset-focus),
+    var(--pont-textarea-effect-ring-focus),
+    var(--pont-textarea-effect-shadow-focus);
 }
 
-pont-textarea > [data-slot='textarea']:disabled {
-  background-color: var(--pont-textarea-color-bg-disabled);
-  opacity: var(--pont-textarea-opacity-disabled);
+/* * DISABLED * */
+
+[data-pont-textarea]:disabled {
+  background-color: var(--pont-textarea-bg-color-disabled);
+
+  opacity: var(--pont-textarea-effect-opacity-disabled);
+
   cursor: not-allowed;
 }
 
-pont-textarea > [data-slot='textarea']::-moz-placeholder {
-  color: var(--pont-textarea-placeholder-color-text);
+/* * INVALID * */
+
+[data-pont-textarea][aria-invalid] {
+  border-style: var(--pont-textarea-border-style-invalid);
+  border-color: var(--pont-textarea-border-color-invalid);
+  border-top-width: var(--pont-textarea-border-width-t-invalid);
+  border-right-width: var(--pont-textarea-border-width-r-invalid);
+  border-bottom-width: var(--pont-textarea-border-width-b-invalid);
+  border-left-width: var(--pont-textarea-border-width-l-invalid);
+
+  outline-width: var(--pont-textarea-outline-w-invalid);
+  outline-color: var(--pont-textarea-outline-color-invalid);
+  outline-style: var(--pont-textarea-outline-style-invalid);
+  outline-offset: var(--pont-textarea-outline-offset-invalid);
+
+  box-shadow:
+    var(--pont-textarea-effect-inset-shadow-invalid),
+    var(--pont-textarea-effect-inset-ring-invalid),
+    var(--pont-textarea-effect-ring-offset-invalid),
+    var(--pont-textarea-effect-ring-invalid),
+    var(--pont-textarea-effect-shadow-invalid);
 }
 
-pont-textarea > [data-slot='textarea']::placeholder {
-  color: var(--pont-textarea-placeholder-color-text);
+/* * -------- TEXTAREA > PLACEHOLDER -------- * */
+
+[data-pont-textarea]::-moz-placeholder {
+  color: var(--pont-textarea-placeholder-typography-color);
+}
+
+[data-pont-textarea]::placeholder {
+  color: var(--pont-textarea-placeholder-typography-color);
 }
 
 /*
@@ -14079,34 +14799,40 @@ DIVIDER
 
 /* MultiInput */
 :root {
-  --pont-multi-email-input-radius: var(--pont-input-radius);
-  --pont-multi-email-input-width-border: var(--pont-input-width-border);
-  --pont-multi-email-input-color-border: var(--pont-input-color-border);
-  --pont-multi-email-input-color-bg: var(--pont-input-color-bg);
-  --pont-multi-email-input-font-size: var(--pont-input-font-size);
-  --pont-multi-email-input-color-border-focus: var(
-    --pont-input-color-border-focus
-  );
-  --pont-multi-email-input-width-ring-focus: var(--pont-input-width-ring-focus);
-  --pont-multi-email-input-color-ring-focus: var(--pont-input-color-ring-focus);
+  /* TODO: each corner now has its own radius token in pont-input */
+  --pont-multi-email-input-radius: var(--pont-input-border-radius-tl);
+  /* TODO: each side now has its own width token in pont-input */
+  --pont-multi-email-input-width-border: var(--pont-input-border-width-t);
+  --pont-multi-email-input-color-border: var(--pont-input-border-color);
+  --pont-multi-email-input-color-bg: var(--pont-input-bg-color);
+  --pont-multi-email-input-font-size: var(--pont-input-typography-size);
+  --pont-multi-email-input-color-border-focus: var(--pont-input-border-color-focus);
+  /* TODO: each side now has its own width token in pont-input */
+  --pont-multi-email-input-width-ring-focus: var(--pont-input-border-width-t-focus);
+  --pont-multi-email-input-color-ring-focus: var(--pont-input-effect-ring-color-focus);
   --pont-multi-email-input-error-color-text: var(--pont-sem-color-text-destructive);
-  --pont-multi-email-input-space-py: var(--pont-input-space-py);
-  --pont-multi-email-input-space-px: var(--pont-input-space-px);
+  /* TODO: each side now has its own padding token in pont input */
+  --pont-multi-email-input-space-py: var(--pont-input-spacing-pt);
+  --pont-multi-email-input-space-px: var(--pont-input-spacing-pr);
 }
 
 /* Badge Selector */
 :root {
-  --pont-badge-selector-radius: var(--pont-input-radius);
-  --pont-badge-selector-width-border: var(--pont-input-width-border);
-  --pont-badge-selector-color-border: var(--pont-input-color-border);
-  --pont-badge-selector-color-bg: var(--pont-input-color-bg);
-  --pont-badge-selector-font-size: var(--pont-input-font-size);
-  --pont-badge-selector-color-border-focus: var(--pont-input-color-border-focus);
-  --pont-badge-selector-width-ring-focus: var(--pont-input-width-ring-focus);
-  --pont-badge-selector-color-ring-focus: var(--pont-input-color-ring-focus);
+  /* TODO: each corner now has its own radius token in pont-input */
+  --pont-badge-selector-radius: var(--pont-input-border-radius-tl);
+  /* TODO: each side now has its own width token in pont-input */
+  --pont-badge-selector-width-border: var(--pont-input-border-width-t);
+  --pont-badge-selector-color-border: var(--pont-input-border-color);
+  --pont-badge-selector-color-bg: var(--pont-input-bg-color);
+  --pont-badge-selector-font-size: var(--pont-input-typography-size);
+  --pont-badge-selector-color-border-focus: var(--pont-input-border-color-focus);
+  /* TODO: each side now has its own width token in pont-input */
+  --pont-badge-selector-width-ring-focus: var(--pont-input-effect-ring-w-focus);
+  --pont-badge-selector-color-ring-focus: var(--pont-input-effect-ring-color-focus);
   --pont-badge-selector-error-color-text: var(--pont-sem-color-text-destructive);
-  --pont-badge-selector-space-py: var(--pont-input-space-py);
-  --pont-badge-selector-space-px: var(--pont-input-space-px);
+  /* TODO: each side now has its own padding token in pont input */
+  --pont-badge-selector-space-py: var(--pont-input-spacing-pt);
+  --pont-badge-selector-space-px: var(--pont-input-spacing-pr);
   --pont-badge-selector-ul-color-bg: var(--pont-sem-color-bg-surface-secondary);
 }
 
@@ -15400,8 +16126,8 @@ pont-profile pont-card {
 }
 
 pont-profile pont-card pont-input {
-  --pont-input-color-bg: var(--pont-account-settings-input-color-bg);
-  --pont-input-color-bg-disabled: var(
+  --pont-input-bg-color: var(--pont-account-settings-input-color-bg);
+  --pont-input-bg-color-disabled: var(
     --pont-account-settings-input-color-bg-disabled
   );
 }