klun-ui 0.5.0 → 0.6.0

package/dist/styles.css

@@ -398,6 +398,8 @@
   --klun-static-static-white: var(--klun-0);
   --klun-stroke-soft-200-2: var(--klun-neutral-200);
   --klun-stroke-soft-200: var(--klun-200);
+  --klun-scrim: rgba(0, 0, 0, 0.45);
+  --klun-stroke-control: rgb(124,135,152);
   --klun-stroke-strong-950: var(--klun-950);
   --klun-stroke-sub-300: var(--klun-300);
   --klun-stroke-white-0: var(--klun-0);
@@ -414,6 +416,7 @@
   --klun-teal-950: rgb(11,70,62);
   --klun-teal-base: rgb(53,185,233);
   --klun-text-disabled-300: var(--klun-300);
+  --klun-text-helper: rgb(91,100,114);
   --klun-text-main-900: var(--klun-neutral-900);
   --klun-text-soft-400: var(--klun-400);
   --klun-text-strong-950: var(--klun-950);
@@ -463,7 +466,6 @@
   --klun-yellow-900: rgb(134,102,29);
   --klun-yellow-950: rgb(98,76,24);
 }
-:root[data-theme=dark],
 .dark,
 [data-theme=dark] {
   --klun-bg-soft-200: var(--klun-700);
@@ -566,10 +568,12 @@
   --klun-static-static-black: var(--klun-950);
   --klun-static-static-white: var(--klun-0);
   --klun-stroke-soft-200: var(--klun-600);
+  --klun-stroke-control: rgb(125,137,155);
   --klun-stroke-strong-950: var(--klun-0);
   --klun-stroke-sub-300: var(--klun-600);
   --klun-stroke-white-0: var(--klun-950);
   --klun-text-disabled-300: var(--klun-600);
+  --klun-text-helper: rgb(182,191,204);
   --klun-text-soft-400: var(--klun-500);
   --klun-text-strong-950: var(--klun-0);
   --klun-text-sub-600: var(--klun-400);
@@ -811,11 +815,13 @@
   --klun-bg-strong-950: var(--color-grey-grey-900);
   --klun-stroke-white-0: var(--color-light-light);
   --klun-stroke-soft-200: var(--color-grey-grey-200);
+  --klun-stroke-control: var(--color-grey-grey-700);
   --klun-stroke-sub-300: var(--color-grey-grey-300);
   --klun-stroke-strong-950: var(--color-grey-grey-900);
   --klun-text-strong-950: var(--color-grey-grey-900);
   --klun-text-main-900: var(--color-grey-grey-900);
-  --klun-text-sub-600: var(--color-grey-grey-600);
+  --klun-text-sub-600: var(--color-grey-grey-700);
+  --klun-text-helper: var(--color-grey-grey-700);
   --klun-text-soft-400: var(--color-grey-grey-500);
   --klun-text-disabled-300: var(--color-grey-grey-400);
   --klun-text-white-0: var(--color-light-light);
@@ -927,12 +933,14 @@
   --klun-bg-weak-50: var(--kk-hover);
   --klun-bg-soft-200: var(--kk-line);
   --klun-stroke-soft-200: var(--kk-border);
+  --klun-stroke-control: var(--kk-text);
   --klun-stroke-sub-300: var(--kk-text-placeholder);
   --klun-stroke-strong-950: var(--kk-text-strong);
   --klun-text-strong-950: var(--kk-text-strong);
   --klun-text-main-900: var(--kk-text-strong);
   --klun-text-sub-600: var(--kk-text);
   --klun-text-soft-400: var(--kk-text-weak);
+  --klun-text-helper: var(--kk-text);
   --klun-text-disabled-300: var(--kk-text-placeholder);
   --klun-icon-strong-950: var(--kk-text-strong);
   --klun-icon-sub-600: var(--kk-text);
@@ -952,7 +960,18 @@
   --klun-radius-3xl: 0;
   --klun-radius-4xl: 0;
   --klun-radius-capsule: 0;
-  --klun-control-h-md: 32px;
+  --klun-control-h-2xs: 18px;
+  --klun-control-h-xs: 20px;
+  --klun-control-h-sm: 24px;
+  --klun-control-h-md: 28px;
+  --klun-control-h-lg: 32px;
+  --klun-control-h-xl: 36px;
+  --klun-control-px-2xs: 6px;
+  --klun-control-px-xs: 8px;
+  --klun-control-px-sm: 10px;
+  --klun-control-px-md: 12px;
+  --klun-control-px-lg: 15px;
+  --klun-control-px-xl: 18px;
 }
 [data-mode=kk] .kk-page {
   display: flex;
@@ -2758,9 +2777,6 @@
 [data-mode=kk] .klun-cascader {
   min-width: 0;
   width: 100%;
-  --_h: var(--kk-control-h);
-  --_px: 11px;
-  --_radius: var(--kk-radius);
 }
 [data-mode=kk] .klun-cascader__column {
   min-width: 108px;
@@ -2769,14 +2785,8 @@
   padding: 0 8px;
 }
 [data-mode=kk] .klun-button {
-  height: var(--kk-control-h);
-  min-height: var(--kk-control-h);
-  padding: 0 15px;
   box-sizing: border-box;
   border: 1px solid transparent;
-  border-radius: var(--kk-radius);
-  font-size: var(--kk-font);
-  gap: 6px;
 }
 [data-mode=kk] .klun-button.klun-button--primary {
   background: var(--kk-primary);
@@ -2828,6 +2838,9 @@
   border-top: 0;
   gap: 10px;
 }
+[data-mode=kk] .klun-modal__footer--flush {
+  padding-top: 20px;
+}
 [data-mode=kk] .kk-table--grid tbody tr:hover .kk-perm-no,
 [data-mode=kk] .kk-table--grid tbody tr:focus-within .kk-perm-no {
   opacity: 0;
@@ -3606,9 +3619,11 @@
   --klun-shadow-md: 0 16px 32px -12px rgba(14,18,27,0.10);
   --klun-shadow-lg: 0 16px 40px -8px rgba(14,18,27,0.16);
   --klun-shadow-xl: 0 24px 56px -4px rgba(14,18,27,0.20);
-  --klun-shadow-button-primary-focus: 0 0 0 2px var(--klun-bg-white-0), 0 0 0 4px var(--klun-alpha-primary-alpha-10);
-  --klun-shadow-button-important-focus: 0 0 0 2px var(--klun-bg-white-0), 0 0 0 4px var(--klun-alpha-gray-alpha-10);
-  --klun-shadow-button-error-focus: 0 0 0 2px var(--klun-bg-white-0), 0 0 0 4px var(--klun-alpha-red-alpha-10);
+  --klun-focus-ring-color: var(--klun-primary-base);
+  --klun-focus-ring-error-color: var(--klun-state-error-base);
+  --klun-shadow-button-primary-focus: 0 0 0 2px var(--klun-focus-ring-color);
+  --klun-shadow-button-important-focus: 0 0 0 2px var(--klun-focus-ring-color);
+  --klun-shadow-button-error-focus: 0 0 0 2px var(--klun-focus-ring-error-color);
   --klun-shadow-toggle-switch: 0 6px 10px 0 rgba(14,18,27,0.06), 0 2px 4px 0 rgba(14,18,27,0.03);
   --klun-shadow-switch-thumb: 0 2px 4px 0 rgba(27,28,29,0.10);
   --klun-shadow-custom:
@@ -3639,6 +3654,15 @@
   --klun-space-40: 40px;
   --klun-space-48: 48px;
 }
+[data-mode=orange]:not([data-theme=dark]) {
+  --klun-focus-ring-color: var(--klun-orange-600);
+}
+[data-mode=green]:not([data-theme=dark]) {
+  --klun-focus-ring-color: var(--klun-green-700);
+}
+[data-mode=kk]:not([data-theme=dark]) {
+  --klun-focus-ring-color: var(--kk-primary-dark);
+}
 
 /* src/styles/tokens/radius-modes.css */
 [data-radius=square] {
@@ -3720,6 +3744,39 @@
   --klun-field-pad-md: 8px 10px;
   --klun-field-pad-lg: 10px 12px;
 }
+[data-density=default] .klun-checkbox--small {
+  --_box: 18px;
+}
+[data-density=default] .klun-checkbox--medium {
+  --_box: 20px;
+}
+[data-density=default] .klun-checkbox--large {
+  --_box: 24px;
+}
+[data-density=default] .klun-radio--small {
+  --_box: 16px;
+}
+[data-density=default] .klun-radio--medium {
+  --_box: 20px;
+}
+[data-density=default] .klun-radio--large {
+  --_box: 24px;
+}
+[data-density=default] .klun-switch--small {
+  --_track-w: 32px;
+  --_track-h: 18px;
+  --_thumb: 14px;
+}
+[data-density=default] .klun-switch--medium {
+  --_track-w: 36px;
+  --_track-h: 20px;
+  --_thumb: 16px;
+}
+[data-density=default] .klun-switch--large {
+  --_track-w: 44px;
+  --_track-h: 24px;
+  --_thumb: 20px;
+}
 [data-density=compact] .klun-checkbox--small {
   --_box: 16px;
 }
@@ -3753,38 +3810,76 @@
   --_track-h: 22px;
   --_thumb: 18px;
 }
-[data-density=default] .klun-checkbox--small {
-  --_box: 18px;
+[data-density=compact] .klun-result {
+  padding: 28px 16px;
 }
-[data-density=default] .klun-checkbox--medium {
-  --_box: 20px;
+[data-density=compact] .klun-result__icon {
+  font-size: 40px;
+  margin-bottom: 12px;
 }
-[data-density=default] .klun-checkbox--large {
-  --_box: 24px;
+[data-density=compact] .klun-result--big .klun-result__icon {
+  font-size: 48px;
 }
-[data-density=default] .klun-radio--small {
-  --_box: 16px;
+[data-density=compact] .klun-result__title {
+  font: var(--klun-text-title-h5);
 }
-[data-density=default] .klun-radio--medium {
-  --_box: 20px;
+[data-density=compact] .klun-result__subtitle {
+  font: var(--klun-text-paragraph-sm);
+  max-width: 380px;
 }
-[data-density=default] .klun-radio--large {
-  --_box: 24px;
+[data-density=compact] .klun-empty-state {
+  padding: 24px 16px;
 }
-[data-density=default] .klun-switch--small {
-  --_track-w: 32px;
-  --_track-h: 18px;
-  --_thumb: 14px;
+[data-density=compact] .klun-empty-state__icon {
+  width: 40px;
+  height: 40px;
+  font-size: 20px;
+  margin-bottom: 8px;
 }
-[data-density=default] .klun-switch--medium {
-  --_track-w: 36px;
-  --_track-h: 20px;
-  --_thumb: 16px;
+[data-density=compact] .klun-empty-state__title {
+  font: var(--klun-text-label-md);
 }
-[data-density=default] .klun-switch--large {
-  --_track-w: 44px;
-  --_track-h: 24px;
-  --_thumb: 20px;
+[data-density=compact] .klun-collapse__trigger {
+  padding: 8px 10px;
+}
+[data-density=compact] .klun-accordion__trigger {
+  padding: 10px 12px;
+}
+[data-density=compact] .klun-message {
+  padding: 6px 10px;
+}
+[data-density=compact] .klun-banner {
+  padding: 8px 12px;
+}
+[data-density=compact] .klun-notification {
+  padding: 12px;
+}
+[data-density=compact] .klun-timeline__content:not(.klun-timeline__content--last) {
+  padding-bottom: 16px;
+}
+[data-density=compact] .klun-code-viewer__pre {
+  padding: 8px 10px;
+}
+[data-density=compact] .klun-diff__header {
+  padding: 6px 10px;
+}
+[data-density=compact] .klun-kanban__column {
+  padding: 8px;
+}
+[data-density=compact] .klun-rich-editor__area {
+  padding: 8px 10px;
+}
+[data-density=compact] .klun-rich-editor-toolbar {
+  padding: 2px;
+  gap: 2px;
+}
+[data-density=compact] .klun-rich-editor-toolbar__button {
+  width: 24px;
+  height: 24px;
+  font-size: 15px;
+}
+[data-density=compact] .klun-rich-editor-toolbar__divider {
+  height: 16px;
 }
 
 /* src/styles/tokens/motion.css */
@@ -3819,7 +3914,7 @@ html {
 }
 body {
   margin: 0;
-  font: var(--klun-text-paragraph-md);
+  font: var(--klun-text-paragraph-sm);
   font-feature-settings: "cv11", "ss01";
   font-variation-settings: "opsz" 32;
   color: var(--klun-text-strong-950);
@@ -3870,29 +3965,29 @@ body {
 .klun-button--tiny {
   height: var(--klun-control-h-xs, 28px);
   padding: 0 var(--klun-control-px-xs, 10px);
-  border-radius: var(--klun-radius-md);
+  border-radius: var(--klun-radius-sm);
   gap: 4px;
 }
 .klun-button--xsmall {
   height: var(--klun-control-h-sm, 32px);
   padding: 0 var(--klun-control-px-sm, 12px);
-  border-radius: var(--klun-radius-md);
+  border-radius: var(--klun-radius-sm);
   gap: 4px;
 }
 .klun-button--small {
   height: var(--klun-control-h-md, 36px);
   padding: 0 var(--klun-control-px-md, 14px);
-  border-radius: var(--klun-radius-md);
+  border-radius: var(--klun-radius-sm);
 }
 .klun-button--medium {
   height: var(--klun-control-h-lg, 40px);
   padding: 0 var(--klun-control-px-lg, 16px);
-  border-radius: var(--klun-radius-lg);
+  border-radius: var(--klun-radius-md);
 }
 .klun-button--large {
   height: var(--klun-control-h-xl, 48px);
   padding: 0 var(--klun-control-px-xl, 20px);
-  border-radius: var(--klun-radius-xl);
+  border-radius: var(--klun-radius-lg);
   gap: 8px;
   font: var(--klun-text-label-md);
 }
@@ -3906,7 +4001,7 @@ body {
 .klun-button--stroke {
   background: var(--klun-bg-white-0);
   color: var(--_accent-text);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-button--stroke:hover {
   background: var(--klun-bg-weak-50);
@@ -3925,6 +4020,12 @@ body {
 .klun-button--ghost:hover {
   background: var(--_accent-light);
 }
+focus-visible\2026  \9010\9879\5b58\5728\ff09\3002  \6b64\524d\5168\5e93\53ea\6709  7 \6761  `:active`\ff0c\4e14\552f\4e00\4e0e\6309\94ae\76f8\5173\7684\662f  `.klun-fancy-button:active`\2014\2014  **\5e38\89c4  `.klun-button` \6ca1\6709\6309\4e0b\6001**\ff0c\800c\5b83\662f\5e93\91cc\6700\5e38\7528\7684\4ea4\4e92\7ec4\4ef6\3002  \8fd9\91cc\6cbf\7528\540c\6587\4ef6\91cc\82b1\5f0f\53d8\4f53**\65e2\6709**\7684\5199\6cd5\ff08`translateY(1px)`\ff09\ff1a  \6bd4  hover \66f4\76f4\63a5\4f46\514b\5236\ff0c`transform` \4e0d\89e6\53d1\91cd\6392\3001\4e0d\6539\53d8\5e03\5c40\ff0c\4e14\5bf9\6240\6709  appearance \4e00\81f4\3002  */ .klun-button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+.klun-icon-button:active:not(:disabled) {
+  transform: translateY(1px);
+}
 .klun-button:focus-visible {
   outline: none;
   box-shadow: var(--_focus);
@@ -3988,32 +4089,32 @@ body {
   --_focus: var(--klun-shadow-button-error-focus);
 }
 .klun-icon-button--tiny {
-  width: var(--klun-control-h-2xs, 24px);
-  height: var(--klun-control-h-2xs, 24px);
-  border-radius: var(--klun-radius-md);
-  font-size: 16px;
-}
-.klun-icon-button--xsmall {
   width: var(--klun-control-h-xs, 28px);
   height: var(--klun-control-h-xs, 28px);
-  border-radius: var(--klun-radius-md);
-  font-size: 18px;
+  border-radius: var(--klun-radius-sm);
+  font-size: 16px;
 }
-.klun-icon-button--small {
+.klun-icon-button--xsmall {
   width: var(--klun-control-h-sm, 32px);
   height: var(--klun-control-h-sm, 32px);
-  border-radius: var(--klun-radius-md);
-  font-size: 20px;
+  border-radius: var(--klun-radius-sm);
+  font-size: 16px;
 }
-.klun-icon-button--medium {
+.klun-icon-button--small {
   width: var(--klun-control-h-md, 36px);
   height: var(--klun-control-h-md, 36px);
-  border-radius: var(--klun-radius-lg);
-  font-size: 20px;
+  border-radius: var(--klun-radius-sm);
+  font-size: 16px;
 }
-.klun-icon-button--large {
+.klun-icon-button--medium {
   width: var(--klun-control-h-lg, 40px);
   height: var(--klun-control-h-lg, 40px);
+  border-radius: var(--klun-radius-md);
+  font-size: 18px;
+}
+.klun-icon-button--large {
+  width: var(--klun-control-h-xl, 48px);
+  height: var(--klun-control-h-xl, 48px);
   border-radius: var(--klun-radius-lg);
   font-size: 20px;
 }
@@ -4028,7 +4129,7 @@ body {
 .klun-icon-button--stroke {
   background: var(--klun-bg-white-0);
   color: var(--_accent-text);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-icon-button--stroke:hover {
   background: var(--klun-bg-weak-50);
@@ -4142,7 +4243,7 @@ body {
       180deg,
       var(--klun-bg-weak-50),
       transparent 60%);
-  --_inset: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  --_inset: inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-fancy-button--small {
   height: 36px;
@@ -4241,7 +4342,7 @@ body {
 .klun-compact-button--stroke {
   background: var(--klun-bg-white-0);
   color: var(--klun-icon-sub-600);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-compact-button--stroke:hover {
   background: var(--klun-bg-weak-50);
@@ -4249,7 +4350,7 @@ body {
 .klun-compact-button--white {
   background: var(--klun-bg-white-0);
   color: var(--klun-icon-sub-600);
-  box-shadow: var(--klun-shadow-xs), inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: var(--klun-shadow-xs), inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-compact-button--white:hover {
   background: var(--klun-bg-weak-50);
@@ -4286,6 +4387,18 @@ body {
 .klun-compact-button--loading:disabled {
   opacity: 0.7;
 }
+.klun-compact-button__label-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
 .klun-compact-button__icon {
   display: inline-flex;
   align-items: center;
@@ -4362,12 +4475,21 @@ body {
     transform: rotate(360deg);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .klun-button--loading .klun-button__spinner,
+  .klun-icon-button--loading .klun-icon-button__spinner,
+  .klun-fancy-button--loading .klun-fancy-button__spinner,
+  .klun-compact-button--loading .klun-compact-button__spinner,
+  .klun-link-button--loading .klun-link-button__spinner {
+    animation: none;
+  }
+}
 
 /* src/components/buttons/ButtonGroup.css */
 .klun-button-group {
   display: inline-flex;
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   overflow: hidden;
 }
 .klun-button-group--small {
@@ -4493,7 +4615,7 @@ body {
 }
 .klun-copy-button--stroke {
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-copy-button--stroke:hover {
   background: var(--klun-bg-weak-50);
@@ -4525,6 +4647,9 @@ body {
 .klun-copy-button--lg > i {
   font-size: 20px;
 }
+.klun-copy-button:active:not(:disabled) {
+  transform: translateY(1px);
+}
 
 /* src/components/buttons/Toggle.css */
 .klun-toggle {
@@ -4564,7 +4689,7 @@ body {
   border-radius: var(--klun-radius-lg);
 }
 .klun-toggle--outline {
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-toggle:hover:not(:disabled) {
   background: var(--klun-bg-weak-50);
@@ -5007,7 +5132,7 @@ body {
 .klun-bulk-action-bar__divider {
   width: 1px;
   height: 22px;
-  background: rgba(255, 255, 255, 0.16);
+  background: var(--klun-alpha-white-alpha-16);
 }
 .klun-bulk-action-bar__actions {
   display: flex;
@@ -5024,7 +5149,7 @@ body {
   border: none;
   cursor: pointer;
   border-radius: var(--klun-radius-pill);
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--klun-alpha-white-alpha-10);
   color: inherit;
   transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
@@ -5049,7 +5174,7 @@ body {
   transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
 .klun-bulk-action--default {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--klun-alpha-white-alpha-10);
 }
 .klun-bulk-action--default:hover {
   background: rgba(255, 255, 255, 0.18);
@@ -5126,6 +5251,14 @@ body {
   width: 20px;
   background: var(--klun-static-static-white);
 }
+@media (prefers-reduced-motion: reduce) {
+  .klun-carousel__track {
+    transition: none;
+  }
+  .klun-carousel__dot {
+    transition: none;
+  }
+}
 
 /* src/components/data-display/ChartLegend.css */
 .klun-chart-legend {
@@ -5191,6 +5324,18 @@ body {
   color: var(--klun-text-strong-950);
   font-variant-numeric: tabular-nums;
 }
+.klun-chart-legend__item {
+  min-width: 0;
+}
+.klun-chart-legend__label,
+.klun-chart-legend__value,
+.klun-chart-legend__text {
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+.klun-chart-legend__text {
+  white-space: normal;
+}
 
 /* src/components/data-display/ChartTooltip.css */
 .klun-chart-tooltip {
@@ -5206,7 +5351,7 @@ body {
 }
 .klun-chart-tooltip__title {
   font: var(--klun-text-label-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-chart-tooltip__rows {
   display: flex;
@@ -5264,7 +5409,7 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 28px;
+  height: var(--klun-control-h-xs);
   padding: 0 10px;
   border-radius: var(--klun-radius-capsule);
   font: var(--klun-text-label-xs);
@@ -5360,7 +5505,8 @@ body {
   cursor: pointer;
 }
 .klun-chip--dismissible {
-  padding: 0 6px 0 10px;
+  padding-block: 0;
+  padding-inline: 10px 6px;
 }
 .klun-chip--disabled {
   opacity: 0.5;
@@ -5400,7 +5546,7 @@ body {
   box-shadow: var(--_ring);
 }
 .klun-code-viewer--dark {
-  --_bg: var(--klun-bg-strong-950);
+  --_bg: var(--klun-static-static-black);
   --_fg: rgba(255, 255, 255, 0.86);
   --_sub: rgba(255, 255, 255, 0.4);
   --_ring: none;
@@ -5429,7 +5575,7 @@ body {
 .klun-code-viewer__copy-float {
   position: absolute;
   top: 6px;
-  right: 6px;
+  inset-inline-end: 6px;
   z-index: 1;
 }
 .klun-code-viewer__copy {
@@ -5485,7 +5631,7 @@ body {
   box-shadow: var(--_ring);
 }
 .klun-log-viewer--dark {
-  --_bg: var(--klun-bg-strong-950);
+  --_bg: var(--klun-static-static-black);
   --_fg: rgba(255, 255, 255, 0.86);
   --_sub: rgba(255, 255, 255, 0.4);
   --_ring: none;
@@ -5540,7 +5686,7 @@ body {
   --_level-color: var(--klun-state-information-base);
 }
 .klun-log-viewer__level--debug {
-  --_level-color: var(--klun-text-soft-400);
+  --_level-color: var(--klun-text-helper);
 }
 .klun-log-viewer__level--success {
   --_level-color: var(--klun-state-success-base);
@@ -5667,7 +5813,7 @@ body {
 }
 .klun-xref__time {
   font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-xref__card-extra {
   font: var(--klun-text-paragraph-xs);
@@ -5746,7 +5892,7 @@ body {
   white-space: nowrap;
   font: var(--klun-text-label-sm);
   font-weight: 400;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-descriptions__value-cell {
   font: var(--_value-font);
@@ -5758,7 +5904,7 @@ body {
 }
 .klun-descriptions__label {
   font: var(--klun-text-label-sm);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   margin-bottom: 4px;
 }
 .klun-descriptions__value {
@@ -5802,6 +5948,10 @@ body {
   font-size: 12px;
   font-weight: 500;
   color: var(--klun-text-strong-950);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .klun-diff__stat {
   font-family: var(--_mono);
@@ -5827,7 +5977,7 @@ body {
   height: 20px;
   border: none;
   background: transparent;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   cursor: pointer;
   padding: 0;
 }
@@ -5866,7 +6016,7 @@ body {
   justify-content: flex-end;
   min-width: 40px;
   padding: 0 8px;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-diff__num--addable {
   cursor: pointer;
@@ -5881,7 +6031,7 @@ body {
   height: 15px;
   border-radius: var(--klun-radius-sm);
   background: var(--klun-primary-base);
-  color: #fff;
+  color: var(--klun-static-static-white);
   font-size: 13px;
   line-height: 1;
   opacity: 0;
@@ -5903,7 +6053,7 @@ body {
 .klun-diff__sign {
   display: inline-block;
   width: 1ch;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-diff__row--add .klun-diff__code,
 .klun-diff__code--add {
@@ -6167,7 +6317,7 @@ body {
   align-items: center;
   gap: 8px;
   font: var(--klun-text-label-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-kanban__empty {
   padding: 16px 8px;
@@ -6175,7 +6325,7 @@ body {
   border: 1px dashed var(--klun-stroke-soft-200);
   border-radius: var(--klun-radius-lg);
   font: var(--klun-text-label-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-kanban__footer {
   padding: 2px;
@@ -6354,13 +6504,13 @@ body {
   justify-content: center;
   gap: 8px;
   padding: 32px 16px;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   font: var(--klun-text-paragraph-sm);
 }
 .klun-list__empty {
   padding: 40px 16px;
   text-align: center;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   font: var(--klun-text-paragraph-sm);
 }
 .klun-list__empty-default {
@@ -6568,7 +6718,7 @@ body {
   margin: 0 0 8px;
   padding: 2px 0 2px 10px;
   border-left: 3px solid var(--klun-stroke-soft-200);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-md-pre {
   margin: 0 0 8px;
@@ -6669,7 +6819,7 @@ body {
   border-bottom-color: var(--klun-primary-base);
 }
 .klun-md-wikilink--broken {
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   border-bottom: 1px dashed var(--klun-stroke-soft-200);
   cursor: help;
 }
@@ -6722,7 +6872,7 @@ body {
 .klun-money__period {
   font: var(--klun-text-paragraph-sm);
   font-weight: 400;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 
 /* src/components/data-display/NumberFlow.css */
@@ -7035,16 +7185,16 @@ body {
 }
 .klun-statistic__prefix {
   font: var(--klun-text-label-lg);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   margin-right: 2px;
 }
 .klun-statistic__suffix {
   font: var(--klun-text-label-lg);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   margin-left: 2px;
 }
 .klun-statistic__trend {
-  --_trend-color: var(--klun-text-soft-400);
+  --_trend-color: var(--klun-text-helper);
   display: inline-flex;
   align-items: center;
   gap: 2px;
@@ -7058,7 +7208,7 @@ body {
   --_trend-color: var(--klun-state-error-base);
 }
 .klun-statistic__trend--flat {
-  --_trend-color: var(--klun-text-soft-400);
+  --_trend-color: var(--klun-text-helper);
 }
 .klun-statistic__trend i {
   font-size: 16px;
@@ -7093,6 +7243,11 @@ body {
     opacity: 0;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .klun-status-badge__ping {
+    animation: none;
+  }
+}
 
 /* src/components/data-display/StatusDot.css */
 .klun-status-dot {
@@ -7149,6 +7304,11 @@ body {
     opacity: 0;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .klun-status-dot__ping {
+    animation: none;
+  }
+}
 
 /* src/components/data-display/Table.css */
 .klun-table {
@@ -7164,7 +7324,7 @@ body {
 }
 .klun-table--compact {
   --klun-table-pad: 8px 12px;
-  --klun-table-font: var(--klun-text-paragraph-xs);
+  --klun-table-font: var(--klun-text-paragraph-sm);
 }
 .klun-table--comfortable {
   --klun-table-pad: 12px 16px;
@@ -7235,6 +7395,25 @@ body {
   gap: 2px;
   max-width: 100%;
 }
+.klun-table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  text-align: inherit;
+}
+.klun-table__sort:focus-visible {
+  outline: none;
+  border-radius: var(--klun-radius-xs, 4px);
+  box-shadow: 0 0 0 2px var(--klun-focus-ring-color, var(--klun-primary-base));
+}
 .klun-table__sort-icon {
   margin-left: 2px;
   font-size: 20px;
@@ -7298,6 +7477,19 @@ body {
 .klun-table__td--editable {
   cursor: text;
 }
+.klun-table__td--editable:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--klun-focus-ring-color, var(--klun-primary-base));
+}
+.klun-table__rowlink {
+  color: inherit;
+  text-decoration: none;
+}
+.klun-table__rowlink:focus-visible {
+  outline: none;
+  border-radius: var(--klun-radius-xs, 4px);
+  box-shadow: 0 0 0 2px var(--klun-focus-ring-color, var(--klun-primary-base));
+}
 .klun-table__td--editing {
   padding: 4px 8px;
 }
@@ -7539,7 +7731,7 @@ body {
 .klun-table__empty-cell {
   padding: 48px 16px;
   text-align: center;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   font: var(--klun-text-paragraph-sm);
 }
 .klun-table__empty {
@@ -7767,7 +7959,7 @@ body {
 }
 .klun-table__pager-range {
   font: var(--klun-text-paragraph-sm);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   font-variant-numeric: tabular-nums;
 }
 .klun-table__pager-controls {
@@ -7864,7 +8056,7 @@ body {
 .klun-table__pager-ellipsis {
   min-width: 24px;
   text-align: center;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-table__ctx {
   position: fixed;
@@ -7924,7 +8116,16 @@ body {
 }
 .klun-table__ctx-shortcut {
   font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
+}
+@media (prefers-reduced-motion: reduce) {
+  .klun-table__skel {
+    animation: none;
+  }
+}
+.klun-table__resizer:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--klun-focus-ring-color);
 }
 
 /* src/components/data-display/Tag.css */
@@ -8035,7 +8236,7 @@ body {
 }
 .klun-timeline__time {
   font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   margin-bottom: 2px;
 }
 .klun-timeline__label {
@@ -8048,6 +8249,14 @@ body {
   color: var(--klun-text-sub-600);
   text-wrap: pretty;
 }
+.klun-timeline__content,
+.klun-timeline__label,
+.klun-timeline__time {
+  overflow-wrap: anywhere;
+}
+.klun-timeline__content {
+  min-width: 0;
+}
 
 /* src/components/data-display/Tooltip.css */
 .klun-tooltip {
@@ -8076,8 +8285,8 @@ body {
   align-items: center;
   gap: 6px;
   height: var(--klun-control-h-sm, 32px);
-  padding-left: var(--klun-tree-indent, 6px);
-  padding-right: 8px;
+  padding-inline-start: var(--klun-tree-indent, 6px);
+  padding-inline-end: 8px;
   border-radius: var(--klun-radius-md);
   cursor: pointer;
   color: var(--klun-text-sub-600);
@@ -8099,6 +8308,10 @@ body {
 .klun-tree__item--disabled:hover {
   background: transparent;
 }
+.klun-tree__item:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--klun-focus-ring-color, var(--klun-primary-base));
+}
 .klun-tree__item--selected:hover {
   background: var(--klun-bg-weak-50);
 }
@@ -8180,7 +8393,7 @@ body {
   font: var(--klun-text-label-xs);
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -8225,7 +8438,7 @@ body {
   padding: 40px 12px;
   text-align: center;
   font: var(--klun-text-paragraph-sm);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-vtable__foot {
   flex: none;
@@ -8236,7 +8449,7 @@ body {
   border-top: 1px solid var(--klun-stroke-soft-200);
   background: var(--klun-bg-weak-50);
   font: var(--klun-text-label-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 
 /* src/components/disclosure/Accordion.css */
@@ -8247,7 +8460,7 @@ body {
 }
 .klun-accordion__item {
   border-radius: var(--klun-radius-xl);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   background: var(--klun-bg-white-0);
   overflow: hidden;
 }
@@ -8305,6 +8518,9 @@ body {
     transition: none;
   }
 }
+.klun-accordion__title {
+  overflow-wrap: anywhere;
+}
 
 /* src/components/disclosure/Collapse.css */
 .klun-collapse {
@@ -8381,6 +8597,9 @@ body {
     transition: none;
   }
 }
+.klun-collapse__title {
+  overflow-wrap: anywhere;
+}
 
 /* src/components/feedback/Alert.css */
 .klun-alert {
@@ -8471,6 +8690,10 @@ body {
 .klun-alert--filled .klun-alert__close {
   color: var(--klun-static-static-white);
 }
+.klun-alert__title,
+.klun-alert__message {
+  overflow-wrap: anywhere;
+}
 
 /* src/components/feedback/Banner.css */
 .klun-banner {
@@ -8531,6 +8754,10 @@ body {
   display: inline-flex;
   padding: 2px;
 }
+.klun-banner__content {
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
 
 /* src/components/feedback/BorderBeam.css */
 @keyframes klun-border-beam-rotate {
@@ -8956,7 +9183,7 @@ body {
 .klun-notification__close {
   position: absolute;
   top: 12px;
-  right: 12px;
+  inset-inline-end: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -9049,6 +9276,14 @@ body {
     animation: none;
   }
 }
+.klun-notification__body,
+.klun-notification__title,
+.klun-notification__description {
+  overflow-wrap: anywhere;
+}
+.klun-notification__body {
+  min-width: 0;
+}
 
 /* src/components/feedback/ProgressBar.css */
 .klun-progress-bar {
@@ -9430,7 +9665,7 @@ body {
   padding: 0 12px;
   border-radius: var(--_r);
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
 .klun-autocomplete__field[data-open] {
@@ -9440,19 +9675,25 @@ body {
   background: var(--klun-bg-weak-50);
   opacity: 0.5;
 }
+.klun-autocomplete__field--error {
+  box-shadow: inset 0 0 0 1px var(--klun-state-error-base);
+}
+.klun-autocomplete__field--error[data-open] {
+  box-shadow: inset 0 0 0 2px var(--klun-state-error-base);
+}
 .klun-autocomplete--small {
   --_h: 36px;
-  --_r: var(--klun-radius-lg);
+  --_r: var(--klun-radius-sm);
   --_font: var(--klun-text-paragraph-sm);
 }
 .klun-autocomplete--medium {
   --_h: 40px;
-  --_r: var(--klun-radius-lg);
+  --_r: var(--klun-radius-md);
   --_font: var(--klun-text-paragraph-sm);
 }
 .klun-autocomplete--large {
   --_h: 48px;
-  --_r: var(--klun-radius-xl);
+  --_r: var(--klun-radius-lg);
   --_font: var(--klun-text-paragraph-md);
 }
 .klun-autocomplete__input {
@@ -9482,14 +9723,14 @@ body {
   padding: 6px;
   background: var(--klun-bg-white-0);
   border-radius: var(--klun-radius-xl);
-  box-shadow: var(--klun-shadow-md, 0 16px 32px -12px rgba(14, 18, 27, 0.12)), inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: var(--klun-shadow-md, 0 16px 32px -12px rgba(14, 18, 27, 0.12)), inset 0 0 0 1px var(--klun-stroke-control);
   max-height: 280px;
   overflow-y: auto;
 }
 .klun-autocomplete__empty {
   padding: 10px 10px;
   font: var(--klun-text-paragraph-sm);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-autocomplete__option {
   display: flex;
@@ -9531,7 +9772,7 @@ body {
 }
 .klun-autocomplete__option-desc {
   font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 
 /* src/components/forms/Cascader.css */
@@ -9574,13 +9815,13 @@ body {
   text-align: left;
   cursor: pointer;
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
   font: var(--_font);
   color: var(--klun-text-strong-950);
 }
 .klun-cascader__trigger[data-empty] {
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-cascader[data-open] .klun-cascader__trigger {
   box-shadow: inset 0 0 0 2px var(--klun-primary-base);
@@ -9658,6 +9899,10 @@ body {
   color: var(--klun-text-sub-600);
   transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
+.klun-cascader__option:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--klun-focus-ring-color);
+}
 .klun-cascader__option:hover {
   background: var(--klun-bg-weak-50);
 }
@@ -9689,7 +9934,7 @@ body {
 /* src/components/forms/CharacterCounter.css */
 .klun-character-counter {
   font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
@@ -9697,7 +9942,9 @@ body {
   color: var(--klun-state-error-base);
 }
 .klun-character-counter__max {
-  opacity: 0.6;
+  color: inherit;
+  opacity: 1;
+  font-weight: 400;
 }
 
 /* src/components/forms/Checkbox.css */
@@ -9798,7 +10045,7 @@ body {
   padding: 16px;
   border-radius: var(--klun-radius-2xl);
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   cursor: pointer;
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
@@ -9864,7 +10111,7 @@ body {
   justify-content: center;
   border-radius: var(--klun-radius-sm);
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
 .klun-checkbox-card__input:checked + .klun-checkbox-card__box {
@@ -9942,7 +10189,7 @@ body {
   padding: 16px;
   background: var(--klun-bg-white-0);
   border-radius: var(--klun-radius-2xl);
-  box-shadow: var(--klun-shadow-md), inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: var(--klun-shadow-md), inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-color-picker__swatches {
   display: grid;
@@ -9968,7 +10215,7 @@ body {
   height: 40px;
   padding: 0 10px;
   border-radius: var(--klun-radius-lg);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-color-picker__preview {
   width: 22px;
@@ -10063,7 +10310,7 @@ body {
 }
 .klun-compact-select--stroke .klun-compact-select__trigger {
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-compact-select--ghost .klun-compact-select__trigger {
   background: transparent;
@@ -10182,6 +10429,9 @@ body {
 .klun-compact-select-for-input--disabled .klun-compact-select-for-input__trigger {
   cursor: not-allowed;
 }
+.klun-compact-select-for-input__trigger:focus-visible {
+  box-shadow: var(--klun-shadow-button-primary-focus);
+}
 .klun-compact-select-for-input__icon {
   display: inline-flex;
   align-items: center;
@@ -10240,7 +10490,7 @@ body {
   align-items: center;
   overflow: hidden;
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-counter-input--small {
   height: var(--klun-control-h-sm, 32px);
@@ -10304,7 +10554,7 @@ body {
   box-shadow: inset 1px 0 0 var(--klun-stroke-soft-200), inset -1px 0 0 var(--klun-stroke-soft-200);
 }
 .klun-counter-input__suffix {
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 
 /* src/components/forms/CronEditor.css */
@@ -10362,7 +10612,7 @@ body {
 }
 .klun-cron__field-label {
   font: var(--klun-text-label-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-cron__select,
 .klun-cron__input {
@@ -10372,7 +10622,7 @@ body {
   border: none;
   border-radius: var(--_radius);
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   color: var(--klun-text-strong-950);
   font: var(--_font);
   box-sizing: border-box;
@@ -10423,7 +10673,7 @@ body {
   padding: 16px;
   background: var(--klun-bg-white-0);
   border-radius: var(--klun-radius-2xl);
-  box-shadow: var(--klun-shadow-md), inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: var(--klun-shadow-md), inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-date-picker--bare {
   width: 100%;
@@ -10462,7 +10712,7 @@ body {
 .klun-date-picker__weekday {
   text-align: center;
   font: var(--klun-text-subheading-2xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   padding: 4px 0;
 }
 .klun-date-picker__day {
@@ -10476,7 +10726,7 @@ body {
 }
 .klun-date-picker__day[data-today] {
   color: var(--klun-primary-base);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-date-picker__day[data-selected] {
   background: var(--klun-primary-base);
@@ -10495,7 +10745,7 @@ body {
   padding: 16px;
   background: var(--klun-bg-white-0);
   border-radius: var(--klun-radius-2xl);
-  box-shadow: var(--klun-shadow-md), inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: var(--klun-shadow-md), inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-date-range-picker--bare {
   width: 100%;
@@ -10534,7 +10784,7 @@ body {
 .klun-date-range-picker__weekday {
   text-align: center;
   font: var(--klun-text-subheading-2xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   padding: 4px 0;
 }
 .klun-date-range-picker__cell[data-in-range],
@@ -10574,7 +10824,7 @@ body {
   padding: 16px;
   background: var(--klun-bg-white-0);
   border-radius: var(--klun-radius-2xl);
-  box-shadow: var(--klun-shadow-md), inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: var(--klun-shadow-md), inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-date-time-picker__panel {
   display: flex;
@@ -10618,7 +10868,7 @@ body {
   background: var(--klun-bg-white-0);
   font: var(--_font, var(--klun-text-title-h6));
   color: var(--klun-text-strong-950);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
 .klun-digit-input__cell[data-filled] {
@@ -10630,6 +10880,15 @@ body {
 .klun-digit-input--disabled .klun-digit-input__cell {
   background: var(--klun-bg-weak-50);
 }
+.klun-digit-input__cell:focus-visible {
+  box-shadow: var(--klun-shadow-button-primary-focus);
+}
+.klun-digit-input__cell[data-filled]:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--klun-primary-base), var(--klun-shadow-button-primary-focus);
+}
+.klun-digit-input--error .klun-digit-input__cell:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--klun-state-error-base), var(--klun-shadow-button-error-focus);
+}
 
 /* src/components/forms/EmojiPicker.css */
 .klun-emoji-picker {
@@ -10647,7 +10906,7 @@ body {
   padding: 0 8px;
   border-radius: var(--klun-radius-md);
   background: var(--klun-bg-weak-50);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-emoji-picker__search i {
   flex: none;
@@ -10685,7 +10944,7 @@ body {
 .klun-emoji-picker__group-title {
   padding: 0 2px;
   font: var(--klun-text-label-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-emoji-picker__grid {
   display: grid;
@@ -10717,7 +10976,7 @@ body {
   padding: 24px 0;
   text-align: center;
   font: var(--klun-text-paragraph-sm);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 
 /* src/components/forms/Field.css */
@@ -10793,13 +11052,16 @@ body {
   cursor: pointer;
   outline: none;
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1.5px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1.5px var(--klun-stroke-control);
   transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease), box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
 .klun-file-upload[data-dragover] {
   background: var(--klun-primary-lighter);
   box-shadow: inset 0 0 0 1.5px var(--klun-primary-base);
 }
+.klun-file-upload:focus-visible {
+  box-shadow: inset 0 0 0 1.5px var(--klun-stroke-control), var(--klun-shadow-button-primary-focus);
+}
 .klun-file-upload__icon {
   display: flex;
   align-items: center;
@@ -10820,7 +11082,7 @@ body {
 }
 .klun-file-upload__hint {
   font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 
 /* src/components/forms/Form.css */
@@ -10869,7 +11131,7 @@ body {
 }
 .klun-form-item__help {
   font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 
 /* src/components/forms/Hint.css */
@@ -10878,7 +11140,7 @@ body {
   align-items: center;
   gap: 4px;
   font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-hint--error {
   color: var(--klun-state-error-base);
@@ -10904,7 +11166,7 @@ body {
   background: var(--klun-bg-white-0);
   border: none;
   border-radius: var(--klun-radius-md);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   cursor: pointer;
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
@@ -10945,7 +11207,7 @@ body {
   background: var(--klun-bg-weak-50);
   border: none;
   border-radius: var(--klun-radius-lg, 8px);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   outline: none;
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
@@ -11085,8 +11347,8 @@ body {
   background: var(--klun-bg-white-0);
   background-size: cover;
   background-position: center;
-  box-shadow: inset 0 0 0 1.5px var(--klun-stroke-sub-300, var(--klun-stroke-soft-200));
-  outline: 1.5px dashed var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1.5px var(--klun-stroke-sub-300, var(--klun-stroke-control));
+  outline: 1.5px dashed var(--klun-stroke-control);
   outline-offset: -1.5px;
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
@@ -11098,7 +11360,7 @@ body {
 }
 .klun-image-upload__dropzone--filled {
   background-color: var(--klun-bg-weak-50);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   outline: none;
 }
 .klun-image-upload__dropzone[data-dragover] {
@@ -11149,7 +11411,7 @@ body {
 }
 .klun-image-upload__hint {
   font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-image-upload__remove {
   margin-top: 2px;
@@ -11289,31 +11551,31 @@ body {
   align-items: center;
   gap: 8px;
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
 .klun-input--xsmall {
   height: var(--klun-control-h-sm, 32px);
   padding: 0 var(--klun-field-px-xs, 8px);
-  border-radius: var(--klun-radius-md);
+  border-radius: var(--klun-radius-sm);
   font: var(--klun-text-paragraph-sm);
 }
 .klun-input--small {
   height: var(--klun-control-h-md, 36px);
   padding: 0 var(--klun-field-px-sm, 10px);
-  border-radius: var(--klun-radius-lg);
+  border-radius: var(--klun-radius-sm);
   font: var(--klun-text-paragraph-sm);
 }
 .klun-input--medium {
   height: var(--klun-control-h-lg, 40px);
   padding: 0 var(--klun-field-px-md, 12px);
-  border-radius: var(--klun-radius-lg);
+  border-radius: var(--klun-radius-md);
   font: var(--klun-text-paragraph-sm);
 }
 .klun-input--large {
   height: var(--klun-control-h-xl, 48px);
   padding: 0 var(--klun-field-px-lg, 14px);
-  border-radius: var(--klun-radius-xl);
+  border-radius: var(--klun-radius-lg);
   font: var(--klun-text-paragraph-md);
 }
 .klun-input:focus-within {
@@ -11403,7 +11665,7 @@ body {
   padding: 0 10px;
   border-radius: var(--klun-radius-lg);
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
 .klun-input-group:focus-within {
@@ -11547,7 +11809,7 @@ body {
 }
 .klun-label__sublabel {
   font: var(--klun-text-paragraph-sm);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 
 /* src/components/forms/PasswordStrength.css */
@@ -11740,7 +12002,7 @@ body {
   padding: 16px;
   border-radius: var(--klun-radius-2xl);
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   cursor: pointer;
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
@@ -11795,7 +12057,7 @@ body {
 }
 .klun-radio-card__unit {
   font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-radio-card__control {
   position: relative;
@@ -11819,7 +12081,7 @@ body {
   inset: 0;
   border-radius: var(--klun-radius-pill);
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
 .klun-radio-card__input:checked + .klun-radio-card__box {
@@ -11852,15 +12114,14 @@ body {
 }
 .klun-range-slider__rail {
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   height: var(--_track);
   border-radius: var(--klun-radius-pill);
   background: var(--klun-stroke-soft-200);
 }
 .klun-range-slider__fill {
   position: absolute;
-  left: var(--klun-range-slider-lo);
+  inset-inline-start: var(--klun-range-slider-lo);
   width: calc(var(--klun-range-slider-hi) - var(--klun-range-slider-lo));
   height: var(--_track);
   border-radius: var(--klun-radius-pill);
@@ -11878,15 +12139,14 @@ body {
   pointer-events: none;
 }
 .klun-range-slider__thumb--lo {
-  left: calc(var(--klun-range-slider-lo) - var(--_thumb) / 2);
+  inset-inline-start: calc(var(--klun-range-slider-lo) - var(--_thumb) / 2);
 }
 .klun-range-slider__thumb--hi {
-  left: calc(var(--klun-range-slider-hi) - var(--_thumb) / 2);
+  inset-inline-start: calc(var(--klun-range-slider-hi) - var(--_thumb) / 2);
 }
 .klun-range-slider__input {
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   width: 100%;
   height: var(--_thumb);
   margin: 0;
@@ -11930,7 +12190,7 @@ body {
   flex-direction: column;
   border-radius: var(--klun-radius-lg);
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   overflow: hidden;
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
@@ -11973,7 +12233,7 @@ body {
 .klun-rich-editor__source[data-active] {
   background: var(--klun-bg-white-0);
   color: var(--klun-text-strong-950);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-rich-editor__sourcearea {
   border-bottom: 1px solid var(--klun-stroke-soft-200);
@@ -11990,7 +12250,7 @@ body {
 }
 .klun-rich-editor__area:empty::before {
   content: attr(data-placeholder);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
   pointer-events: none;
 }
 .klun-rich-editor__area h1 {
@@ -12036,6 +12296,7 @@ body {
 }
 .klun-rich-editor__area:focus-visible {
   outline: none;
+  box-shadow: inset 0 0 0 2px var(--klun-focus-ring-color);
 }
 
 /* src/components/forms/RichEditorToolbar.css */
@@ -12046,7 +12307,7 @@ body {
   padding: 4px;
   border-radius: var(--klun-radius-xl);
   background: var(--klun-bg-white-0);
-  box-shadow: var(--klun-shadow-sm), inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: var(--klun-shadow-sm), inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-rich-editor-toolbar__divider {
   width: 1px;
@@ -12090,32 +12351,32 @@ body {
   text-align: left;
   background: var(--klun-bg-white-0);
   color: var(--klun-text-strong-950);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   cursor: pointer;
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
 .klun-select--xsmall .klun-select__trigger {
   height: var(--klun-control-h-sm, 32px);
   padding: 0 var(--klun-field-px-xs, 8px);
-  border-radius: var(--klun-radius-md);
+  border-radius: var(--klun-radius-sm);
   font: var(--klun-text-paragraph-sm);
 }
 .klun-select--small .klun-select__trigger {
   height: var(--klun-control-h-md, 36px);
   padding: 0 var(--klun-field-px-sm, 10px);
-  border-radius: var(--klun-radius-lg);
+  border-radius: var(--klun-radius-sm);
   font: var(--klun-text-paragraph-sm);
 }
 .klun-select--medium .klun-select__trigger {
   height: var(--klun-control-h-lg, 40px);
   padding: 0 var(--klun-field-px-md, 12px);
-  border-radius: var(--klun-radius-lg);
+  border-radius: var(--klun-radius-md);
   font: var(--klun-text-paragraph-sm);
 }
 .klun-select--large .klun-select__trigger {
   height: var(--klun-control-h-xl, 48px);
   padding: 0 var(--klun-field-px-lg, 14px);
-  border-radius: var(--klun-radius-xl);
+  border-radius: var(--klun-radius-lg);
   font: var(--klun-text-paragraph-md);
 }
 .klun-select__trigger:focus-visible,
@@ -12183,6 +12444,11 @@ body {
     transform: rotate(360deg);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .klun-select__spinner {
+    animation: none;
+  }
+}
 
 /* src/components/forms/SelectMenu.css */
 .klun-select-menu {
@@ -12199,7 +12465,7 @@ body {
   cursor: pointer;
   background: var(--klun-bg-white-0);
   color: var(--klun-text-strong-950);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
 .klun-select-menu__trigger--small {
@@ -12286,6 +12552,12 @@ body {
   border-radius: var(--klun-radius-xl);
   box-shadow: var(--klun-shadow-md, 0 16px 32px -12px rgba(14, 18, 27, 0.1)), inset 0 0 0 1px var(--klun-stroke-soft-200);
 }
+.klun-select-menu__panel--start {
+  inset-inline-start: 0;
+}
+.klun-select-menu__panel--end {
+  inset-inline-end: 0;
+}
 .klun-select-menu__panel--left {
   left: 0;
 }
@@ -12339,7 +12611,7 @@ body {
 }
 .klun-select-menu__option-desc {
   font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-select-menu__check {
   color: var(--klun-primary-base);
@@ -12364,6 +12636,9 @@ body {
       var(--klun-bg-soft-200) var(--klun-slider-value),
       var(--klun-bg-soft-200) 100%);
 }
+.klun-slider:focus-visible {
+  box-shadow: var(--klun-shadow-button-primary-focus);
+}
 .klun-slider--small {
   --_h: 4px;
 }
@@ -12450,7 +12725,7 @@ body {
   width: 100%;
   border-radius: var(--_radius, var(--klun-radius-xl));
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
 .klun-textarea--xsmall {
@@ -12512,7 +12787,7 @@ body {
   padding: 0 var(--klun-control-px-sm, 12px);
   border-radius: var(--klun-radius-lg);
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
 }
 .klun-time-picker__icon {
   font-size: 18px;
@@ -12551,7 +12826,7 @@ body {
   box-shadow: inset 0 0 0 1px var(--klun-primary-base);
 }
 .klun-time-picker__sep {
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-time-picker__listbox {
   min-width: 60px;
@@ -13001,7 +13276,7 @@ body {
   line-height: 1;
   color: var(--klun-icon-sub-600);
   background: var(--klun-bg-white-0);
-  border: 1px solid var(--klun-stroke-soft-200);
+  border: 1px solid var(--klun-stroke-control);
   border-radius: var(--klun-radius-sm);
   cursor: pointer;
   opacity: 0;
@@ -13141,7 +13416,7 @@ body {
   cursor: pointer;
   background: var(--klun-bg-white-0);
   color: var(--klun-text-sub-600);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease), color var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
 .klun-horizontal-filter__item:hover {
@@ -13172,7 +13447,7 @@ body {
   font: var(--klun-text-label-xs);
   font-size: 11px;
   background: var(--klun-bg-weak-50);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-horizontal-filter__item[data-active] .klun-horizontal-filter__count,
 .klun-horizontal-filter__item[aria-selected=true] .klun-horizontal-filter__count {
@@ -13289,7 +13564,7 @@ body {
   font: var(--klun-text-subheading-2xs, var(--klun-text-label-xs));
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-menu__divider {
   height: 1px;
@@ -13407,7 +13682,7 @@ body {
 }
 .klun-pagination__cell[data-active=true] {
   background: var(--klun-bg-white-0);
-  box-shadow: var(--klun-shadow-xs), inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: var(--klun-shadow-xs), inset 0 0 0 1px var(--klun-stroke-control);
   color: var(--klun-text-strong-950);
 }
 .klun-pagination__cell:disabled {
@@ -13417,7 +13692,7 @@ body {
 .klun-pagination__ellipsis {
   min-width: 24px;
   text-align: center;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 
 /* src/components/navigation/SegmentedControl.css */
@@ -13470,7 +13745,7 @@ body {
   --_stroke: var(--klun-stroke-soft-200);
   --_fg: var(--klun-text-strong-950);
   --_sub-fg: var(--klun-text-sub-600);
-  --_soft-fg: var(--klun-text-soft-400);
+  --_soft-fg: var(--klun-text-helper);
   display: flex;
   height: 100%;
   color: var(--_fg);
@@ -13513,8 +13788,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: var(--klun-control-h-lg);
+  height: var(--klun-control-h-lg);
   padding: 0;
   border: 0;
   border-radius: var(--klun-radius-md);
@@ -13707,7 +13982,7 @@ body {
   display: flex;
   align-items: center;
   width: 100%;
-  height: 40px;
+  height: var(--klun-control-h-lg);
   margin: 2px 0;
   padding: 8px 16px;
   border: 0;
@@ -13902,6 +14177,10 @@ body {
 .klun-step-indicator__connector[data-state=complete] {
   background: var(--klun-primary-base);
 }
+.klun-step-indicator__label,
+.klun-step-indicator__description {
+  overflow-wrap: anywhere;
+}
 
 /* src/components/navigation/Stepper.css */
 .klun-stepper {
@@ -14078,7 +14357,14 @@ body {
 }
 .klun-tabs--pill .klun-tabs__badge {
   font: var(--klun-text-label-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
+}
+.klun-tabs {
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+.klun-tabs__tab {
+  white-space: nowrap;
 }
 
 /* src/components/navigation/Wizard.css */
@@ -14256,7 +14542,7 @@ body {
   padding: 2px 6px;
   border-radius: var(--klun-radius-sm);
   background: var(--klun-bg-weak-50);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-command-menu__list {
   max-height: 360px;
@@ -14267,7 +14553,7 @@ body {
   padding: 32px 0;
   text-align: center;
   font: var(--klun-text-paragraph-sm);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-command-menu__group {
   margin-bottom: 6px;
@@ -14277,7 +14563,7 @@ body {
   font: var(--klun-text-subheading-2xs);
   letter-spacing: var(--klun-subheading-2xs-tracking);
   text-transform: uppercase;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-command-menu__item {
   display: flex;
@@ -14308,7 +14594,7 @@ body {
 }
 .klun-command-menu__shortcut {
   font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 
 /* src/components/overlays/Confirm.css */
@@ -14406,7 +14692,7 @@ body {
   background: var(--klun-bg-white-0);
   border: none;
   border-radius: var(--klun-radius-lg);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   outline: none;
   transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
@@ -14427,7 +14713,7 @@ body {
   font: var(--klun-text-label-sm);
   color: var(--klun-text-sub-600);
   background: var(--klun-bg-white-0);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-control);
   cursor: pointer;
   transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
@@ -14466,6 +14752,11 @@ body {
     transform: rotate(360deg);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .klun-confirm__spinner {
+    animation: none;
+  }
+}
 
 /* src/components/overlays/ContextMenu.css */
 .klun-context-menu__layer {
@@ -14534,7 +14825,7 @@ body {
 .klun-context-menu__shortcut {
   flex: none;
   font-size: 12px;
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 .klun-context-menu__arrow {
   flex: none;
@@ -14555,7 +14846,7 @@ body {
   position: fixed;
   inset: 0;
   z-index: 100;
-  background: rgba(0, 0, 0, 0.45);
+  background: var(--klun-scrim);
   backdrop-filter: blur(3px);
   display: flex;
 }
@@ -14672,6 +14963,14 @@ body {
   padding: 16px 20px;
   border-top: 1px solid var(--klun-stroke-soft-200);
 }
+@media (prefers-reduced-motion: reduce) {
+  .klun-drawer--right .klun-drawer__panel,
+  .klun-drawer--left .klun-drawer__panel,
+  .klun-drawer--top .klun-drawer__panel,
+  .klun-drawer--bottom .klun-drawer__panel {
+    animation: none;
+  }
+}
 
 /* src/components/overlays/Dropdown.css */
 .klun-dropdown {
@@ -14690,6 +14989,12 @@ body {
   border-radius: var(--klun-radius-xl);
   box-shadow: var(--klun-shadow-md), inset 0 0 0 1px var(--klun-stroke-soft-200);
 }
+.klun-dropdown__menu--start {
+  inset-inline-start: 0;
+}
+.klun-dropdown__menu--end {
+  inset-inline-end: 0;
+}
 .klun-dropdown__menu--left {
   left: 0;
 }
@@ -14736,7 +15041,7 @@ body {
 }
 .klun-dropdown__shortcut {
   font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  color: var(--klun-text-helper);
 }
 
 /* src/components/overlays/HoverCard.css */
@@ -14793,7 +15098,7 @@ body {
       to bottom,
       rgba(0, 0, 0, 0.55),
       transparent);
-  color: #fff;
+  color: var(--klun-static-static-white);
 }
 .klun-image-viewer__title {
   display: flex;
@@ -14801,7 +15106,7 @@ body {
   gap: 10px;
   min-width: 0;
   font: var(--klun-text-label-sm, 600 14px/1.4 sans-serif);
-  color: #fff;
+  color: var(--klun-static-static-white);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -14810,7 +15115,7 @@ body {
   flex: none;
   padding: 1px 8px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.16);
+  background: var(--klun-alpha-white-alpha-16);
   font-size: 12px;
   font-weight: 500;
 }
@@ -14829,13 +15134,13 @@ body {
   border: none;
   border-radius: 8px;
   background: transparent;
-  color: #fff;
+  color: var(--klun-static-static-white);
   font-size: 18px;
   cursor: pointer;
   transition: background 0.12s ease;
 }
 .klun-image-viewer__btn:hover {
-  background: rgba(255, 255, 255, 0.16);
+  background: var(--klun-alpha-white-alpha-16);
 }
 .klun-image-viewer__zoom {
   min-width: 46px;
@@ -14879,7 +15184,7 @@ body {
   border: none;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.12);
-  color: #fff;
+  color: var(--klun-static-static-white);
   font-size: 26px;
   cursor: pointer;
   transition: background 0.12s ease;
@@ -14904,7 +15209,7 @@ body {
   justify-content: center;
   padding: 24px;
   overflow-y: auto;
-  background: rgba(0, 0, 0, 0.45);
+  background: var(--klun-scrim);
   backdrop-filter: blur(3px);
 }
 .klun-modal--centered {
@@ -15134,6 +15439,14 @@ body {
     transform: rotate(360deg);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .klun-popconfirm__panel {
+    animation: none;
+  }
+  .klun-popconfirm__spinner {
+    animation: none;
+  }
+}
 
 /* src/components/overlays/Popover.css */
 .klun-popover {