@ticatec/uniface-element 5.0.0 → 5.0.2

package/dist/form/cascade_options_select/OptionsBox.svelte

@@ -23,13 +23,59 @@
         selectedItem = item;
         onSelect(item);
     }
+
+    const handleItemKeyDown = (item: any) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleItemClick(item)(e as unknown as MouseEvent);
+        }
+    }
 </script>
 
-<div class="cascade-column" style={box$style}>
+<div class="cascade-column" style={box$style} role="listbox">
     {#each options as op (op[keyField])}
         <div class="option-item" class:selected={op[keyField] === (selectedItem ?? {})[keyField]}
-             aria-hidden="true" onclick={handleItemClick(op)}>
+             role="option" tabindex="0" aria-selected={op[keyField] === (selectedItem ?? {})[keyField]}
+             onclick={handleItemClick(op)} onkeydown={handleItemKeyDown(op)}>
             <span>{op[textField]}</span>
         </div>
     {/each}
 </div>
+
+<style>
+    /* Base sizing so a column looks correct even when the consumer doesn't
+       pass box$style — previously there was no default at all, so columns
+       had no width/overflow handling and collapsed unpredictably inside the
+       popover's flex row. box$style (inline style, applied after these
+       rules) can still override any of this per column. */
+    .cascade-column {
+        flex: 0 0 auto;
+        width: 140px;
+        height: 100%;
+        box-sizing: border-box;
+        overflow-y: auto;
+        overflow-x: hidden;
+        border-right: 1px solid var(--uniface-color-border-secondary);
+    }
+
+    .cascade-column:last-child {
+        border-right: none;
+    }
+
+    .option-item {
+        padding: 6px 12px;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .option-item:hover {
+        background-color: var(--uniface-popover-item-color-surface-hover);
+    }
+
+    .option-item.selected {
+        background-color: var(--uniface-popover-item-color-surface-active);
+        color: var(--uniface-popover-item-color-active);
+    }
+</style>

package/dist/form/checkbox/CheckBox.svelte

@@ -123,6 +123,7 @@
   --disabled-inner: var(--uniface-checkbox-checkmark-color-disabled);
   -webkit-appearance: none;
   -moz-appearance: none;
+  appearance: none;
   height: var(--uniface-checkbox-size);
   outline: none;
   display: inline-block;
@@ -191,12 +192,6 @@
   --o: 1;
   --r: var(--uniface-checkbox-check-rotation);
 }
-.uniface-checkbox input[type=checkbox] + label {
-  display: inline-block;
-  vertical-align: middle;
-  cursor: pointer;
-  margin-left: 4px;
-}
 .uniface-checkbox.compact {
   padding: 0;
   color: var(--uniface-checkbox-text-color);
@@ -224,4 +219,4 @@
 .uniface-checkbox *::before,
 .uniface-checkbox *::after {
   box-sizing: inherit;
-}</style>
+}</style>

package/dist/form/color_picker/ColorPicker.svelte

@@ -1,58 +1,173 @@
 <script lang="ts">
 
-
-    import type {OnChangeHandler} from "../../types";
     import CommonPicker from "../common_editor/CommonPicker.svelte";
+    import type CommonFieldProps from "../common_editor/CommonFieldProps";
 
-    //type OnActionHandler = () => void;
+    interface Props extends CommonFieldProps {
+        value?: string;
+    }
 
-    //export let showHex = true;
-    //export let showRgb = false;
+    // The manually-typed value must resolve to exactly #RRGGBB. An 8-digit #RRGGBBAA
+    // form was supported briefly, but <input type="color"> has no concept of alpha —
+    // the swatch always showed just the RGB portion and nothing in the UI ever
+    // rendered the transparency, so the last 2 digits had no visible effect. Dropped
+    // rather than half-implemented; revisit with a real alpha-aware swatch (checkered
+    // background + rgba preview) if this is needed later.
+    const HEX_PATTERN = /^#[0-9a-fA-F]{6}$/;
+    const DEFAULT_SWATCH = '#000000';
+
+    // CommonPicker always renders its own internal <input> in the non-readonly branch,
+    // even when a `children` snippet is also supplied — it doesn't apply the same
+    // "children replaces the default input" rule that its readonly branch does. Every
+    // other consumer works around this by never passing `children` in the first place
+    // (DatePicker, OptionsSelect...) except OptionsMultiSelect, which needs custom
+    // content (its tag list) the same way ColorPicker needs its swatch+hex layout —
+    // it hides CommonPicker's own input via `input$style` (shrink to 1x1, transparent,
+    // click-through) so only the custom children are visible. Same fix here: without
+    // this, edit mode showed CommonPicker's own empty input fighting for space with our
+    // swatch, while readonly mode (which only renders `children`) looked correct.
+    const HIDDEN_INTERNAL_INPUT_STYLE = 'position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none';
+
+    let {
+        variant,
+        theme,
+        disabled = false,
+        readonly = false,
+        compact = false,
+        value = $bindable<string | undefined>("#000000"),
+        style,
+        placeholder,
+        error,
+        tooltip,
+        onchange,
+        onfocus,
+        onblur
+    }: Props = $props();
+
+    let editor: HTMLInputElement | undefined = $state();
+    let textInput: HTMLInputElement | undefined = $state();
+
+    // Editing buffer for the manual hex field, kept separate from `value` so the user
+    // can type through transient/incomplete states (e.g. "#3b8") without every
+    // keystroke being validated against the full #RRGGBB format — validation only
+    // happens on commit (blur / Enter).
+    let textValue = $state(value ?? '');
+
+    $effect(() => {
+        textValue = value ?? '';
+    });
+
+    let swatchValue = $derived(value && HEX_PATTERN.test(value) ? value : DEFAULT_SWATCH);
+
+    export const focus = () => {
+        editor?.focus();
+    }
 
-    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
-    export let disabled: boolean = false;
-    export let readonly: boolean = false;
-    export let compact: boolean = false;
-    export let value: any = "#ff3e00";
-    export let style: string = '';
-    export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
+    const clean = () => {
+        value = undefined;
+        onchange?.(undefined);
+    }
 
+    const handleActionIconClick = () => {
+        if (!readonly && !disabled) {
+            editor?.click();
+        }
+    }
 
-    let oldValue = value;
+    const handleSwatchChange = (event: Event) => {
+        const newValue = (event.target as HTMLInputElement).value;
+        value = newValue;
+        onchange?.(newValue);
+    }
 
-    $: if (oldValue != value) {
-        oldValue = value;
+    // The native color picker dialog opens on `click`, and preventing the default
+    // action here blocks it — this is the only reliable way to make the swatch
+    // non-interactive for `readonly`, since <input type="color"> ignores the
+    // `readonly` attribute entirely. Using the native `disabled` attribute instead
+    // would work too, but it also greys the swatch out, which conflates readonly
+    // with disabled (see the component README: readonly stays fully visible,
+    // disabled is dimmed).
+    const handleColorInputClick = (event: MouseEvent) => {
+        if (readonly) {
+            event.preventDefault();
+        }
     }
 
-    let editor: any;
+    const handleColorInputKeydown = (event: KeyboardEvent) => {
+        if (readonly && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+        }
+    }
 
-    const clean = () => {
-        onChange(null)
+    const commitTextValue = () => {
+        let candidate = textValue.trim();
+        if (candidate && !candidate.startsWith('#')) {
+            candidate = `#${candidate}`;
+        }
+        if (HEX_PATTERN.test(candidate)) {
+            textValue = candidate;
+            if (candidate !== value) {
+                value = candidate;
+                onchange?.(candidate);
+            }
+        } else {
+            // Doesn't resolve to a valid #RRGGBB value on commit — revert to the last
+            // known-good value rather than accepting a malformed color.
+            textValue = value ?? '';
+        }
+    }
+
+    // Only '#' and hex digits are allowed while typing; the exact length requirement
+    // is enforced separately on commit (see commitTextValue), since rejecting
+    // incomplete input on every keystroke would make it impossible to type a value
+    // character by character.
+    const handleTextKeydown = (event: KeyboardEvent) => {
+        const allowKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
+        if (allowKeys.includes(event.key) || event.metaKey || event.ctrlKey) return;
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            textInput?.blur();
+            return;
+        }
+        if (event.key === 'Escape') {
+            textValue = value ?? '';
+            textInput?.blur();
+            return;
+        }
+        if (!/^[0-9a-fA-F#]$/.test(event.key)) {
+            event.preventDefault();
+        }
     }
 
-    const handleActionIconClick = async () => {
-        editor.click();
+    const handleTextPaste = (event: ClipboardEvent) => {
+        const pasted = event.clipboardData?.getData('text') ?? '';
+        if (/[^0-9a-fA-F#]/.test(pasted)) {
+            event.preventDefault();
+        }
     }
 
-    function handleColorChange(event: Event) {
-        // selectedColor = (event.target as HTMLElement).value;
-        // rgbValues = hexToRgb(selectedColor);
-        // console.log(selectedColor, rgbValues);
-        // dispatch('change', {
-        //     hex: selectedColor,
-        //     rgb: rgbValues
-        // });
+    // Defense in depth against anything that bypasses handleTextKeydown (IME, mobile
+    // virtual keyboards, drag-and-drop text) — strip disallowed characters and cap at
+    // one leading '#' plus 6 hex digits.
+    const handleTextInput = () => {
+        const hasHash = textValue.startsWith('#');
+        const hexOnly = textValue.replace(/#/g, '').replace(/[^0-9a-fA-F]/g, '').slice(0, 6);
+        const sanitized = (hasHash ? '#' : '') + hexOnly;
+        if (sanitized !== textValue) {
+            textValue = sanitized;
+        }
     }
 
 </script>
 
-<CommonPicker {variant} {style} {compact} className="multiple" iconName="icon_google_color_lens"
-              autoFit clear={clean} textValue={value} {readonly} {disabled} iconClickHandler={handleActionIconClick}>
-<!--    <div style="flex: 1 1 auto; width: 50%; height: 60%; border-radius: 4px; background-color: {value}"></div>-->
+<CommonPicker {variant} {style} {theme} {error} {tooltip} {compact} {placeholder} className="multiple" iconName="icon_google_color_lens"
+              autoFit clear={clean} textValue={value} {readonly} {disabled} {onfocus} {onblur} iconClickHandler={handleActionIconClick}
+              input$style={HIDDEN_INTERNAL_INPUT_STYLE}>
     <div style="width: 100%; display: flex; overflow: hidden; flex-direction: row; align-items: center; height: 100%; gap: 8px">
-        <input bind:this={editor} style="flex: 0 0 auto; width: 40%; height: 80%; border-radius: 8px;" type="color"  bind:value on:change={handleColorChange}/>
-        <input style="flex: 0 0 auto; width: 50%; text-align: center" class="text-editor" readonly value={value??''} {disabled}/>
+        <input bind:this={editor} style="flex: 0 0 auto; width: 40%; height: 80%; border-radius: 8px;" type="color" value={swatchValue} {disabled}
+               tabindex={readonly ? -1 : 0} onclick={handleColorInputClick} onkeydown={handleColorInputKeydown} onchange={handleSwatchChange}/>
+        <input bind:this={textInput} style="flex: 0 0 auto; width: 50%; text-align: center" class="text-editor" bind:value={textValue}
+               readonly={readonly} {disabled} {placeholder} maxlength="7" spellcheck="false" autocomplete="off"
+               onblur={commitTextValue} onkeydown={handleTextKeydown} onpaste={handleTextPaste} oninput={handleTextInput}/>
     </div>
-
-
 </CommonPicker>

package/dist/form/color_picker/ColorPicker.svelte.d.ts

@@ -1,27 +1,9 @@
-import type { OnChangeHandler } from "../../types";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type CommonFieldProps from "../common_editor/CommonFieldProps";
+interface Props extends CommonFieldProps {
+    value?: string;
 }
-declare const ColorPicker: $$__sveltets_2_IsomorphicComponent<{
-    variant?: "" | "plain" | "outlined" | "filled";
-    disabled?: boolean;
-    readonly?: boolean;
-    compact?: boolean;
-    value?: any;
-    style?: string;
-    onChange?: OnChangeHandler<any>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ColorPicker = InstanceType<typeof ColorPicker>;
+declare const ColorPicker: import("svelte").Component<Props, {
+    focus: () => void;
+}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
 export default ColorPicker;

package/dist/form/color_picker/ColorPickerPanel.svelte

@@ -3,14 +3,25 @@
 
     import i18nRes from "../../i18nRes";
 
-    export let initialColor = "#ffffff";
-    export let showHex = true;
-    export let showRgb = false;
-    export let swatches: Array<any> = [];
+    interface Props {
+        initialColor?: string;
+        showHex?: boolean;
+        showRgb?: boolean;
+        swatches?: Array<any>;
+        onchange?: (color: string) => void;
+    }
+
+    let {initialColor = "#ffffff", showHex = true, showRgb = false, swatches = [], onchange}: Props = $props();
 
-    let selectedColor = initialColor;
-    let rgbValues = hexToRgb(initialColor);
+    // Neutral initial value + effect-driven sync (rather than $state(initialColor))
+    // avoids implying initialColor is captured only once; the effect keeps
+    // selectedColor in sync whenever the prop changes later.
+    let selectedColor = $state('#ffffff');
+    let rgbValues = $derived(hexToRgb(selectedColor));
 
+    $effect(() => {
+        selectedColor = initialColor;
+    });
 
     // Convert hex to RGB
     function hexToRgb(hex: string) {
@@ -22,24 +33,15 @@
         } : { r: 0, g: 0, b: 0 };
     }
 
-    // Emit change event when color changes
+    // selectedColor is already updated by bind:value before this fires
     function handleColorChange(event: Event) {
-        selectedColor = "0x000000"; //event.target?.value;
-        rgbValues = hexToRgb(selectedColor);
-        // dispatch('change', {
-        //     hex: selectedColor,
-        //     rgb: rgbValues
-        // });
+        onchange?.(selectedColor);
     }
 
     // Select a swatch
     function selectSwatch(color: any) {
         selectedColor = color;
-        rgbValues = hexToRgb(selectedColor);
-        // dispatch('change', {
-        //     hex: selectedColor,
-        //     rgb: rgbValues
-        // });
+        onchange?.(selectedColor);
     }
 </script>
 
@@ -53,7 +55,7 @@
                 id="color-input"
                 type="color"
                 bind:value={selectedColor}
-                on:change={handleColorChange}
+                onchange={handleColorChange}
         />
         <div
                 class="color-preview"
@@ -77,9 +79,10 @@
             <div class="swatches">
                 {#each swatches as swatch}
                         <button
+                                type="button"
                                 class="swatch"
                                 style="background-color: {swatch};"
-                                on:click={() => selectSwatch(swatch)}
+                                onclick={() => selectSwatch(swatch)}
                                 aria-label={`Select color ${swatch}`}
                                 class:selected={selectedColor === swatch}
                         ></button>

package/dist/form/color_picker/ColorPickerPanel.svelte.d.ts

@@ -1,23 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ColorPickerPanel: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     initialColor?: string;
     showHex?: boolean;
     showRgb?: boolean;
     swatches?: Array<any>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ColorPickerPanel = InstanceType<typeof ColorPickerPanel>;
+    onchange?: (color: string) => void;
+}
+declare const ColorPickerPanel: import("svelte").Component<Props, {}, "">;
+type ColorPickerPanel = ReturnType<typeof ColorPickerPanel>;
 export default ColorPickerPanel;

package/dist/form/color_picker/README.md

@@ -40,7 +40,7 @@ import ColorPicker from "@ticatec/uniface-element/ColorPicker";
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `value` | `string` (bindable) | `"#000000"` | The selected color in hex format (e.g., `#3b82f6`). `bind:value={...}` for two-way binding. |
+| `value` | `string` (bindable) | `"#000000"` | The selected color in `#RRGGBB` hex format (e.g., `#3b82f6`). `bind:value={...}` for two-way binding. |
 | `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Visual style variant. |
 | `compact` | `boolean` | `false` | Dense layout for table cells and inline forms. |
 | `disabled` | `boolean` | `false` | Fully disabled — the color picker is non-interactive. |
@@ -263,18 +263,25 @@ import ColorPicker from "@ticatec/uniface-element/ColorPicker";
 
 ## Behavior Notes
 
-### Native color input
+### Native color input + editable hex field
 
-The component uses the browser's native `<input type="color">` element, which provides a consistent color picker across all platforms. The visual swatch is a custom preview layer on top of the native input.
+The component shows two parts side by side: a native `<input type="color">` swatch (opens the browser's built-in color picker) and a text field showing the hex value. The text field is directly editable — typing a value and committing it (blur or Enter) updates `value` the same as picking a color from the swatch.
 
-### Hex format
+There's no alpha/transparency support — `<input type="color">` has no concept of it, so `value` is always a plain 6-digit `#rrggbb`.
 
-The `value` prop expects and returns colors in hex format (e.g., `#3b82f6`). The native color input always returns hex format.
+### Hex format and validation
+
+`value` must be exactly `#RRGGBB` (6 hex digits after `#`, case-insensitive). When typing in the text field:
+
+- Only `#` and hex digits (`0-9a-fA-F`) can be typed, capped at 6 digits — anything else is blocked or truncated as you type.
+- The value is validated on commit (blur or Enter), not on every keystroke, so you can type through incomplete intermediate states.
+- A missing leading `#` is added automatically on commit (e.g. typing `ff0000` commits as `#ff0000`).
+- If the committed text isn't a valid `#RRGGBB` string, the field reverts to the last valid value — `onchange` is not called.
 
 ### Disabled and readonly states
 
-- **Disabled**: The color picker is non-interactive. The visual swatch is dimmed.
-- **Readonly**: The color picker is non-interactive but the visual swatch is fully visible.
+- **Disabled**: The color picker is non-interactive. The visual swatch is dimmed, and the hex field is disabled.
+- **Readonly**: The color picker is non-interactive but fully visible — the swatch blocks clicks (it can't open the native picker) and the hex field becomes a non-editable (but not dimmed) readonly text field.
 
 ## Accessibility
 

package/dist/form/color_picker/README_CN.md

@@ -40,7 +40,7 @@ import ColorPicker from "@ticatec/uniface-element/ColorPicker";
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
-| `value` | `string`（可绑定） | `"#000000"` | 以 hex 格式选择的颜色（例如 `#3b82f6`）。`bind:value={...}` 用于双向绑定。 |
+| `value` | `string`（可绑定） | `"#000000"` | `#RRGGBB` 格式的颜色（例如 `#3b82f6`）。`bind:value={...}` 用于双向绑定。 |
 | `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | 视觉风格变体。 |
 | `compact` | `boolean` | `false` | 紧凑布局，适用于表格单元格和行内表单。 |
 | `disabled` | `boolean` | `false` | 完全禁用 —— 颜色选择器不可交互。 |
@@ -263,18 +263,25 @@ import ColorPicker from "@ticatec/uniface-element/ColorPicker";
 
 ## 行为说明
 
-### 原生颜色输入
+### 原生颜色输入 + 可编辑的 hex 文本框
 
-该组件使用浏览器的原生 `<input type="color">` 元素，在所有平台上提供一致的颜色选择器。视觉色板是原生输入上方的自定义预览层。
+组件并排展示两部分：原生 `<input type="color">` 色板（点击打开浏览器内置的颜色选择器）和展示 hex 值的文本框。文本框可以直接编辑——输入一个值并提交（失焦或回车）后，`value` 会像通过色板选色一样更新。
 
-### Hex 格式
+不支持透明通道——`<input type="color">` 本身没有这个概念，因此 `value` 始终是纯 6 位 `#rrggbb`。
 
-`value` 属性期望并返回 hex 格式的颜色（例如 `#3b82f6`）。原生颜色输入始终返回 hex 格式。
+### Hex 格式与校验
+
+`value` 必须是合法的 `#RRGGBB`（`#` 后跟 6 位十六进制数字，大小写不敏感）。在文本框中输入时：
+
+- 只能输入 `#` 和十六进制字符（`0-9a-fA-F`），最多 6 位——其他字符在输入时会被拦截或截断。
+- 校验只在提交时（失焦或回车）进行，不是每次按键都校验，因此可以正常输入中间的不完整状态。
+- 提交时如果缺少开头的 `#` 会自动补上（例如输入 `ff0000` 会被提交为 `#ff0000`）。
+- 如果提交的文本不是合法的 `#RRGGBB`，文本框会回退到上一个合法值——不会触发 `onchange`。
 
 ### 禁用和只读状态
 
-- **禁用**：颜色选择器不可交互。视觉色板变暗。
-- **只读**：颜色选择器不可交互，但视觉色板完全可见。
+- **禁用**：颜色选择器不可交互。视觉色板变暗，hex 文本框也被禁用。
+- **只读**：颜色选择器不可交互，但完全可见——色板会拦截点击（无法打开原生选择器），hex 文本框变为不可编辑（但不变暗）的只读文本框。
 
 ## 无障碍
 

package/dist/form/common_editor/CommonEditor.svelte

@@ -53,7 +53,14 @@
 </script>
 
 <FormEditor {theme} {tooltip} {error} {style} {readonly} {disabled} {compact} {variant}>
-    <div class="uniface-common-editor" role="textbox" bind:this={container} aria-hidden="true" tabindex="-1" {style}
+    <!-- Decorative flex wrapper only: the real interactive control is the
+         <input>/children snippet rendered inside, which carries its own
+         semantics — this div must not steal or hide them via role/aria-hidden.
+         onclick here only forwards focus to that inner control, it's not an
+         independent action, so no interactive role/keyboard handler applies. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="uniface-common-editor" bind:this={container} {style}
          onmousedown={(e: MouseEvent)=>{e.preventDefault()}}  onclick={handleContainerClick}>
         {#if leadingIcon}
             <div class="editor-embed-icon" style="flex: 0 0 auto;">
@@ -69,9 +76,16 @@
         {:else}
             <div class={input$class} style="position: relative; flex: 1 1 auto">
                 {@render children()}
-                {#if textValue && canClean}
-                    <div class="clean-icon">
-                        <i class="icon_google_clear" aria-hidden="true" onmousedown={(e: MouseEvent)=>{e.preventDefault()}} onclick={clear}></i>
+                {#if canClean}
+                    <!-- Reserved unconditionally (not gated on textValue) so
+                         .uniface-common-editor:has(.clean-icon)'s input
+                         padding-right in uniface-form-editor.scss stays
+                         constant — otherwise the editor visibly grows/shifts
+                         the moment text is first entered. -->
+                    <div class="clean-icon" class:has-value={textValue}>
+                        <i class="icon_google_clear" role="button" tabindex={textValue ? 0 : -1} aria-label="Clear"
+                           onmousedown={(e: MouseEvent)=>{e.preventDefault()}} onclick={textValue ? clear : undefined}
+                           onkeydown={(e: KeyboardEvent) => { if (textValue && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); clear?.(); } }}></i>
                     </div>
                 {/if}
             </div>

package/dist/form/common_editor/CommonPicker.svelte

@@ -70,7 +70,6 @@
     let editorElement: HTMLElement | undefined = $state();
     let editor: HTMLDivElement | undefined = $state();
     let hasFocus = $state(false);
-    let canClean = $state(!mandatory && value != null);
 
 
     const handleFocus = (event: FocusEvent) => {
@@ -111,7 +110,6 @@
     }
 
     $effect(() => {
-        canClean = !mandatory && value != null;
         if (!isOpen && hasFocus) {
             setTimeout(() => {
                 if (document.activeElement !== editor) {
@@ -148,20 +146,28 @@
                 <input style={input$style} tabindex="-1" readonly {disabled} value={textValue}/>
             {/if}
         {:else}
-            <div style="flex: 1 1 auto; position: relative; overflow: hidden; height: 100%" onclick={openPopup}>
+            <div style="flex: 1 1 auto; position: relative; overflow: hidden; height: 100%">
                 {#if input$readonly}
-                    <input bind:this={editor} style={input$style} value={textValue} readonly {placeholder} onkeydown={handleKeyDown}
+                    <input bind:this={editor} style={input$style} value={textValue} readonly {placeholder} onclick={openPopup} onkeydown={handleKeyDown}
                            tabindex="0"/>
                 {:else}
-                    <input bind:this={editor} style={input$style} value={textValue} {oninput} {oncompositionstart} {oncompositionend}
+                    <input bind:this={editor} style={input$style} value={textValue} {oninput} {oncompositionstart} {oncompositionend} onclick={openPopup}
                            {placeholder} tabindex="0" onkeydown={handleKeyDown}/>
                 {/if}
                 {#if children}
                     {@render children()}
                 {/if}
-                {#if textValue && canClean}
-                    <div class="clean-icon">
-                        <i class="icon_google_clear" role="none" onclick={doClean}></i>
+                {#if !mandatory}
+                    <!-- Space is reserved (and input padding-right adjusted via
+                         .uniface-common-picker:has(.clean-icon) in
+                         uniface-form-editor.scss) whenever clearing is allowed
+                         at all, not only once a value is picked — otherwise the
+                         whole picker visibly grows/shifts by that padding the
+                         moment a value is first selected. Visibility of the
+                         glyph itself still depends on there being something to
+                         clear. -->
+                    <div class="clean-icon" class:has-value={textValue}>
+                        <i class="icon_google_clear" role="none" onclick={textValue ? doClean : undefined}></i>
                     </div>
                 {/if}
             </div>
@@ -181,5 +187,3 @@
         {/if}
     </Popover>
 {/if}
-
-

package/dist/form/common_editor/CommonPopupEditor.svelte

@@ -57,6 +57,12 @@
         showPopup = false;
     }
 
+    const handleTriggerKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            openPopup();
+        }
+    };
 </script>
 
 <CommonEditor
@@ -76,7 +82,8 @@
 
     {#snippet trailingIcon()}
         {#if !disabled && !readonly}
-            <i class="icon_google_arrow_drop_down" aria-hidden="true" onclick={openPopup}></i>
+            <i class="icon_google_arrow_drop_down" role="button" tabindex="0" aria-label="Open" aria-expanded={showPopup}
+               onclick={openPopup} onkeydown={handleTriggerKeyDown}></i>
         {/if}
     {/snippet}