@sveltia/ui 0.7.5 → 0.8.0

package/package/components/alert/alert.svelte

@@ -8,17 +8,17 @@
   import Icon from '../icon/icon.svelte';
 
   /**
-   * Alert type.
+   * Status of the alert.
    * @type {'error' | 'warning' | 'info' | 'success'}
    */
-  export let type = 'error';
+  export let status = 'error';
 </script>
 
-<div class="sui alert {type}" role="alert" {...$$restProps}>
+<div role="alert" class="sui alert {status}" {...$$restProps}>
   {#if $$slots.icon}
     <slot name="icon" />
   {:else}
-    <Icon name={type === 'success' ? 'check_circle' : type} />
+    <Icon name={status === 'success' ? 'check_circle' : status} />
   {/if}
   <slot />
 </div>

package/package/components/alert/alert.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class Alert extends SvelteComponent<{
     [x: string]: any;
-    type?: "error" | "warning" | "info" | "success";
+    status?: "error" | "warning" | "info" | "success";
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -23,7 +23,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        type?: 'error' | 'warning' | 'info' | 'success';
+        status?: 'error' | 'warning' | 'info' | 'success';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/button/button.svelte

@@ -132,21 +132,22 @@
   on:keyup
   on:keypress
   on:select
+  on:change
 >
   <slot name="start-icon" />
   {#if variant === 'link'}
     {#if label}
-      <span class="label">
+      <span role="none" class="label">
         {label}
       </span>
     {:else}
-      <span class="label">
+      <span role="none" class="label">
         <slot />
       </span>
     {/if}
   {:else}
     {#if label}
-      <span class="label">
+      <span role="none" class="label">
         {label}
       </span>
     {/if}
@@ -165,6 +166,7 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  margin: var(--sui-focus-ring-width);
   border-width: 0;
   border-style: solid;
   border-color: transparent;

package/package/components/button/button.svelte.d.ts

@@ -11,13 +11,13 @@ export default class Button extends SvelteComponent<{
     class?: string;
     name?: string;
     label?: string;
-    type?: "reset" | "submit" | "button";
     disabled?: boolean;
     size?: "small" | "medium" | "large";
+    type?: "reset" | "submit" | "button";
     value?: string;
+    role?: string;
     hidden?: boolean;
     element?: HTMLButtonElement;
-    role?: string;
     readonly?: boolean;
     pressed?: boolean | "mixed";
     keyShortcuts?: string;
@@ -37,6 +37,7 @@ export default class Button extends SvelteComponent<{
     keyup: KeyboardEvent;
     keypress: KeyboardEvent;
     select: Event;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -107,13 +108,13 @@ declare const __propDef: {
         class?: string;
         name?: string | undefined;
         label?: string;
-        type?: 'button' | 'submit' | 'reset';
         disabled?: boolean;
         size?: 'small' | 'medium' | 'large' | undefined;
+        type?: 'button' | 'submit' | 'reset';
         value?: string | undefined;
+        role?: string;
         hidden?: boolean | undefined;
         element?: HTMLButtonElement | undefined;
-        role?: string;
         readonly?: boolean | undefined;
         pressed?: boolean | 'mixed' | undefined;
         keyShortcuts?: string | undefined;
@@ -134,6 +135,7 @@ declare const __propDef: {
         keyup: KeyboardEvent;
         keypress: KeyboardEvent;
         select: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/button/select-button-group.svelte

@@ -41,10 +41,10 @@
 </script>
 
 <div
+  role="radiogroup"
   class="sui select-button-group {className}"
   hidden={hidden || undefined}
   tabindex="-1"
-  role="radiogroup"
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-readonly={readonly}
@@ -54,7 +54,7 @@
   use:activateGroup
   on:change
 >
-  <div class="inner" inert={disabled}>
+  <div role="none" class="inner" inert={disabled}>
     <slot />
   </div>
 </div>
@@ -62,22 +62,26 @@
 <style>.select-button-group {
   display: inline-flex;
   align-items: center;
+  margin: var(--sui-focus-ring-width);
 }
 .select-button-group:focus-visible {
   outline-width: 0 !important;
 }
 .select-button-group :global(button) {
-  border-radius: 0 !important;
+  margin: 0 !important;
+  border-radius: 0;
   color: var(--sui-primary-foreground-color);
 }
 .select-button-group :global(button):first-child {
-  border-radius: 4px 0 0 4px !important;
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px;
 }
 .select-button-group :global(button):not(:first-child) {
   border-left-width: 0;
 }
 .select-button-group :global(button):last-child {
-  border-radius: 0 4px 4px 0 !important;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 .select-button-group :global(button[aria-checked="true"]) {
   color: var(--sui-highlight-foreground-color);

package/package/components/button/select-button.svelte

@@ -56,6 +56,7 @@
 </script>
 
 <Button
+  role="radio"
   class="sui select-button {className}"
   {value}
   {hidden}
@@ -64,14 +65,14 @@
   {variant}
   {size}
   {iconic}
-  role="radio"
   aria-checked={selected}
   {...$$restProps}
   on:click
-  on:click={() => {
-    selected = !selected;
-  }}
   on:select
+  on:change
+  on:change={(event) => {
+    selected = /** @type {CustomEvent} */ (event).detail.selected;
+  }}
 >
   <slot name="start-icon" slot="start-icon" />
   <slot />

package/package/components/button/select-button.svelte.d.ts

@@ -20,6 +20,7 @@ export default class SelectButton extends SvelteComponent<{
 }, {
     click: MouseEvent;
     select: Event;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -52,6 +53,7 @@ declare const __propDef: {
     events: {
         click: MouseEvent;
         select: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/calendar/calendar.svelte

@@ -50,34 +50,36 @@
 
 <div role="group">
   <input type="hidden" bind:value />
-  <div class="header">
+  <div role="none" class="header">
     <Button
       variant="ghost"
       label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
       aria-haspopup="dialog"
     >
       <Icon slot="end-icon" name="arrow_drop_down" />
-      <div slot="popup" class="popup-inner" role="none" on:click|stopPropagation>
+      <div slot="popup" role="none" class="popup-inner" on:click|stopPropagation>
         <div role="group" aria-label={$_('_sui.calendar.year')}>
-          <div class="header">
+          <div role="none" class="header">
             <Button
+              aria-label={$_('_sui.calendar.previous_decade')}
               on:click={() => {
                 //
               }}
             >
-              <Icon name="chevron_left" label={$_('_sui.calendar.previous_decade')} />
+              <Icon name="chevron_left" />
             </Button>
             <Button
+              aria-label={$_('_sui.calendar.next_decade')}
               on:click={() => {
                 //
               }}
             >
-              <Icon name="chevron_right" label={$_('_sui.calendar.next_decade')} />
+              <Icon name="chevron_right" />
             </Button>
           </div>
-          <div class="grid">
+          <div role="none" class="grid">
             {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as year}
-              <div>
+              <div role="none">
                 <Button>202{year}</Button>
               </div>
             {/each}
@@ -85,9 +87,9 @@
         </div>
         <Divider orientation="vertical" />
         <div role="group" aria-label={$_('_sui.calendar.month')}>
-          <div class="grid">
+          <div role="none" class="grid">
             {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as month}
-              <div>
+              <div role="none">
                 <Button>
                   {new Date(date.getUTCFullYear(), month, 10).toLocaleDateString('en', {
                     month: 'short',
@@ -100,30 +102,33 @@
       </div>
     </Button>
     <Button
+      aria-label={$_('_sui.calendar.previous_month')}
       on:click={() => {
         firstDay.setUTCMonth(firstDay.getUTCMonth() - 1);
         firstDay = firstDay;
       }}
     >
-      <Icon name="chevron_left" label={$_('_sui.calendar.previous_month')} />
+      <Icon name="chevron_left" />
     </Button>
     <Button
+      aria-label={$_('_sui.calendar.next_month')}
       on:click={() => {
         firstDay.setUTCMonth(firstDay.getUTCMonth() + 1);
         firstDay = firstDay;
       }}
     >
-      <Icon name="chevron_right" label={$_('_sui.calendar.next_month')} />
+      <Icon name="chevron_right" />
     </Button>
   </div>
-  <div class="grid" role="listbox">
+  <div role="listbox" class="grid">
     {#each dayList.slice(0, 7) as { day }}
-      <div class="weekday" role="presentation">
+      <div role="none" class="weekday">
         {day.toLocaleDateString('en', { weekday: 'narrow' })}
       </div>
     {/each}
     {#each dayList as { day }}
       <div
+        role="none"
         class:other-month={day.getUTCMonth() !== firstDay.getUTCMonth()}
         class:today={day.getFullYear() === now.getFullYear() &&
           day.getMonth() === now.getMonth() &&
@@ -141,7 +146,7 @@
       </div>
     {/each}
   </div>
-  <div class="footer">
+  <div role="none" class="footer">
     <Button
       on:click={() => {
         value = '';
@@ -211,6 +216,7 @@
 }
 .grid div :global(button) {
   justify-content: center;
+  margin: 0 !important;
   width: 100%;
   height: 24px;
   border-radius: 50%;

package/package/components/checkbox/checkbox-group.svelte

@@ -27,14 +27,15 @@
 </script>
 
 <div
+  role="group"
   class="sui checkbox-group {className} {orientation}"
   hidden={hidden || undefined}
-  role="group"
   aria-hidden={hidden}
   aria-disabled={disabled}
+  aria-roledescription="checkbox group"
   {...$$restProps}
 >
-  <div class="inner" inert={disabled}>
+  <div role="none" class="inner" inert={disabled}>
     <slot />
   </div>
 </div>
@@ -43,16 +44,16 @@
   display: inline-flex;
 }
 .checkbox-group.horizontal {
-  gap: 16px;
+  gap: 8px;
   align-items: center;
 }
 .checkbox-group.vertical {
-  gap: 8px;
+  gap: 4px;
   flex-direction: column;
 }
 @media (pointer: coarse) {
   .checkbox-group.vertical {
-    gap: 16px;
+    gap: 8px;
   }
 }
 

package/package/components/checkbox/checkbox.svelte

@@ -77,26 +77,25 @@
 </script>
 
 <div
+  role="none"
   class="sui checkbox {className}"
   class:checked
   class:indeterminate
   class:disabled
   class:readonly
   hidden={hidden || undefined}
-  role="none"
-  {...$$restProps}
   on:click|preventDefault|stopPropagation={(event) => {
     if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
       buttonComponent.element.click();
     }
   }}
 >
-  <div class="inner" inert={disabled}>
+  <div role="none" class="inner" inert={disabled}>
     <Button
+      role="checkbox"
       {id}
       {name}
       {value}
-      role="checkbox"
       {hidden}
       {disabled}
       {readonly}
@@ -105,6 +104,7 @@
       aria-checked={checked}
       aria-label={ariaLabel || undefined}
       aria-labelledby={ariaLabel ? undefined : '{id}-label'}
+      {...$$restProps}
       bind:this={buttonComponent}
       on:click={(event) => {
         event.preventDefault();
@@ -134,6 +134,7 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
+  margin: var(--sui-focus-ring-width);
   color: var(--sui-control-foreground-color);
   font-family: var(--sui-control-font-family);
   font-size: var(--sui-control-font-size);
@@ -158,6 +159,7 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
+  margin: 0 !important;
   border-width: 1.5px;
   border-color: var(--sui-checkbox-border-color);
   border-radius: var(--sui-checkbox-border-radius);

package/package/components/checkbox/checkbox.svelte.d.ts

@@ -11,8 +11,8 @@ export default class Checkbox extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     name?: string;
-    label?: string;
     invalid?: boolean;
+    label?: string;
     checked?: boolean | "mixed";
     disabled?: boolean;
     required?: boolean;
@@ -36,8 +36,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         name?: string | undefined;
-        label?: string | undefined;
         invalid?: boolean;
+        label?: string | undefined;
         checked?: boolean | 'mixed';
         disabled?: boolean;
         required?: boolean;

package/package/components/dialog/alert-dialog.svelte

@@ -0,0 +1,50 @@
+<!--
+  @component
+  A modal alert dialog. It only shows the OK button, just like `window.alert()`.
+  @see https://w3c.github.io/aria/#alertdialog
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+  @see https://developer.mozilla.org/en-US/docs/Web/API/Window/alert
+-->
+<script>
+  import Dialog from './dialog.svelte';
+
+  /**
+   * The `class` attribute on the `<dialog>` element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+  /**
+   * Whether to open the dialog.
+   * @type {boolean}
+   */
+  export let open = false;
+  /**
+   * Text label displayed on the header. Required.
+   * @type {string}
+   */
+  export let title;
+  /**
+   * Text label displayed on the OK button.
+   * @type {string}
+   */
+  export let okLabel = '';
+</script>
+
+<Dialog
+  role="alertdialog"
+  class={className}
+  bind:open
+  {title}
+  {okLabel}
+  showCancel={false}
+  {...$$restProps}
+  on:opening
+  on:open
+  on:ok
+  on:cancel
+  on:closing
+  on:close
+>
+  <slot />
+</Dialog>

package/package/components/dialog/alert-dialog.svelte.d.ts

@@ -0,0 +1,55 @@
+/** @typedef {typeof __propDef.props}  AlertDialogProps */
+/** @typedef {typeof __propDef.events}  AlertDialogEvents */
+/** @typedef {typeof __propDef.slots}  AlertDialogSlots */
+/**
+ * A modal alert dialog. It only shows the OK button, just like `window.alert()`.
+ * @see https://w3c.github.io/aria/#alertdialog
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/alert
+ */
+export default class AlertDialog extends SvelteComponent<{
+    [x: string]: any;
+    title: string;
+    class?: string;
+    open?: boolean;
+    okLabel?: string;
+}, {
+    opening: CustomEvent<any>;
+    open: CustomEvent<any>;
+    ok: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+    closing: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type AlertDialogProps = typeof __propDef.props;
+export type AlertDialogEvents = typeof __propDef.events;
+export type AlertDialogSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        title: string;
+        class?: string;
+        open?: boolean;
+        okLabel?: string;
+    };
+    events: {
+        opening: CustomEvent<any>;
+        open: CustomEvent<any>;
+        ok: CustomEvent<any>;
+        cancel: CustomEvent<any>;
+        closing: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/dialog/confirmation-dialog.svelte

@@ -0,0 +1,55 @@
+<!--
+  @component
+  A modal confirmation dialog. It shows the OK and Cancel buttons, just like `window.confirm()`.
+  @see https://w3c.github.io/aria/#alertdialog
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+  @see https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm
+-->
+<script>
+  import Dialog from './dialog.svelte';
+
+  /**
+   * The `class` attribute on the `<dialog>` element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+  /**
+   * Whether to open the dialog.
+   * @type {boolean}
+   */
+  export let open = false;
+  /**
+   * Text label displayed on the header. Required.
+   * @type {string}
+   */
+  export let title;
+  /**
+   * Text label displayed on the OK button.
+   * @type {string}
+   */
+  export let okLabel = '';
+  /**
+   * Text label displayed on the Cancel button.
+   * @type {string}
+   */
+  export let cancelLabel = '';
+</script>
+
+<Dialog
+  role="alertdialog"
+  class={className}
+  bind:open
+  {title}
+  {okLabel}
+  {cancelLabel}
+  {...$$restProps}
+  on:opening
+  on:open
+  on:ok
+  on:cancel
+  on:closing
+  on:close
+>
+  <slot />
+</Dialog>

package/package/components/dialog/confirmation-dialog.svelte.d.ts

@@ -0,0 +1,57 @@
+/** @typedef {typeof __propDef.props}  ConfirmationDialogProps */
+/** @typedef {typeof __propDef.events}  ConfirmationDialogEvents */
+/** @typedef {typeof __propDef.slots}  ConfirmationDialogSlots */
+/**
+ * A modal confirmation dialog. It shows the OK and Cancel buttons, just like `window.confirm()`.
+ * @see https://w3c.github.io/aria/#alertdialog
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm
+ */
+export default class ConfirmationDialog extends SvelteComponent<{
+    [x: string]: any;
+    title: string;
+    class?: string;
+    open?: boolean;
+    okLabel?: string;
+    cancelLabel?: string;
+}, {
+    opening: CustomEvent<any>;
+    open: CustomEvent<any>;
+    ok: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+    closing: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ConfirmationDialogProps = typeof __propDef.props;
+export type ConfirmationDialogEvents = typeof __propDef.events;
+export type ConfirmationDialogSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        title: string;
+        class?: string;
+        open?: boolean;
+        okLabel?: string;
+        cancelLabel?: string;
+    };
+    events: {
+        opening: CustomEvent<any>;
+        open: CustomEvent<any>;
+        ok: CustomEvent<any>;
+        cancel: CustomEvent<any>;
+        closing: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};