@sveltia/ui 0.1.0

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

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  RowGroupProps */
+/** @typedef {typeof __propDef.events}  RowGroupEvents */
+/** @typedef {typeof __propDef.slots}  RowGroupSlots */
+export default class RowGroup extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type RowGroupProps = typeof __propDef.props;
+export type RowGroupEvents = typeof __propDef.events;
+export type RowGroupSlots = 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/row.svelte

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  RowProps */
+/** @typedef {typeof __propDef.events}  RowEvents */
+/** @typedef {typeof __propDef.slots}  RowSlots */
+export default class Row extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type RowProps = typeof __propDef.props;
+export type RowEvents = typeof __propDef.events;
+export type RowSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+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

@@ -0,0 +1,90 @@
+<!--
+  @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"
+      iconName="close"
+      iconLabel={$_('sui._.clear')}
+      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'));
+        });
+      }}
+    />
+  {/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

@@ -0,0 +1,49 @@
+/** @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 extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    focus?: () => void;
+    value?: string;
+}, {
+    input: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get focus(): () => void;
+    /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
+    set value(arg: string);
+    get value(): string;
+}
+export type SearchBarProps = typeof __propDef.props;
+export type SearchBarEvents = typeof __propDef.events;
+export type SearchBarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        focus?: () => void;
+        value?: string;
+    };
+    events: {
+        input: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,29 @@
+<!--
+  @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 />
+</Button>

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

@@ -0,0 +1,40 @@
+/** @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 extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    selected?: boolean;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type SelectButtonProps = typeof __propDef.props;
+export type SelectButtonEvents = typeof __propDef.events;
+export type SelectButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        selected?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/core/separator.svelte

@@ -0,0 +1,28 @@
+<!--
+  @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

@@ -0,0 +1,26 @@
+/** @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 extends SvelteComponentTyped<{
+    class?: string;
+    orientation?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SeparatorProps = typeof __propDef.props;
+export type SeparatorEvents = typeof __propDef.events;
+export type SeparatorSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        orientation?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/core/spacer.svelte

@@ -0,0 +1,22 @@
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {Boolean} */
+  export let flex = false;
+</script>
+
+<div class="sui spacer {className}" class:flex />
+
+<style>.spacer.flex {
+  flex: auto;
+}
+.spacer:not(.flex) {
+  width: 8px;
+  height: 8px;
+}</style>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  SpacerProps */
+/** @typedef {typeof __propDef.events}  SpacerEvents */
+/** @typedef {typeof __propDef.slots}  SpacerSlots */
+export default class Spacer extends SvelteComponentTyped<{
+    class?: string;
+    flex?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SpacerProps = typeof __propDef.props;
+export type SpacerEvents = typeof __propDef.events;
+export type SpacerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        flex?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/core/switch.svelte

@@ -0,0 +1,80 @@
+<!--
+  @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: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::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<{
+    class?: string;
+    label?: 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: {
+        class?: string;
+        label?: 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,20 @@
+<!--
+  @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 />
+</Button>

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

@@ -0,0 +1,33 @@
+/** @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>;
+}, {
+    default: {};
+}> {
+}
+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: {
+        default: {};
+    };
+};
+export {};