pgo-uiux2 1.0.0

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

@@ -0,0 +1,403 @@
+/* prettier-ignore */
+
+@layer utilities {
+  /* =========================
+     Flex Utilities
+     ========================= */
+
+  /* Display Flex */
+  .vts-d-flex            { display: flex; }
+  .vts-d-inline-flex     { display: inline-flex; }
+  .vts-d-sm-flex         { display: flex; }
+  .vts-d-sm-inline-flex  { display: inline-flex; }
+  .vts-d-md-flex         { display: flex; }
+  .vts-d-md-inline-flex  { display: inline-flex; }
+  .vts-d-lg-flex         { display: flex; }
+  .vts-d-lg-inline-flex  { display: inline-flex; }
+  .vts-d-xl-flex         { display: flex; }
+  .vts-d-xl-inline-flex  { display: inline-flex; }
+
+  /* Flex Fill */
+  .vts-flex-fill        { flex: 1 1 auto; }
+  .vts-flex-sm-fill     { flex: 1 1 auto; }
+  .vts-flex-md-fill     { flex: 1 1 auto; }
+  .vts-flex-lg-fill     { flex: 1 1 auto; }
+  .vts-flex-xl-fill     { flex: 1 1 auto; }
+
+  /* Flex shorthand variations */
+  .vts-flex-1-1         { flex: 1 1 auto; }
+  .vts-flex-1-0         { flex: 1 0 auto; }
+  .vts-flex-0-1         { flex: 0 1 auto; }
+  .vts-flex-0-0         { flex: 0 0 auto; }
+  .vts-flex-1-1-0       { flex: 1 1 0%; }
+  .vts-flex-1-1-100     { flex: 1 1 100%; }
+  .vts-flex-1-0-0       { flex: 1 0 0%; }
+  .vts-flex-1-0-100     { flex: 1 0 100%; }
+  .vts-flex-0-1-0       { flex: 0 1 0%; }
+  .vts-flex-0-1-100     { flex: 0 1 100%; }
+  .vts-flex-0-0-0       { flex: 0 0 0%; }
+  .vts-flex-0-0-100     { flex: 0 0 100%; }
+
+  /* Responsive Flex shorthand (example: sm/md/lg/xl) */
+  .vts-flex-sm-1-1       { flex: 1 1 auto; }
+  .vts-flex-md-1-1       { flex: 1 1 auto; }
+  .vts-flex-lg-1-1       { flex: 1 1 auto; }
+  .vts-flex-xl-1-1       { flex: 1 1 auto; }
+  /* Repeat for all flex-*-*-* as needed */
+
+  /* Gap Utilities */
+  .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; }
+
+  /* Responsive Gap */
+  .vts-ga-sm-0  { gap: 0; }
+  .vts-ga-sm-1  { gap: 4px; }
+  .vts-ga-sm-2  { gap: 8px; }
+  .vts-ga-sm-3  { gap: 12px; }
+  .vts-ga-sm-4  { gap: 16px; }
+  .vts-ga-sm-5  { gap: 20px; }
+  .vts-ga-sm-6  { gap: 24px; }
+  .vts-ga-sm-7  { gap: 28px; }
+  .vts-ga-sm-8  { gap: 32px; }
+  .vts-ga-sm-9  { gap: 36px; }
+  .vts-ga-sm-10 { gap: 40px; }
+  .vts-ga-sm-11 { gap: 44px; }
+  .vts-ga-sm-12 { gap: 48px; }
+  .vts-ga-sm-13 { gap: 52px; }
+  .vts-ga-sm-14 { gap: 56px; }
+  .vts-ga-sm-15 { gap: 60px; }
+  .vts-ga-sm-16 { gap: 64px; }
+
+  /* =========================
+     Flex Direction
+     ========================= */
+  .vts-flex-row               { flex-direction: row; }
+  .vts-flex-row-reverse       { flex-direction: row-reverse; }
+  .vts-flex-column            { flex-direction: column; }
+  .vts-flex-column-reverse    { flex-direction: column-reverse; }
+  .vts-flex-sm-row            { flex-direction: row; }
+  .vts-flex-sm-row-reverse    { flex-direction: row-reverse; }
+  .vts-flex-sm-column         { flex-direction: column; }
+  .vts-flex-sm-column-reverse { flex-direction: column-reverse; }
+  .vts-flex-md-row            { flex-direction: row; }
+  .vts-flex-md-row-reverse    { flex-direction: row-reverse; }
+  .vts-flex-md-column         { flex-direction: column; }
+  .vts-flex-md-column-reverse { flex-direction: column-reverse; }
+  .vts-flex-lg-row            { flex-direction: row; }
+  .vts-flex-lg-row-reverse    { flex-direction: row-reverse; }
+  .vts-flex-lg-column         { flex-direction: column; }
+  .vts-flex-lg-column-reverse { flex-direction: column-reverse; }
+  .vts-flex-xl-row            { flex-direction: row; }
+  .vts-flex-xl-row-reverse    { flex-direction: row-reverse; }
+  .vts-flex-xl-column         { flex-direction: column; }
+  .vts-flex-xl-column-reverse { flex-direction: column-reverse; }
+
+  /* =========================
+     Justify Content
+     ========================= */
+  .vts-justify-start            { justify-content: flex-start; }
+  .vts-justify-end              { justify-content: flex-end; }
+  .vts-justify-center           { justify-content: center; }
+  .vts-justify-space-between    { justify-content: space-between; }
+  .vts-justify-space-around     { justify-content: space-around; }
+  .vts-justify-space-evenly     { justify-content: space-evenly; }
+
+  /* Responsive Justify Content */
+  .vts-justify-sm-start            { justify-content: flex-start; }
+  .vts-justify-sm-end              { justify-content: flex-end; }
+  .vts-justify-sm-center           { justify-content: center; }
+  .vts-justify-sm-space-between    { justify-content: space-between; }
+  .vts-justify-sm-space-around     { justify-content: space-around; }
+  .vts-justify-sm-space-evenly     { justify-content: space-evenly; }
+
+  .vts-justify-md-start            { justify-content: flex-start; }
+  .vts-justify-md-end              { justify-content: flex-end; }
+  .vts-justify-md-center           { justify-content: center; }
+  .vts-justify-md-space-between    { justify-content: space-between; }
+  .vts-justify-md-space-around     { justify-content: space-around; }
+  .vts-justify-md-space-evenly     { justify-content: space-evenly; }
+
+  .vts-justify-lg-start            { justify-content: flex-start; }
+  .vts-justify-lg-end              { justify-content: flex-end; }
+  .vts-justify-lg-center           { justify-content: center; }
+  .vts-justify-lg-space-between    { justify-content: space-between; }
+  .vts-justify-lg-space-around     { justify-content: space-around; }
+  .vts-justify-lg-space-evenly     { justify-content: space-evenly; }
+
+  .vts-justify-xl-start            { justify-content: flex-start; }
+  .vts-justify-xl-end              { justify-content: flex-end; }
+  .vts-justify-xl-center           { justify-content: center; }
+  .vts-justify-xl-space-between    { justify-content: space-between; }
+  .vts-justify-xl-space-around     { justify-content: space-around; }
+  .vts-justify-xl-space-evenly     { justify-content: space-evenly; }
+
+  /* =========================
+     Align Items
+     ========================= */
+  .vts-align-start       { align-items: flex-start; }
+  .vts-align-end         { align-items: flex-end; }
+  .vts-align-center      { align-items: center; }
+  .vts-align-baseline    { align-items: baseline; }
+  .vts-align-stretch     { align-items: stretch; }
+
+  /* Responsive Align Items */
+  .vts-align-sm-start       { align-items: flex-start; }
+  .vts-align-sm-end         { align-items: flex-end; }
+  .vts-align-sm-center      { align-items: center; }
+  .vts-align-sm-baseline    { align-items: baseline; }
+  .vts-align-sm-stretch     { align-items: stretch; }
+
+  .vts-align-md-start       { align-items: flex-start; }
+  .vts-align-md-end         { align-items: flex-end; }
+  .vts-align-md-center      { align-items: center; }
+  .vts-align-md-baseline    { align-items: baseline; }
+  .vts-align-md-stretch     { align-items: stretch; }
+
+  .vts-align-lg-start       { align-items: flex-start; }
+  .vts-align-lg-end         { align-items: flex-end; }
+  .vts-align-lg-center      { align-items: center; }
+  .vts-align-lg-baseline    { align-items: baseline; }
+  .vts-align-lg-stretch     { align-items: stretch; }
+
+  .vts-align-xl-start       { align-items: flex-start; }
+  .vts-align-xl-end         { align-items: flex-end; }
+  .vts-align-xl-center      { align-items: center; }
+  .vts-align-xl-baseline    { align-items: baseline; }
+  .vts-align-xl-stretch     { align-items: stretch; }
+
+  /* =========================
+     Align Self
+     ========================= */
+  .vts-align-self-start       { align-self: flex-start; }
+  .vts-align-self-end         { align-self: flex-end; }
+  .vts-align-self-center      { align-self: center; }
+  .vts-align-self-baseline    { align-self: baseline; }
+  .vts-align-self-auto        { align-self: auto; }
+  .vts-align-self-stretch     { align-self: stretch; }
+
+  /* Responsive Align Self */
+  .vts-align-self-sm-start       { align-self: flex-start; }
+  .vts-align-self-sm-end         { align-self: flex-end; }
+  .vts-align-self-sm-center      { align-self: center; }
+  .vts-align-self-sm-baseline    { align-self: baseline; }
+  .vts-align-self-sm-auto        { align-self: auto; }
+  .vts-align-self-sm-stretch     { align-self: stretch; }
+
+  .vts-align-self-md-start       { align-self: flex-start; }
+  .vts-align-self-md-end         { align-self: flex-end; }
+  .vts-align-self-md-center      { align-self: center; }
+  .vts-align-self-md-baseline    { align-self: baseline; }
+  .vts-align-self-md-auto        { align-self: auto; }
+  .vts-align-self-md-stretch     { align-self: stretch; }
+
+  .vts-align-self-lg-start       { align-self: flex-start; }
+  .vts-align-self-lg-end         { align-self: flex-end; }
+  .vts-align-self-lg-center      { align-self: center; }
+  .vts-align-self-lg-baseline    { align-self: baseline; }
+  .vts-align-self-lg-auto        { align-self: auto; }
+  .vts-align-self-lg-stretch     { align-self: stretch; }
+
+  .vts-align-self-xl-start       { align-self: flex-start; }
+  .vts-align-self-xl-end         { align-self: flex-end; }
+  .vts-align-self-xl-center      { align-self: center; }
+  .vts-align-self-xl-baseline    { align-self: baseline; }
+  .vts-align-self-xl-auto        { align-self: auto; }
+  .vts-align-self-xl-stretch     { align-self: stretch; }
+
+  /* =========================
+     Flex Wrap (Responsive)
+     ========================= */
+  .vts-flex-sm-nowrap        { flex-wrap: nowrap; }
+  .vts-flex-sm-wrap          { flex-wrap: wrap; }
+  .vts-flex-sm-wrap-reverse  { flex-wrap: wrap-reverse; }
+
+  .vts-flex-md-nowrap        { flex-wrap: nowrap; }
+  .vts-flex-md-wrap          { flex-wrap: wrap; }
+  .vts-flex-md-wrap-reverse  { flex-wrap: wrap-reverse; }
+
+  .vts-flex-lg-nowrap        { flex-wrap: nowrap; }
+  .vts-flex-lg-wrap          { flex-wrap: wrap; }
+  .vts-flex-lg-wrap-reverse  { flex-wrap: wrap-reverse; }
+
+  .vts-flex-xl-nowrap        { flex-wrap: nowrap; }
+  .vts-flex-xl-wrap          { flex-wrap: wrap; }
+  .vts-flex-xl-wrap-reverse  { flex-wrap: wrap-reverse; }
+
+  /* =========================
+     Order
+     ========================= */
+  .vts-order-first           { order: -1; }
+  .vts-order-0               { order: 0; }
+  .vts-order-1               { order: 1; }
+  .vts-order-2               { order: 2; }
+  .vts-order-3               { order: 3; }
+  .vts-order-4               { order: 4; }
+  .vts-order-5               { order: 5; }
+  .vts-order-6               { order: 6; }
+  .vts-order-7               { order: 7; }
+  .vts-order-8               { order: 8; }
+  .vts-order-9               { order: 9; }
+  .vts-order-10              { order: 10; }
+  .vts-order-11              { order: 11; }
+  .vts-order-12              { order: 12; }
+  .vts-order-last            { order: 13; }
+
+  /* Responsive Order */
+  .vts-order-sm-first        { order: -1; }
+  .vts-order-sm-0            { order: 0; }
+  .vts-order-sm-1            { order: 1; }
+  .vts-order-sm-2            { order: 2; }
+  .vts-order-sm-3            { order: 3; }
+  .vts-order-sm-4            { order: 4; }
+  .vts-order-sm-5            { order: 5; }
+  .vts-order-sm-6            { order: 6; }
+  .vts-order-sm-7            { order: 7; }
+  .vts-order-sm-8            { order: 8; }
+  .vts-order-sm-9            { order: 9; }
+  .vts-order-sm-10           { order: 10; }
+  .vts-order-sm-11           { order: 11; }
+  .vts-order-sm-12           { order: 12; }
+  .vts-order-sm-last         { order: 13; }
+
+  .vts-order-md-first        { order: -1; }
+  .vts-order-md-0            { order: 0; }
+  .vts-order-md-1            { order: 1; }
+  .vts-order-md-2            { order: 2; }
+  .vts-order-md-3            { order: 3; }
+  .vts-order-md-4            { order: 4; }
+  .vts-order-md-5            { order: 5; }
+  .vts-order-md-6            { order: 6; }
+  .vts-order-md-7            { order: 7; }
+  .vts-order-md-8            { order: 8; }
+  .vts-order-md-9            { order: 9; }
+  .vts-order-md-10           { order: 10; }
+  .vts-order-md-11           { order: 11; }
+  .vts-order-md-12           { order: 12; }
+  .vts-order-md-last         { order: 13; }
+
+  .vts-order-lg-first        { order: -1; }
+  .vts-order-lg-0            { order: 0; }
+  .vts-order-lg-1            { order: 1; }
+  .vts-order-lg-2            { order: 2; }
+  .vts-order-lg-3            { order: 3; }
+  .vts-order-lg-4            { order: 4; }
+  .vts-order-lg-5            { order: 5; }
+  .vts-order-lg-6            { order: 6; }
+  .vts-order-lg-7            { order: 7; }
+  .vts-order-lg-8            { order: 8; }
+  .vts-order-lg-9            { order: 9; }
+  .vts-order-lg-10           { order: 10; }
+  .vts-order-lg-11           { order: 11; }
+  .vts-order-lg-12           { order: 12; }
+  .vts-order-lg-last         { order: 13; }
+
+  .vts-order-xl-first        { order: -1; }
+  .vts-order-xl-0            { order: 0; }
+  .vts-order-xl-1            { order: 1; }
+  .vts-order-xl-2            { order: 2; }
+  .vts-order-xl-3            { order: 3; }
+  .vts-order-xl-4            { order: 4; }
+  .vts-order-xl-5            { order: 5; }
+  .vts-order-xl-6            { order: 6; }
+  .vts-order-xl-7            { order: 7; }
+  .vts-order-xl-8            { order: 8; }
+  .vts-order-xl-9            { order: 9; }
+  .vts-order-xl-10           { order: 10; }
+  .vts-order-xl-11           { order: 11; }
+  .vts-order-xl-12           { order: 12; }
+  .vts-order-xl-last         { order: 13; }
+
+  /* =========================
+     Align Content
+     ========================= */
+  .vts-align-content-start               { align-content: flex-start; }
+  .vts-align-content-end                 { align-content: flex-end; }
+  .vts-align-content-center              { align-content: center; }
+  .vts-align-content-space-between       { align-content: space-between; }
+  .vts-align-content-space-around        { align-content: space-around; }
+  .vts-align-content-space-evenly        { align-content: space-evenly; }
+  .vts-align-content-stretch             { align-content: stretch; }
+
+  /* Responsive Align Content */
+  .vts-align-content-sm-start            { align-content: flex-start; }
+  .vts-align-content-sm-end              { align-content: flex-end; }
+  .vts-align-content-sm-center           { align-content: center; }
+  .vts-align-content-sm-space-between    { align-content: space-between; }
+  .vts-align-content-sm-space-around     { align-content: space-around; }
+  .vts-align-content-sm-space-evenly     { align-content: space-evenly; }
+  .vts-align-content-sm-stretch          { align-content: stretch; }
+
+  .vts-align-content-md-start            { align-content: flex-start; }
+  .vts-align-content-md-end              { align-content: flex-end; }
+  .vts-align-content-md-center           { align-content: center; }
+  .vts-align-content-md-space-between    { align-content: space-between; }
+  .vts-align-content-md-space-around     { align-content: space-around; }
+  .vts-align-content-md-space-evenly     { align-content: space-evenly; }
+  .vts-align-content-md-stretch          { align-content: stretch; }
+
+  .vts-align-content-lg-start            { align-content: flex-start; }
+  .vts-align-content-lg-end              { align-content: flex-end; }
+  .vts-align-content-lg-center           { align-content: center; }
+  .vts-align-content-lg-space-between    { align-content: space-between; }
+  .vts-align-content-lg-space-around     { align-content: space-around; }
+  .vts-align-content-lg-space-evenly     { align-content: space-evenly; }
+  .vts-align-content-lg-stretch          { align-content: stretch; }
+
+  .vts-align-content-xl-start            { align-content: flex-start; }
+  .vts-align-content-xl-end              { align-content: flex-end; }
+  .vts-align-content-xl-center           { align-content: center; }
+  .vts-align-content-xl-space-between    { align-content: space-between; }
+  .vts-align-content-xl-space-around     { align-content: space-around; }
+  .vts-align-content-xl-space-evenly     { align-content: space-evenly; }
+  .vts-align-content-xl-stretch          { align-content: stretch; }
+
+  /* =========================
+     Flex Wrap
+     ========================= */
+  .vts-flex-nowrap                       { flex-wrap: nowrap; }
+  .vts-flex-wrap                         { flex-wrap: wrap; }
+  .vts-flex-wrap-reverse                 { flex-wrap: wrap-reverse; }
+
+  /* =========================
+     Flex Grow / Shrink
+     ========================= */
+  .vts-flex-grow-0                        { flex-grow: 0; }
+  .vts-flex-grow-1                        { flex-grow: 1; }
+  .vts-flex-shrink-0                      { flex-shrink: 0; }
+  .vts-flex-shrink-1                      { flex-shrink: 1; }
+
+  /* Responsive Flex Grow */
+  .vts-flex-sm-grow-0                     { flex-grow: 0; }
+  .vts-flex-md-grow-0                     { flex-grow: 0; }
+  .vts-flex-lg-grow-0                     { flex-grow: 0; }
+  .vts-flex-xl-grow-0                     { flex-grow: 0; }
+  .vts-flex-sm-grow-1                     { flex-grow: 1; }
+  .vts-flex-md-grow-1                     { flex-grow: 1; }
+  .vts-flex-lg-grow-1                     { flex-grow: 1; }
+  .vts-flex-xl-grow-1                     { flex-grow: 1; }
+
+  /* Responsive Flex Shrink */
+  .vts-flex-sm-shrink-0                   { flex-shrink: 0; }
+  .vts-flex-md-shrink-0                   { flex-shrink: 0; }
+  .vts-flex-lg-shrink-0                   { flex-shrink: 0; }
+  .vts-flex-xl-shrink-0                   { flex-shrink: 0; }
+  .vts-flex-sm-shrink-1                   { flex-shrink: 1; }
+  .vts-flex-md-shrink-1                   { flex-shrink: 1; }
+  .vts-flex-lg-shrink-1                   { flex-shrink: 1; }
+  .vts-flex-xl-shrink-1                   { flex-shrink: 1; }
+}

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

@@ -0,0 +1,41 @@
+/* prettier-ignore */
+
+@layer utilities {
+  /* =========================
+     Float Utilities
+     ========================= */
+
+  .vts-float-left       { float: left; }
+  .vts-float-right      { float: right; }
+  .vts-float-start      { float: inline-start; }
+  .vts-float-end        { float: inline-end; }
+  .vts-float-none       { float: none; }
+
+  /* Small (sm) */
+  .vts-float-sm-left    { float: left; }
+  .vts-float-sm-right   { float: right; }
+  .vts-float-sm-start   { float: inline-start; }
+  .vts-float-sm-end     { float: inline-end; }
+  .vts-float-sm-none    { float: none; }
+
+  /* Medium (md) */
+  .vts-float-md-left    { float: left; }
+  .vts-float-md-right   { float: right; }
+  .vts-float-md-start   { float: inline-start; }
+  .vts-float-md-end     { float: inline-end; }
+  .vts-float-md-none    { float: none; }
+
+  /* Large (lg) */
+  .vts-float-lg-left    { float: left; }
+  .vts-float-lg-right   { float: right; }
+  .vts-float-lg-start   { float: inline-start; }
+  .vts-float-lg-end     { float: inline-end; }
+  .vts-float-lg-none    { float: none; }
+
+  /* Extra Large (xl) */
+  .vts-float-xl-left    { float: left; }
+  .vts-float-xl-right   { float: right; }
+  .vts-float-xl-start   { float: inline-start; }
+  .vts-float-xl-end     { float: inline-end; }
+  .vts-float-xl-none    { float: none; }
+}

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

@@ -0,0 +1,9 @@
+/* Hover utilities using subtle token-based color mixing */
+/* Blend 12% of surface into the base hue for a soft hover */
+.vts-hover-bg-primary:hover { background-color: color-mix(in srgb, var(--vts-color-primary) 88%, var(--vts-color-surface) 12%); }
+.vts-hover-bg-success:hover { background-color: color-mix(in srgb, var(--vts-color-success) 88%, var(--vts-color-surface) 12%); }
+.vts-hover-bg-error:hover { background-color: color-mix(in srgb, var(--vts-color-error) 88%, var(--vts-color-surface) 12%); }
+.vts-hover-bg-warning:hover { background-color: color-mix(in srgb, var(--vts-color-warning) 88%, var(--vts-color-surface) 12%); }
+.vts-hover-bg-info:hover { background-color: color-mix(in srgb, var(--vts-color-info) 88%, var(--vts-color-surface) 12%); }
+/* Elevate surface slightly on hover for outlined/text/tonal */
+.vts-hover-bg-surface:hover { background-color: color-mix(in srgb, var(--vts-color-surfaceElevated) 20%, var(--vts-color-surface) 80%); }

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

@@ -0,0 +1,18 @@
+@import './border-radius.css';
+@import './borders.css';
+@import './colors.css';
+@import './palette.css';
+@import './cursor.css';
+@import './display.css';
+@import './elevation.css';
+@import './flex.css';
+@import './float.css';
+@import './opacity.css';
+@import './overflow.css';
+@import './position.css';
+@import './sizing.css';
+@import './spacing.css';
+@import './typography.css';
+@import './transitions.css';
+@import './hover.css';
+@import './z-index.css';

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

@@ -0,0 +1,27 @@
+/* prettier-ignore */
+
+@layer utilities {
+  /* =========================
+     Opacity Utilities
+     ========================= */
+
+  .vts-opacity-0          { opacity: 0; }
+  .vts-opacity-10         { opacity: 0.1; }
+  .vts-opacity-20         { opacity: 0.2; }
+  .vts-opacity-30         { opacity: 0.3; }
+  .vts-opacity-40         { opacity: 0.4; }
+  .vts-opacity-50         { opacity: 0.5; }
+  .vts-opacity-60         { opacity: 0.6; }
+  .vts-opacity-70         { opacity: 0.7; }
+  .vts-opacity-80         { opacity: 0.8; }
+  .vts-opacity-90         { opacity: 0.9; }
+  .vts-opacity-100        { opacity: 1; }
+
+  /* State-based opacity using CSS variables */
+  .vts-opacity-hover      { opacity: var(--v-hover-opacity); }
+  .vts-opacity-focus      { opacity: var(--v-focus-opacity); }
+  .vts-opacity-selected   { opacity: var(--v-selected-opacity); }
+  .vts-opacity-activated  { opacity: var(--v-activated-opacity); }
+  .vts-opacity-pressed    { opacity: var(--v-pressed-opacity); }
+  .vts-opacity-dragged    { opacity: var(--v-dragged-opacity); }
+}

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

@@ -0,0 +1,26 @@
+/* prettier-ignore */
+
+@layer utilities {
+  /* =========================
+     Overflow Utilities
+     ========================= */
+
+  .vts-overflow           { overflow: auto; }
+  .vts-overflow-auto      { overflow: auto; }
+  .vts-overflow-hidden    { overflow: hidden; }
+  .vts-overflow-visible   { overflow: visible; }
+
+  /* Overflow X */
+  .vts-overflow-x          { overflow-x: auto; }
+  .vts-overflow-x-auto     { overflow-x: auto; }
+  .vts-overflow-x-hidden   { overflow-x: hidden; }
+  .vts-overflow-x-scroll   { overflow-x: scroll; }
+  .vts-overflow-x-visible  { overflow-x: visible; }
+
+  /* Overflow Y */
+  .vts-overflow-y          { overflow-y: auto; }
+  .vts-overflow-y-auto     { overflow-y: auto; }
+  .vts-overflow-y-hidden   { overflow-y: hidden; }
+  .vts-overflow-y-scroll   { overflow-y: scroll; }
+  .vts-overflow-y-visible  { overflow-y: visible; }
+}