@sveltia/ui 0.1.2 → 0.1.4

package/package/components/composite/calendar.svelte

@@ -2,7 +2,6 @@
   import { _ } from 'svelte-i18n';
   import Button from '../core/button.svelte';
   import Icon from '../core/icon.svelte';
-  import MenuButton from '../core/menu-button.svelte';
   import Separator from '../core/separator.svelte';
   import Spacer from '../core/spacer.svelte';
 
@@ -43,13 +42,14 @@
 <div role="group">
   <input type="hidden" bind:value />
   <div class="header">
-    <MenuButton
+    <Button
       class="ternary"
       label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
-      iconName="arrow_drop_down"
+      aria-haspopup="dialog"
     >
+      <Icon slot="end-icon" name="arrow_drop_down" />
       <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div class="popup-inner" on:click|stopPropagation>
+      <div slot="popup" class="popup-inner" on:click|stopPropagation>
         <div role="group" aria-label={$_('sui.calendar.year')}>
           <div class="header">
             <Button
@@ -90,7 +90,7 @@
           </div>
         </div>
       </div>
-    </MenuButton>
+    </Button>
     <Button
       on:click={() => {
         firstDay.setUTCMonth(firstDay.getUTCMonth() - 1);

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

@@ -1,18 +1,11 @@
 /** @typedef {typeof __propDef.props}  CalendarProps */
 /** @typedef {typeof __propDef.events}  CalendarEvents */
 /** @typedef {typeof __propDef.slots}  CalendarSlots */
-export default class Calendar extends SvelteComponentTyped<{
-    value?: string;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+export default class Calendar {
 }
 export type CalendarProps = typeof __propDef.props;
 export type CalendarEvents = typeof __propDef.events;
 export type CalendarSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         value?: (string | undefined);

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

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

package/package/components/composite/combobox.svelte

@@ -8,7 +8,9 @@
   import { _ } from 'svelte-i18n';
   import { writable } from 'svelte/store';
   import Button from '../core/button.svelte';
+  import Icon from '../core/icon.svelte';
   import TextInput from '../core/text-input.svelte';
+  import { getRandomId } from '../helpers/util';
   import Popup from '../util/popup.svelte';
   import Listbox from './listbox.svelte';
 
@@ -42,6 +44,7 @@
   export let value = undefined;
 
   const dispatch = createEventDispatcher();
+  const id = getRandomId('combobox');
   let comboboxElement;
   /** @type {(TextInput| undefined)} */
   let inputComponent;
@@ -65,10 +68,13 @@
 
 <div class="sui combobox {className}">
   {#if readOnly}
-    <!-- svelte-ignore a11y-role-has-required-aria-props -->
     <div
       class:selected={value !== undefined}
       role="combobox"
+      {id}
+      tabindex="0"
+      aria-controls="{id}-popup"
+      aria-expanded={$isPopupOpen}
       aria-disabled={disabled ? true : undefined}
       aria-haspopup="listbox"
       aria-activedescendant="selected-option"
@@ -80,8 +86,12 @@
   {:else}
     <TextInput
       role="combobox"
+      {id}
       {value}
       {disabled}
+      aria-controls="{id}-popup"
+      aria-expanded={$isPopupOpen}
+      aria-disabled={disabled ? true : undefined}
       aria-haspopup="listbox"
       aria-activedescendant="selected-option"
       {...$$restProps}
@@ -90,9 +100,10 @@
   {/if}
   <Button
     {disabled}
+    aria-controls="{id}-popup"
+    aria-expanded={$isPopupOpen}
+    aria-disabled={disabled ? true : undefined}
     class="ternary iconic"
-    iconName="expand_more"
-    iconLabel={$isPopupOpen ? $_('sui._.collapse') : $_('sui._.expand')}
     on:click={(event) => {
       event.stopPropagation();
 
@@ -100,9 +111,16 @@
         $isPopupOpen = !$isPopupOpen;
       }
     }}
-  />
+  >
+    <Icon
+      slot="start-icon"
+      name="expand_more"
+      label={$isPopupOpen ? $_('sui._.collapse') : $_('sui._.expand')}
+    />
+  </Button>
 </div>
 <Popup
+  id="{id}-popup"
   anchor={comboboxElement || inputComponent?.element}
   {position}
   bind:open={isPopupOpen}

package/package/components/composite/combobox.svelte.d.ts

@@ -5,34 +5,19 @@
  * @see https://w3c.github.io/aria/#combobox
  * @see https://w3c.github.io/aria-practices/#combobox
  */
-export default class Combobox extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-    value?: string;
-    position?: any;
-    readOnly?: boolean;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Combobox {
 }
 export type ComboboxProps = typeof __propDef.props;
 export type ComboboxEvents = typeof __propDef.events;
 export type ComboboxSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         label?: string;
+        position?: any;
+        class?: string;
         disabled?: boolean;
         value?: (string | undefined);
-        position?: any;
         readOnly?: boolean;
     };
     events: {

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

@@ -5,24 +5,15 @@
  * @see https://w3c.github.io/aria-practices/#disclosure
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
  */
-export default class Disclosure extends SvelteComponentTyped<{
-    class?: string;
-    label?: string;
-    expanded?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Disclosure {
 }
 export type DisclosureProps = typeof __propDef.props;
 export type DisclosureEvents = typeof __propDef.events;
 export type DisclosureSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        class?: string;
         label?: string;
+        class?: string;
         expanded?: boolean;
     };
     events: {

package/package/components/composite/grid.svelte.d.ts

@@ -1,20 +1,11 @@
 /** @typedef {typeof __propDef.props}  GridProps */
 /** @typedef {typeof __propDef.events}  GridEvents */
 /** @typedef {typeof __propDef.slots}  GridSlots */
-export default class Grid extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    element?: HTMLElement;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Grid {
 }
 export type GridProps = typeof __propDef.props;
 export type GridEvents = typeof __propDef.events;
 export type GridSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -5,33 +5,20 @@
  * @see https://w3c.github.io/aria/#listbox
  * @see https://w3c.github.io/aria-practices/#Listbox
  */
-export default class Listbox extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    element?: HTMLElement;
-    multiple?: boolean;
-}, {
-    click: MouseEvent;
-    select: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Listbox {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: any);
+    get class(): any;
     /**accessor*/
-    set element(arg: HTMLElement);
-    get element(): HTMLElement;
+    set element(arg: any);
+    get element(): any;
     /**accessor*/
-    set multiple(arg: boolean);
-    get multiple(): boolean;
+    set multiple(arg: any);
+    get multiple(): any;
 }
 export type ListboxProps = typeof __propDef.props;
 export type ListboxEvents = typeof __propDef.events;
 export type ListboxSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/composite/menu-item-group.svelte.d.ts

@@ -1,26 +1,16 @@
 /** @typedef {typeof __propDef.props}  MenuItemGroupProps */
 /** @typedef {typeof __propDef.events}  MenuItemGroupEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemGroupSlots */
-export default class MenuItemGroup extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    title?: string;
-    ariaLabel?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class MenuItemGroup {
 }
 export type MenuItemGroupProps = typeof __propDef.props;
 export type MenuItemGroupEvents = typeof __propDef.events;
 export type MenuItemGroupSlots = 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/composite/menu.svelte.d.ts

@@ -5,26 +5,17 @@
  * @see https://w3c.github.io/aria/#menu
  * @see https://w3c.github.io/aria-practices/#menu
  */
-export default class Menu extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    element?: HTMLElement;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Menu {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: any);
+    get class(): any;
     /**accessor*/
-    set element(arg: HTMLElement);
-    get element(): HTMLElement;
+    set element(arg: any);
+    get element(): any;
 }
 export type MenuProps = typeof __propDef.props;
 export type MenuEvents = typeof __propDef.events;
 export type MenuSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/composite/radio-button-group.svelte

@@ -25,6 +25,7 @@
 <div
   class="sui radio-button-group {className} {orientation}"
   role="radiogroup"
+  tabindex="0"
   bind:this={element}
   use:activateGroup
 >

package/package/components/composite/radio-button-group.svelte.d.ts

@@ -6,20 +6,11 @@
  * @see https://w3c.github.io/aria/#radiogroup
  * @see https://w3c.github.io/aria-practices/#radiobutton
  */
-export default class RadioButtonGroup extends SvelteComponentTyped<{
-    class?: string;
-    element?: HTMLElement;
-    orientation?: "vertical" | "horizontal";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class RadioButtonGroup {
 }
 export type RadioButtonGroupProps = typeof __propDef.props;
 export type RadioButtonGroupEvents = typeof __propDef.events;
 export type RadioButtonGroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;

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

@@ -34,6 +34,7 @@
 <div
   class="sui select-button-group {className}"
   role="radiogroup"
+  tabindex="0"
   aria-label={ariaLabel || undefined}
   aria-disabled={disabled ? true : undefined}
   bind:this={element}

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

@@ -6,24 +6,11 @@
  * @see https://w3c.github.io/aria/#radiogroup
  * @see https://w3c.github.io/aria-practices/#radiobutton
  */
-export default class SelectButtonGroup extends SvelteComponentTyped<{
-    class?: string;
-    element?: HTMLElement;
-    disabled?: boolean;
-    value?: string;
-    ariaLabel?: string;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class SelectButtonGroup {
 }
 export type SelectButtonGroupProps = typeof __propDef.props;
 export type SelectButtonGroupEvents = typeof __propDef.events;
 export type SelectButtonGroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;

package/package/components/composite/select.svelte.d.ts

@@ -2,32 +2,20 @@
 /** @typedef {typeof __propDef.events}  SelectEvents */
 /** @typedef {typeof __propDef.slots}  SelectSlots */
 /** A read-only variant of `<Combobox>`. */
-export default class Select extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    label?: string;
-    value?: string;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Select {
 }
 export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;
 export type SelectSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         label?: string;
+        class?: string;
         value?: (string | undefined);
     };
     events: {
-        change: CustomEvent<any>;
+        change: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/composite/tab-list.svelte.d.ts

@@ -5,42 +5,29 @@
  * @see https://w3c.github.io/aria/#tablist
  * @see https://w3c.github.io/aria-practices/#tabpanel
  */
-export default class TabList extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    name?: string;
-    element?: HTMLElement;
-    orientation?: "vertical" | "horizontal";
-}, {
-    select: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class TabList {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: any);
+    get class(): any;
     /**accessor*/
-    set element(arg: HTMLElement);
-    get element(): HTMLElement;
+    set element(arg: any);
+    get element(): any;
     /**accessor*/
-    set orientation(arg: "vertical" | "horizontal");
-    get orientation(): "vertical" | "horizontal";
+    set orientation(arg: any);
+    get orientation(): any;
     /**accessor*/
-    set name(arg: string);
-    get name(): string;
+    set name(arg: any);
+    get name(): any;
 }
 export type TabListProps = typeof __propDef.props;
 export type TabListEvents = typeof __propDef.events;
 export type TabListSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        name?: string;
         element?: (HTMLElement | undefined);
+        name?: string;
         orientation?: ('horizontal' | 'vertical');
     };
     events: {

package/package/components/core/button.svelte

@@ -6,12 +6,13 @@
 <svelte:options accessors={true} />
 
 <script>
-  import Icon from './icon.svelte';
+  import Popup from '../util/popup.svelte';
 
   /**
    * CSS class name on the button.
    * @type {String}
    */
+  // eslint-disable-next-line padding-line-between-statements
   let className = '';
 
   export { className as class };
@@ -65,20 +66,13 @@
   export let label = '';
 
   /**
-   * The name of the Material Symbols icon on the button.
+   * Where to show the dropdown menu.
+   * @type {PopupPosition}
    */
-  export let iconName = '';
+  export let popupPosition = 'bottom-left';
 
-  /**
-   * The accessible label on the icon. It can be omitted of a visible `label` is defined.
-   */
-  export let iconLabel = '';
-
-  /**
-   * Where the icon is displayed.
-   * @type {('start'|'end')}
-   */
-  export let iconPosition = 'start';
+  /** @type {?Popup} */
+  let popupComponent;
 </script>
 
 <button
@@ -103,18 +97,20 @@
   on:keypress
   bind:this={element}
 >
-  {#if iconName && iconPosition === 'start'}
-    <Icon name={iconName} label={iconLabel} />
-  {/if}
+  <slot name="start-icon" />
   {#if label}
     <span class="label">{label}</span>
   {/if}
   <slot />
-  {#if iconName && iconPosition === 'end'}
-    <Icon name={iconName} label={iconLabel} />
-  {/if}
+  <slot name="end-icon" />
 </button>
 
+{#if $$slots.popup}
+  <Popup anchor={element} position={popupPosition} bind:this={popupComponent}>
+    <slot name="popup" />
+  </Popup>
+{/if}
+
 <style>button {
   display: inline-flex;
   align-items: center;
@@ -148,7 +144,7 @@ button[disabled] {
 button:global(.primary), button:global(.secondary), button:global(.ternary) {
   justify-content: center;
   border-radius: var(--button--medium--border-radius);
-  padding: 0 8px;
+  padding: var(--button--medium--padding, 0 8px);
   height: var(--button--medium--height);
 }
 button:global(.primary) :global(.label:only-child), button:global(.secondary) :global(.label:only-child), button:global(.ternary) :global(.label:only-child) {
@@ -177,7 +173,7 @@ button:global(.secondary)[aria-pressed=true] {
 }
 button:global(.ternary) {
   color: var(--primary-foreground-color);
-  padding: 0 8px;
+  padding: var(--button--medium--padding, 0 8px);
 }
 button:global(.ternary)[aria-pressed=true] {
   background-color: var(--highlight-background-color);
@@ -189,7 +185,7 @@ button:global(.large) {
   height: var(--button--large--height);
 }
 button:global(.small) {
-  padding: 0 4px;
+  padding: var(--button--small--padding, 0 8px);
   height: var(--button--small--height);
   font-size: 12px;
 }