@sveltia/ui 0.1.0

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;
+    name?: string;
+    element?: HTMLElement;
+    orientation?: "vertical" | "horizontal";
+}, {
+    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: "vertical" | "horizontal");
+    get orientation(): "vertical" | "horizontal";
+    /**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;
+        name?: string;
+        element?: (HTMLElement | undefined);
+        orientation?: ('horizontal' | 'vertical');
+    };
+    events: {
+        select: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/core/button.svelte

@@ -0,0 +1,209 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#button
+  @see https://w3c.github.io/aria-practices/#button
+-->
+<svelte:options accessors={true} />
+
+<script>
+  import Icon from './icon.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  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 = '';
+
+  /**
+   * The name of the Material Symbols icon on the button.
+   */
+  export let iconName = '';
+
+  /**
+   * 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';
+</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}
+>
+  {#if iconName && iconPosition === 'start'}
+    <Icon name={iconName} label={iconLabel} />
+  {/if}
+  {#if label}
+    <span class="label">{label}</span>
+  {/if}
+  <slot />
+  {#if iconName && iconPosition === 'end'}
+    <Icon name={iconName} label={iconLabel} />
+  {/if}
+</button>
+
+<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:global([hidden]) {
+  display: none !important;
+}
+button:global([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: 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):global([aria-pressed="true"]) {
+  background-color: var(--primary-accent-color);
+}
+button:global(.ternary) {
+  color: var(--primary-foreground-color);
+  padding: 0 8px;
+}
+button:global(.ternary):global([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: 0 4px;
+  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

@@ -0,0 +1,113 @@
+/** @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;
+    class?: string;
+    label?: string;
+    element?: HTMLButtonElement;
+    type?: "button" | "submit" | "reset";
+    role?: string;
+    size?: "small" | "medium" | "large";
+    hidden?: boolean;
+    disabled?: boolean;
+    pressed?: string | boolean;
+    iconName?: string;
+    iconLabel?: string;
+    iconPosition?: "start" | "end";
+}, {
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    click: MouseEvent;
+    dragover: DragEvent;
+    dragleave: DragEvent;
+    dragend: DragEvent;
+    drop: DragEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+    /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
+    set element(arg: HTMLButtonElement);
+    get element(): HTMLButtonElement;
+    /**accessor*/
+    set type(arg: "button" | "submit" | "reset");
+    get type(): "button" | "submit" | "reset";
+    /**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 iconName(arg: string);
+    get iconName(): string;
+    /**accessor*/
+    set iconLabel(arg: string);
+    get iconLabel(): string;
+    /**accessor*/
+    set iconPosition(arg: "start" | "end");
+    get iconPosition(): "start" | "end";
+}
+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;
+        class?: string;
+        label?: string;
+        element?: (HTMLButtonElement | undefined);
+        type?: ('button' | 'submit' | 'reset');
+        role?: string;
+        size?: ('small' | 'medium' | 'large');
+        hidden?: boolean;
+        disabled?: boolean;
+        pressed?: (boolean | string | undefined);
+        iconName?: string;
+        iconLabel?: string;
+        iconPosition?: ('start' | 'end');
+    };
+    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: {
+        default: {};
+    };
+};
+export {};

package/package/components/core/checkbox.svelte

@@ -0,0 +1,105 @@
+<!--
+  @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';
+
+  /**
+   * 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;
+
+  $: {
+    dispatch('change', { checked });
+  }
+</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}
+    iconName={indeterminate ? 'remove' : 'check'}
+    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;
+    }}
+  />
+  {#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

@@ -0,0 +1,43 @@
+/** @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;
+    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;
+        name?: string;
+        value?: (string | undefined);
+        checked?: (boolean | string | undefined);
+        indeterminate?: boolean;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};