@knime/kds-components 0.28.7 → 0.28.8

package/dist/index.css

@@ -1863,7 +1863,7 @@ html.kds-legacy {
 }
 
 .container {
-&[data-v-b8ccb955] {
+&[data-v-93daa14e] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -1875,46 +1875,46 @@ html.kds-legacy {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-b8ccb955]:has(input:focus:not(:disabled)) {
+&[data-v-93daa14e]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-b8ccb955]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-93daa14e]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-b8ccb955] {
+&.error[data-v-93daa14e] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-b8ccb955] {
+&.disabled[data-v-93daa14e] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-b8ccb955] {
+&[data-v-93daa14e] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-b8ccb955] {
+&.leading[data-v-93daa14e] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-b8ccb955] {
+&.trailing[data-v-93daa14e] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-b8ccb955] {
+.container.disabled &[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-b8ccb955],
-  .container:has(.input-field.has-value) &[data-v-b8ccb955] {
+.container:focus-within &[data-v-93daa14e],
+  .container:has(.input-field.has-value) &[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-b8ccb955] {
+&[data-v-93daa14e] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1933,36 +1933,36 @@ html.kds-legacy {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-b8ccb955] {
+&[data-v-93daa14e] {
     appearance: textfield;
 }
-&[data-v-b8ccb955]::-webkit-outer-spin-button,
-    &[data-v-b8ccb955]::-webkit-inner-spin-button {
+&[data-v-93daa14e]::-webkit-outer-spin-button,
+    &[data-v-93daa14e]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-b8ccb955]::-webkit-search-cancel-button {
+&[type="search"][data-v-93daa14e]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-b8ccb955]::placeholder {
+&[data-v-93daa14e]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.empty-mask[data-v-b8ccb955] {
+&.empty-mask[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-b8ccb955] {
+&[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-b8ccb955]::placeholder {
+&[data-v-93daa14e]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-b8ccb955] {
+&[data-v-93daa14e] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1972,26 +1972,26 @@ html.kds-legacy {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-b8ccb955] {
+&.placeholder[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-b8ccb955] {
+&.disabled[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-b8ccb955] {
+.container:focus-within &[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-b8ccb955] {
+.clear-button[data-v-93daa14e] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.leading-slot[data-v-b8ccb955] {
+.leading-slot[data-v-93daa14e] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
 }
-.trailing-slot[data-v-b8ccb955] {
+.trailing-slot[data-v-93daa14e] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -1999,7 +1999,7 @@ html.kds-legacy {
   margin-left: var(--kds-spacing-container-0-12x);
 }
 
-.kds-text-input-suggestions[data-v-c9f1be40] {
+.kds-text-input-suggestions[data-v-83f45d15] {
   max-height: var(--kds-dimension-component-height-12x);
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
@@ -2359,14 +2359,14 @@ html.kds-legacy {
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-3e274ed2] {
+.kds-search-results-container[data-v-aec3e3d0] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
 
 textarea {
-&[data-v-8e5a54cf] {
+&[data-v-36211819] {
   box-sizing: border-box;
   width: 100%;
   padding: calc(
@@ -2383,32 +2383,32 @@ textarea {
   border-radius: var(--kds-border-radius-container-0-37x);
   -ms-overflow-style: none;
 }
-&.invalid[data-v-8e5a54cf] {
+&.invalid[data-v-36211819] {
     border: var(--kds-border-action-error);
 }
-&[data-v-8e5a54cf]::placeholder {
+&[data-v-36211819]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-8e5a54cf] {
+&[data-v-36211819] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
-&[data-v-8e5a54cf]::placeholder {
+&[data-v-36211819]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
-&[data-v-8e5a54cf]:hover:not(:disabled, :focus) {
+&[data-v-36211819]:hover:not(:disabled, :focus) {
     background: var(--kds-color-background-input-hover);
 }
-&[data-v-8e5a54cf]:focus:not(:disabled) {
+&[data-v-36211819]:focus:not(:disabled) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
-textarea[data-v-8e5a54cf]::-webkit-scrollbar {
+textarea[data-v-36211819]::-webkit-scrollbar {
   display: none;
 }
 

package/dist/index.js

@@ -4960,8 +4960,8 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     const handleInputDragEnd = (event) => {
       handleDragEnd(event);
     };
-    const focusInput = () => {
-      inputRef.value?.focus();
+    const focusInput = (options) => {
+      inputRef.value?.focus(options);
     };
     const clearAndFocusInput = () => {
       modelValue.value = "";
@@ -5072,7 +5072,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-b8ccb955"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-93daa14e"]]);
 
 const usePointerHandler = (updateFromEvent) => {
   const activePointerId = ref(null);
@@ -5399,7 +5399,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
       adjustByStep(direction);
     };
     __expose({
-      focus: () => baseInput.value?.focus()
+      focus: (options) => baseInput.value?.focus(options)
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, mergeProps(props, {
@@ -5568,7 +5568,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
     const suggestionId = useId();
     __expose({
-      focus: () => baseInput.value?.focus()
+      focus: (options) => baseInput.value?.focus(options)
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, {
@@ -5635,7 +5635,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTextInput = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-c9f1be40"]]);
+const KdsTextInput = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-83f45d15"]]);
 
 const HEX_RADIX = 16;
 const RGB_MAX = 255;
@@ -6338,7 +6338,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       }
     };
     __expose({
-      focus: () => input.value?.focus()
+      focus: (options) => input.value?.focus(options)
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, mergeProps(props, {
@@ -6426,7 +6426,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     const modelValue = useModel(__props, "modelValue");
     const baseInput = useTemplateRef("baseInput");
     __expose({
-      focus: () => baseInput.value?.focus()
+      focus: (options) => baseInput.value?.focus(options)
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, mergeProps(props, {
@@ -11652,7 +11652,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       }
     });
     __expose({
-      focus: () => baseInput.value?.focus()
+      focus: (options) => baseInput.value?.focus(options)
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, mergeProps(_ctx.$props, {
@@ -12091,7 +12091,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     );
     const baseInput = useTemplateRef("baseInput");
     __expose({
-      focus: () => baseInput.value?.focus()
+      focus: (options) => baseInput.value?.focus(options)
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, mergeProps(props, {
@@ -12232,7 +12232,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       emit("resultClick", itemId);
     };
     __expose({
-      focus: () => baseInput.value?.focus()
+      focus: (options) => baseInput.value?.focus(options)
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, {
@@ -12308,7 +12308,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-3e274ed2"]]);
+const KdsSearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-aec3e3d0"]]);
 
 const _hoisted_1$u = ["rows", "placeholder", "disabled", "autocomplete"];
 const DEFAULT_ROWS = 3;
@@ -12358,8 +12358,8 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     useResizeObserver(textareaElement, resize);
     watch(modelValue, resize, { immediate: true });
     __expose({
-      focus: () => {
-        textareaElement.value?.focus();
+      focus: (options) => {
+        textareaElement.value?.focus(options);
       }
     });
     return (_ctx, _cache) => {
@@ -12388,7 +12388,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-8e5a54cf"]]);
+const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-36211819"]]);
 
 const _hoisted_1$t = { class: "kds-time-picker" };
 const _hoisted_2$h = { class: "kds-time-picker-fields" };
@@ -12887,7 +12887,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       }
     });
     __expose({
-      focus: () => baseInput.value?.focus()
+      focus: (options) => baseInput.value?.focus(options)
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, mergeProps(_ctx.$props, {