@sveltia/ui 0.2.0 → 0.2.1

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

@@ -0,0 +1,59 @@
+/** @typedef {typeof __propDef.props}  DrawerProps */
+/** @typedef {typeof __propDef.events}  DrawerEvents */
+/** @typedef {typeof __propDef.slots}  DrawerSlots */
+/**
+ * @see https://w3c.github.io/aria/#dialog
+ * @see https://w3c.github.io/aria-practices/#dialog_modal
+ */
+export default class Drawer extends SvelteComponentTyped<{
+    title?: string;
+    position?: "top" | "right" | "bottom" | "left";
+    open?: boolean;
+    class?: string;
+    size?: "small" | "medium" | "large" | "x-large";
+    showClose?: false | "inside" | "outside";
+    closeOnBackdropClick?: boolean;
+}, {
+    submit: SubmitEvent;
+    ok: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    'header-extra': {};
+    default: {};
+    footer: {};
+}> {
+}
+export type DrawerProps = typeof __propDef.props;
+export type DrawerEvents = typeof __propDef.events;
+export type DrawerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string;
+        position?: ('top' | 'right' | 'bottom' | 'left');
+        open?: boolean;
+        class?: string;
+        size?: ('small' | 'medium' | 'large' | 'x-large');
+        showClose?: ('inside' | 'outside' | false);
+        closeOnBackdropClick?: boolean;
+    };
+    events: {
+        submit: SubmitEvent;
+        ok: CustomEvent<any>;
+        cancel: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        'header-extra': {};
+        default: {};
+        footer: {};
+    };
+};
+export {};

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

@@ -0,0 +1,14 @@
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  // eslint-disable-next-line padding-line-between-statements
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="gridcell" class="sui grid-cell {className}" {...$$restProps}>
+  <slot />
+</div>

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

@@ -0,0 +1,29 @@
+/** @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 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;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/core/group.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { getRandomId } from '../helpers/util';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  export let title = '';
+
+  export let ariaLabel = '';
+
+  const id = getRandomId('group');
+</script>
+
+<div
+  class="sui group {className}"
+  role="group"
+  {id}
+  aria-label={ariaLabel || undefined}
+  aria-labelledby={title ? '{id}-title' : undefined}
+  {...$$restProps}
+>
+  {#if title}
+    <div class="title" id="{id}-title">{title}</div>
+  {/if}
+  <slot />
+</div>

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

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  GroupProps */
+/** @typedef {typeof __propDef.events}  GroupEvents */
+/** @typedef {typeof __propDef.slots}  GroupSlots */
+export default class Group extends SvelteComponentTyped<{
+    [x: string]: any;
+    title?: string;
+    class?: string;
+    ariaLabel?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+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;
+        title?: string;
+        class?: string;
+        ariaLabel?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/core/icon.svelte

@@ -0,0 +1,21 @@
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  export let name = '';
+
+  export let label = '';
+</script>
+
+<span
+  class="sui icon material-symbols-outlined {className}"
+  aria-label={label || undefined}
+  aria-hidden={label ? undefined : true}
+>
+  {name}
+</span>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  IconProps */
+/** @typedef {typeof __propDef.events}  IconEvents */
+/** @typedef {typeof __propDef.slots}  IconSlots */
+export default class Icon extends SvelteComponentTyped<{
+    label?: string;
+    class?: string;
+    name?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,57 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria-practices/#menubutton
+-->
+<script>
+  import Popup from '../util/popup.svelte';
+  import Button from './button.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /**
+   * Where to show the dropdown menu.
+   * @type {PopupPosition}
+   */
+  export let popupPosition = 'bottom-left';
+
+  /** @type {?Button} */
+  let buttonComponent;
+  /** @type {?Popup} */
+  let popupComponent;
+</script>
+
+<Button
+  class="sui menu-button {className}"
+  aria-haspopup="menu"
+  {...$$restProps}
+  bind:this={buttonComponent}
+  on:keydown={(event) => {
+    const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+
+    if (['ArrowUp', 'ArrowDown'].includes(key) && !ctrlKey && !metaKey && !shiftKey && !altKey) {
+      event.preventDefault();
+
+      const members = [
+        ...popupComponent.dialog.querySelectorAll('[role^="menuitem"]:not([aria-disabled="true"])'),
+      ];
+
+      if (members.length) {
+        (key === 'ArrowUp' ? members.pop() : members.shift()).focus();
+      }
+    }
+  }}
+>
+  <slot name="start-icon" slot="start-icon" />
+  <slot />
+  <slot name="end-icon" slot="end-icon" />
+</Button>
+
+<Popup anchor={buttonComponent?.element} position={popupPosition} bind:this={popupComponent}>
+  <slot name="popup" />
+</Popup>

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

@@ -0,0 +1,46 @@
+/** @typedef {typeof __propDef.props}  MenuButtonProps */
+/** @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;
+    popupPosition?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'start-icon': {
+        slot: string;
+    };
+    default: {};
+    'end-icon': {
+        slot: string;
+    };
+    popup: {};
+}> {
+}
+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;
+        popupPosition?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'start-icon': {
+            slot: string;
+        };
+        default: {};
+        'end-icon': {
+            slot: string;
+        };
+        popup: {};
+    };
+};
+export {};

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

@@ -0,0 +1,24 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#menuitemcheckbox
+-->
+<script>
+  import MenuItem from './menu-item.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<MenuItem
+  class="sui menu-item-checkbox {className}"
+  role="menuitemcheckbox"
+  {...$$restProps}
+  on:click
+>
+  <slot />
+</MenuItem>

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  MenuItemCheckboxProps */
+/** @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 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;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,19 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#menuitemradio
+-->
+<script>
+  import MenuItem from './menu-item.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<MenuItem class="sui menu-item-radio {className}" role="menuitemradio" {...$$restProps} on:click>
+  <slot />
+</MenuItem>

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  MenuItemRadioProps */
+/** @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 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;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,113 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#menuitem
+-->
+<script>
+  import { writable } from 'svelte/store';
+  import Menu from '../composite/menu.svelte';
+  import Popup from '../util/popup.svelte';
+  import Button from './button.svelte';
+  import Icon from './icon.svelte';
+
+  let className = '';
+
+  export { className as class };
+
+  /** @type {('menuitem'|'menuitemcheckbox'|'menuitemradio')} */
+  export let role = 'menuitem';
+
+  export let label = '';
+
+  export let iconName = '';
+
+  export let iconLabel = '';
+
+  export let checked = false;
+
+  /** @type {Button} */
+  let buttonComponent;
+  let isPopupOpen = writable(false);
+
+  $: hasChildren = role === 'menuitem' && $$slots.default;
+</script>
+
+<div class="sui menuitem {className}">
+  <Button
+    {role}
+    aria-checked={checked}
+    aria-haspopup={hasChildren ? 'menu' : undefined}
+    aria-expanded={$isPopupOpen ? true : undefined}
+    {...$$restProps}
+    bind:this={buttonComponent}
+    on:click
+    on:mouseenter={() => {
+      $isPopupOpen = true;
+    }}
+    on:mouseleave={() => {
+      $isPopupOpen = false;
+    }}
+  >
+    {#if iconName}
+      <Icon slot="start-icon" name={iconName} label={iconLabel} />
+    {/if}
+    {#if label}
+      <span class="label">{label}</span>
+    {/if}
+    {#if role === 'menuitemradio' || role === 'menuitemcheckbox'}
+      <span class="icon-outer">
+        {#if checked}
+          <Icon name="check" />
+        {/if}
+      </span>
+    {/if}
+    {#if hasChildren}
+      <span class="icon-outer">
+        <Icon name="chevron_right" />
+      </span>
+    {/if}
+  </Button>
+  {#if hasChildren}
+    <Popup anchor={buttonComponent?.element} position="right-top" bind:open={isPopupOpen}>
+      <Menu>
+        <slot />
+      </Menu>
+    </Popup>
+  {/if}
+</div>
+
+<style>.menuitem {
+  position: relative;
+}
+.menuitem :global(button) {
+  display: flex;
+  justify-content: space-between !important;
+  border-radius: 4px;
+  padding: 0 16px;
+  width: 100%;
+  min-width: 160px;
+  height: var(--option--medium--height);
+}
+.menuitem :global(button[aria-checked="true"]) :global(.icon) {
+  color: var(--primary-accent-color-lighter);
+}
+.menuitem :global(button:hover),
+.menuitem :global(button:focus) {
+  color: var(--highlight-foreground-color);
+  background-color: var(--highlight-background-color);
+}
+.menuitem:hover > :global([role="menu"]) {
+  opacity: 1;
+}
+.menuitem > :global([role="menu"]) {
+  position: absolute;
+  inset: 2px auto auto calc(100% + 4px);
+}
+.menuitem > :global([role="menu"]):hover {
+  opacity: 1;
+}
+
+.icon-outer {
+  flex: none;
+  width: 24px;
+  height: 24px;
+}</style>

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

@@ -0,0 +1,44 @@
+/** @typedef {typeof __propDef.props}  MenuItemProps */
+/** @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;
+    label?: string;
+    class?: string;
+    role?: "menuitem" | "menuitemcheckbox" | "menuitemradio";
+    checked?: boolean;
+    iconName?: string;
+    iconLabel?: string;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+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;
+        label?: string;
+        class?: string;
+        role?: ('menuitem' | 'menuitemcheckbox' | 'menuitemradio');
+        checked?: boolean;
+        iconName?: string;
+        iconLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};