@sveltia/ui 0.1.0

package/package/components/core/menu-item-radio.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  MenuItemRadioProps */
+/** @typedef {typeof __propDef.events}  MenuItemRadioEvents */
+/** @typedef {typeof __propDef.slots}  MenuItemRadioSlots */
+/** @see https://w3c.github.io/aria/#menuitemradio */
+export default class MenuItemRadio extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type MenuItemRadioProps = typeof __propDef.props;
+export type MenuItemRadioEvents = typeof __propDef.events;
+export type MenuItemRadioSlots = 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/menu-item.svelte

@@ -0,0 +1,113 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#menuitem
+-->
+<script>
+  import { writable } from 'svelte/store';
+  import Menu from '../composite/menu.svelte';
+  import Popup from '../util/popup.svelte';
+  import Button from './button.svelte';
+  import Icon from './icon.svelte';
+
+  let className = '';
+
+  export { className as class };
+
+  /** @type {('menuitem'|'menuitemcheckbox'|'menuitemradio')} */
+  export let role = 'menuitem';
+
+  export let label = '';
+
+  export let iconName = '';
+
+  export let iconLabel = '';
+
+  export let checked = false;
+
+  /** @type {Button} */
+  let buttonComponent;
+  let isPopupOpen = writable(false);
+
+  $: hasChildren = role === 'menuitem' && $$slots.default;
+</script>
+
+<div class="sui menuitem {className}">
+  <Button
+    {role}
+    aria-checked={checked}
+    aria-haspopup={hasChildren ? 'menu' : undefined}
+    aria-expanded={$isPopupOpen ? true : undefined}
+    {...$$restProps}
+    bind:this={buttonComponent}
+    on:click
+    on:mouseenter={() => {
+      isPopupOpen.set(true);
+    }}
+    on:mouseleave={() => {
+      isPopupOpen.set(false);
+    }}
+  >
+    {#if iconName}
+      <Icon name={iconName} label={iconLabel} />
+    {/if}
+    {#if label}
+      <span class="label">{label}</span>
+    {/if}
+    {#if role === 'menuitemradio' || role === 'menuitemcheckbox'}
+      <span class="icon-outer">
+        {#if checked}
+          <Icon name="check" />
+        {/if}
+      </span>
+    {/if}
+    {#if hasChildren}
+      <span class="icon-outer">
+        <Icon name="chevron_right" />
+      </span>
+    {/if}
+  </Button>
+  {#if hasChildren}
+    <Popup anchor={buttonComponent?.element} position="right-top" bind:open={isPopupOpen}>
+      <Menu>
+        <slot />
+      </Menu>
+    </Popup>
+  {/if}
+</div>
+
+<style>.menuitem {
+  position: relative;
+}
+.menuitem :global(button) {
+  display: flex;
+  justify-content: space-between !important;
+  border-radius: 4px;
+  padding: 0 16px;
+  width: 100%;
+  min-width: 160px;
+  height: var(--option--medium--height);
+}
+.menuitem :global(button[aria-checked="true"]) :global(.icon) {
+  color: var(--primary-accent-color-lighter);
+}
+.menuitem :global(button:hover),
+.menuitem :global(button:focus) {
+  color: var(--highlight-foreground-color);
+  background-color: var(--highlight-background-color);
+}
+.menuitem:hover > :global([role="menu"]) {
+  opacity: 1;
+}
+.menuitem > :global([role="menu"]) {
+  position: absolute;
+  inset: 2px auto auto calc(100% + 4px);
+}
+.menuitem > :global([role="menu"]):hover {
+  opacity: 1;
+}
+
+.icon-outer {
+  flex: none;
+  width: 24px;
+  height: 24px;
+}</style>

package/package/components/core/menu-item.svelte.d.ts

@@ -0,0 +1,44 @@
+/** @typedef {typeof __propDef.props}  MenuItemProps */
+/** @typedef {typeof __propDef.events}  MenuItemEvents */
+/** @typedef {typeof __propDef.slots}  MenuItemSlots */
+/** @see https://w3c.github.io/aria/#menuitem */
+export default class MenuItem extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    label?: string;
+    role?: "menuitem" | "menuitemcheckbox" | "menuitemradio";
+    iconName?: string;
+    iconLabel?: string;
+    checked?: boolean;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type MenuItemProps = typeof __propDef.props;
+export type MenuItemEvents = typeof __propDef.events;
+export type MenuItemSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        label?: string;
+        role?: ('menuitem' | 'menuitemcheckbox' | 'menuitemradio');
+        iconName?: string;
+        iconLabel?: string;
+        checked?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,109 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#textbox
+-->
+<script>
+  import { _ } from 'svelte-i18n';
+  import Button from './button.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;
+
+  export let min = undefined;
+  export let max = undefined;
+  export let step = 1;
+
+  let component;
+
+  const decrease = () => {
+    if (typeof min === 'number' && Number(value || 0) === min) {
+      return;
+    }
+
+    value = String(Number(value || 0) - step);
+  };
+
+  const increase = () => {
+    if (typeof min === 'number' && Number(value || 0) === max) {
+      return;
+    }
+
+    value = String(Number(value || 0) + step);
+  };
+</script>
+
+<div class="sui number-input {className}">
+  <TextInput
+    bind:this={component}
+    bind:value
+    role="spinbutton"
+    aria-valuenow={Number(value || 0)}
+    aria-invalid={Number.isNaN(Number(value))}
+    {...$$restProps}
+    on:keydown={(event) => {
+      const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
+
+      if (key === 'ArrowDown' && !ctrlKey && !metaKey && !altKey && !shiftKey) {
+        event.preventDefault();
+        decrease();
+      }
+
+      if (key === 'ArrowUp' && !ctrlKey && !metaKey && !altKey && !shiftKey) {
+        event.preventDefault();
+        increase();
+      }
+    }}
+    on:keypress
+    on:input
+  />
+  <Button
+    class="iconic"
+    disabled={Number.isNaN(Number(value))}
+    iconLabel={$_('sui.number_input.decrease')}
+    iconName={'arrow_downward'}
+    on:click={() => {
+      decrease();
+    }}
+  />
+  <Button
+    class="iconic"
+    disabled={Number.isNaN(Number(value))}
+    iconLabel={$_('sui.number_input.increase')}
+    iconName={'arrow_upward'}
+    on:click={() => {
+      increase();
+    }}
+  />
+</div>
+
+<style>.number-input {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+}
+.number-input :global(input) {
+  border-radius: 4px 0 0 4px;
+}
+.number-input :global(button) {
+  flex: none;
+  margin-left: -1px;
+  border-width: 1px;
+  border-color: var(--control-border-color);
+  width: 32px;
+  height: var(--input--medium--height);
+}
+.number-input :global(button):last-child {
+  border-radius: 0 4px 4px 0;
+}
+.number-input :global(button) :global(.icon) {
+  font-size: 20px;
+}</style>

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

@@ -0,0 +1,40 @@
+/** @typedef {typeof __propDef.props}  NumberInputProps */
+/** @typedef {typeof __propDef.events}  NumberInputEvents */
+/** @typedef {typeof __propDef.slots}  NumberInputSlots */
+/** @see https://w3c.github.io/aria/#textbox */
+export default class NumberInput extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    value?: string;
+    min?: any;
+    max?: any;
+    step?: number;
+}, {
+    keypress: KeyboardEvent;
+    input: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type NumberInputProps = typeof __propDef.props;
+export type NumberInputEvents = typeof __propDef.events;
+export type NumberInputSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        value?: (string | undefined);
+        min?: any;
+        max?: any;
+        step?: number;
+    };
+    events: {
+        keypress: KeyboardEvent;
+        input: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/core/option.svelte

@@ -0,0 +1,57 @@
+<!--
+  @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
+  >
+    <slot />
+    {#if selected}
+      <Icon class="check" name="check" />
+    {/if}
+  </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

@@ -0,0 +1,44 @@
+/** @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 extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    selected?: boolean;
+}, {
+    click: MouseEvent;
+    dragover: DragEvent;
+    dragleave: DragEvent;
+    dragend: DragEvent;
+    drop: DragEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type OptionProps = typeof __propDef.props;
+export type OptionEvents = typeof __propDef.events;
+export type OptionSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        selected?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+        dragover: DragEvent;
+        dragleave: DragEvent;
+        dragend: DragEvent;
+        drop: DragEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,76 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#textbox
+-->
+<script>
+  import { _ } from 'svelte-i18n';
+  import Button from './button.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}
+    iconLabel={$_('sui.password_input.show_password')}
+    iconName={passwordVisible ? 'visibility_off' : 'visibility'}
+    on:click={() => {
+      passwordVisible = !passwordVisible;
+    }}
+  />
+</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

@@ -0,0 +1,36 @@
+/** @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 extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    value?: string;
+}, {
+    input: Event;
+    keypress: KeyboardEvent;
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PasswordInputProps = typeof __propDef.props;
+export type PasswordInputEvents = typeof __propDef.events;
+export type PasswordInputSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        value?: (string | undefined);
+    };
+    events: {
+        input: Event;
+        keypress: KeyboardEvent;
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,91 @@
+<!--
+  @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';
+
+  /**
+   * 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}
+    iconName="circle"
+    role="radio"
+    aria-checked={selected}
+    aria-labelledby="{id}-label"
+    bind:this={buttonComponent}
+    on:click={(event) => {
+      event.preventDefault();
+      selected = !selected;
+    }}
+  />
+  <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

@@ -0,0 +1,37 @@
+/** @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 extends SvelteComponentTyped<{
+    class?: string;
+    name?: string;
+    value?: string;
+    selected?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type RadioButtonProps = typeof __propDef.props;
+export type RadioButtonEvents = typeof __propDef.events;
+export type RadioButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+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

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