@ticatec/uniface-element 5.0.1 → 5.0.3

package/README.md

@@ -25,8 +25,8 @@ npm install @ticatec/uniface-element
 
 ## 📚 Documentation
 
-- **[Component Guide](./COMPONENT_GUIDE.md)** - Complete guide on when to use each component
-- **[Component Selection Prompts](./COMPONENT_SELECTION_PROMPTS.md)** - AI prompt system for component selection
+- **[Generated Component Reference](./docs/components/README.md)** - Source-derived API tables and a standalone Svelte example for every public component
+- **[AI Coding Prompts Index](./assets/ai-coding/README.md)** - Category guides and a full component API matrix, meant to be handed to an AI coding assistant
 - **[中文文档](./README_CN.md)** - Chinese documentation
 
 ## Quick Start
@@ -44,11 +44,11 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
 <script lang="ts">
   import Button from '@ticatec/uniface-element/Button';
   import DataTable from '@ticatec/uniface-element/DataTable';
-  import type { DataColumn } from '@ticatec/uniface-element';
+  import type { DataColumn } from '@ticatec/uniface-element/DataTable';
 
   let columns: DataColumn[] = [
-    { field: 'name', title: 'Name', width: 150 },
-    { field: 'email', title: 'Email', width: 200 }
+    { text: 'Name', field: 'name', width: 150 },
+    { text: 'Email', field: 'email', width: 200 }
   ];
 
   let data = [
@@ -57,7 +57,7 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
   ];
 </script>
 
-<Button type="primary" on:click={() => console.log('Clicked!')}>
+<Button type="primary" onclick={() => console.log('Clicked!')}>
   Click Me
 </Button>
 
@@ -75,14 +75,14 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
 ### Data Display
 - **Tables**: `DataTable`, `ConciseDataTable`
 - **Lists**: `ListBox`, `TreeView`
-- **Navigation**: `Breadcrumbs`, `Tabs`, `NavigatorMenu` | [Navigation Components Docs](./docs/navigation/)
+- **Navigation**: `Breadcrumbs`, `Tabs`, `NavigatorMenu`, `PageStack` | [Navigation Components Docs](./assets/ai-coding/05-navigation-and-general-guide.md)
 - **Indicators**: `ProgressBar`, `ProgressStepBar`, `Tag`
 
 ### Form Controls
-- **Input**: `TextEditor`, `NumberEditor`, [`MemoEditor`](./docs/form-components/en/memoeditor.md), [`PasswordEditor`](./docs/form-components/en/passwordeditor.md)
+- **Input**: `TextEditor`, `NumberEditor`, `MemoEditor`, `PasswordEditor` | [Form Editors Guide](./assets/ai-coding/01-form-editors-guide.md)
 - **Selection**: `OptionsSelect`, `OptionsMultiSelect`, `CascadeOptionsSelect`
 - **Date/Time**: `DatePicker`, `DateTimePicker`, `TimeEditor`
-- **Search/Filter**: [`SearchBox`, `NumberRange`, `DateRange`](./docs/search-filters/) - Advanced search and filtering components
+- **Search/Filter**: `SearchBox`, `NumberRange`, `DateRange` - Advanced search and filtering components
 - **Others**: `CheckBox`, `RadioButton`, `Switch`, `ColorPicker`
 
 ### Feedback Components
@@ -103,22 +103,22 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
 ```svelte
 <script lang="ts">
   import DataTable from '@ticatec/uniface-element/DataTable';
-  import type { DataColumn } from '@ticatec/uniface-element';
+  import type { DataColumn } from '@ticatec/uniface-element/DataTable';
 
   let columns: DataColumn[] = [
     {
       field: 'name',
-      title: 'Name',
+      text: 'Name',
       width: 200
     },
     {
       field: 'email',
-      title: 'Email',
+      text: 'Email',
       width: 250
     },
     {
       field: 'status',
-      title: 'Status',
+      text: 'Status',
       width: 120
     }
   ];
@@ -146,23 +146,23 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
 
   let showDialog = false;
   let formData = { name: '', email: '' };
+
+  const actions = [
+    { label: 'Cancel', handler: () => { showDialog = false; } },
+    { label: 'Save', type: 'primary', handler: () => { showDialog = false; } }
+  ];
 </script>
 
-<Button on:click={() => showDialog = true}>Open Dialog</Button>
+<Button onclick={() => showDialog = true}>Open Dialog</Button>
 
-<Dialog bind:visible={showDialog} title="Edit User">
+<Dialog bind:visible={showDialog} title="Edit User" {actions}>
   <FormField label="Name">
     <TextEditor bind:value={formData.name} />
   </FormField>
-  
+
   <FormField label="Email">
     <TextEditor bind:value={formData.email} type="email" />
   </FormField>
-  
-  <svelte:fragment slot="actions">
-    <Button on:click={() => showDialog = false}>Cancel</Button>
-    <Button type="primary" on:click={() => showDialog = false}>Save</Button>
-  </svelte:fragment>
 </Dialog>
 ```
 
@@ -285,10 +285,6 @@ npm run check
 - Safari ≥ 14
 - Edge ≥ 88
 
-## Contributing
-
-We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
-
 ## License
 
 MIT License - see [LICENSE](./LICENSE) file for details.
@@ -299,34 +295,13 @@ MIT License - see [LICENSE](./LICENSE) file for details.
 
 ## Documentation
 
-Comprehensive component documentation is available in the `/docs` directory:
-
-### Layout Components
-- [SidebarLayout](./docs/layout/en/sidebarlayout.md) | [中文](./docs/layout/cn/sidebarlayout.md) - Left sidebar with resizable main content area
-- [HeaderLayout](./docs/layout/en/headerlayout.md) | [中文](./docs/layout/cn/headerlayout.md) - Top header with content area and optional sidebar
-- [ClassicLayout](./docs/layout/en/classiclayout.md) | [中文](./docs/layout/cn/classiclayout.md) - Full-screen layout with header, footer, sidebar, and content areas
-
-### Button Components
-- [Button System](./docs/buttons/en/README.md) | [中文](./docs/buttons/cn/README.md) - Complete button components including Button, TextButton, IconButton, and ActionBar
-
-### Dialog Components
-- [Dialog System](./docs/dialog/en/README.md) | [中文](./docs/dialog/cn/README.md) - Modal dialog system with DialogBoard, Dialog, and CommonDialog components
-
-### Form Components
-- [Form Controls](./docs/form/en/README.md) | [中文](./docs/form/cn/README.md) - Comprehensive form input components including TextEditor, NumberEditor, CheckBox, OptionsSelect, and more
-
-- Overlay Controllers: `indicator`, `toast`, `messageBox`, `Dialog`, `Drawer`
-
-### Miscellaneous Components
-- [Utility Components](./docs/misc/en/README.md) | [中文](./docs/misc/cn/README.md) - Additional components including Split, Drawer, Tag, and Card
-
-Each component documentation includes:
-- API reference with all props and methods
-- Advanced usage examples and patterns
-- Best practices and styling guides
-- Accessibility considerations
-- Integration tips
+Component-by-category guides and a full props/events/snippets API matrix are available in [`assets/ai-coding/`](./assets/ai-coding/README.md):
 
----
+- [Form editors](./assets/ai-coding/01-form-editors-guide.md) - `TextEditor`, `NumberEditor`, `DatePicker`, `OptionsSelect`, `CheckBox`, `Switch`, and more
+- [Layouts and containers](./assets/ai-coding/02-layouts-and-containers-guide.md) - `FlexForm`, `GridForm`, `FormField`, `Page`, `ActionBar`, `SidebarLayout`, `ClassicLayout`
+- [Data display and tables](./assets/ai-coding/03-data-display-and-tables-guide.md) - `DataTable`, `ConciseDataTable`, `TreeView`, `Card`, `Accordion`, `ListBox`
+- [Overlays and feedback](./assets/ai-coding/04-overlays-and-feedback-guide.md) - `Dialog`, `CommonDialog`, `Drawer`, `Toast`, `MessageBox`, `Tooltip`, `ContextMenu`
+- [Navigation and general](./assets/ai-coding/05-navigation-and-general-guide.md) - `Tabs`, `Breadcrumbs`, `Pagination`, `Button`, `IconButton`, `Split`, `Tag`, `Transfer`
+- [Components API matrix](./assets/ai-coding/06-components-api-matrix.md) - full props/types/events/snippets reference for every core component
 
-For more detailed documentation and examples, please visit our [documentation site](#) or check out the demo components in the `/src/routes/demo` directory.
+You can also browse the demo components under `/src/routes/demo` for live, working examples.

package/README_CN.md

@@ -23,6 +23,10 @@
 npm install @ticatec/uniface-element
 ```
 
+## 组件文档
+
+- **[自动生成的组件参考](./docs/components/README.md)**：覆盖全部公开组件的源码派生属性表和独立 Svelte 示例
+
 ## 快速开始
 
 ### 1. 导入样式
@@ -37,13 +41,12 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
 ```svelte
 <script lang="ts">
   import Button from '@ticatec/uniface-element/Button';
-  import DataTable, Dialog from '@ticatec/uniface-element/DataTable';
-  import Dialog from '@ticatec/uniface-element/Dialog';
+  import DataTable from '@ticatec/uniface-element/DataTable';
   import type { DataColumn } from '@ticatec/uniface-element/DataTable';
-  
+
   let columns: DataColumn[] = [
-    { field: 'name', title: '姓名', width: 150 },
-    { field: 'email', title: '邮箱', width: 200 }
+    { field: 'name', text: '姓名', width: 150 },
+    { field: 'email', text: '邮箱', width: 200 }
   ];
   
   let data = [
@@ -52,7 +55,7 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
   ];
 </script>
 
-<Button type="primary" on:click={() => console.log('点击了!')}>
+<Button type="primary" onclick={() => console.log('点击了!')}>
   点击我
 </Button>
 
@@ -70,7 +73,7 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
 ### 数据展示
 - **表格组件**: `DataTable`、`ConciseDataTable`
 - **列表组件**: `ListBox`、`TreeView`
-- **导航组件**: `Breadcrumbs`、`Tabs`、`NavigatorMenu`
+- **导航组件**: `Breadcrumbs`、`Tabs`、`NavigatorMenu`、`PageStack`
 - **指示器**: `ProgressBar`、`ProgressStepBar`、`Tag`
 
 ### 表单控件
@@ -163,22 +166,22 @@ await messageBox.showInfo("操作完成", { title: "提示" });
 ```svelte
 <script lang="ts">
   import DataTable from '@ticatec/uniface-element/DataTable';
-  import type { DataColumn } from '@ticatec/uniface-element';
-  
+  import type { DataColumn } from '@ticatec/uniface-element/DataTable';
+
   let columns: DataColumn[] = [
     {
       field: 'name',
-      title: '姓名',
+      text: '姓名',
       width: 200
     },
     {
       field: 'email',
-      title: '邮箱',
+      text: '邮箱',
       width: 250
     },
     {
       field: 'status',
-      title: '状态',
+      text: '状态',
       width: 120
     }
   ];
@@ -199,27 +202,30 @@ await messageBox.showInfo("操作完成", { title: "提示" });
 
 ```svelte
 <script lang="ts">
-  import Dialog, Button, TextEditor, FormField from '@ticatec/uniface-element/Dialog, Button, TextEditor, FormField';
-  
+  import Dialog from '@ticatec/uniface-element/Dialog';
+  import Button from '@ticatec/uniface-element/Button';
+  import TextEditor from '@ticatec/uniface-element/TextEditor';
+  import FormField from '@ticatec/uniface-element/FormField';
+
   let showDialog = false;
   let formData = { name: '', email: '' };
+
+  const actions = [
+    { label: '取消', handler: () => { showDialog = false; } },
+    { label: '保存', type: 'primary', handler: () => { showDialog = false; } }
+  ];
 </script>
 
-<Button on:click={() => showDialog = true}>打开对话框</Button>
+<Button onclick={() => showDialog = true}>打开对话框</Button>
 
-<Dialog bind:visible={showDialog} title="编辑用户">
+<Dialog bind:visible={showDialog} title="编辑用户" {actions}>
   <FormField label="姓名">
     <TextEditor bind:value={formData.name} />
   </FormField>
-  
+
   <FormField label="邮箱">
     <TextEditor bind:value={formData.email} type="email" />
   </FormField>
-  
-  <svelte:fragment slot="actions">
-    <Button on:click={() => showDialog = false}>取消</Button>
-    <Button type="primary" on:click={() => showDialog = false}>保存</Button>
-  </svelte:fragment>
 </Dialog>
 ```
 
@@ -227,34 +233,16 @@ await messageBox.showInfo("操作完成", { title: "提示" });
 
 ## 文档
 
-`/docs` 目录中提供了全面的组件文档：
-
-### 布局组件
-- [SidebarLayout](./docs/layout/cn/sidebarlayout.md) | [English](./docs/layout/en/sidebarlayout.md) - 左侧边栏与可调整大小的主内容区域
-- [HeaderLayout](./docs/layout/cn/headerlayout.md) | [English](./docs/layout/en/headerlayout.md) - 顶部头部与内容区域及可选侧边栏
-- [ClassicLayout](./docs/layout/cn/classiclayout.md) | [English](./docs/layout/en/classiclayout.md) - 全屏布局，包含头部、底部、侧边栏和内容区域
-
-### 按钮组件
-- [按钮系统](./docs/buttons/cn/README.md) | [English](./docs/buttons/en/README.md) - 完整的按钮组件，包括 Button、TextButton、IconButton 和 ActionBar
+按类别划分的组件指南以及完整的属性/事件/Snippet API 矩阵，位于 [`assets/ai-coding/`](./assets/ai-coding/README.md)：
 
-### 对话框组件
-- [对话框系统](./docs/dialog/cn/README.md) | [English](./docs/dialog/en/README.md) - 模态对话框系统，包含 DialogBoard、Dialog 和 CommonDialog 组件
+- [表单编辑器](./assets/ai-coding/01-form-editors-guide.md) - `TextEditor`、`NumberEditor`、`DatePicker`、`OptionsSelect`、`CheckBox`、`Switch` 等
+- [布局与容器](./assets/ai-coding/02-layouts-and-containers-guide.md) - `FlexForm`、`GridForm`、`FormField`、`Page`、`ActionBar`、`SidebarLayout`、`ClassicLayout`
+- [数据展示与表格](./assets/ai-coding/03-data-display-and-tables-guide.md) - `DataTable`、`ConciseDataTable`、`TreeView`、`Card`、`Accordion`、`ListBox`
+- [弹层与反馈](./assets/ai-coding/04-overlays-and-feedback-guide.md) - `Dialog`、`CommonDialog`、`Drawer`、`Toast`、`MessageBox`、`Tooltip`、`ContextMenu`
+- [导航与通用组件](./assets/ai-coding/05-navigation-and-general-guide.md) - `Tabs`、`Breadcrumbs`、`Pagination`、`Button`、`IconButton`、`Split`、`Tag`、`Transfer`
+- [组件 API 矩阵](./assets/ai-coding/06-components-api-matrix.md) - 所有核心组件的完整 Props/Types/Events/Snippets 参考
 
-### 表单组件
-- [表单控件](./docs/form/cn/README.md) | [English](./docs/form/en/README.md) - 全面的表单输入组件，包括 TextEditor、NumberEditor、CheckBox、OptionsSelect 等
-
-### Overlay 组件
-- 应用程序级 Overlay 控制器，包括 Indicator、Toast、MessageBox、ContextMenu、Dialog
-
-### 杂项组件
-- [实用组件](./docs/misc/cn/README.md) | [English](./docs/misc/en/README.md) - 其他组件，包括 Split、Drawer、Tag 和 Card
-
-每个组件文档都包括：
-- 包含所有属性和方法的 API 参考
-- 高级用法示例和模式
-- 最佳实践和样式指南
-- 无障碍访问注意事项
-- 集成提示
+也可以查看 `/src/routes/demo` 目录下的示例组件，获取可运行的真实用法。
 
 ## 主题定制
 
@@ -347,7 +335,7 @@ import MemoEditor from '@ticatec/uniface-element/MemoEditor';
 
 // 工具导入
 import { utils } from '@ticatec/uniface-element/utils';
-import type { DataColumn } from '@ticatec/uniface-element/types';
+import type { DataColumn } from '@ticatec/uniface-element/DataTable';
 ```
 
 ## 开发
@@ -373,10 +361,6 @@ npm run check
 - Safari ≥ 14
 - Edge ≥ 88
 
-## 贡献
-
-欢迎贡献代码！请查看我们的 [贡献指南](./CONTRIBUTING.md) 了解详细信息。
-
 ## 许可证
 
 MIT 许可证 - 查看 [LICENSE](./LICENSE) 文件了解详细信息。
@@ -384,7 +368,3 @@ MIT 许可证 - 查看 [LICENSE](./LICENSE) 文件了解详细信息。
 ## 作者
 
 **Henry Feng** - [Ticatec](https://github.com/ticatec-auckland)
-
----
-
-更多详细文档和示例，请访问我们的 [文档网站](#) 或查看 `/src/routes/demo` 目录中的示例组件。

package/dist/base-calendar/CalendarBase.svelte

@@ -14,6 +14,10 @@
         cellWidth?: number;
         cellHeight?: number;
         border?: boolean;
+        onchange?: (value: dayjs.Dayjs) => void;
+        /**
+         * @deprecated 请使用 onchange；仍受支持以兼容旧调用。
+         */
         onselect?: (value: dayjs.Dayjs) => void;
     }
 
@@ -25,6 +29,7 @@
         cellWidth = 32,
         cellHeight = 32,
         border = false,
+        onchange,
         onselect
     }: Props = $props();
 
@@ -54,6 +59,7 @@
     });
 
     const onSelectDate = (d: dayjs.Dayjs) => {
+        onchange?.(d);
         onselect?.(d);
     };
 
@@ -75,18 +81,29 @@
         month = m;
         year = y;
     };
+
+    const handleKeyActivate = (handler: () => void) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handler();
+        }
+    };
 </script>
 <div class="uniface-calendar" class:border style="{style}; width: {cellWidth * 7}px">
     <div>
         <div class="uniface-title-bar">
-            <div class="action-icon" onclick={adjustMonth(-1)} aria-hidden="true">
+            <div class="action-icon" role="button" tabindex="0" aria-label="Previous month"
+                 onclick={adjustMonth(-1)} onkeydown={handleKeyActivate(adjustMonth(-1))}>
                 <i class="icon_google_keyboard_arrow_left"></i>
             </div>
             <div style="flex: 1 1 auto; text-align: center">
-                <span class="title-text" onclick={pickupYear} aria-hidden="true">{year}</span>
-                <span class="title-text" onclick={pickupMonth} aria-hidden="true">{month + 1}</span>
+                <span class="title-text" role="button" tabindex="0" aria-label="Pick year"
+                      onclick={pickupYear} onkeydown={handleKeyActivate(pickupYear)}>{year}</span>
+                <span class="title-text" role="button" tabindex="0" aria-label="Pick month"
+                      onclick={pickupMonth} onkeydown={handleKeyActivate(pickupMonth)}>{month + 1}</span>
             </div>
-            <div class="action-icon" onclick={adjustMonth(1)} aria-hidden="true">
+            <div class="action-icon" role="button" tabindex="0" aria-label="Next month"
+                 onclick={adjustMonth(1)} onkeydown={handleKeyActivate(adjustMonth(1))}>
                 <i class="icon_google_keyboard_arrow_right"></i>
             </div>
         </div>
@@ -100,12 +117,12 @@
                 onselect={onSelectDate}/>
             {#if showMonths}
                 <MonthPickupPanel bind:value={month} months={dateCtx.months}
-                                  onClick={() => { showMonths = false; }}/>
+                                  onclick={() => { showMonths = false; }}/>
             {:else if showYears}
                 <YearPickupPanel bind:year
                                  maxYear={maxDate == null ? null : maxDate.year()}
                                  minYear={minDate == null ? null : minDate.year()}
-                                 onClick={() => { showYears = false; }}/>
+                                 onclick={() => { showYears = false; }}/>
             {/if}
         </div>
     </div>
@@ -168,4 +185,10 @@
     .action-icon:hover i {
         color: var(--uniface-primary-hover-color, #42A5F5);
     }
+
+    .action-icon:focus-visible,
+    .title-text:focus-visible {
+        outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+        outline-offset: 1px;
+    }
 </style>

package/dist/base-calendar/CalendarBase.svelte.d.ts

@@ -8,6 +8,10 @@ interface Props {
     cellWidth?: number;
     cellHeight?: number;
     border?: boolean;
+    onchange?: (value: dayjs.Dayjs) => void;
+    /**
+     * @deprecated 请使用 onchange；仍受支持以兼容旧调用。
+     */
     onselect?: (value: dayjs.Dayjs) => void;
 }
 declare const CalendarBase: import("svelte").Component<Props, {}, "">;

package/dist/base-calendar/MonthPickupPanel.svelte

@@ -2,31 +2,39 @@
     interface Props {
         value: number;
         months: Array<string>;
-        onClick?: (event: MouseEvent) => void;
+        onclick?: (event: MouseEvent) => void;
     }
 
     let {
         value = $bindable<number>(),
         months,
-        onClick
+        onclick
     }: Props = $props();
 
     const handleMonthClick = (m: number) => (e: MouseEvent) => {
         if (m !== value) {
             value = m;
-            onClick?.(e);
+            onclick?.(e);
         } else {
             e.stopPropagation();
             e.preventDefault();
         }
     };
+
+    const handleKeyActivate = (m: number) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleMonthClick(m)(e as unknown as MouseEvent);
+        }
+    };
 </script>
-<div class="uniface-month-pickup-panel" onclick={onClick} aria-hidden="true">
+<div class="uniface-month-pickup-panel" onclick={onclick} role="presentation">
     <div>
         <div style="display: grid; grid-template-columns: auto auto auto; overflow: hidden; width: 100%">
             {#each months as month, idx}
-                <div class="month-block" class:selected={idx === value} aria-hidden="true"
-                     onclick={handleMonthClick(idx)}>
+                <div class="month-block" class:selected={idx === value}
+                     role="button" tabindex="0" aria-current={idx === value ? 'date' : undefined}
+                     onclick={handleMonthClick(idx)} onkeydown={handleKeyActivate(idx)}>
                     <span>{month}</span>
                 </div>
             {/each}
@@ -85,4 +93,9 @@
     .month-block.selected:hover {
         background-color: unset;
     }
+
+    .month-block:focus-visible {
+        outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+        outline-offset: 1px;
+    }
 </style>

package/dist/base-calendar/MonthPickupPanel.svelte.d.ts

@@ -1,7 +1,7 @@
 interface Props {
     value: number;
     months: Array<string>;
-    onClick?: (event: MouseEvent) => void;
+    onclick?: (event: MouseEvent) => void;
 }
 declare const MonthPickupPanel: import("svelte").Component<Props, {}, "value">;
 type MonthPickupPanel = ReturnType<typeof MonthPickupPanel>;

package/dist/base-calendar/MonthlyCalendar.svelte

@@ -94,6 +94,13 @@
             onselect?.(dayjs(new Date(year, month, ad.d)));
         }
     };
+
+    const handleDayKeyDown = (ad: CalendarDay) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleDayClick(ad)();
+        }
+    };
 </script>
 <div class="monthly-calendar" class:border>
     {#each Array(7) as _, idx}
@@ -103,14 +110,18 @@
     {/each}
     {#each days as day, idx}
         <div class="cell calendar-day"
-             aria-hidden="true"
+             role="button" tabindex={day.disabled ? -1 : 0}
+             aria-disabled={day.disabled}
+             aria-current={day.isToday ? 'date' : undefined}
+             aria-pressed={selected.year === day.y && selected.month === day.m && selected.date === day.d}
+             aria-label="{day.y}-{day.m + 1}-{day.d}"
              style="width: {cellWidth}px; height: {cellHeight}px;"
              class:weekend={isWeekend(idx)}
              class:today={day.isToday}
              class:selected={selected.year === day.y && selected.month === day.m && selected.date === day.d}
              class:lastRow={idx > 34}
              class:disabled={day.disabled}
-             onclick={handleDayClick(day)}>
+             onclick={handleDayClick(day)} onkeydown={handleDayKeyDown(day)}>
             <span>{day.d}</span>
             {#if dailyContent}
                 <div>
@@ -200,4 +211,9 @@
     .disabled > span:first-child:hover {
         background-color: unset;
     }
+
+    .calendar-day:focus-visible > span:first-child {
+        outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+        outline-offset: 1px;
+    }
 </style>

package/dist/base-calendar/YearPickupPanel.svelte

@@ -3,14 +3,14 @@
         year: number;
         maxYear?: number | null;
         minYear?: number | null;
-        onClick?: (event: MouseEvent) => void;
+        onclick?: (event: MouseEvent) => void;
     }
 
     let {
         year = $bindable<number>(),
         maxYear = null,
         minYear = null,
-        onClick
+        onclick
     }: Props = $props();
 
     let offset = $state(6);
@@ -34,18 +34,28 @@
         e.stopPropagation();
         e.preventDefault();
     };
+
+    const handleKeyActivate = (handler: (e: any) => void) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handler(e);
+        }
+    };
 </script>
-<div class="uniface-year-pickup-panel" aria-hidden="true" onclick={onClick}>
+<div class="uniface-year-pickup-panel" onclick={onclick} role="presentation">
     <div>
         <div>
             <div style="text-align: center">
                 <div style="display: inline-block; width: 30px; height: 10px; padding: 6px 0">
-                    <i class="icon_google_keyboard_arrow_up" aria-hidden="true" onclick={showYears(-years)}></i>
+                    <i class="icon_google_keyboard_arrow_up" role="button" tabindex="0" aria-label="Previous years"
+                       onclick={showYears(-years)} onkeydown={handleKeyActivate(showYears(-years))}></i>
                 </div>
             </div>
             <div style="display: grid; grid-template-columns: auto auto auto auto; width: 100%; overflow: hidden">
                 {#each Array(years) as _, i}
-                    <div class="year-block" onclick={handleYearClick(i)} aria-hidden="true"
+                    <div class="year-block" onclick={handleYearClick(i)} onkeydown={handleKeyActivate(handleYearClick(i))}
+                         role="button" tabindex="0" aria-disabled={isDisabled(year - offset + i)}
+                         aria-current={year === year - offset + i ? 'date' : undefined}
                          class:disabled={isDisabled(year - offset + i)}
                          class:selected={year === year - offset + i}>
                         <span>{year - offset + i}</span>
@@ -54,7 +64,8 @@
             </div>
             <div style="text-align: center">
                 <div style="display: inline-block; width: 30px; height: 10px; padding: 6px 0">
-                    <i class="icon_google_keyboard_arrow_down" aria-hidden="true" onclick={showYears(years)}></i>
+                    <i class="icon_google_keyboard_arrow_down" role="button" tabindex="0" aria-label="Next years"
+                       onclick={showYears(years)} onkeydown={handleKeyActivate(showYears(years))}></i>
                 </div>
             </div>
         </div>
@@ -122,4 +133,11 @@
     .year-block.disabled:hover {
         font-weight: unset;
     }
+
+    .year-block:focus-visible,
+    .icon_google_keyboard_arrow_up:focus-visible,
+    .icon_google_keyboard_arrow_down:focus-visible {
+        outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+        outline-offset: 1px;
+    }
 </style>

package/dist/base-calendar/YearPickupPanel.svelte.d.ts

@@ -2,7 +2,7 @@ interface Props {
     year: number;
     maxYear?: number | null;
     minYear?: number | null;
-    onClick?: (event: MouseEvent) => void;
+    onclick?: (event: MouseEvent) => void;
 }
 declare const YearPickupPanel: import("svelte").Component<Props, {}, "year">;
 type YearPickupPanel = ReturnType<typeof YearPickupPanel>;

package/dist/composite/pagination_panel/PaginationPanel.svelte

@@ -38,6 +38,8 @@
     let pagesOptions = $derived(
         (rowsSet ?? [25, 50, 100]).map(v => ({code: v, text: `${v}`}))
     );
+    // Rendered via {@html} below: generateInfo is a trusted, caller-supplied
+    // renderer (not user input) — same opt-in-HTML boundary as DataColumn#renderHTML.
     let totalText = $derived(
         generateInfo
             ? generateInfo(total, pageCount, pageNo, rowCount)