@sveltia/ui 0.3.2 → 0.5.0

package/package/components/alert/alert.svelte

@@ -0,0 +1,55 @@
+<!--
+  @component
+  Inline alert message.
+  @see https://w3c.github.io/aria/#alert
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+-->
+<script>
+  import Icon from '../icon/icon.svelte';
+
+  /**
+   * Alert type.
+   * @type {'error' | 'warning' | 'info' | 'success'}
+   */
+  export let type = 'error';
+</script>
+
+<div class="sui alert {type}" role="alert" {...$$restProps}>
+  {#if $$slots.icon}
+    <slot name="icon" />
+  {:else}
+    <Icon name={type === 'success' ? 'check_circle' : type} />
+  {/if}
+  <slot />
+</div>
+
+<style>.alert {
+  display: flex;
+  align-items: center;
+  gap: var(--gap, 8px);
+  padding: var(--padding, 8px);
+  border-width: var(--border-width, var(--control--medium--border-width));
+  border-style: var(--border-style, solid);
+  border-radius: var(--border-radius, var(--control--medium--border-radius));
+  font-size: var(--font-size, var(--font-size--default));
+}
+.alert.error {
+  border-color: var(--error-border-color);
+  color: var(--error-foreground-color);
+  background-color: var(--error-background-color);
+}
+.alert.warning {
+  border-color: var(--warning-border-color);
+  color: var(--warning-foreground-color);
+  background-color: var(--warning-background-color);
+}
+.alert.info {
+  border-color: var(--info-border-color);
+  color: var(--info-foreground-color);
+  background-color: var(--info-background-color);
+}
+.alert.success {
+  border-color: var(--success-border-color);
+  color: var(--success-foreground-color);
+  background-color: var(--success-background-color);
+}</style>

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

@@ -0,0 +1,36 @@
+/** @typedef {typeof __propDef.props}  AlertProps */
+/** @typedef {typeof __propDef.events}  AlertEvents */
+/** @typedef {typeof __propDef.slots}  AlertSlots */
+/**
+ * Inline alert message.
+ * @see https://w3c.github.io/aria/#alert
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+ */
+export default class Alert extends SvelteComponent<{
+    [x: string]: any;
+    type?: "error" | "warning" | "info" | "success";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    default: {};
+}> {
+}
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        type?: 'error' | 'warning' | 'info' | 'success';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+    };
+};
+export {};

package/package/components/button/button.svelte

@@ -191,7 +191,7 @@ button:global(.ghost)[aria-pressed=true] {
   background-color: var(--highlight-background-color);
 }
 button:global(.danger) {
-  background-color: var(--danger-background-color);
+  background-color: var(--error-background-color);
 }
 button:global(.large) {
   height: var(--button--large--height);

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

@@ -6,12 +6,12 @@
  * @see https://w3c.github.io/aria/#button
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
  */
-export default class Button extends SvelteComponentTyped<{
+export default class Button extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     label?: string;
-    disabled?: boolean;
     type?: "reset" | "submit" | "button";
-    class?: string;
+    disabled?: boolean;
     element?: HTMLButtonElement;
     role?: string;
     size?: "small" | "medium" | "large";
@@ -71,14 +71,14 @@ export default class Button extends SvelteComponentTyped<{
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
         label?: string;
-        disabled?: boolean;
         type?: ('button' | 'submit' | 'reset');
-        class?: string;
+        disabled?: boolean;
         element?: HTMLButtonElement | null;
         role?: string;
         size?: ('small' | 'medium' | 'large');

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

@@ -6,10 +6,10 @@
  * @see https://w3c.github.io/aria/#radiogroup
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
-export default class SelectButtonGroup extends SvelteComponentTyped<{
+export default class SelectButtonGroup extends SvelteComponent<{
+    class?: string;
     disabled?: boolean;
     value?: string;
-    class?: string;
     element?: HTMLElement;
     ariaLabel?: string;
 }, {
@@ -23,12 +23,12 @@ export default class SelectButtonGroup extends SvelteComponentTyped<{
 export type SelectButtonGroupProps = typeof __propDef.props;
 export type SelectButtonGroupEvents = typeof __propDef.events;
 export type SelectButtonGroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        class?: string;
         disabled?: boolean;
         value?: string;
-        class?: string;
         element?: HTMLElement | null;
         ariaLabel?: string;
     };

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

@@ -6,7 +6,7 @@
  * @see https://w3c.github.io/aria/#radio
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
-export default class SelectButton extends SvelteComponentTyped<{
+export default class SelectButton extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     selected?: boolean;
@@ -27,7 +27,7 @@ export default class SelectButton extends SvelteComponentTyped<{
 export type SelectButtonProps = typeof __propDef.props;
 export type SelectButtonEvents = typeof __propDef.events;
 export type SelectButtonSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/calendar/calendar.svelte

@@ -55,8 +55,7 @@
       aria-haspopup="dialog"
     >
       <Icon slot="end-icon" name="arrow_drop_down" />
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div slot="popup" class="popup-inner" on:click|stopPropagation>
+      <div slot="popup" class="popup-inner" role="none" on:click|stopPropagation>
         <div role="group" aria-label={$_('_sui.calendar.year')}>
           <div class="header">
             <Button

package/package/components/calendar/calendar.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  CalendarEvents */
 /** @typedef {typeof __propDef.slots}  CalendarSlots */
 /** A calendar (date picker) widget. */
-export default class Calendar extends SvelteComponentTyped<{
+export default class Calendar extends SvelteComponent<{
     value?: string;
 }, {
     click: MouseEvent;
@@ -13,7 +13,7 @@ export default class Calendar extends SvelteComponentTyped<{
 export type CalendarProps = typeof __propDef.props;
 export type CalendarEvents = typeof __propDef.events;
 export type CalendarSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         value?: string | null;

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

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  CheckboxGroupEvents */
 /** @typedef {typeof __propDef.slots}  CheckboxGroupSlots */
 /** The layout container of `<Checkbox>`es. */
-export default class CheckboxGroup extends SvelteComponentTyped<{
+export default class CheckboxGroup extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     orientation?: "vertical" | "horizontal";
@@ -16,7 +16,7 @@ export default class CheckboxGroup extends SvelteComponentTyped<{
 export type CheckboxGroupProps = typeof __propDef.props;
 export type CheckboxGroupEvents = typeof __propDef.events;
 export type CheckboxGroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/checkbox/checkbox.svelte

@@ -47,12 +47,13 @@
   <input type="hidden" {name} {value} />
 {/if}
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <span
   class="sui checkbox {className}"
   class:checked
   class:indeterminate
   class:disabled
+  role="none"
+  {...$$restProps}
   on:click|preventDefault|stopPropagation={(event) => {
     if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
       buttonComponent.element.click();

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

@@ -7,12 +7,13 @@
  * @see https://w3c.github.io/aria/#checkbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
  */
-export default class Checkbox extends SvelteComponentTyped<{
+export default class Checkbox extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+    name?: string;
     label?: string;
     disabled?: boolean;
-    name?: string;
     value?: string;
-    class?: string;
     checked?: string | boolean;
     indeterminate?: boolean;
 }, {
@@ -26,14 +27,15 @@ export default class Checkbox extends SvelteComponentTyped<{
 export type CheckboxProps = typeof __propDef.props;
 export type CheckboxEvents = typeof __propDef.events;
 export type CheckboxSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        class?: string;
+        name?: string;
         label?: string | null;
         disabled?: boolean;
-        name?: string;
         value?: string | null;
-        class?: string;
         checked?: (boolean | string | undefined);
         indeterminate?: boolean;
     };

package/package/components/dialog/dialog.svelte

@@ -126,11 +126,12 @@
   });
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <dialog
   bind:this={dialog}
   class="sui dialog {className} {size}"
   class:open={showDialog}
+  {...$$restProps}
   on:click={({ target }) => {
     if (closeOnBackdropClick && /** @type {HTMLElement?} */ (target)?.matches('dialog')) {
       dialog.returnValue = 'cancel';

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

@@ -6,10 +6,11 @@
  * @see https://w3c.github.io/aria/#dialog
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
-export default class Dialog extends SvelteComponentTyped<{
+export default class Dialog extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
     title?: string;
     open?: boolean;
-    class?: string;
     size?: "small" | "medium" | "large" | "x-large";
     modal?: boolean;
     showCancel?: boolean;
@@ -38,12 +39,13 @@ export default class Dialog extends SvelteComponentTyped<{
 export type DialogProps = typeof __propDef.props;
 export type DialogEvents = typeof __propDef.events;
 export type DialogSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        class?: string;
         title?: string;
         open?: boolean;
-        class?: string;
         size?: ('small' | 'medium' | 'large' | 'x-large');
         modal?: boolean;
         showCancel?: boolean;

package/package/components/disclosure/disclosure.svelte

@@ -24,7 +24,13 @@
   const id = getRandomId('disclosure');
 </script>
 
-<div class="sui disclosure {className}" {id} role="group" aria-labelledby="{id}-header">
+<div
+  class="sui disclosure {className}"
+  {id}
+  role="group"
+  aria-labelledby="{id}-header"
+  {...$$restProps}
+>
   <Button
     class="header"
     id="{id}-header"

package/package/components/disclosure/disclosure.svelte.d.ts

@@ -6,9 +6,10 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
  */
-export default class Disclosure extends SvelteComponentTyped<{
-    label?: string;
+export default class Disclosure extends SvelteComponent<{
+    [x: string]: any;
     class?: string;
+    label?: string;
     expanded?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -19,11 +20,12 @@ export default class Disclosure extends SvelteComponentTyped<{
 export type DisclosureProps = typeof __propDef.props;
 export type DisclosureEvents = typeof __propDef.events;
 export type DisclosureSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        label?: string;
+        [x: string]: any;
         class?: string;
+        label?: string;
         expanded?: boolean;
     };
     events: {

package/package/components/divider/divider.svelte

@@ -16,7 +16,12 @@
   export { className as class };
 </script>
 
-<div role="separator" class="sui divider {className}" aria-orientation={orientation} />
+<div
+  role="separator"
+  class="sui divider {className}"
+  aria-orientation={orientation}
+  {...$$restProps}
+/>
 
 <style>.divider {
   flex: none;

package/package/components/divider/divider.svelte.d.ts

@@ -5,7 +5,8 @@
  * A content divider with a visible vertical/horizontal line.
  * @see https://w3c.github.io/aria/#separator
  */
-export default class Divider extends SvelteComponentTyped<{
+export default class Divider extends SvelteComponent<{
+    [x: string]: any;
     class?: string;
     orientation?: "vertical" | "horizontal";
 }, {
@@ -15,9 +16,10 @@ export default class Divider extends SvelteComponentTyped<{
 export type DividerProps = typeof __propDef.props;
 export type DividerEvents = typeof __propDef.events;
 export type DividerSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         class?: string;
         orientation?: ('horizontal' | 'vertical');
     };

package/package/components/divider/spacer.svelte

@@ -15,7 +15,7 @@
   export let flex = false;
 </script>
 
-<div class="sui spacer {className}" class:flex />
+<div class="sui spacer {className}" class:flex {...$$restProps} />
 
 <style>.spacer.flex {
   flex: auto;

package/package/components/divider/spacer.svelte.d.ts

@@ -2,7 +2,8 @@
 /** @typedef {typeof __propDef.events}  SpacerEvents */
 /** @typedef {typeof __propDef.slots}  SpacerSlots */
 /** A content divider with no line. It can be flexible. */
-export default class Spacer extends SvelteComponentTyped<{
+export default class Spacer extends SvelteComponent<{
+    [x: string]: any;
     class?: string;
     flex?: boolean;
 }, {
@@ -12,9 +13,10 @@ export default class Spacer extends SvelteComponentTyped<{
 export type SpacerProps = typeof __propDef.props;
 export type SpacerEvents = typeof __propDef.events;
 export type SpacerSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         class?: string;
         flex?: boolean;
     };

package/package/components/drawer/drawer.svelte

@@ -128,11 +128,12 @@
   });
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <dialog
   bind:this={dialog}
   class="sui dialog {className} {size} {position} {orientation}"
   class:open={showDialog}
+  {...$$restProps}
   on:click={({ target }) => {
     if (closeOnBackdropClick && /** @type {HTMLElement?} */ (target)?.matches('dialog')) {
       dialog.returnValue = 'cancel';

package/package/components/drawer/drawer.svelte.d.ts

@@ -6,11 +6,12 @@
  * @see https://w3c.github.io/aria/#dialog
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
-export default class Drawer extends SvelteComponentTyped<{
+export default class Drawer extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
     title?: string;
     position?: "top" | "right" | "bottom" | "left";
     open?: boolean;
-    class?: string;
     size?: "small" | "medium" | "large" | "x-large";
     showClose?: false | "inside" | "outside";
     closeOnBackdropClick?: boolean;
@@ -31,13 +32,14 @@ export default class Drawer extends SvelteComponentTyped<{
 export type DrawerProps = typeof __propDef.props;
 export type DrawerEvents = typeof __propDef.events;
 export type DrawerSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        class?: string;
         title?: string;
         position?: ('top' | 'right' | 'bottom' | 'left');
         open?: boolean;
-        class?: string;
         size?: ('small' | 'medium' | 'large' | 'x-large');
         showClose?: ('inside' | 'outside' | false);
         closeOnBackdropClick?: boolean;

package/package/components/icon/icon.svelte

@@ -21,6 +21,7 @@
   class="sui icon material-symbols-outlined {className}"
   aria-label={label || undefined}
   aria-hidden={label ? undefined : true}
+  {...$$restProps}
 >
   {name}
 </span>

package/package/components/icon/icon.svelte.d.ts

@@ -5,10 +5,11 @@
  * A Material Symbols icon.
  * @see https://developers.google.com/fonts/docs/material_symbols
  */
-export default class Icon extends SvelteComponentTyped<{
-    label?: string;
-    name?: string;
+export default class Icon extends SvelteComponent<{
+    [x: string]: any;
     class?: string;
+    name?: string;
+    label?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -16,12 +17,13 @@ export default class Icon extends SvelteComponentTyped<{
 export type IconProps = typeof __propDef.props;
 export type IconEvents = typeof __propDef.events;
 export type IconSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        label?: string;
-        name?: string;
+        [x: string]: any;
         class?: string;
+        name?: string;
+        label?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/listbox/listbox.svelte.d.ts

@@ -7,7 +7,7 @@
  * @see https://w3c.github.io/aria/#listbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
  */
-export default class Listbox extends SvelteComponentTyped<{
+export default class Listbox extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     element?: HTMLElement;
@@ -33,7 +33,7 @@ export default class Listbox extends SvelteComponentTyped<{
 export type ListboxProps = typeof __propDef.props;
 export type ListboxEvents = typeof __propDef.events;
 export type ListboxSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/listbox/option-group.svelte.d.ts

@@ -8,10 +8,10 @@
  * @see https://w3c.github.io/aria/#listbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/
  */
-export default class OptionGroup extends SvelteComponentTyped<{
+export default class OptionGroup extends SvelteComponent<{
     [x: string]: any;
-    label?: string;
     class?: string;
+    label?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -21,12 +21,12 @@ export default class OptionGroup extends SvelteComponentTyped<{
 export type OptionGroupProps = typeof __propDef.props;
 export type OptionGroupEvents = typeof __propDef.events;
 export type OptionGroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        label?: string;
         class?: string;
+        label?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/listbox/option.svelte.d.ts

@@ -6,11 +6,11 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
  * @see https://w3c.github.io/aria/#option
  */
-export default class Option extends SvelteComponentTyped<{
+export default class Option extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     label?: string;
     value?: any;
-    class?: string;
     selected?: boolean;
 }, {
     click: MouseEvent;
@@ -33,13 +33,13 @@ export default class Option extends SvelteComponentTyped<{
 export type OptionProps = typeof __propDef.props;
 export type OptionEvents = typeof __propDef.events;
 export type OptionSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
         label?: string;
         value?: any;
-        class?: string;
         selected?: boolean;
     };
     events: {

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

@@ -5,7 +5,7 @@
  * A button to open a `<Menu>` widget.
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
  */
-export default class MenuButton extends SvelteComponentTyped<{
+export default class MenuButton extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     popupPosition?: PopupPosition;
@@ -25,7 +25,7 @@ export default class MenuButton extends SvelteComponentTyped<{
 export type MenuButtonProps = typeof __propDef.props;
 export type MenuButtonEvents = typeof __propDef.events;
 export type MenuButtonSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/menu/menu-item-checkbox.svelte.d.ts

@@ -5,7 +5,7 @@
  * A menu item widget with a checkbox.
  * @see https://w3c.github.io/aria/#menuitemcheckbox
  */
-export default class MenuItemCheckbox extends SvelteComponentTyped<{
+export default class MenuItemCheckbox extends SvelteComponent<{
     [x: string]: any;
     class?: string;
 }, {
@@ -19,7 +19,7 @@ export default class MenuItemCheckbox extends SvelteComponentTyped<{
 export type MenuItemCheckboxProps = typeof __propDef.props;
 export type MenuItemCheckboxEvents = typeof __propDef.events;
 export type MenuItemCheckboxSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;