@eaera-com/eaera-widgets-v2 0.1.76 → 0.1.78

package/dist/design-system/components/_button.scss

@@ -13,19 +13,11 @@
 //   is-ghost=yes  → :ghost="true"  → adds .is-ghost (custom prop)
 //
 // Sizes (Figma):
-//   sm → h=24px  px=6px   gap=4px  icon=12px  radius=corner/xs(6px)   typo=label/md
-//   md → h=32px  px=8px   gap=4px  icon=16px  radius=corner/sm(8px)   typo=label/lg  [default]
-//   lg → h=40px  px=12px  gap=6px  icon=16px  radius=corner/md(12px)  typo=label/lg
-//   xl → h=48px  px=16px  gap=8px  icon=20px  radius=corner/md(12px)  typo=title/md
+//   sm → h=24px  px=8px   gap=4px  radius=corner/xs(4px)   icon=16px  typo=label/md
+//   md → h=32px  px=12px  gap=4px  radius=corner/sm(8px)   icon=20px  typo=label/lg  [default]
+//   lg → h=40px  px=16px  gap=8px  radius=corner/md(12px)  icon=20px  typo=label/lg
 //
-// States (Figma): default → hover → pressed, disabled = opacity-50 trên cùng màu
-//   solid: bg+border = action/{type}-default → -hover → -pressed
-//   plain: transparent bg, border stays, hover/pressed = subtle bg
-//   ghost: transparent bg+border, text stays, hover/pressed = subtle bg
-//
-// Extension color (success):
-//   Không có trong Figma UI Kit — map local theo green palette tokens
-//   (500→600→700), dùng chung pattern solid/plain/ghost/link của core.
+// Disabled: opacity-50 on same colors (Figma: is-disabled = opacity 0.5)
 // ============================================================================
 
 @use "../themes/aurora/typography/typography-utils" as typo;
@@ -126,7 +118,7 @@
   @include typo.label-lg; // 14px / 600 / 20px lh / 0.1px tracking
 
   height: var(--er-control-height-md); // Figma: control-height/md
-  padding: 0 var(--er-shape-spacing-100) !important; // Figma: md px=8px, override Element's default padding
+  padding: 0 var(--er-shape-spacing-100) !important; // Figma: shape/spacing/md (16px) + override Element's default padding
   gap: var(--er-shape-spacing-50);
   border-radius: var(--er-shape-corner-100); // Figma: shape/corner/sm
   box-shadow: none !important;
@@ -140,8 +132,8 @@
   }
 
   svg {
-    width: var(--er-shape-spacing-200); // Figma: icon md/lg = 16px
-    height: var(--er-shape-spacing-200);
+    width: var(--er-control-height-xs);
+    height: var(--er-control-height-xs);
   }
 
   // ─────────────────────────────────────────────────────────────────────────
@@ -157,20 +149,20 @@
     border-radius: var(--er-shape-corner-75);
 
     svg {
-      width: var(--er-shape-spacing-150); // Figma: icon sm = 12px
-      height: var(--er-shape-spacing-150);
+      width: var(--er-shape-spacing-200);
+      height: var(--er-shape-spacing-200);
     }
   }
 
-  // LG — Figma: h=40px, px=12px, gap=6px, icon=16px, radius=corner/md(12px)
+  // LG — Figma: h=40px, px=12px, gap=8px, radius=corner/md(12px)
   &.lg {
     height: var(--er-control-height-lg);
-    padding: 0 var(--er-shape-spacing-150) !important;
-    gap: var(--er-shape-spacing-75);
+    padding: 0 var(--er-shape-spacing-200) !important;
+    gap: var(--er-shape-spacing-100);
     border-radius: var(--er-shape-corner-150);
 
-    > span {
-      gap: var(--er-shape-spacing-75);
+    > span { 
+      gap: var(--er-shape-spacing-100);
     }
   }
 
@@ -187,8 +179,8 @@
     }
 
     svg {
-      width: var(--er-shape-spacing-250); // Figma: icon xl = 20px
-      height: var(--er-shape-spacing-250);
+      width: var(--er-control-height-sm);
+      height: var(--er-control-height-sm);
     }
   }
 
@@ -197,18 +189,18 @@
   // ─────────────────────────────────────────────────────────────────────────
 
   // ── PRIMARY ──────────────────────────────────────────────────────────────
-  // Figma: type=primary (bg map theo token --er-primary-* của theme active)
-  // Default: bg=action/primary-default  text=text/on-action
-  // Hover:   bg=action/primary-hover
-  // Pressed: bg=action/primary-pressed
+  // Figma: type=primary
+  // Default: bg=action/primary-default(#3b82f6)  text=text/on-action(#fafafa)
+  // Hover:   bg=action/primary-hover(#2563eb)
+  // Pressed: bg=action/primary-pressed(#1d4ce0)
   // Disabled: same colors + opacity-50
   &.primary {
     @include btn-solid(var(--er-action-primary-default), var(--er-action-primary-hover), var(--er-action-primary-pressed), var(--er-text-on-action));
 
     // Plain — Figma: type=primary is-plain=yes
-    // Default: transparent bg  border=border/brand-subtle  text=action/primary-default
-    // Hover:   bg=action/primary-subtle-hover  border stays
-    // Pressed: bg=action/primary-subtle-pressed  border stays
+    // Default: transparent bg  border=border/brand-subtle(#93c5fd)  text=action/primary-default
+    // Hover:   bg=action/primary-subtle-hover(#dbeafe)  border stays
+    // Pressed: bg=action/primary-subtle-pressed(#bfdbfe)  border stays
     &.is-plain {
       @include btn-plain(
         var(--er-border-brand-subtle),
@@ -220,8 +212,8 @@
 
     // Ghost — Figma: type=primary is-ghost=yes
     // Default: transparent bg  no border  text=action/primary-default
-    // Hover:   bg=action/primary-subtle-hover  text stays
-    // Pressed: bg=action/primary-subtle-pressed  text stays
+    // Hover:   bg=action/primary-subtle-hover(#dbeafe)  text stays
+    // Pressed: bg=action/primary-subtle-pressed(#bfdbfe)  text stays
     &.is-ghost {
       @include btn-ghost(var(--er-action-primary-default), var(--er-action-primary-subtle-hover), var(--er-action-primary-subtle-pressed));
     }
@@ -229,9 +221,9 @@
 
   // ── DANGER ───────────────────────────────────────────────────────────────
   // Figma: type=danger
-  // Default: bg=action/danger-default(#dc2626)  text=text/on-action(#fafafa)
-  // Hover:   bg=action/danger-hover(#b91c1c)
-  // Pressed: bg=action/danger-pressed(#9f1d1d)
+  // Default: bg=action/danger-default(#ef4444)  text=text/on-action(#fafafa)
+  // Hover:   bg=action/danger-hover(#dc2626)
+  // Pressed: bg=action/danger-pressed(#b91c1c)
   &.danger {
     @include btn-solid(var(--er-action-danger-default), var(--er-action-danger-hover), var(--er-action-danger-pressed), var(--er-text-on-action));
 
@@ -280,40 +272,46 @@
     }
   }
 
-  // ── SUCCESS (local extension — green scale) ──────────────────────────────
-  // Default: bg=action/success-default  text=text/on-action
-  // Hover:   bg=action/success-hover
-  // Pressed: bg=action/success-pressed
+  // ── SUCCESS ──────────────────────────────────────────────────────────────
+  // Not in Figma UI Kit — local extension (tokens mirror danger).
+  // Default: bg=action/success-default(#10b981)  text=text/on-action(#fafafa)
+  // Hover:   bg=action/success-hover(#059669)
+  // Pressed: bg=action/success-pressed(#047857)
   &.success {
     @include btn-solid(var(--er-action-success-default), var(--er-action-success-hover), var(--er-action-success-pressed), var(--er-text-on-action));
 
-    // Plain — transparent bg  border=border/success-subtle  text=text/success
-    // Hover/Pressed: bg=action/success-subtle-*, border stays
+    // Plain — local extension, mirrors danger plain
+    // Default: transparent bg  border=border/success-subtle  text=text/success(#10b981)
+    // Hover:   bg=action/success-subtle-hover  border stays
+    // Pressed: bg=action/success-subtle-pressed  border stays
     &.is-plain {
       @include btn-plain(var(--er-border-success-subtle), var(--er-text-success), var(--er-action-success-subtle-hover), var(--er-action-success-subtle-pressed));
     }
 
-    // Ghost — transparent bg, no border, text stays
+    // Ghost — local extension, mirrors danger ghost
+    // Default: transparent bg  no border  text=text/success(#10b981)
+    // Hover:   bg=action/success-subtle-hover  text stays
+    // Pressed: bg=action/success-subtle-pressed  text stays
     &.is-ghost {
       @include btn-ghost(var(--er-text-success), var(--er-action-success-subtle-hover), var(--er-action-success-subtle-pressed));
     }
 
-    // Link — renders as a success text link (unchanged behavior)
+    // Link — renders as a primary text link (unchanged behavior)
     &.is-link {
-      color: var(--er-text-success) !important;
+      color: var(--er-action-primary-default) !important;
 
       &:hover:not(:disabled):not(.is-disabled) {
-        color: var(--er-action-success-hover) !important;
+        color: var(--er-action-primary-hover) !important;
       }
 
       &:active:not(:disabled):not(.is-disabled) {
-        color: var(--er-action-success-pressed) !important;
+        color: var(--er-action-primary-pressed) !important;
       }
 
       &:disabled,
       &.is-disabled {
         opacity: 0.5;
-        color: var(--er-text-success) !important;
+        color: var(--er-action-primary-default) !important;
       }
     }
   }

package/dist/design-system/components/_checkbox.scss

@@ -3,7 +3,7 @@
 // ============================================================================
 // CHECKBOX COMPONENT STYLES
 // ============================================================================
-// Source: Figma UI Kit Production - Checkboxes (node-id=40091:3351)
+// Source: Figma UI Kit Production - Checkboxes (node-id=40091:2987)
 // Based on: EaeraCheckbox.vue component (wraps Element Plus ElCheckbox)
 // IMPORTANT: Colors use Layer 3 tokens only
 //
@@ -11,27 +11,14 @@
 // .el-checkbox
 //   .el-checkbox__input           ← State classes here (.is-checked, .is-disabled, .is-indeterminate)
 //     .el-checkbox__inner         ← The checkbox box (visual)
-//       ::after                   ← The check icon (SVG mask, exact Figma glyph)
-//       ::before                  ← The indeterminate dash (SVG mask, exact Figma glyph)
+//       ::after                   ← The checkmark icon (border trick)
+//       ::before                  ← The indeterminate dash (border trick)
 //   .el-checkbox__label           ← Text label (sibling of __input)
-//
-// DISABLED (per Figma): opacity 0.5 is applied to the WHOLE component
-// (box + label) — label keeps its state color. Do not restyle label colors
-// per-disabled-state.
 // ============================================================================
 
-// ─────────────────────────────────────────────────────────────────────────────
-// ICONS — exact SVG glyphs exported from Figma (node 40091:3351)
-//   check: 11×8, stroke 2px, round caps
-//   minus: 10×2, stroke 2px, round caps
-// Rendered 1:1 via mask so strokes keep the designed 2px weight.
-// ─────────────────────────────────────────────────────────────────────────────
-$chk-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M10 1L3.8125 7L1 4.27273' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-$chk-minus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2' fill='none'%3E%3Cpath d='M1 1H9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-
 // ─────────────────────────────────────────────────────────────────────────────
 // MIXIN — reusable checkbox visual styles
-// Used by: .custom-checkbox, .custom-tree, tree-select, table, transfer
+// Used by: .custom-checkbox and .custom-tree (tree checkbox variant)
 // ─────────────────────────────────────────────────────────────────────────────
 @mixin checkbox-styles {
   height: unset;
@@ -51,37 +38,12 @@ $chk-minus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
       border-radius: var(--er-shape-corner-50);
       border: 1.5px solid var(--er-border-strong);
       background-color: transparent;
-
-      // Check icon: full-size SVG mask layer, animated scale(0) → scale(1)
-      &::after {
-        inset: 0;
-        margin: auto;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        border: none;
-        background-color: var(--er-icon-on-action);
-        -webkit-mask: $chk-check-icon center / 11px 8px no-repeat;
-        mask: $chk-check-icon center / 11px 8px no-repeat;
-        transform: scale(0);
-        transition: transform 0.15s ease-in 50ms;
-      }
-
-      // Indeterminate dash: hidden unless .is-indeterminate
-      &::before {
-        content: '';
-        display: none;
-      }
     }
 
     // Checked
     &.is-checked .el-checkbox__inner {
       background-color: var(--er-action-primary-default);
       border-color: var(--er-action-primary-default);
-
-      &::after {
-        transform: scale(1);
-      }
     }
 
     // Indeterminate
@@ -90,40 +52,29 @@ $chk-minus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
       border-color: var(--er-action-primary-default);
 
       &::before {
-        display: block;
-        inset: 0;
-        margin: auto;
-        width: 100%;
-        height: 100%;
+        border-color: var(--er-icon-on-action);
         background-color: var(--er-icon-on-action);
-        -webkit-mask: $chk-minus-icon center / 10px 2px no-repeat;
-        mask: $chk-minus-icon center / 10px 2px no-repeat;
-        transform: scale(1);
-        transition: transform 0.15s ease-in 50ms;
-      }
-
-      &::after {
-        transform: scale(0);
+        height: 2px;
+        left: 2.5px;
+        right: 2.5px;
+        top: 50%;
+        transform: translateY(-50%);
       }
     }
-  }
 
-  // Disabled — Figma: fade the WHOLE component (box + label); the label keeps
-  // its state color. Tree cancels this and fades the whole node instead.
-  &.is-disabled,
-  & .el-checkbox.is-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+    // Disabled
+    &.is-disabled {
+      opacity: 0.5;
+    }
   }
 
   // Hover
   &:hover:not(.is-disabled) {
-    .el-checkbox__input:not(.is-checked):not(.is-indeterminate) .el-checkbox__inner {
+    .el-checkbox__input:not(.is-checked) .el-checkbox__inner {
       border-color: var(--er-border-action-hover);
     }
 
-    .el-checkbox__input.is-checked .el-checkbox__inner,
-    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    .el-checkbox__input.is-checked .el-checkbox__inner {
       background-color: var(--er-action-primary-hover);
       border-color: var(--er-action-primary-hover);
     }
@@ -135,7 +86,6 @@ $chk-minus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
 
   // ───────────────────────────────────────────────────────────────────────
   // LABEL STYLING — state-specific colors per Figma
-  // Disabled keeps its state color (whole-component opacity handles the fade)
   // ───────────────────────────────────────────────────────────────────────
 
   // Default (unchecked): text-secondary
@@ -154,4 +104,14 @@ $chk-minus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
   .el-checkbox__input.is-indeterminate + .el-checkbox__label {
     color: var(--er-text-primary) !important;
   }
+
+  // Disabled (uncheck/indeterminate): text-disabled
+  .el-checkbox__input.is-disabled + .el-checkbox__label {
+    color: var(--er-text-muted) !important;
+  }
+
+  // Disabled + Checked: still blue but translucent (opacity-50)
+  .el-checkbox__input.is-disabled.is-checked + .el-checkbox__label {
+    color: var(--er-action-primary-default) !important;
+  }
 }

package/dist/design-system/components/_date-picker.scss

@@ -272,13 +272,13 @@
   border-radius: var(--er-shape-corner-150) !important;
   border: none !important;
 
-  .el-picker-panel *[slot='sidebar'] + .el-picker-panel__body,
+  .el-picker-panel *[slot="sidebar"] + .el-picker-panel__body,
   .el-picker-panel__sidebar + .el-picker-panel__body {
     margin-left: 130px !important;
   }
 
   .el-date-picker .el-picker-panel__content {
-    width: 248px;
+    width: 298px;
     margin: 0;
     padding: 0 var(--er-shape-spacing-150);
   }
@@ -289,11 +289,11 @@
   }
 
   .el-picker-panel {
-    width: 250px;
+    width: 300px;
     line-height: unset;
 
     &.el-date-range-picker {
-      width: 496px;
+      width: 596px;
 
       &.has-sidebar {
         width: fit-content;
@@ -445,7 +445,7 @@
 
         &.today .el-date-table-cell__text {
           &::after {
-            content: '';
+            content: "";
             display: block;
             width: var(--er-shape-spacing-50);
             height: var(--er-shape-spacing-50);
@@ -601,15 +601,15 @@
     }
 
     table {
-      width: unset;
+      width: 100%;
     }
 
     &.single-panel {
-      width: 250px;
-      max-width: 250px;
+      width: 300px;
+      max-width: 300px;
       .el-picker-panel__body {
-        min-width: 248px;
-        max-width: 248px;
+        min-width: 298px;
+        max-width: 298px;
       }
 
       .el-date-range-picker__time-header {
@@ -618,14 +618,14 @@
 
         .el-date-range-picker__editors-wrap {
           &::before {
-            content: 'Start';
+            content: "Start";
             @include typo.label-lg;
             color: var(--er-text-primary);
           }
 
           &.is-right {
             &::before {
-              content: 'End';
+              content: "End";
             }
           }
         }
@@ -696,8 +696,8 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    min-width: 496px;
-    max-width: 496px;
+    min-width: 596px;
+    max-width: 596px;
 
     .el-date-range-picker__content {
       flex: 1;

package/dist/design-system/components/_dropdown.scss

@@ -1,13 +1,3 @@
-// V1 trigger (EaeraDropdown) wraps consumer content in `.el-dropdown-link`.
-// EP's own outline suppressor targets `.el-dropdown-selfdefine`, which lands on
-// that wrapper span — not the focusable child (e.g. a header button). Without
-// this, opening the dropdown (hover or click) leaves the browser default focus
-// ring (`outline: 1px auto`) on the trigger. Scoped to `.el-dropdown-link` so
-// V2 (no wrapper) is untouched; menu items in the popper keep their focus.
-.custom-dropdown .el-dropdown-link :focus-visible {
-  outline: none;
-}
-
 .custom-dropdown__popper.el-popper {
   // Popper background — force dark surface in dark mode. EP defaults to
   // --el-bg-color-overlay (#ffffff) and wallet-selector-popper sets the inner
@@ -30,28 +20,20 @@
     box-shadow: none;
   }
 
-  // Item text + states — bound to EAERA tokens so the menu stays legible in
-  // dark mode. State colors follow the UI-KIT-CORE dropdown spec:
-  // bg surface-elevated (popper) · hover action-neutral-subtle-hover ·
-  // pressed action-neutral-subtle-pressed · disabled transparent + 50%.
+  // Item text + hover — EP items use `--el-text-color-regular` and a light
+  // hover fill, both unreadable on the dark panel. Bind to EAERA tokens so the
+  // menu stays legible in dark mode.
   .el-dropdown-menu__item {
     width: 100%;
     color: var(--el-text-color-regular, var(--er-text-secondary));
     border-radius: var(--er-shape-corner-150);
-
     &:not(.is-disabled):hover,
     &:not(.is-disabled):focus {
-      background-color: var(--er-action-neutral-subtle-hover);
+      background-color: var(--er-action-primary-subtle-hover);
       color: var(--el-text-primary);
     }
 
-    &:not(.is-disabled):active {
-      background-color: var(--er-action-neutral-subtle-pressed);
-    }
-
     &.is-disabled {
-      background-color: transparent;
-      opacity: 0.5;
       color: var(--el-text-disabled);
     }
 

package/dist/design-system/components/_input-number.scss

@@ -1,16 +1,5 @@
 @use '../themes/aurora/typography/typography-utils' as typo;
 
-// ─────────────────────────────────────────────────────────────────────────────
-// ICONS — exact SVG glyphs exported from Figma (Super-App Design, node
-// 8962-162657, `number input`): 16×16 icon box, glyph 10.67×10.67 centred,
-// stroke 1.33, round caps. Rendered 1:1 via mask (same technique as the
-// checkbox icons) so strokes keep the designed weight, and the Element Plus
-// default arrow svg inside the steppers is hidden (see `.el-icon` below —
-// this intentionally applies to every caller, slotted icons included).
-// ─────────────────────────────────────────────────────────────────────────────
-$inum-minus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.66667 8H13.33333' stroke='black' stroke-width='1.33333' stroke-linecap='round'/%3E%3C/svg%3E");
-$inum-plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 2.66667V13.33333M2.66667 8H13.33333' stroke='black' stroke-width='1.33333' stroke-linecap='round'/%3E%3C/svg%3E");
-
 // ─── Reusable base styles (can be included in other components) ───────────────
 @mixin input-number-base {
   border: 1px solid var(--er-border-default);
@@ -74,37 +63,16 @@ $inum-plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
     .el-icon {
       width: var(--er-control-height-sm);
       height: var(--er-control-height-sm);
-
-      // Figma −/+ glyphs replace the Element Plus default arrow svg.
-      // `background-color: currentColor` keeps the mask in sync with the
-      // button's existing color / hover / disabled logic.
-      svg {
-        display: none;
-      }
-
-      background-color: currentColor;
-      -webkit-mask: $inum-minus-icon center / 16px 16px no-repeat;
-      mask: $inum-minus-icon center / 16px 16px no-repeat;
     }
   }
 
   .el-input-number__decrease {
     order: 1;
     left: 0px;
-
-    .el-icon {
-      -webkit-mask-image: $inum-minus-icon;
-      mask-image: $inum-minus-icon;
-    }
   }
   .el-input-number__increase {
     right: 0px;
     order: 3;
-
-    .el-icon {
-      -webkit-mask-image: $inum-plus-icon;
-      mask-image: $inum-plus-icon;
-    }
   }
 
   &.is-disabled {
@@ -132,7 +100,7 @@ $inum-plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
   }
 }
 
-@mixin input-number-size($height, $button-size, $button-radius) {
+@mixin input-number-size($height, $button-size, $icon-size, $button-radius) {
   height: $height !important;
   min-height: $height !important;
 
@@ -141,6 +109,11 @@ $inum-plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
     border-radius: $button-radius;
     width: $button-size;
     height: $button-size;
+
+    svg {
+      width: $icon-size;
+      height: $icon-size;
+    }
   }
 }
 
@@ -205,6 +178,7 @@ $inum-plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
     @include input-number-size(
       var(--er-control-height-sm),
       var(--er-control-height-sm),
+      var(--er-control-height-xxs),
       var(--er-shape-corner-50)
     );
 
@@ -224,6 +198,7 @@ $inum-plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
     @include input-number-size(
       var(--er-control-height-md),
       var(--er-control-height-md),
+      var(--er-control-height-xs),
       var(--er-shape-corner-100)
     );
 
@@ -242,6 +217,7 @@ $inum-plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
     @include input-number-size(
       var(--er-control-height-lg),
       var(--er-control-height-lg),
+      var(--er-control-height-xs),
       var(--er-shape-corner-150)
     );
 

package/dist/design-system/components/_link.scss

@@ -24,8 +24,7 @@
 .custom-link.el-link {
   @include typo.label-md;
 
-  &.is-underline,
-  &.is-hover-underline {
+  &.is-underline {
     &::after {
       content: '';
       position: absolute;

package/dist/design-system/components/_popper.scss

@@ -18,7 +18,7 @@
       @content;
 
       &.is-selected {
-        .custom-popper__option-text {
+        .custom-popper__option-text{
           color: var(--er-text-brand);
         }
 
@@ -95,25 +95,6 @@
     }
   }
 
-  .custom-popper__option-prefix {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    color: var(--er-icon-secondary);
-  }
-
-  .custom-popper__option-text.has-description {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    line-height: 1.25;
-  }
-
-  .custom-popper__option-desc {
-    @include typo.body-sm;
-    color: var(--er-text-secondary);
-  }
-
   .custom-popper__option-checkbox {
     pointer-events: none;
   }
@@ -203,7 +184,7 @@
     }
   }
 
-  &.danger {
+  &.danger{
     li.is-selected {
       background-color: var(--er-action-danger-subtle-pressed,);
     }
@@ -219,7 +200,7 @@
       var(--er-shape-spacing-50),
       var(--er-shape-corner-75),
       var(--er-shape-spacing-50),
-      var(--er-shape-spacing-150) // Figma: sm icon 12px
+      var(--er-control-height-xxs)
     ) {
       @include typo.body-sm;
 
@@ -241,7 +222,7 @@
       var(--er-shape-spacing-75),
       var(--er-shape-corner-100),
       var(--er-shape-spacing-75),
-      var(--er-control-height-xxs) // Figma: md icon 16px
+      var(--er-control-height-xs)
     ) {
       > div {
         gap: var(--er-shape-spacing-100);
@@ -256,7 +237,7 @@
       var(--er-shape-spacing-75),
       var(--er-shape-corner-150),
       var(--er-shape-spacing-75),
-      var(--er-control-height-xxs) // Figma: lg icon 16px
+      var(--er-control-height-xs)
     ) {
       > div {
         gap: var(--er-shape-spacing-100);
@@ -271,10 +252,8 @@
       var(--er-shape-spacing-75),
       var(--er-shape-corner-150),
       var(--er-shape-spacing-75),
-      var(--er-control-height-xs) // Figma: xl icon 20px
+      var(--er-control-height-xs)
     ) {
-      @include typo.body-lg;
-
       > div {
         gap: var(--er-shape-spacing-100);
       }

package/dist/design-system/components/_radio.scss

@@ -26,6 +26,16 @@
     margin: 2px;
   }
 
+  .el-radio-button.is-active .el-radio-button__inner {
+    border: none;
+    background-color: var(--er-action-neutral-default);
+    color: var(--er-text-inverse);
+
+    &::after {
+      background-color: var(--er-surface-fixed-white);
+    }
+  }
+
   .el-radio__input.is-checked .el-radio__inner {
     border-color: var(--er-action-primary-default);
     background-color: var(--er-action-primary-default);

package/dist/design-system/components/_select.scss

@@ -76,6 +76,11 @@
     }
   }
 
+  .el-select__prefix,
+  .el-select__suffix {
+    color: var(--er-icon-secondary)
+  }
+
   &.sm {
     .el-select__selection,
     .el-select__selected-item {

package/dist/design-system/components/_table.scss

@@ -1,5 +1,5 @@
-@use '../themes/aurora/typography/typography-utils' as typo;
-@use 'checkbox' as chk;
+@use "../themes/aurora/typography/typography-utils" as typo;
+@use "checkbox" as chk;
 
 // ============================================================================
 // TABLE DENSITY TOKENS
@@ -18,10 +18,18 @@
 //   <eaera-table-v2 style="--er-table-row-min-height: 48px" />
 // ============================================================================
 :root {
-  --er-table-cell-padding-x: var(--er-shape-spacing-100); // 8px  — cell left/right
-  --er-table-header-cell-padding-y: var(--er-shape-spacing-150); // 12px — header top/bottom
-  --er-table-body-cell-padding-y: var(--er-shape-spacing-100); // 8px  — body top/bottom
-  --er-table-row-min-height: var(--er-shape-spacing-500); // 40px — data row height
+  --er-table-cell-padding-x: var(
+    --er-shape-spacing-100
+  ); // 8px  — cell left/right
+  --er-table-header-cell-padding-y: var(
+    --er-shape-spacing-150
+  ); // 12px — header top/bottom
+  --er-table-body-cell-padding-y: var(
+    --er-shape-spacing-100
+  ); // 8px  — body top/bottom
+  --er-table-row-min-height: var(
+    --er-shape-spacing-500
+  ); // 40px — data row height
   --er-table-row-divider: var(--er-border-subtle); // 1px  — row bottom divider
 }
 
@@ -46,8 +54,10 @@
 
   .el-table__body
     tr.hover-row
-    > td.el-table__cell:not(.el-table-fixed-column--left):not(.el-table-fixed-column--right) {
-    background-color: var(--er-surface-brand-subtle) !important;
+    > td.el-table__cell:not(.el-table-fixed-column--left):not(
+      .el-table-fixed-column--right
+    ) {
+    background-color: var(--er-action-primary-subtle-hover) !important;
   }
 
   // ─────────────────────────────────────────────────────────────────────
@@ -68,7 +78,8 @@
         th {
           @include typo.label-md;
           min-height: var(--er-table-row-min-height);
-          padding: var(--er-table-header-cell-padding-y) var(--er-table-cell-padding-x);
+          padding: var(--er-table-header-cell-padding-y)
+            var(--er-table-cell-padding-x);
           background-color: var(--er-surface-muted);
           color: var(--er-text-secondary);
           border-bottom: none;
@@ -310,7 +321,8 @@
             .cell {
               @include typo.body-md;
               color: var(--er-text-primary);
-              padding: var(--er-table-body-cell-padding-y) var(--er-table-cell-padding-x);
+              padding: var(--er-table-body-cell-padding-y)
+                var(--er-table-cell-padding-x);
             }
 
             &:first-child {
@@ -411,7 +423,7 @@
         position: relative;
 
         &::before {
-          content: '';
+          content: "";
           transition: background-color 0.25s 1ms;
           inset: 0;
           @extend %table-fixed-overlay;
@@ -468,7 +480,11 @@
   // LOADING STATE
   // ─────────────────────────────────────────────────────────────────────
 
-  .el-table__body-wrapper .el-table--enable-row-hover .el-table__body tr:hover > td {
+  .el-table__body-wrapper
+    .el-table--enable-row-hover
+    .el-table__body
+    tr:hover
+    > td {
     background-color: var(--er-action-primary-subtle-hover);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eaera-com/eaera-widgets-v2",
-  "version": "0.1.76",
+  "version": "0.1.78",
   "description": "Vue 3 UI widget library shared across Eaera CRM products",
   "keywords": [
     "vue",