@vialiq/flux-ui 0.20.0 → 0.22.0

package/README.md

@@ -380,6 +380,28 @@ Works with any JavaScript framework:
 - ✅ Focus states built-in
 - ✅ Semantic HTML patterns
 - ✅ Reduced motion support ready
+- ✅ Responsive `rem` scaling based on root font size
+
+### Responsive Typography & Rem Scaling
+Flux UI strictly uses `rem` units for typography and spacing to ensure accessibility. By default, it assumes a standard browser root font size of `16px`.
+
+If your application uses a custom root font size (such as the `62.5%` or `10px` hack), you must configure Flux UI to scale its internal calculations accordingly:
+
+```scss
+// In your application's main SCSS file:
+@use '@vialiq/flux-ui/styles' with (
+  $vi-rem-base: 10px
+);
+```
+This ensures that a component designed to be `16px` tall will correctly output `1.6rem`, rendering exactly 16 pixels at runtime against your custom 10px root.
+
+### CSS Unit Guidelines
+To maintain a robust, scalable, and accessible UI, Flux UI strictly adheres to the following unit rules:
+
+- **`rem`**: Used for **Typography**, **Spacing** (margin, padding, gap), and **Interactive Form Control Sizing** (button heights, input widths, etc.). This guarantees that everything defining the core layout grid and text hierarchy scales fluidly when a user changes their browser root font size for accessibility.
+- **`px`**: Reserved exclusively for rigid geometries that must never scale or blur. Used for **Borders** (`1px solid`), **Shadows** (offsets and blurs), small **Optical Adjustments** (e.g. `2px` focus outline offset), and **Visually Hidden Hacks** (e.g. `1px` clipping for screen readers).
+- **`dvh` / `dvw`** (with `vh` / `vw` fallback): Used for **Viewport-Relative Layouts**, such as full-screen modal overlays, drawer max-heights, or sticky banners that must span the entire screen regardless of the parent container size. Dynamic viewport units correctly account for mobile browser UI (like address bars) expanding and contracting.
+- **`%`**: Used for **Container-Relative Fluidity**, such as a button being `width: 100%` of its parent column, or grid layouts.
 
 ## Contributing
 

package/components/_accordion.scss

@@ -8,8 +8,8 @@ $accordion-border-radius: var(--vi-accordion-border-radius, tokens.$border-radiu
 $accordion-gap: var(--vi-accordion-gap, 0px);
 $accordion-animation-duration: var(--vi-accordion-animation-duration, 200ms);
 
-$accordion-item-header-padding: var(--vi-accordion-item-header-padding, 14px 16px);
-$accordion-item-body-padding: var(--vi-accordion-item-body-padding, 0 16px 16px);
+$accordion-item-header-padding: var(--vi-accordion-item-header-padding, #{tokens.$spacing-sm} #{tokens.$spacing-md});
+$accordion-item-body-padding: var(--vi-accordion-item-body-padding, 0 #{tokens.$spacing-md} #{tokens.$spacing-md});
 $accordion-item-header-bg: var(--vi-accordion-item-header-bg, transparent);
 $accordion-item-header-bg-hover: var(--vi-accordion-item-header-bg-hover, tokens.$layer-hover-01);
 $accordion-item-header-bg-open: var(--vi-accordion-item-header-bg-open, transparent);
@@ -43,8 +43,8 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
   padding: $accordion-item-header-padding;
   background-color: $accordion-item-header-bg;
   color: $accordion-item-label-color;
-  font-family: tokens.$font-family-base;
-  font-size: var(--vi-accordion-item-header-font-size, tokens.$font-size-base);
+  font-family: var(--vi-accordion-font-family, #{tokens.$font-family-base});
+  font-size: var(--vi-accordion-item-header-font-size, #{tokens.$font-size-base});
   font-weight: $accordion-item-label-font-weight;
   text-align: left;
   border: none;
@@ -91,8 +91,8 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
   margin-inline-start: tokens.$spacing-xs;
 
   svg {
-    width: 16px;
-    height: 16px;
+    width: #{tokens.$spacing-md};
+    height: #{tokens.$spacing-md};
     fill: none;
     stroke: currentColor;
     stroke-width: 2;
@@ -112,9 +112,9 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
 
 .accordion-panel-inner {
   padding: $accordion-item-body-padding;
-  font-family: tokens.$font-family-base;
-  font-size: tokens.$font-size-sm;
-  color: tokens.$text-secondary;
+  font-family: var(--vi-accordion-font-family, #{tokens.$font-family-base});
+  font-size: #{tokens.$font-size-sm};
+  color: #{tokens.$text-secondary};
   box-sizing: border-box;
 }
 
@@ -168,8 +168,8 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
 
 .accordion--sm,
 .accordion-item--sm {
-  --vi-accordion-item-header-padding: 10px 12px;
-  --vi-accordion-item-body-padding: 0 12px 12px;
+  --vi-accordion-item-header-padding: #{tokens.$spacing-xs} #{tokens.$spacing-sm};
+  --vi-accordion-item-body-padding: 0 #{tokens.$spacing-sm} #{tokens.$spacing-sm};
   --vi-accordion-item-header-font-size: #{tokens.$font-size-sm};
 }
 
@@ -182,8 +182,8 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
 
 .accordion--lg,
 .accordion-item--lg {
-  --vi-accordion-item-header-padding: 18px 20px;
-  --vi-accordion-item-body-padding: 0 20px 20px;
+  --vi-accordion-item-header-padding: #{tokens.$spacing-lg} #{tokens.$spacing-xl};
+  --vi-accordion-item-body-padding: 0 #{tokens.$spacing-xl} #{tokens.$spacing-xl};
   --vi-accordion-item-header-font-size: #{tokens.$font-size-lg};
 }
 

package/components/_alert.scss

@@ -15,15 +15,15 @@
     box-sizing: border-box;
     width: 100%;
 
-    border-radius: var(--vi-alert-border-radius, 6px);
-    padding: var(--vi-alert-padding, 12px 16px);
-    gap: var(--vi-alert-gap, 12px);
+    border-radius: var(--vi-alert-border-radius, #{tokens.$border-radius-lg});
+    padding: var(--vi-alert-padding, #{tokens.$spacing-xs} #{tokens.$spacing-md});
+    gap: var(--vi-alert-gap, #{tokens.$spacing-sm});
     border-width: var(--vi-alert-border-width, 1px);
     border-style: solid;
 
-    font-family: tokens.$font-family-base;
-    font-size: tokens.$font-size-sm;
-    line-height: tokens.$line-height-normal;
+    font-family: var(--vi-alert-font-family, #{tokens.$font-family-base});
+    font-size: #{tokens.$font-size-sm};
+    line-height: #{tokens.$line-height-normal};
   }
 
   .alert-icon {
@@ -45,7 +45,7 @@
 
   .alert-title {
     font-weight: tokens.$font-weight-semibold;
-    margin-bottom: 4px;
+    margin-bottom: #{tokens.$spacing-unit};
     display: block;
   }
 

package/components/_animation.scss

@@ -25,7 +25,7 @@
   --vi-animation-easing-exit: cubic-bezier(0.4, 0, 1, 1);
   --vi-animation-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 
-  --vi-animation-expand-max-height: 100vh;
+  --vi-animation-expand-max-height: 100dvh;
   --vi-animation-expand-max-width: 100vw;
 }
 
@@ -186,11 +186,11 @@
 // Expand & Collapse Keyframes
 @keyframes vi-expand-vertical {
   from { max-height: 0; opacity: 0; }
-  to { max-height: var(--vi-animation-expand-max-height, 100vh); opacity: 1; }
+  to { max-height: var(--vi-animation-expand-max-height, 100dvh); opacity: 1; }
 }
 
 @keyframes vi-collapse-vertical {
-  from { max-height: var(--vi-animation-expand-max-height, 100vh); opacity: 1; }
+  from { max-height: var(--vi-animation-expand-max-height, 100dvh); opacity: 1; }
   to { max-height: 0; opacity: 0; }
 }
 
@@ -245,3 +245,8 @@
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
 }
+
+@keyframes vi-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}

package/components/_badge.scss

@@ -16,19 +16,21 @@
     white-space: nowrap;
     box-sizing: border-box;
 
-    font-size: var(--vi-badge-font-size, 11px);
+    // 20px = standard badge height (not on the spacing scale); kept explicit
+    height: var(--vi-badge-height, 20px);
+    font-size: var(--vi-badge-font-size, #{tokens.$font-size-xs});
     font-weight: var(--vi-badge-font-weight, #{tokens.$font-weight-semibold});
-    padding: var(--vi-badge-padding, 2px 8px);
-    border-radius: var(--vi-badge-border-radius, 9999px);
-    gap: var(--vi-badge-gap, 4px);
+    padding: var(--vi-badge-padding, 0 #{tokens.$spacing-xs});
+    border-radius: var(--vi-badge-border-radius, #{tokens.$border-radius-full});
+    gap: var(--vi-badge-gap, #{tokens.$spacing-unit});
 
     border: #{tokens.$border-width-thin} solid transparent;
   }
 
   .dot {
     display: inline-block;
-    width: var(--vi-badge-dot-size, 8px);
-    height: var(--vi-badge-dot-size, 8px);
+    width: var(--vi-badge-dot-size, #{tokens.$spacing-xs});
+    height: var(--vi-badge-dot-size, #{tokens.$spacing-xs});
     border-radius: 50%;
     background-color: currentColor;
     flex-shrink: 0;

package/components/_card.scss

@@ -0,0 +1,180 @@
+@use '../styles/variables' as tokens;
+@use '../styles/functions' as func;
+
+@layer components {
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .vi-card {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+
+    background-color: var(--vi-card-bg, #{tokens.$layer-01});
+    border: #{tokens.$border-width-thin} solid var(--vi-card-border-color, #{tokens.$border-02});
+    border-radius: var(--vi-card-border-radius, #{tokens.$border-radius-lg});
+    color: var(--vi-card-color, #{tokens.$text-primary});
+    // Refined premium transitions
+    transition: box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), 
+                border-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), 
+                transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+    
+    // Subtle glassy inner highlight for 3D machined edge + faint ambient shadow
+    box-shadow: var(--vi-card-shadow, #{tokens.$shadow-sm}, #{tokens.$shadow-inner-light});
+    
+    // Default padding (can be overridden by size classes)
+    --vi-card-padding: #{func.to-rem(24px)};
+  }
+
+  /* Size Overrides */
+  .vi-card--size-sm { --vi-card-padding: #{func.to-rem(12px)}; }
+  .vi-card--size-md { --vi-card-padding: #{func.to-rem(16px)}; }
+  .vi-card--size-lg { --vi-card-padding: #{func.to-rem(24px)}; }
+
+  .vi-card--hoverable:hover {
+    // Multi-layered diffuse shadow + maintaining the inner inset highlight
+    box-shadow: var(--vi-card-hover-shadow, #{tokens.$shadow-md}, #{tokens.$shadow-inner-light});
+    border-color: var(--vi-card-hover-border-color, #{tokens.$border-03});
+    // Physical lift micro-interaction
+    transform: translateY(-2px);
+    cursor: pointer;
+  }
+  
+  // Subtle tactile press effect
+  .vi-card--hoverable:active {
+    transform: translateY(0) scale(0.995);
+    box-shadow: var(--vi-card-active-shadow, #{tokens.$shadow-sm}, #{tokens.$shadow-inner-light});
+  }
+
+  /* Structural Slots */
+  
+  .vi-card-cover {
+    display: flex;
+    overflow: hidden;
+    border-top-left-radius: var(--vi-card-border-radius, #{tokens.$border-radius-lg});
+    border-top-right-radius: var(--vi-card-border-radius, #{tokens.$border-radius-lg});
+    margin-top: -1px;
+    margin-left: -1px;
+    margin-right: -1px;
+
+    ::slotted(*) {
+      width: 100%;
+      display: block;
+      object-fit: cover;
+    }
+  }
+  .vi-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--vi-card-padding);
+    border-bottom: #{tokens.$border-width-thin} solid transparent;
+  }
+
+  .vi-card--bordered .vi-card-header {
+    border-bottom-color: var(--vi-card-border-color, #{tokens.$border-02});
+  }
+
+  .vi-card-title {
+    margin: 0;
+    font-family: #{tokens.$font-family-base};
+    font-weight: #{tokens.$font-weight-semibold};
+    /* Premium tracking for dense, modern typography */
+    letter-spacing: -0.01em;
+    
+    /* Fluid typography fallback using vw instead of cqi */
+    font-size: var(--vi-card-title-font-size, clamp(#{func.to-rem(16px)}, #{func.to-rem(14px)} + 1vw, #{func.to-rem(20px)}));
+    line-height: #{tokens.$line-height-tight};
+    color: var(--vi-card-title-color, #{tokens.$text-primary});
+  }
+
+  .vi-card-extra {
+    display: flex;
+    align-items: center;
+    gap: #{func.to-rem(8px)};
+  }
+
+  .vi-card-body {
+    padding: var(--vi-card-padding);
+    flex: 1 1 auto;
+    font-size: var(--vi-card-body-font-size, #{tokens.$font-size-base});
+    line-height: #{tokens.$line-height-normal};
+    color: var(--vi-card-body-color, #{tokens.$text-secondary});
+  }
+
+  .vi-card-footer {
+    display: flex;
+    align-items: center;
+    padding: var(--vi-card-padding);
+    border-top: #{tokens.$border-width-thin} solid transparent;
+  }
+
+  .vi-card--bordered .vi-card-footer {
+    border-top-color: var(--vi-card-border-color, #{tokens.$border-02});
+  }
+
+  .vi-card-actions {
+    display: flex;
+    // Visually anchor actions with faint background
+    background: var(--vi-card-actions-bg, #{tokens.$layer-dimmed});
+    border-top: #{tokens.$border-width-thin} solid transparent;
+  }
+
+  .vi-card--bordered .vi-card-actions {
+    border-top-color: var(--vi-card-border-color, #{tokens.$border-02});
+  }
+
+  .vi-card-actions ::slotted(*) {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: #{func.to-rem(12px)} 0;
+    margin: 0;
+    border-right: #{tokens.$border-width-thin} solid transparent;
+    color: var(--vi-card-action-color, #{tokens.$text-secondary});
+    transition: color 0.3s ease;
+    cursor: pointer;
+  }
+
+  .vi-card--bordered .vi-card-actions ::slotted(*) {
+    border-right-color: var(--vi-card-border-color, #{tokens.$border-02});
+  }
+
+  .vi-card-actions ::slotted(*:hover) {
+    color: var(--vi-card-action-hover-color, #{tokens.$text-primary});
+  }
+
+  .vi-card-actions ::slotted(*:last-child) {
+    border-right: none;
+  }
+
+
+  .vi-card-skeleton {
+    display: flex;
+    gap: #{func.to-rem(16px)};
+    width: 100%;
+  }
+
+  .vi-card-skeleton-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    gap: #{func.to-rem(16px)};
+  }
+
+  .vi-card-skeleton-title {
+    width: 38%;
+    margin-top: #{func.to-rem(8px)};
+    margin-bottom: #{func.to-rem(4px)};
+  }
+
+  .vi-card-skeleton-short {
+    width: 61%;
+  }
+
+}

package/components/_checkbox.scss

@@ -7,12 +7,13 @@
  */
 
 @use '../styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
   .checkbox-wrapper {
     display: inline-flex;
     align-items: flex-start;
-    gap: var(--vi-checkbox-label-gap, 8px);
+    gap: var(--vi-checkbox-label-gap, #{tokens.$spacing-xs});
     cursor: pointer;
     font-family: #{tokens.$font-family-base};
     font-size: var(--vi-checkbox-label-font-size, #{tokens.$font-size-base});
@@ -41,10 +42,10 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--vi-checkbox-size, 18px);
-    height: var(--vi-checkbox-size, 18px);
+    width: var(--vi-checkbox-size, #{tokens.$spacing-md});
+    height: var(--vi-checkbox-size, #{tokens.$spacing-md});
     border: #{tokens.$border-width-base} solid var(--vi-checkbox-border-color, #{tokens.$outline});
-    border-radius: var(--vi-checkbox-border-radius, 3px);
+    border-radius: var(--vi-checkbox-border-radius, #{func.to-rem(4px)});
     background-color: var(--vi-checkbox-background-color, #{tokens.$color-background});
     transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
     flex-shrink: 0;
@@ -95,7 +96,7 @@
   .checkbox-input:focus-visible ~ .checkbox-box {
     outline: #{tokens.$border-width-base} solid var(--vi-checkbox-focus-ring-color, #{tokens.$focus});
     outline-offset: 2px;
-    box-shadow: 0 0 0 3px var(--vi-checkbox-focus-ring-glow, #{tokens.$color-blue-200});
+    box-shadow: #{tokens.$focus-ring-shadow};
   }
 
   // Hover state (only on non-disabled)

package/components/_chip.scss

@@ -12,13 +12,13 @@
     border-style: solid;
 
     // Tokens mapped directly from docs
-    height: var(--vi-chip-height, var(--vi-chip-height-md, 32px));
+    height: var(--vi-chip-height, var(--vi-chip-height-md, #{tokens.$spacing-xl}));
     padding: var(--vi-chip-padding, 0 10px);
-    border-radius: var(--vi-chip-border-radius, 999px);
+    border-radius: var(--vi-chip-border-radius, #{tokens.$border-radius-full});
     border-width: var(--vi-chip-border-width, 1px);
     gap: var(--vi-chip-gap, 6px);
-    font-size: var(--vi-chip-font-size, var(--vi-font-size-sm));
-    font-weight: var(--vi-chip-font-weight, var(--vi-font-weight-medium));
+    font-size: var(--vi-chip-font-size, #{tokens.$font-size-sm});
+    font-weight: var(--vi-chip-font-weight, #{tokens.$font-weight-medium});
     transition: all var(--vi-chip-transition, 100ms ease);
 
     // Color tokens to be overridden by vi-chip variant
@@ -31,7 +31,7 @@
   .chip:focus-visible {
     outline: #{tokens.$border-width-base} solid var(--vi-chip-focus-ring-color, #{tokens.$focus});
     outline-offset: 0;
-    box-shadow: 0 0 0 3px var(--vi-chip-focus-ring-glow, #{tokens.$color-blue-200});
+    box-shadow: #{tokens.$focus-ring-shadow};
   }
 
   // Disabled state structure

package/components/_combobox.scss

@@ -52,7 +52,7 @@
       border-color: var(--vi-combobox-border-color-focus, #{tokens.$focus});
       outline: var(--vi-combobox-border-width-focus, #{tokens.$border-width-base}) solid var(--vi-combobox-focus-ring-color, #{tokens.$focus});
       outline-offset: 0;
-      box-shadow: 0 0 0 3px var(--vi-combobox-focus-ring-glow, #{tokens.$color-blue-200});
+      box-shadow: #{tokens.$focus-ring-shadow};
     }
 
     &.is-disabled {

package/components/_index.scss

@@ -22,3 +22,5 @@
 @forward 'tabs';
 @forward 'tab';
 @forward 'tab-panel';
+@forward 'spin';
+@use './skeleton';

package/components/_input.scss

@@ -54,7 +54,7 @@
     &:focus {
       outline: #{tokens.$border-width-base} solid var(--vi-input-focus-ring-color, #{tokens.$focus});
       outline-offset: 0;
-      box-shadow: 0 0 0 3px var(--vi-input-focus-ring-glow, #{tokens.$color-blue-200});
+      box-shadow: #{tokens.$focus-ring-shadow};
     }
 
     &::placeholder {

package/components/_label.scss

@@ -14,8 +14,8 @@
     --vi-label-required-color: var(--vi-color-error, #{tokens.$color-error});
     // --vi-label-optional-color: var(--vi-text-helper)
     --vi-label-optional-color: var(--vi-text-helper, #{tokens.$text-helper});
-    // --vi-label-gap: 4px
-    --vi-label-gap: 4px;
+    // --vi-label-gap: $spacing-unit (4px)
+    --vi-label-gap: #{tokens.$spacing-unit};
   }
 
   .vi-label {
@@ -25,7 +25,7 @@
     font-size: var(--vi-label-font-size);
     font-weight: var(--vi-label-font-weight);
     color: var(--vi-label-color);
-    line-height: 1.5;
+    line-height: #{tokens.$line-height-normal};
     margin: 0;
 
     &.size-sm {

package/components/_modal.scss

@@ -25,14 +25,15 @@
     margin: auto;
     width: 100%;
     max-width: tokens.$modal-max-width-md;
-    max-height: 90vh; // Fallback max-height
+    max-height: 90vh;
+    max-height: 90dvh;
 
     z-index: tokens.$modal-z-index;
 
-    font-family: tokens.$font-family-base;
-    font-size: tokens.$font-size-base;
-    line-height: tokens.$line-height-normal;
-    color: tokens.$text-primary;
+    font-family: var(--vi-modal-font-family, #{tokens.$font-family-base});
+    font-size: var(--vi-modal-font-size, #{tokens.$font-size-base});
+    line-height: var(--vi-modal-line-height, #{tokens.$line-height-normal});
+    color: #{tokens.$text-primary};
 
     &[open] {
       display: flex;
@@ -230,6 +231,7 @@
       width: 100vw !important;
       width: 100dvw !important;
       max-height: 100vh !important;
+      max-height: 100dvh !important;
       height: 100vh !important;
       height: 100dvh !important;
       border-radius: 0 !important;