pgo-uiux2 1.0.0

package/src/pgo-components/styles/reset.css

@@ -0,0 +1,96 @@
+/* src/styles/reset.css - tiny reset */
+* {
+    box-sizing: border-box;
+}
+
+/* Global font variable used by the app to allow theme switching (e.g., RTL font) */
+:root {
+    --app-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
+}
+
+html,
+body,
+#app {
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    font-family: var(--app-font);
+}
+
+/* When RTL is active, switch to a more appropriate font for RTL languages. */
+.rtl-font,
+[dir="rtl"],
+html[dir="rtl"],
+body[dir="rtl"],
+[lang="dv"],
+html[lang="dv"],
+body[lang="dv"]
+{
+        /* When RTL is active, prefer the local Faruma font if installed, then fall back to other system fonts. */
+        --app-font: "Faruma", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
+}
+
+
+
+
+@font-face {
+    font-family: 'Faruma'; /* Your chosen name for the font */
+    src: url('/src/assets/fonts/Faruma.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+
+
+.faruma {
+    /* When RTL is active, prefer the local Faruma font if installed, then fall back to other system fonts. */
+       font-family: "Faruma", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
+}
+
+
+
+/* @theme {
+    --color-primary: oklch(54.6% 0.245 262.881); 
+    --color-primaryText: var(--vts-color-primaryText);
+    --color-primary-50: oklch(97% 0.014 254.604);
+    --color-primary-100: oklch(93.2% 0.032 255.585);
+    --color-primary-200: oklch(88.2% 0.059 254.128);
+    --color-primary-300: oklch(80.9% 0.105 251.813);
+    --color-primary-400: oklch(70.7% 0.165 254.624);
+    --color-primary-500: oklch(62.3% 0.214 259.815);
+    --color-primary-600: oklch(54.6% 0.245 262.881);
+    --color-primary-700: oklch(48.8% 0.243 264.376);
+    --color-primary-800: oklch(48.8% 0.243 264.376);
+    --color-primary-900: oklch(42.4% 0.199 265.638);
+    --color-secondary: oklch(0.8 0.18 90.96);
+
+    --color-error: var(--vts-color-error);
+    --color-input-border: oklch(92.8% 0.006 264.531);
+    --color-input-background: var(--vts-color-background);
+    --color-input-focus: oklch(70.7% 0.022 261.325);
+    --color-input-outline: oklch(44.6% 0.03 256.802);
+    --color-input-hover: oklch(87.2% 0.01 258.338);
+    --color-input-text: oklch(37.3% 0.034 259.733);
+    --color-selected-text: oklch(37.3% 0.034 259.733);
+    --color-selected-background: oklch(92.8% 0.006 264.531);
+
+}
+
+@layer utilities {
+    .bg-primary {
+        background-color: var(--color-primary);
+    }
+    .text-primary {
+        color: var(--color-primary);
+    }
+    .bg-primary-light {
+        background-color: var(--color-primary-100);
+    }
+    .text-secondary {
+        color: var(--color-secondary);
+    }
+
+} */

package/src/pgo-components/styles/tokens.css

@@ -0,0 +1,18 @@
+:root {
+    /* Spacing scale */
+    --vts-space-0: 0;
+    --vts-space-1: 4px;
+    --vts-space-2: 8px;
+    --vts-space-3: 12px;
+    --vts-space-4: 16px;
+    --vts-space-5: 20px;
+
+    /* Sizing */
+    --vts-size-screen: 100vh;
+    --vts-size-dvh: 100dvh;
+
+    /* Border tokens */
+    --vts-border-color-rgb: 107, 114, 128; /* neutral gray rgb fallback */
+    --vts-border-opacity: 0.35;
+}
+

package/src/pgo-components/styles/utilities/border-radius.css

@@ -0,0 +1,57 @@
+@layer utilities {
+/* General rounded */
+.vts-rounded        { border-radius: var(--vts-radius, 4px); }
+.vts-rounded-0      { border-radius: 0; }
+.vts-rounded-sm     { border-radius: var(--vts-radius-sm, 2px); }
+.vts-rounded-md     { border-radius: var(--vts-radius-md, var(--vts-radius, 4px)); }
+.vts-rounded-lg     { border-radius: var(--vts-radius-lg, 8px); }
+.vts-rounded-xl     { border-radius: var(--vts-radius-xl, 24px); }
+.vts-rounded-pill   { border-radius: var(--vts-radius-pill, 9999px); }
+.vts-rounded-circle { border-radius: 50%; }
+.vts-rounded-shaped { border-top-left-radius: var(--vts-radius-xl, 24px); border-top-right-radius: 0; border-bottom-left-radius: var(--vts-radius-xl, 24px); border-bottom-right-radius: 0; }
+
+/* Top corners */
+.vts-rounded-t      { border-top-left-radius: var(--vts-radius, 4px); border-top-right-radius: var(--vts-radius, 4px); }
+.vts-rounded-t-0    { border-top-left-radius: 0; border-top-right-radius: 0; }
+.vts-rounded-t-sm   { border-top-left-radius: var(--vts-radius-sm, 2px); border-top-right-radius: var(--vts-radius-sm, 2px); }
+.vts-rounded-t-md   { border-top-left-radius: var(--vts-radius-md, var(--vts-radius, 4px)); border-top-right-radius: var(--vts-radius-md, var(--vts-radius, 4px)); }
+.vts-rounded-t-lg   { border-top-left-radius: var(--vts-radius-lg, 8px); border-top-right-radius: var(--vts-radius-lg, 8px); }
+.vts-rounded-t-xl   { border-top-left-radius: var(--vts-radius-xl, 24px); border-top-right-radius: var(--vts-radius-xl, 24px); }
+.vts-rounded-t-pill { border-top-left-radius: var(--vts-radius-pill, 9999px); border-top-right-radius: var(--vts-radius-pill, 9999px); }
+.vts-rounded-t-circle { border-top-left-radius: 50%; border-top-right-radius: 50%; }
+.vts-rounded-t-shaped { border-top-left-radius: var(--vts-radius-xl, 24px); border-top-right-radius: 0; }
+
+/* Bottom corners */
+.vts-rounded-b      { border-bottom-left-radius: var(--vts-radius, 4px); border-bottom-right-radius: var(--vts-radius, 4px); }
+.vts-rounded-b-0    { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+.vts-rounded-b-sm   { border-bottom-left-radius: var(--vts-radius-sm, 2px); border-bottom-right-radius: var(--vts-radius-sm, 2px); }
+.vts-rounded-b-md   { border-bottom-left-radius: var(--vts-radius-md, var(--vts-radius, 4px)); border-bottom-right-radius: var(--vts-radius-md, var(--vts-radius, 4px)); }
+.vts-rounded-b-lg   { border-bottom-left-radius: var(--vts-radius-lg, 8px); border-bottom-right-radius: var(--vts-radius-lg, 8px); }
+.vts-rounded-b-xl   { border-bottom-left-radius: var(--vts-radius-xl, 24px); border-bottom-right-radius: var(--vts-radius-xl, 24px); }
+.vts-rounded-b-pill { border-bottom-left-radius: var(--vts-radius-pill, 9999px); border-bottom-right-radius: var(--vts-radius-pill, 9999px); }
+.vts-rounded-b-circle { border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; }
+.vts-rounded-b-shaped { border-bottom-left-radius: 0; border-bottom-right-radius: var(--vts-radius-xl, 24px); }
+
+/* Start/Left corners */
+.vts-rounded-s      { border-top-left-radius: var(--vts-radius, 4px); border-bottom-left-radius: var(--vts-radius, 4px); }
+.vts-rounded-s-0    { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.vts-rounded-s-sm   { border-top-left-radius: var(--vts-radius-sm, 2px); border-bottom-left-radius: var(--vts-radius-sm, 2px); }
+.vts-rounded-s-md   { border-top-left-radius: var(--vts-radius-md, var(--vts-radius, 4px)); border-bottom-left-radius: var(--vts-radius-md, var(--vts-radius, 4px)); }
+.vts-rounded-s-lg   { border-top-left-radius: var(--vts-radius-lg, 8px); border-bottom-left-radius: var(--vts-radius-lg, 8px); }
+.vts-rounded-s-xl   { border-top-left-radius: var(--vts-radius-xl, 24px); border-bottom-left-radius: var(--vts-radius-xl, 24px); }
+.vts-rounded-s-pill { border-top-left-radius: var(--vts-radius-pill, 9999px); border-bottom-left-radius: var(--vts-radius-pill, 9999px); }
+.vts-rounded-s-circle { border-top-left-radius: 50%; border-bottom-left-radius: 50%; }
+.vts-rounded-s-shaped { border-top-left-radius: var(--vts-radius-xl, 24px); border-bottom-left-radius: var(--vts-radius-xl, 24px); border-top-right-radius: 0; border-bottom-right-radius: 0; }
+
+/* End/Right corners */
+.vts-rounded-e      { border-top-right-radius: var(--vts-radius, 4px); border-bottom-right-radius: var(--vts-radius, 4px); }
+.vts-rounded-e-0    { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.vts-rounded-e-sm   { border-top-right-radius: var(--vts-radius-sm, 2px); border-bottom-right-radius: var(--vts-radius-sm, 2px); }
+.vts-rounded-e-md   { border-top-right-radius: var(--vts-radius-md, var(--vts-radius, 4px)); border-bottom-right-radius: var(--vts-radius-md, var(--vts-radius, 4px)); }
+.vts-rounded-e-lg   { border-top-right-radius: var(--vts-radius-lg, 8px); border-bottom-right-radius: var(--vts-radius-lg, 8px); }
+.vts-rounded-e-xl   { border-top-right-radius: var(--vts-radius-xl, 24px); border-bottom-right-radius: var(--vts-radius-xl, 24px); }
+.vts-rounded-e-pill { border-top-right-radius: var(--vts-radius-pill, 9999px); border-bottom-right-radius: var(--vts-radius-pill, 9999px); }
+.vts-rounded-e-circle { border-top-right-radius: 50%; border-bottom-right-radius: 50%; }
+.vts-rounded-e-shaped { border-top-right-radius: var(--vts-radius-xl, 24px); border-bottom-right-radius: var(--vts-radius-xl, 24px); border-top-left-radius: 0; border-bottom-left-radius: 0; }
+
+}

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

@@ -0,0 +1,85 @@
+/* prettier-ignore */
+
+@layer utilities {
+  /* Base border uses theme token color */
+  .vts-border {
+    /* Use theme color if available; otherwise fall back to tokens.css rgb + opacity */
+    border: thin solid var(--vts-color-border, rgba(var(--vts-border-color-rgb, 107, 114, 128), var(--vts-border-opacity, 0.35)));
+  }
+
+  /* Border color helper (applies theme border color without setting width) */
+  .vts-border-color {
+    border-color: var(--vts-color-border, rgba(var(--vts-border-color-rgb, 107, 114, 128), var(--vts-border-opacity, 0.35)));
+  }
+  .vts-border-color-light {
+    border-color: var(--vts-color-borderLight, rgba(var(--vts-border-color-rgb, 107, 114, 128), var(--vts-border-opacity, 0.35)));
+  }
+  .vts-border-color-heavy {
+    border-color: var(--vts-color-borderHeavy, rgba(var(--vts-border-color-rgb, 107, 114, 128), var(--vts-border-opacity, 0.35)));
+  }
+  .vts-border-color-error {
+    border-color: var(--vts-color-error, rgba(var(--vts-border-color-rgb, 107, 114, 128), var(--vts-border-opacity, 0.35)));
+  }
+
+  /* Transparent and side-specific color helpers for spinners and accents */
+  .vts-border-color-transparent { border-color: transparent; }
+  .vts-border-t-color-current { border-top-color: currentColor; }
+
+  /* Border width scale */
+  .vts-border-thin { border-width: thin; }
+  .vts-border-sm   { border-width: 1px; }
+  .vts-border-md   { border-width: 2px; }
+  .vts-border-lg   { border-width: 4px; }
+  .vts-border-xl   { border-width: 8px; }
+  .vts-border-0    { border-width: 0; }
+
+  /* Top */
+  .vts-border-t       { border-top-width: thin; }
+  .vts-border-t-0     { border-top-width: 0; }
+  .vts-border-t-thin  { border-top-width: thin; }
+  .vts-border-t-sm    { border-top-width: 1px; }
+  .vts-border-t-md    { border-top-width: 2px; }
+  .vts-border-t-lg    { border-top-width: 4px; }
+  .vts-border-t-xl    { border-top-width: 8px; }
+
+  /* End (logical right) */
+  .vts-border-e       { border-inline-end-width: thin; }
+  .vts-border-e-0     { border-inline-end-width: 0; }
+  .vts-border-e-thin  { border-inline-end-width: thin; }
+  .vts-border-e-sm    { border-inline-end-width: 1px; }
+  .vts-border-e-md    { border-inline-end-width: 2px; }
+  .vts-border-e-lg    { border-inline-end-width: 4px; }
+  .vts-border-e-xl    { border-inline-end-width: 8px; }
+
+  /* Bottom */
+  .vts-border-b       { border-bottom-width: thin; }
+  .vts-border-b-0     { border-bottom-width: 0; }
+  .vts-border-b-thin  { border-bottom-width: thin; }
+  .vts-border-b-sm    { border-bottom-width: 1px; }
+  .vts-border-b-md    { border-bottom-width: 2px; }
+  .vts-border-b-lg    { border-bottom-width: 4px; }
+  .vts-border-b-xl    { border-bottom-width: 8px; }
+
+  /* Start (logical left) */
+  .vts-border-s       { border-inline-start-width: thin; }
+  .vts-border-s-0     { border-inline-start-width: 0; }
+  .vts-border-s-thin  { border-inline-start-width: thin; }
+  .vts-border-s-sm    { border-inline-start-width: 1px; }
+  .vts-border-s-md    { border-inline-start-width: 2px; }
+  .vts-border-s-lg    { border-inline-start-width: 4px; }
+  .vts-border-s-xl    { border-inline-start-width: 8px; }
+
+  /* Border opacity helpers (no-op with single var color; keep for future) */
+  .vts-border-opacity-0   { }
+  .vts-border-opacity     { }
+  .vts-border-opacity-25  { }
+  .vts-border-opacity-50  { }
+  .vts-border-opacity-75  { }
+  .vts-border-opacity-100 { }
+
+  /* Border styles */
+  .vts-border-solid  { border-style: solid; }
+  .vts-border-dashed { border-style: dashed; }
+  .vts-border-dotted { border-style: dotted; }
+  .vts-border-double { border-style: double; }
+}

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

@@ -0,0 +1,38 @@
+@layer utilities {
+  /* Text color utilities */
+  .vts-text { color: var(--vts-color-text); }
+  .vts-text-secondary { color: var(--vts-color-textSecondary, var(--vts-color-muted)); }
+  .vts-text-muted { color: var(--vts-color-muted); }
+  .vts-text-primary { color: var(--vts-color-primary); }
+  .vts-text-secondary-accent { color: var(--vts-color-secondary); }
+  .vts-text-success { color: var(--vts-color-success); }
+  .vts-text-error { color: var(--vts-color-error); }
+  .vts-text-warning { color: var(--vts-color-warning); }
+  .vts-text-info { color: var(--vts-color-info); }
+  .vts-on-primary { color: var(--vts-color-primaryText); }
+  .vts-on-secondary { color: var(--vts-color-secondaryText, var(--vts-color-text)); }
+  /* Aliases for "on-*" text utilities used by components */
+  .vts-text-on-primary { color: var(--vts-color-primaryText); }
+  .vts-text-on-secondary { color: var(--vts-color-secondaryText, var(--vts-color-text)); }
+  .vts-text-on-success { color: var(--vts-color-successText, #fff); }
+  .vts-text-on-error { color: var(--vts-color-errorText, #fff); }
+  .vts-text-on-warning { color: var(--vts-color-warningText, #111); }
+  .vts-text-on-info { color: var(--vts-color-infoText, #fff); }
+  .vts-text-on-disabled { color: var(--vts-color-disabledText, var(--vts-color-textSecondary)); }
+  .vts-text-inherit { color: inherit; }
+
+  /* Background color utilities */
+  .vts-bg { background-color: var(--vts-color-background); }
+  .vts-bg-surface { background-color: var(--vts-color-surface); }
+  .vts-bg-surface-elevated { background-color: var(--vts-color-surfaceElevated, var(--vts-color-surface)); }
+  .vts-bg-primary { background-color: var(--vts-color-primary); }
+  .vts-bg-secondary { background-color: var(--vts-color-secondary); }
+  .vts-bg-overlay { background-color: var(--vts-color-overlay); }
+  .vts-bg-border-light { background-color: var(--vts-color-borderLight); }
+  .vts-bg-success { background-color: var(--vts-color-success); }
+  .vts-bg-error { background-color: var(--vts-color-error); }
+  .vts-bg-warning { background-color: var(--vts-color-warning); }
+  .vts-bg-info { background-color: var(--vts-color-info); }
+  .vts-bg-transparent { background-color: transparent; }
+  .vts-bg-inherit { background-color: inherit; }
+}

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

@@ -0,0 +1,19 @@
+/* prettier-ignore */
+
+@layer utilities {
+  /* =========================
+     Cursor Utilities
+     ========================= */
+  .vts-cursor-auto        { cursor: auto; }
+  .vts-cursor-default     { cursor: default; }
+  .vts-cursor-grab        { cursor: grab; }
+  .vts-cursor-grabbing    { cursor: grabbing; }
+  .vts-cursor-help        { cursor: help; }
+  .vts-cursor-move        { cursor: move; }
+  .vts-cursor-none        { cursor: none; }
+  .vts-cursor-not-allowed { cursor: not-allowed; }
+  .vts-cursor-pointer     { cursor: pointer; }
+  .vts-cursor-progress    { cursor: progress; }
+  .vts-cursor-text        { cursor: text; }
+  .vts-cursor-wait        { cursor: wait; }
+}

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

@@ -0,0 +1,78 @@
+/* prettier-ignore */
+@layer utilities {
+  /* =========================
+     Display Utilities
+     ========================= */
+
+  /* Display none */
+  .vts-d-none               { display: none; }
+  .vts-d-sm-none            { display: none; }
+  .vts-d-md-none            { display: none; }
+  .vts-d-lg-none            { display: none; }
+  .vts-d-xl-none            { display: none; }
+  .vts-d-xxl-none           { display: none; }
+  .vts-d-print-none         { display: none; }
+  .vts-d-sr-only            { display: none; }
+  .vts-d-sr-only-focusable  { display: none; }
+
+  /* Display flex */
+  .vts-d-flex                { display: flex; }
+  .vts-d-sm-flex             { display: flex; }
+  .vts-d-md-flex             { display: flex; }
+  .vts-d-lg-flex             { display: flex; }
+  .vts-d-xl-flex             { display: flex; }
+  .vts-d-xxl-flex            { display: flex; }
+  .vts-d-print-flex          { display: flex; }
+
+  /* Display inline */
+  .vts-d-sm-inline           { display: inline; }
+  .vts-d-md-inline           { display: inline; }
+  .vts-d-lg-inline           { display: inline; }
+  .vts-d-xl-inline           { display: inline; }
+  .vts-d-xxl-inline          { display: inline; }
+  .vts-d-print-inline        { display: inline; }
+
+  /* Display inline-block */
+  .vts-d-inline-block        { display: inline-block; }
+  .vts-d-sm-inline-block     { display: inline-block; }
+  .vts-d-md-inline-block     { display: inline-block; }
+  .vts-d-lg-inline-block     { display: inline-block; }
+  .vts-d-xl-inline-block     { display: inline-block; }
+  .vts-d-xxl-inline-block    { display: inline-block; }
+  .vts-d-print-inline-block  { display: inline-block; }
+
+  /* Display block */
+  .vts-d-print-block         { display: block; }
+
+  /* Display table */
+  .vts-d-sm-table            { display: table; }
+  .vts-d-md-table            { display: table; }
+  .vts-d-lg-table            { display: table; }
+  .vts-d-xl-table            { display: table; }
+  .vts-d-xxl-table           { display: table; }
+  .vts-d-print-table         { display: table; }
+
+  /* Display table-cell */
+  .vts-d-sm-table-cell       { display: table-cell; }
+  .vts-d-md-table-cell       { display: table-cell; }
+  .vts-d-lg-table-cell       { display: table-cell; }
+  .vts-d-xl-table-cell       { display: table-cell; }
+  .vts-d-xxl-table-cell      { display: table-cell; }
+  .vts-d-print-table-cell    { display: table-cell; }
+
+  /* Display table-row */
+  .vts-d-sm-table-row        { display: table-row; }
+  .vts-d-md-table-row        { display: table-row; }
+  .vts-d-lg-table-row        { display: table-row; }
+  .vts-d-xl-table-row        { display: table-row; }
+  .vts-d-xxl-table-row       { display: table-row; }
+  .vts-d-print-table-row     { display: table-row; }
+
+  /* Display inline-flex */
+  .vts-d-sm-inline-flex      { display: inline-flex; }
+  .vts-d-md-inline-flex      { display: inline-flex; }
+  .vts-d-lg-inline-flex      { display: inline-flex; }
+  .vts-d-xl-inline-flex      { display: inline-flex; }
+  .vts-d-xxl-inline-flex     { display: inline-flex; }
+  .vts-d-print-inline-flex   { display: inline-flex; }
+}

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

@@ -0,0 +1,33 @@
+/* prettier-ignore */
+
+@layer utilities {
+  /* =========================
+     Elevation (box-shadow) Utilities
+     ========================= */
+
+  .vts-elevation-0  { box-shadow: var(--vts-elevation-0, none); }
+  .vts-elevation-1  { box-shadow: var(--vts-elevation-1, 0px 1px 3px rgba(0,0,0,0.2), 0px 1px 1px rgba(0,0,0,0.14), 0px 2px 1px rgba(0,0,0,0.12)); }
+  .vts-elevation-2  { box-shadow: var(--vts-elevation-2, 0px 1px 5px rgba(0,0,0,0.2), 0px 2px 2px rgba(0,0,0,0.14), 0px 3px 1px rgba(0,0,0,0.12)); }
+  .vts-elevation-3  { box-shadow: var(--vts-elevation-3, 0px 1px 8px rgba(0,0,0,0.2), 0px 3px 4px rgba(0,0,0,0.14), 0px 3px 3px rgba(0,0,0,0.12)); }
+  .vts-elevation-4  { box-shadow: var(--vts-elevation-4, 0px 2px 4px rgba(0,0,0,0.2), 0px 4px 5px rgba(0,0,0,0.14), 0px 1px 10px rgba(0,0,0,0.12)); }
+  .vts-elevation-5  { box-shadow: var(--vts-elevation-5, 0px 3px 5px rgba(0,0,0,0.2), 0px 5px 8px rgba(0,0,0,0.14), 0px 1px 14px rgba(0,0,0,0.12)); }
+  .vts-elevation-6  { box-shadow: var(--vts-elevation-6, 0px 3px 5px rgba(0,0,0,0.2), 0px 6px 10px rgba(0,0,0,0.14), 0px 1px 18px rgba(0,0,0,0.12)); }
+  .vts-elevation-7  { box-shadow: var(--vts-elevation-7, 0px 4px 5px rgba(0,0,0,0.2), 0px 7px 10px rgba(0,0,0,0.14), 0px 2px 16px rgba(0,0,0,0.12)); }
+  .vts-elevation-8  { box-shadow: var(--vts-elevation-8, 0px 5px 5px rgba(0,0,0,0.2), 0px 8px 10px rgba(0,0,0,0.14), 0px 3px 14px rgba(0,0,0,0.12)); }
+  .vts-elevation-9  { box-shadow: var(--vts-elevation-9, 0px 5px 6px rgba(0,0,0,0.2), 0px 9px 12px rgba(0,0,0,0.14), 0px 3px 16px rgba(0,0,0,0.12)); }
+  .vts-elevation-10 { box-shadow: var(--vts-elevation-10, 0px 6px 6px rgba(0,0,0,0.2), 0px 10px 14px rgba(0,0,0,0.14), 0px 4px 18px rgba(0,0,0,0.12)); }
+  .vts-elevation-11 { box-shadow: var(--vts-elevation-11, 0px 6px 7px rgba(0,0,0,0.2), 0px 11px 15px rgba(0,0,0,0.14), 0px 4px 20px rgba(0,0,0,0.12)); }
+  .vts-elevation-12 { box-shadow: var(--vts-elevation-12, 0px 7px 8px rgba(0,0,0,0.2), 0px 12px 17px rgba(0,0,0,0.14), 0px 5px 22px rgba(0,0,0,0.12)); }
+  .vts-elevation-13 { box-shadow: var(--vts-elevation-13, 0px 7px 8px rgba(0,0,0,0.2), 0px 13px 19px rgba(0,0,0,0.14), 0px 5px 24px rgba(0,0,0,0.12)); }
+  .vts-elevation-14 { box-shadow: var(--vts-elevation-14, 0px 7px 9px rgba(0,0,0,0.2), 0px 14px 21px rgba(0,0,0,0.14), 0px 5px 26px rgba(0,0,0,0.12)); }
+  .vts-elevation-15 { box-shadow: var(--vts-elevation-15, 0px 8px 9px rgba(0,0,0,0.2), 0px 15px 22px rgba(0,0,0,0.14), 0px 6px 28px rgba(0,0,0,0.12)); }
+  .vts-elevation-16 { box-shadow: var(--vts-elevation-16, 0px 8px 10px rgba(0,0,0,0.2), 0px 16px 24px rgba(0,0,0,0.14), 0px 6px 30px rgba(0,0,0,0.12)); }
+  .vts-elevation-17 { box-shadow: var(--vts-elevation-17, 0px 8px 11px rgba(0,0,0,0.2), 0px 17px 26px rgba(0,0,0,0.14), 0px 6px 32px rgba(0,0,0,0.12)); }
+  .vts-elevation-18 { box-shadow: var(--vts-elevation-18, 0px 9px 11px rgba(0,0,0,0.2), 0px 18px 28px rgba(0,0,0,0.14), 0px 7px 34px rgba(0,0,0,0.12)); }
+  .vts-elevation-19 { box-shadow: var(--vts-elevation-19, 0px 9px 12px rgba(0,0,0,0.2), 0px 19px 29px rgba(0,0,0,0.14), 0px 7px 36px rgba(0,0,0,0.12)); }
+  .vts-elevation-20 { box-shadow: var(--vts-elevation-20, 0px 10px 13px rgba(0,0,0,0.2), 0px 20px 31px rgba(0,0,0,0.14), 0px 8px 38px rgba(0,0,0,0.12)); }
+  .vts-elevation-21 { box-shadow: var(--vts-elevation-21, 0px 10px 13px rgba(0,0,0,0.2), 0px 21px 33px rgba(0,0,0,0.14), 0px 8px 40px rgba(0,0,0,0.12)); }
+  .vts-elevation-22 { box-shadow: var(--vts-elevation-22, 0px 10px 14px rgba(0,0,0,0.2), 0px 22px 35px rgba(0,0,0,0.14), 0px 8px 42px rgba(0,0,0,0.12)); }
+  .vts-elevation-23 { box-shadow: var(--vts-elevation-23, 0px 11px 14px rgba(0,0,0,0.2), 0px 23px 36px rgba(0,0,0,0.14), 0px 9px 44px rgba(0,0,0,0.12)); }
+  .vts-elevation-24 { box-shadow: var(--vts-elevation-24, 0px 11px 15px rgba(0,0,0,0.2), 0px 24px 38px rgba(0,0,0,0.14), 0px 9px 46px rgba(0,0,0,0.12)); }
+}