@sveltia/ui 0.9.0 → 0.10.1

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

@@ -5,6 +5,7 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 -->
 <script>
+  import { createEventDispatcher, onMount } from 'svelte';
   import { activateGroup } from '../../services/group';
 
   /**
@@ -33,6 +34,56 @@
    * @type {string | undefined}
    */
   export let name = undefined;
+
+  const dispatch = createEventDispatcher();
+  /**
+   * A reference to the wrapper element.
+   * @type {HTMLElement | undefined}
+   */
+  let wrapper = undefined;
+  /**
+   * The indicator’s CSS style.
+   * @type {string | undefined}
+   */
+  let indicatorStyle = undefined;
+
+  /**
+   * Update the indicator position.
+   */
+  const updateIndicator = () => {
+    window.requestAnimationFrame(() => {
+      const selected = /** @type {HTMLElement | null} */ (
+        wrapper?.querySelector('[role="tab"][aria-selected="true"]')
+      );
+
+      if (selected) {
+        const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = selected;
+
+        indicatorStyle = Object.entries({
+          top: offsetTop,
+          left: offsetLeft,
+          width: offsetWidth,
+          height: offsetHeight,
+        })
+          .map(([key, value]) => `${key}: ${value}px`)
+          .join('; ');
+      } else {
+        indicatorStyle = undefined;
+      }
+    });
+  };
+
+  onMount(() => {
+    const observer = new ResizeObserver(() => {
+      updateIndicator();
+    });
+
+    observer.observe(/** @type {HTMLElement} */ (wrapper));
+
+    return () => {
+      observer.disconnect();
+    };
+  });
 </script>
 
 <div
@@ -44,53 +95,85 @@
   aria-orientation={orientation}
   data-name={name || undefined}
   {...$$restProps}
+  bind:this={wrapper}
   use:activateGroup
-  on:change
+  on:initialized={() => {
+    updateIndicator();
+  }}
+  on:change={(/** @type {CustomEvent} */ event) => {
+    dispatch('change', event.detail);
+    updateIndicator();
+  }}
 >
   <div role="none" class="inner" inert={disabled}>
     <slot />
   </div>
+  <div role="none" class="indicator" style={indicatorStyle} />
 </div>
 
 <style>.tab-list {
+  flex: none;
+  position: relative;
   display: flex;
   align-items: center;
-  margin: var(--sui-focus-ring-width);
-  border-color: var(--sui-control-border-color);
+  margin: var(--sui-tab-list-margin, var(--sui-focus-ring-width));
+  border-color: var(--sui-tab-list-border-color, var(--sui-control-border-color));
+  border-radius: var(--sui-tab-list-border-radius, 0);
+  background-color: var(--sui-tab-list-background-color, transparent);
 }
 .tab-list[aria-orientation=horizontal] {
-  gap: 8px;
-  margin-bottom: 32px;
-  border-width: 0 0 1px;
-  padding: 0 16px;
+  gap: var(--sui-horizontal-tab-list-gap, var(--sui-tab-list-gap, 8px));
+  margin: var(--sui-horizontal-tab-list-margin, var(--sui-tab-list-margin, 0 0 32px));
+  border-width: var(--sui-horizontal-tab-list-border-width, var(--sui-tab-list-border-width, 0 0 1px));
+  padding: var(--sui-horizontal-tab-list-padding, var(--sui-tab-list-padding, 0 16px));
 }
 .tab-list[aria-orientation=horizontal] :global(button) {
-  border-width: 0 0 2px 0;
+  width: var(--sui-horizontal-tab-width, var(--sui-tab-width, auto));
+  height: var(--sui-horizontal-tab-height, var(--sui-tab-height, 100%));
+  justify-content: var(--sui-horizontal-tab-justify-content, center);
+}
+.tab-list[aria-orientation=horizontal] .indicator {
+  border-width: var(--sui-horizontal-tab-list-indicator-border-width, var(--sui-tab-list-indicator-border-width, 0 0 2px 0));
 }
 .tab-list[aria-orientation=vertical] {
-  gap: 8px;
+  gap: var(--sui-vertical-tab-list-gap, var(--sui-tab-list-gap, 8px));
   flex-direction: column;
-  margin-right: 32px;
-  border-width: 0 1px 0 0;
-  padding: 8px 0;
-  width: 240px;
+  margin: var(--sui-vertical-tab-list-margin, var(--sui-tab-list-margin, 0 32px 0 0));
+  border-width: var(--sui-vertical-tab-list-border-width, var(--sui-tab-list-border-width, 0 1px 0 0));
+  padding: var(--sui-vertical-tab-list-padding, var(--sui-tab-list-padding, 8px 0));
+  width: var(--sui-vertical-tab-list-width, 240px);
 }
 .tab-list[aria-orientation=vertical] :global(button) {
-  border-width: 0 2px 0 0;
-  width: 100%;
+  justify-content: var(--sui-vertical-tab-justify-content, flex-start);
+  width: var(--sui-vertical-tab-width, var(--sui-tab-width, 100%));
+  height: var(--sui-vertical-tab-height, var(--sui-tab-height, auto));
+}
+.tab-list[aria-orientation=vertical] .indicator {
+  border-width: var(--sui-horizontal-tab-list-vertical-border-width, var(--sui-tab-list-indicator-border-width, 0 2px 0 0));
 }
 .tab-list :global(button) {
-  justify-content: flex-start;
+  position: relative;
+  z-index: 1;
   border-color: transparent;
   margin: 0 !important;
-  padding: 0;
-  border-radius: 0;
-  height: var(--sui-tab-medium-height);
-}
-.tab-list :global(button[aria-selected="true"]) {
-  border-color: var(--sui-primary-accent-color-light);
+  border-radius: var(--sui-tab-border-radius, 0);
+  font-family: var(--sui-tab-font-family, var(--sui-control-font-family, inherit));
+  font-size: var(--sui-tab-font-size, var(--sui-control-font-size, inherit));
+  font-weight: var(--sui-tab-font-weight, var(--sui-control-font-weight, inherit));
 }
 
 .inner {
   display: contents;
+}
+
+.indicator {
+  position: absolute;
+  z-index: 0;
+  inset: auto;
+  border-radius: var(--sui-tab-list-indicator-border-radius, 0);
+  border-color: var(--sui-tab-list-indicator-border-color, var(--sui-primary-accent-color-light));
+  background-color: var(--sui-tab-list-indicator-background-color, transparent);
+  box-shadow: var(--sui-tab-list-indicator-box-shadow, none);
+  pointer-events: none;
+  transition: var(--sui-tab-list-indicator-transition, all 200ms);
 }</style>

package/package/components/tabs/tab-list.svelte.d.ts

@@ -8,13 +8,13 @@
  */
 export default class TabList extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    name?: string;
-    disabled?: boolean;
-    hidden?: boolean;
-    orientation?: "vertical" | "horizontal";
+    class?: string | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
 }, {
-    change: Event;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -28,14 +28,14 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
         name?: string | undefined;
-        disabled?: boolean;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
-        orientation?: 'horizontal' | 'vertical';
+        orientation?: "vertical" | "horizontal" | undefined;
     };
     events: {
-        change: Event;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/tabs/tab-panel.svelte

@@ -13,10 +13,14 @@
   export { className as class };
 </script>
 
-<div role="tabpanel" class="sui tabpanel {className}" {...$$restProps}>
+<div role="tabpanel" class="sui tab-panel {className}" {...$$restProps}>
   <slot />
 </div>
 
-<style>.tabpanel[aria-hidden=true], .tabpanel:not([aria-hidden]) {
+<style>.tab-panel {
+  flex: auto;
+  transition: all 200ms;
+}
+.tab-panel[aria-hidden=true], .tab-panel:not([aria-hidden]) {
   display: none;
 }</style>

package/package/components/tabs/tab-panel.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class TabPanel extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,7 +22,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/tabs/tab-panels.svelte

@@ -0,0 +1,32 @@
+<!--
+  @component
+  The container of `<TabPanel>`s. The component name derives from XUL. This can be omitted if the
+  child tab panels don’t need a sliding animation.
+-->
+<script>
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+</script>
+
+<div role="none" class="sui tab-panels {className}">
+  <slot />
+</div>
+
+<style>.tab-panels {
+  flex: auto;
+  display: flex;
+  gap: var(--sui-tab-panels-gap, 16px);
+  overflow: hidden;
+  scroll-snap-type: x mandatory;
+}
+.tab-panels > :global(.tab-panel) {
+  flex: none;
+  display: block !important;
+  width: 100%;
+  overflow: auto;
+  scroll-snap-align: center;
+}</style>

package/package/components/tabs/tab-panels.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  TabPanelsProps */
+/** @typedef {typeof __propDef.events}  TabPanelsEvents */
+/** @typedef {typeof __propDef.slots}  TabPanelsSlots */
+/**
+ * The container of `<TabPanel>`s. The component name derives from XUL. This can be omitted if the
+ * child tab panels don’t need a sliding animation.
+ */
+export default class TabPanels extends SvelteComponent<{
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TabPanelsProps = typeof __propDef.props;
+export type TabPanelsEvents = typeof __propDef.events;
+export type TabPanelsSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -8,13 +8,13 @@
  */
 export default class Tab extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    disabled?: boolean;
-    hidden?: boolean;
-    selected?: boolean;
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
+    selected?: boolean | undefined;
 }, {
-    select: Event;
-    change: Event;
+    select: CustomEvent<any>;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -34,14 +34,14 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        disabled?: boolean;
+        class?: string | undefined;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
-        selected?: boolean;
+        selected?: boolean | undefined;
     };
     events: {
-        select: Event;
-        change: Event;
+        select: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/text-field/markdown-editor.svelte.d.ts

@@ -4,13 +4,13 @@
 /** A Markdown text editor. */
 export default class MarkdownEditor extends SvelteComponent<{
     [x: string]: any;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    value?: string;
-    hidden?: boolean;
-    readonly?: boolean;
-    flex?: boolean;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    value?: string | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
+    flex?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -22,13 +22,13 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        invalid?: boolean;
-        disabled?: boolean;
-        required?: boolean;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
-        readonly?: boolean;
-        flex?: boolean;
+        readonly?: boolean | undefined;
+        flex?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/text-field/number-input.svelte

@@ -85,7 +85,7 @@
   let component;
 
   /**
-   *
+   * Decrease the number.
    */
   const decrease = () => {
     if (isMin) {
@@ -96,7 +96,7 @@
   };
 
   /**
-   *
+   * Increase the number.
    */
   const increase = () => {
     if (isMax) {
@@ -125,7 +125,9 @@
         increase();
       }}
     >
-      <Icon slot="start-icon" name="expand_less" />
+      <slot name="increase-icon" slot="start-icon">
+        <Icon name="expand_less" />
+      </slot>
     </Button>
     <Button
       iconic
@@ -136,7 +138,9 @@
         decrease();
       }}
     >
-      <Icon slot="start-icon" name="expand_more" />
+      <slot name="decrease-icon" slot="start-icon">
+        <Icon name="expand_more" />
+      </slot>
     </Button>
   </div>
   <TextInput
@@ -174,8 +178,11 @@
         edited = true;
       }
     }}
+    on:keydown
+    on:keyup
     on:keypress
     on:input
+    on:change
   />
 </div>
 

package/package/components/text-field/number-input.svelte.d.ts

@@ -8,23 +8,33 @@
  */
 export default class NumberInput extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    max?: number;
-    min?: number;
-    required?: boolean;
-    step?: number;
-    value?: string;
-    hidden?: boolean;
-    readonly?: boolean;
-    flex?: boolean;
+    class?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    max?: number | undefined;
+    min?: number | undefined;
+    required?: boolean | undefined;
+    step?: number | undefined;
+    value?: string | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
+    flex?: boolean | undefined;
 }, {
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
     keypress: KeyboardEvent;
     input: Event;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}> {
+}, {
+    'increase-icon': {
+        slot: string;
+    };
+    'decrease-icon': {
+        slot: string;
+    };
+}> {
 }
 export type NumberInputProps = typeof __propDef.props;
 export type NumberInputEvents = typeof __propDef.events;
@@ -33,24 +43,34 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        invalid?: boolean;
-        disabled?: boolean;
+        class?: string | undefined;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
         max?: number | undefined;
         min?: number | undefined;
-        required?: boolean;
-        step?: number;
+        required?: boolean | undefined;
+        step?: number | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
-        readonly?: boolean;
-        flex?: boolean;
+        readonly?: boolean | undefined;
+        flex?: boolean | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
         keypress: KeyboardEvent;
         input: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        'increase-icon': {
+            slot: string;
+        };
+        'decrease-icon': {
+            slot: string;
+        };
+    };
 };
 export {};

package/package/components/text-field/password-input.svelte

@@ -64,7 +64,7 @@
 
   $: {
     if (inputComponent) {
-      inputComponent.element.setAttribute('type', passwordVisible ? 'text' : 'password');
+      inputComponent.element?.setAttribute('type', passwordVisible ? 'text' : 'password');
     }
   }
 </script>
@@ -90,8 +90,10 @@
     {invalid}
     {...$$restProps}
     bind:this={inputComponent}
-    on:input
+    on:keydown
+    on:keyup
     on:keypress
+    on:input
     on:change
   />
   <Button
@@ -106,7 +108,9 @@
       passwordVisible = !passwordVisible;
     }}
   >
-    <Icon slot="start-icon" name={passwordVisible ? 'visibility_off' : 'visibility'} />
+    <slot name="visibility-icon" slot="start-icon">
+      <Icon name={passwordVisible ? 'visibility_off' : 'visibility'} />
+    </slot>
   </Button>
 </div>
 

package/package/components/text-field/password-input.svelte.d.ts

@@ -9,21 +9,27 @@
  */
 export default class PasswordInput extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    value?: string;
-    hidden?: boolean;
-    readonly?: boolean;
-    flex?: boolean;
+    class?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    value?: string | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
+    flex?: boolean | undefined;
 }, {
-    input: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
     keypress: KeyboardEvent;
+    input: Event;
     change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}> {
+}, {
+    'visibility-icon': {
+        slot: string;
+    };
+}> {
 }
 export type PasswordInputProps = typeof __propDef.props;
 export type PasswordInputEvents = typeof __propDef.events;
@@ -32,22 +38,28 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        invalid?: boolean;
-        disabled?: boolean;
-        required?: boolean;
+        class?: string | undefined;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
-        readonly?: boolean;
-        flex?: boolean;
+        readonly?: boolean | undefined;
+        flex?: boolean | undefined;
     };
     events: {
-        input: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
         keypress: KeyboardEvent;
+        input: Event;
         change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        'visibility-icon': {
+            slot: string;
+        };
+    };
 };
 export {};

package/package/components/text-field/search-bar.svelte

@@ -83,7 +83,9 @@
   aria-hidden={hidden}
 >
   <span role="none">
-    <Icon name="search" />
+    <slot name="search-icon">
+      <Icon name="search" />
+    </slot>
   </span>
   <TextInput
     role="searchbox"
@@ -98,10 +100,10 @@
     inputmode="search"
     {...$$restProps}
     bind:this={inputComponent}
-    on:input
     on:keydown
     on:keyup
     on:keypress
+    on:input
     on:change
   />
   {#if value}
@@ -119,7 +121,9 @@
         });
       }}
     >
-      <Icon slot="start-icon" name="close" />
+      <slot name="close-button" slot="start-icon">
+        <Icon name="close" />
+      </slot>
     </Button>
   {/if}
 </div>