@sveltia/ui 0.2.0 → 0.2.2

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

@@ -0,0 +1,55 @@
+/** @typedef {typeof __propDef.props}  TabListProps */
+/** @typedef {typeof __propDef.events}  TabListEvents */
+/** @typedef {typeof __propDef.slots}  TabListSlots */
+/**
+ * @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;
+    element?: HTMLElement;
+    name?: string;
+    orientation?: "horizontal" | "vertical";
+}, {
+    select: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+    /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
+    set element(arg: HTMLElement);
+    get element(): HTMLElement;
+    /**accessor*/
+    set orientation(arg: "horizontal" | "vertical");
+    get orientation(): "horizontal" | "vertical";
+    /**accessor*/
+    set name(arg: string);
+    get name(): string;
+}
+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;
+        element?: (HTMLElement | undefined);
+        name?: string;
+        orientation?: ('horizontal' | 'vertical');
+    };
+    events: {
+        select: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/core/button.svelte

@@ -0,0 +1,222 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#button
+  @see https://w3c.github.io/aria-practices/#button
+-->
+<svelte:options accessors={true} />
+
+<script>
+  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 };
+
+  /**
+   * Reference to the button element.
+   * @type {(HTMLButtonElement|undefined)}
+   */
+  export let element = undefined;
+
+  /**
+   * The `type` attribute on the button element.
+   * @type {('button'|'submit'|'reset')}
+   */
+  export let type = 'button';
+
+  /**
+   * The `role` attribute on the button element.
+   * @type {String}
+   */
+  export let role = 'button';
+
+  /**
+   * The height of the button.
+   * @type {('small'|'medium'|'large')}
+   */
+  export let size = 'medium';
+
+  /**
+   * Whether the button is hidden.
+   * @type {Boolean}
+   */
+  export let hidden = false;
+
+  /**
+   * Whether the button is disabled.
+   * @type {Boolean}
+   */
+  export let disabled = false;
+
+  /**
+   * The `aria-pressed` attribute on the button element.
+   * @type {(Boolean|String|undefined)}
+   */
+  export let pressed = undefined;
+
+  /**
+   * Text label displayed on the button.
+   * @type {String}
+   */
+  export let label = '';
+
+  /**
+   * Where to show the dropdown menu.
+   * @type {PopupPosition}
+   */
+  export let popupPosition = 'bottom-left';
+
+  /** @type {?Popup} */
+  let popupComponent;
+</script>
+
+<button
+  {type}
+  {role}
+  hidden={hidden ? 'hidden' : undefined}
+  disabled={disabled ? 'disabled' : undefined}
+  class="sui button {size} {className}"
+  aria-hidden={hidden ? true : undefined}
+  aria-disabled={disabled ? true : undefined}
+  aria-pressed={pressed}
+  {...$$restProps}
+  on:mouseenter
+  on:mouseleave
+  on:click
+  on:dragover
+  on:dragleave
+  on:dragend
+  on:drop
+  on:keydown
+  on:keyup
+  on:keypress
+  bind:this={element}
+>
+  <slot name="start-icon" />
+  {#if label}
+    <span class="label">{label}</span>
+  {/if}
+  <slot />
+  <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;
+  gap: 4px;
+  border-width: 0;
+  border-style: solid;
+  border-color: transparent;
+  padding: 0;
+  color: inherit;
+  background-color: transparent;
+  box-shadow: none;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: all 200ms;
+}
+button > :global(*) {
+  pointer-events: none;
+}
+button:global(:not(:disabled):focus-visible) {
+  z-index: 1;
+}
+button[hidden] {
+  display: none !important;
+}
+button[disabled] {
+  opacity: 0.4;
+  cursor: default;
+  pointer-events: none;
+}
+button:global(.primary), button:global(.secondary), button:global(.tertiary), button:global(.ghost) {
+  justify-content: center;
+  border-width: 1px;
+  border-radius: var(--button--medium--border-radius);
+  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(.tertiary) :global(.label:only-child), button:global(.ghost) :global(.label:only-child) {
+  padding: 0 4px;
+}
+button:global(.primary) {
+  border-color: var(--control-border-color);
+  color: var(--primary-accent-color-foreground);
+  background-color: var(--primary-accent-color);
+}
+button:global(.primary):hover, button:global(.primary):focus-visible {
+  background-color: var(--primary-accent-color-lighter);
+}
+button:global(.primary):active {
+  background-color: var(--primary-accent-color-darker);
+}
+button:global(.secondary) {
+  border-color: var(--primary-accent-color);
+  color: var(--primary-accent-color-lighter);
+  background-color: var(--tertiary-background-color);
+}
+button:global(.secondary):hover, button:global(.secondary):focus-visible {
+  background-color: var(--highlight-background-color);
+}
+button:global(.secondary)[aria-pressed=true] {
+  background-color: var(--primary-accent-color);
+}
+button:global(.tertiary) {
+  border-color: var(--control-border-color);
+  color: var(--highlight-foreground-color);
+  background-color: var(--tertiary-background-color);
+}
+button:global(.tertiary):hover, button:global(.tertiary):focus-visible {
+  background-color: var(--highlight-background-color);
+}
+button:global(.tertiary)[aria-pressed=true] {
+  background-color: var(--highlight-background-color);
+}
+button:global(.ghost):hover, button:global(.ghost):focus-visible {
+  background-color: var(--highlight-background-color);
+}
+button:global(.ghost)[aria-pressed=true] {
+  background-color: var(--highlight-background-color);
+}
+button:global(.danger) {
+  background-color: var(--danger-background-color);
+}
+button:global(.large) {
+  height: var(--button--large--height);
+}
+button:global(.small) {
+  padding: var(--button--small--padding, 0 8px);
+  height: var(--button--small--height);
+  font-size: var(--font-size--small);
+}
+button:global(.small) :global(.icon) {
+  font-size: var(--font-size--large);
+}
+button:global(.pill) {
+  border-radius: var(--button--medium--pill--height, 16px);
+  padding: var(--button--medium--pill--padding, 0 16px);
+}
+button:global(.link) {
+  color: var(--primary-accent-color-lighter);
+}
+button:global(.iconic) {
+  justify-content: center;
+  padding: 0;
+  border-radius: 4px;
+  aspect-ratio: 1/1;
+}
+button :global(.label) {
+  padding: 0 4px;
+}</style>

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

@@ -0,0 +1,109 @@
+/** @typedef {typeof __propDef.props}  ButtonProps */
+/** @typedef {typeof __propDef.events}  ButtonEvents */
+/** @typedef {typeof __propDef.slots}  ButtonSlots */
+/**
+ * @see https://w3c.github.io/aria/#button
+ * @see https://w3c.github.io/aria-practices/#button
+ */
+export default class Button extends SvelteComponentTyped<{
+    [x: string]: any;
+    label?: string;
+    class?: string;
+    element?: HTMLButtonElement;
+    type?: "reset" | "submit" | "button";
+    role?: string;
+    size?: "small" | "medium" | "large";
+    hidden?: boolean;
+    disabled?: boolean;
+    pressed?: string | boolean;
+    popupPosition?: any;
+}, {
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    click: MouseEvent;
+    dragover: DragEvent;
+    dragleave: DragEvent;
+    dragend: DragEvent;
+    drop: DragEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'start-icon': {};
+    default: {};
+    'end-icon': {};
+    popup: {};
+}> {
+    /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
+    set element(arg: HTMLButtonElement);
+    get element(): HTMLButtonElement;
+    /**accessor*/
+    set type(arg: "reset" | "submit" | "button");
+    get type(): "reset" | "submit" | "button";
+    /**accessor*/
+    set role(arg: string);
+    get role(): string;
+    /**accessor*/
+    set size(arg: "small" | "medium" | "large");
+    get size(): "small" | "medium" | "large";
+    /**accessor*/
+    set hidden(arg: boolean);
+    get hidden(): boolean;
+    /**accessor*/
+    set disabled(arg: boolean);
+    get disabled(): boolean;
+    /**accessor*/
+    set pressed(arg: string | boolean);
+    get pressed(): string | boolean;
+    /**accessor*/
+    set label(arg: string);
+    get label(): string;
+    /**accessor*/
+    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;
+        label?: string;
+        class?: string;
+        element?: (HTMLButtonElement | undefined);
+        type?: ('button' | 'submit' | 'reset');
+        role?: string;
+        size?: ('small' | 'medium' | 'large');
+        hidden?: boolean;
+        disabled?: boolean;
+        pressed?: (boolean | string | undefined);
+        popupPosition?: any;
+    };
+    events: {
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        click: MouseEvent;
+        dragover: DragEvent;
+        dragleave: DragEvent;
+        dragend: DragEvent;
+        drop: DragEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'start-icon': {};
+        default: {};
+        'end-icon': {};
+        popup: {};
+    };
+};
+export {};

package/package/components/core/checkbox.svelte

@@ -0,0 +1,114 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#checkbox
+  @see https://w3c.github.io/aria-practices/#checkbox
+-->
+<script>
+  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.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {String} */
+  export let name = '';
+
+  /** @type {(String|undefined)} */
+  export let value = undefined;
+
+  /** @type {(Boolean|String|undefined)} */
+  export let checked = false;
+
+  /** @type {Boolean} */
+  export let indeterminate = false;
+
+  /** @type {Boolean} */
+  export let disabled = false;
+
+  const dispatch = createEventDispatcher();
+  const id = getRandomId('checkbox');
+  /** @type {Button} */
+  let button;
+</script>
+
+{#if name && value && checked && !indeterminate}
+  <input type="hidden" {name} {value} />
+{/if}
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<label
+  class="sui checkbox {className}"
+  class:checked
+  class:indeterminate
+  class:disabled
+  on:click|preventDefault|stopPropagation={(event) => {
+    if (!event.target.matches('button')) {
+      button.element.click();
+    }
+  }}
+>
+  <Button
+    {id}
+    {disabled}
+    role="checkbox"
+    aria-checked={indeterminate ? 'mixed' : checked}
+    aria-labelledby="{id}-label"
+    bind:this={button}
+    on:click={(event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      checked = indeterminate ? true : !checked;
+      indeterminate = false;
+      dispatch('change', { checked });
+    }}
+  >
+    <Icon slot="start-icon" name={indeterminate ? 'remove' : 'check'} />
+  </Button>
+  {#if $$slots.default}
+    <label id="{id}-label">
+      <slot />
+    </label>
+  {/if}
+</label>
+
+<style>.checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: inherit;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.checkbox.disabled {
+  cursor: default;
+}
+.checkbox :global(button) {
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-width: 2px;
+  border-color: var(--control-border-color);
+  border-radius: 4px;
+  width: 24px;
+  height: 24px;
+  color: var(--primary-accent-color-lighter);
+  transition: all 200ms;
+}
+.checkbox :global(button) :global(.icon) {
+  font-size: var(--font-size--xx-large);
+}
+.checkbox :global(button[aria-checked="true"]),
+.checkbox :global(button[aria-checked="mixed"]) {
+  color: var(--primary-accent-color-lighter);
+}
+.checkbox :global(button[aria-checked="false"]) {
+  color: transparent;
+}</style>

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

@@ -0,0 +1,45 @@
+/** @typedef {typeof __propDef.props}  CheckboxProps */
+/** @typedef {typeof __propDef.events}  CheckboxEvents */
+/** @typedef {typeof __propDef.slots}  CheckboxSlots */
+/**
+ * @see https://w3c.github.io/aria/#checkbox
+ * @see https://w3c.github.io/aria-practices/#checkbox
+ */
+export default class Checkbox extends SvelteComponentTyped<{
+    class?: string;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    checked?: string | boolean;
+    indeterminate?: boolean;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+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;
+        disabled?: boolean;
+        name?: string;
+        value?: (string | undefined);
+        checked?: (boolean | string | undefined);
+        indeterminate?: boolean;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};