@vialiq/flux-ui 0.20.0 → 0.22.0

package/components/_progress.scss

@@ -0,0 +1,259 @@
+@use '../styles/variables' as tokens;
+@use '../styles/functions' as func;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// COMPONENT: vi-progress
+// ─────────────────────────────────────────────────────────────────────────────
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.vi-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--vi-progress-gap, #{tokens.$spacing-sm});
+  font-family: var(--vi-font-family, #{tokens.$font-family-base});
+
+  // Level 1: Consumer override
+  // Level 2: Component default
+  // Level 3: Semantic token
+  --progress-track-bg: var(--vi-progress-track-bg, #{tokens.$layer-03});
+  --progress-indicator-bg: var(--vi-progress-indicator-bg, #{tokens.$color-primary});
+  --progress-text-color: var(--vi-progress-text-color, #{tokens.$text-primary});
+  --progress-border-radius: var(--vi-progress-border-radius, #{tokens.$border-radius-full});
+  --progress-line-height: var(--vi-progress-line-height, #{func.to-rem(8px)});
+  --progress-circle-size: var(--vi-progress-circle-size, #{func.to-rem(120px)});
+  --progress-font-size: var(--vi-progress-font-size, #{tokens.$font-size-base});
+
+  // Variants
+  &.vi-progress--variant-primary {
+    --progress-indicator-bg: var(--vi-progress-primary-bg, #{tokens.$color-primary});
+  }
+  &.vi-progress--variant-success {
+    --progress-indicator-bg: var(--vi-progress-success-bg, #{tokens.$color-green-500});
+  }
+  &.vi-progress--variant-error {
+    --progress-indicator-bg: var(--vi-progress-error-bg, #{tokens.$color-red-500});
+  }
+  &.vi-progress--variant-warning {
+    --progress-indicator-bg: var(--vi-progress-warning-bg, #{tokens.$color-yellow-500});
+  }
+
+  // Sizes
+  &.vi-progress--size-sm {
+    --progress-line-height: var(--vi-progress-line-height-sm, #{func.to-rem(6px)});
+    --progress-font-size: var(--vi-progress-font-size-sm, #{tokens.$font-size-sm});
+    --progress-circle-size: var(--vi-progress-circle-size-sm, #{func.to-rem(80px)});
+  }
+  &.vi-progress--size-md {
+    --progress-line-height: var(--vi-progress-line-height-md, #{func.to-rem(8px)});
+    --progress-font-size: var(--vi-progress-font-size-md, #{tokens.$font-size-base});
+    --progress-circle-size: var(--vi-progress-circle-size-md, #{func.to-rem(120px)});
+  }
+  &.vi-progress--size-lg {
+    --progress-line-height: var(--vi-progress-line-height-lg, #{func.to-rem(12px)});
+    --progress-font-size: var(--vi-progress-font-size-lg, #{tokens.$font-size-lg});
+    --progress-circle-size: var(--vi-progress-circle-size-lg, #{func.to-rem(160px)});
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// TYPE: LINE
+// ─────────────────────────────────────────────────────────────────────────────
+
+.vi-progress--line {
+  .vi-progress-outer {
+    flex: 1 1 auto;
+  }
+
+  .vi-progress-track {
+    background-color: var(--progress-track-bg);
+    border-radius: var(--progress-border-radius);
+    height: var(--progress-line-height);
+    overflow: hidden; // Ensures indicator is clipped to radius
+    position: relative;
+    width: 100%;
+  }
+
+  .vi-progress-success-indicator {
+    background-color: var(--progress-success-bg, #{tokens.$color-success});
+    border-radius: var(--progress-border-radius);
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .vi-progress-indicator {
+    background-color: var(--progress-indicator-bg);
+    border-radius: var(--progress-border-radius);
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
+  }
+
+  // Status: active (gleaming sweep animation)
+  &.vi-progress--status-active .vi-progress-indicator::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: var(--vi-progress-gleam-bg, #{tokens.$layer-01});
+    opacity: 0;
+    animation: vi-progress-active-gleam 2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// TYPE: CIRCLE
+// ─────────────────────────────────────────────────────────────────────────────
+
+.vi-progress--circle,
+.vi-progress--dashboard {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: var(--progress-circle-size);
+  height: var(--progress-circle-size);
+  gap: 0; // Text is overlaid
+
+  .vi-progress-circle-svg {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+  }
+
+  .vi-progress-circle-track {
+    fill: transparent;
+    stroke: var(--progress-track-bg);
+    // stroke-width is provided inline via JS based on props, but fallback here
+    stroke-width: var(--vi-progress-circle-stroke-width, 6);
+  }
+
+  .vi-progress-circle-success {
+    fill: transparent;
+    stroke: var(--progress-success-bg, #{tokens.$color-success});
+    stroke-width: var(--vi-progress-circle-stroke-width, 6);
+    transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .vi-progress-circle-indicator {
+    fill: transparent;
+    stroke: var(--progress-indicator-bg);
+    stroke-width: var(--vi-progress-circle-stroke-width, 6);
+    transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
+  }
+
+  .vi-progress-info {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    text-align: center;
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// TYPE: STEPS
+// ─────────────────────────────────────────────────────────────────────────────
+
+.vi-progress--steps {
+  .vi-progress-steps {
+    flex: 1 1 auto;
+    display: flex;
+    gap: var(--vi-progress-step-gap, #{func.to-rem(4px)});
+    align-items: center;
+  }
+
+  .vi-progress-step-item {
+    flex: 1;
+    border-radius: var(--progress-border-radius);
+    transition: background-color 0.3s ease, height 0.3s ease;
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// INFO TEXT & ICONS
+// ─────────────────────────────────────────────────────────────────────────────
+
+.vi-progress-info {
+  color: var(--progress-text-color);
+  font-size: var(--progress-font-size);
+  line-height: 1;
+  white-space: nowrap;
+  word-break: keep-all;
+
+  // Align icons nicely
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  vi-icon {
+    font-size: calc(var(--progress-font-size) * 1.15); // icons slightly larger than text
+  }
+  
+  // Specific icon colors overriding text color
+  .vi-progress--variant-success & vi-icon {
+    color: var(--progress-indicator-bg); 
+  }
+  .vi-progress--variant-error & vi-icon {
+    color: var(--progress-indicator-bg);
+  }
+
+  // Simulate filled icons for Line mode
+  .vi-progress--line.vi-progress--status-success & vi-icon,
+  .vi-progress--line.vi-progress--status-exception & vi-icon {
+    background-color: var(--progress-indicator-bg);
+    color: #{tokens.$text-inverse};
+    border-radius: 50%;
+    // Ensure the background is tightly fitted to the icon
+    width: 1em;
+    height: 1em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ANIMATIONS
+// ─────────────────────────────────────────────────────────────────────────────
+
+@keyframes vi-progress-active-gleam {
+  0% {
+    opacity: 0.1;
+    width: 0;
+  }
+  20% {
+    opacity: 0.5;
+    width: 0;
+  }
+  100% {
+    opacity: 0;
+    width: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vi-progress-indicator {
+    transition: none !important;
+  }
+  
+  .vi-progress--status-active .vi-progress-indicator::before {
+    animation: none !important;
+  }
+  
+  .vi-progress-circle-indicator {
+    transition: none !important;
+  }
+}

package/components/_radio.scss

@@ -34,7 +34,7 @@
 
   .radio-group-items {
     display: flex;
-    gap: var(--vi-radio-group-gap, 8px);
+    gap: var(--vi-radio-group-gap, #{tokens.$spacing-xs});
 
     &[orientation="vertical"] {
       flex-direction: column;
@@ -76,7 +76,7 @@
   .radio-wrapper {
     display: inline-flex;
     align-items: center;
-    gap: var(--vi-radio-label-gap, 8px);
+    gap: var(--vi-radio-label-gap, #{tokens.$spacing-xs});
     cursor: pointer;
     font-family: #{tokens.$font-family-base};
     font-size: var(--vi-radio-label-font-size, #{tokens.$font-size-base});
@@ -104,8 +104,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--vi-radio-size, 18px);
-    height: var(--vi-radio-size, 18px);
+    width: var(--vi-radio-size, #{tokens.$spacing-md});
+    height: var(--vi-radio-size, #{tokens.$spacing-md});
     border: #{tokens.$border-width-base} solid var(--vi-radio-border-color, #{tokens.$outline});
     border-radius: 50%;
     background-color: var(--vi-radio-background-color, #{tokens.$color-background});
@@ -115,8 +115,9 @@
 
   .radio-dot {
     box-sizing: border-box;
-    width: var(--vi-radio-dot-size, 8px);
-    height: var(--vi-radio-dot-size, 8px);
+    // 8px dot is half of the 16px ($spacing-md) circle; this ratio is intentional
+    width: var(--vi-radio-dot-size, calc(#{tokens.$spacing-md} / 2));
+    height: var(--vi-radio-dot-size, calc(#{tokens.$spacing-md} / 2));
     border-radius: 50%;
     background-color: var(--vi-radio-dot-color, #{tokens.$color-primary});
     transform: scale(0);
@@ -138,7 +139,7 @@
   .radio-input:focus-visible + .radio-circle {
     outline: #{tokens.$border-width-base} solid var(--vi-radio-focus-ring-color, #{tokens.$focus});
     outline-offset: 2px;
-    box-shadow: 0 0 0 3px var(--vi-radio-focus-ring-glow, #{tokens.$color-blue-200});
+    box-shadow: #{tokens.$focus-ring-shadow};
   }
 
   // Hover state (only on non-disabled)

package/components/_select.scss

@@ -6,6 +6,7 @@
  */
 
 @use '../styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
   // -------------------------------------------------------------------------
@@ -38,14 +39,14 @@
     justify-content: space-between;
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--vi-select-sizing-min-height, 40px);
-    padding: var(--vi-select-spacing-padding-block, #{tokens.$spacing-xs})
-             var(--vi-select-spacing-padding-inline, #{tokens.$spacing-sm});
+    min-height: var(--vi-select-sizing-min-height, #{tokens.$spacing-xl});
+    padding: var(--vi-select-spacing-padding-block, #{tokens.$spacing-unit})
+             var(--vi-select-spacing-padding-inline, #{func.to-rem(11px)});
     background-color: var(--vi-select-background-color, #{tokens.$color-background});
     border: var(--vi-select-border-width, #{tokens.$border-width-thin}) solid var(--vi-select-border-color, #{tokens.$border-03});
-    border-radius: var(--vi-select-shape-border-radius, #{tokens.$border-radius-lg});
+    border-radius: var(--vi-select-shape-border-radius, #{func.to-rem(6px)});
     font-family: inherit;
-    font-size: var(--vi-font-size-base, #{tokens.$font-size-base});
+    font-size: var(--vi-font-size-base, #{func.to-rem(14px)});
     color: var(--vi-select-text-color, #{tokens.$color-foreground});
     transition: border-color 150ms ease, box-shadow 150ms ease;
     cursor: pointer;
@@ -69,7 +70,7 @@
       border-color: var(--vi-select-focus-ring-color, #{tokens.$focus});
       outline: var(--vi-border-width-base, 2px) solid var(--vi-select-focus-ring-color, #{tokens.$focus});
       outline-offset: -1px;
-      box-shadow: 0 0 0 3px var(--vi-select-focus-ring-glow, #{tokens.$color-blue-200});
+      box-shadow: #{tokens.$focus-ring-shadow};
     }
   }
 
@@ -289,7 +290,7 @@
       border-color: var(--vi-select-focus-ring-color, #{tokens.$focus});
       outline: var(--vi-border-width-base, 2px) solid var(--vi-select-focus-ring-color, #{tokens.$focus});
       outline-offset: -1px;
-      box-shadow: 0 0 0 3px var(--vi-select-focus-ring-glow, #{tokens.$color-blue-200});
+      box-shadow: #{tokens.$focus-ring-shadow};
     }
   }
 

package/components/_skeleton.scss

@@ -0,0 +1,35 @@
+@use '../styles/variables' as tokens;
+@use '../styles/functions' as func;
+@use './animation';
+
+@layer components {
+  .vi-skeleton {
+    display: block;
+    background: var(--vi-skeleton-color, #{tokens.$layer-02});
+    box-sizing: border-box;
+    /* Transition for smooth animation changes if needed */
+    transition: background 0.3s ease;
+  }
+
+  /* Shimmer Animation State */
+  .vi-skeleton--animation-shimmer {
+    background: linear-gradient(
+      90deg,
+      var(--vi-skeleton-color, #{tokens.$layer-02}) 25%,
+      var(--vi-skeleton-to-color, #{tokens.$layer-03}) 37%,
+      var(--vi-skeleton-color, #{tokens.$layer-02}) 63%
+    );
+    background-size: 400% 100%;
+    animation: vi-shimmer 1.4s ease infinite;
+  }
+
+  /* Pulse Animation State */
+  .vi-skeleton--animation-pulse {
+    animation: vi-pulse 1.5s ease-in-out infinite;
+  }
+
+  /* None Animation State */
+  .vi-skeleton--animation-none {
+    /* No animation overrides, uses default static background */
+  }
+}

package/components/_spin.scss

@@ -0,0 +1,159 @@
+/**
+ * Spin component base styles.
+ *
+ * Provides the host-agnostic foundation for the loading spinner.
+ * Includes the dot animations and overlay dimming logic.
+ */
+
+@use '../styles/functions' as func;
+@use '../styles/variables' as tokens;
+
+@layer components {
+
+  @keyframes viSpinRotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes viSpinMove {
+    to {
+      opacity: 1;
+    }
+  }
+
+  .spin-wrapper {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--vi-spin-color, var(--vi-color-primary, #{tokens.$color-primary}));
+    vertical-align: middle;
+    text-align: center;
+    opacity: 0;
+    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+
+    &.spinning {
+      opacity: 1;
+    }
+
+    &.spin-fullscreen {
+      position: fixed;
+      inset: 0;
+      z-index: 9999;
+      background-color: var(--vi-spin-fullscreen-bg, rgba(255, 255, 255, 0.8));
+    }
+  }
+
+  .spin-circle {
+    display: inline-block;
+    font-size: var(--vi-spin-size-md, #{func.to-rem(20px)});
+    width: 1em;
+    height: 1em;
+    animation: viSpinRotate 1s infinite linear;
+
+    &.spin-circle-determinate {
+      animation: none;
+      transform: rotate(-90deg);
+    }
+  }
+
+  .spin-dot {
+    position: relative;
+    display: inline-block;
+    font-size: var(--vi-spin-size-md, #{func.to-rem(20px)});
+    width: 1em;
+    height: 1em;
+    transform: rotate(45deg);
+    animation: viSpinRotate 1.2s infinite linear;
+  }
+
+  .spin-dot-item {
+    position: absolute;
+    display: block;
+    width: var(--vi-spin-item-size-md, 9px);
+    height: var(--vi-spin-item-size-md, 9px);
+    background-color: currentColor;
+    border-radius: 100%;
+    transform: scale(0.75);
+    transform-origin: 50% 50%;
+    opacity: 0.3;
+    animation: viSpinMove 1s infinite linear alternate;
+
+    &:nth-child(1) {
+      top: 0;
+      left: 0;
+    }
+    &:nth-child(2) {
+      top: 0;
+      right: 0;
+      animation-delay: 0.4s;
+    }
+    &:nth-child(3) {
+      right: 0;
+      bottom: 0;
+      animation-delay: 0.8s;
+    }
+    &:nth-child(4) {
+      bottom: 0;
+      left: 0;
+      animation-delay: 1.2s;
+    }
+  }
+
+  .spin-text {
+    margin-top: #{tokens.$spacing-xs};
+    font-family: #{tokens.$font-family-base};
+    font-size: var(--vi-spin-text-font-size, #{tokens.$font-size-sm});
+    color: var(--vi-spin-color, var(--vi-color-primary, #{tokens.$color-primary}));
+  }
+
+  // Sizes
+  .spin-sm {
+    .spin-circle, .spin-dot {
+      font-size: var(--vi-spin-size-sm, #{tokens.$font-size-base});
+    }
+    .spin-dot-item {
+      width: var(--vi-spin-item-size-sm, #{tokens.$spacing-unit});
+      height: var(--vi-spin-item-size-sm, #{tokens.$spacing-unit});
+    }
+  }
+
+  .spin-lg {
+    .spin-circle, .spin-dot {
+      font-size: var(--vi-spin-size-lg, #{tokens.$spacing-xl});
+    }
+    .spin-dot-item {
+      width: var(--vi-spin-item-size-lg, #{tokens.$font-size-base});
+      height: var(--vi-spin-item-size-lg, #{tokens.$font-size-base});
+    }
+  }
+
+  // Nested Overlay Mode
+  .spin-nested-loading {
+    position: relative;
+
+    .spin-container {
+      position: relative;
+      transition: opacity 0.3s;
+      
+      &.spin-blur {
+        clear: both;
+        opacity: 0.5;
+        user-select: none;
+        pointer-events: none;
+      }
+    }
+
+    > .spin-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 4;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      max-height: 400px;
+    }
+  }
+}

package/components/_switch.scss

@@ -1,4 +1,5 @@
 @use '../styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
   // ── Wrapper ──────────────────────────────────────────────────────────────────
@@ -10,7 +11,7 @@
   .switch-wrapper {
     display: inline-flex;
     align-items: flex-start;
-    gap: var(--vi-switch-label-gap, 8px);
+    gap: var(--vi-switch-label-gap, #{tokens.$spacing-xs});
     cursor: pointer;
     font-family: #{tokens.$font-family-base};
     font-size: var(--vi-switch-label-font-size, #{tokens.$font-size-base});
@@ -52,15 +53,15 @@
   .switch-track {
     box-sizing: border-box;
     position: relative;
-    width: var(--vi-switch-track-width, 44px);
-    height: var(--vi-switch-track-height, 24px);
+    width: var(--vi-switch-track-width, func.to-rem(44px));
+    height: var(--vi-switch-track-height, func.to-rem(22px));
     background-color: var(--vi-switch-track-color-off, #{tokens.$border-03});
-    border-radius: var(--vi-border-radius-full, 9999px);
+    border-radius: var(--vi-border-radius-full, #{tokens.$border-radius-full});
     transition: background-color var(--vi-switch-transition-duration, 150ms) ease;
     flex-shrink: 0;
     // Align track centre with first-line cap-height
     margin-top: calc(
-      (1em * #{tokens.$line-height-normal} - var(--vi-switch-track-height, 24px)) / 2
+      (1em * #{tokens.$line-height-normal} - var(--vi-switch-track-height, func.to-rem(24px))) / 2
     );
   }
 
@@ -69,13 +70,13 @@
   .switch-thumb {
     position: absolute;
     top: 50%;
-    left: var(--vi-switch-thumb-offset, 2px);
+    left: var(--vi-switch-thumb-offset, func.to-rem(2px));
     transform: translateY(-50%);
-    width: var(--vi-switch-thumb-size, 18px);
-    height: var(--vi-switch-thumb-size, 18px);
+    width: var(--vi-switch-thumb-size, func.to-rem(18px));
+    height: var(--vi-switch-thumb-size, func.to-rem(18px));
     background-color: var(--vi-switch-thumb-color, #{tokens.$text-primary-inverse});
     border-radius: 50%;
-    box-shadow: var(--vi-switch-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));
+    box-shadow: var(--vi-switch-thumb-shadow, #{tokens.$shadow-md});
     transition: left var(--vi-switch-transition-duration, 150ms) ease;
   }
 
@@ -86,7 +87,7 @@
 
     .switch-thumb {
       left: calc(
-        100% - var(--vi-switch-thumb-size, 18px) - var(--vi-switch-thumb-offset, 2px)
+        100% - var(--vi-switch-thumb-size, func.to-rem(18px)) - var(--vi-switch-thumb-offset, func.to-rem(2px))
       );
     }
   }
@@ -97,7 +98,7 @@
     outline: #{tokens.$border-width-base} solid
       var(--vi-switch-focus-ring-color, #{tokens.$focus});
     outline-offset: 2px;
-    box-shadow: 0 0 0 3px var(--vi-switch-focus-ring-glow, #{tokens.$color-blue-200});
+    box-shadow: #{tokens.$focus-ring-shadow};
   }
 
   // ── Disabled state ────────────────────────────────────────────────────────────
@@ -107,11 +108,11 @@
     opacity: var(--vi-switch-disabled-opacity, 0.5);
 
     .switch-track {
-      background-color: #{tokens.$border-03};
+      background-color: var(--vi-switch-track-color-disabled, #{tokens.$border-03});
     }
 
     .switch-input:checked ~ .switch-track {
-      background-color: #{tokens.$text-disabled};
+      background-color: var(--vi-switch-track-color-on-disabled, #{tokens.$text-disabled});
     }
   }
 

package/components/_tab-panel.scss

@@ -1,4 +1,5 @@
 @use '@vialiq/flux-ui/styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
 
@@ -12,7 +13,7 @@
     &:focus-visible {
       outline: 2px solid var(--vi-tabs-indicator-color, #{tokens.$color-primary});
       outline-offset: 2px;
-      border-radius: 2px;
+      border-radius: #{func.to-rem(2px)};
     }
   }