@sveltia/ui 0.7.4 → 0.8.0

package/package/components/drawer/drawer.svelte.d.ts

@@ -13,13 +13,15 @@ export default class Drawer extends SvelteComponent<{
     size?: "small" | "medium" | "large" | "x-large";
     position?: "top" | "right" | "bottom" | "left";
     open?: boolean;
-    showClose?: false | "inside" | "outside";
-    closeOnBackdropClick?: boolean;
+    lightDismiss?: boolean;
     keepContent?: boolean;
+    showClose?: false | "inside" | "outside";
 }, {
-    submit: SubmitEvent;
+    opening: CustomEvent<any>;
+    open: CustomEvent<any>;
     ok: CustomEvent<any>;
     cancel: CustomEvent<any>;
+    closing: CustomEvent<any>;
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -39,17 +41,19 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         title?: string;
-        size?: ('small' | 'medium' | 'large' | 'x-large');
-        position?: ('top' | 'right' | 'bottom' | 'left');
+        size?: 'small' | 'medium' | 'large' | 'x-large';
+        position?: 'top' | 'right' | 'bottom' | 'left';
         open?: boolean;
-        showClose?: ('inside' | 'outside' | false);
-        closeOnBackdropClick?: boolean;
+        lightDismiss?: boolean;
         keepContent?: boolean;
+        showClose?: 'inside' | 'outside' | false;
     };
     events: {
-        submit: SubmitEvent;
+        opening: CustomEvent<any>;
+        open: CustomEvent<any>;
         ok: CustomEvent<any>;
         cancel: CustomEvent<any>;
+        closing: CustomEvent<any>;
         close: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/grid/grid-body.svelte

@@ -0,0 +1,51 @@
+<!--
+  @component
+  The interactive version of `<TableBody>`.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
+  @see https://w3c.github.io/aria/#rowgroup
+-->
+<script>
+  import { getRandomId } from '../../services/util';
+
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+
+  /**
+   * Display label for the row group.
+   * @type {string}
+   */
+  export let label = '';
+
+  const id = getRandomId('tbody');
+</script>
+
+<div
+  role="rowgroup"
+  class="sui grid-body row-group {className}"
+  aria-labelledby={label ? `${id}-label` : undefined}
+  aria-roledescription="grid body"
+  {...$$restProps}
+>
+  {#if label}
+    <tr class="row-group-caption">
+      <th id="{id}-label" colspan="9999" scope="rowgroup">{label}</th>
+    </tr>
+  {/if}
+  <slot />
+</div>
+
+<style>.grid-body {
+  display: table-row-group;
+}
+
+th {
+  padding: 8px;
+  color: var(--sui-secondary-foreground-color);
+  background-color: var(--sui-secondary-background-color);
+  font-size: var(--sui-font-size-default);
+  text-align: left;
+}</style>

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

@@ -0,0 +1,36 @@
+/** @typedef {typeof __propDef.props}  GridBodyProps */
+/** @typedef {typeof __propDef.events}  GridBodyEvents */
+/** @typedef {typeof __propDef.slots}  GridBodySlots */
+/**
+ * The interactive version of `<TableBody>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
+ * @see https://w3c.github.io/aria/#rowgroup
+ */
+export default class GridBody extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+    label?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridBodyProps = typeof __propDef.props;
+export type GridBodyEvents = typeof __propDef.events;
+export type GridBodySlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        label?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/grid/grid-cell.svelte

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

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  GridCellProps */
+/** @typedef {typeof __propDef.events}  GridCellEvents */
+/** @typedef {typeof __propDef.slots}  GridCellSlots */
+/**
+ * The interactive version of `<TableCell>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
+ * @see https://w3c.github.io/aria/#gridcell
+ */
+export default class GridCell extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridCellProps = typeof __propDef.props;
+export type GridCellEvents = typeof __propDef.events;
+export type GridCellSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/grid/grid-col-header.svelte

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

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  GridColHeaderProps */
+/** @typedef {typeof __propDef.events}  GridColHeaderEvents */
+/** @typedef {typeof __propDef.slots}  GridColHeaderSlots */
+/**
+ * The interactive version of `<TableColHeader>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+ * @see https://w3c.github.io/aria/#columnheader
+ */
+export default class GridColHeader extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridColHeaderProps = typeof __propDef.props;
+export type GridColHeaderEvents = typeof __propDef.events;
+export type GridColHeaderSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/grid/grid-foot.svelte

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

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  GridFootProps */
+/** @typedef {typeof __propDef.events}  GridFootEvents */
+/** @typedef {typeof __propDef.slots}  GridFootSlots */
+/**
+ * The interactive version of `<TableFoot>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
+ * @see https://w3c.github.io/aria/#rowgroup
+ */
+export default class GridFoot extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridFootProps = typeof __propDef.props;
+export type GridFootEvents = typeof __propDef.events;
+export type GridFootSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/grid/grid-head.svelte

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

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  GridHeadProps */
+/** @typedef {typeof __propDef.events}  GridHeadEvents */
+/** @typedef {typeof __propDef.slots}  GridHeadSlots */
+/**
+ * The interactive version of `<TableThead>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
+ * @see https://w3c.github.io/aria/#rowgroup
+ */
+export default class GridHead extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridHeadProps = typeof __propDef.props;
+export type GridHeadEvents = typeof __propDef.events;
+export type GridHeadSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/grid/grid-row-header.svelte

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

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  GridRowHeaderProps */
+/** @typedef {typeof __propDef.events}  GridRowHeaderEvents */
+/** @typedef {typeof __propDef.slots}  GridRowHeaderSlots */
+/**
+ * The interactive version of `<TableRowHeader>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+ * @see https://w3c.github.io/aria/#rowheader
+ */
+export default class GridRowHeader extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridRowHeaderProps = typeof __propDef.props;
+export type GridRowHeaderEvents = typeof __propDef.events;
+export type GridRowHeaderSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/grid/grid-row.svelte

@@ -0,0 +1,37 @@
+<!--
+  @component
+  The interactive version of `<TableRow>`.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+  @see https://w3c.github.io/aria/#row
+-->
+<script>
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+  /**
+   * Whether to select the widget. An alias of the `aria-selected` attribute.
+   * @type {boolean}
+   */
+  export let selected = false;
+</script>
+
+<div
+  role="row"
+  class="sui grid-row {className}"
+  tabindex="0"
+  aria-selected={selected}
+  {...$$restProps}
+  on:click
+  on:select
+  on:change
+>
+  <slot />
+</div>
+
+<style>.grid-row {
+  display: table-row;
+  height: var(--sui-primary-row-height);
+}</style>

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

@@ -0,0 +1,44 @@
+/** @typedef {typeof __propDef.props}  GridRowProps */
+/** @typedef {typeof __propDef.events}  GridRowEvents */
+/** @typedef {typeof __propDef.slots}  GridRowSlots */
+/**
+ * The interactive version of `<TableRow>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+ * @see https://w3c.github.io/aria/#row
+ */
+export default class GridRow extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+    selected?: boolean;
+}, {
+    click: MouseEvent;
+    select: Event;
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridRowProps = typeof __propDef.props;
+export type GridRowEvents = typeof __propDef.events;
+export type GridRowSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        selected?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+        select: Event;
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/grid/grid.svelte

@@ -0,0 +1,52 @@
+<!--
+  @component
+  The interactive version of `<Table>`.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
+  @see https://w3c.github.io/aria/#grid
+-->
+<script>
+  import { activateGroup } from '../../services/group';
+
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+  /**
+   * Whether to allow selecting more than one `<GridRow>` and/or `<GridCell>`. An alias of the
+   * `aria-multiselectable` attribute.
+   * @type {boolean}
+   */
+  export let multiple = false;
+
+  /** @type {HTMLElement?} */
+  export let element = undefined;
+</script>
+
+<div
+  role="grid"
+  class="sui grid {className}"
+  aria-multiselectable={multiple}
+  {...$$restProps}
+  bind:this={element}
+  use:activateGroup
+  on:change
+>
+  <slot />
+</div>
+
+<style>.grid {
+  display: table;
+  margin: var(--sui-focus-ring-width);
+  width: calc(100% - var(--sui-focus-ring-width) * 2);
+}
+.grid:global(.data) {
+  border-collapse: collapse;
+}
+.grid:global(.data) :global(.grid-col-header),
+.grid:global(.data) :global(.grid-row-header),
+.grid:global(.data) :global(.grid-cell) {
+  border: 1px solid var(--sui-secondary-border-color);
+  padding: 8px 8px;
+}</style>

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

@@ -0,0 +1,42 @@
+/** @typedef {typeof __propDef.props}  GridProps */
+/** @typedef {typeof __propDef.events}  GridEvents */
+/** @typedef {typeof __propDef.slots}  GridSlots */
+/**
+ * The interactive version of `<Table>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
+ * @see https://w3c.github.io/aria/#grid
+ */
+export default class Grid extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+    multiple?: boolean;
+    element?: HTMLElement;
+}, {
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridProps = typeof __propDef.props;
+export type GridEvents = typeof __propDef.events;
+export type GridSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        multiple?: boolean;
+        element?: HTMLElement | null;
+    };
+    events: {
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/icon/icon.svelte

@@ -5,22 +5,21 @@
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the `span` element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
+  /**
+   * Icon name, e.g. `search`, `expand_more`, `close`, etc.
+   * @type {string}
+   */
   export let name = '';
-
-  export let label = '';
 </script>
 
 <span
   class="sui icon material-symbols-outlined {className}"
-  aria-label={label || undefined}
-  aria-hidden={label ? undefined : true}
+  aria-hidden={!('aria-label' in $$restProps)}
   {...$$restProps}
 >
   {name}

package/package/components/icon/icon.svelte.d.ts

@@ -9,7 +9,6 @@ export default class Icon extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     name?: string;
-    label?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -23,7 +22,6 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         name?: string;
-        label?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;