@sveltia/ui 0.1.0

package/package/components/composite/grid.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { activateGroup } from '../helpers/group';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {(HTMLElement|undefined)} */
+  export let element = undefined;
+</script>
+
+<div
+  role="grid"
+  class="sui grid {className}"
+  {...$$restProps}
+  bind:this={element}
+  use:activateGroup
+>
+  <slot />
+</div>

package/package/components/composite/grid.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  GridProps */
+/** @typedef {typeof __propDef.events}  GridEvents */
+/** @typedef {typeof __propDef.slots}  GridSlots */
+export default class Grid extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    element?: HTMLElement;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridProps = typeof __propDef.props;
+export type GridEvents = typeof __propDef.events;
+export type GridSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        element?: (HTMLElement | undefined);
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/composite/listbox.svelte

@@ -0,0 +1,63 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#listbox
+  @see https://w3c.github.io/aria-practices/#Listbox
+-->
+<svelte:options accessors={true} />
+
+<script>
+  import { activateGroup } from '../helpers/group';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {(HTMLElement|undefined)} */
+  export let element = undefined;
+
+  export let multiple = false;
+</script>
+
+<div
+  class="sui listbox {className}"
+  role="listbox"
+  tabindex="0"
+  aria-multiselectable={multiple}
+  {...$$restProps}
+  bind:this={element}
+  on:click
+  on:select
+  use:activateGroup
+>
+  <slot />
+</div>
+
+<style>[role=listbox] {
+  display: flex;
+  flex-direction: column;
+  color: inherit;
+  margin: 0;
+  border-width: 1px;
+  border-color: var(--control-border-color);
+  border-radius: 4px;
+  padding: 4px;
+}
+[role=listbox] :global([role="separator"]) {
+  margin: 4px;
+}
+[role=listbox] :global([role="group"]):not(:first-child) {
+  margin-top: 16px;
+}
+[role=listbox] :global([role="group"]):not(:last-child) {
+  margin-bottom: 16px;
+}
+[role=listbox] :global([role="group"]) :global(.title) {
+  margin: 0 8px 8px;
+  color: var(--secondary-foreground-color);
+  font-size: 11px;
+  text-transform: uppercase;
+}</style>

package/package/components/composite/listbox.svelte.d.ts

@@ -0,0 +1,52 @@
+/** @typedef {typeof __propDef.props}  ListboxProps */
+/** @typedef {typeof __propDef.events}  ListboxEvents */
+/** @typedef {typeof __propDef.slots}  ListboxSlots */
+/**
+ * @see https://w3c.github.io/aria/#listbox
+ * @see https://w3c.github.io/aria-practices/#Listbox
+ */
+export default class Listbox extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    element?: HTMLElement;
+    multiple?: boolean;
+}, {
+    click: MouseEvent;
+    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 multiple(arg: boolean);
+    get multiple(): boolean;
+}
+export type ListboxProps = typeof __propDef.props;
+export type ListboxEvents = typeof __propDef.events;
+export type ListboxSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        element?: (HTMLElement | undefined);
+        multiple?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+        select: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/composite/menu-item-group.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { getRandomId } from '../helpers/util';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  export let title = '';
+
+  export let ariaLabel = '';
+
+  const id = getRandomId('group');
+</script>
+
+<div
+  class="sui menu-item-group {className}"
+  role="group"
+  {id}
+  aria-label={ariaLabel || undefined}
+  aria-labelledby={title ? '{id}-title' : undefined}
+  {...$$restProps}
+>
+  {#if title}
+    <div class="title" id="{id}-title">{title}</div>
+  {/if}
+  <slot />
+</div>

package/package/components/composite/menu-item-group.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  MenuItemGroupProps */
+/** @typedef {typeof __propDef.events}  MenuItemGroupEvents */
+/** @typedef {typeof __propDef.slots}  MenuItemGroupSlots */
+export default class MenuItemGroup extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    title?: string;
+    ariaLabel?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type MenuItemGroupProps = typeof __propDef.props;
+export type MenuItemGroupEvents = typeof __propDef.events;
+export type MenuItemGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        title?: string;
+        ariaLabel?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/composite/menu.svelte

@@ -0,0 +1,44 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#menu
+  @see https://w3c.github.io/aria-practices/#menu
+-->
+<svelte:options accessors={true} />
+
+<script>
+  import { activateGroup } from '../helpers/group';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {(HTMLElement|undefined)} */
+  export let element = undefined;
+</script>
+
+<div
+  class="sui menu {className}"
+  role="menu"
+  {...$$restProps}
+  bind:this={element}
+  use:activateGroup
+>
+  <slot />
+</div>
+
+<style>.menu {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  border-width: 1px;
+  border-color: var(--secondary-border-color);
+  border-radius: 4px;
+  padding: 4px;
+}
+.menu :global([role="separator"]) {
+  margin: 4px;
+}</style>

package/package/components/composite/menu.svelte.d.ts

@@ -0,0 +1,41 @@
+/** @typedef {typeof __propDef.props}  MenuProps */
+/** @typedef {typeof __propDef.events}  MenuEvents */
+/** @typedef {typeof __propDef.slots}  MenuSlots */
+/**
+ * @see https://w3c.github.io/aria/#menu
+ * @see https://w3c.github.io/aria-practices/#menu
+ */
+export default class Menu extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    element?: HTMLElement;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+    /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
+    set element(arg: HTMLElement);
+    get element(): HTMLElement;
+}
+export type MenuProps = typeof __propDef.props;
+export type MenuEvents = typeof __propDef.events;
+export type MenuSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        element?: (HTMLElement | undefined);
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/composite/radio-button-group.svelte

@@ -0,0 +1,44 @@
+<!--
+  @component
+  The container of `<RadioButton>`s.
+  @see https://w3c.github.io/aria/#radiogroup
+  @see https://w3c.github.io/aria-practices/#radiobutton
+-->
+<script>
+  import { activateGroup } from '../helpers/group';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {('horizontal'|'vertical')} */
+  export let orientation = 'horizontal';
+
+  /** @type {(HTMLElement|undefined)} */
+  export let element = undefined;
+</script>
+
+<div
+  class="sui radio-button-group {className} {orientation}"
+  role="radiogroup"
+  bind:this={element}
+  use:activateGroup
+>
+  <slot />
+</div>
+
+<style>.radio-button-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 16px;
+}
+.radio-button-group.horizontal {
+  align-items: center;
+}
+.radio-button-group.vertical {
+  flex-direction: column;
+}</style>

package/package/components/composite/radio-button-group.svelte.d.ts

@@ -0,0 +1,36 @@
+/** @typedef {typeof __propDef.props}  RadioButtonGroupProps */
+/** @typedef {typeof __propDef.events}  RadioButtonGroupEvents */
+/** @typedef {typeof __propDef.slots}  RadioButtonGroupSlots */
+/**
+ * The container of `<RadioButton>`s.
+ * @see https://w3c.github.io/aria/#radiogroup
+ * @see https://w3c.github.io/aria-practices/#radiobutton
+ */
+export default class RadioButtonGroup extends SvelteComponentTyped<{
+    class?: string;
+    element?: HTMLElement;
+    orientation?: "vertical" | "horizontal";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type RadioButtonGroupProps = typeof __propDef.props;
+export type RadioButtonGroupEvents = typeof __propDef.events;
+export type RadioButtonGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        element?: (HTMLElement | undefined);
+        orientation?: ('horizontal' | 'vertical');
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/composite/select-button-group.svelte

@@ -0,0 +1,69 @@
+<!--
+  @component
+  A variant of `<RadioButtonGroup>`, looking like normal buttons.
+  @see https://w3c.github.io/aria/#radiogroup
+  @see https://w3c.github.io/aria-practices/#radiobutton
+-->
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import { activateGroup } from '../helpers/group';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  export let value = '';
+  export let ariaLabel = '';
+  export let disabled = false;
+
+  const dispatch = createEventDispatcher();
+
+  /** @type {(HTMLElement|undefined)} */
+  export let element = undefined;
+
+  $: {
+    dispatch('change', { value });
+  }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="sui select-button-group {className}"
+  role="radiogroup"
+  aria-label={ariaLabel || undefined}
+  aria-disabled={disabled ? true : undefined}
+  bind:this={element}
+  on:click={({ target }) => {
+    if (target.matches('[role="radio"]')) {
+      value = target.value;
+    }
+  }}
+  use:activateGroup
+>
+  <slot />
+</div>
+
+<style>.select-button-group {
+  display: inline-flex;
+  align-items: center;
+}
+.select-button-group :global(button) {
+  border-radius: 0;
+}
+.select-button-group :global(button):first-child {
+  border-radius: 4px 0 0 4px;
+}
+.select-button-group :global(button):not(:first-child) {
+  margin-left: -1px;
+}
+.select-button-group :global(button):last-child {
+  border-radius: 0 4px 4px 0;
+}
+.select-button-group :global(button[aria-checked="true"]) {
+  color: var(--highlight-foreground-color);
+  background-color: var(--highlight-background-color);
+}</style>

package/package/components/composite/select-button-group.svelte.d.ts

@@ -0,0 +1,44 @@
+/** @typedef {typeof __propDef.props}  SelectButtonGroupProps */
+/** @typedef {typeof __propDef.events}  SelectButtonGroupEvents */
+/** @typedef {typeof __propDef.slots}  SelectButtonGroupSlots */
+/**
+ * A variant of `<RadioButtonGroup>`, looking like normal buttons.
+ * @see https://w3c.github.io/aria/#radiogroup
+ * @see https://w3c.github.io/aria-practices/#radiobutton
+ */
+export default class SelectButtonGroup extends SvelteComponentTyped<{
+    class?: string;
+    element?: HTMLElement;
+    disabled?: boolean;
+    value?: string;
+    ariaLabel?: string;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type SelectButtonGroupProps = typeof __propDef.props;
+export type SelectButtonGroupEvents = typeof __propDef.events;
+export type SelectButtonGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        element?: (HTMLElement | undefined);
+        disabled?: boolean;
+        value?: string;
+        ariaLabel?: string;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/composite/select.svelte

@@ -0,0 +1,34 @@
+<!--
+  @component
+  A read-only variant of `<Combobox>`.
+-->
+<script>
+  import Combobox from './combobox.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  export let label = '';
+
+  /**
+   * Selected option’s value.
+   * @type {(String|undefined)}
+   */
+  export let value = undefined;
+</script>
+
+<Combobox
+  bind:value
+  class="sui select {className}"
+  {label}
+  readOnly={true}
+  {...$$restProps}
+  on:change
+>
+  <slot />
+</Combobox>

package/package/components/composite/select.svelte.d.ts

@@ -0,0 +1,38 @@
+/** @typedef {typeof __propDef.props}  SelectProps */
+/** @typedef {typeof __propDef.events}  SelectEvents */
+/** @typedef {typeof __propDef.slots}  SelectSlots */
+/** A read-only variant of `<Combobox>`. */
+export default class Select extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    label?: string;
+    value?: string;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        label?: string;
+        value?: (string | undefined);
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/composite/tab-list.svelte

@@ -0,0 +1,76 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#tablist
+  @see https://w3c.github.io/aria-practices/#tabpanel
+-->
+<svelte:options accessors={true} />
+
+<script>
+  import { activateGroup } from '../helpers/group';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {(HTMLElement|undefined)} */
+  export let element = undefined;
+
+  /** @type {('horizontal'|'vertical')} */
+  export let orientation = 'horizontal';
+
+  export let name = '';
+</script>
+
+<div
+  class="sui tab-list {className}"
+  role="tablist"
+  aria-orientation={orientation}
+  data-name={name || undefined}
+  {...$$restProps}
+  bind:this={element}
+  on:select
+  use:activateGroup
+>
+  <slot />
+</div>
+
+<style>.tab-list {
+  display: flex;
+  align-items: center;
+  border-color: var(--control-border-color);
+}
+.tab-list:global([aria-orientation="horizontal"]) {
+  gap: 16px;
+  margin: 0 0 32px;
+  border-width: 0 0 1px;
+  padding: 0 16px;
+}
+.tab-list:global([aria-orientation="horizontal"]) :global(button) {
+  border-width: 0 0 2px 0;
+}
+.tab-list:global([aria-orientation="vertical"]) {
+  gap: 8px;
+  flex-direction: column;
+  margin: 0 32px 0 0;
+  border-width: 0 1px 0 0;
+  padding: 8px 0;
+  width: 240px;
+}
+.tab-list:global([aria-orientation="vertical"]) :global(button) {
+  border-width: 0 2px 0 0;
+  width: 100%;
+}
+.tab-list :global(button) {
+  justify-content: flex-start;
+  border-color: transparent;
+  padding: 0;
+  border-radius: 0;
+  height: var(--tab--medium--height);
+}
+.tab-list :global(button[aria-selected="true"]) {
+  border-color: var(--primary-accent-color-lighter);
+}</style>