Kds 461 date input

.changeset/date-input-temporal.md

@@ -0,0 +1,5 @@
+---
+"@knime/kds-components": minor
+---
+
+**BREAKING CHANGE:** `KdsDateInput` v-model type changed from `string` to `Temporal.PlainDate | null`. The `datePickerMin`/`datePickerMax` props have been renamed to `minDate`/`maxDate` and their types changed from `string` to `Temporal.PlainDate`. `temporal-polyfill` is shipped as a direct dependency of `@knime/kds-components`; consumers should import `Temporal` from the same `temporal-polyfill` package to ensure type compatibility and avoid duplicate polyfill instances.

.github/copilot-instructions.md

@@ -366,6 +366,35 @@ KNIME embeds UI extensions inside **Shadow DOM**. In CEF / Chromium 128, clickin
 
 **Guideline:** When writing `focus` handlers, **do not unconditionally overwrite existing state**. Guard destructive resets so they only apply when the state is genuinely empty or uninitialised. For example, in `MultiSelectListBox`'s `onFocus`, the selection is only reset to a single item when `modelValue` is empty — an existing multi-selection is preserved.
 
+#### Input + trailing button – focus blink on click
+
+When a `BaseInput` has a trailing action button (e.g. toggle, stepper), clicking that button causes the input's `blur` to fire **before** the button's `click`. If the `blur` handler runs validation or state changes, the user sees a brief focus blink and possibly unwanted side-effects (error flash, value normalization).
+
+**Pattern (used in `KdsNumberInput`, `KdsDateInput`):**
+
+1. Add a boolean ref `isToggling` (or `isStepping`).
+2. Set it to `true` on `@pointerdown` of the trailing button; clear it on `@pointerup` / `@pointerleave` / `@pointercancel`.
+3. In the input's `blur` handler, if the flag is `true`, call `baseInput.value?.focus()` to restore focus and `return` early — skipping validation.
+
+```vue
+<KdsButton
+  @pointerdown="isToggling = true"
+  @pointerup="isToggling = false"
+  @pointerleave="isToggling = false"
+  @pointercancel="isToggling = false"
+/>
+```
+
+```ts
+const onTextInputBlur = () => {
+  if (isToggling.value) {
+    baseInput.value?.focus();
+    return;
+  }
+  // … normal validation
+};
+```
+
 ### Migration documentation
 
 - When creating a new component, ask the user if it has an equivalent one in `@knime/components`. If it does, add migration instructions to `.github/agents/wac-to-kds-migrator.md`.

package.json

@@ -61,7 +61,6 @@
   "packageManager": "pnpm@10.33.0",
   "pnpm": {
     "overrides": {
-      "v-calendar": "https://github.com/knime/v-calendar/archive/048477f.tar.gz",
       "@vitest/eslint-plugin>@typescript-eslint/utils": "8.57.2",
       "ajv@>=7.0.0-alpha.0 <8.18.0": ">=8.18.0",
       "lodash@<4.18.1": ">=4.18.1",

packages/components/package.json

@@ -41,7 +41,8 @@
     "@knime/kds-styles": "workspace:^",
     "@knime/utils": "catalog:",
     "consola": "catalog:",
-    "pretty-bytes": "^7.1.0"
+    "pretty-bytes": "^7.1.0",
+    "temporal-polyfill": "^0.3.2"
   },
   "devDependencies": {
     "@storybook/vue3-vite": "catalog:storybook",
@@ -58,8 +59,7 @@
     "vite-plugin-lib-inject-css": "catalog:",
     "vite-svg-loader": "catalog:",
     "vue": "catalog:",
-    "vue-tsc": "catalog:",
-    "v-calendar": "catalog:patch"
+    "vue-tsc": "catalog:"
   },
   "engines": {
     "node": "24.10.0",

packages/components/src/containers/ListContainer/KdsListContainer.vue

@@ -109,6 +109,13 @@ function scrollToView() {
     ?.scrollIntoView({ block: "nearest" });
 }
 
+function scrollSelectedIntoView() {
+  nextTick(() => {
+    const selected = containerEl.value?.querySelector('[aria-selected="true"]');
+    selected?.scrollIntoView({ block: "center" });
+  });
+}
+
 const onMouseLeave = () => {
   if (!isFocused.value) {
     activeId.value = undefined;
@@ -277,6 +284,7 @@ defineExpose<KdsListContainerExpose>({
   focus: () => {
     containerEl.value?.focus();
   },
+  scrollSelectedIntoView,
 });
 </script>
 

packages/components/src/containers/ListContainer/types.ts

@@ -70,4 +70,6 @@ export type KdsListContainerExpose = {
   activeDescendant: Readonly<Ref<string | undefined>>;
   /** Moves focus to the list container element */
   focus: () => void;
+  /** Scrolls the currently selected item into view (centered) */
+  scrollSelectedIntoView: () => void;
 };