@sveltia/ui 0.26.10 → 0.27.0

package/dist/components/button/button.svelte

@@ -24,6 +24,7 @@
     role = 'button',
     name = undefined,
     value = undefined,
+    valueType = typeof value,
     hidden = false,
     disabled = false,
     readonly = false,
@@ -64,6 +65,10 @@
   aria-disabled={disabled}
   aria-readonly={readonly}
   aria-pressed={pressed}
+  data-type={valueType}
+  data-name={name}
+  data-label={label}
+  data-value={value}
   use:activateKeyShortcuts={keyShortcuts}
 >
   {@render startIcon?.()}

package/dist/components/dialog/dialog.svelte

@@ -31,8 +31,10 @@
     showOk = true,
     showCancel = true,
     okLabel = '',
+    okShortcuts = undefined,
     okDisabled = false,
     cancelLabel = '',
+    cancelShortcuts = undefined,
     cancelDisabled = false,
     focusInput = true,
     children,
@@ -138,6 +140,7 @@
             <Button
               variant="primary"
               label={okLabel || $_('_sui.ok')}
+              keyShortcuts={okShortcuts}
               disabled={okDisabled}
               onclick={() => {
                 modal?.close('ok');
@@ -148,6 +151,7 @@
             <Button
               variant="secondary"
               label={cancelLabel || $_('_sui.cancel')}
+              keyShortcuts={cancelShortcuts}
               disabled={cancelDisabled}
               onclick={() => {
                 modal?.close('cancel');

package/dist/components/listbox/option.svelte

@@ -57,8 +57,6 @@
     {value}
     {hidden}
     {disabled}
-    data-type={typeof value}
-    data-label={label}
     data-search-value={searchValue}
     onChange={(event) => {
       selected = event.detail.selected;

package/dist/components/radio/radio.svelte

@@ -20,8 +20,10 @@
    * attribute.
    * @property {boolean} [checked] Whether to check the widget. An alias of the `aria-checked`
    * attribute.
-   * @property {string} [name] The `name` attribute on the `<button>` element.
-   * @property {string} [value] The `value` attribute on the `<button>` element.
+   * @property {string} [name] The `data-name` attribute on the `<button>` element.
+   * @property {any} [value] The `data-value` attribute on the `<button>` element.
+   * @property {string} [valueType] Data type of the `value`. Typically `string`, `number` or
+   * `boolean`. Default: auto detect.
    * @property {string} [label] Text label displayed next to the checkbox.
    * @property {Snippet} [children] Primary slot content.
    * @property {Snippet} [default] Default slot content.
@@ -40,6 +42,7 @@
     disabled = false,
     name = undefined,
     value = undefined,
+    valueType = undefined,
     label = undefined,
     children,
     onChange,
@@ -77,6 +80,7 @@
     {disabled}
     {name}
     {value}
+    {valueType}
     aria-checked={checked}
     aria-labelledby="{id}-label"
     onclick={(event) => {

package/dist/components/radio/radio.svelte.d.ts

@@ -29,13 +29,18 @@ declare const Radio: import("svelte").Component<{
      */
     checked?: boolean | undefined;
     /**
-     * The `name` attribute on the `<button>` element.
+     * The `data-name` attribute on the `<button>` element.
      */
     name?: string | undefined;
     /**
-     * The `value` attribute on the `<button>` element.
+     * The `data-value` attribute on the `<button>` element.
      */
-    value?: string | undefined;
+    value?: any;
+    /**
+     * Data type of the `value`. Typically `string`, `number` or
+     * `boolean`. Default: auto detect.
+     */
+    valueType?: string | undefined;
     /**
      * Text label displayed next to the checkbox.
      */
@@ -77,13 +82,18 @@ type Props = {
      */
     checked?: boolean | undefined;
     /**
-     * The `name` attribute on the `<button>` element.
+     * The `data-name` attribute on the `<button>` element.
      */
     name?: string | undefined;
     /**
-     * The `value` attribute on the `<button>` element.
+     * The `data-value` attribute on the `<button>` element.
+     */
+    value?: any;
+    /**
+     * Data type of the `value`. Typically `string`, `number` or
+     * `boolean`. Default: auto detect.
      */
-    value?: string | undefined;
+    valueType?: string | undefined;
     /**
      * Text label displayed next to the checkbox.
      */

package/dist/components/select/combobox.svelte

@@ -7,6 +7,7 @@
 -->
 <script>
   import { _ } from 'svelte-i18n';
+  import { getSelectedItemDetail } from '../../services/select.svelte';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import Listbox from '../listbox/listbox.svelte';
@@ -69,11 +70,11 @@
     const selected = popupContent?.querySelector(selectedSelector);
 
     const target = /** @type {HTMLButtonElement} */ (
-      popupContent?.querySelector(`[role="option"][value="${value}"]`)
+      popupContent?.querySelector(`[role="option"][data-value="${value}"]`)
     );
 
     if (target) {
-      label = target.dataset.label || target.textContent || target.value;
+      label = target.dataset.label || target.dataset.value || target.textContent || '';
 
       if (selected !== target) {
         selected?.setAttribute('aria-selected', 'false');
@@ -87,19 +88,12 @@
    * @param {HTMLButtonElement} target Selected option.
    */
   const _onSelect = (target) => {
-    // @todo support more types
-    // @ts-ignore
-    value = target.dataset.type === 'number' ? Number(target.value) : target.value;
+    const detail = getSelectedItemDetail(target);
+
+    value = detail.value;
+
     _onChange();
-    onChange?.(
-      new CustomEvent('Change', {
-        detail: {
-          target: inputElement,
-          name: target.name,
-          value,
-        },
-      }),
-    );
+    onChange?.(new CustomEvent('Change', { detail }));
   };
 
   $effect(() => {
@@ -150,7 +144,7 @@
       bind:element={inputElement}
       role="combobox"
       {id}
-      {value}
+      value={value === undefined ? '' : String(value)}
       {hidden}
       {disabled}
       {readonly}

package/dist/components/select/select-tags.svelte

@@ -11,7 +11,7 @@
 
   /**
    * @typedef {object} Props
-   * @property {{ label: string, value: string, searchValue?: string }[]} options Available options.
+   * @property {{ label: string, value: any, searchValue?: string }[]} options Available options.
    * @property {string[]} [values] Selected option values.
    * @property {number} [max] Maximum number of selectable options.
    * @property {string} [class] The `class` attribute on the wrapper element.

package/dist/components/select/select-tags.svelte.d.ts

@@ -9,7 +9,7 @@ declare const SelectTags: import("svelte").Component<{
      */
     options: {
         label: string;
-        value: string;
+        value: any;
         searchValue?: string;
     }[];
     /**
@@ -67,7 +67,7 @@ type Props = {
      */
     options: {
         label: string;
-        value: string;
+        value: any;
         searchValue?: string;
     }[];
     /**

package/dist/services/group.svelte.js

@@ -4,6 +4,7 @@
 
 import { generateElementId } from '@sveltia/utils/element';
 import { sleep } from '@sveltia/utils/misc';
+import { getSelectedItemDetail } from './select.svelte';
 
 /**
  * @type {{ [role: string]: {
@@ -328,12 +329,7 @@ class Group {
     });
 
     this.parent.dispatchEvent(
-      new CustomEvent('Change', {
-        detail: {
-          value: /** @type {any} */ (newTarget).value,
-          name: /** @type {any} */ (newTarget).name,
-        },
-      }),
+      new CustomEvent('Change', { detail: getSelectedItemDetail(newTarget) }),
     );
   }
 

package/dist/services/select.svelte.d.ts

@@ -0,0 +1,2 @@
+export function getSelectedItemDetail(target: HTMLElement): SelectedItemDetail;
+import type { SelectedItemDetail } from '../typedefs';

package/dist/services/select.svelte.js

@@ -0,0 +1,28 @@
+/**
+ * @import { SelectedItemDetail } from '../typedefs';
+ */
+
+/**
+ * Get the detail of the selected element.
+ * @param {HTMLElement} target Element to get the detail from.
+ * @returns {SelectedItemDetail} Detail of the selected element.
+ */
+export const getSelectedItemDetail = (target) => {
+  const { type = 'string', name, label } = target.dataset;
+  /** @type {any} */
+  let { value } = target.dataset;
+
+  if (type === 'number') {
+    value = Number(value);
+
+    if (Number.isNaN(value)) {
+      value = null;
+    }
+  } else if (type === 'boolean') {
+    value = value === 'true';
+  } else if (type === 'string') {
+    value = value ? String(value) : '';
+  }
+
+  return { target, type, name, label, value };
+};

package/dist/typedefs.d.ts

@@ -16,13 +16,18 @@ export type ButtonProps = {
      */
     role?: string | undefined;
     /**
-     * The `name` attribute on the `<button>` element.
+     * The `data-name` attribute on the `<button>` element.
      */
     name?: string | undefined;
     /**
-     * The `value` attribute on the `<button>` element.
+     * The `data-value` attribute on the `<button>` element.
      */
-    value?: string | undefined;
+    value?: any;
+    /**
+     * Data type of the `value`. Typically `string`, `number` or
+     * `boolean`. Default: auto detect.
+     */
+    valueType?: string | undefined;
     /**
      * Whether to hide the widget. An alias of the `aria-hidden` attribute.
      */
@@ -221,6 +226,12 @@ export type DialogProps = {
      * Text label displayed on the OK button.
      */
     okLabel?: string | undefined;
+    /**
+     * Keyboard shortcuts for the OK button. An alias of the
+     * `aria-keyshortcuts` attribute. Accepts the special `Accel` key, which will be replaced with
+     * `Control` or `Meta` depending on the user’s operating system.
+     */
+    okShortcuts?: string | undefined;
     /**
      * Whether to disable the OK button.
      */
@@ -229,6 +240,12 @@ export type DialogProps = {
      * Text label displayed on the Cancel button.
      */
     cancelLabel?: string | undefined;
+    /**
+     * Keyboard shortcuts for the Cancel button. An alias of the
+     * `aria-keyshortcuts` attribute. Accepts the special `Accel` key, which will be replaced with
+     * `Control` or `Meta` depending on the user’s operating system.
+     */
+    cancelShortcuts?: string | undefined;
     /**
      * Whether to disable the Cancel button.
      */
@@ -366,7 +383,7 @@ export type ComboboxProps = {
     /**
      * Selected option’s value.
      */
-    value?: string | undefined;
+    value?: any;
     /**
      * Whether to make the `combobox` editable.
      */
@@ -677,6 +694,28 @@ export type TextEditorStore = {
      */
     convertMarkdown: () => Promise<void>;
 };
+export type SelectedItemDetail = {
+    /**
+     * Element to get the detail from.
+     */
+    target: HTMLElement;
+    /**
+     * Data type of the `value`. Typically `string`, `number` or `boolean`.
+     */
+    type: string;
+    /**
+     * The `data-name` attribute on the element.
+     */
+    name: string | undefined;
+    /**
+     * The `data-label` attribute on the element.
+     */
+    label: string | undefined;
+    /**
+     * The `data-value` attribute on the element. Casted to the `valueType`.
+     */
+    value: any;
+};
 import type { Snippet } from 'svelte';
 import type { LexicalNode } from 'lexical';
 import type { Transformer } from '@lexical/markdown';

package/dist/typedefs.js

@@ -10,8 +10,10 @@
  * @property {string} [class] The `class` attribute on the `<button>` element.
  * @property {'button' | 'submit' | 'reset'} [type] The `type` attribute on the `<button>` element.
  * @property {string} [role] The `role` attribute on the `<button>` element.
- * @property {string} [name] The `name` attribute on the `<button>` element.
- * @property {string} [value] The `value` attribute on the `<button>` element.
+ * @property {string} [name] The `data-name` attribute on the `<button>` element.
+ * @property {any} [value] The `data-value` attribute on the `<button>` element.
+ * @property {string} [valueType] Data type of the `value`. Typically `string`, `number` or
+ * `boolean`. Default: auto detect.
  * @property {boolean} [hidden] Whether to hide the widget. An alias of the `aria-hidden` attribute.
  * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
  * attribute.
@@ -76,8 +78,14 @@
  * @property {boolean} [showOk] Whether to show the OK button on the footer.
  * @property {boolean} [showCancel] Whether to show the Cancel button on the footer.
  * @property {string} [okLabel] Text label displayed on the OK button.
+ * @property {string} [okShortcuts] Keyboard shortcuts for the OK button. An alias of the
+ * `aria-keyshortcuts` attribute. Accepts the special `Accel` key, which will be replaced with
+ * `Control` or `Meta` depending on the user’s operating system.
  * @property {boolean} [okDisabled] Whether to disable the OK button.
  * @property {string} [cancelLabel] Text label displayed on the Cancel button.
+ * @property {string} [cancelShortcuts] Keyboard shortcuts for the Cancel button. An alias of the
+ * `aria-keyshortcuts` attribute. Accepts the special `Accel` key, which will be replaced with
+ * `Control` or `Meta` depending on the user’s operating system.
  * @property {boolean} [cancelDisabled] Whether to disable the Cancel button.
  * @property {boolean} [focusInput] Whether to automatically focus the first input field or primary
  * action button. Default: `true`. If `false`, the `<dialog>` gets focused.
@@ -126,7 +134,7 @@
  * `aria-required` attribute.
  * @property {boolean} [invalid] Whether to mark the widget invalid. An alias of the `aria-invalid`
  * attribute.
- * @property {string} [value] Selected option’s value.
+ * @property {any} [value] Selected option’s value.
  * @property {boolean} [editable] Whether to make the `combobox` editable.
  * @property {PopupPosition} [position] Where to show the dropdown menu.
  * @property {number} [filterThreshold] Number of items to start showing the filter. Default: `5`.
@@ -283,4 +291,13 @@
  * @property {() => Promise<void>} convertMarkdown Function to trigger the Lexical converter.
  */
 
+/**
+ * @typedef {object} SelectedItemDetail
+ * @property {HTMLElement} target Element to get the detail from.
+ * @property {string} type Data type of the `value`. Typically `string`, `number` or `boolean`.
+ * @property {string | undefined} name The `data-name` attribute on the element.
+ * @property {string | undefined} label The `data-label` attribute on the element.
+ * @property {any} value The `data-value` attribute on the element. Casted to the `valueType`.
+ */
+
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.26.10",
+  "version": "0.27.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -46,33 +46,33 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.53.0",
     "@sveltejs/adapter-auto": "^6.0.1",
-    "@sveltejs/kit": "^2.21.2",
+    "@sveltejs/kit": "^2.21.5",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "5.1.0",
-    "cspell": "^9.0.2",
+    "cspell": "^9.1.1",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsdoc": "^50.7.1",
+    "eslint-plugin-jsdoc": "^51.0.3",
     "eslint-plugin-svelte": "^2.46.1",
-    "postcss": "^8.5.4",
+    "postcss": "^8.5.6",
     "postcss-html": "^1.8.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
-    "sass": "^1.89.1",
+    "sass": "^1.89.2",
     "stylelint": "^16.20.0",
     "stylelint-config-recommended-scss": "^15.0.1",
-    "stylelint-scss": "^6.12.0",
-    "svelte": "5.33.17",
+    "stylelint-scss": "^6.12.1",
+    "svelte": "5.34.5",
     "svelte-check": "^4.2.1",
     "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
     "vite": "^6.3.5",
-    "vitest": "^3.2.2"
+    "vitest": "^3.2.4"
   },
   "exports": {
     ".": {