@sveltia/ui 0.2.4 → 0.3.0

package/package/components/composite/grid.svelte

@@ -1,24 +0,0 @@
-<script>
-  import { activateGroup } from '../helpers/group';
-
-  /**
-   * CSS class name on the button.
-   * @type {string}
-   */
-  let className = '';
-
-  export { className as class };
-
-  /** @type {HTMLElement?} */
-  export let element = undefined;
-</script>
-
-<div
-  role="grid"
-  class="sui grid {className}"
-  {...$$restProps}
-  bind:this={element}
-  use:activateGroup
->
-  <slot />
-</div>

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

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

package/package/components/composite/listbox.svelte

@@ -1,63 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#listbox
-  @see https://w3c.github.io/aria-practices/#Listbox
--->
-<svelte:options accessors={true} />
-
-<script>
-  import { activateGroup } from '../helpers/group';
-
-  /**
-   * CSS class name on the button.
-   * @type {string}
-   */
-  let className = '';
-
-  export { className as class };
-
-  /** @type {HTMLElement?} */
-  export let element = undefined;
-
-  export let multiple = false;
-</script>
-
-<div
-  class="sui listbox {className}"
-  role="listbox"
-  tabindex="0"
-  aria-multiselectable={multiple}
-  {...$$restProps}
-  bind:this={element}
-  on:click
-  on:select
-  use:activateGroup
->
-  <slot />
-</div>
-
-<style>[role=listbox] {
-  display: flex;
-  flex-direction: column;
-  color: inherit;
-  margin: 0;
-  border-width: 1px;
-  border-color: var(--control-border-color);
-  border-radius: 4px;
-  padding: 4px;
-}
-[role=listbox] :global([role="separator"]) {
-  margin: 4px;
-}
-[role=listbox] :global([role="group"]):not(:first-child) {
-  margin-top: 16px;
-}
-[role=listbox] :global([role="group"]):not(:last-child) {
-  margin-bottom: 16px;
-}
-[role=listbox] :global([role="group"]) :global(.title) {
-  margin: 0 8px 8px;
-  color: var(--secondary-foreground-color);
-  font-size: var(--font-size--x-small);
-  text-transform: uppercase;
-}</style>

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

@@ -1,36 +0,0 @@
-/** @typedef {typeof __propDef.props}  RadioButtonGroupProps */
-/** @typedef {typeof __propDef.events}  RadioButtonGroupEvents */
-/** @typedef {typeof __propDef.slots}  RadioButtonGroupSlots */
-/**
- * The container of `<RadioButton>`s.
- * @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?: "horizontal" | "vertical";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-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;
-        element?: HTMLElement | null;
-        orientation?: ('horizontal' | 'vertical');
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

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

@@ -1,13 +0,0 @@
-<script>
-  /**
-   * CSS class name on the button.
-   * @type {string}
-   */
-  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

@@ -1,29 +0,0 @@
-/** @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/radio-button.svelte.d.ts

@@ -1,37 +0,0 @@
-/** @typedef {typeof __propDef.props}  RadioButtonProps */
-/** @typedef {typeof __propDef.events}  RadioButtonEvents */
-/** @typedef {typeof __propDef.slots}  RadioButtonSlots */
-/**
- * @see https://w3c.github.io/aria/#radio
- * @see https://w3c.github.io/aria-practices/#radiobutton
- */
-export default class RadioButton extends SvelteComponentTyped<{
-    class?: string;
-    name?: string;
-    value?: string;
-    selected?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type RadioButtonProps = typeof __propDef.props;
-export type RadioButtonEvents = typeof __propDef.events;
-export type RadioButtonSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string;
-        name?: string;
-        value?: string | null;
-        selected?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/package/components/core/row-group.svelte

@@ -1,13 +0,0 @@
-<script>
-  /**
-   * CSS class name on the button.
-   * @type {string}
-   */
-  let className = 'tbody';
-
-  export { className as class };
-</script>
-
-<div role="rowgroup" class="sui row-group {className}" {...$$restProps}>
-  <slot />
-</div>

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

@@ -1,29 +0,0 @@
-/** @typedef {typeof __propDef.props}  RowGroupProps */
-/** @typedef {typeof __propDef.events}  RowGroupEvents */
-/** @typedef {typeof __propDef.slots}  RowGroupSlots */
-export default class RowGroup extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type RowGroupProps = typeof __propDef.props;
-export type RowGroupEvents = typeof __propDef.events;
-export type RowGroupSlots = 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/row.svelte

@@ -1,13 +0,0 @@
-<script>
-  /**
-   * CSS class name on the button.
-   * @type {string}
-   */
-  let className = '';
-
-  export { className as class };
-</script>
-
-<div role="row" tabindex="0" class="sui row {className}" {...$$restProps} on:click>
-  <slot />
-</div>

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

@@ -1,33 +0,0 @@
-/** @typedef {typeof __propDef.props}  RowProps */
-/** @typedef {typeof __propDef.events}  RowEvents */
-/** @typedef {typeof __propDef.slots}  RowSlots */
-export default class Row extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type RowProps = typeof __propDef.props;
-export type RowEvents = typeof __propDef.events;
-export type RowSlots = 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/separator.svelte.d.ts

@@ -1,26 +0,0 @@
-/** @typedef {typeof __propDef.props}  SeparatorProps */
-/** @typedef {typeof __propDef.events}  SeparatorEvents */
-/** @typedef {typeof __propDef.slots}  SeparatorSlots */
-/** @see https://w3c.github.io/aria/#separator */
-export default class Separator extends SvelteComponentTyped<{
-    class?: string;
-    orientation?: "horizontal" | "vertical";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SeparatorProps = typeof __propDef.props;
-export type SeparatorEvents = typeof __propDef.events;
-export type SeparatorSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string;
-        orientation?: ('horizontal' | 'vertical');
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/package/components/editor/markdown.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  MarkdownProps */
-/** @typedef {typeof __propDef.events}  MarkdownEvents */
-/** @typedef {typeof __propDef.slots}  MarkdownSlots */
-export default class Markdown extends SvelteComponentTyped<{
-    disabled?: boolean;
-    value?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type MarkdownProps = typeof __propDef.props;
-export type MarkdownEvents = typeof __propDef.events;
-export type MarkdownSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        disabled?: boolean;
-        value?: string | null;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/package/components/helpers/group.js

@@ -1,251 +0,0 @@
-import { sleep } from '../util/misc';
-import { getRandomId } from './util';
-
-const config = {
-  grid: {
-    orientation: 'vertical',
-    childRoles: ['row'],
-    childSelectedAttr: 'aria-selected',
-  },
-  listbox: {
-    orientation: 'vertical',
-    childRoles: ['option'],
-    childSelectedAttr: 'aria-selected',
-  },
-  menu: {
-    orientation: 'vertical',
-    childRoles: ['menuitem', 'menuitemcheckbox', 'menuitemradio'],
-    childSelectedAttr: 'aria-checked',
-  },
-  menubar: {
-    orientation: 'horizontal',
-    childRoles: ['menuitem', 'menuitemcheckbox', 'menuitemradio'],
-    childSelectedAttr: 'aria-checked',
-  },
-  radiogroup: {
-    orientation: 'horizontal',
-    childRoles: ['radio'],
-    childSelectedAttr: 'aria-checked',
-  },
-  tablist: {
-    orientation: 'horizontal',
-    childRoles: ['tab'],
-    childSelectedAttr: 'aria-selected',
-  },
-};
-
-/**
- * Implement keyboard and mouse interactions for a grouping composite widget.
- */
-class Group {
-  /**
-   *
-   * @param {HTMLElement} parent Parent element.
-   * @todo Check for added elements probably with `MutationObserver`.
-   */
-  constructor(parent) {
-    this.parent = parent;
-    this.role = parent.getAttribute('role');
-    this.grid = this.role === 'listbox' && parent.matches('.grid');
-    this.multi = this.parent.getAttribute('aria-multiselectable') === 'true';
-    this.id = getRandomId(this.role);
-    this.parentGroupSelector = `[role="group"], [role="${this.role}"]`;
-
-    const { orientation, childSelectedAttr } = config[this.role];
-
-    this.orientation = this.grid
-      ? 'horizontal'
-      : this.parent.getAttribute('aria-orientation') || orientation;
-    this.childSelectedAttr = childSelectedAttr;
-
-    const { allMembers } = this;
-
-    const hasSelected = allMembers.some((element) =>
-      element.matches(`[${childSelectedAttr}="true"]`),
-    );
-
-    allMembers.forEach((element, index) => {
-      const isSelected = element.matches(`[${childSelectedAttr}="true"]`);
-      const controls = document.querySelector(`#${element.getAttribute('aria-controls')}`);
-
-      element.id ||= `${this.id}-item-${index}`;
-      element.tabIndex ||= isSelected || (!hasSelected && index === 0) ? 0 : -1;
-      element.setAttribute(this.childSelectedAttr, String(isSelected));
-      controls?.setAttribute('aria-labelledby', element.id);
-      controls?.setAttribute('aria-hidden', String(!isSelected));
-    });
-
-    parent.addEventListener('click', (event) => {
-      this.onClick(event);
-    });
-
-    parent.addEventListener('keydown', (event) => {
-      this.onKeyDown(event);
-    });
-  }
-
-  /** @type {string} */
-  get selector() {
-    const roles = config[this.role].childRoles;
-
-    return roles ? roles.map((role) => `[role="${role}"]`).join(',') : '';
-  }
-
-  /** @type {HTMLElement[]} */
-  get allMembers() {
-    // @ts-ignore
-    return [...this.parent.querySelectorAll(this.selector)];
-  }
-
-  /** @type {HTMLElement[]} */
-  get activeMembers() {
-    return this.allMembers.filter((element) => !element.matches('[aria-disabled="true"]'));
-  }
-
-  /**
-   *
-   * @param {MouseEvent} event `click` event.
-   */
-  onClick(event) {
-    // eslint-disable-next-line prefer-destructuring
-    const target = /** @type {HTMLButtonElement} */ (event.target);
-
-    if (!target.matches(this.selector)) {
-      return;
-    }
-
-    const targetParentGroup = target.closest(this.parentGroupSelector);
-
-    this.allMembers.forEach((element) => {
-      const isTarget = element === target;
-
-      element.tabIndex = element === target ? 0 : -1;
-
-      // Groups can be nested, e.g. `menu` > `group` > `menuitem`, so check if the parent is the
-      // same as the target’s parent
-      if (
-        (element.matches('[role="radio"], [role="menuitemradio"]') ||
-          (element.matches('[role="row"], [role="option"], [role="tab"]') && !this.multi)) &&
-        element.closest(this.parentGroupSelector) === targetParentGroup
-      ) {
-        element.setAttribute(this.childSelectedAttr, String(isTarget));
-      }
-
-      const controls = element.getAttribute('aria-controls');
-
-      if (controls) {
-        document.getElementById(controls)?.setAttribute('aria-hidden', String(!isTarget));
-      }
-    });
-
-    this.parent.dispatchEvent(
-      new CustomEvent('select', {
-        detail: {
-          value: target.value,
-          name: target.name,
-        },
-      }),
-    );
-  }
-
-  /**
-   *
-   * @param {KeyboardEvent} event `keydown` event.
-   */
-  onKeyDown(event) {
-    // eslint-disable-next-line prefer-destructuring
-    const target = /** @type {HTMLElement} */ (event.target);
-    const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
-
-    if (target.matches(this.selector) && !ctrlKey && !metaKey && !shiftKey && !altKey) {
-      if ([' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
-        event.preventDefault();
-      }
-
-      if (key === ' ' || (key === 'Enter' && !target.matches('button'))) {
-        event.preventDefault();
-        target.click();
-
-        return;
-      }
-
-      const { allMembers, activeMembers } = this;
-      let index;
-      let newTarget;
-
-      if (this.grid) {
-        const colCount = Math.floor(this.parent.clientWidth / target.clientWidth);
-
-        index = allMembers.indexOf(target);
-
-        if (key === 'ArrowUp' && index > 0) {
-          newTarget = allMembers[index - colCount];
-        }
-
-        if (key === 'ArrowDown' && index < allMembers.length - 1) {
-          newTarget = allMembers[index + colCount];
-        }
-
-        if (key === 'ArrowLeft' && index > 0) {
-          newTarget = allMembers[index - 1];
-        }
-
-        if (key === 'ArrowRight' && index < allMembers.length - 1) {
-          newTarget = allMembers[index + 1];
-        }
-
-        if (newTarget?.getAttribute('aria-disabled') === 'true') {
-          newTarget = undefined;
-        }
-      } else {
-        index = activeMembers.indexOf(target);
-
-        if (key === (this.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp')) {
-          if (index > 0) {
-            // Previous member
-            newTarget = activeMembers[index - 1];
-          }
-
-          if (index === 0) {
-            // Last member
-            newTarget = activeMembers[activeMembers.length - 1];
-          }
-        }
-
-        if (key === (this.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown')) {
-          if (index < activeMembers.length - 1) {
-            // Next member
-            newTarget = activeMembers[index + 1];
-          }
-
-          if (index === activeMembers.length - 1) {
-            // First member
-            [newTarget] = activeMembers;
-          }
-        }
-      }
-
-      if (newTarget && newTarget !== target) {
-        activeMembers.forEach((element) => {
-          element.tabIndex = element === newTarget ? 0 : -1;
-        });
-
-        newTarget.focus();
-      }
-    }
-  }
-}
-
-/**
- * Activate a new group.
- * @param {...any} args Arguments.
- */
-export const activateGroup = (...args) => {
-  (async () => {
-    // Wait a bit before the relevant components, including the `aria-controls` target are mounted
-    await sleep(100);
-
-    // @ts-ignore
-    return new Group(...args);
-  })();
-};

package/package/components/helpers/popup.d.ts

@@ -1,30 +0,0 @@
-export function activatePopup(...args: any[]): Popup;
-/**
- *
- */
-declare class Popup {
-    /**
-     *
-     * @param {HTMLElement} anchorElement
-     * @param {HTMLElement} popupElement
-     * @param {PopupPosition} position
-     */
-    constructor(anchorElement: HTMLElement, popupElement: HTMLElement, position: PopupPosition);
-    open: import("svelte/store").Writable<boolean>;
-    style: import("svelte/store").Writable<{
-        inset: any;
-        zIndex: any;
-        width: any;
-        height: any;
-    }>;
-    observer: IntersectionObserver;
-    anchorElement: HTMLElement;
-    popupElement: HTMLElement;
-    position: PopupPosition;
-    id: string;
-    /**
-     * Continue checking the position in case the window or parent element resizes.
-     */
-    checkPosition(): void;
-}
-export {};

package/package/components/helpers/util.d.ts

@@ -1 +0,0 @@
-export function getRandomId(prefix?: string, length?: number): string;

package/package/components/helpers/util.js

@@ -1,14 +0,0 @@
-/**
- * Get a random ID that can be used for elements.
- * @param {string} [prefix] Prefix to be added to the ID, e.g. `popup`.
- * @param {number} [length] Number of characters to be used in the ID.
- * @returns {string} Generated ID.
- */
-export const getRandomId = (prefix = '', length = 7) =>
-  [
-    prefix,
-    new Array(length)
-      .fill()
-      .map(() => '0123456789abcdef'[Math.floor(Math.random() * 12)])
-      .join(''),
-  ].join('-');