@seams/wallet 0.15.2 → 0.15.4

package/dist/.build-inputs.sha256

@@ -1 +1 @@
-ddf48f42cd621dcb4ca886033691a26d6514c752cd4c1a91ef741c8b03ad1ab6
+93b1ef116ecd8e93d9fe147324f06212aa3982133323ca33aa407d5e80a19d96

package/dist/esm/react/components/AccountMenuButton/AuthenticationMethodRow.js

@@ -1,6 +1,6 @@
 import TouchIcon from "./icons/TouchIcon.js";
-import { MailIcon } from "./icons/MailIcon.js";
 import { HoverArrowIcon } from "./icons/HoverArrowIcon.js";
+import { MailIcon } from "./icons/MailIcon.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/AuthenticationMethodRow.tsx

package/dist/esm/react/components/AccountMenuButton/MenuItem.js

@@ -1,3 +1,4 @@
+import { HoverArrowIcon } from "./icons/HoverArrowIcon.js";
 import { forwardRef, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/MenuItem.tsx
@@ -35,17 +36,7 @@ const MenuItem = memo(forwardRef(({ item, onClose, className, style, isHighlight
 					children: item.description
 				})]
 			}),
-			!item.disabled ? /* @__PURE__ */ jsx("svg", {
-				className: "seams-account-menu-chevron",
-				width: "16",
-				height: "16",
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "1.5",
-				"aria-hidden": "true",
-				children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
-			}) : null
+			!item.disabled ? /* @__PURE__ */ jsx(HoverArrowIcon, {}) : null
 		]
 	});
 }));

package/dist/esm/react/components/AccountMenuButton/ProfileDropdown.css

@@ -18,6 +18,8 @@
   --seams-expander-surface: var(--seams-colors-surface2);
 }
 .seams-profile-dropdown-menu .seams-dropdown-menu-item {
+  position: relative;
+  isolation: isolate;
   min-height: 40px;
   padding: 6px 0;
   gap: 10px;
@@ -57,9 +59,23 @@
 .seams-profile-dropdown-menu .seams-dropdown-menu-item-content {
   flex: 1;
 }
-.seams-account-menu-chevron {
-  color: var(--seams-colors-textSecondary);
-  flex-shrink: 0;
+.seams-profile-dropdown-menu .seams-dropdown-menu-item > .seams-hover-arrow {
+  margin-inline-end: 4px;
+}
+/* The hover shade bleeds past the row edges so the icons and labels stay
+   aligned with the group headings. */
+.seams-profile-dropdown-menu .seams-dropdown-menu-item:not(.seams-lock-menu-item)::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset: 1px -10px;
+  border-radius: var(--seams-shape-item, 10px);
+  background: var(--seams-colors-surface2);
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+.seams-profile-dropdown-menu .seams-dropdown-menu-item:focus-visible::before {
+  opacity: 1;
 }
 .seams-profile-dropdown-menu .seams-lock-menu-item {
   border: 1px solid var(--seams-colors-borderPrimary);
@@ -72,9 +88,19 @@
 }
 @media (hover: hover) {
   .seams-profile-dropdown-menu .seams-dropdown-menu-item:not(:disabled):hover {
-    color: var(--seams-colors-textSecondary);
     background: transparent;
   }
+  .seams-profile-dropdown-menu .seams-dropdown-menu-item:not(:disabled):hover::before {
+    opacity: 1;
+  }
+  .seams-profile-dropdown-menu .seams-lock-menu-item:not(:disabled):hover {
+    background: var(--seams-colors-surface2);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .seams-profile-dropdown-menu .seams-dropdown-menu-item::before {
+    transition: none;
+  }
 }
 
 @media (pointer: coarse) {

package/dist/esm/react/components/AccountMenuButton/Web3AuthProfileButton.css

@@ -284,6 +284,9 @@
 .seams-account-method-button > div {
   flex: 1;
 }
+.seams-account-method-button > .seams-hover-arrow {
+  margin-inline-end: 2px;
+}
 .seams-account-method-button strong {
   font-size: 15px;
   font-weight: 500;
@@ -294,47 +297,9 @@
   color: var(--seams-colors-textSecondary);
   font-size: 12px;
 }
-.seams-account-method-button > .seams-hover-arrow {
-  flex: 0 0 auto;
-  margin-inline-end: 2px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-  color: var(--seams-colors-textSecondary);
-  transition: color 140ms ease;
-}
-.seams-hover-arrow-line {
-  opacity: 0;
-  filter: blur(2px);
-  transform: scaleX(0.45);
-  transform-origin: right center;
-  transition:
-    opacity 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
-    filter 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
-    transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-.seams-hover-arrow-tip {
-  transition: transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-.seams-account-method-button:hover > .seams-hover-arrow,
-.seams-account-method-button:focus-visible > .seams-hover-arrow {
-  color: var(--seams-colors-textPrimary);
-}
-.seams-account-method-button:hover .seams-hover-arrow-line,
-.seams-account-method-button:focus-visible .seams-hover-arrow-line {
-  opacity: 1;
-  filter: blur(0);
-  transform: scaleX(1);
-}
-.seams-account-method-button:hover .seams-hover-arrow-tip,
-.seams-account-method-button:focus-visible .seams-hover-arrow-tip {
-  transform: translateX(3px);
-}
 @media (prefers-reduced-motion: reduce) {
   .seams-account-method-button::before,
-  .seams-account-method-button .seams-account-avatar,
-  .seams-hover-arrow-line,
-  .seams-hover-arrow-tip {
+  .seams-account-method-button .seams-account-avatar {
     transition: none;
   }
 }

package/dist/esm/react/components/AccountMenuButton/icons/HoverArrowIcon.css

@@ -0,0 +1,45 @@
+/* HoverArrowIcon: a chevron that grows a shaft (">" to "->") when its
+   direct parent is hovered or focused from the keyboard. */
+
+.seams-hover-arrow {
+  flex: 0 0 auto;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  color: var(--seams-colors-textSecondary);
+  transition: color 140ms ease;
+}
+.seams-hover-arrow-line {
+  opacity: 0;
+  filter: blur(2px);
+  transform: scaleX(0.45);
+  transform-origin: right center;
+  transition:
+    opacity 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
+    filter 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
+    transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.seams-hover-arrow-tip {
+  transition: transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+:hover > .seams-hover-arrow,
+:focus-visible > .seams-hover-arrow {
+  color: var(--seams-colors-textPrimary);
+}
+:hover > .seams-hover-arrow .seams-hover-arrow-line,
+:focus-visible > .seams-hover-arrow .seams-hover-arrow-line {
+  opacity: 1;
+  filter: blur(0);
+  transform: scaleX(1);
+}
+:hover > .seams-hover-arrow .seams-hover-arrow-tip,
+:focus-visible > .seams-hover-arrow .seams-hover-arrow-tip {
+  transform: translateX(3px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .seams-hover-arrow,
+  .seams-hover-arrow-line,
+  .seams-hover-arrow-tip {
+    transition: none;
+  }
+}

package/dist/esm/react/components/AccountMenuButton/icons/HoverArrowIcon.js

@@ -1,8 +1,9 @@
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import "./HoverArrowIcon.css";
 //#region src/react/components/AccountMenuButton/icons/HoverArrowIcon.tsx
-/** A chevron that grows a shaft on its parent's hover (">" to "->"). The
-* parent row owns the hover selectors in Web3AuthProfileButton.css. */
+/** A chevron that grows a shaft on its parent's hover (">" to "->"). Place it
+* as a direct child of the row that triggers it (HoverArrowIcon.css). */
 function HoverArrowIcon({ size = 12 }) {
 	return /* @__PURE__ */ jsxs("svg", {
 		className: "seams-hover-arrow",

package/dist/esm/react/styles/styles.css

@@ -323,6 +323,8 @@
   --seams-expander-surface: var(--seams-colors-surface2);
 }
 .seams-profile-dropdown-menu .seams-dropdown-menu-item {
+  position: relative;
+  isolation: isolate;
   min-height: 40px;
   padding: 6px 0;
   gap: 10px;
@@ -362,9 +364,23 @@
 .seams-profile-dropdown-menu .seams-dropdown-menu-item-content {
   flex: 1;
 }
-.seams-account-menu-chevron {
-  color: var(--seams-colors-textSecondary);
-  flex-shrink: 0;
+.seams-profile-dropdown-menu .seams-dropdown-menu-item > .seams-hover-arrow {
+  margin-inline-end: 4px;
+}
+/* The hover shade bleeds past the row edges so the icons and labels stay
+   aligned with the group headings. */
+.seams-profile-dropdown-menu .seams-dropdown-menu-item:not(.seams-lock-menu-item)::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset: 1px -10px;
+  border-radius: var(--seams-shape-item, 10px);
+  background: var(--seams-colors-surface2);
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+.seams-profile-dropdown-menu .seams-dropdown-menu-item:focus-visible::before {
+  opacity: 1;
 }
 .seams-profile-dropdown-menu .seams-lock-menu-item {
   border: 1px solid var(--seams-colors-borderPrimary);
@@ -377,9 +393,19 @@
 }
 @media (hover: hover) {
   .seams-profile-dropdown-menu .seams-dropdown-menu-item:not(:disabled):hover {
-    color: var(--seams-colors-textSecondary);
     background: transparent;
   }
+  .seams-profile-dropdown-menu .seams-dropdown-menu-item:not(:disabled):hover::before {
+    opacity: 1;
+  }
+  .seams-profile-dropdown-menu .seams-lock-menu-item:not(:disabled):hover {
+    background: var(--seams-colors-surface2);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .seams-profile-dropdown-menu .seams-dropdown-menu-item::before {
+    transition: none;
+  }
 }
 
 @media (pointer: coarse) {
@@ -388,6 +414,52 @@
   }
 }
 
+/* HoverArrowIcon: a chevron that grows a shaft (">" to "->") when its
+   direct parent is hovered or focused from the keyboard. */
+
+.seams-hover-arrow {
+  flex: 0 0 auto;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  color: var(--seams-colors-textSecondary);
+  transition: color 140ms ease;
+}
+.seams-hover-arrow-line {
+  opacity: 0;
+  filter: blur(2px);
+  transform: scaleX(0.45);
+  transform-origin: right center;
+  transition:
+    opacity 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
+    filter 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
+    transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.seams-hover-arrow-tip {
+  transition: transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+:hover > .seams-hover-arrow,
+:focus-visible > .seams-hover-arrow {
+  color: var(--seams-colors-textPrimary);
+}
+:hover > .seams-hover-arrow .seams-hover-arrow-line,
+:focus-visible > .seams-hover-arrow .seams-hover-arrow-line {
+  opacity: 1;
+  filter: blur(0);
+  transform: scaleX(1);
+}
+:hover > .seams-hover-arrow .seams-hover-arrow-tip,
+:focus-visible > .seams-hover-arrow .seams-hover-arrow-tip {
+  transform: translateX(3px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .seams-hover-arrow,
+  .seams-hover-arrow-line,
+  .seams-hover-arrow-tip {
+    transition: none;
+  }
+}
+
 /* TouchIcon specific styles and animations */
 
 .seams-fingerprint-icon path {
@@ -1001,6 +1073,9 @@
 .seams-account-method-button > div {
   flex: 1;
 }
+.seams-account-method-button > .seams-hover-arrow {
+  margin-inline-end: 2px;
+}
 .seams-account-method-button strong {
   font-size: 15px;
   font-weight: 500;
@@ -1011,47 +1086,9 @@
   color: var(--seams-colors-textSecondary);
   font-size: 12px;
 }
-.seams-account-method-button > .seams-hover-arrow {
-  flex: 0 0 auto;
-  margin-inline-end: 2px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-  color: var(--seams-colors-textSecondary);
-  transition: color 140ms ease;
-}
-.seams-hover-arrow-line {
-  opacity: 0;
-  filter: blur(2px);
-  transform: scaleX(0.45);
-  transform-origin: right center;
-  transition:
-    opacity 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
-    filter 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
-    transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-.seams-hover-arrow-tip {
-  transition: transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-.seams-account-method-button:hover > .seams-hover-arrow,
-.seams-account-method-button:focus-visible > .seams-hover-arrow {
-  color: var(--seams-colors-textPrimary);
-}
-.seams-account-method-button:hover .seams-hover-arrow-line,
-.seams-account-method-button:focus-visible .seams-hover-arrow-line {
-  opacity: 1;
-  filter: blur(0);
-  transform: scaleX(1);
-}
-.seams-account-method-button:hover .seams-hover-arrow-tip,
-.seams-account-method-button:focus-visible .seams-hover-arrow-tip {
-  transform: translateX(3px);
-}
 @media (prefers-reduced-motion: reduce) {
   .seams-account-method-button::before,
-  .seams-account-method-button .seams-account-avatar,
-  .seams-hover-arrow-line,
-  .seams-hover-arrow-tip {
+  .seams-account-method-button .seams-account-avatar {
     transition: none;
   }
 }

package/dist/esm/react/styles.css

@@ -4,6 +4,7 @@
 @import './components/AccountMenuButton/ExportKeysSection.css';
 @import './components/AccountMenuButton/MenuItem.css';
 @import './components/AccountMenuButton/ProfileDropdown.css';
+@import './components/AccountMenuButton/icons/HoverArrowIcon.css';
 @import './components/AccountMenuButton/icons/TouchIcon.css';
 @import './components/AccountMenuButton/TransactionSettingsSection.css';
 @import './components/AccountMenuButton/UserAccountButton.css';

package/dist/public/headers.manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "packageName": "@seams/wallet",
-  "packageVersion": "0.15.2",
+  "packageVersion": "0.15.4",
   "assetRoot": "dist/public",
   "routeClasses": [
     {

package/dist/public/wallet-assets.manifest.json

@@ -1,14 +1,14 @@
 {
   "schemaVersion": 1,
   "packageName": "@seams/wallet",
-  "packageVersion": "0.15.2",
+  "packageVersion": "0.15.4",
   "assetRoot": "dist/public",
   "sdkBasePath": "/sdk",
   "walletServicePath": "/wallet-service",
   "headersManifest": "headers.manifest.json",
   "versionSkewContract": {
     "kind": "wallet_iframe_protocol_handshake",
-    "packageVersion": "0.15.2",
+    "packageVersion": "0.15.4",
     "protocolVersion": "16.0.0",
     "readyPayloadField": "protocolVersion",
     "failureMode": "typed_error",

package/dist/public/wallet-service/index.html

@@ -5,14 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Web3Authn Wallet Service</title>
     <!-- Surface styles are external so strict CSP can keep style-src 'self' -->
-    <link rel="stylesheet" href="/sdk/wallet-ui.css?v=0.15.2" />
+    <link rel="stylesheet" href="/sdk/wallet-ui.css?v=0.15.4" />
     <!-- Minimal shims some ESM bundles expect (externalized to enable strict CSP) -->
-    <script src="/sdk/wallet-shims.js?v=0.15.2"></script>
+    <script src="/sdk/wallet-shims.js?v=0.15.4"></script>
     <!-- Hint the browser to fetch the host script earlier -->
-    <link rel="modulepreload" href="/sdk/wallet-iframe-host-runtime.js?v=0.15.2" crossorigin>
+    <link rel="modulepreload" href="/sdk/wallet-iframe-host-runtime.js?v=0.15.4" crossorigin>
   </head>
   <body>
     <!-- sdkBasePath points to the SDK root (e.g. '/sdk'). Load the host directly. -->
-    <script type="module" src="/sdk/wallet-iframe-host-runtime.js?v=0.15.2"></script>
+    <script type="module" src="/sdk/wallet-iframe-host-runtime.js?v=0.15.4"></script>
   </body>
 </html>

package/dist/types/wallet/src/react/components/AccountMenuButton/icons/HoverArrowIcon.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-/** A chevron that grows a shaft on its parent's hover (">" to "->"). The
- * parent row owns the hover selectors in Web3AuthProfileButton.css. */
+import './HoverArrowIcon.css';
+/** A chevron that grows a shaft on its parent's hover (">" to "->"). Place it
+ * as a direct child of the row that triggers it (HoverArrowIcon.css). */
 export declare function HoverArrowIcon({ size }: {
     size?: number;
 }): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seams/wallet",
-  "version": "0.15.2",
+  "version": "0.15.4",
   "type": "module",
   "description": "Seams web and runtime TypeScript SDK for NEAR and EVM-family wallets",
   "main": "./dist/esm/index.js",