@sveltia/ui 0.1.2 → 0.1.4

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

@@ -5,82 +5,46 @@
  * @see https://w3c.github.io/aria/#button
  * @see https://w3c.github.io/aria-practices/#button
  */
-export default class Button extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    label?: string;
-    element?: HTMLButtonElement;
-    type?: "button" | "submit" | "reset";
-    role?: string;
-    size?: "small" | "medium" | "large";
-    hidden?: boolean;
-    disabled?: boolean;
-    pressed?: string | boolean;
-    iconName?: string;
-    iconLabel?: string;
-    iconPosition?: "start" | "end";
-}, {
-    mouseenter: MouseEvent;
-    mouseleave: MouseEvent;
-    click: MouseEvent;
-    dragover: DragEvent;
-    dragleave: DragEvent;
-    dragend: DragEvent;
-    drop: DragEvent;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Button {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: any);
+    get class(): any;
     /**accessor*/
-    set element(arg: HTMLButtonElement);
-    get element(): HTMLButtonElement;
+    set element(arg: any);
+    get element(): any;
     /**accessor*/
-    set type(arg: "button" | "submit" | "reset");
-    get type(): "button" | "submit" | "reset";
+    set type(arg: any);
+    get type(): any;
     /**accessor*/
-    set role(arg: string);
-    get role(): string;
+    set role(arg: any);
+    get role(): any;
     /**accessor*/
-    set size(arg: "small" | "medium" | "large");
-    get size(): "small" | "medium" | "large";
+    set size(arg: any);
+    get size(): any;
     /**accessor*/
-    set hidden(arg: boolean);
-    get hidden(): boolean;
+    set hidden(arg: any);
+    get hidden(): any;
     /**accessor*/
-    set disabled(arg: boolean);
-    get disabled(): boolean;
+    set disabled(arg: any);
+    get disabled(): any;
     /**accessor*/
-    set pressed(arg: string | boolean);
-    get pressed(): string | boolean;
+    set pressed(arg: any);
+    get pressed(): any;
     /**accessor*/
-    set label(arg: string);
-    get label(): string;
+    set label(arg: any);
+    get label(): any;
     /**accessor*/
-    set iconName(arg: string);
-    get iconName(): string;
-    /**accessor*/
-    set iconLabel(arg: string);
-    get iconLabel(): string;
-    /**accessor*/
-    set iconPosition(arg: "start" | "end");
-    get iconPosition(): "start" | "end";
+    set popupPosition(arg: any);
+    get popupPosition(): any;
 }
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         label?: string;
+        class?: string;
         element?: (HTMLButtonElement | undefined);
         type?: ('button' | 'submit' | 'reset');
         role?: string;
@@ -88,9 +52,7 @@ declare const __propDef: {
         hidden?: boolean;
         disabled?: boolean;
         pressed?: (boolean | string | undefined);
-        iconName?: string;
-        iconLabel?: string;
-        iconPosition?: ('start' | 'end');
+        popupPosition?: any;
     };
     events: {
         mouseenter: MouseEvent;
@@ -107,7 +69,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'start-icon': {};
         default: {};
+        'end-icon': {};
+        popup: {};
     };
 };
 export {};

package/package/components/core/checkbox.svelte

@@ -7,6 +7,7 @@
   import { createEventDispatcher } from 'svelte';
   import { getRandomId } from '../helpers/util';
   import Button from './button.svelte';
+  import Icon from './icon.svelte';
 
   /**
    * CSS class name on the button.
@@ -53,7 +54,6 @@
 >
   <Button
     {id}
-    iconName={indeterminate ? 'remove' : 'check'}
     role="checkbox"
     aria-checked={indeterminate ? 'mixed' : checked}
     aria-labelledby="{id}-label"
@@ -64,7 +64,9 @@
       checked = indeterminate ? true : !checked;
       indeterminate = false;
     }}
-  />
+  >
+    <Icon slot="start-icon" name={indeterminate ? 'remove' : 'check'} />
+  </Button>
   {#if $$slots.default}
     <label id="{id}-label">
       <slot />

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

@@ -5,24 +5,11 @@
  * @see https://w3c.github.io/aria/#checkbox
  * @see https://w3c.github.io/aria-practices/#checkbox
  */
-export default class Checkbox extends SvelteComponentTyped<{
-    class?: string;
-    name?: string;
-    value?: string;
-    checked?: string | boolean;
-    indeterminate?: boolean;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Checkbox {
 }
 export type CheckboxProps = typeof __propDef.props;
 export type CheckboxEvents = typeof __propDef.events;
 export type CheckboxSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;

package/package/components/core/dialog.svelte

@@ -7,6 +7,7 @@
   import { createEventDispatcher, onMount } from 'svelte';
   import { _ } from 'svelte-i18n';
   import Button from './button.svelte';
+  import Icon from './icon.svelte';
   import Spacer from './spacer.svelte';
 
   /**
@@ -134,13 +135,13 @@
             {#if showClose}
               <Button
                 class="ternary iconic"
-                iconName="close"
-                iconLabel={$_('sui._.close')}
                 on:click={() => {
                   dialog.returnValue = 'close';
                   open = false;
                 }}
-              />
+              >
+                <Icon slot="start-icon" name="close" label={$_('sui._.close')} />
+              </Button>
             {/if}
           {/if}
         </div>

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

@@ -5,45 +5,17 @@
  * @see https://w3c.github.io/aria/#dialog
  * @see https://w3c.github.io/aria-practices/#dialog_modal
  */
-export default class Dialog extends SvelteComponentTyped<{
-    class?: string;
-    size?: "small" | "medium" | "large";
-    title?: string;
-    open?: boolean;
-    modal?: boolean;
-    showCancel?: boolean;
-    showOk?: boolean;
-    showClose?: boolean;
-    okLabel?: string;
-    okDisabled?: boolean;
-    cancelLabel?: string;
-    cancelDisabled?: boolean;
-    closeOnBackdropClick?: boolean;
-}, {
-    submit: SubmitEvent;
-    ok: CustomEvent<any>;
-    cancel: CustomEvent<any>;
-    close: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    'header-extra': {};
-    default: {};
-    footer: {};
-    'footer-extra': {};
-}> {
+export default class Dialog {
 }
 export type DialogProps = typeof __propDef.props;
 export type DialogEvents = typeof __propDef.events;
 export type DialogSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        class?: string;
-        size?: ('small' | 'medium' | 'large');
         title?: string;
         open?: boolean;
+        class?: string;
+        size?: ('small' | 'medium' | 'large');
         modal?: boolean;
         showCancel?: boolean;
         showOk?: boolean;

package/package/components/core/grid-cell.svelte.d.ts

@@ -1,19 +1,11 @@
 /** @typedef {typeof __propDef.props}  GridCellProps */
 /** @typedef {typeof __propDef.events}  GridCellEvents */
 /** @typedef {typeof __propDef.slots}  GridCellSlots */
-export default class GridCell extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class GridCell {
 }
 export type GridCellProps = typeof __propDef.props;
 export type GridCellEvents = typeof __propDef.events;
 export type GridCellSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/core/group.svelte.d.ts

@@ -1,26 +1,16 @@
 /** @typedef {typeof __propDef.props}  GroupProps */
 /** @typedef {typeof __propDef.events}  GroupEvents */
 /** @typedef {typeof __propDef.slots}  GroupSlots */
-export default class Group extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    title?: string;
-    ariaLabel?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Group {
 }
 export type GroupProps = typeof __propDef.props;
 export type GroupEvents = typeof __propDef.events;
 export type GroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         title?: string;
+        class?: string;
         ariaLabel?: string;
     };
     events: {

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

@@ -1,23 +1,16 @@
 /** @typedef {typeof __propDef.props}  IconProps */
 /** @typedef {typeof __propDef.events}  IconEvents */
 /** @typedef {typeof __propDef.slots}  IconSlots */
-export default class Icon extends SvelteComponentTyped<{
-    class?: string;
-    name?: string;
-    label?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+export default class Icon {
 }
 export type IconProps = typeof __propDef.props;
 export type IconEvents = typeof __propDef.events;
 export type IconSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        label?: string;
         class?: string;
         name?: string;
-        label?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/core/menu-button.svelte

@@ -3,7 +3,6 @@
   @see https://w3c.github.io/aria-practices/#menubutton
 -->
 <script>
-  import Menu from '../composite/menu.svelte';
   import Popup from '../util/popup.svelte';
   import Button from './button.svelte';
 
@@ -19,25 +18,17 @@
    * Where to show the dropdown menu.
    * @type {PopupPosition}
    */
-  export let position = 'bottom-left';
-
-  /**
-   * Whether to show an arrow icon next to the label, if `iconName` is not given. The default is
-   * `true`.
-   */
-  export let showArrow = true;
+  export let popupPosition = 'bottom-left';
 
   /** @type {?Button} */
   let buttonComponent;
-  /** @type {?Menu} */
-  let menuComponent;
+  /** @type {?Popup} */
+  let popupComponent;
 </script>
 
 <Button
   class="sui menu-button {className}"
   aria-haspopup="menu"
-  iconName={$$props.iconName || (showArrow ? 'arrow_drop_down' : undefined)}
-  iconPosition="end"
   {...$$restProps}
   bind:this={buttonComponent}
   on:keydown={(event) => {
@@ -47,7 +38,7 @@
       event.preventDefault();
 
       const members = [
-        ...menuComponent.element.querySelectorAll('[role^="menuitem"]:not([aria-disabled="true"])'),
+        ...popupComponent.dialog.querySelectorAll('[role^="menuitem"]:not([aria-disabled="true"])'),
       ];
 
       if (members.length) {
@@ -56,10 +47,11 @@
     }
   }}
 >
-  <slot name="button" />
+  <slot name="start-icon" slot="start-icon" />
+  <slot />
+  <slot name="end-icon" slot="end-icon" />
 </Button>
-<Popup anchor={buttonComponent?.element} {position}>
-  <Menu bind:this={menuComponent}>
-    <slot />
-  </Menu>
+
+<Popup anchor={buttonComponent?.element} position={popupPosition} bind:this={popupComponent}>
+  <slot name="popup" />
 </Popup>

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

@@ -2,35 +2,29 @@
 /** @typedef {typeof __propDef.events}  MenuButtonEvents */
 /** @typedef {typeof __propDef.slots}  MenuButtonSlots */
 /** @see https://w3c.github.io/aria-practices/#menubutton */
-export default class MenuButton extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    position?: any;
-    showArrow?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    button: {};
-    default: {};
-}> {
+export default class MenuButton {
 }
 export type MenuButtonProps = typeof __propDef.props;
 export type MenuButtonEvents = typeof __propDef.events;
 export type MenuButtonSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        position?: any;
-        showArrow?: boolean;
+        popupPosition?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        button: {};
+        'start-icon': {
+            slot: string;
+        };
         default: {};
+        'end-icon': {
+            slot: string;
+        };
+        popup: {};
     };
 };
 export {};

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

@@ -2,28 +2,18 @@
 /** @typedef {typeof __propDef.events}  MenuItemCheckboxEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemCheckboxSlots */
 /** @see https://w3c.github.io/aria/#menuitemcheckbox */
-export default class MenuItemCheckbox extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class MenuItemCheckbox {
 }
 export type MenuItemCheckboxProps = typeof __propDef.props;
 export type MenuItemCheckboxEvents = typeof __propDef.events;
 export type MenuItemCheckboxSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
     };
     events: {
-        click: MouseEvent;
+        click: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/core/menu-item-radio.svelte.d.ts

@@ -2,28 +2,18 @@
 /** @typedef {typeof __propDef.events}  MenuItemRadioEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemRadioSlots */
 /** @see https://w3c.github.io/aria/#menuitemradio */
-export default class MenuItemRadio extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class MenuItemRadio {
 }
 export type MenuItemRadioProps = typeof __propDef.props;
 export type MenuItemRadioEvents = typeof __propDef.events;
 export type MenuItemRadioSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
     };
     events: {
-        click: MouseEvent;
+        click: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/core/menu-item.svelte

@@ -48,7 +48,7 @@
     }}
   >
     {#if iconName}
-      <Icon name={iconName} label={iconLabel} />
+      <Icon slot="start-icon" name={iconName} label={iconLabel} />
     {/if}
     {#if label}
       <span class="label">{label}</span>

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

@@ -2,38 +2,23 @@
 /** @typedef {typeof __propDef.events}  MenuItemEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemSlots */
 /** @see https://w3c.github.io/aria/#menuitem */
-export default class MenuItem extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    label?: string;
-    role?: "menuitem" | "menuitemcheckbox" | "menuitemradio";
-    iconName?: string;
-    iconLabel?: string;
-    checked?: boolean;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class MenuItem {
 }
 export type MenuItemProps = typeof __propDef.props;
 export type MenuItemEvents = typeof __propDef.events;
 export type MenuItemSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         label?: string;
+        class?: string;
         role?: ('menuitem' | 'menuitemcheckbox' | 'menuitemradio');
+        checked?: boolean;
         iconName?: string;
         iconLabel?: string;
-        checked?: boolean;
     };
     events: {
-        click: MouseEvent;
+        click: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/core/number-input.svelte

@@ -5,6 +5,7 @@
 <script>
   import { _ } from 'svelte-i18n';
   import Button from './button.svelte';
+  import Icon from './icon.svelte';
   import TextInput from './text-input.svelte';
 
   /**
@@ -70,21 +71,21 @@
   <Button
     class="iconic"
     disabled={disabled || Number.isNaN(Number(value))}
-    iconLabel={$_('sui.number_input.decrease')}
-    iconName={'arrow_downward'}
     on:click={() => {
       decrease();
     }}
-  />
+  >
+    <Icon slot="start-icon" name="arrow_downward" label={$_('sui.number_input.decrease')} />
+  </Button>
   <Button
     class="iconic"
     disabled={disabled || Number.isNaN(Number(value))}
-    iconLabel={$_('sui.number_input.increase')}
-    iconName={'arrow_upward'}
     on:click={() => {
       increase();
     }}
-  />
+  >
+    <Icon slot="start-icon" name={'arrow_upward'} label={$_('sui.number_input.increase')} />
+  </Button>
 </div>
 
 <style>.number-input {

package/package/components/core/number-input.svelte.d.ts

@@ -2,25 +2,11 @@
 /** @typedef {typeof __propDef.events}  NumberInputEvents */
 /** @typedef {typeof __propDef.slots}  NumberInputSlots */
 /** @see https://w3c.github.io/aria/#textbox */
-export default class NumberInput extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    disabled?: boolean;
-    value?: string;
-    min?: any;
-    max?: any;
-    step?: number;
-}, {
-    keypress: KeyboardEvent;
-    input: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+export default class NumberInput {
 }
 export type NumberInputProps = typeof __propDef.props;
 export type NumberInputEvents = typeof __propDef.events;
 export type NumberInputSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -32,8 +18,8 @@ declare const __propDef: {
         step?: number;
     };
     events: {
-        keypress: KeyboardEvent;
-        input: Event;
+        keypress: any;
+        input: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/core/option.svelte

@@ -28,10 +28,12 @@
     on:dragend
     on:drop
   >
-    <slot />
     {#if selected}
       <Icon class="check" name="check" />
     {/if}
+    <slot name="start-icon" slot="start-icon" />
+    <slot />
+    <slot name="end-icon" slot="end-icon" />
   </Button>
 </div>