@ticatec/uniface-element 5.0.1 → 5.0.2

package/dist/data_table/parts/TableHeaderPanel.svelte

@@ -60,16 +60,31 @@
         window.removeEventListener('mousemove', onMouseMove);
         window.removeEventListener('mouseup', onMouseUp);
     }
+
+    const handleHeaderKeyDown = (col: DataColumn) => (e: KeyboardEvent) => {
+        if (col.compareFunction != null && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            handleCellClick?.(col);
+        }
+    };
 </script>
 
 <div class="header-row" style="height: {headerHeight}px">
     <div style="left: {-scrollLeft}px; width: {width}px">
         {#each dataCols ?? [] as col, index (index)}
             <div class="col-{index} data-cell" class:sortable={col.compareFunction != null} class:whitespace={hasWhitespace}>
+                <!-- role/tabindex are only ever both set together (sortable columns);
+                     svelte-check can't verify that pairing statically across the ternary. -->
+                <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
                 <div
                     class:sortable={col.compareFunction != null}
                     onclick={() => handleCellClick?.(col)}
-                    aria-hidden="true"
+                    onkeydown={handleHeaderKeyDown(col)}
+                    role={col.compareFunction != null ? 'button' : undefined}
+                    tabindex={col.compareFunction != null ? 0 : undefined}
+                    aria-sort={col.field === orderColumn?.field
+                        ? (orderDirection === OrderDirection.Ascending ? 'ascending' : 'descending')
+                        : undefined}
                     class="vertical-center"
                 >
                     <span>{col.text}</span>
@@ -85,7 +100,8 @@
                 <div
                     class="header-cell-divider"
                     class:resizer={col.resizable}
-                    aria-hidden="true"
+                    role={col.resizable ? 'separator' : undefined}
+                    aria-orientation={col.resizable ? 'vertical' : undefined}
                     onmousedown={handleResizeMouseDown(col)}
                 ></div>
             </div>

package/dist/data_table/parts/TextCell.svelte

@@ -17,10 +17,10 @@
         return value ?? '';
     });
 
-    let escapeHTML = $derived(column.escapeHTML == true);
+    let renderAsHtml = $derived((column.renderHTML ?? column.escapeHTML) == true);
 </script>
 
-{#if escapeHTML == true}
+{#if renderAsHtml == true}
     {@html text}
 {:else}
     <span>{text}</span>

package/dist/form/attachment_files/AttachmentEditor.svelte

@@ -122,12 +122,12 @@
             {#each files as file (file)}
                 <FileRender {file} {readonly} onRemove={removeFile}/>
             {/each}
+            {#if canUpload}
+                <button type="button" class="editor-action-icon" aria-label="Upload file" onclick={triggerUpload}>
+                    <i class="icon_google_file_upload" aria-hidden="true"></i>
+                </button>
+            {/if}
         </div>
-        {#if canUpload}
-            <button type="button" class="editor-action-icon" aria-label="Upload file" onclick={triggerUpload}>
-                <i class="icon_google_file_upload" aria-hidden="true"></i>
-            </button>
-        {/if}
     </div>
 </FormEditor>
 
@@ -146,25 +146,25 @@
 <style>
     .uniface-attachment-editor {
         display: flex;
-        flex-direction: row;
-        align-items: center;
         width: 100%;
         outline: none;
     }
 
     .files-field {
-        flex: 1 1 auto;
         display: flex;
         flex-direction: column;
         gap: 4px;
+        width: 100%;
         min-width: 0;
+        height: 96px;
+        overflow-y: auto;
+        box-sizing: border-box;
     }
 
     .editor-action-icon {
         flex: 0 0 auto;
         cursor: pointer;
         padding: 4px;
-        margin-right: 8px;
         border-radius: 4px;
         display: flex;
         align-items: center;

package/dist/form/attachment_files/FileRender.svelte

@@ -44,7 +44,7 @@
         {/if}
     </div>
     {#if !readonly}
-        <button class="remove-btn" onclick={removeFile} aria-label="remove file">
+        <button type="button" class="remove-btn" onclick={removeFile} aria-label="remove file">
             <i class="icon_google_delete" aria-hidden="true"></i>
         </button>
     {/if}

package/dist/form/attachment_files/FileUploadPanel.svelte

@@ -117,8 +117,12 @@
     });
 </script>
 <ModalPopover {canClose} {theme} bind:visible>
+    <!-- onclick only stops propagation to the modal's outside-click handler; the
+         real controls (Button, file input) inside carry their own semantics. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
     <div class="uniface-file-upload-panel" class:highlight={dragActive} ondragover={handleDragOver} ondragleave={handleDragLeave}
-         ondrop={handleDrop} onclick={handleMouseClick} aria-hidden="true">
+         ondrop={handleDrop} onclick={handleMouseClick} role="group" aria-label={btnPickup}>
         <div class="file-upload-contents">
             <div style="position: absolute; top: 0; width: 0; overflow: hidden">
                 <input bind:this={fileInput} type="file" {accept} multiple={maxFiles > 1} onchange={handleFilePickup}/>

package/dist/form/cascade_options_select/CascadeOptionSelect.svelte

@@ -65,7 +65,14 @@
         }, 50);
     };
 
-    const mh = $derived(` width: 400px; height: ${menu$height}px`);
+    // Previously a flat "width: 400px" regardless of how many cascade levels
+    // (columns) were actually open — with box$style unset (columns had no
+    // default width of their own before this fix) or with 3+ levels open,
+    // that either squeezed columns illegibly narrow or clipped/scrolled
+    // content that didn't need to. Let the popover grow to fit however many
+    // columns are currently shown, capped so a very deep hierarchy still
+    // scrolls instead of overflowing the viewport.
+    const mh = $derived(`width: max-content; max-width: min(90vw, 700px); height: ${menu$height}px`);
     const textValue = $derived(
         selectedItems.length > 0
             ? selectedItems[selectedItems.length - 1][textField]
@@ -129,7 +136,8 @@
     bind:isOpen
     {theme} {value} {mandatory}
     clear={cleanData}
-    {onfocus} {onblur}>
+    {onfocus} {onblur}
+    autoFit={false}>
     {#snippet popupLayer()}
         <div class="cascade-options-popover" style={mh}>
             <div style="height: 100%; position: relative">

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/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/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 = $derived(!mandatory && value != null);
 
 
     const handleFocus = (event: FocusEvent) => {
@@ -158,9 +157,17 @@
                 {#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>

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}
 

package/dist/form/common_range_editor/CommonRangeEditor.svelte

@@ -40,6 +40,13 @@
         toChild,
         actionIcon
     }: Props = $props();
+
+    const handleCleanKeyDown = (handler: () => void) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handler();
+        }
+    };
 </script>
 
 <FormEditor {variant} {compact} {disabled} {readonly} {error} {tooltip} {theme} {style} {className}>
@@ -48,14 +55,16 @@
             <div class="range-cell">
                 {@render fromChild()}
                 <div class="clean-icon" class:visible={showFromClean}>
-                    <i class="icon_google_clear" aria-hidden="true" onclick={cleanFrom}></i>
+                    <i class="icon_google_clear" role="button" tabindex={showFromClean ? 0 : -1} aria-label="Clear"
+                       onclick={cleanFrom} onkeydown={handleCleanKeyDown(cleanFrom)}></i>
                 </div>
             </div>
             <div class="divider"></div>
             <div class="range-cell">
                 {@render toChild()}
                 <div class="clean-icon" class:visible={showToClean}>
-                    <i class="icon_google_clear" aria-hidden="true" onclick={cleanTo}></i>
+                    <i class="icon_google_clear" role="button" tabindex={showToClean ? 0 : -1} aria-label="Clear"
+                       onclick={cleanTo} onkeydown={handleCleanKeyDown(cleanTo)}></i>
                 </div>
             </div>
         </div>

package/dist/form/date_picker/DatePicker.svelte

@@ -59,7 +59,7 @@
               bind:isOpen autoFit={false} {textValue} {readonly} {disabled}>
     {#snippet popupLayer()}
         <div class="date-popover">
-            <Calendar value={value} {min} {max} onselect={handleCalendarSelect}/>
+            <Calendar value={value} {min} {max} onchange={handleCalendarSelect}/>
         </div>
     {/snippet}
 </CommonPicker>

package/dist/form/date_picker/DateTimePicker.svelte

@@ -123,7 +123,7 @@
                 <Calendar
                         style="border-right: 1px solid var(--uniface-inside-border-color, #f0f0f0)"
                         value={currentValue}
-                        onselect={handleCalendarSelect}
+                        onchange={handleCalendarSelect}
                         {min} {max}/>
                 <TimePanel style="width: 120px" value={currentValue} {precision} onchange={handleTimeChange}/>
             </div>

package/dist/form/date_picker/ScrollBar.svelte

@@ -2,12 +2,16 @@
 
     import type {OnChangeHandler} from "../../types";
 
-    export let value: number;
-    export let mode: 24 | 60 = 60;
-    export let enable: boolean = true;
-    export let onchange: OnChangeHandler<number> = null as unknown as OnChangeHandler<number>;
+    interface Props {
+        value: number;
+        mode?: 24 | 60;
+        enable?: boolean;
+        onchange?: OnChangeHandler<number>;
+    }
+
+    let {value = $bindable(), mode = 60, enable = true, onchange}: Props = $props();
 
-    let list: Array<any> = [];
+    let list: Array<any> = $state([]);
 
     const decValue = () => {
         if (enable) {
@@ -75,25 +79,29 @@
 
     let timer: any;
 
-    $:resetList();
+    $effect(() => {
+        void value;
+        void mode;
+        resetList();
+    });
 
 </script>
-<div class="scroll-bar" on:wheel={handleMouseWheel}>
+<div class="scroll-bar" onwheel={handleMouseWheel}>
     <div class="action-bar">
         <div class="arrow-up" class:disabled={!enable}>
-            <i class="icon_google_keyboard_arrow_up" on:click={decValue} on:keydown={handleKeyDown(decValue)} on:dragstart={(e)=>{e.preventDefault()}}
-                 on:mousedown={handleMouseDown(-1)} on:mouseup={handleMouseUp} on:mouseleave={handleMouseUp}
+            <i class="icon_google_keyboard_arrow_up" onclick={decValue} onkeydown={handleKeyDown(decValue)} ondragstart={(e)=>{e.preventDefault()}}
+                 onmousedown={handleMouseDown(-1)} onmouseup={handleMouseUp} onmouseleave={handleMouseUp}
                  role="button" tabindex="0" aria-label="Decrease value"></i>
         </div>
     </div>
     {#each list as v}
-        <div style={!enable && v!= value ? "visibility: hidden; " : ""} class="digital-block" on:click={()=>{handleDigitalClick(v)}} on:keydown={handleKeyDown(() => handleDigitalClick(v))} class:inactive={v!=value}
+        <div style={!enable && v!= value ? "visibility: hidden; " : ""} class="digital-block" onclick={()=>{handleDigitalClick(v)}} onkeydown={handleKeyDown(() => handleDigitalClick(v))} class:inactive={v!=value}
              role="button" tabindex="0" aria-label="Select {v}"><span>{v}</span></div>
     {/each}
     <div class="action-bar">
         <div class="arrow-down" class:disabled={!enable}>
-            <i class="icon_google_keyboard_arrow_down" on:click={incValue} on:keydown={handleKeyDown(incValue)} on:dragstart={(e)=>{e.preventDefault()}}
-                 on:mousedown={handleMouseDown(1)} on:mouseup={handleMouseUp} on:mouseleave={handleMouseUp}
+            <i class="icon_google_keyboard_arrow_down" onclick={incValue} onkeydown={handleKeyDown(incValue)} ondragstart={(e)=>{e.preventDefault()}}
+                 onmousedown={handleMouseDown(1)} onmouseup={handleMouseUp} onmouseleave={handleMouseUp}
                  role="button" tabindex="0" aria-label="Increase value"></i>
         </div>
     </div>

package/dist/form/date_picker/ScrollBar.svelte.d.ts

@@ -1,24 +1,10 @@
 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;
-}
-declare const ScrollBar: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: number;
     mode?: 24 | 60;
     enable?: boolean;
     onchange?: OnChangeHandler<number>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ScrollBar = InstanceType<typeof ScrollBar>;
+}
+declare const ScrollBar: import("svelte").Component<Props, {}, "value">;
+type ScrollBar = ReturnType<typeof ScrollBar>;
 export default ScrollBar;

package/dist/form/date_range/DateRangeEditor.svelte

@@ -80,6 +80,13 @@
         toValue = normalizeValue(value.toDate(), false);
         isOpen = false;
     };
+
+    const handleIconKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            showPopover();
+        }
+    };
 </script>
 
 <div bind:this={rootElement}>
@@ -91,7 +98,8 @@
             <input style="width: 100%; text-align: center" readonly onclick={showPopover} value={textTo}/>
         {/snippet}
         {#snippet actionIcon()}
-            <i class="icon_google_event_note action-icon" aria-hidden="true" onclick={showPopover}></i>
+            <i class="icon_google_event_note action-icon" role="button" tabindex="0" aria-label="Open date range picker"
+               onclick={showPopover} onkeydown={handleIconKeyDown}></i>
         {/snippet}
     </CommonRangeEditor>
 
@@ -101,12 +109,12 @@
                 <Calendar
                     style="border-right: 1px solid #f0f0f0"
                     value={fromValue}
-                    onselect={handleFormCalendarSelect}
+                    onchange={handleFormCalendarSelect}
                     {min}
                     max={maxFrom}/>
                 <Calendar
                     value={toValue}
-                    onselect={handleToCalendarSelect}
+                    onchange={handleToCalendarSelect}
                     min={minTo}
                     {max}/>
             </div>

package/dist/form/group_box/group-check-box/GroupCheckBox.svelte

@@ -168,8 +168,13 @@
         {style}
         className={className}
 >
+    <!-- onclick only forwards focus to the first checkbox when the container's
+         own background is clicked; each CheckBox inside is independently
+         focusable/keyboard-operable, so this isn't an additional action. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
     <div bind:this={groupContainer} class="group-check-box" class:compact onfocusout={handleContainerBlur} onclick={handleContainerClick}
-         aria-hidden="true">
+         role="group">
         {#each options as op}
             {#if (hideOptions ?? []).indexOf(op[keyField]) === -1}
                 <CheckBox

package/dist/form/group_box/group-radio-box/GroupRadioBox.svelte

@@ -118,7 +118,12 @@
     {style}
     className={className}
 >
-    <div bind:this={groupContainer} class="group-radio-box" class:compact onfocusout={handleContainerBlur} onclick={handleContainerClick} aria-hidden="true">
+    <!-- onclick only forwards focus to the first radio when the container's own
+         background is clicked; each RadioButton inside is independently
+         focusable/keyboard-operable, so this isn't an additional action. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <div bind:this={groupContainer} class="group-radio-box" class:compact onfocusout={handleContainerBlur} onclick={handleContainerClick} role="group">
         {#each options as op}
             <RadioButton
                 {compact}