@will-ui/vue 1.0.0

package/dist/theme/tokens/components/progress.css

@@ -0,0 +1,101 @@
+.w-progress {
+  --__size: var(--w-prop-progress-size, var(--w-progress-size, var(--w-size)));
+  --__color: var(--w-prop-progress-color, var(--w-progress-color, var(--w-color)));
+  --w-progress-fill: var(--__color);
+  --w-progress-thumb: var(--__color);
+  --w-progress-thumb-ring: color-mix(in srgb, var(--__color) var(--w-progress-thumb-ring-mix), transparent);
+  /* 默认对齐原 md：--w-size 40 → 轨道 4 / 激活 6 / 滑块 12 */
+  --__progress-h: calc(var(--__size) * var(--w-progress-h-ratio));
+  --__progress-h-active: calc(var(--__size) * var(--w-progress-h-active-ratio));
+  --__progress-thumb: calc(var(--__size) * var(--w-progress-thumb-ratio));
+
+  position: relative;
+  width: 100%;
+  /* 布局高度固定为激活态，hover 只加粗内部轨道，不撑开周围内容 */
+  height: var(--__progress-h-active);
+  background: transparent;
+  border-radius: 999px;
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: var(--__progress-h);
+    transform: translateY(-50%);
+    background: var(--w-progress-track);
+    border-radius: inherit;
+    pointer-events: none;
+    transition: height var(--w-progress-motion);
+  }
+
+  &:hover:not(.w-progress--disabled),
+  &.w-progress--dragging {
+    &::before {
+      height: var(--__progress-h-active);
+    }
+
+    & .w-progress__buffered,
+    & .w-progress__fill {
+      height: var(--__progress-h-active);
+    }
+
+    &.w-progress--has-thumb .w-progress__thumb {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  &.w-progress--disabled {
+    cursor: default;
+    opacity: var(--w-progress-disabled-opacity);
+    pointer-events: none;
+  }
+
+  & .w-progress__buffered,
+  & .w-progress__fill {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    height: var(--__progress-h);
+    transform: translateY(-50%);
+    border-radius: inherit;
+    pointer-events: none;
+    transition: height var(--w-progress-motion);
+    z-index: 1;
+  }
+
+  & .w-progress__buffered {
+    background: var(--w-progress-buffered);
+  }
+
+  & .w-progress__fill {
+    background: var(--w-progress-fill);
+  }
+
+  & .w-progress__thumb {
+    position: absolute;
+    /* 可走区间内缩锚点直径，0%/100% 时圆心仍在轨道内 */
+    left: calc(
+      var(--__progress-thumb) / 2 + (100% - var(--__progress-thumb)) *
+        var(--__progress, 0)
+    );
+    top: 50%;
+    z-index: 2;
+    width: var(--__progress-thumb);
+    height: var(--__progress-thumb);
+    border-radius: 50%;
+    background: var(--w-progress-thumb);
+    box-shadow: 0 0 0 3px var(--w-progress-thumb-ring);
+    transform: translate(-50%, -50%) scale(0.6);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity var(--w-progress-motion),
+      transform var(--w-progress-motion);
+  }
+}

package/dist/theme/tokens/components/radio.css

@@ -0,0 +1,183 @@
+@keyframes w-radio-pop {
+  0% {
+    transform: scale(0.45);
+    opacity: 0.5;
+  }
+  85% {
+    transform: scale(1.03);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.w-radio {
+  --__size: var(--w-prop-radio-size, var(--w-radio-size, var(--w-size)));
+  --__color: var(--w-prop-radio-color, var(--w-radio-color, var(--w-color)));
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-form-item-font-ratio)));
+  --__icon: clamp(
+    var(--w-ctrl-icon-size-min),
+    calc(var(--__size) * var(--w-radio-icon-ratio)),
+    var(--w-ctrl-icon-size-max)
+  );
+  --__pad-x: calc(var(--__size) * var(--w-radio-pad-x-ratio));
+  --__bg: var(--w-prop-radio-bg-color, var(--w-radio-bg-color, var(--w-bg-color)));
+  --__color-light-5: color-mix(
+    in srgb,
+    var(--__color) var(--w-radio-color-light-5-mix),
+    var(--__bg)
+  );
+  --__color-light-8: color-mix(
+    in srgb,
+    var(--__color) var(--w-radio-color-light-8-mix),
+    var(--__bg)
+  );
+  --w-radio-icon-gap: calc(var(--__size) * var(--w-radio-icon-gap-ratio));
+  --w-radio-item-gap: calc(var(--__size) * var(--w-radio-item-gap-ratio));
+  --w-radio-card-bg: var(--w-bg-color);
+  --w-icon-font-size: var(--__icon);
+
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  vertical-align: middle;
+  font-size: var(--__font);
+
+  &.w-radio-gap:not(:last-child) {
+    margin-right: var(--w-radio-item-gap);
+  }
+
+  &.w-radio-disabled {
+    cursor: not-allowed;
+  }
+
+  &:active:not(.w-radio-disabled):not(.w-radio-card) .w-radio-icon {
+    transform: scale(0.9);
+  }
+
+  &.w-radio-card {
+    padding: calc(var(--__size) * var(--w-radio-card-pad-y-ratio)) var(--__pad-x);
+    background-color: var(--w-radio-card-bg, var(--w-bg-color));
+    border-radius: var(--w-radius);
+    position: relative;
+    border: 1px solid transparent;
+    cursor: pointer;
+    overflow: hidden;
+    transition:
+      border-color var(--w-transition-time) var(--w-cubic-bezier-quick),
+      background-color var(--w-transition-time) var(--w-cubic-bezier-quick),
+      box-shadow var(--w-transition-time) var(--w-cubic-bezier-quick),
+      transform var(--w-transition-quick-time) var(--w-cubic-bezier-quick);
+
+    &:hover:not(.w-radio-card-disabled) {
+      border-color: var(--__color-light-5);
+    }
+
+    &:active:not(.w-radio-card-disabled) {
+      transform: scale(0.98);
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      border-width: calc(var(--__size) * 8 / 36);
+      border-style: solid;
+      border-color: transparent var(--__color) var(--__color) transparent;
+      transition: transform var(--w-transition-time) var(--w-cubic-bezier);
+      transform: translate(100%, 100%);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: calc(var(--__size) * 3 / 36);
+      right: calc(var(--__size) / 36);
+      width: calc(var(--__size) * 7 / 36);
+      height: calc(var(--__size) * 5 / 36);
+      border-left: calc(var(--__size) * 1.5 / 36) solid var(--w-on-color);
+      border-bottom: calc(var(--__size) * 1.5 / 36) solid var(--w-on-color);
+      transition: transform var(--w-transition-time) var(--w-cubic-bezier);
+      transform: rotate(-49deg) translate(100%, 100%);
+    }
+
+    &.w-radio-card-checked {
+      border-color: var(--__color);
+      box-shadow: var(--w-radio-card-checked-ring);
+
+      &::before {
+        transform: translate(0, 0);
+      }
+
+      &::after {
+        transform: rotate(-49deg) translate(0, 0);
+      }
+    }
+
+    &.w-radio-card-disabled {
+      cursor: not-allowed;
+      opacity: var(--w-radio-disabled-opacity);
+    }
+  }
+}
+
+.w-radio-icon {
+  font-size: var(--__icon);
+  color: var(--w-form-item-icon-color);
+  margin-right: var(--w-radio-icon-gap);
+  transform-origin: center center;
+  transition:
+    color var(--w-transition-quick-time) var(--w-cubic-bezier-quick),
+    transform var(--w-transition-quick-time) var(--w-cubic-bezier-quick);
+
+  &:hover:not(.w-radio-icon-disabled) {
+    color: var(--__color);
+  }
+
+  &.w-radio-icon-checked {
+    color: var(--__color);
+    animation: w-radio-pop var(--w-radio-pop-duration) var(--w-cubic-bezier);
+  }
+
+  &.w-radio-icon-disabled {
+    cursor: not-allowed;
+    opacity: var(--w-radio-disabled-opacity);
+
+    &:not(.w-radio-icon-checked) {
+      color: var(--w-color-font-4);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .w-radio {
+    &:active:not(.w-radio-disabled):not(.w-radio-card) .w-radio-icon {
+      transform: none;
+    }
+
+    &.w-radio-card {
+      transition: border-color var(--w-transition-quick-time);
+
+      &:active:not(.w-radio-card-disabled) {
+        transform: none;
+      }
+
+      &::before,
+      &::after {
+        transition: none;
+      }
+    }
+  }
+
+  .w-radio-icon {
+    transition: color var(--w-transition-quick-time);
+
+    &.w-radio-icon-checked {
+      animation: none;
+    }
+  }
+}

package/dist/theme/tokens/components/scrollbar.css

@@ -0,0 +1,160 @@
+.w-scrollbar {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  /* 滚动容器 */
+  .w-scrollbar-container {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    width: 100%;
+    overflow: auto;
+    /* 隐藏原生滚动条 */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    /* 优化触摸板滚动性能 */
+    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
+    will-change: scroll-position; /* 提示浏览器优化滚动性能 */
+
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, Opera */
+    }
+  }
+
+  .w-scrollbar-content {
+    min-width: 100%;
+    min-height: 100%;
+  }
+
+  /* 平滑滚动 */
+  &.w-scrollbar-smooth {
+    .w-scrollbar-container {
+      scroll-behavior: smooth;
+    }
+  }
+
+  /* 滚动条轨道 */
+  .w-scrollbar-track {
+    position: absolute;
+    background-color: var(--w-scrollbar-track-color);
+    border-radius: var(--w-scrollbar-radius, 99px);
+    backdrop-filter: blur(5px);
+    transition: opacity 0.2s ease;
+    opacity: 0; /* 默认隐藏 */
+    z-index: 10;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    /* 垂直轨道 */
+    &.w-scrollbar-track-y {
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: var(--w-scrollbar-size, 8px);
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    /* 水平轨道 */
+    &.w-scrollbar-track-x {
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: var(--w-scrollbar-size, 8px);
+      padding: 0;
+      box-sizing: border-box;
+    }
+  }
+
+  /* 滚动条滑块 */
+  .w-scrollbar-thumb {
+    position: absolute;
+    background-color: var(--w-scrollbar-thumb-color);
+    border-radius: var(--w-scrollbar-radius, 99px);
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--w-scrollbar-thumb-hover-color);
+    }
+
+    &.w-scrollbar-thumb-dragging {
+      background-color: var(--w-scrollbar-thumb-active-color);
+      cursor: grabbing;
+      transition: none !important;
+    }
+
+    /* 垂直滑块 */
+    &.w-scrollbar-thumb-y {
+      width: 100%;
+      left: 0;
+    }
+
+    /* 水平滑块 */
+    &.w-scrollbar-thumb-x {
+      height: 100%;
+      top: 0;
+    }
+  }
+
+  /* 显示滚动条时的状态 */
+  &.w-scrollbar-y,
+  &.w-scrollbar-both {
+    .w-scrollbar-track-y {
+      opacity: 0;
+
+      &:hover,
+      &:active {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.w-scrollbar-x,
+  &.w-scrollbar-both {
+    .w-scrollbar-track-x {
+      opacity: 0;
+
+      &:hover,
+      &:active {
+        opacity: 1;
+      }
+    }
+  }
+
+  /* 当鼠标滑入内容区域时显示滚动条 */
+  &:hover {
+    .w-scrollbar-track {
+      opacity: 1;
+    }
+  }
+
+  /* 移动端优化 */
+  @media (pointer: coarse) {
+    .w-scrollbar-track {
+      width: 12px;
+      height: 12px;
+    }
+
+    .w-scrollbar-thumb {
+      border-radius: 6px;
+    }
+  }
+
+  /* 无障碍支持 */
+  @media (prefers-reduced-motion: reduce) {
+    .w-scrollbar-container {
+      scroll-behavior: auto;
+    }
+
+    .w-scrollbar-track,
+    .w-scrollbar-thumb {
+      transition: none;
+    }
+  }
+}