@eaera-com/eaera-widgets-v2 0.1.75 → 0.1.77

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/eaera-widgets-v2.es.js

@@ -174,6 +174,7 @@ const Z5 = /* @__PURE__ */ s1({
     plain: { type: Boolean, default: !1 },
     link: { type: Boolean, default: !1 },
     ghost: { type: Boolean, default: !1 },
+    round: { type: Boolean, default: !1 },
     unsetWidth: { type: Boolean },
     isIconOnly: { type: Boolean, default: !1 }
   },
@@ -185,6 +186,7 @@ const Z5 = /* @__PURE__ */ s1({
       e.box && "is-box",
       !e.background && "no-background",
       e.ghost && "is-ghost",
+      e.round && "is-round",
       e.unsetWidth && "unset-width",
       e.isIconOnly && "is-icon-only"
     ]);
@@ -82938,7 +82940,7 @@ const MP1 = [
         footer: z(() => [
           o("div", bT1, [
             A(x, {
-              color: "secondary",
+              color: "contrast",
               onClick: u
             }, {
               default: z(() => [...C[2] || (C[2] = [
@@ -83552,7 +83554,7 @@ const MP1 = [
           }, null, 8, ["modelValue", "disabled"]),
           A(m(T1), {
             class: "custom-order-actions__button custom-order-actions__button--fill custom-order-actions__button--padded",
-            color: "error",
+            color: "danger",
             loading: m(n)[m(z4).Sell],
             disabled: m(c).disabled,
             onClick: t1[2] || (t1[2] = (q) => k(m(z4).Sell))
@@ -85243,7 +85245,7 @@ const b4 = /* @__PURE__ */ G6(tN1), X2 = {
             o("div", pN1, [
               A(G, {
                 class: "custom-trading-table__column-dialog-action-button",
-                color: "secondary",
+                color: "contrast",
                 onClick: m(c)
               }, {
                 default: z(() => [
@@ -90705,7 +90707,7 @@ const $q1 = (t) => typeof t == "object" && t !== null, c0 = (t, e) => $q1(t) &&
         footer: z(() => [
           o("div", Eq1, [
             A(c, {
-              color: "secondary",
+              color: "contrast",
               onClick: n[1] || (n[1] = (h) => s("close"))
             }, {
               default: z(() => [...n[5] || (n[5] = [
@@ -90792,7 +90794,7 @@ const $q1 = (t) => typeof t == "object" && t !== null, c0 = (t, e) => $q1(t) &&
         footer: z(() => [
           o("div", Wq1, [
             A(h, {
-              color: "secondary",
+              color: "contrast",
               onClick: i[1] || (i[1] = (v) => s("close"))
             }, {
               default: z(() => [...i[7] || (i[7] = [
@@ -91182,7 +91184,7 @@ const rK1 = { class: "grid grid-cols-2 gap-lg" }, nK1 = { class: "flex items-cen
               footer: z(() => [
                 A(z1, {
                   size: "sm",
-                  color: "secondary",
+                  color: "contrast",
                   background: !1,
                   class: "w-full",
                   onClick: m(d1)