@sveltia/ui 0.1.5 → 0.2.0

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

@@ -1,42 +0,0 @@
-/** @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 {
-    /**accessor*/
-    set class(arg: any);
-    get class(): any;
-    /**accessor*/
-    set element(arg: any);
-    get element(): any;
-    /**accessor*/
-    set orientation(arg: any);
-    get orientation(): any;
-    /**accessor*/
-    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;
-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

@@ -1,205 +0,0 @@
-<!--
-  @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(.ternary) {
-  justify-content: center;
-  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(.ternary) :global(.label:only-child) {
-  padding: 0 4px;
-}
-button:global(.primary) {
-  border-width: 1px;
-  border-color: var(--control-border-color);
-  color: var(--primary-accent-color-foreground);
-  background-color: var(--primary-accent-color);
-}
-button:global(.primary):hover {
-  background-color: var(--primary-accent-color-lighter);
-}
-button:global(.primary):active {
-  background-color: var(--primary-accent-color-darker);
-}
-button:global(.secondary) {
-  border-width: 1px;
-  border-color: var(--control-border-color);
-  color: var(--highlight-foreground-color);
-  background-color: var(--ternary-background-color);
-}
-button:global(.secondary)[aria-pressed=true] {
-  background-color: var(--primary-accent-color);
-}
-button:global(.ternary) {
-  color: var(--primary-foreground-color);
-  padding: var(--button--medium--padding, 0 8px);
-}
-button:global(.ternary)[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: 12px;
-}
-button:global(.small) :global(.icon) {
-  font-size: 16px;
-}
-button:global(.link) {
-  color: var(--primary-accent-color-lighter);
-}
-button:global(.iconic) {
-  justify-content: center;
-  border-radius: 4px;
-  aspect-ratio: 1/1;
-}
-button :global(.label) {
-  padding: 0 4px;
-}</style>

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

@@ -1,78 +0,0 @@
-/** @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 {
-    /**accessor*/
-    set class(arg: any);
-    get class(): any;
-    /**accessor*/
-    set element(arg: any);
-    get element(): any;
-    /**accessor*/
-    set type(arg: any);
-    get type(): any;
-    /**accessor*/
-    set role(arg: any);
-    get role(): any;
-    /**accessor*/
-    set size(arg: any);
-    get size(): any;
-    /**accessor*/
-    set hidden(arg: any);
-    get hidden(): any;
-    /**accessor*/
-    set disabled(arg: any);
-    get disabled(): any;
-    /**accessor*/
-    set pressed(arg: any);
-    get pressed(): any;
-    /**accessor*/
-    set label(arg: any);
-    get label(): any;
-    /**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;
-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

@@ -1,104 +0,0 @@
-<!--
-  @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;
-
-  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}"
-  on:click|preventDefault|stopPropagation={(event) => {
-    if (!event.target.matches('button')) {
-      button.element.click();
-    }
-  }}
->
-  <Button
-    {id}
-    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 :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: 20px;
-}
-.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

@@ -1,30 +0,0 @@
-/** @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 {
-}
-export type CheckboxProps = typeof __propDef.props;
-export type CheckboxEvents = typeof __propDef.events;
-export type CheckboxSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        class?: string;
-        name?: string;
-        value?: (string | undefined);
-        checked?: (boolean | string | undefined);
-        indeterminate?: boolean;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};