@sveltia/ui 0.2.0 → 0.2.2

package/package/components/core/switch.svelte

@@ -0,0 +1,86 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#switch
+  @see https://w3c.github.io/aria-practices/#switch
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  export let label = '';
+
+  export let checked = false;
+
+  export let disabled = false;
+</script>
+
+<label class="sui switch {className}" class:disabled>
+  <input type="checkbox" role="switch" bind:checked {disabled} />
+  <span />
+  {#if label}
+    {label}
+  {:else}
+    <slot />
+  {/if}
+</label>
+
+<style>label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+label.disabled {
+  cursor: default;
+}
+
+input {
+  position: absolute;
+  left: -99999px;
+}
+input:focus + span {
+  background-color: var(--highlight-background-color);
+}
+
+input:checked + span {
+  background-color: var(--primary-accent-color);
+  border-color: transparent;
+}
+input:checked + span::before {
+  transform: translateX(22px);
+  background-color: var(--primary-accent-color-foreground);
+}
+
+input:disabled + span {
+  opacity: 0.4;
+}
+
+span {
+  position: relative;
+  width: 42px;
+  height: 20px;
+  padding: 2px;
+  display: inline-block;
+  border-radius: 16px;
+  background-color: var(--control-border-color);
+  transition: all 200ms;
+}
+span:hover {
+  background-color: var(--highlight-background-color);
+}
+span::before {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 16px;
+  background-color: var(--primary-accent-color-foreground);
+  transition: all 200ms;
+  content: "";
+}</style>

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

@@ -0,0 +1,37 @@
+/** @typedef {typeof __propDef.props}  SwitchProps */
+/** @typedef {typeof __propDef.events}  SwitchEvents */
+/** @typedef {typeof __propDef.slots}  SwitchSlots */
+/**
+ * @see https://w3c.github.io/aria/#switch
+ * @see https://w3c.github.io/aria-practices/#switch
+ */
+export default class Switch extends SvelteComponentTyped<{
+    label?: string;
+    class?: string;
+    disabled?: boolean;
+    checked?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type SwitchProps = typeof __propDef.props;
+export type SwitchEvents = typeof __propDef.events;
+export type SwitchSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string;
+        class?: string;
+        disabled?: boolean;
+        checked?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/core/tab-panel.svelte

@@ -0,0 +1,23 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#tabpanel
+  @see https://w3c.github.io/aria-practices/#tabpanel
+-->
+<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 class="sui tabpanel {className}" role="tabpanel" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.tabpanel[aria-hidden=true], .tabpanel:not([aria-hidden]) {
+  display: none;
+}</style>

package/package/components/core/tab-panel.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  TabPanelProps */
+/** @typedef {typeof __propDef.events}  TabPanelEvents */
+/** @typedef {typeof __propDef.slots}  TabPanelSlots */
+/**
+ * @see https://w3c.github.io/aria/#tabpanel
+ * @see https://w3c.github.io/aria-practices/#tabpanel
+ */
+export default class TabPanel extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TabPanelProps = typeof __propDef.props;
+export type TabPanelEvents = typeof __propDef.events;
+export type TabPanelSlots = 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/tab.svelte

@@ -0,0 +1,22 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#tab
+  @see https://w3c.github.io/aria-practices/#tabpanel
+-->
+<script>
+  import Button from './button.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<Button role="tab" class="sui tab {className}" {...$$restProps}>
+  <slot name="start-icon" slot="start-icon" />
+  <slot />
+  <slot name="end-icon" slot="end-icon" />
+</Button>

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

@@ -0,0 +1,45 @@
+/** @typedef {typeof __propDef.props}  TabProps */
+/** @typedef {typeof __propDef.events}  TabEvents */
+/** @typedef {typeof __propDef.slots}  TabSlots */
+/**
+ * @see https://w3c.github.io/aria/#tab
+ * @see https://w3c.github.io/aria-practices/#tabpanel
+ */
+export default class Tab extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'start-icon': {
+        slot: string;
+    };
+    default: {};
+    'end-icon': {
+        slot: string;
+    };
+}> {
+}
+export type TabProps = typeof __propDef.props;
+export type TabEvents = typeof __propDef.events;
+export type TabSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'start-icon': {
+            slot: string;
+        };
+        default: {};
+        'end-icon': {
+            slot: string;
+        };
+    };
+};
+export {};

package/package/components/core/text-area.svelte

@@ -0,0 +1,90 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#textbox
+-->
+<svelte:options accessors={true} />
+
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  // eslint-disable-next-line padding-line-between-statements
+  let className = '';
+
+  export { className as class };
+
+  /** @type {(HTMLTextAreaElement|undefined)} */
+  export let element = undefined;
+
+  export let name = '';
+
+  /** @type {(String|undefined)} */
+  export let value = undefined;
+
+  export let autoResize = false;
+
+  /** @type {(String|undefined)} */
+  let height;
+
+  const resizeTextarea = () => {
+    height = 'auto';
+
+    window.requestAnimationFrame(() => {
+      height = value && element?.scrollHeight ? `${element.scrollHeight + 4}px` : undefined;
+    });
+  };
+
+  $: {
+    if (value && autoResize) {
+      resizeTextarea();
+    }
+  }
+</script>
+
+<div class="sui text-area {className}">
+  <textarea
+    name={name || undefined}
+    {...$$restProps}
+    style:height
+    bind:this={element}
+    on:click
+    on:input
+    on:keypress
+    on:input={() => {
+      value = element.value;
+    }}>{value}</textarea
+  >
+</div>
+
+<style>.text-area {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+}
+
+textarea {
+  display: block;
+  margin: 0;
+  border-width: 1px;
+  border-color: var(--control-border-color);
+  border-radius: var(--input--medium--border-radius);
+  background-color: var(--control-background-color);
+  padding: 8px;
+  width: 100%;
+  min-height: 8em;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.75;
+  resize: vertical;
+  transition: all 200ms;
+}
+textarea:focus {
+  border-color: var(--primary-accent-color);
+}
+textarea:disabled {
+  background-color: var(--disabled-background-color);
+  opacity: 0.4;
+  cursor: default;
+}</style>

package/package/components/core/text-area.svelte.d.ts

@@ -0,0 +1,57 @@
+/** @typedef {typeof __propDef.props}  TextAreaProps */
+/** @typedef {typeof __propDef.events}  TextAreaEvents */
+/** @typedef {typeof __propDef.slots}  TextAreaSlots */
+/** @see https://w3c.github.io/aria/#textbox */
+export default class TextArea extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    element?: HTMLTextAreaElement;
+    name?: string;
+    value?: string;
+    autoResize?: boolean;
+}, {
+    click: MouseEvent;
+    input: Event;
+    keypress: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
+    set element(arg: HTMLTextAreaElement);
+    get element(): HTMLTextAreaElement;
+    /**accessor*/
+    set name(arg: string);
+    get name(): string;
+    /**accessor*/
+    set value(arg: string);
+    get value(): string;
+    /**accessor*/
+    set autoResize(arg: boolean);
+    get autoResize(): boolean;
+}
+export type TextAreaProps = typeof __propDef.props;
+export type TextAreaEvents = typeof __propDef.events;
+export type TextAreaSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        element?: (HTMLTextAreaElement | undefined);
+        name?: string;
+        value?: (string | undefined);
+        autoResize?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+        input: Event;
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/core/text-input.svelte

@@ -0,0 +1,146 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#textbox
+-->
+<svelte:options accessors={true} />
+
+<script>
+  import { getRandomId } from '../helpers/util';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {(HTMLInputElement|undefined)} */
+  export let element = undefined;
+
+  /** @type {('textbox'|'searchbox'|'combobox'|'spinbutton')} */
+  export let role = 'textbox';
+
+  /**
+   * Whether the textbox is editable.
+   */
+  export let readOnly = false;
+
+  export let disabled = false;
+
+  export let name = '';
+
+  /** @type {(String|undefined)} */
+  export let value = undefined;
+
+  const id = getRandomId('input');
+  let ariaLabel = '';
+
+  $: {
+    // Replace `aria-label` with a visible label if `<input placeholder>` is not defined
+    if ('aria-label' in $$restProps && !('placeholder' in $$restProps)) {
+      ariaLabel = $$restProps['aria-label'];
+      delete $$restProps['aria-label'];
+      $$restProps['aria-labelledby'] = `${id}-label`;
+    }
+  }
+</script>
+
+<div class="sui text-input {className}">
+  <input
+    type="text"
+    {role}
+    name={name || undefined}
+    tabindex={disabled ? -1 : 0}
+    {readOnly}
+    aria-readonly={readOnly ? true : undefined}
+    {disabled}
+    aria-disabled={disabled ? true : undefined}
+    {...$$restProps}
+    bind:this={element}
+    bind:value
+    on:input
+    on:keydown
+    on:keyup
+    on:keypress
+    on:change
+  />
+  {#if ariaLabel}
+    <span id="{id}-label" class="label" class:hidden={!!value}>
+      {ariaLabel}
+    </span>
+  {/if}
+</div>
+
+<style>.text-input {
+  position: relative;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+}
+
+input {
+  z-index: 1;
+  display: inline-block;
+  flex: auto;
+  border-width: 1px;
+  border-color: var(--control-border-color);
+  border-radius: var(--input--medium--border-radius);
+  padding: 0 8px;
+  min-width: 0;
+  height: var(--input--medium--height);
+  background-color: var(--control-background-color);
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 30px;
+  transition: all 200ms;
+}
+input:focus {
+  border-color: var(--primary-accent-color);
+}
+input:read-only {
+  color: var(--tertiary-foreground-color);
+  border-color: var(--control-border-color) !important;
+}
+input:disabled {
+  background-color: var(--disabled-background-color);
+  opacity: 0.4;
+  cursor: default;
+}
+input[aria-invalid=true] {
+  border-color: deeppink;
+}
+input ~ :global(button) {
+  flex: none;
+  margin-left: -1px;
+  border-width: 1px;
+  border-color: var(--control-border-color);
+  height: var(--input--medium--height);
+  aspect-ratio: 1/1;
+}
+input ~ :global(button):last-child {
+  border-radius: 0 4px 4px 0;
+}
+input ~ :global(button) :global(.icon) {
+  font-size: var(--font-size--xx-large);
+}
+
+.label {
+  position: absolute;
+  inset: 0 8px;
+  z-index: 2;
+  display: flex;
+  justify-content: var(--input-label-align, flex-start);
+  align-items: center;
+  color: var(--primary-foreground-color);
+  opacity: 0.5;
+  pointer-events: none;
+}
+.label.hidden {
+  opacity: 0;
+}
+
+input:focus + .label {
+  opacity: 0;
+}</style>

package/package/components/core/text-input.svelte.d.ts

@@ -0,0 +1,71 @@
+/** @typedef {typeof __propDef.props}  TextInputProps */
+/** @typedef {typeof __propDef.events}  TextInputEvents */
+/** @typedef {typeof __propDef.slots}  TextInputSlots */
+/** @see https://w3c.github.io/aria/#textbox */
+export default class TextInput extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    element?: HTMLInputElement;
+    role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    readOnly?: boolean;
+}, {
+    input: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
+    set element(arg: HTMLInputElement);
+    get element(): HTMLInputElement;
+    /**accessor*/
+    set role(arg: "textbox" | "searchbox" | "combobox" | "spinbutton");
+    get role(): "textbox" | "searchbox" | "combobox" | "spinbutton";
+    /**accessor*/
+    set readOnly(arg: boolean);
+    get readOnly(): boolean;
+    /**accessor*/
+    set disabled(arg: boolean);
+    get disabled(): boolean;
+    /**accessor*/
+    set name(arg: string);
+    get name(): string;
+    /**accessor*/
+    set value(arg: string);
+    get value(): string;
+}
+export type TextInputProps = typeof __propDef.props;
+export type TextInputEvents = typeof __propDef.events;
+export type TextInputSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        element?: (HTMLInputElement | undefined);
+        role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
+        disabled?: boolean;
+        name?: string;
+        value?: (string | undefined);
+        readOnly?: boolean;
+    };
+    events: {
+        input: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/core/toolbar.svelte

@@ -0,0 +1,74 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#toolbar
+  @see https://w3c.github.io/aria-practices/#toolbar
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  // eslint-disable-next-line padding-line-between-statements
+  let className = '';
+
+  export { className as class };
+
+  /**
+   * Define the `aria-orientation` property on the toolbar element.
+   * @type {('horizontal'|'vertical')}
+   */
+  export let orientation = 'horizontal';
+</script>
+
+<div
+  class="sui toolbar {orientation} {className}"
+  role="toolbar"
+  aria-orientation={orientation}
+  {...$$restProps}
+>
+  <slot />
+</div>
+
+<style>[role=toolbar] {
+  --toolbar-size: 40px;
+  flex: none !important;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+}
+[role=toolbar].primary {
+  --toolbar-size: 48px;
+  background-color: var(--secondary-background-color);
+}
+[role=toolbar].secondary {
+  background-color: var(--tertiary-background-color);
+}
+[role=toolbar][aria-orientation=horizontal] {
+  height: var(--toolbar-size);
+}
+[role=toolbar][aria-orientation=vertical] {
+  flex-direction: column;
+  width: var(--toolbar-size);
+}
+[role=toolbar]:not(:last-child) {
+  border-width: 0 0 1px;
+  border-color: var(--primary-border-color);
+}
+[role=toolbar] :global(button[role="button"][aria-pressed="true"]),
+[role=toolbar] :global(button[role="button"][aria-checked="true"]) {
+  background-color: var(--highlight-background-color);
+}
+[role=toolbar] :global(h2) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 0 8px;
+  font-size: var(--font-size--large);
+}
+[role=toolbar] :global(h2) :global(span) {
+  font-size: var(--font-size--small);
+  font-weight: normal;
+  opacity: 0.8;
+}</style>