@chenzy-design/svelte 0.2.1 → 0.3.0

package/dist/radio/meta.js

@@ -23,6 +23,17 @@ export const meta = {
         { name: 'extra', type: 'string', default: 'undefined', desc: '辅助说明，aria-describedby 关联' },
         { name: 'children', type: 'Snippet', default: 'undefined', desc: '标签内容' },
         { name: 'onChange', type: '(checked: boolean) => void', default: 'undefined' },
+        { name: 'addonId', type: 'string', default: 'undefined', desc: '内容容器 id，用作 input 的 aria-labelledby' },
+        { name: 'addonClassName', type: 'string', default: 'undefined', desc: '内容容器附加 class' },
+        { name: 'addonStyle', type: 'string', default: 'undefined', desc: '内容容器内联样式' },
+        { name: 'autoFocus', type: 'boolean', default: 'false', desc: '挂载时自动聚焦' },
+        { name: 'extraId', type: 'string', default: 'undefined', desc: '自定义 extra 元素 id（默认由 fieldId 派生）' },
+        { name: 'mode', type: "'advanced'|''", default: "''", desc: "advanced：再次点击选中项可取消（onChange(false)）" },
+        { name: 'style', type: 'string', default: 'undefined', desc: '根元素内联样式' },
+        { name: 'onMouseEnter', type: '(e: MouseEvent) => void', default: 'undefined' },
+        { name: 'onMouseLeave', type: '(e: MouseEvent) => void', default: 'undefined' },
+        { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '无障碍标签' },
+        { name: 'preventScroll', type: 'boolean', default: 'false', desc: 'autoFocus 时阻止滚动' },
     ],
     group: {
         name: 'RadioGroup',
@@ -64,5 +75,5 @@ export const meta = {
             'extra 经 aria-describedby 关联',
         ],
     },
-    tokens: ['--cd-radio-*', '--cd-focus-ring', '--cd-motion-*', '--cd-spacing-*', '--cd-radius-full'],
+    tokens: ['--cd-radio-*', '--cd-focus-ring', '--cd-motion-*', '--cd-spacing-*', '--cd-border-radius-full'],
 };

package/dist/rating/Rating.svelte

@@ -36,8 +36,13 @@
     /** 根元素 id，关联 aria；不传自动生成。 */
     id?: string;
     ariaLabel?: string;
+    style?: string;
     onChange?: (v: number) => void;
     onHoverChange?: (v: number) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    preventScroll?: boolean;
   }
 
   let {
@@ -56,8 +61,13 @@
     name,
     id,
     ariaLabel,
+    style,
     onChange,
     onHoverChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    preventScroll,
   }: Props = $props();
 
   const loc = useLocale();
@@ -223,7 +233,8 @@
   let rootEl: HTMLDivElement | undefined;
   // autoFocus：命令式聚焦一次（红线 #3，SSR 安全）。
   $effect(() => {
-    if (autoFocus && rootEl && interactive) rootEl.focus();
+    if (autoFocus && rootEl && interactive)
+      rootEl.focus(preventScroll === undefined ? undefined : { preventScroll });
   });
 </script>
 
@@ -241,8 +252,13 @@
   aria-readonly={readonly || undefined}
   aria-invalid={status === 'error' || undefined}
   tabindex={interactive ? 0 : -1}
-  style={sizePx ? `--cd-rating-size-active: ${sizePx}` : undefined}
-  onkeydown={handleKeydown}
+  style={[sizePx ? `--cd-rating-size-active: ${sizePx}` : '', style ?? ''].filter(Boolean).join(';') || undefined}
+  onkeydown={(e) => {
+    handleKeydown(e);
+    onKeyDown?.(e);
+  }}
+  onfocus={() => onFocus?.()}
+  onblur={() => onBlur?.()}
   onmouseleave={handleLeave}
 >
   {#if name}<input type="hidden" {name} value={current} />{/if}
@@ -304,7 +320,7 @@
   }
   .cd-rating:focus-visible {
     box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-radius-1);
+    border-radius: var(--cd-border-radius-small);
   }
   .cd-rating--disabled {
     opacity: 0.5;

package/dist/rating/Rating.svelte.d.ts

@@ -28,8 +28,13 @@ interface Props {
     /** 根元素 id，关联 aria；不传自动生成。 */
     id?: string;
     ariaLabel?: string;
+    style?: string;
     onChange?: (v: number) => void;
     onHoverChange?: (v: number) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    preventScroll?: boolean;
 }
 declare const Rating: import("svelte").Component<Props, {}, "value">;
 type Rating = ReturnType<typeof Rating>;

package/dist/rating/Rating.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.svelte.d.ts","sourceRoot":"","sources":["../../src/rating/Rating.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACnD,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9C,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAC3C,KAAK,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAGlE,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;AAE7C,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,aAAa;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AA8OH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Rating.svelte.d.ts","sourceRoot":"","sources":["../../src/rating/Rating.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACnD,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9C,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAC3C,KAAK,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAGlE,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;AAE7C,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,aAAa;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAuPH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/rating/meta.d.ts

@@ -76,6 +76,16 @@ export declare const meta: {
         readonly type: "string";
         readonly default: "i18n 默认";
         readonly desc: "无可视标签时的辅助名";
+    }, {
+        readonly name: "style";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "根元素内联样式，与内部 token 样式合并";
+    }, {
+        readonly name: "preventScroll";
+        readonly type: "boolean";
+        readonly default: "undefined";
+        readonly desc: "autoFocus 聚焦时是否阻止滚动";
     }, {
         readonly name: "onChange";
         readonly type: "(v: number) => void";
@@ -85,6 +95,21 @@ export declare const meta: {
         readonly type: "(v: number) => void";
         readonly default: "undefined";
         readonly desc: "悬停预览值变化；移出时为当前 value";
+    }, {
+        readonly name: "onFocus";
+        readonly type: "() => void";
+        readonly default: "undefined";
+        readonly desc: "根元素获得焦点";
+    }, {
+        readonly name: "onBlur";
+        readonly type: "() => void";
+        readonly default: "undefined";
+        readonly desc: "根元素失去焦点";
+    }, {
+        readonly name: "onKeyDown";
+        readonly type: "(e: KeyboardEvent) => void";
+        readonly default: "undefined";
+        readonly desc: "按键事件（内部处理后透传）";
     }];
     readonly i18nKeys: readonly ["Rating.ariaLabel", "Rating.valueText", "Rating.cleared", "Rating.unrated"];
     readonly a11y: {

package/dist/rating/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/rating/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCP,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/rating/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCP,CAAC"}

package/dist/rating/meta.js

@@ -22,8 +22,13 @@ export const meta = {
         { name: 'name', type: 'string', default: 'undefined' },
         { name: 'id', type: 'string', default: '自动生成', desc: '根元素 id，关联 aria' },
         { name: 'ariaLabel', type: 'string', default: 'i18n 默认', desc: '无可视标签时的辅助名' },
+        { name: 'style', type: 'string', default: 'undefined', desc: '根元素内联样式，与内部 token 样式合并' },
+        { name: 'preventScroll', type: 'boolean', default: 'undefined', desc: 'autoFocus 聚焦时是否阻止滚动' },
         { name: 'onChange', type: '(v: number) => void', default: 'undefined' },
         { name: 'onHoverChange', type: '(v: number) => void', default: 'undefined', desc: '悬停预览值变化；移出时为当前 value' },
+        { name: 'onFocus', type: '() => void', default: 'undefined', desc: '根元素获得焦点' },
+        { name: 'onBlur', type: '() => void', default: 'undefined', desc: '根元素失去焦点' },
+        { name: 'onKeyDown', type: '(e: KeyboardEvent) => void', default: 'undefined', desc: '按键事件（内部处理后透传）' },
     ],
     i18nKeys: ['Rating.ariaLabel', 'Rating.valueText', 'Rating.cleared', 'Rating.unrated'],
     a11y: {

package/dist/scroll-list/ScrollColumn.svelte

@@ -554,7 +554,7 @@
     align-items: center;
     justify-content: center;
     block-size: var(--cd-sl-item-height);
-    padding-inline: var(--cd-spacing-2);
+    padding-inline: var(--cd-spacing-tight);
     cursor: pointer;
     color: var(--cd-scrolllist-color-text-adjacent);
     white-space: nowrap;

package/dist/select/Select.svelte

@@ -914,7 +914,7 @@
   .cd-select__trigger {
     display: flex;
     align-items: center;
-    gap: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
     inline-size: 100%;
     min-block-size: var(--cd-select-height-default);
     padding-inline: var(--cd-select-padding-x);
@@ -922,7 +922,9 @@
     border: 1px solid var(--cd-select-border);
     border-radius: var(--cd-select-radius);
     cursor: pointer;
-    transition: border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+    transition:
+      border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard),
+      background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
   }
   .cd-select--small .cd-select__trigger {
     min-block-size: var(--cd-select-height-small);
@@ -930,19 +932,25 @@
   .cd-select--large .cd-select__trigger {
     min-block-size: var(--cd-select-height-large);
   }
+  /* 对齐 Semi 填充式：悬浮加深底色（非展开/禁用态） */
+  .cd-select:not(.cd-select--open):not(.cd-select--disabled) .cd-select__trigger:hover {
+    background: var(--cd-select-bg-hover);
+  }
   .cd-select__trigger:focus-visible {
     outline: none;
+    background: var(--cd-select-bg);
     border-color: var(--cd-select-border-active);
     box-shadow: var(--cd-focus-ring);
   }
   .cd-select--open .cd-select__trigger {
+    background: var(--cd-select-bg);
     border-color: var(--cd-select-border-active);
   }
   .cd-select--error .cd-select__trigger {
     border-color: var(--cd-select-border-error);
   }
   .cd-select--disabled .cd-select__trigger {
-    background: var(--cd-color-fill-0);
+    background: var(--cd-color-disabled-fill, var(--cd-color-fill-0));
     color: var(--cd-color-text-3);
     cursor: not-allowed;
   }
@@ -951,7 +959,7 @@
     flex: 1 1 auto;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--cd-spacing-1);
+    gap: var(--cd-spacing-extra-tight);
     min-inline-size: 0;
   }
   .cd-select__placeholder {
@@ -979,11 +987,11 @@
   .cd-select__tag {
     display: inline-flex;
     align-items: center;
-    gap: var(--cd-spacing-1);
-    padding-inline: var(--cd-spacing-2);
+    gap: var(--cd-spacing-extra-tight);
+    padding-inline: var(--cd-spacing-tight);
     background: var(--cd-color-fill-1);
-    border-radius: var(--cd-radius-1);
-    font-size: var(--cd-font-size-1);
+    border-radius: var(--cd-border-radius-small);
+    font-size: var(--cd-font-size-small);
   }
   .cd-select__tag--rest {
     color: var(--cd-color-text-2);
@@ -1032,7 +1040,7 @@
     z-index: var(--cd-select-dropdown-z);
     max-block-size: 16rem;
     overflow-y: auto;
-    padding-block: var(--cd-spacing-1);
+    padding-block: var(--cd-spacing-extra-tight);
     background: var(--cd-select-dropdown-bg);
     border-radius: var(--cd-select-dropdown-radius);
     box-shadow: var(--cd-select-dropdown-shadow);
@@ -1048,16 +1056,16 @@
     overflow: hidden;
   }
   .cd-select__group-label {
-    padding: var(--cd-spacing-1) var(--cd-select-option-padding, var(--cd-spacing-2));
+    padding: var(--cd-spacing-extra-tight) var(--cd-select-option-padding, var(--cd-spacing-tight));
     color: var(--cd-color-text-3);
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
     font-weight: var(--cd-font-weight-medium, 500);
     user-select: none;
   }
   .cd-select__option {
     display: flex;
     align-items: center;
-    gap: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
     padding: var(--cd-select-option-padding);
     cursor: pointer;
   }
@@ -1078,7 +1086,7 @@
     justify-content: center;
     inline-size: 1rem;
     flex: 0 0 auto;
-    color: var(--cd-select-option-color-selected);
+    color: var(--cd-select-option-check-color);
   }
   .cd-select__empty {
     padding: var(--cd-select-option-padding);
@@ -1089,7 +1097,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
     padding: var(--cd-select-option-padding);
     color: var(--cd-color-text-3);
   }
@@ -1098,7 +1106,7 @@
     block-size: 1em;
     border: 2px solid var(--cd-color-border);
     border-block-start-color: var(--cd-color-primary);
-    border-radius: var(--cd-radius-full);
+    border-radius: var(--cd-border-radius-full);
     animation: cd-select-spin 0.7s linear infinite;
   }
   @keyframes cd-select-spin {
@@ -1124,15 +1132,15 @@
     color: var(--cd-color-text-2);
   }
   .cd-select__prefix {
-    margin-inline-end: var(--cd-spacing-1);
+    margin-inline-end: var(--cd-spacing-extra-tight);
   }
   .cd-select__suffix {
-    margin-inline-start: var(--cd-spacing-1);
+    margin-inline-start: var(--cd-spacing-extra-tight);
   }
   /* 浮层顶/底固定区 */
   .cd-select__dropdown-header,
   .cd-select__dropdown-footer {
-    padding: var(--cd-spacing-1) var(--cd-select-option-padding, var(--cd-spacing-2));
+    padding: var(--cd-spacing-extra-tight) var(--cd-select-option-padding, var(--cd-spacing-tight));
     border-block-color: var(--cd-color-border);
   }
   .cd-select__dropdown-header {

package/dist/side-sheet/SideSheet.svelte

@@ -586,7 +586,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--cd-spacing-3, 12px);
+    gap: var(--cd-spacing-base-tight, 12px);
     padding: var(--cd-sidesheet-header-padding);
     border-block-end: 1px solid var(--cd-sidesheet-border);
   }
@@ -604,7 +604,7 @@
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
-    gap: var(--cd-spacing-2, 8px);
+    gap: var(--cd-spacing-tight, 8px);
   }
   .cd-sidesheet__close {
     display: inline-flex;
@@ -614,7 +614,7 @@
     block-size: 28px;
     padding: 0;
     border: none;
-    border-radius: var(--cd-radius-2, 4px);
+    border-radius: var(--cd-border-radius-medium, 4px);
     background: transparent;
     color: var(--cd-sidesheet-close-color);
     cursor: pointer;
@@ -639,7 +639,7 @@
     display: flex;
     flex-shrink: 0;
     justify-content: flex-end;
-    gap: var(--cd-spacing-2, 8px);
+    gap: var(--cd-spacing-tight, 8px);
     padding: var(--cd-sidesheet-footer-padding);
     background: var(--cd-sidesheet-bg);
     border-block-start: 1px solid var(--cd-sidesheet-border);

package/dist/slider/Slider.svelte

@@ -64,6 +64,20 @@
     allowCross?: boolean;
     /** 拖拽/点击结束时触发（onChangeComplete 的别名，语义更明确） */
     onAfterChange?: (v: SliderValue) => void;
+    /** 显示轨道两端边界值标签 */
+    showBoundary?: boolean;
+    /** tooltip 是否显示箭头 */
+    showArrow?: boolean;
+    /** 显示标记文本标签 */
+    showMarkLabel?: boolean;
+    /** tooltip 跟随标记位置 */
+    tooltipOnMark?: boolean;
+    /** 自定义手柄圆点样式，range 时为数组 */
+    handleDot?: { color: string; size: string } | { color: string; size: string }[];
+    /** pointerup 时触发 */
+    onMouseUp?: (e: MouseEvent) => void;
+    /** 覆盖 getAriaValueText 的 aria-valuetext 文案 */
+    ariaValuetext?: string;
   }
 
   let {
@@ -101,6 +115,13 @@
     pushable = false,
     allowCross = true,
     onAfterChange,
+    showBoundary = false,
+    showArrow = true,
+    showMarkLabel = true,
+    tooltipOnMark = false,
+    handleDot,
+    onMouseUp,
+    ariaValuetext,
   }: Props = $props();
 
   const loc = useLocale();
@@ -280,9 +301,10 @@
     dragValue = next;
   }
 
-  function onPointerUp() {
+  function onPointerUp(e?: PointerEvent) {
     document.removeEventListener('pointermove', onPointerMove);
     document.removeEventListener('pointerup', onPointerUp);
+    if (e) onMouseUp?.(e as MouseEvent);
     if (dragValue !== null) {
       const finalValue = dragValue;
       dragValue = null;
@@ -442,6 +464,16 @@
     return `inset-inline-start: ${pct}%`;
   }
 
+  function handleDotStyle(index: number): string {
+    if (!handleDot) return '';
+    const dot = Array.isArray(handleDot) ? handleDot[index] : handleDot;
+    if (!dot) return '';
+    const parts: string[] = [];
+    if (dot.color) parts.push(`--cd-slider-dot-color:${dot.color}`);
+    if (dot.size) parts.push(`--cd-slider-dot-size:${dot.size}`);
+    return parts.join(';');
+  }
+
   const cls = $derived(
     [
       'cd-slider',
@@ -481,12 +513,14 @@
   {id}
   class={cls}
   class:cd-slider--vertical={vertical}
+  class:cd-slider--tooltip-on-mark={tooltipOnMark}
   role="group"
   aria-label={ariaLabelledby ? undefined : ariaLabel}
   aria-labelledby={ariaLabelledby}
   aria-disabled={disabled || undefined}
   style={vertical ? `block-size: ${height}px` : undefined}
 >
+  {#if showBoundary}<span class="cd-slider__boundary-min">{min}</span>{/if}
   <div
     class="cd-slider__rail"
     role="presentation"
@@ -512,7 +546,11 @@
 
     {#each markKeys as mk (mk)}
       {@const pct = valueToPercent(mk)}
-      <span class="cd-slider__mark" style={posStyle(pct)}>{marks?.[mk]}</span>
+      <span
+        class="cd-slider__mark"
+        class:cd-slider__mark-label--hidden={!showMarkLabel}
+        style={posStyle(pct)}
+      >{marks?.[mk]}</span>
     {/each}
 
     {#each handleList as index (index)}
@@ -528,9 +566,10 @@
         aria-valuemin={handleMin(index)}
         aria-valuemax={handleMax(index)}
         aria-valuenow={hv}
-        aria-valuetext={ariaValueText(index)}
+        aria-valuetext={ariaValuetext ?? ariaValueText(index)}
         aria-disabled={disabled || undefined}
-        style={`${posStyle(pct)};${handleStyle ?? ''}`}
+        data-show-arrow={showArrow}
+        style={[posStyle(pct), handleStyle ?? '', handleDotStyle(index)].filter(Boolean).join(';')}
         onpointerdown={(e) => handleHandlePointerDown(index, e)}
         onkeydown={(e) => handleKeydown(index, e)}
         onpointerenter={() => (hoverIndex = index)}
@@ -550,6 +589,7 @@
       </span>
     {/each}
   </div>
+  {#if showBoundary}<span class="cd-slider__boundary-max">{max}</span>{/if}
 </div>
 
 <style>
@@ -558,7 +598,7 @@
     display: flex;
     align-items: center;
     inline-size: 100%;
-    padding-block: var(--cd-spacing-2);
+    padding-block: var(--cd-spacing-tight);
     touch-action: none;
   }
   .cd-slider--vertical {
@@ -566,7 +606,7 @@
     inline-size: auto;
     block-size: 200px;
     padding-block: 0;
-    padding-inline: var(--cd-spacing-2);
+    padding-inline: var(--cd-spacing-tight);
   }
   .cd-slider__rail {
     position: relative;
@@ -601,7 +641,7 @@
     block-size: var(--cd-slider-handle-size);
     background: var(--cd-slider-handle-bg);
     border: 2px solid var(--cd-slider-handle-border);
-    border-radius: var(--cd-radius-full);
+    border-radius: var(--cd-border-radius-full);
     transform: translate(-50%, -50%);
     cursor: grab;
     outline: none;
@@ -616,8 +656,21 @@
   .cd-slider--vertical.cd-slider--reverse .cd-slider__handle {
     transform: translate(-50%, -50%);
   }
+  /* Custom handle dot (only rendered when handleDot sets the color variable). */
+  .cd-slider__handle[style*='--cd-slider-dot-color']::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: var(--cd-slider-dot-size, 6px);
+    block-size: var(--cd-slider-dot-size, 6px);
+    background: var(--cd-slider-dot-color);
+    border-radius: var(--cd-border-radius-full);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
   .cd-slider__handle:hover {
-    box-shadow: var(--cd-shadow-1);
+    box-shadow: var(--cd-shadow-elevated);
   }
   .cd-slider__handle:active {
     cursor: grabbing;
@@ -628,22 +681,22 @@
   /* Value bubble above the handle. */
   .cd-slider__tip {
     position: absolute;
-    inset-block-end: calc(100% + var(--cd-spacing-2));
+    inset-block-end: calc(100% + var(--cd-spacing-tight));
     inset-inline-start: 50%;
     transform: translateX(-50%);
-    padding: 2px var(--cd-spacing-2);
+    padding: 2px var(--cd-spacing-tight);
     background: var(--cd-color-bg-inverse, rgba(0, 0, 0, 0.85));
     color: var(--cd-color-text-inverse, #fff);
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
     line-height: 1.4;
     white-space: nowrap;
-    border-radius: var(--cd-radius-1, 4px);
+    border-radius: var(--cd-border-radius-small, 4px);
     pointer-events: none;
     z-index: 1;
   }
   .cd-slider--vertical .cd-slider__tip {
     inset-block-end: 50%;
-    inset-inline-start: calc(100% + var(--cd-spacing-2));
+    inset-inline-start: calc(100% + var(--cd-spacing-tight));
     transform: translateY(50%);
   }
   /* Step dots. */
@@ -654,7 +707,7 @@
     block-size: 8px;
     background: var(--cd-color-bg-0);
     border: 2px solid var(--cd-slider-dot-color, var(--cd-color-border));
-    border-radius: var(--cd-radius-full);
+    border-radius: var(--cd-border-radius-full);
     transform: translate(-50%, -50%);
     pointer-events: none;
   }
@@ -671,20 +724,43 @@
   }
   .cd-slider__mark {
     position: absolute;
-    inset-block-start: calc(100% + var(--cd-spacing-2));
+    inset-block-start: calc(100% + var(--cd-spacing-tight));
     transform: translateX(-50%);
     color: var(--cd-slider-mark-color);
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
     white-space: nowrap;
   }
   .cd-slider--vertical .cd-slider__mark {
     inset-block-start: auto;
-    inset-inline-start: calc(100% + var(--cd-spacing-2));
+    inset-inline-start: calc(100% + var(--cd-spacing-tight));
     transform: translateY(50%);
   }
   .cd-slider--vertical.cd-slider--reverse .cd-slider__mark {
     transform: translateY(-50%);
   }
+  /* showMarkLabel=false: keep the tick dot but hide its text label. */
+  .cd-slider__mark-label--hidden {
+    visibility: hidden;
+  }
+  /* Boundary value labels flanking the rail (showBoundary). */
+  .cd-slider__boundary-min,
+  .cd-slider__boundary-max {
+    flex: 0 0 auto;
+    color: var(--cd-color-text-2);
+    font-size: var(--cd-font-size-small);
+    white-space: nowrap;
+  }
+  .cd-slider__boundary-min {
+    margin-inline-end: var(--cd-spacing-base, var(--cd-spacing-tight));
+  }
+  .cd-slider__boundary-max {
+    margin-inline-start: var(--cd-spacing-base, var(--cd-spacing-tight));
+  }
+  .cd-slider--vertical .cd-slider__boundary-min,
+  .cd-slider--vertical .cd-slider__boundary-max {
+    margin-inline: 0;
+    margin-block: var(--cd-spacing-tight);
+  }
   .cd-slider--disabled {
     opacity: 0.5;
   }

package/dist/slider/Slider.svelte.d.ts

@@ -51,6 +51,26 @@ interface Props {
     allowCross?: boolean;
     /** 拖拽/点击结束时触发（onChangeComplete 的别名，语义更明确） */
     onAfterChange?: (v: SliderValue) => void;
+    /** 显示轨道两端边界值标签 */
+    showBoundary?: boolean;
+    /** tooltip 是否显示箭头 */
+    showArrow?: boolean;
+    /** 显示标记文本标签 */
+    showMarkLabel?: boolean;
+    /** tooltip 跟随标记位置 */
+    tooltipOnMark?: boolean;
+    /** 自定义手柄圆点样式，range 时为数组 */
+    handleDot?: {
+        color: string;
+        size: string;
+    } | {
+        color: string;
+        size: string;
+    }[];
+    /** pointerup 时触发 */
+    onMouseUp?: (e: MouseEvent) => void;
+    /** 覆盖 getAriaValueText 的 aria-valuetext 文案 */
+    ariaValuetext?: string;
 }
 declare const Slider: import("svelte").Component<Props, {}, "value">;
 type Slider = ReturnType<typeof Slider>;

package/dist/slider/Slider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.svelte.d.ts","sourceRoot":"","sources":["../../src/slider/Slider.svelte.ts"],"names":[],"mappings":"AAOE,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1C,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9C,KAAK,MAAM,GAAG,MAAM,CAAC;AACrB,KAAK,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC7B,KAAK,WAAW,GAAG,MAAM,GAAG,IAAI,CAAC;AAEjC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAChD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,8CAA8C;IAC9C,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IACnC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,wBAAwB;IACxB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7C,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAC/D,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AA6cH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Slider.svelte.d.ts","sourceRoot":"","sources":["../../src/slider/Slider.svelte.ts"],"names":[],"mappings":"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"}