@sveltia/ui 0.1.4 → 0.2.0

package/package/components/core/option.svelte

@@ -1,59 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#option
--->
-<script>
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
-
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  let className = '';
-
-  export { className as class };
-
-  export let selected = false;
-</script>
-
-<div class="sui option {className}">
-  <Button
-    role="option"
-    aria-selected={selected}
-    {...$$restProps}
-    on:click
-    on:dragover
-    on:dragleave
-    on:dragend
-    on:drop
-  >
-    {#if selected}
-      <Icon class="check" name="check" />
-    {/if}
-    <slot name="start-icon" slot="start-icon" />
-    <slot />
-    <slot name="end-icon" slot="end-icon" />
-  </Button>
-</div>
-
-<style>.option {
-  display: contents;
-}
-.option :global([role="option"]) {
-  flex: none;
-  display: flex;
-  justify-content: space-between;
-  gap: 4px;
-  border-radius: 4px;
-  padding: 0 8px 0 16px;
-  width: 100%;
-  height: var(--option--medium--height);
-}
-.option :global([role="option"]:hover) {
-  color: var(--highlight-foreground-color);
-  background-color: var(--highlight-background-color);
-}
-.option :global([role="option"][aria-selected="true"]) :global(.icon) {
-  color: var(--primary-accent-color-lighter);
-}</style>

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

@@ -1,35 +0,0 @@
-/** @typedef {typeof __propDef.props}  OptionProps */
-/** @typedef {typeof __propDef.events}  OptionEvents */
-/** @typedef {typeof __propDef.slots}  OptionSlots */
-/** @see https://w3c.github.io/aria/#option */
-export default class Option {
-}
-export type OptionProps = typeof __propDef.props;
-export type OptionEvents = typeof __propDef.events;
-export type OptionSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-        selected?: boolean;
-    };
-    events: {
-        click: any;
-        dragover: any;
-        dragleave: any;
-        dragend: any;
-        drop: any;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'start-icon': {
-            slot: string;
-        };
-        default: {};
-        'end-icon': {
-            slot: string;
-        };
-    };
-};
-export {};

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

@@ -1,81 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#textbox
--->
-<script>
-  import { _ } from 'svelte-i18n';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
-  import TextInput from './text-input.svelte';
-
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  let className = '';
-
-  export { className as class };
-
-  /** @type {(String|undefined)} */
-  export let value = undefined;
-
-  /**
-   * @type {TextInput}
-   */
-  let inputComponent;
-  let passwordVisible = false;
-
-  $: {
-    if (inputComponent) {
-      inputComponent.element.setAttribute('type', passwordVisible ? 'text' : 'password');
-    }
-  }
-</script>
-
-<div class="sui password-input {className}">
-  <TextInput
-    bind:this={inputComponent}
-    bind:value
-    type="password"
-    {...$$restProps}
-    on:input
-    on:keypress
-    on:change
-  />
-  <Button
-    class="iconic"
-    pressed={passwordVisible}
-    on:click={() => {
-      passwordVisible = !passwordVisible;
-    }}
-  >
-    <Icon
-      slot="start-icon"
-      name={passwordVisible ? 'visibility_off' : 'visibility'}
-      label={$_('sui.password_input.show_password')}
-    />
-  </Button>
-</div>
-
-<style>.password-input {
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-}
-.password-input :global(input) {
-  border-radius: 4px 0 0 4px;
-}
-.password-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;
-}
-.password-input :global(button):last-child {
-  border-radius: 0 4px 4px 0;
-}
-.password-input :global(button) :global(.icon) {
-  font-size: 20px;
-}</style>

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  PasswordInputProps */
-/** @typedef {typeof __propDef.events}  PasswordInputEvents */
-/** @typedef {typeof __propDef.slots}  PasswordInputSlots */
-/** @see https://w3c.github.io/aria/#textbox */
-export default class PasswordInput {
-}
-export type PasswordInputProps = typeof __propDef.props;
-export type PasswordInputEvents = typeof __propDef.events;
-export type PasswordInputSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-        value?: (string | undefined);
-    };
-    events: {
-        input: any;
-        keypress: any;
-        change: any;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/package/components/core/radio-button.svelte

@@ -1,93 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#radio
-  @see https://w3c.github.io/aria-practices/#radiobutton
--->
-<script>
-  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} */
-  export let selected = false;
-
-  const id = getRandomId('checkbox');
-  /** @type {Button} */
-  let buttonComponent;
-</script>
-
-{#if name && value && selected}
-  <input type="hidden" {name} {value} />
-{/if}
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<span
-  class="sui radio-button {className}"
-  on:click={(event) => {
-    if (!event.target.matches('button')) {
-      buttonComponent.element.click();
-    }
-  }}
->
-  <Button
-    {id}
-    role="radio"
-    aria-checked={selected}
-    aria-labelledby="{id}-label"
-    bind:this={buttonComponent}
-    on:click={(event) => {
-      event.preventDefault();
-      selected = !selected;
-    }}
-  >
-    <Icon slot="start-icon" name="circle" />
-  </Button>
-  <label id="{id}-label">
-    <slot />
-  </label>
-</span>
-
-<style>.radio-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: inherit;
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-}
-.radio-button :global(button) {
-  justify-content: center;
-  overflow: hidden;
-  border-width: 2px;
-  border-color: var(--control-border-color);
-  border-radius: 24px;
-  width: 24px;
-  height: 24px;
-  color: var(--primary-accent-color-lighter);
-  transition: all 200ms;
-}
-.radio-button :global(button) :global(.icon) {
-  font-size: 16px;
-  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
-}
-.radio-button :global(button[aria-checked="true"]) {
-  color: var(--primary-accent-color-lighter);
-}
-.radio-button :global(button[aria-checked="false"]) {
-  color: transparent;
-}</style>

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

@@ -1,27 +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 {
-}
-export type RadioButtonProps = typeof __propDef.props;
-export type RadioButtonEvents = typeof __propDef.events;
-export type RadioButtonSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        class?: string;
-        name?: string;
-        value?: (string | undefined);
-        selected?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

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

@@ -1,14 +0,0 @@
-<script>
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  // eslint-disable-next-line padding-line-between-statements
-  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,21 +0,0 @@
-/** @typedef {typeof __propDef.props}  RowGroupProps */
-/** @typedef {typeof __propDef.events}  RowGroupEvents */
-/** @typedef {typeof __propDef.slots}  RowGroupSlots */
-export default class RowGroup {
-}
-export type RowGroupProps = typeof __propDef.props;
-export type RowGroupEvents = typeof __propDef.events;
-export type RowGroupSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/package/components/core/row.svelte

@@ -1,14 +0,0 @@
-<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 role="row" tabindex="0" class="sui row {className}" {...$$restProps} on:click>
-  <slot />
-</div>

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

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  RowProps */
-/** @typedef {typeof __propDef.events}  RowEvents */
-/** @typedef {typeof __propDef.slots}  RowSlots */
-export default class Row {
-}
-export type RowProps = typeof __propDef.props;
-export type RowEvents = typeof __propDef.events;
-export type RowSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/package/components/core/search-bar.svelte

@@ -1,90 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#search
--->
-<svelte:options accessors={true} />
-
-<script>
-  import { _ } from 'svelte-i18n';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
-  import TextInput from './text-input.svelte';
-
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  let className = '';
-
-  export { className as class };
-
-  /** @type {_SvelteComponent} */
-  let input;
-
-  export let value = '';
-
-  /**
-   * Move focus to the `<input>` element.
-   */
-  export const focus = () => {
-    input?.element?.focus();
-  };
-</script>
-
-<div class="sui search-bar {className}" role="search">
-  <Icon name="search" />
-  <TextInput
-    bind:this={input}
-    bind:value
-    role="searchbox"
-    {...$$restProps}
-    on:input
-    on:keydown
-    on:keyup
-    on:keypress
-    on:change
-  />
-  {#if value}
-    <Button
-      class="ternary iconic"
-      on:click={() => {
-        value = '';
-        input.element.focus();
-        window.requestIdleCallback(() => {
-          input.element.dispatchEvent(new KeyboardEvent('input'));
-          input.element.dispatchEvent(new KeyboardEvent('keypress'));
-          input.element.dispatchEvent(new KeyboardEvent('change'));
-        });
-      }}
-    >
-      <Icon slot="start-icon" name="close" label={$_('sui._.clear')} />
-    </Button>
-  {/if}
-</div>
-
-<style>[role=search] {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-[role=search] :global(.icon) {
-  font-size: 20px;
-  opacity: 0.5;
-}
-[role=search] > :global(.icon) {
-  position: absolute;
-  inset: 8px auto auto 8px;
-  z-index: 2;
-}
-[role=search] > :global(button) {
-  position: absolute;
-  inset: 0 0 auto auto;
-  z-index: 2;
-}
-[role=search] :global(.label) {
-  inset: 0 36px;
-}
-[role=search] :global(input) {
-  padding: 0 36px !important;
-  width: 100%;
-}</style>

package/package/components/core/search-bar.svelte.d.ts

@@ -1,35 +0,0 @@
-/** @typedef {typeof __propDef.props}  SearchBarProps */
-/** @typedef {typeof __propDef.events}  SearchBarEvents */
-/** @typedef {typeof __propDef.slots}  SearchBarSlots */
-/** @see https://w3c.github.io/aria/#search */
-export default class SearchBar {
-    get focus(): any;
-    /**accessor*/
-    set class(arg: any);
-    get class(): any;
-    /**accessor*/
-    set value(arg: any);
-    get value(): any;
-}
-export type SearchBarProps = typeof __propDef.props;
-export type SearchBarEvents = typeof __propDef.events;
-export type SearchBarSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        focus?: () => void;
-        class?: string;
-        value?: string;
-    };
-    events: {
-        input: any;
-        keydown: any;
-        keyup: any;
-        keypress: any;
-        change: any;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/package/components/core/select-button.svelte

@@ -1,31 +0,0 @@
-<!--
-  @component
-  A variant of `<RadioButton>`, looking like a normal button.
-  @see https://w3c.github.io/aria/#radio
-  @see https://w3c.github.io/aria-practices/#radiobutton
--->
-<script>
-  import Button from './button.svelte';
-
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  let className = '';
-
-  export { className as class };
-
-  export let selected = false;
-</script>
-
-<Button
-  class="sui select-button {className}"
-  role="radio"
-  aria-checked={selected}
-  {...$$restProps}
-  on:click
->
-  <slot name="start-icon" slot="start-icon" />
-  <slot />
-  <slot name="end-icon" slot="end-icon" />
-</Button>

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

@@ -1,35 +0,0 @@
-/** @typedef {typeof __propDef.props}  SelectButtonProps */
-/** @typedef {typeof __propDef.events}  SelectButtonEvents */
-/** @typedef {typeof __propDef.slots}  SelectButtonSlots */
-/**
- * A variant of `<RadioButton>`, looking like a normal button.
- * @see https://w3c.github.io/aria/#radio
- * @see https://w3c.github.io/aria-practices/#radiobutton
- */
-export default class SelectButton {
-}
-export type SelectButtonProps = typeof __propDef.props;
-export type SelectButtonEvents = typeof __propDef.events;
-export type SelectButtonSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-        selected?: boolean;
-    };
-    events: {
-        click: any;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'start-icon': {
-            slot: string;
-        };
-        default: {};
-        'end-icon': {
-            slot: string;
-        };
-    };
-};
-export {};

package/package/components/core/separator.svelte

@@ -1,28 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#separator
--->
-<script>
-  export let orientation = 'horizontal';
-
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  let className = '';
-
-  export { className as class };
-</script>
-
-<div role="separator" class="sui separator {className}" aria-orientation={orientation} />
-
-<style>.separator {
-  flex: none;
-  background-color: var(--secondary-border-color);
-}
-.separator[aria-orientation=horizontal] {
-  height: 1px;
-}
-.separator[aria-orientation=vertical] {
-  width: 1px;
-}</style>

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

@@ -1,20 +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 {
-}
-export type SeparatorProps = typeof __propDef.props;
-export type SeparatorEvents = typeof __propDef.events;
-export type SeparatorSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        class?: string;
-        orientation?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};