@chenzy-design/svelte 0.2.0 → 0.3.0

package/dist/date-picker/DatePicker.svelte

@@ -1345,7 +1345,7 @@
   .cd-date-picker__trigger {
     display: flex;
     align-items: center;
-    gap: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
     inline-size: 100%;
     block-size: var(--cd-input-height-default);
     padding-inline-start: var(--cd-input-padding-x);
@@ -1361,11 +1361,11 @@
   }
   .cd-date-picker--small .cd-date-picker__trigger {
     block-size: var(--cd-input-height-small);
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
   }
   .cd-date-picker--large .cd-date-picker__trigger {
     block-size: var(--cd-input-height-large);
-    font-size: var(--cd-font-size-3);
+    font-size: var(--cd-font-size-header-6);
   }
   .cd-date-picker__trigger:focus-visible {
     outline: none;
@@ -1393,16 +1393,16 @@
   }
   /* compact 密度 */
   .cd-date-picker--compact .cd-date-picker__panel {
-    padding: var(--cd-spacing-2);
+    padding: var(--cd-spacing-tight);
   }
   .cd-date-picker--compact .cd-date-picker__cell {
     inline-size: calc(var(--cd-date-picker-cell-size) * 0.85);
     block-size: calc(var(--cd-date-picker-cell-size) * 0.85);
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
   }
   .cd-date-picker--compact .cd-date-picker__weekday {
     block-size: calc(var(--cd-date-picker-cell-size) * 0.85);
-    font-size: var(--cd-font-size-0);
+    font-size: var(--cd-font-size-small);
   }
   /* no-motion */
   .cd-date-picker--no-motion .cd-date-picker__panel {
@@ -1458,17 +1458,17 @@
   .cd-date-picker__clear:focus-visible {
     outline: none;
     box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-radius-1);
+    border-radius: var(--cd-border-radius-small);
   }
   .cd-date-picker__clear:hover {
     color: var(--cd-color-text-0);
   }
   .cd-date-picker__panel {
     position: absolute;
-    inset-block-start: calc(100% + var(--cd-spacing-1));
+    inset-block-start: calc(100% + var(--cd-spacing-extra-tight));
     inset-inline-start: 0;
     z-index: var(--cd-date-picker-panel-z, 1030);
-    padding: var(--cd-spacing-3);
+    padding: var(--cd-spacing-base-tight);
     background: var(--cd-date-picker-panel-bg);
     border-radius: var(--cd-date-picker-panel-radius);
     box-shadow: var(--cd-date-picker-panel-shadow);
@@ -1478,16 +1478,16 @@
   }
   /* 顶部/底部插槽 */
   .cd-date-picker__slot--top {
-    margin-block-end: var(--cd-spacing-2);
+    margin-block-end: var(--cd-spacing-tight);
   }
   .cd-date-picker__slot--bottom {
-    margin-block-start: var(--cd-spacing-2);
+    margin-block-start: var(--cd-spacing-tight);
   }
   .cd-date-picker__slot--left {
-    margin-inline-end: var(--cd-spacing-2);
+    margin-inline-end: var(--cd-spacing-tight);
   }
   .cd-date-picker__slot--right {
-    margin-inline-start: var(--cd-spacing-2);
+    margin-inline-start: var(--cd-spacing-tight);
   }
   .cd-date-picker__layout {
     display: flex;
@@ -1506,9 +1506,9 @@
   .cd-date-picker__presets {
     display: flex;
     flex-direction: column;
-    gap: var(--cd-spacing-1);
-    margin-inline-end: var(--cd-spacing-3);
-    padding-inline-end: var(--cd-spacing-3);
+    gap: var(--cd-spacing-extra-tight);
+    margin-inline-end: var(--cd-spacing-base-tight);
+    padding-inline-end: var(--cd-spacing-base-tight);
     border-inline-end: 1px solid var(--cd-color-border);
     min-inline-size: 5rem;
   }
@@ -1519,8 +1519,8 @@
     margin-inline-end: 0;
     padding-inline-end: 0;
     border-inline-end: none;
-    margin-block-end: var(--cd-spacing-2);
-    padding-block-end: var(--cd-spacing-2);
+    margin-block-end: var(--cd-spacing-tight);
+    padding-block-end: var(--cd-spacing-tight);
     border-block-end: 1px solid var(--cd-color-border);
     min-inline-size: unset;
   }
@@ -1529,8 +1529,8 @@
     margin-inline-end: 0;
     padding-inline-end: 0;
     border-inline-end: none;
-    margin-inline-start: var(--cd-spacing-3);
-    padding-inline-start: var(--cd-spacing-3);
+    margin-inline-start: var(--cd-spacing-base-tight);
+    padding-inline-start: var(--cd-spacing-base-tight);
     border-inline-start: 1px solid var(--cd-color-border);
   }
   /* bottom 预sets */
@@ -1538,15 +1538,15 @@
     margin-block-end: 0;
     padding-block-end: 0;
     border-block-end: none;
-    margin-block-start: var(--cd-spacing-2);
-    padding-block-start: var(--cd-spacing-2);
+    margin-block-start: var(--cd-spacing-tight);
+    padding-block-start: var(--cd-spacing-tight);
     border-block-start: 1px solid var(--cd-color-border);
   }
   .cd-date-picker__preset {
-    padding-inline: var(--cd-spacing-2);
-    padding-block: var(--cd-spacing-1);
+    padding-inline: var(--cd-spacing-tight);
+    padding-block: var(--cd-spacing-extra-tight);
     border: none;
-    border-radius: var(--cd-radius-1);
+    border-radius: var(--cd-border-radius-small);
     background: transparent;
     color: var(--cd-color-text-0);
     font: inherit;
@@ -1569,8 +1569,8 @@
   }
   .cd-date-picker__time {
     display: flex;
-    margin-inline-start: var(--cd-spacing-2);
-    padding-inline-start: var(--cd-spacing-2);
+    margin-inline-start: var(--cd-spacing-tight);
+    padding-inline-start: var(--cd-spacing-tight);
     border-inline-start: 1px solid var(--cd-color-border);
   }
   .cd-date-picker__time-col {
@@ -1613,10 +1613,10 @@
     background: transparent;
   }
   .cd-date-picker__ok {
-    padding-inline: var(--cd-spacing-2);
-    padding-block: var(--cd-spacing-1);
+    padding-inline: var(--cd-spacing-tight);
+    padding-block: var(--cd-spacing-extra-tight);
     border: none;
-    border-radius: var(--cd-radius-1);
+    border-radius: var(--cd-border-radius-small);
     background: var(--cd-color-primary);
     color: var(--cd-color-white, #fff);
     font: inherit;
@@ -1630,10 +1630,10 @@
     box-shadow: var(--cd-focus-ring);
   }
   .cd-date-picker__cancel {
-    padding-inline: var(--cd-spacing-2);
-    padding-block: var(--cd-spacing-1);
+    padding-inline: var(--cd-spacing-tight);
+    padding-block: var(--cd-spacing-extra-tight);
     border: 1px solid var(--cd-color-border);
-    border-radius: var(--cd-radius-1);
+    border-radius: var(--cd-border-radius-small);
     background: transparent;
     color: var(--cd-color-text-0);
     font: inherit;
@@ -1651,8 +1651,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--cd-spacing-2);
-    margin-block-end: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
+    margin-block-end: var(--cd-spacing-tight);
   }
   .cd-date-picker__title {
     flex: 1 1 auto;
@@ -1701,12 +1701,12 @@
   .cd-date-picker__grid--year {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: var(--cd-spacing-1);
+    gap: var(--cd-spacing-extra-tight);
     inline-size: calc(var(--cd-date-picker-cell-size) * 7 + 2px * 6);
   }
   .cd-date-picker__cell--block {
     inline-size: auto;
-    padding-inline: var(--cd-spacing-2);
+    padding-inline: var(--cd-spacing-tight);
     block-size: calc(var(--cd-date-picker-cell-size) * 1.4);
   }
   .cd-date-picker__weekday {
@@ -1715,7 +1715,7 @@
     justify-content: center;
     block-size: var(--cd-date-picker-cell-size);
     color: var(--cd-date-picker-weekday-color);
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
   }
   .cd-date-picker__cell {
     display: inline-flex;
@@ -1762,10 +1762,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--cd-spacing-2);
-    margin-block-start: var(--cd-spacing-2);
-    padding-block-start: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
+    margin-block-start: var(--cd-spacing-tight);
+    padding-block-start: var(--cd-spacing-tight);
     border-block-start: 1px solid var(--cd-color-border);
+    background: var(--cd-date-picker-footer-bg); /* 对齐 Semi footer 背景 fill-0 */
   }
   .cd-date-picker__panel--datetime .cd-date-picker__footer,
   .cd-date-picker__footer:has(.cd-date-picker__ok) {
@@ -1785,7 +1786,7 @@
   .cd-date-picker__today:focus-visible {
     outline: none;
     box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-radius-1);
+    border-radius: var(--cd-border-radius-small);
   }
   @media (prefers-reduced-motion: reduce) {
     .cd-date-picker__trigger,

package/dist/date-picker/RangePicker.svelte

@@ -548,7 +548,7 @@
   .cd-range-picker__trigger {
     display: flex;
     align-items: center;
-    gap: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
     inline-size: 100%;
     block-size: var(--cd-input-height-default);
     padding-inline: var(--cd-input-padding-x);
@@ -563,11 +563,11 @@
   }
   .cd-range-picker--small .cd-range-picker__trigger {
     block-size: var(--cd-input-height-small);
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
   }
   .cd-range-picker--large .cd-range-picker__trigger {
     block-size: var(--cd-input-height-large);
-    font-size: var(--cd-font-size-3);
+    font-size: var(--cd-font-size-header-6);
   }
   .cd-range-picker__trigger:focus-visible {
     outline: none;
@@ -628,14 +628,14 @@
   .cd-range-picker__clear:focus-visible {
     outline: none;
     box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-radius-1);
+    border-radius: var(--cd-border-radius-small);
   }
   .cd-range-picker__panel {
     position: absolute;
-    inset-block-start: calc(100% + var(--cd-spacing-1));
+    inset-block-start: calc(100% + var(--cd-spacing-extra-tight));
     inset-inline-start: 0;
     z-index: var(--cd-date-picker-panel-z);
-    padding: var(--cd-spacing-3);
+    padding: var(--cd-spacing-base-tight);
     background: var(--cd-date-picker-panel-bg);
     border-radius: var(--cd-date-picker-panel-radius);
     box-shadow: var(--cd-date-picker-panel-shadow);
@@ -647,7 +647,7 @@
   .cd-range-picker__panels {
     display: flex;
     align-items: flex-start;
-    gap: var(--cd-spacing-4);
+    gap: var(--cd-spacing-base);
   }
   .cd-range-picker__month {
     flex: 0 0 auto;
@@ -664,8 +664,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--cd-spacing-2);
-    margin-block-end: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
+    margin-block-end: var(--cd-spacing-tight);
   }
   .cd-range-picker__title {
     flex: 1 1 auto;
@@ -714,7 +714,7 @@
     justify-content: center;
     block-size: var(--cd-date-picker-cell-size);
     color: var(--cd-date-picker-weekday-color);
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
   }
   .cd-range-picker__cell {
     position: relative;

package/dist/descriptions/Descriptions.svelte

@@ -207,11 +207,11 @@
   .cd-descriptions--horizontal :global(.cd-descriptions__item) {
     flex-direction: row;
     align-items: baseline;
-    gap: var(--cd-spacing-1);
+    gap: var(--cd-spacing-extra-tight);
   }
   .cd-descriptions--vertical :global(.cd-descriptions__item) {
     flex-direction: column;
-    gap: var(--cd-spacing-1);
+    gap: var(--cd-spacing-extra-tight);
   }
   .cd-descriptions :global(.cd-descriptions__label) {
     color: var(--cd-descriptions-label-color);
@@ -259,6 +259,10 @@
   .cd-descriptions--row :global(.cd-descriptions__item) {
     align-items: stretch;
   }
+  /* 双行显示：value 字重 bold（对齐 Semi $font-descriptions_value-fontWeight） */
+  .cd-descriptions--row-mode :global(.cd-descriptions__value) {
+    font-weight: var(--cd-descriptions-value-weight-row);
+  }
 
   /* bordered cells */
   .cd-descriptions--bordered .cd-descriptions__content {
@@ -282,6 +286,6 @@
   /* row=true：双行显示，每项 label 与 value 纵向叠放（覆盖 direction 横向排列） */
   .cd-descriptions--row-mode :global(.cd-descriptions__item) {
     flex-direction: column;
-    gap: var(--cd-spacing-1);
+    gap: var(--cd-spacing-extra-tight);
   }
 </style>

package/dist/divider/Divider.svelte

@@ -130,7 +130,7 @@
     padding-inline: var(--cd-divider-text-gap);
   }
   .cd-divider--bold .cd-divider__text {
-    font-weight: var(--cd-font-weight-semibold);
+    font-weight: var(--cd-font-weight-bold);
   }
   .cd-divider--align-left::before {
     flex: 0 0 5%;

package/dist/drawer/Drawer.svelte

@@ -502,7 +502,7 @@
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
-    gap: var(--cd-spacing-2, 8px);
+    gap: var(--cd-spacing-tight, 8px);
   }
   .cd-drawer__close {
     display: inline-flex;

package/dist/dropdown/Dropdown.svelte

@@ -528,7 +528,7 @@
   .cd-dropdown__trigger:focus-visible {
     outline: none;
     box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-radius-1);
+    border-radius: var(--cd-border-radius-small);
   }
   .cd-dropdown--disabled .cd-dropdown__trigger {
     color: var(--cd-color-text-3);
@@ -537,7 +537,7 @@
   /* 浮层 portal 到 body，由 JS 写 position:fixed + transform 定位 */
   .cd-dropdown__menu {
     margin: 0;
-    padding-block: var(--cd-spacing-1);
+    padding-block: var(--cd-spacing-extra-tight);
     padding-inline: 0;
     list-style: none;
     z-index: var(--cd-dropdown-z);
@@ -550,7 +550,10 @@
   .cd-dropdown__menu--hidden {
     display: none;
   }
-  /* motion：进场淡入 + 轻微下移；reduced-motion 退化 */
+  /* motion：进场淡入；reduced-motion 退化。
+     注意：定位 transform 由 use:floating 写入 inline style，动画 keyframe
+     绝不能设置 transform（CSS animation 优先级高于 inline style，会把
+     floating 的 translate(x,y) 覆盖成 0，浮层飘到容器左上角）。故只动 opacity。 */
   .cd-dropdown__menu--motion {
     animation: cd-dropdown-in var(--cd-dropdown-motion-duration, 120ms)
       var(--cd-dropdown-motion-easing, ease) both;
@@ -558,11 +561,9 @@
   @keyframes cd-dropdown-in {
     from {
       opacity: 0;
-      transform: translateY(-4px);
     }
     to {
       opacity: 1;
-      transform: translateY(0);
     }
   }
   @media (prefers-reduced-motion: reduce) {

package/dist/dropdown/DropdownDivider.svelte

@@ -11,7 +11,7 @@
 <style>
   .cd-dropdown__divider {
     block-size: 1px;
-    margin-block: var(--cd-spacing-1);
+    margin-block: var(--cd-spacing-extra-tight);
     background: var(--cd-color-border);
   }
 </style>

package/dist/dropdown/DropdownItem.svelte

@@ -77,7 +77,7 @@
   .cd-dropdown__item {
     display: flex;
     align-items: center;
-    gap: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
     inline-size: 100%;
     margin: 0;
     padding: var(--cd-dropdown-item-padding);

package/dist/dropdown/DropdownItemNode.svelte

@@ -261,7 +261,7 @@
   /* 分隔符：水平细线，不可交互 */
   .cd-dropdown__divider {
     block-size: 1px;
-    margin-block: var(--cd-spacing-1);
+    margin-block: var(--cd-spacing-extra-tight);
     background: var(--cd-color-border);
   }
   /* 分组：始终展开的分区标题 + 组内项 */
@@ -275,14 +275,14 @@
     align-items: center;
     padding: var(--cd-dropdown-item-padding);
     color: var(--cd-dropdown-item-color-disabled);
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
     cursor: default;
     user-select: none;
   }
   .cd-dropdown__item {
     display: flex;
     align-items: center;
-    gap: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
     inline-size: 100%;
     margin: 0;
     padding: var(--cd-dropdown-item-padding);
@@ -347,7 +347,7 @@
     list-style: none;
     z-index: var(--cd-dropdown-z);
     min-inline-size: var(--cd-dropdown-min-width);
-    padding-block: var(--cd-spacing-1);
+    padding-block: var(--cd-spacing-extra-tight);
     background: var(--cd-dropdown-bg);
     border-radius: var(--cd-dropdown-radius);
     box-shadow: var(--cd-dropdown-shadow);

package/dist/dropdown/DropdownSubMenu.svelte

@@ -160,7 +160,7 @@
   .cd-dropdown__item {
     display: flex;
     align-items: center;
-    gap: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
     inline-size: 100%;
     margin: 0;
     padding: var(--cd-dropdown-item-padding);
@@ -204,7 +204,7 @@
     list-style: none;
     z-index: var(--cd-dropdown-z);
     min-inline-size: var(--cd-dropdown-min-width);
-    padding-block: var(--cd-spacing-1);
+    padding-block: var(--cd-spacing-extra-tight);
     background: var(--cd-dropdown-bg);
     border-radius: var(--cd-dropdown-radius);
     box-shadow: var(--cd-dropdown-shadow);

package/dist/dropdown/DropdownTitle.svelte

@@ -27,7 +27,7 @@
     align-items: center;
     padding: var(--cd-dropdown-item-padding);
     color: var(--cd-dropdown-item-color-disabled);
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
     cursor: default;
     user-select: none;
   }

package/dist/dropdown/meta.d.ts

@@ -124,6 +124,6 @@ export declare const meta: {
         readonly keyboard: readonly ["Enter", "Space", "ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Escape"];
         readonly notes: readonly ["触发器 aria-haspopup=menu + aria-expanded + aria-controls", "浮层 role=menu，项 role=menuitem，焦点式 roving（tabindex=-1 + 方向键移动焦点）", "子菜单父项 aria-haspopup=menu + aria-expanded；→ 进入子菜单首项，← / Esc 逐层返回", "divider role=separator；group 组标题不可聚焦，组内项始终展开（role=group）", "useDismiss 处理外部点击与 Escape 关闭"];
     };
-    readonly tokens: readonly ["--cd-dropdown-*", "--cd-focus-ring", "--cd-radius-1", "--cd-spacing-*", "--cd-color-danger"];
+    readonly tokens: readonly ["--cd-dropdown-*", "--cd-focus-ring", "--cd-border-radius-small", "--cd-spacing-*", "--cd-color-danger"];
 };
 //# sourceMappingURL=meta.d.ts.map

package/dist/dropdown/meta.js

@@ -92,5 +92,5 @@ export const meta = {
             'useDismiss 处理外部点击与 Escape 关闭',
         ],
     },
-    tokens: ['--cd-dropdown-*', '--cd-focus-ring', '--cd-radius-1', '--cd-spacing-*', '--cd-color-danger'],
+    tokens: ['--cd-dropdown-*', '--cd-focus-ring', '--cd-border-radius-small', '--cd-spacing-*', '--cd-color-danger'],
 };

package/dist/empty/Empty.svelte

@@ -263,6 +263,7 @@
   .cd-empty__title {
     margin: 0;
     color: var(--cd-empty-title-color);
+    font-weight: var(--cd-empty-title-weight);
   }
   .cd-empty__description {
     margin: 0;

package/dist/form/Field.svelte

@@ -369,7 +369,7 @@
 <style>
   .cd-form-field {
     display: flex;
-    gap: var(--cd-form-label-gap, var(--cd-spacing-2));
+    gap: var(--cd-form-label-gap, var(--cd-spacing-tight));
   }
   .cd-form-field--label-top {
     flex-direction: column;
@@ -381,7 +381,7 @@
   .cd-form-field__label {
     display: inline-flex;
     align-items: center;
-    gap: var(--cd-spacing-1);
+    gap: var(--cd-spacing-extra-tight);
     color: var(--cd-form-label-color, var(--cd-color-text-1));
   }
   /* labelAlign (§4 L60): justify the label's inline content within its box */
@@ -392,7 +392,7 @@
     justify-content: flex-end;
   }
   .cd-form-field--label-left .cd-form-field__label {
-    padding-block-start: var(--cd-spacing-1);
+    padding-block-start: var(--cd-spacing-extra-tight);
   }
   .cd-form-field__required {
     color: var(--cd-form-required-color, var(--cd-color-danger, #e54848));
@@ -401,7 +401,7 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    gap: var(--cd-spacing-1);
+    gap: var(--cd-spacing-extra-tight);
     min-inline-size: 0;
   }
   /* inset floating label */
@@ -410,16 +410,16 @@
   }
   .cd-form-field--label-inset .cd-form-field__control {
     position: relative;
-    padding-block-start: var(--cd-spacing-3);
+    padding-block-start: var(--cd-spacing-base-tight);
   }
   .cd-form-field__inset-label {
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-start: var(--cd-input-padding-x, var(--cd-spacing-3));
+    inset-inline-start: var(--cd-input-padding-x, var(--cd-spacing-base-tight));
     transform: translateY(-50%);
     display: inline-flex;
     align-items: center;
-    gap: var(--cd-spacing-1);
+    gap: var(--cd-spacing-extra-tight);
     color: var(--cd-input-color-placeholder, var(--cd-color-text-3));
     pointer-events: none;
     transition:
@@ -439,23 +439,23 @@
   .cd-form-field__error {
     display: inline-flex;
     align-items: center;
-    gap: var(--cd-spacing-1);
+    gap: var(--cd-spacing-extra-tight);
     color: var(--cd-form-error-color, var(--cd-color-danger, #e54848));
-    font-size: var(--cd-form-error-font-size, var(--cd-font-size-1, 0.75rem));
+    font-size: var(--cd-form-error-font-size, var(--cd-font-size-small, 0.75rem));
   }
   .cd-form-field__warning {
     display: inline-flex;
     align-items: center;
-    gap: var(--cd-spacing-1);
+    gap: var(--cd-spacing-extra-tight);
     color: var(--cd-form-warning-color, var(--cd-color-warning, #fa8c16));
-    font-size: var(--cd-form-error-font-size, var(--cd-font-size-1, 0.75rem));
+    font-size: var(--cd-form-error-font-size, var(--cd-font-size-small, 0.75rem));
   }
   .cd-form-field__status-icon {
     flex: 0 0 auto;
   }
   .cd-form-field__extra {
     color: var(--cd-form-extra-color, var(--cd-color-text-3));
-    font-size: var(--cd-form-error-font-size, var(--cd-font-size-1, 0.75rem));
+    font-size: var(--cd-form-error-font-size, var(--cd-font-size-small, 0.75rem));
   }
   .cd-form-field__extra--middle {
     order: -1;
@@ -467,9 +467,9 @@
   .cd-form-field__validating {
     display: inline-flex;
     align-items: center;
-    gap: var(--cd-spacing-1);
+    gap: var(--cd-spacing-extra-tight);
     color: var(--cd-form-extra-color, var(--cd-color-text-3));
-    font-size: var(--cd-form-error-font-size, var(--cd-font-size-1, 0.75rem));
+    font-size: var(--cd-form-error-font-size, var(--cd-font-size-small, 0.75rem));
   }
   .cd-form-field__spinner {
     inline-size: 0.85em;

package/dist/form/Form.svelte

@@ -234,10 +234,10 @@
   .cd-form {
     display: flex;
     flex-direction: column;
-    gap: var(--cd-form-item-gap, var(--cd-spacing-4));
+    gap: var(--cd-form-item-gap, var(--cd-spacing-base));
   }
   .cd-form__footer {
     display: flex;
-    gap: var(--cd-spacing-3);
+    gap: var(--cd-spacing-base-tight);
   }
 </style>

package/dist/form/FormCascader.svelte

@@ -68,13 +68,13 @@
 <Field {...fieldProps}>
   {#snippet children({ value, onChange, status, disabled: fieldDisabled })}
     <Cascader
-      value={value as CascaderProps['value']}
-      {treeData}
-      {multiple}
-      {placeholder}
+      {...(value !== undefined ? { value: value as NonNullable<CascaderProps['value']> } : {})}
+      {...(treeData !== undefined ? { treeData } : {})}
+      {...(multiple !== undefined ? { multiple } : {})}
+      {...(placeholder !== undefined ? { placeholder } : {})}
       disabled={disabled ?? fieldDisabled}
-      {size}
-      {displayProp}
+      {...(size !== undefined ? { size } : {})}
+      {...(displayProp !== undefined ? { displayProp } : {})}
       status={status === 'error' ? 'error' : 'default'}
       onChange={(v) => onChange(v)}
     />

package/dist/form/FormCheckbox.svelte

@@ -46,7 +46,7 @@
     size,
     indeterminate,
     type,
-    children,
+    children: slotChildren,
   }: Props = $props();
 
   const fieldProps = $derived<ComponentProps<typeof Field>>({
@@ -68,16 +68,16 @@
 <Field {...fieldProps}>
   {#snippet children({ value, onChange, status, disabled: fieldDisabled, id, required: fieldRequired })}
     <Checkbox
-      checked={typeof value === 'boolean' ? value : undefined}
+      {...(typeof value === 'boolean' ? { checked: value } : {})}
       disabled={disabled ?? fieldDisabled}
-      {size}
-      {indeterminate}
-      {type}
+      {...(size !== undefined ? { size } : {})}
+      {...(indeterminate !== undefined ? { indeterminate } : {})}
+      {...(type !== undefined ? { type } : {})}
       {id}
       status={status === 'error' ? 'error' : 'default'}
       onChange={(checked) => onChange(checked)}
     >
-      {@render children?.()}
+      {@render slotChildren?.()}
     </Checkbox>
   {/snippet}
 </Field>