@cldemo/ui-kit 1.0.17 → 1.1.0

package/buildLibs/styles/Mobile/ClSharePanel.css

@@ -0,0 +1,202 @@
+/* 遮罩层 */
+.panel-popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--cl-overlay, rgba(0, 0, 0, 0.5));
+  transition: opacity var(--popup-duration, 300ms) ease;
+}
+
+/* 弹出层面板 */
+.panel-popup {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  background: var(--cl-bg, #ffffff);
+  box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none; /* 隐藏滚动条（Firefox） */
+  -ms-overflow-style: none; /* 隐藏滚动条（老 Edge/IE），保留滚动能力 */
+  transition:
+    opacity var(--popup-duration, 300ms) ease,
+    transform var(--popup-duration, 300ms) ease;
+}
+
+/* 隐藏滚动条（Chrome / Safari / Edge），保留滚动能力 */
+.panel-popup::-webkit-scrollbar {
+  display: none;
+}
+
+/* 弹出位置 */
+.panel-popup--center {
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.panel-popup--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.panel-popup--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+.panel-popup--left {
+  top: 50%;
+  left: 0;
+  transform: translate3d(0, -50%, 0);
+}
+
+.panel-popup--right {
+  top: 50%;
+  right: 0;
+  transform: translate3d(0, -50%, 0);
+}
+
+/* 圆角 */
+.panel-popup--round.panel-popup--center {
+  border-radius: 16px;
+}
+
+.panel-popup--round.panel-popup--top {
+  border-radius: 0 0 16px 16px;
+}
+
+.panel-popup--round.panel-popup--bottom {
+  border-radius: 16px 16px 0 0;
+}
+
+.panel-popup--round.panel-popup--left {
+  border-radius: 0 16px 16px 0;
+}
+
+.panel-popup--round.panel-popup--right {
+  border-radius: 16px 0 0 16px;
+}
+
+/* 底部安全区适配（iOS 刘海屏） */
+.panel-popup--safe-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* 淡入淡出动画（center 面板与遮罩共用） */
+.popup-fade-enter-from,
+.popup-fade-leave-to {
+  opacity: 0;
+}
+
+/* 滑入动画（保留定位 transform 分量，如 left/right 的 translateY(-50%)） */
+.popup-slide-top-enter-from,
+.popup-slide-top-leave-to {
+  transform: translate3d(0, -100%, 0);
+}
+
+.popup-slide-bottom-enter-from,
+.popup-slide-bottom-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+.popup-slide-left-enter-from,
+.popup-slide-left-leave-to {
+  transform: translate3d(-100%, -50%, 0);
+}
+
+.popup-slide-right-enter-from,
+.popup-slide-right-leave-to {
+  transform: translate3d(100%, -50%, 0);
+}
+/* SharePanel 分享面板样式（面板定位/遮罩/过渡动画由 cl-popup 提供） */
+.panel-share-panel {
+  background: var(--cl-bg, #ffffff);
+}
+
+.sharepanel-title {
+  padding: 16px 16px 4px;
+  font-size: 14px;
+  color: var(--cl-text-primary, #323233);
+  text-align: center;
+  font-weight: 500;
+}
+
+.sharepanel-description {
+  padding: 4px 16px 12px;
+  font-size: 12px;
+  color: var(--cl-text-tertiary, #aaaaaa);
+  text-align: center;
+}
+
+/* 选项网格 */
+.sharepanel-options {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 8px 8px 12px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.sharepanel-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 33.33%;
+  padding: 12px 4px;
+  box-sizing: border-box;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.sharepanel-option:active {
+  opacity: 0.7;
+}
+
+.sharepanel-option-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: var(--cl-bg-subtle, #fafafa);
+  font-size: 20px;
+  margin-bottom: 6px;
+}
+
+.sharepanel-option-name {
+  font-size: 12px;
+  color: var(--cl-text-primary, #323233);
+}
+
+.sharepanel-option-desc {
+  font-size: 10px;
+  color: var(--cl-text-tertiary, #aaaaaa);
+  margin-top: 2px;
+}
+
+/* 取消按钮 */
+.sharepanel-cancel {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 14px;
+  color: var(--cl-text-primary, #323233);
+  text-align: center;
+  border: none;
+  border-top: 1px solid #f5f6f7;
+  background: transparent;
+  font-family: inherit;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.sharepanel-cancel:active {
+  opacity: 0.7;
+}

package/buildLibs/styles/Mobile/ClSidebarSelect.css

@@ -56,6 +56,11 @@
 }
 
 .sidebarselect-option-check {
+  display: flex;
+  align-items: center;
   color: var(--cl-primary, #1088f0);
   font-size: 16px;
+  /* line-height 必须锁 1：span 默认 line-height:normal 时行盒由字体度量决定（实测 18.41px），
+     高于图标本身（16px）与文字行盒（20px），会参与 flex 行高计算把选中行撑高 */
+  line-height: 1;
 }

package/buildLibs/styles/Mobile/ClSteps.css

@@ -23,18 +23,18 @@
   padding: 0 8px;
 }
 
-/* 连接线 */
-.steps-item:not(.steps-item--last)::after {
-  content: '';
+/* 连接线：水平态从本步圆圈右沿延伸至下一步圆圈左沿 */
+.steps-line {
   position: absolute;
   top: 16px;
-  left: 50%;
-  width: 100%;
+  left: calc(50% + 16px);
+  width: calc(100% - 32px);
   height: 2px;
+  margin-top: -1px;
   background: var(--steps-inactive-color);
 }
 
-.steps-item.steps-item--active:not(.steps-item--last)::after {
+.steps-item--active .steps-line {
   background: var(--steps-active-color);
 }
 
@@ -44,16 +44,20 @@
   text-align: left;
 }
 
-.panel-steps--vertical .steps-item:not(.steps-item--last)::after {
-  top: 32px;
-  left: 15px;
-  width: 2px;
-  height: calc(100% - 24px);
-  background: var(--steps-inactive-color);
+/* 垂直态：步间距 16px，末项不留空白 */
+.panel-steps--vertical .steps-item:not(.steps-item--last) {
+  padding-bottom: 16px;
 }
 
-.panel-steps--vertical .steps-item.steps-item--active:not(.steps-item--last)::after {
-  background: var(--steps-active-color);
+/* 垂直态：自本步圆圈下沿起，向下贯穿至下一步圆圈上沿（32px = 圆圈直径） */
+.panel-steps--vertical .steps-line {
+  top: 32px;
+  left: 24px;
+  width: 2px;
+  height: calc(100% - 32px);
+  margin-top: 0;
+  margin-left: -1px;
+  transform: none;
 }
 
 .steps-circle-wrap {
@@ -105,6 +109,12 @@
   font-weight: 500;
 }
 
+/* 垂直态：标题首行与序号圆圈垂直居中，视觉上同排（32px = 圆圈直径） */
+.panel-steps--vertical .steps-title {
+  min-height: 32px;
+  padding-top: calc((32px - 1lh) / 2);
+}
+
 .steps-desc {
   margin-top: 2px;
   font-size: 12px;

package/buildLibs/styles/Mobile/ClTextHighlight.css

@@ -7,8 +7,8 @@
 }
 
 .highlight-mark {
-  background: #fff1d0;
-  color: #f38a00;
+  background: var(--cl-highlight-bg, #ffff80);
+  color: var(--cl-highlight-text, #323233);
   padding: 0 2px;
   border-radius: 2px;
 }

package/buildLibs/styles/Mobile/__provide__/NotifyM.css

@@ -1,3 +1,4 @@
+
 /* NotifyM 消息通知样式 */
 .panel-notify-m {
   position: fixed;
@@ -14,6 +15,53 @@
   text-align: center;
   box-sizing: border-box;
   cursor: pointer;
+  /* 顶部贴边保持直角，底部两角收弧（12px：在单行 44px 高度上呈现明显弧线） */
+  border-radius: 0 0 12px 12px;
+  /* 上滑手势跟手位移与透明度：由内联 CSS 变量驱动，非拖拽期间取默认值；
+     本规则须排在 .notifym-fade-* 之前，离场动画的 transform/opacity 才能正常接管 */
+  transform: translateY(var(--notifym-drag-y, 0px));
+  opacity: var(--notifym-drag-opacity, 1);
+}
+
+/* 顶部安全区适配：刘海屏/状态栏区域留白，背景色仍铺满（通知从屏幕顶端垂下）；
+   桌面浏览器与手机壳演示环境 env 取 0，行为与未开启一致 */
+.panel-notify-m--safe-top {
+  padding-top: calc(10px + env(safe-area-inset-top, 0px));
+}
+
+/* 通知文本：左右对称留白，为右侧关闭图标让位的同时保持文本视觉居中 */
+.notifym-text {
+  padding: 0 44px;
+}
+
+/* 右侧关闭图标：绝对定位，不参与文本居中计算（与 Banner 关闭图标同款处理） */
+.panel-notify-m .notifym-close {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  font-size: 16px;
+  color: inherit;
+  cursor: pointer;
+}
+
+/* 安全区下关闭图标跟随内容区中点：含安全区的整条中点为 50%，内容区中点即 50% + 安全区 / 2 */
+.panel-notify-m--safe-top .notifym-close {
+  top: calc(50% + env(safe-area-inset-top, 0px) / 2);
+}
+
+/* 拖拽中：禁用过渡，保证跟手无迟滞 */
+.notifym-is-dragging {
+  transition: none;
+}
+
+/* 松手过渡：回弹或滑出，恢复过渡动画 */
+.notifym-is-rebounding {
+  transition: transform 200ms ease, opacity 200ms ease;
 }
 
 /* 类型配色 */
@@ -33,6 +81,7 @@
 }
 
 .panel-notify-m--warning {
+  /* 警示橙：Notify 局部色，与 --cl-warning 区分（更亮以适配深色通知条） */
   background: #ff976a;
   color: var(--cl-bg, #ffffff);
 }
@@ -51,5 +100,4 @@
 .notifym-fade-leave-to {
   transform: translateY(-100%);
   opacity: 0;
-}
-
+}

package/buildLibs/styles/Web/ClColorpicker.css

@@ -209,14 +209,13 @@
 
 .zoomInTop {
   animation-name: zoomInTop;
-  /* desc: 进入时长。与 zoomOutTop 同为 0.5s 时，因关键帧不对称
-     （zoomInTop 在 50% 即 opacity:1，zoomOutTop 在 80% 才 opacity:0），
-     实测展开 opacity 到 1 约 349ms、收起 opacity 到 0 约 400ms，视觉上接近。
-     如需展开更慢，调大本值（如 0.8s → 展开视觉约 0.5s）。 */
-  animation-duration: 0.5s;
+  /* desc: 进入时长。展开刻意快于收起（收起见 zoomOutTop），
+     不追求两者视觉等长：展开是操作后的即时反馈，慢会被感知为卡顿。
+     关键帧在 50% 即 opacity:1，故实际感知时长小于本值。 */
+  animation-duration: var(--cl-dropdown-enter-duration, 400ms);
   animation-fill-mode: both;
   transform-origin: center top;
-  animation-timing-function: ease-in;
+  animation-timing-function: ease-out;
 }
 
 .dropdownLayer-dropdown-up.zoomInTop {
@@ -238,7 +237,9 @@
 
 .zoomOutTop {
   animation-name: zoomOutTop;
-  animation-duration: 0.5s;
+  /* desc: 离开时长。略慢于展开，收尾更从容；
+     关键帧在 80% 即 opacity:0，故实际感知时长小于本值。 */
+  animation-duration: var(--cl-dropdown-leave-duration, 500ms);
   animation-fill-mode: both;
   transform-origin: center top;
   animation-timing-function: ease-in;

package/buildLibs/styles/Web/ClCropper.css

@@ -403,15 +403,6 @@
   color: inherit;
 }
 
-/* -- .fade -- */
-/* 已抽至 ../../CommonCss/fade.css（Modal 与 Tooltip 指令共用），
-   由 Index.vue / BaseTransition.vue 显式 import，此处不再重复定义 */
-
-/* -- .modal-open -- */
-.modal-open {
-  overflow: hidden;
-}
-
 /* -- .close -- */
 .close {
   float: right;
@@ -569,37 +560,6 @@ button.close {
 .overlay-fade-leave-from {
   opacity: 0.3;
 }
-/* Overlay 遮罩层样式 */
-.panel-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-/* 容器内定位模式（teleportTarget: self / teleport 目标容器环境）：
-   改为 absolute 铺满相对定位的父容器，避免 fixed 相对浏览器视口错位 */
-.panel-overlay-self {
-  position: absolute;
-}
-
-/* 遮罩淡入淡出（类名带 panel- 前缀，避免与 Modal 的 overlay-fade 全局冲突） */
-.panel-overlay-fade-enter-active,
-.panel-overlay-fade-leave-active {
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-.panel-overlay-fade-enter-from,
-.panel-overlay-fade-leave-to {
-  opacity: 0;
-}
-
-/* 锁定背景滚动：对目标容器（body 或 self/自定义挂载容器）加 overflow:hidden；body 场景与 Modal 共用该契约 */
-.modal-open {
-  overflow: hidden;
-}
 .cl-waves-ripple {
   position: absolute;
   border-radius: 50%;

package/buildLibs/styles/Web/ClCropperPreview.css

@@ -403,15 +403,6 @@
   color: inherit;
 }
 
-/* -- .fade -- */
-/* 已抽至 ../../CommonCss/fade.css（Modal 与 Tooltip 指令共用），
-   由 Index.vue / BaseTransition.vue 显式 import，此处不再重复定义 */
-
-/* -- .modal-open -- */
-.modal-open {
-  overflow: hidden;
-}
-
 /* -- .close -- */
 .close {
   float: right;
@@ -569,37 +560,6 @@ button.close {
 .overlay-fade-leave-from {
   opacity: 0.3;
 }
-/* Overlay 遮罩层样式 */
-.panel-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-/* 容器内定位模式（teleportTarget: self / teleport 目标容器环境）：
-   改为 absolute 铺满相对定位的父容器，避免 fixed 相对浏览器视口错位 */
-.panel-overlay-self {
-  position: absolute;
-}
-
-/* 遮罩淡入淡出（类名带 panel- 前缀，避免与 Modal 的 overlay-fade 全局冲突） */
-.panel-overlay-fade-enter-active,
-.panel-overlay-fade-leave-active {
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-.panel-overlay-fade-enter-from,
-.panel-overlay-fade-leave-to {
-  opacity: 0;
-}
-
-/* 锁定背景滚动：对目标容器（body 或 self/自定义挂载容器）加 overflow:hidden；body 场景与 Modal 共用该契约 */
-.modal-open {
-  overflow: hidden;
-}
 .cl-waves-ripple {
   position: absolute;
   border-radius: 50%;

package/buildLibs/styles/Web/ClDatetime.css

@@ -306,14 +306,13 @@
 
 .zoomInTop {
   animation-name: zoomInTop;
-  /* desc: 进入时长。与 zoomOutTop 同为 0.5s 时，因关键帧不对称
-     （zoomInTop 在 50% 即 opacity:1，zoomOutTop 在 80% 才 opacity:0），
-     实测展开 opacity 到 1 约 349ms、收起 opacity 到 0 约 400ms，视觉上接近。
-     如需展开更慢，调大本值（如 0.8s → 展开视觉约 0.5s）。 */
-  animation-duration: 0.5s;
+  /* desc: 进入时长。展开刻意快于收起（收起见 zoomOutTop），
+     不追求两者视觉等长：展开是操作后的即时反馈，慢会被感知为卡顿。
+     关键帧在 50% 即 opacity:1，故实际感知时长小于本值。 */
+  animation-duration: var(--cl-dropdown-enter-duration, 400ms);
   animation-fill-mode: both;
   transform-origin: center top;
-  animation-timing-function: ease-in;
+  animation-timing-function: ease-out;
 }
 
 .dropdownLayer-dropdown-up.zoomInTop {
@@ -335,7 +334,9 @@
 
 .zoomOutTop {
   animation-name: zoomOutTop;
-  animation-duration: 0.5s;
+  /* desc: 离开时长。略慢于展开，收尾更从容；
+     关键帧在 80% 即 opacity:0，故实际感知时长小于本值。 */
+  animation-duration: var(--cl-dropdown-leave-duration, 500ms);
   animation-fill-mode: both;
   transform-origin: center top;
   animation-timing-function: ease-in;
@@ -810,37 +811,6 @@
   transform: scale(0.75);
   transform-origin: center center;
 }
-/* Overlay 遮罩层样式 */
-.panel-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-/* 容器内定位模式（teleportTarget: self / teleport 目标容器环境）：
-   改为 absolute 铺满相对定位的父容器，避免 fixed 相对浏览器视口错位 */
-.panel-overlay-self {
-  position: absolute;
-}
-
-/* 遮罩淡入淡出（类名带 panel- 前缀，避免与 Modal 的 overlay-fade 全局冲突） */
-.panel-overlay-fade-enter-active,
-.panel-overlay-fade-leave-active {
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-.panel-overlay-fade-enter-from,
-.panel-overlay-fade-leave-to {
-  opacity: 0;
-}
-
-/* 锁定背景滚动：对目标容器（body 或 self/自定义挂载容器）加 overflow:hidden；body 场景与 Modal 共用该契约 */
-.modal-open {
-  overflow: hidden;
-}
 .cl-waves-ripple {
   position: absolute;
   border-radius: 50%;

package/buildLibs/styles/Web/ClDropdownMenu.css

@@ -208,14 +208,13 @@
 
 .zoomInTop {
   animation-name: zoomInTop;
-  /* desc: 进入时长。与 zoomOutTop 同为 0.5s 时，因关键帧不对称
-     （zoomInTop 在 50% 即 opacity:1，zoomOutTop 在 80% 才 opacity:0），
-     实测展开 opacity 到 1 约 349ms、收起 opacity 到 0 约 400ms，视觉上接近。
-     如需展开更慢，调大本值（如 0.8s → 展开视觉约 0.5s）。 */
-  animation-duration: 0.5s;
+  /* desc: 进入时长。展开刻意快于收起（收起见 zoomOutTop），
+     不追求两者视觉等长：展开是操作后的即时反馈，慢会被感知为卡顿。
+     关键帧在 50% 即 opacity:1，故实际感知时长小于本值。 */
+  animation-duration: var(--cl-dropdown-enter-duration, 400ms);
   animation-fill-mode: both;
   transform-origin: center top;
-  animation-timing-function: ease-in;
+  animation-timing-function: ease-out;
 }
 
 .dropdownLayer-dropdown-up.zoomInTop {
@@ -237,7 +236,9 @@
 
 .zoomOutTop {
   animation-name: zoomOutTop;
-  animation-duration: 0.5s;
+  /* desc: 离开时长。略慢于展开，收尾更从容；
+     关键帧在 80% 即 opacity:0，故实际感知时长小于本值。 */
+  animation-duration: var(--cl-dropdown-leave-duration, 500ms);
   animation-fill-mode: both;
   transform-origin: center top;
   animation-timing-function: ease-in;
@@ -322,6 +323,39 @@
   color: var(--cl-text-primary, #323233);
   font-weight: bold;
 }
+
+/* 键盘聚焦：与上方 hover 保持同一套视觉
+ *
+ * 焦点落在 li 上（li 带 tabindex，由 DropdownMenu 的 roving tabindex 调度），
+ * 而 hover 样式作用于 li 内部的 a/span，两者不是同一元素：
+ * 直接给 a 加 :focus-visible 不会命中（a 永远不获焦），
+ * 故用「li 聚焦 → 内部链接染色」的写法。
+ *
+ * 用 :focus-visible 而非 :focus：鼠标点击菜单项同样会让 li 聚焦，
+ * 那种情况已由 hover 表达，只有键盘导航才需要额外的焦点指示。
+ * li 自身不显示轮廓（outline），焦点指示由内部链接的背景与加粗承担。
+ */
+.panel-dropdown-menu
+  .dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown
+  > ul
+  > li:not(.dropdownMenu-item-disabled):focus-visible {
+  outline: none;
+}
+
+.panel-dropdown-menu
+  .dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown
+  > ul
+  > li:not(.dropdownMenu-item-disabled):focus-visible
+  > a,
+.panel-dropdown-menu
+  .dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown
+  > ul
+  > li:not(.dropdownMenu-item-disabled):focus-visible
+  > span {
+  background: var(--cl-primary-light, #eff8ff);
+  color: var(--cl-text-primary, #323233);
+  font-weight: bold;
+}
 .panel-dropdown-menu
   .dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown
   > ul
@@ -353,4 +387,53 @@
 }
 .panel-dropdown-menu .dropdownLayer-text-container > .dropdownLayer-text-render {
   flex: 1;
+}
+
+/* 悬停 / 键盘聚焦的文字加粗反馈
+ *
+ * 背景：本组件把触发区容器改成 border: none（见上方规则），而库内通用的状态反馈
+ * （List.css 里的 hover / :focus-visible → border-color）依赖边框染色，在此失效，
+ * 导致鼠标悬停与键盘选中都没有任何视觉反馈。
+ * 这里改用文字加粗作为替代载体，与其它组件的边框变色等价。
+ *
+ * 为什么用 text-shadow 模拟加粗，而不是 font-weight：
+ *   1. font-weight 加粗会改变字宽，触发区尺寸随之变化，周围元素被推挤产生布局抖动；
+ *      text-shadow 只增加描边光晕，不参与排版，尺寸完全不变。
+ *   2. 字重过渡需要字体提供中间档位，中文字体通常只有 400/700 两档，
+ *      中间值无法渲染，font-weight 过渡会跳变；text-shadow 可平滑过渡。
+ *
+ * 用 currentColor 而非固定色值：描边跟随当前文字色，使用方通过 className
+ * 传入任意文字色时都能一致加粗，不会跳变成某个固定颜色。
+ *
+ * 为什么加在文字节点而非容器：
+ *   1. 容器还包含箭头，加粗文字不应连带改变箭头（箭头另有 --cl-text-tertiary 语义色）；
+ *   2. text-shadow 若加在容器上，会作用于其内所有后代文本。
+ *
+ * hover 与 :focus-visible 共用同一套反馈：鼠标悬停与键盘选中应表达同一状态。
+ * :focus-visible 而非 :focus —— 鼠标点击会同时进入打开态，只有键盘导航才需要额外指示。
+ */
+.panel-dropdown-menu
+  .dropdownLayer-text:hover
+  .dropdownLayer-text-container
+  > .dropdownLayer-text-render,
+.panel-dropdown-menu
+  .dropdownLayer-text:focus-visible
+  .dropdownLayer-text-container
+  > .dropdownLayer-text-render,
+.panel-dropdown-menu .dropdownLayer-text:hover > span,
+.panel-dropdown-menu .dropdownLayer-text:focus-visible > span {
+  text-shadow:
+    0 0 0.6px currentColor,
+    0.3px 0 0 currentColor;
+}
+
+/* 文字节点承载加粗过渡：与容器 300ms 的既有节奏一致 */
+.panel-dropdown-menu .dropdownLayer-text > span,
+.panel-dropdown-menu .dropdownLayer-text-container > .dropdownLayer-text-render {
+  transition: text-shadow 200ms ease-in-out;
+}
+
+/* 键盘聚焦：压制外层 UA 原生焦点环，指示由上面的文字加粗承担 */
+.panel-dropdown-menu .dropdownLayer-text:focus-visible {
+  outline: none;
 }