@sveltia/ui 0.1.5 → 0.2.1

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

@@ -5,11 +5,25 @@
  * @see https://w3c.github.io/aria/#tab
  * @see https://w3c.github.io/aria-practices/#tabpanel
  */
-export default class Tab {
+export default class Tab extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'start-icon': {
+        slot: string;
+    };
+    default: {};
+    'end-icon': {
+        slot: string;
+    };
+}> {
 }
 export type TabProps = typeof __propDef.props;
 export type TabEvents = typeof __propDef.events;
 export type TabSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/core/text-area.svelte.d.ts

@@ -2,26 +2,40 @@
 /** @typedef {typeof __propDef.events}  TextAreaEvents */
 /** @typedef {typeof __propDef.slots}  TextAreaSlots */
 /** @see https://w3c.github.io/aria/#textbox */
-export default class TextArea {
+export default class TextArea extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    element?: HTMLTextAreaElement;
+    name?: string;
+    value?: string;
+    autoResize?: boolean;
+}, {
+    click: MouseEvent;
+    input: Event;
+    keypress: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
     /**accessor*/
-    set class(arg: any);
-    get class(): any;
+    set class(arg: string);
+    get class(): string;
     /**accessor*/
-    set element(arg: any);
-    get element(): any;
+    set element(arg: HTMLTextAreaElement);
+    get element(): HTMLTextAreaElement;
     /**accessor*/
-    set name(arg: any);
-    get name(): any;
+    set name(arg: string);
+    get name(): string;
     /**accessor*/
-    set value(arg: any);
-    get value(): any;
+    set value(arg: string);
+    get value(): string;
     /**accessor*/
-    set autoResize(arg: any);
-    get autoResize(): any;
+    set autoResize(arg: boolean);
+    get autoResize(): boolean;
 }
 export type TextAreaProps = typeof __propDef.props;
 export type TextAreaEvents = typeof __propDef.events;
 export type TextAreaSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -51,6 +51,7 @@
     type="text"
     {role}
     name={name || undefined}
+    tabindex={disabled ? -1 : 0}
     {readOnly}
     aria-readonly={readOnly ? true : undefined}
     {disabled}
@@ -99,7 +100,7 @@ input:focus {
   border-color: var(--primary-accent-color);
 }
 input:read-only {
-  color: var(--ternary-foreground-color);
+  color: var(--tertiary-foreground-color);
   border-color: var(--control-border-color) !important;
 }
 input:disabled {
@@ -122,7 +123,7 @@ input ~ :global(button):last-child {
   border-radius: 0 4px 4px 0;
 }
 input ~ :global(button) :global(.icon) {
-  font-size: 20px;
+  font-size: var(--font-size--xx-large);
 }
 
 .label {

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

@@ -2,32 +2,50 @@
 /** @typedef {typeof __propDef.events}  TextInputEvents */
 /** @typedef {typeof __propDef.slots}  TextInputSlots */
 /** @see https://w3c.github.io/aria/#textbox */
-export default class TextInput {
+export default class TextInput extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    element?: HTMLInputElement;
+    role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    readOnly?: boolean;
+}, {
+    input: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
     /**accessor*/
-    set class(arg: any);
-    get class(): any;
+    set class(arg: string);
+    get class(): string;
     /**accessor*/
-    set element(arg: any);
-    get element(): any;
+    set element(arg: HTMLInputElement);
+    get element(): HTMLInputElement;
     /**accessor*/
-    set role(arg: any);
-    get role(): any;
+    set role(arg: "textbox" | "searchbox" | "combobox" | "spinbutton");
+    get role(): "textbox" | "searchbox" | "combobox" | "spinbutton";
     /**accessor*/
-    set readOnly(arg: any);
-    get readOnly(): any;
+    set readOnly(arg: boolean);
+    get readOnly(): boolean;
     /**accessor*/
-    set disabled(arg: any);
-    get disabled(): any;
+    set disabled(arg: boolean);
+    get disabled(): boolean;
     /**accessor*/
-    set name(arg: any);
-    get name(): any;
+    set name(arg: string);
+    get name(): string;
     /**accessor*/
-    set value(arg: any);
-    get value(): any;
+    set value(arg: string);
+    get value(): string;
 }
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;
 export type TextInputSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/core/toolbar.svelte

@@ -42,7 +42,7 @@
   background-color: var(--secondary-background-color);
 }
 [role=toolbar].secondary {
-  background-color: var(--ternary-background-color);
+  background-color: var(--tertiary-background-color);
 }
 [role=toolbar][aria-orientation=horizontal] {
   height: var(--toolbar-size);
@@ -65,10 +65,10 @@
   gap: 8px;
   margin: 0;
   padding: 0 8px;
-  font-size: 16px;
+  font-size: var(--font-size--large);
 }
 [role=toolbar] :global(h2) :global(span) {
-  font-size: 12px;
+  font-size: var(--font-size--small);
   font-weight: normal;
   opacity: 0.8;
 }</style>

package/package/components/core/toolbar.svelte.d.ts

@@ -5,11 +5,20 @@
  * @see https://w3c.github.io/aria/#toolbar
  * @see https://w3c.github.io/aria-practices/#toolbar
  */
-export default class Toolbar {
+export default class Toolbar extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    orientation?: "horizontal" | "vertical";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type ToolbarProps = typeof __propDef.props;
 export type ToolbarEvents = typeof __propDef.events;
 export type ToolbarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/editor/markdown.svelte

@@ -65,7 +65,7 @@ div :global([role="toolbar"]) {
   gap: 8px;
   border-radius: 4px 4px 0 0;
   padding: 8px;
-  background-color: var(--ternary-background-color);
+  background-color: var(--tertiary-background-color);
 }
 div :global([role="toolbar"]) :global(button) {
   flex: none;

package/package/components/editor/markdown.svelte.d.ts

@@ -1,11 +1,17 @@
 /** @typedef {typeof __propDef.props}  MarkdownProps */
 /** @typedef {typeof __propDef.events}  MarkdownEvents */
 /** @typedef {typeof __propDef.slots}  MarkdownSlots */
-export default class Markdown {
+export default class Markdown extends SvelteComponentTyped<{
+    disabled?: boolean;
+    value?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
 }
 export type MarkdownProps = typeof __propDef.props;
 export type MarkdownEvents = typeof __propDef.events;
 export type MarkdownSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         disabled?: boolean;

package/package/components/helpers/popup.d.ts

@@ -11,8 +11,13 @@ declare class Popup {
      * @param {PopupPosition} position
      */
     constructor(anchorElement: HTMLElement, popupElement: HTMLElement, position: PopupPosition);
-    open: any;
-    style: any;
+    open: import("svelte/store").Writable<boolean>;
+    style: import("svelte/store").Writable<{
+        inset: any;
+        zIndex: any;
+        width: any;
+        height: any;
+    }>;
     observer: IntersectionObserver;
     anchorElement: HTMLElement;
     popupElement: HTMLElement;

package/package/components/helpers/popup.js

@@ -98,6 +98,17 @@ class Popup {
       }
     });
 
+    this.anchorElement.addEventListener('keydown', (event) => {
+      const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+
+      if (!ctrlKey && !metaKey && !shiftKey && !altKey) {
+        if (key === ' ' || key === 'Enter') {
+          event.stopPropagation();
+          this.open.set(!get(this.open));
+        }
+      }
+    });
+
     this.popupElement.addEventListener('click', (event) => {
       if (get(this.open) && event.target !== this.anchorElement) {
         this.open.set(false);

package/package/components/util/app-shell.svelte

@@ -41,34 +41,144 @@
 
 <style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
+:global(:root[data-theme=light]) {
+  --foreground-color-1-hsl: var(--base-hue) 5% 0%;
+  --foreground-color-2-hsl: var(--base-hue) 5% 20%;
+  --foreground-color-3-hsl: var(--base-hue) 5% 40%;
+  --foreground-color-4-hsl: var(--base-hue) 5% 60%;
+  --border-color-1-hsl: var(--base-hue) 5% 75%;
+  --border-color-2-hsl: var(--base-hue) 5% 80%;
+  --background-color-1-hsl: var(--base-hue) 5% 100%;
+  --background-color-2-hsl: var(--base-hue) 5% 98%;
+  --background-color-3-hsl: var(--base-hue) 5% 94%;
+  --background-color-4-hsl: var(--base-hue) 5% 90%;
+  --background-color-5-hsl: var(--base-hue) 5% 86%;
+  --shadow-color: var(--base-hue) 10% 0%;
+  --primary-accent-color: hsl(var(--base-hue) 80% 45%);
+  --primary-accent-color-lighter: hsl(var(--base-hue) 80% 40%);
+  --primary-accent-color-darker: hsl(var(--base-hue) 80% 50%);
+  --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%);
+  --danger-color-hue: 0;
+  --warning-color-hue: 40;
+  --success-color-hue: 100;
+  --info-color-hue: 220;
+  --alert-foreground-color-saturation: 88%;
+  --alert-foreground-color-lightness: 28%;
+  --alert-background-color-saturation: 68%;
+  --alert-background-color-lightness: 88%;
+  --alert-border-color-saturation: 48%;
+  --alert-border-color-lightness: 68%;
+}
+
+:global(:root[data-theme=dark]) {
+  --foreground-color-1-hsl: var(--base-hue) 10% 100%;
+  --foreground-color-2-hsl: var(--base-hue) 10% 80%;
+  --foreground-color-3-hsl: var(--base-hue) 10% 60%;
+  --foreground-color-4-hsl: var(--base-hue) 10% 40%;
+  --border-color-1-hsl: var(--base-hue) 10% 25%;
+  --border-color-2-hsl: var(--base-hue) 10% 20%;
+  --background-color-1-hsl: var(--base-hue) 10% 10%;
+  --background-color-2-hsl: var(--base-hue) 10% 12%;
+  --background-color-3-hsl: var(--base-hue) 10% 16%;
+  --background-color-4-hsl: var(--base-hue) 10% 20%;
+  --background-color-5-hsl: var(--base-hue) 10% 24%;
+  --shadow-color: var(--base-hue) 10% 0%;
+  --primary-accent-color: hsl(var(--base-hue) 100% 45%);
+  --primary-accent-color-lighter: hsl(var(--base-hue) 100% 55%);
+  --primary-accent-color-darker: hsl(var(--base-hue) 100% 35%);
+  --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%);
+  --danger-color-hue: 0;
+  --warning-color-hue: 40;
+  --success-color-hue: 100;
+  --info-color-hue: 220;
+  --alert-foreground-color-saturation: 48%;
+  --alert-foreground-color-lightness: 68%;
+  --alert-background-color-saturation: 88%;
+  --alert-background-color-lightness: 8%;
+  --alert-border-color-saturation: 38%;
+  --alert-border-color-lightness: 18%;
+}
+
 :global(:root) {
-  --hue: 210;
+  --base-hue: 210;
   --highlight-foreground-color: hsl(var(--foreground-color-1-hsl));
   --primary-foreground-color: hsl(var(--foreground-color-2-hsl));
   --secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
-  --ternary-foreground-color: hsl(var(--foreground-color-3-hsl));
+  --tertiary-foreground-color: hsl(var(--foreground-color-3-hsl));
   --disabled-foreground-color: hsl(var(--foreground-color-4-hsl));
-  --danger-foreground-color: hsl(var(--danger-color));
+  --danger-foreground-color: hsl(
+    var(--danger-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
+  --warning-foreground-color: hsl(
+    var(--warning-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
+  --success-foreground-color: hsl(
+    var(--success-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
+  --info-foreground-color: hsl(
+    var(--info-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
   --highlight-background-color: hsl(var(--background-color-5-hsl));
   --content-background-color: hsl(var(--background-color-1-hsl));
   --primary-background-color: hsl(var(--background-color-2-hsl));
+  --primary-background-color-translucent: hsl(var(--background-color-2-hsl) / 80%);
   --secondary-background-color: hsl(var(--background-color-3-hsl));
-  --secondary-background-color-translucent: hsl(var(--background-color-3-hsl) / 88%);
-  --ternary-background-color: hsl(var(--background-color-4-hsl));
+  --secondary-background-color-translucent: hsl(var(--background-color-3-hsl) / 80%);
+  --tertiary-background-color: hsl(var(--background-color-4-hsl));
+  --tertiary-background-color-translucent: hsl(var(--background-color-4-hsl) / 80%);
   --control-background-color: hsl(var(--background-color-1-hsl));
   --disabled-background-color: hsl(var(--background-color-4-hsl));
-  --danger-background-color: hsl(var(--danger-color));
+  --danger-background-color: hsl(
+    var(--danger-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
+  --warning-background-color: hsl(
+    var(--warning-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
+  --success-background-color: hsl(
+    var(--success-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
+  --info-background-color: hsl(
+    var(--info-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
   --primary-border-color: hsl(var(--border-color-1-hsl));
   --secondary-border-color: hsl(var(--border-color-2-hsl));
   --control-border-color: hsl(var(--border-color-2-hsl));
+  --danger-border-color: hsl(
+    var(--danger-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  );
+  --warning-border-color: hsl(
+    var(--warning-color-hue) var(--alert-border-color-saturation)
+      var(--alert-border-color-lightness)
+  );
+  --success-border-color: hsl(
+    var(--success-color-hue) var(--alert-border-color-saturation)
+      var(--alert-border-color-lightness)
+  );
+  --info-border-color: hsl(
+    var(--info-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  );
   --popup-shadow-color: hsl(var(--shadow-color) / 40%);
   --popup-backdrop-color: hsl(var(--shadow-color) / 40%);
-  --default-font-family: "Merriweather Sans", sans-serif;
-  --default-font-size: 13px;
-  --default-font-weight-regular: 300;
-  --default-font-weight-bold: 600;
-  --monospace-font-family: "Noto Sans Mono", monospace;
-  --monospace-font-size: 13px;
+  --font-family--default: "Merriweather Sans", sans-serif;
+  --font-size--xxx-large: 24px;
+  --font-size--xx-large: 20px;
+  --font-size--x-large: 18px;
+  --font-size--large: 16px;
+  --font-size--default: 14px;
+  --font-size--small: 12px;
+  --font-size--x-small: 10px;
+  --font-weight--normal: 300;
+  --font-weight--bold: 600;
+  --font-family--monospace: "Noto Sans Mono", monospace;
+  --font-size--monospace: 13px;
   --control--small--border-width: 1px;
   --control--small--border-radius: 2px;
   --control--small--height: 24px;
@@ -101,46 +211,6 @@
   --tab--large--height: var(--control--large--height);
 }
 
-:global(:root[data-theme=light]) {
-  --foreground-color-1-hsl: var(--hue) 5% 0%;
-  --foreground-color-2-hsl: var(--hue) 5% 20%;
-  --foreground-color-3-hsl: var(--hue) 5% 40%;
-  --foreground-color-4-hsl: var(--hue) 5% 60%;
-  --border-color-1-hsl: var(--hue) 5% 75%;
-  --border-color-2-hsl: var(--hue) 5% 80%;
-  --background-color-1-hsl: var(--hue) 5% 100%;
-  --background-color-2-hsl: var(--hue) 5% 98%;
-  --background-color-3-hsl: var(--hue) 5% 96%;
-  --background-color-4-hsl: var(--hue) 5% 94%;
-  --background-color-5-hsl: var(--hue) 5% 80%;
-  --shadow-color: var(--hue) 10% 0%;
-  --primary-accent-color: hsl(var(--hue) 80% 45%);
-  --primary-accent-color-lighter: hsl(var(--hue) 80% 40%);
-  --primary-accent-color-darker: hsl(var(--hue) 80% 50%);
-  --primary-accent-color-foreground: hsl(var(--hue) 10% 100%);
-  --danger-color: 0 68% 42%;
-}
-
-:global(:root[data-theme=dark]) {
-  --foreground-color-1-hsl: var(--hue) 10% 100%;
-  --foreground-color-2-hsl: var(--hue) 10% 80%;
-  --foreground-color-3-hsl: var(--hue) 10% 60%;
-  --foreground-color-4-hsl: var(--hue) 10% 40%;
-  --border-color-1-hsl: var(--hue) 10% 25%;
-  --border-color-2-hsl: var(--hue) 10% 20%;
-  --background-color-1-hsl: var(--hue) 10% 8%;
-  --background-color-2-hsl: var(--hue) 10% 10%;
-  --background-color-3-hsl: var(--hue) 10% 12%;
-  --background-color-4-hsl: var(--hue) 10% 14%;
-  --background-color-5-hsl: var(--hue) 10% 18%;
-  --shadow-color: var(--hue) 10% 0%;
-  --primary-accent-color: hsl(var(--hue) 100% 45%);
-  --primary-accent-color-lighter: hsl(var(--hue) 100% 50%);
-  --primary-accent-color-darker: hsl(var(--hue) 100% 40%);
-  --primary-accent-color-foreground: hsl(var(--hue) 10% 100%);
-  --danger-color: 0 68% 42%;
-}
-
 :global(.material-symbols-outlined) {
   font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
 }
@@ -171,11 +241,11 @@
 :global(h5),
 :global(h6) {
   margin: 0;
-  font-weight: var(--default-font-weight-bold);
+  font-weight: var(--font-weight--bold);
 }
 
 :global(strong) {
-  font-weight: var(--default-font-weight-bold);
+  font-weight: var(--font-weight--bold);
 }
 
 :global(a) {
@@ -217,7 +287,7 @@
 
 :global(code),
 :global(pre) {
-  font-family: var(--monospace-font-family);
+  font-family: var(--font-family--monospace);
 }
 
 :global(pre) {
@@ -273,9 +343,9 @@
   height: 100%;
   color: var(--primary-foreground-color);
   background-color: var(--primary-background-color);
-  font-family: var(--default-font-family);
-  font-size: var(--default-font-size);
-  font-weight: var(--default-font-weight-regular);
+  font-family: var(--font-family--default);
+  font-size: var(--font-size--default);
+  font-weight: var(--font-weight--normal);
   -webkit-user-select: none;
   user-select: none;
   touch-action: none;

package/package/components/util/app-shell.svelte.d.ts

@@ -6,11 +6,21 @@
  * dark/light mode switching. This component has to be placed directly under `<body>` (or
  * `<div style="display:contents">` in a SvelteKit app).
  */
-export default class AppShell {
+export default class AppShell extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    dragover: DragEvent;
+    drop: DragEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type AppShellProps = typeof __propDef.props;
 export type AppShellEvents = typeof __propDef.events;
 export type AppShellSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: never;

package/package/components/util/popup.svelte

@@ -18,6 +18,12 @@
    */
   export let dialog = undefined;
 
+  /**
+   * Reference to the content element.
+   * @type {(HTMLElement|undefined)}
+   */
+  export let content = undefined;
+
   /**
    * Where to show the dropdown menu.
    * @type {PopupPosition}
@@ -29,7 +35,6 @@
   let showDialog = false;
   let showContent = false;
   let contentType;
-  let closeDialogTimer = 0;
 
   let style = writable({
     inset: undefined,
@@ -46,27 +51,32 @@
   }
 
   const openDialog = () => {
-    window.clearTimeout(closeDialogTimer);
     (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
     showContent = true;
     dialog.showModal();
 
     window.requestAnimationFrame(() => {
       showDialog = true;
+
+      window.requestAnimationFrame(() => {
+        (dialog.querySelector('[tabindex]') || dialog).focus();
+      });
     });
   };
 
-  const closeDialog = () => {
+  const closeDialog = async () => {
     showDialog = false;
 
-    closeDialogTimer = window.setTimeout(() => {
-      showContent = false;
-      dialog?.close();
-      dialog?.remove();
-    }, 500);
+    await new Promise((resolve) => {
+      content.addEventListener('transitionend', () => resolve(), { once: true });
+    });
+
+    showContent = false;
+    dialog?.close();
+    dialog?.remove();
   };
 
-  $: {
+  const toggleDialog = () => {
     if (dialog) {
       if ($open) {
         openDialog();
@@ -74,7 +84,10 @@
         closeDialog();
       }
     }
-  }
+  };
+
+  // Call the function only when the `$open` prop is changed
+  $: toggleDialog($open);
 
   onMount(() => {
     dialog.remove();
@@ -88,11 +101,8 @@
 </script>
 
 <dialog class="sui popup" bind:this={dialog} class:open={showDialog} {...$$restProps}>
-  <!-- Prevent the first item in the slot, e.g. a menu item, from being focused by adding `tabindex`
-    to the container -->
-  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div
-    tabindex="0"
+    bind:this={content}
     class="content {contentType}"
     style:inset={$style.inset}
     style:z-index={$style.zIndex}