@sveltia/ui 0.2.4 → 0.3.0

package/package/components/{core → switch}/switch.svelte.d.ts

@@ -2,13 +2,14 @@
 /** @typedef {typeof __propDef.events}  SwitchEvents */
 /** @typedef {typeof __propDef.slots}  SwitchSlots */
 /**
+ * A variant of `<Checkbox>`, looking like a switch that can be often seen on mobile apps.
  * @see https://w3c.github.io/aria/#switch
- * @see https://w3c.github.io/aria-practices/#switch
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/
  */
 export default class Switch extends SvelteComponentTyped<{
     label?: string;
-    class?: string;
     disabled?: boolean;
+    class?: string;
     checked?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -23,8 +24,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         label?: string;
-        class?: string;
         disabled?: boolean;
+        class?: string;
         checked?: boolean;
     };
     events: {

package/package/components/table/table-body.svelte

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<tbody>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
+  @see https://w3c.github.io/aria/#rowgroup
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="rowgroup" class="sui table-body {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.table-body {
+  display: table-row-group;
+}</style>

package/package/components/table/table-body.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  TableBodyProps */
+/** @typedef {typeof __propDef.events}  TableBodyEvents */
+/** @typedef {typeof __propDef.slots}  TableBodySlots */
+/**
+ * The equivalent of the HTML `<tbody>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
+ * @see https://w3c.github.io/aria/#rowgroup
+ */
+export default class TableBody extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableBodyProps = typeof __propDef.props;
+export type TableBodyEvents = typeof __propDef.events;
+export type TableBodySlots = 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/table/table-cell.svelte

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<td>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
+  @see https://w3c.github.io/aria/#gridcell
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="gridcell" class="sui table-cell {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.table-cell {
+  display: table-cell;
+}</style>

package/package/components/table/table-cell.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  TableCellProps */
+/** @typedef {typeof __propDef.events}  TableCellEvents */
+/** @typedef {typeof __propDef.slots}  TableCellSlots */
+/**
+ * The equivalent of the HTML `<td>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
+ * @see https://w3c.github.io/aria/#gridcell
+ */
+export default class TableCell extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableCellProps = typeof __propDef.props;
+export type TableCellEvents = typeof __propDef.events;
+export type TableCellSlots = 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/table/table-col-header.svelte

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<th scope="col">` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+  @see https://w3c.github.io/aria/#columnheader
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="columnheader" class="sui table-col-header {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.table-col-header {
+  display: table-cell;
+}</style>

package/package/components/table/table-col-header.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  TableColHeaderProps */
+/** @typedef {typeof __propDef.events}  TableColHeaderEvents */
+/** @typedef {typeof __propDef.slots}  TableColHeaderSlots */
+/**
+ * The equivalent of the HTML `<th scope="col">` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+ * @see https://w3c.github.io/aria/#columnheader
+ */
+export default class TableColHeader extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableColHeaderProps = typeof __propDef.props;
+export type TableColHeaderEvents = typeof __propDef.events;
+export type TableColHeaderSlots = 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/table/table-foot.svelte

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<tfoot>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
+  @see https://w3c.github.io/aria/#rowgroup
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="rowgroup" class="sui table-foot {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.table-foot {
+  display: table-footer-group;
+}</style>

package/package/components/table/table-foot.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  TableFootProps */
+/** @typedef {typeof __propDef.events}  TableFootEvents */
+/** @typedef {typeof __propDef.slots}  TableFootSlots */
+/**
+ * The equivalent of the HTML `<tfoot>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
+ * @see https://w3c.github.io/aria/#rowgroup
+ */
+export default class TableFoot extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableFootProps = typeof __propDef.props;
+export type TableFootEvents = typeof __propDef.events;
+export type TableFootSlots = 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/table/table-head.svelte

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<thead>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
+  @see https://w3c.github.io/aria/#rowgroup
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="rowgroup" class="sui table-head {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.table-head {
+  display: table-header-group;
+}</style>

package/package/components/table/table-head.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  TableHeadProps */
+/** @typedef {typeof __propDef.events}  TableHeadEvents */
+/** @typedef {typeof __propDef.slots}  TableHeadSlots */
+/**
+ * The equivalent of the HTML `<thead>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
+ * @see https://w3c.github.io/aria/#rowgroup
+ */
+export default class TableHead extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableHeadProps = typeof __propDef.props;
+export type TableHeadEvents = typeof __propDef.events;
+export type TableHeadSlots = 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/table/table-row-header.svelte

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<th scope="row">` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+  @see https://w3c.github.io/aria/#rowheader
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="rowheader" class="sui table-row-header {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.table-row-header {
+  display: table-cell;
+}</style>

package/package/components/table/table-row-header.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  TableRowHeaderProps */
+/** @typedef {typeof __propDef.events}  TableRowHeaderEvents */
+/** @typedef {typeof __propDef.slots}  TableRowHeaderSlots */
+/**
+ * The equivalent of the HTML `<th scope="row">` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+ * @see https://w3c.github.io/aria/#rowheader
+ */
+export default class TableRowHeader extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableRowHeaderProps = typeof __propDef.props;
+export type TableRowHeaderEvents = typeof __propDef.events;
+export type TableRowHeaderSlots = 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/table/table-row.svelte

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<tr>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+  @see https://w3c.github.io/aria/#row
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="row" tabindex="0" class="sui table-row {className}" {...$$restProps} on:click>
+  <slot />
+</div>
+
+<style>.table-row {
+  display: table-row;
+}</style>

package/package/components/table/table-row.svelte.d.ts

@@ -0,0 +1,38 @@
+/** @typedef {typeof __propDef.props}  TableRowProps */
+/** @typedef {typeof __propDef.events}  TableRowEvents */
+/** @typedef {typeof __propDef.slots}  TableRowSlots */
+/**
+ * The equivalent of the HTML `<tr>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+ * @see https://w3c.github.io/aria/#row
+ */
+export default class TableRow extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableRowProps = typeof __propDef.props;
+export type TableRowEvents = typeof __propDef.events;
+export type TableRowSlots = 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/table/table.svelte

@@ -0,0 +1,44 @@
+<!--
+  @component
+  The equivalent of the HTML `<table>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
+  @see https://w3c.github.io/aria/#grid
+-->
+<script>
+  import { activateGroup } from '../util/group';
+
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {HTMLElement?} */
+  export let element = undefined;
+</script>
+
+<div
+  role="grid"
+  class="sui table {className}"
+  {...$$restProps}
+  bind:this={element}
+  use:activateGroup
+>
+  <slot />
+</div>
+
+<style>.table {
+  display: table;
+  width: 100%;
+}
+.table:global(.data) {
+  border-collapse: collapse;
+}
+.table:global(.data) :global(.table-col-header),
+.table:global(.data) :global(.table-row-header),
+.table:global(.data) :global(.table-cell) {
+  border: 1px solid var(--secondary-border-color);
+  padding: 8px 8px;
+}</style>

package/package/components/table/table.svelte.d.ts

@@ -0,0 +1,36 @@
+/** @typedef {typeof __propDef.props}  TableProps */
+/** @typedef {typeof __propDef.events}  TableEvents */
+/** @typedef {typeof __propDef.slots}  TableSlots */
+/**
+ * The equivalent of the HTML `<table>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
+ * @see https://w3c.github.io/aria/#grid
+ */
+export default class Table extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    element?: HTMLElement;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        element?: HTMLElement | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/{composite → tabs}/tab-list.svelte

@@ -1,12 +1,13 @@
 <!--
   @component
+  A tab list widget.
   @see https://w3c.github.io/aria/#tablist
-  @see https://w3c.github.io/aria-practices/#tabpanel
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 -->
 <svelte:options accessors={true} />
 
 <script>
-  import { activateGroup } from '../helpers/group';
+  import { activateGroup } from '../util/group';
 
   /**
    * CSS class name on the button.

package/package/components/{composite → tabs}/tab-list.svelte.d.ts

@@ -2,15 +2,16 @@
 /** @typedef {typeof __propDef.events}  TabListEvents */
 /** @typedef {typeof __propDef.slots}  TabListSlots */
 /**
+ * A tab list widget.
  * @see https://w3c.github.io/aria/#tablist
- * @see https://w3c.github.io/aria-practices/#tabpanel
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
 export default class TabList extends SvelteComponentTyped<{
     [x: string]: any;
+    name?: string;
     class?: string;
     element?: HTMLElement;
-    name?: string;
-    orientation?: "horizontal" | "vertical";
+    orientation?: "vertical" | "horizontal";
 }, {
     select: Event;
 } & {
@@ -25,8 +26,8 @@ export default class TabList extends SvelteComponentTyped<{
     set element(arg: HTMLElement);
     get element(): HTMLElement;
     /**accessor*/
-    set orientation(arg: "horizontal" | "vertical");
-    get orientation(): "horizontal" | "vertical";
+    set orientation(arg: "vertical" | "horizontal");
+    get orientation(): "vertical" | "horizontal";
     /**accessor*/
     set name(arg: string);
     get name(): string;
@@ -38,9 +39,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        name?: string;
         class?: string;
         element?: HTMLElement | null;
-        name?: string;
         orientation?: ('horizontal' | 'vertical');
     };
     events: {

package/package/components/{core → tabs}/tab-panel.svelte

@@ -1,7 +1,8 @@
 <!--
   @component
+  A tab content panel.
   @see https://w3c.github.io/aria/#tabpanel
-  @see https://w3c.github.io/aria-practices/#tabpanel
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 -->
 <script>
   /**

package/package/components/{core → tabs}/tab-panel.svelte.d.ts

@@ -2,8 +2,9 @@
 /** @typedef {typeof __propDef.events}  TabPanelEvents */
 /** @typedef {typeof __propDef.slots}  TabPanelSlots */
 /**
+ * A tab content panel.
  * @see https://w3c.github.io/aria/#tabpanel
- * @see https://w3c.github.io/aria-practices/#tabpanel
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
 export default class TabPanel extends SvelteComponentTyped<{
     [x: string]: any;

package/package/components/{core → tabs}/tab.svelte

@@ -1,10 +1,11 @@
 <!--
   @component
+  A tab widget.
   @see https://w3c.github.io/aria/#tab
-  @see https://w3c.github.io/aria-practices/#tabpanel
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 -->
 <script>
-  import Button from './button.svelte';
+  import Button from '../button/button.svelte';
 
   /**
    * CSS class name on the button.

package/package/components/{core → tabs}/tab.svelte.d.ts

@@ -2,8 +2,9 @@
 /** @typedef {typeof __propDef.events}  TabEvents */
 /** @typedef {typeof __propDef.slots}  TabSlots */
 /**
+ * A tab widget.
  * @see https://w3c.github.io/aria/#tab
- * @see https://w3c.github.io/aria-practices/#tabpanel
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
 export default class Tab extends SvelteComponentTyped<{
     [x: string]: any;

package/package/components/{editor/markdown.svelte → text-field/markdown-editor.svelte}

@@ -1,10 +1,14 @@
+<!--
+  @component
+  A Markdown text editor.
+-->
 <script>
   import { _ } from 'svelte-i18n';
-  import Button from '../core/button.svelte';
-  import Icon from '../core/icon.svelte';
-  import Separator from '../core/separator.svelte';
-  import TextArea from '../core/text-area.svelte';
-  import Toolbar from '../core/toolbar.svelte';
+  import Button from '../button/button.svelte';
+  import Divider from '../divider/divider.svelte';
+  import Icon from '../icon/icon.svelte';
+  import Toolbar from '../toolbar/toolbar.svelte';
+  import TextArea from './text-area.svelte';
 
   /** @type {string?} */
   export let value = undefined;
@@ -46,7 +50,7 @@
   <Toolbar aria-label={$_('_sui.markdown_editor.markdown_editor')}>
     {#each defaultButtons as { label, icon, separator }}
       {#if separator}
-        <Separator />
+        <Divider />
       {:else}
         <Button {disabled}>
           <Icon slot="start-icon" name={icon} {label} />