pgo-uiux2 1.0.0

package/src/pgo-components/styles/utilities/sizing.css

@@ -0,0 +1,70 @@
+/* prettier-ignore */
+@layer utilities {
+  /* Height */
+  .vts-h-auto         { height: auto; }
+  .vts-h-screen       { height: 100vh; }
+  .vts-h-0            { height: 0; }
+  .vts-h-10           { height: 10%; }
+  .vts-h-20           { height: 20%; }
+  .vts-h-25           { height: 25%; }
+  .vts-h-30           { height: 30%; }
+  .vts-h-33           { height: 33%; }
+  .vts-h-50           { height: 50%; }
+  .vts-h-60           { height: 60%; }
+  .vts-h-66           { height: 66%; }
+  .vts-h-75           { height: 75%; }
+  .vts-h-80           { height: 80%; }
+  .vts-h-90           { height: 90%; }
+  .vts-h-100          { height: 100%; }
+  .vts-fill-height    { height: 100%; }
+  .vts-height-screen  { height: 100dvh; }
+
+  /* Max-Height */
+  .vts-max-h-100      { max-height: 100%; }
+  .vts-max-h-screen   { max-height: 100dvh; }
+  .vts-max-h-280      { max-height: 280px; }
+  .vts-max-h-320      { max-height: 320px; }
+  .vts-max-h-512      { max-height: 512px; }
+
+  /* Width */
+  .vts-w-auto { width: auto; }
+  .vts-w-screen { width: 100vw; }
+  .vts-width-screen { width: 100dvw; }
+  .vts-w-0    { width: 0; }
+  .vts-w-10   { width: 10%; }
+  .vts-w-20   { width: 20%; }
+  .vts-w-25   { width: 25%; }
+  .vts-w-30   { width: 30%; }
+  .vts-w-33   { width: 33%; }
+  .vts-w-45   { width: 45%; }
+  .vts-w-50   { width: 50%; }
+  .vts-w-55   { width: 55%; }
+  .vts-w-60   { width: 60%; }
+  .vts-w-66   { width: 66%; }
+  .vts-w-70   { width: 70%; }
+  .vts-w-75   { width: 75%; }
+  .vts-w-80   { width: 80%; }
+  .vts-w-90   { width: 90%; }
+  .vts-w-100  { width: 100%; }
+
+  /* Max-Width */
+  .vts-max-w-100   { max-width: 100%; }
+  .vts-max-w-screen { max-width: 100dvw; }
+  .vts-max-w-280   { max-width: 280px; }
+  .vts-max-w-320   { max-width: 320px; }
+  .vts-max-w-384   { max-width: 384px; }
+  .vts-max-w-448   { max-width: 448px; }
+  .vts-max-w-480   { max-width: 480px; }
+  .vts-max-w-512   { max-width: 512px; }
+  .vts-max-w-560   { max-width: 560px; }
+  .vts-max-w-640   { max-width: 640px; }
+  .vts-max-w-768   { max-width: 768px; }
+
+  /* Min-Width */
+  .vts-min-w-0     { min-width: 0; }
+  .vts-min-w-100   { min-width: 100%; }
+
+  /* Min-Height */
+  .vts-min-h-0     { min-height: 0; }
+  .vts-min-h-100   { min-height: 100%; }
+}

package/src/pgo-components/styles/utilities/spacing.css

@@ -0,0 +1,578 @@
+/* prettier-ignore */
+
+@layer utilities {
+  /* =========================
+     Gap
+     ========================= */
+  .vts-ga-0  { gap: 0; }
+  .vts-ga-1  { gap: 4px; }
+  .vts-ga-2  { gap: 8px; }
+  .vts-ga-3  { gap: 12px; }
+  .vts-ga-4  { gap: 16px; }
+  .vts-ga-5  { gap: 20px; }
+  .vts-ga-6  { gap: 24px; }
+  .vts-ga-7  { gap: 28px; }
+  .vts-ga-8  { gap: 32px; }
+  .vts-ga-9  { gap: 36px; }
+  .vts-ga-10 { gap: 40px; }
+  .vts-ga-11 { gap: 44px; }
+  .vts-ga-12 { gap: 48px; }
+  .vts-ga-13 { gap: 52px; }
+  .vts-ga-14 { gap: 56px; }
+  .vts-ga-15 { gap: 60px; }
+  .vts-ga-16 { gap: 64px; }
+
+  /* =========================
+     Margin (all sides)
+     ========================= */
+  .vts-ma-0  { margin: 0; }
+  .vts-ma-1  { margin: 4px; }
+  .vts-ma-2  { margin: 8px; }
+  .vts-ma-3  { margin: 12px; }
+  .vts-ma-4  { margin: 16px; }
+  .vts-ma-5  { margin: 20px; }
+  .vts-ma-6  { margin: 24px; }
+  .vts-ma-7  { margin: 28px; }
+  .vts-ma-8  { margin: 32px; }
+  .vts-ma-9  { margin: 36px; }
+  .vts-ma-10 { margin: 40px; }
+  .vts-ma-11 { margin: 44px; }
+  .vts-ma-12 { margin: 48px; }
+  .vts-ma-13 { margin: 52px; }
+  .vts-ma-14 { margin: 56px; }
+  .vts-ma-15 { margin: 60px; }
+  .vts-ma-16 { margin: 64px; }
+
+  /* =========================
+     Margin left (physical)
+     ========================= */
+  .vts-ml-0  { margin-left: 0; }
+  .vts-ml-1  { margin-left: 4px; }
+  .vts-ml-2  { margin-left: 8px; }
+  .vts-ml-3  { margin-left: 12px; }
+  .vts-ml-4  { margin-left: 16px; }
+  .vts-ml-5  { margin-left: 20px; }
+  .vts-ml-6  { margin-left: 24px; }
+  .vts-ml-7  { margin-left: 28px; }
+  .vts-ml-8  { margin-left: 32px; }
+  .vts-ml-9  { margin-left: 36px; }
+  .vts-ml-10 { margin-left: 40px; }
+  .vts-ml-11 { margin-left: 44px; }
+  .vts-ml-12 { margin-left: 48px; }
+  .vts-ml-13 { margin-left: 52px; }
+  .vts-ml-14 { margin-left: 56px; }
+  .vts-ml-15 { margin-left: 60px; }
+  .vts-ml-16 { margin-left: 64px; }
+
+  /* =========================
+     Margin start (logical, RTL-safe)
+     ========================= */
+  .vts-ms-0  { margin-inline-start: 0; }
+  .vts-ms-1  { margin-inline-start: 4px; }
+  .vts-ms-2  { margin-inline-start: 8px; }
+  .vts-ms-3  { margin-inline-start: 12px; }
+  .vts-ms-4  { margin-inline-start: 16px; }
+  .vts-ms-5  { margin-inline-start: 20px; }
+  .vts-ms-6  { margin-inline-start: 24px; }
+  .vts-ms-7  { margin-inline-start: 28px; }
+  .vts-ms-8  { margin-inline-start: 32px; }
+  .vts-ms-9  { margin-inline-start: 36px; }
+  .vts-ms-10 { margin-inline-start: 40px; }
+  .vts-ms-11 { margin-inline-start: 44px; }
+  .vts-ms-12 { margin-inline-start: 48px; }
+  .vts-ms-13 { margin-inline-start: 52px; }
+  .vts-ms-14 { margin-inline-start: 56px; }
+  .vts-ms-15 { margin-inline-start: 60px; }
+  .vts-ms-16 { margin-inline-start: 64px; }
+
+  /* =========================
+     Margin top
+     ========================= */
+  .vts-mt-0  { margin-top: 0; }
+  .vts-mt-1  { margin-top: 4px; }
+  .vts-mt-2  { margin-top: 8px; }
+  .vts-mt-3  { margin-top: 12px; }
+  .vts-mt-4  { margin-top: 16px; }
+  .vts-mt-5  { margin-top: 20px; }
+  .vts-mt-6  { margin-top: 24px; }
+  .vts-mt-7  { margin-top: 28px; }
+  .vts-mt-8  { margin-top: 32px; }
+  .vts-mt-9  { margin-top: 36px; }
+  .vts-mt-10 { margin-top: 40px; }
+  .vts-mt-11 { margin-top: 44px; }
+  .vts-mt-12 { margin-top: 48px; }
+  .vts-mt-13 { margin-top: 52px; }
+  .vts-mt-14 { margin-top: 56px; }
+  .vts-mt-15 { margin-top: 60px; }
+  .vts-mt-16 { margin-top: 64px; }
+
+  /* =========================
+     Margin right (physical)
+     ========================= */
+  .vts-mr-0  { margin-right: 0; }
+  .vts-mr-1  { margin-right: 4px; }
+  .vts-mr-2  { margin-right: 8px; }
+  .vts-mr-3  { margin-right: 12px; }
+  .vts-mr-4  { margin-right: 16px; }
+  .vts-mr-5  { margin-right: 20px; }
+  .vts-mr-6  { margin-right: 24px; }
+  .vts-mr-7  { margin-right: 28px; }
+  .vts-mr-8  { margin-right: 32px; }
+  .vts-mr-9  { margin-right: 36px; }
+  .vts-mr-10 { margin-right: 40px; }
+  .vts-mr-11 { margin-right: 44px; }
+  .vts-mr-12 { margin-right: 48px; }
+  .vts-mr-13 { margin-right: 52px; }
+  .vts-mr-14 { margin-right: 56px; }
+  .vts-mr-15 { margin-right: 60px; }
+  .vts-mr-16 { margin-right: 64px; }
+
+  /* =========================
+     Margin end (logical, RTL-safe)
+     ========================= */
+  .vts-me-0  { margin-inline-end: 0; }
+  .vts-me-1  { margin-inline-end: 4px; }
+  .vts-me-2  { margin-inline-end: 8px; }
+  .vts-me-3  { margin-inline-end: 12px; }
+  .vts-me-4  { margin-inline-end: 16px; }
+  .vts-me-5  { margin-inline-end: 20px; }
+  .vts-me-6  { margin-inline-end: 24px; }
+  .vts-me-7  { margin-inline-end: 28px; }
+  .vts-me-8  { margin-inline-end: 32px; }
+  .vts-me-9  { margin-inline-end: 36px; }
+  .vts-me-10 { margin-inline-end: 40px; }
+  .vts-me-11 { margin-inline-end: 44px; }
+  .vts-me-12 { margin-inline-end: 48px; }
+  .vts-me-13 { margin-inline-end: 52px; }
+  .vts-me-14 { margin-inline-end: 56px; }
+  .vts-me-15 { margin-inline-end: 60px; }
+  .vts-me-16 { margin-inline-end: 64px; }
+
+  /* =========================
+     Margin bottom
+     ========================= */
+  .vts-mb-0  { margin-bottom: 0; }
+  .vts-mb-1  { margin-bottom: 4px; }
+  .vts-mb-2  { margin-bottom: 8px; }
+  .vts-mb-3  { margin-bottom: 12px; }
+  .vts-mb-4  { margin-bottom: 16px; }
+  .vts-mb-5  { margin-bottom: 20px; }
+  .vts-mb-6  { margin-bottom: 24px; }
+  .vts-mb-7  { margin-bottom: 28px; }
+  .vts-mb-8  { margin-bottom: 32px; }
+  .vts-mb-9  { margin-bottom: 36px; }
+  .vts-mb-10 { margin-bottom: 40px; }
+  .vts-mb-11 { margin-bottom: 44px; }
+  .vts-mb-12 { margin-bottom: 48px; }
+  .vts-mb-13 { margin-bottom: 52px; }
+  .vts-mb-14 { margin-bottom: 56px; }
+  .vts-mb-15 { margin-bottom: 60px; }
+  .vts-mb-16 { margin-bottom: 64px; }
+
+  /* =========================
+     Negative margin (all sides)
+     ========================= */
+  .vts-ma-n1  { margin: -4px; }
+  .vts-ma-n2  { margin: -8px; }
+  .vts-ma-n3  { margin: -12px; }
+  .vts-ma-n4  { margin: -16px; }
+  .vts-ma-n5  { margin: -20px; }
+  .vts-ma-n6  { margin: -24px; }
+  .vts-ma-n7  { margin: -28px; }
+  .vts-ma-n8  { margin: -32px; }
+  .vts-ma-n9  { margin: -36px; }
+  .vts-ma-n10 { margin: -40px; }
+  .vts-ma-n11 { margin: -44px; }
+  .vts-ma-n12 { margin: -48px; }
+  .vts-ma-n13 { margin: -52px; }
+  .vts-ma-n14 { margin: -56px; }
+  .vts-ma-n15 { margin: -60px; }
+  .vts-ma-n16 { margin: -64px; }
+
+    /* =========================
+     Negative margin left (physical)
+     ========================= */
+  .vts-ml-n1  { margin-left: -4px; }
+  .vts-ml-n2  { margin-left: -8px; }
+  .vts-ml-n3  { margin-left: -12px; }
+  .vts-ml-n4  { margin-left: -16px; }
+  .vts-ml-n5  { margin-left: -20px; }
+  .vts-ml-n6  { margin-left: -24px; }
+  .vts-ml-n7  { margin-left: -28px; }
+  .vts-ml-n8  { margin-left: -32px; }
+  .vts-ml-n9  { margin-left: -36px; }
+  .vts-ml-n10 { margin-left: -40px; }
+  .vts-ml-n11 { margin-left: -44px; }
+  .vts-ml-n12 { margin-left: -48px; }
+  .vts-ml-n13 { margin-left: -52px; }
+  .vts-ml-n14 { margin-left: -56px; }
+  .vts-ml-n15 { margin-left: -60px; }
+  .vts-ml-n16 { margin-left: -64px; }
+
+  /* =========================
+     Negative margin start (logical, RTL-safe)
+     ========================= */
+  .vts-ms-n1  { margin-inline-start: -4px; }
+  .vts-ms-n2  { margin-inline-start: -8px; }
+  .vts-ms-n3  { margin-inline-start: -12px; }
+  .vts-ms-n4  { margin-inline-start: -16px; }
+  .vts-ms-n5  { margin-inline-start: -20px; }
+  .vts-ms-n6  { margin-inline-start: -24px; }
+  .vts-ms-n7  { margin-inline-start: -28px; }
+  .vts-ms-n8  { margin-inline-start: -32px; }
+  .vts-ms-n9  { margin-inline-start: -36px; }
+  .vts-ms-n10 { margin-inline-start: -40px; }
+  .vts-ms-n11 { margin-inline-start: -44px; }
+  .vts-ms-n12 { margin-inline-start: -48px; }
+  .vts-ms-n13 { margin-inline-start: -52px; }
+  .vts-ms-n14 { margin-inline-start: -56px; }
+  .vts-ms-n15 { margin-inline-start: -60px; }
+  .vts-ms-n16 { margin-inline-start: -64px; }
+
+  /* =========================
+     Negative margin top
+     ========================= */
+  .vts-mt-n1  { margin-top: -4px; }
+  .vts-mt-n2  { margin-top: -8px; }
+  .vts-mt-n3  { margin-top: -12px; }
+  .vts-mt-n4  { margin-top: -16px; }
+  .vts-mt-n5  { margin-top: -20px; }
+  .vts-mt-n6  { margin-top: -24px; }
+  .vts-mt-n7  { margin-top: -28px; }
+  .vts-mt-n8  { margin-top: -32px; }
+  .vts-mt-n9  { margin-top: -36px; }
+  .vts-mt-n10 { margin-top: -40px; }
+  .vts-mt-n11 { margin-top: -44px; }
+  .vts-mt-n12 { margin-top: -48px; }
+  .vts-mt-n13 { margin-top: -52px; }
+  .vts-mt-n14 { margin-top: -56px; }
+  .vts-mt-n15 { margin-top: -60px; }
+  .vts-mt-n16 { margin-top: -64px; }
+
+  /* =========================
+     Negative margin right (physical)
+     ========================= */
+  .vts-mr-n1  { margin-right: -4px; }
+  .vts-mr-n2  { margin-right: -8px; }
+  .vts-mr-n3  { margin-right: -12px; }
+  .vts-mr-n4  { margin-right: -16px; }
+  .vts-mr-n5  { margin-right: -20px; }
+  .vts-mr-n6  { margin-right: -24px; }
+  .vts-mr-n7  { margin-right: -28px; }
+  .vts-mr-n8  { margin-right: -32px; }
+  .vts-mr-n9  { margin-right: -36px; }
+  .vts-mr-n10 { margin-right: -40px; }
+  .vts-mr-n11 { margin-right: -44px; }
+  .vts-mr-n12 { margin-right: -48px; }
+  .vts-mr-n13 { margin-right: -52px; }
+  .vts-mr-n14 { margin-right: -56px; }
+  .vts-mr-n15 { margin-right: -60px; }
+  .vts-mr-n16 { margin-right: -64px; }
+
+  /* =========================
+     Negative margin end (logical, RTL-safe)
+     ========================= */
+  .vts-me-n1  { margin-inline-end: -4px; }
+  .vts-me-n2  { margin-inline-end: -8px; }
+  .vts-me-n3  { margin-inline-end: -12px; }
+  .vts-me-n4  { margin-inline-end: -16px; }
+  .vts-me-n5  { margin-inline-end: -20px; }
+  .vts-me-n6  { margin-inline-end: -24px; }
+  .vts-me-n7  { margin-inline-end: -28px; }
+  .vts-me-n8  { margin-inline-end: -32px; }
+  .vts-me-n9  { margin-inline-end: -36px; }
+  .vts-me-n10 { margin-inline-end: -40px; }
+  .vts-me-n11 { margin-inline-end: -44px; }
+  .vts-me-n12 { margin-inline-end: -48px; }
+  .vts-me-n13 { margin-inline-end: -52px; }
+  .vts-me-n14 { margin-inline-end: -56px; }
+  .vts-me-n15 { margin-inline-end: -60px; }
+  .vts-me-n16 { margin-inline-end: -64px; }
+
+  /* =========================
+     Negative margin bottom
+     ========================= */
+  .vts-mb-n1  { margin-bottom: -4px; }
+  .vts-mb-n2  { margin-bottom: -8px; }
+  .vts-mb-n3  { margin-bottom: -12px; }
+  .vts-mb-n4  { margin-bottom: -16px; }
+  .vts-mb-n5  { margin-bottom: -20px; }
+  .vts-mb-n6  { margin-bottom: -24px; }
+  .vts-mb-n7  { margin-bottom: -28px; }
+  .vts-mb-n8  { margin-bottom: -32px; }
+  .vts-mb-n9  { margin-bottom: -36px; }
+  .vts-mb-n10 { margin-bottom: -40px; }
+  .vts-mb-n11 { margin-bottom: -44px; }
+  .vts-mb-n12 { margin-bottom: -48px; }
+  .vts-mb-n13 { margin-bottom: -52px; }
+  .vts-mb-n14 { margin-bottom: -56px; }
+  .vts-mb-n15 { margin-bottom: -60px; }
+  .vts-mb-n16 { margin-bottom: -64px; }
+
+  /* =========================
+     Auto margins
+     ========================= */
+  .vts-ma-auto { margin: auto; }
+
+  .vts-ml-auto { margin-left: auto; }
+  .vts-ms-auto { margin-inline-start: auto; }
+
+  .vts-mt-auto { margin-top: auto; }
+
+  .vts-mr-auto { margin-right: auto; }
+  .vts-me-auto { margin-inline-end: auto; }
+
+  .vts-mb-auto { margin-bottom: auto; }
+
+  /* =========================
+     Padding (all sides)
+     ========================= */
+  .vts-pa-0  { padding: 0; }
+  .vts-pa-1  { padding: 4px; }
+  .vts-pa-2  { padding: 8px; }
+  .vts-pa-3  { padding: 12px; }
+  .vts-pa-4  { padding: 16px; }
+  .vts-pa-5  { padding: 20px; }
+  .vts-pa-6  { padding: 24px; }
+  .vts-pa-7  { padding: 28px; }
+  .vts-pa-8  { padding: 32px; }
+  .vts-pa-9  { padding: 36px; }
+  .vts-pa-10 { padding: 40px; }
+  .vts-pa-11 { padding: 44px; }
+  .vts-pa-12 { padding: 48px; }
+  .vts-pa-13 { padding: 52px; }
+  .vts-pa-14 { padding: 56px; }
+  .vts-pa-15 { padding: 60px; }
+  .vts-pa-16 { padding: 64px; }
+
+  /* =========================
+     Padding X (left + right)
+     ========================= */
+  .vts-px-0  { padding-left: 0;  padding-right: 0; }
+  .vts-px-1  { padding-left: 4px;  padding-right: 4px; }
+  .vts-px-2  { padding-left: 8px;  padding-right: 8px; }
+  .vts-px-3  { padding-left: 12px; padding-right: 12px; }
+  .vts-px-4  { padding-left: 16px; padding-right: 16px; }
+  .vts-px-5  { padding-left: 20px; padding-right: 20px; }
+  .vts-px-6  { padding-left: 24px; padding-right: 24px; }
+  .vts-px-7  { padding-left: 28px; padding-right: 28px; }
+  .vts-px-8  { padding-left: 32px; padding-right: 32px; }
+  .vts-px-9  { padding-left: 36px; padding-right: 36px; }
+  .vts-px-10 { padding-left: 40px; padding-right: 40px; }
+  .vts-px-11 { padding-left: 44px; padding-right: 44px; }
+  .vts-px-12 { padding-left: 48px; padding-right: 48px; }
+  .vts-px-13 { padding-left: 52px; padding-right: 52px; }
+  .vts-px-14 { padding-left: 56px; padding-right: 56px; }
+  .vts-px-15 { padding-left: 60px; padding-right: 60px; }
+  .vts-px-16 { padding-left: 64px; padding-right: 64px; }
+
+  /* =========================
+     Padding Y (top + bottom)
+     ========================= */
+  .vts-py-0  { padding-top: 0;  padding-bottom: 0; }
+  .vts-py-1  { padding-top: 4px;  padding-bottom: 4px; }
+  .vts-py-2  { padding-top: 8px;  padding-bottom: 8px; }
+  .vts-py-3  { padding-top: 12px; padding-bottom: 12px; }
+  .vts-py-4  { padding-top: 16px; padding-bottom: 16px; }
+  .vts-py-5  { padding-top: 20px; padding-bottom: 20px; }
+  .vts-py-6  { padding-top: 24px; padding-bottom: 24px; }
+  .vts-py-7  { padding-top: 28px; padding-bottom: 28px; }
+  .vts-py-8  { padding-top: 32px; padding-bottom: 32px; }
+  .vts-py-9  { padding-top: 36px; padding-bottom: 36px; }
+  .vts-py-10 { padding-top: 40px; padding-bottom: 40px; }
+  .vts-py-11 { padding-top: 44px; padding-bottom: 44px; }
+  .vts-py-12 { padding-top: 48px; padding-bottom: 48px; }
+  .vts-py-13 { padding-top: 52px; padding-bottom: 52px; }
+  .vts-py-14 { padding-top: 56px; padding-bottom: 56px; }
+  .vts-py-15 { padding-top: 60px; padding-bottom: 60px; }
+  .vts-py-16 { padding-top: 64px; padding-bottom: 64px; }
+
+  /* =========================
+     Padding left (physical)
+     ========================= */
+  .vts-pl-0  { padding-left: 0; }
+  .vts-pl-1  { padding-left: 4px; }
+  .vts-pl-2  { padding-left: 8px; }
+  .vts-pl-3  { padding-left: 12px; }
+  .vts-pl-4  { padding-left: 16px; }
+  .vts-pl-5  { padding-left: 20px; }
+  .vts-pl-6  { padding-left: 24px; }
+  .vts-pl-7  { padding-left: 28px; }
+  .vts-pl-8  { padding-left: 32px; }
+  .vts-pl-9  { padding-left: 36px; }
+  .vts-pl-10 { padding-left: 40px; }
+  .vts-pl-11 { padding-left: 44px; }
+  .vts-pl-12 { padding-left: 48px; }
+  .vts-pl-13 { padding-left: 52px; }
+  .vts-pl-14 { padding-left: 56px; }
+  .vts-pl-15 { padding-left: 60px; }
+  .vts-pl-16 { padding-left: 64px; }
+
+  /* =========================
+     Padding start (logical, RTL-safe)
+     ========================= */
+  .vts-ps-0  { padding-inline-start: 0; }
+  .vts-ps-1  { padding-inline-start: 4px; }
+  .vts-ps-2  { padding-inline-start: 8px; }
+  .vts-ps-3  { padding-inline-start: 12px; }
+  .vts-ps-4  { padding-inline-start: 16px; }
+  .vts-ps-5  { padding-inline-start: 20px; }
+  .vts-ps-6  { padding-inline-start: 24px; }
+  .vts-ps-7  { padding-inline-start: 28px; }
+  .vts-ps-8  { padding-inline-start: 32px; }
+  .vts-ps-9  { padding-inline-start: 36px; }
+  .vts-ps-10 { padding-inline-start: 40px; }
+  .vts-ps-11 { padding-inline-start: 44px; }
+  .vts-ps-12 { padding-inline-start: 48px; }
+  .vts-ps-13 { padding-inline-start: 52px; }
+  .vts-ps-14 { padding-inline-start: 56px; }
+  .vts-ps-15 { padding-inline-start: 60px; }
+  .vts-ps-16 { padding-inline-start: 64px; }
+
+  /* =========================
+     Padding top
+     ========================= */
+  .vts-pt-0  { padding-top: 0; }
+  .vts-pt-1  { padding-top: 4px; }
+  .vts-pt-2  { padding-top: 8px; }
+  .vts-pt-3  { padding-top: 12px; }
+  .vts-pt-4  { padding-top: 16px; }
+  .vts-pt-5  { padding-top: 20px; }
+  .vts-pt-6  { padding-top: 24px; }
+  .vts-pt-7  { padding-top: 28px; }
+  .vts-pt-8  { padding-top: 32px; }
+  .vts-pt-9  { padding-top: 36px; }
+  .vts-pt-10 { padding-top: 40px; }
+  .vts-pt-11 { padding-top: 44px; }
+  .vts-pt-12 { padding-top: 48px; }
+  .vts-pt-13 { padding-top: 52px; }
+  .vts-pt-14 { padding-top: 56px; }
+  .vts-pt-15 { padding-top: 60px; }
+  .vts-pt-16 { padding-top: 64px; }
+
+  /* =========================
+     Padding right (physical)
+     ========================= */
+  .vts-pr-0  { padding-right: 0; }
+  .vts-pr-1  { padding-right: 4px; }
+  .vts-pr-2  { padding-right: 8px; }
+  .vts-pr-3  { padding-right: 12px; }
+  .vts-pr-4  { padding-right: 16px; }
+  .vts-pr-5  { padding-right: 20px; }
+  .vts-pr-6  { padding-right: 24px; }
+  .vts-pr-7  { padding-right: 28px; }
+  .vts-pr-8  { padding-right: 32px; }
+  .vts-pr-9  { padding-right: 36px; }
+  .vts-pr-10 { padding-right: 40px; }
+  .vts-pr-11 { padding-right: 44px; }
+  .vts-pr-12 { padding-right: 48px; }
+  .vts-pr-13 { padding-right: 52px; }
+  .vts-pr-14 { padding-right: 56px; }
+  .vts-pr-15 { padding-right: 60px; }
+  .vts-pr-16 { padding-right: 64px; }
+
+  /* =========================
+     Padding end (logical, RTL-safe)
+     ========================= */
+  .vts-pe-0  { padding-inline-end: 0; }
+  .vts-pe-1  { padding-inline-end: 4px; }
+  .vts-pe-2  { padding-inline-end: 8px; }
+  .vts-pe-3  { padding-inline-end: 12px; }
+  .vts-pe-4  { padding-inline-end: 16px; }
+  .vts-pe-5  { padding-inline-end: 20px; }
+  .vts-pe-6  { padding-inline-end: 24px; }
+  .vts-pe-7  { padding-inline-end: 28px; }
+  .vts-pe-8  { padding-inline-end: 32px; }
+  .vts-pe-9  { padding-inline-end: 36px; }
+  .vts-pe-10 { padding-inline-end: 40px; }
+  .vts-pe-11 { padding-inline-end: 44px; }
+  .vts-pe-12 { padding-inline-end: 48px; }
+  .vts-pe-13 { padding-inline-end: 52px; }
+  .vts-pe-14 { padding-inline-end: 56px; }
+  .vts-pe-15 { padding-inline-end: 60px; }
+  .vts-pe-16 { padding-inline-end: 64px; }
+
+  /* =========================
+     Padding bottom
+     ========================= */
+  .vts-pb-0  { padding-bottom: 0; }
+  .vts-pb-1  { padding-bottom: 4px; }
+  .vts-pb-2  { padding-bottom: 8px; }
+  .vts-pb-3  { padding-bottom: 12px; }
+  .vts-pb-4  { padding-bottom: 16px; }
+  .vts-pb-5  { padding-bottom: 20px; }
+  .vts-pb-6  { padding-bottom: 24px; }
+  .vts-pb-7  { padding-bottom: 28px; }
+  .vts-pb-8  { padding-bottom: 32px; }
+  .vts-pb-9  { padding-bottom: 36px; }
+  .vts-pb-10 { padding-bottom: 40px; }
+  .vts-pb-11 { padding-bottom: 44px; }
+  .vts-pb-12 { padding-bottom: 48px; }
+  .vts-pb-13 { padding-bottom: 52px; }
+  .vts-pb-14 { padding-bottom: 56px; }
+  .vts-pb-15 { padding-bottom: 60px; }
+  .vts-pb-16 { padding-bottom: 64px; }
+
+  /* =========================
+     Margin X (left + right)
+     ========================= */
+  .vts-mx-0  { margin-left: 0;  margin-right: 0; }
+  .vts-mx-1  { margin-left: 4px;  margin-right: 4px; }
+  .vts-mx-2  { margin-left: 8px;  margin-right: 8px; }
+  .vts-mx-3  { margin-left: 12px; margin-right: 12px; }
+  .vts-mx-4  { margin-left: 16px; margin-right: 16px; }
+  .vts-mx-5  { margin-left: 20px; margin-right: 20px; }
+  .vts-mx-6  { margin-left: 24px; margin-right: 24px; }
+  .vts-mx-7  { margin-left: 28px; margin-right: 28px; }
+  .vts-mx-8  { margin-left: 32px; margin-right: 32px; }
+  .vts-mx-9  { margin-left: 36px; margin-right: 36px; }
+  .vts-mx-10 { margin-left: 40px; margin-right: 40px; }
+  .vts-mx-11 { margin-left: 44px; margin-right: 44px; }
+  .vts-mx-12 { margin-left: 48px; margin-right: 48px; }
+  .vts-mx-13 { margin-left: 52px; margin-right: 52px; }
+  .vts-mx-14 { margin-left: 56px; margin-right: 56px; }
+  .vts-mx-15 { margin-left: 60px; margin-right: 60px; }
+  .vts-mx-16 { margin-left: 64px; margin-right: 64px; }
+
+  /* =========================
+     Margin Y (top + bottom)
+     ========================= */
+  .vts-my-0  { margin-top: 0;  margin-bottom: 0; }
+  .vts-my-1  { margin-top: 4px;  margin-bottom: 4px; }
+  .vts-my-2  { margin-top: 8px;  margin-bottom: 8px; }
+  .vts-my-3  { margin-top: 12px; margin-bottom: 12px; }
+  .vts-my-4  { margin-top: 16px; margin-bottom: 16px; }
+  .vts-my-5  { margin-top: 20px; margin-bottom: 20px; }
+  .vts-my-6  { margin-top: 24px; margin-bottom: 24px; }
+  .vts-my-7  { margin-top: 28px; margin-bottom: 28px; }
+  .vts-my-8  { margin-top: 32px; margin-bottom: 32px; }
+  .vts-my-9  { margin-top: 36px; margin-bottom: 36px; }
+  .vts-my-10 { margin-top: 40px; margin-bottom: 40px; }
+  .vts-my-11 { margin-top: 44px; margin-bottom: 44px; }
+  .vts-my-12 { margin-top: 48px; margin-bottom: 48px; }
+  .vts-my-13 { margin-top: 52px; margin-bottom: 52px; }
+  .vts-my-14 { margin-top: 56px; margin-bottom: 56px; }
+  .vts-my-15 { margin-top: 60px; margin-bottom: 60px; }
+  .vts-my-16 { margin-top: 64px; margin-bottom: 64px; }
+
+  /* =========================
+     Space between children (vertical)
+     ========================= */
+  .vts-space-y-0  > * + * { margin-top: 0; }
+  .vts-space-y-1  > * + * { margin-top: 4px; }
+  .vts-space-y-2  > * + * { margin-top: 8px; }
+  .vts-space-y-3  > * + * { margin-top: 12px; }
+  .vts-space-y-4  > * + * { margin-top: 16px; }
+  .vts-space-y-5  > * + * { margin-top: 20px; }
+  .vts-space-y-6  > * + * { margin-top: 24px; }
+  .vts-space-y-7  > * + * { margin-top: 28px; }
+  .vts-space-y-8  > * + * { margin-top: 32px; }
+  .vts-space-y-9  > * + * { margin-top: 36px; }
+  .vts-space-y-10 > * + * { margin-top: 40px; }
+  .vts-space-y-11 > * + * { margin-top: 44px; }
+  .vts-space-y-12 > * + * { margin-top: 48px; }
+  .vts-space-y-13 > * + * { margin-top: 52px; }
+  .vts-space-y-14 > * + * { margin-top: 56px; }
+  .vts-space-y-15 > * + * { margin-top: 60px; }
+  .vts-space-y-16 > * + * { margin-top: 64px; }
+}

package/src/pgo-components/styles/utilities/transitions.css

@@ -0,0 +1,58 @@
+/* Transition utilities: token-driven with safe fallbacks */
+
+/* Base transition helper */
+.vts-transition {
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter;
+  transition-duration: var(--vts-motion-duration-2, 200ms);
+  transition-timing-function: var(--vts-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* Property scopes */
+.vts-transition-none { transition: none; }
+.vts-transition-all { transition-property: all; }
+.vts-transition-colors { transition-property: color, background-color, border-color, fill, stroke; }
+.vts-transition-opacity { transition-property: opacity; }
+.vts-transition-transform { transition-property: transform; }
+.vts-transition-shadow { transition-property: box-shadow; }
+/* Size-focused transitions to avoid jank */
+.vts-transition-size { transition-property: height, max-height; }
+.vts-transition-size-opacity { transition-property: height, max-height, opacity; }
+
+/* Will-change hints for smoother animations */
+.vts-will-change-size { will-change: height, max-height; }
+.vts-will-change-size-opacity { will-change: height, max-height, opacity; }
+
+/* Durations */
+.vts-duration-1 { transition-duration: var(--vts-motion-duration-1, 100ms); }
+.vts-duration-2 { transition-duration: var(--vts-motion-duration-2, 200ms); }
+.vts-duration-3 { transition-duration: var(--vts-motion-duration-3, 250ms); }
+.vts-duration-4 { transition-duration: var(--vts-motion-duration-4, 300ms); }
+.vts-duration-5 { transition-duration: var(--vts-motion-duration-5, 400ms); }
+
+/* Delays */
+.vts-delay-1 { transition-delay: var(--vts-motion-delay-1, 75ms); }
+.vts-delay-2 { transition-delay: var(--vts-motion-delay-2, 150ms); }
+.vts-delay-3 { transition-delay: var(--vts-motion-delay-3, 300ms); }
+
+/* Easing curves */
+.vts-ease-standard { transition-timing-function: var(--vts-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)); }
+.vts-ease-in { transition-timing-function: var(--vts-motion-easing-in, cubic-bezier(0.4, 0, 1, 1)); }
+.vts-ease-out { transition-timing-function: var(--vts-motion-easing-out, cubic-bezier(0, 0, 0.2, 1)); }
+.vts-ease-in-out { transition-timing-function: var(--vts-motion-easing-in-out, cubic-bezier(0.4, 0, 0.2, 1)); }
+
+/* Reduced motion: dramatically shorten motion without removing semantics */
+@media (prefers-reduced-motion: reduce) {
+  .vts-transition,
+  .vts-transition-all,
+  .vts-transition-colors,
+  .vts-transition-opacity,
+  .vts-transition-transform,
+  .vts-transition-shadow,
+  [class^="vts-duration-"],
+  [class*=" vts-duration-"] {
+    transition-duration: 1ms !important;
+    transition-delay: 0ms !important;
+    animation-duration: 1ms !important;
+    animation-delay: 0ms !important;
+  }
+}