@vialiq/flux-ui 0.20.0 → 0.22.0

package/components/_tab.scss

@@ -1,4 +1,5 @@
 @use '@vialiq/flux-ui/styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
 
@@ -22,11 +23,11 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--vi-tab-icon-gap, 6px);
+    gap: var(--vi-tab-icon-gap, #{tokens.$spacing-xs});
     padding: var(--vi-tab-padding, 0 20px);
     min-width: var(--vi-tab-min-width, 90px);
     max-width: var(--vi-tab-max-width, 240px);
-    min-height: var(--vi-tab-height, 44px);
+    min-height: var(--vi-tab-height, 40px);
     width: 100%;
     height: 100%;
     position: relative;
@@ -40,7 +41,7 @@
 
     // Typography — clear nav-link feel, not body text
     font-family: inherit;
-    font-size: var(--vi-tab-font-size, 13.5px);
+    font-size: var(--vi-tab-font-size, #{tokens.$font-size-base});
     font-weight: var(--vi-tab-font-weight, 500);
     letter-spacing: 0.015em;
     color: var(--vi-tab-color, #{tokens.$text-secondary});
@@ -55,7 +56,7 @@
       content: '';
       position: absolute;
       inset: 4px;
-      border-radius: 8px;
+      border-radius: #{func.to-rem(8px)};
       background: currentColor;
       opacity: 0;
       transform: scale(0.85);
@@ -114,7 +115,7 @@
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    font-size: var(--vi-tab-icon-size, 15px);
+    font-size: var(--vi-tab-icon-size, #{func.to-rem(15px)});
     opacity: 0.6;
     position: relative;
     z-index: 1;
@@ -147,15 +148,15 @@
     min-width: var(--vi-tab-close-size, 18px);
     height: var(--vi-tab-close-size, 18px);
     padding: var(--vi-tab-badge-padding, 0 5px);
-    border-radius: 9px;
-    font-size: 10px;
+    border-radius: #{func.to-rem(9px)};
+    font-size: #{func.to-rem(10px)};
     font-weight: 700;
     line-height: 1;
     letter-spacing: 0;
     background: var(--vi-tab-badge-bg, #{tokens.$color-primary});
     color: var(--vi-tab-badge-color, #{tokens.$layer-01});
     flex-shrink: 0;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
+    box-shadow: #{tokens.$shadow-sm};
     animation: vi-badge-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
   }
 

package/components/_tabs.scss

@@ -1,4 +1,5 @@
 @use '@vialiq/flux-ui/styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
 
@@ -102,7 +103,7 @@
     }
 
     &:focus-visible {
-      border-radius: 4px; // Square focus ring for accessibility
+      border-radius: #{func.to-rem(4px)}; // Square focus ring for accessibility
       outline: 2px solid var(--vi-tabs-focus-ring, #{tokens.$color-primary});
       outline-offset: 2px;
     }
@@ -163,7 +164,7 @@
     height: var(--vi-tabs-indicator-thickness, 2px);
     width: 0;
     background: var(--vi-tabs-indicator-color, #{tokens.$color-primary});
-    border-radius: 2px 2px 0 0;
+    border-radius: #{func.to-rem(2px)} #{func.to-rem(2px)} 0 0;
     opacity: 0;
     pointer-events: none;
     z-index: 2;
@@ -201,7 +202,7 @@
       bottom: -1px;
       height: 2px;
       background: var(--vi-tabs-primary-color, #{tokens.$color-primary});
-      border-radius: 2px 2px 0 0;
+      border-radius: #{func.to-rem(2px)} #{func.to-rem(2px)} 0 0;
       box-shadow: 0 0 0 0 transparent; // no glow on line variant — keep clean
     }
   }
@@ -218,24 +219,21 @@
     .vi-tabs__tablist {
       background: var(--vi-tabs-pill-bg, #{tokens.$color-grey-100});
       border: 1px solid var(--vi-tabs-border-color, #{tokens.$color-border});
-      border-radius: 10px;
+      border-radius: #{func.to-rem(10px)};
       padding: var(--vi-tabs-spacing-xs, 4px);
       gap: var(--vi-tabs-gap-xs, 2px);
       // Inset shadow creates a "recessed tray" feel
-      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.07), inset 0 1px 2px rgba(0, 0, 0, 0.04);
+      box-shadow: #{tokens.$shadow-inner-deep};
     }
 
     // The sliding white pill cursor
     .vi-tabs__cursor {
       display: block;
       inset: 4px auto;          // matches tablist padding
-      border-radius: 7px;
+      border-radius: #{func.to-rem(7px)};
       background: var(--vi-tabs-surface-primary, #{tokens.$layer-01});
       // Multi-layer shadow for floating card feel
-      box-shadow:
-        0 1px 3px rgba(0, 0, 0, 0.10),
-        0 1px 2px rgba(0, 0, 0, 0.06),
-        0 0   0 1px rgba(0, 0, 0, 0.04);
+      box-shadow: #{tokens.$shadow-sm};
     }
 
     // Indicator hidden — cursor does selection work
@@ -261,7 +259,7 @@
       bottom: -1px;
       height: 2px;
       background: var(--vi-tabs-primary-color, #{tokens.$color-primary});
-      border-radius: 2px 2px 0 0;
+      border-radius: #{func.to-rem(2px)} #{func.to-rem(2px)} 0 0;
     }
   }
 
@@ -286,12 +284,12 @@
     .vi-tabs__cursor {
       $surface-color: var(--vi-tabs-surface-primary, #{tokens.$layer-01});
       display: block;
-      border-radius: 8px 8px 0 0;
+      border-radius: #{func.to-rem(8px)} #{func.to-rem(8px)} 0 0;
       background: $surface-color;
       border: 1px solid var(--vi-tabs-border-color, #{tokens.$color-border});
       border-bottom-color: $surface-color; // Merges with content below
       margin-top: 8px;
-      box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+      box-shadow: #{tokens.$shadow-sm};
     }
 
     .vi-tabs__indicator { display: none; }
@@ -306,9 +304,9 @@
 
   .vi-tabs--enclosed {
     border: 1px solid var(--vi-tabs-border-color, #{tokens.$color-border});
-    border-radius: 10px;
+    border-radius: #{func.to-rem(10px)};
     overflow: clip;  // Enclosed: clip cursor inside rounded border box
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+    box-shadow: #{tokens.$shadow-sm};
 
     .vi-tabs__tablist {
       background: var(--vi-tabs-surface-secondary, #{tokens.$layer-02});
@@ -367,11 +365,9 @@
       left: 4px !important;
       right: 4px;
       width: calc(100% - 8px) !important; // Override JS width — fills sidebar
-      border-radius: 8px;
+      border-radius: #{func.to-rem(8px)};
       background: var(--vi-tabs-surface-primary, #{tokens.$layer-01});
-      box-shadow:
-        0 1px 3px rgba(0, 0, 0, 0.08),
-        0 0 0 1px rgba(0, 0, 0, 0.04);
+      box-shadow: #{tokens.$shadow-sm};
     }
 
     // Vertical indicator — right edge accent line
@@ -382,7 +378,7 @@
       right: 0;
       width: 3px !important;
       height: 0;
-      border-radius: 3px 0 0 3px;
+      border-radius: #{func.to-rem(3px)} 0 0 #{func.to-rem(3px)};
       background: var(--vi-tabs-primary-color, #{tokens.$color-primary});
       box-shadow: 0 0 6px color-mix(in srgb, #{tokens.$color-primary} 40%, transparent);
     }
@@ -395,7 +391,7 @@
 
     &.vi-tabs--line ::slotted(vi-tab[active]) {
       background: var(--vi-tabs-surface-primary, #{tokens.$layer-01});
-      border-radius: 8px;
+      border-radius: #{func.to-rem(8px)};
     }
   }
 
@@ -482,10 +478,10 @@
     background: transparent;
     cursor: pointer;
     font-family: inherit;
-    font-size: 13px;
+    font-size: #{func.to-rem(13px)};
     font-weight: 500;
     color: var(--vi-tabs-text-secondary, #{tokens.$text-secondary});
-    border-radius: 6px 6px 0 0;
+    border-radius: #{func.to-rem(6px)} #{func.to-rem(6px)} 0 0;
     transition: color 150ms ease, background-color 150ms ease;
 
     &:hover {
@@ -516,11 +512,8 @@
     min-width: 180px;
     background: var(--vi-tabs-surface-primary, #{tokens.$layer-01});
     border: 1px solid var(--vi-tabs-border-color, #{tokens.$color-border});
-    border-radius: 8px;
-    box-shadow:
-      0 4px 6px -1px rgba(0, 0, 0, 0.10),
-      0 2px 4px -1px rgba(0, 0, 0, 0.06),
-      0 0 0 1px rgba(0, 0, 0, 0.04);
+    border-radius: #{func.to-rem(8px)};
+    box-shadow: #{tokens.$shadow-md};
     padding: var(--vi-tabs-spacing-xs, 4px);
     animation: vi-menu-appear 150ms cubic-bezier(0.4, 0, 0.2, 1);
     transform-origin: top right;
@@ -538,10 +531,10 @@
     width: 100%;
     padding: var(--vi-tabs-spacing-md-lg, 8px 12px);
     border: none;
-    border-radius: 6px;
+    border-radius: #{func.to-rem(6px)};
     background: transparent;
     font-family: inherit;
-    font-size: 13.5px;
+    font-size: #{func.to-rem(13.5px)};
     font-weight: 500;
     color: var(--vi-tabs-text-secondary, #{tokens.$text-secondary});
     cursor: pointer;

package/components/_tag.scss

@@ -1,52 +1,35 @@
 @use '../styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
-  :host,
-  :root {
-    --vi-tag-height: 24px;
-    --vi-tag-padding-x: 10px;
-    --vi-tag-border-radius: 4px;
-    --vi-tag-font-size: var(--vi-font-size-xs, #{tokens.$font-size-xs});
-    --vi-tag-font-weight: var(--vi-font-weight-medium, #{tokens.$font-weight-medium});
-    --vi-tag-gap: 6px;
-    --vi-tag-remove-size: 16px;
-    --vi-tag-dot-size: 6px;
-    --vi-tag-avatar-size: 14px;
-    --vi-tag-icon-size: 14px;
-    --vi-tag-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    --vi-tag-disabled-opacity: 0.5;
-    --vi-tag-max-width: 100%;
-  }
-
   .tag {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    height: var(--vi-tag-height);
-    padding-inline: var(--vi-tag-padding-x);
-    border-radius: var(--vi-tag-border-radius);
+    height: var(--vi-tag-height, #{func.to-rem(22px)});
+    padding-inline: var(--vi-tag-padding-x, #{func.to-rem(7px)});
+    border-radius: var(--vi-tag-border-radius, #{func.to-rem(4px)});
     font-family: #{tokens.$font-family-base};
-    font-size: var(--vi-tag-font-size);
-    font-weight: var(--vi-tag-font-weight);
+    font-size: var(--vi-tag-font-size, var(--vi-font-size-xs, #{tokens.$font-size-xs}));
+    font-weight: var(--vi-tag-font-weight, var(--vi-font-weight-medium, #{tokens.$font-weight-medium}));
     line-height: 1;
-    gap: var(--vi-tag-gap);
-    transition: var(--vi-tag-transition);
+    gap: var(--vi-tag-gap, #{func.to-rem(6px)});
+    transition: var(--vi-tag-transition, all 150ms cubic-bezier(0.4, 0, 0.2, 1));
     user-select: none;
     border: #{tokens.$border-width-thin} solid transparent;
     cursor: default;
-    max-width: var(--vi-tag-max-width);
+    max-width: var(--vi-tag-max-width, 100%);
     vertical-align: middle;
     position: relative;
 
     // ── Pill shape modifier ──────────────────────────────────────────────────
     &.tag--pill {
-      border-radius: 9999px;
+      border-radius: #{tokens.$border-radius-full};
     }
 
-    // ── Removable padding adjustment ──────────────────────────────────────────
     &.tag--removable {
-      padding-inline-end: calc(var(--vi-tag-padding-x) - 4px);
+      padding-inline-end: calc(var(--vi-tag-padding-x, #{func.to-rem(7px)}) - 4px);
     }
 
     // ── Content wrapper & optical vertical alignment ─────────────────────────
@@ -54,7 +37,7 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      gap: var(--vi-tag-gap);
+      gap: var(--vi-tag-gap, #{func.to-rem(6px)});
       min-width: 0;
       flex: 1 1 auto;
       height: 100%;
@@ -84,8 +67,8 @@
     }
 
     .tag-avatar ::slotted(*) {
-      width: var(--vi-tag-avatar-size, calc(var(--vi-tag-height) - 10px));
-      height: var(--vi-tag-avatar-size, calc(var(--vi-tag-height) - 10px));
+      width: var(--vi-tag-avatar-size, calc(var(--vi-tag-height, #{func.to-rem(22px)}) - 10px));
+      height: var(--vi-tag-avatar-size, calc(var(--vi-tag-height, #{func.to-rem(22px)}) - 10px));
       border-radius: 50%;
       object-fit: cover;
       display: block;
@@ -94,8 +77,8 @@
     // ── Status Dot indicator ────────────────────────────────────────────────
     .tag-dot {
       display: inline-block;
-      width: var(--vi-tag-dot-size);
-      height: var(--vi-tag-dot-size);
+      width: var(--vi-tag-dot-size, #{func.to-rem(6px)});
+      height: var(--vi-tag-dot-size, #{func.to-rem(6px)});
       border-radius: 50%;
       background-color: currentColor;
       flex-shrink: 0;
@@ -107,11 +90,11 @@
       align-items: center;
       justify-content: center;
       padding-inline: 5px;
-      height: calc(var(--vi-tag-height) - 10px);
-      min-width: calc(var(--vi-tag-height) - 10px);
-      font-size: 10px;
+      height: calc(var(--vi-tag-height, #{func.to-rem(22px)}) - 10px);
+      min-width: calc(var(--vi-tag-height, #{func.to-rem(22px)}) - 10px);
+      font-size: #{func.to-rem(10px)};
       font-weight: #{tokens.$font-weight-semibold};
-      border-radius: 9999px;
+      border-radius: #{tokens.$border-radius-full};
       background-color: rgba(0, 0, 0, 0.08);
       color: inherit;
       line-height: 1;
@@ -311,7 +294,7 @@
     // ────────────────────────────────────────────────────────────────────────
     &.appearance-solid {
       border-color: transparent;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+      box-shadow: #{tokens.$shadow-sm};
 
       &.variant-neutral {
         background-color: var(--vi-tag-solid-neutral-bg, #{tokens.$border-inverse-03});
@@ -375,41 +358,41 @@
     // SIZES
     // ────────────────────────────────────────────────────────────────────────
     &.size-xs {
-      --vi-tag-height: 18px;
-      --vi-tag-font-size: 10px;
-      --vi-tag-padding-x: 6px;
-      --vi-tag-gap: 4px;
-      --vi-tag-remove-size: 12px;
-      --vi-tag-dot-size: 4px;
-      --vi-tag-avatar-size: 10px;
-      --vi-tag-icon-size: 10px;
+      --vi-tag-height: #{func.to-rem(18px)};
+      --vi-tag-font-size: #{func.to-rem(10px)};
+      --vi-tag-padding-x: #{func.to-rem(6px)};
+      --vi-tag-gap: #{func.to-rem(4px)};
+      --vi-tag-remove-size: #{func.to-rem(12px)};
+      --vi-tag-dot-size: #{func.to-rem(4px)};
+      --vi-tag-avatar-size: #{func.to-rem(10px)};
+      --vi-tag-icon-size: #{func.to-rem(10px)};
     }
 
     &.size-sm {
-      --vi-tag-height: 20px;
-      --vi-tag-font-size: 11px;
-      --vi-tag-padding-x: 8px;
-      --vi-tag-gap: 5px;
-      --vi-tag-remove-size: 14px;
-      --vi-tag-dot-size: 5px;
-      --vi-tag-avatar-size: 12px;
-      --vi-tag-icon-size: 12px;
+      --vi-tag-height: #{func.to-rem(20px)};
+      --vi-tag-font-size: #{func.to-rem(11px)};
+      --vi-tag-padding-x: #{func.to-rem(8px)};
+      --vi-tag-gap: #{func.to-rem(5px)};
+      --vi-tag-remove-size: #{func.to-rem(14px)};
+      --vi-tag-dot-size: #{func.to-rem(5px)};
+      --vi-tag-avatar-size: #{func.to-rem(12px)};
+      --vi-tag-icon-size: #{func.to-rem(12px)};
     }
 
     &.size-lg {
-      --vi-tag-height: 28px;
-      --vi-tag-font-size: 13px;
-      --vi-tag-padding-x: 12px;
-      --vi-tag-gap: 8px;
-      --vi-tag-remove-size: 18px;
-      --vi-tag-dot-size: 7px;
-      --vi-tag-avatar-size: 18px;
-      --vi-tag-icon-size: 16px;
+      --vi-tag-height: #{func.to-rem(28px)};
+      --vi-tag-font-size: #{func.to-rem(13px)};
+      --vi-tag-padding-x: #{func.to-rem(12px)};
+      --vi-tag-gap: #{func.to-rem(8px)};
+      --vi-tag-remove-size: #{func.to-rem(18px)};
+      --vi-tag-dot-size: #{func.to-rem(7px)};
+      --vi-tag-avatar-size: #{func.to-rem(18px)};
+      --vi-tag-icon-size: #{func.to-rem(16px)};
     }
 
     // ── Disabled state ───────────────────────────────────────────────────────
     &.is-disabled {
-      opacity: var(--vi-tag-disabled-opacity);
+      opacity: var(--vi-tag-disabled-opacity, 0.5);
       pointer-events: none;
       cursor: not-allowed;
       box-shadow: none !important;
@@ -422,9 +405,9 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--vi-tag-remove-size);
-    height: var(--vi-tag-remove-size);
-    min-width: var(--vi-tag-remove-size);
+    width: var(--vi-tag-remove-size, #{func.to-rem(16px)});
+    height: var(--vi-tag-remove-size, #{func.to-rem(16px)});
+    min-width: var(--vi-tag-remove-size, #{func.to-rem(16px)});
     padding: 0;
     border-radius: 50%;
     margin-inline-start: 2px;
@@ -433,7 +416,7 @@
     background: transparent;
     border: none;
     color: inherit;
-    transition: var(--vi-tag-transition);
+    transition: var(--vi-tag-transition, all 150ms cubic-bezier(0.4, 0, 0.2, 1));
     flex-shrink: 0;
     line-height: 1;
 

package/components/_tooltip.scss

@@ -1,14 +1,16 @@
 @use '../styles/variables' as tokens;
 
-$vi-tooltip-background: var(--vi-tooltip-background, tokens.$layer-inverse);
-$vi-tooltip-color: var(--vi-tooltip-color, tokens.$text-primary-inverse);
-$vi-tooltip-font-size: var(--vi-tooltip-font-size, 12px);
-$vi-tooltip-border-radius: var(--vi-tooltip-border-radius, 4px);
-$vi-tooltip-padding: var(--vi-tooltip-padding, 6px 10px);
+$vi-tooltip-background: var(--vi-tooltip-background, #{tokens.$layer-inverse});
+$vi-tooltip-color: var(--vi-tooltip-color, #{tokens.$text-primary-inverse});
+$vi-tooltip-font-size: var(--vi-tooltip-font-size, #{tokens.$font-size-xs});
+$vi-tooltip-border-radius: var(--vi-tooltip-border-radius, #{tokens.$border-radius-sm});
+// Padding: 6px vertical is between $spacing-unit (4px) and $spacing-xs (8px); kept as-is for visual compactness
+$vi-tooltip-padding: var(--vi-tooltip-padding, #{tokens.$spacing-unit} #{tokens.$spacing-xs});
 $vi-tooltip-max-width: var(--vi-tooltip-max-width, 240px);
+// Arrow size 6px is not on the standard grid; kept explicit as it is a geometric value
 $vi-tooltip-arrow-size: var(--vi-tooltip-arrow-size, 6px);
-$vi-tooltip-z-index: var(--vi-tooltip-z-index, tokens.$tooltip-z-index);
-$vi-tooltip-shadow: var(--vi-tooltip-shadow, tokens.$shadow-md);
+$vi-tooltip-z-index: var(--vi-tooltip-z-index, #{tokens.$tooltip-z-index});
+$vi-tooltip-shadow: var(--vi-tooltip-shadow, #{tokens.$shadow-md});
 
 .tooltip-panel {
   position: fixed;
@@ -22,7 +24,7 @@ $vi-tooltip-shadow: var(--vi-tooltip-shadow, tokens.$shadow-md);
   background: transparent;
   padding: 0;
   overflow: visible;
-  font-family: tokens.$font-family-base;
+  font-family: var(--vi-tooltip-font-family, #{tokens.$font-family-base});
 
   &[popover]:popover-open {
     display: block;

package/components/index.scss

@@ -0,0 +1 @@
+@forward 'progress';