@sveltia/ui 0.1.2 → 0.1.4

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

@@ -5,25 +5,15 @@
  * @see https://w3c.github.io/aria/#switch
  * @see https://w3c.github.io/aria-practices/#switch
  */
-export default class Switch extends SvelteComponentTyped<{
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-    checked?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Switch {
 }
 export type SwitchProps = typeof __propDef.props;
 export type SwitchEvents = typeof __propDef.events;
 export type SwitchSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        class?: string;
         label?: string;
+        class?: string;
         disabled?: boolean;
         checked?: boolean;
     };

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

@@ -5,19 +5,11 @@
  * @see https://w3c.github.io/aria/#tabpanel
  * @see https://w3c.github.io/aria-practices/#tabpanel
  */
-export default class TabPanel extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class TabPanel {
 }
 export type TabPanelProps = typeof __propDef.props;
 export type TabPanelEvents = typeof __propDef.events;
 export type TabPanelSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/core/tab.svelte

@@ -16,5 +16,7 @@
 </script>
 
 <Button role="tab" class="sui tab {className}" {...$$restProps}>
+  <slot name="start-icon" slot="start-icon" />
   <slot />
+  <slot name="end-icon" slot="end-icon" />
 </Button>

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

@@ -5,19 +5,11 @@
  * @see https://w3c.github.io/aria/#tab
  * @see https://w3c.github.io/aria-practices/#tabpanel
  */
-export default class Tab extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Tab {
 }
 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;
@@ -27,7 +19,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'start-icon': {
+            slot: string;
+        };
         default: {};
+        'end-icon': {
+            slot: string;
+        };
     };
 };
 export {};

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

@@ -2,46 +2,32 @@
 /** @typedef {typeof __propDef.events}  TextAreaEvents */
 /** @typedef {typeof __propDef.slots}  TextAreaSlots */
 /** @see https://w3c.github.io/aria/#textbox */
-export default class TextArea extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    name?: string;
-    element?: HTMLTextAreaElement;
-    value?: string;
-    autoResize?: boolean;
-}, {
-    click: MouseEvent;
-    input: Event;
-    keypress: KeyboardEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+export default class TextArea {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: any);
+    get class(): any;
     /**accessor*/
-    set element(arg: HTMLTextAreaElement);
-    get element(): HTMLTextAreaElement;
+    set element(arg: any);
+    get element(): any;
     /**accessor*/
-    set name(arg: string);
-    get name(): string;
+    set name(arg: any);
+    get name(): any;
     /**accessor*/
-    set value(arg: string);
-    get value(): string;
+    set value(arg: any);
+    get value(): any;
     /**accessor*/
-    set autoResize(arg: boolean);
-    get autoResize(): boolean;
+    set autoResize(arg: any);
+    get autoResize(): any;
 }
 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;
         class?: string;
-        name?: string;
         element?: (HTMLTextAreaElement | undefined);
+        name?: string;
         value?: (string | undefined);
         autoResize?: boolean;
     };

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

@@ -2,58 +2,40 @@
 /** @typedef {typeof __propDef.events}  TextInputEvents */
 /** @typedef {typeof __propDef.slots}  TextInputSlots */
 /** @see https://w3c.github.io/aria/#textbox */
-export default class TextInput extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    name?: string;
-    element?: HTMLInputElement;
-    role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
-    disabled?: boolean;
-    value?: string;
-    readOnly?: boolean;
-}, {
-    input: Event;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    change: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+export default class TextInput {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: any);
+    get class(): any;
     /**accessor*/
-    set element(arg: HTMLInputElement);
-    get element(): HTMLInputElement;
+    set element(arg: any);
+    get element(): any;
     /**accessor*/
-    set role(arg: "textbox" | "searchbox" | "combobox" | "spinbutton");
-    get role(): "textbox" | "searchbox" | "combobox" | "spinbutton";
+    set role(arg: any);
+    get role(): any;
     /**accessor*/
-    set readOnly(arg: boolean);
-    get readOnly(): boolean;
+    set readOnly(arg: any);
+    get readOnly(): any;
     /**accessor*/
-    set disabled(arg: boolean);
-    get disabled(): boolean;
+    set disabled(arg: any);
+    get disabled(): any;
     /**accessor*/
-    set name(arg: string);
-    get name(): string;
+    set name(arg: any);
+    get name(): any;
     /**accessor*/
-    set value(arg: string);
-    get value(): string;
+    set value(arg: any);
+    get value(): any;
 }
 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;
         class?: string;
-        name?: string;
         element?: (HTMLInputElement | undefined);
         role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
         disabled?: boolean;
+        name?: string;
         value?: (string | undefined);
         readOnly?: boolean;
     };

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

@@ -5,20 +5,11 @@
  * @see https://w3c.github.io/aria/#toolbar
  * @see https://w3c.github.io/aria-practices/#toolbar
  */
-export default class Toolbar extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    orientation?: "vertical" | "horizontal";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Toolbar {
 }
 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

@@ -1,6 +1,7 @@
 <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';
@@ -47,7 +48,9 @@
       {#if separator}
         <Separator />
       {:else}
-        <Button {disabled} iconName={icon} iconLabel={label} />
+        <Button {disabled}>
+          <Icon slot="start-icon" name={icon} {label} />
+        </Button>
       {/if}
     {/each}
   </Toolbar>

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

@@ -1,17 +1,11 @@
 /** @typedef {typeof __propDef.props}  MarkdownProps */
 /** @typedef {typeof __propDef.events}  MarkdownEvents */
 /** @typedef {typeof __propDef.slots}  MarkdownSlots */
-export default class Markdown extends SvelteComponentTyped<{
-    disabled?: boolean;
-    value?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+export default class Markdown {
 }
 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,13 +11,8 @@ declare class Popup {
      * @param {PopupPosition} position
      */
     constructor(anchorElement: HTMLElement, popupElement: HTMLElement, position: PopupPosition);
-    open: import("svelte/store").Writable<boolean>;
-    style: import("svelte/store").Writable<{
-        inset: any;
-        zIndex: any;
-        width: any;
-        height: any;
-    }>;
+    open: any;
+    style: any;
     observer: IntersectionObserver;
     anchorElement: HTMLElement;
     popupElement: HTMLElement;

package/package/components/helpers/popup.js

@@ -19,41 +19,53 @@ class Popup {
         return;
       }
 
-      const top = this.position.startsWith('bottom-')
+      const contentHeight = this.popupElement.querySelector('.content').scrollHeight;
+      const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
+      let { position } = this;
+
+      // @todo Handle more overflow cases
+      if (contentHeight > bottomMargin) {
+        if (position.startsWith('bottom-')) {
+          position = position.replace('bottom-', 'top-');
+        }
+      }
+
+      const top = position.startsWith('bottom-')
         ? `${Math.round(intersectionRect.bottom)}px`
-        : this.position.endsWith('-top')
+        : position.endsWith('-top')
         ? `${Math.round(intersectionRect.top)}px`
         : 'auto';
 
-      const right = this.position.startsWith('left-')
+      const right = position.startsWith('left-')
         ? `${Math.round(rootBounds.width - intersectionRect.left)}px`
-        : this.position.endsWith('-right')
+        : position.endsWith('-right')
         ? `${Math.round(rootBounds.width - intersectionRect.right)}px`
         : 'auto';
 
-      const bottom = this.position.startsWith('top-')
+      const bottom = position.startsWith('top-')
         ? `${Math.round(rootBounds.height - intersectionRect.top)}px`
-        : this.position.endsWith('-bottom')
+        : position.endsWith('-bottom')
         ? `${Math.round(rootBounds.height - intersectionRect.bottom)}px`
         : 'auto';
 
-      const left = this.position.startsWith('right-')
+      const left = position.startsWith('right-')
         ? `${Math.round(intersectionRect.right)}px`
-        : this.position.endsWith('-left')
+        : position.endsWith('-left')
         ? `${Math.round(intersectionRect.left)}px`
         : 'auto';
 
-      const width = `${Math.round(intersectionRect.width)}px`;
-      const height = `${Math.round(rootBounds.height - intersectionRect.bottom - 8)}px`;
       const anchorPopup = this.anchorElement.closest('.popup');
 
-      // @todo fix the final position
-      this.style.set({
+      const style = {
         inset: [top, right, bottom, left].join(' '),
         zIndex: anchorPopup ? Number(anchorPopup.style.zIndex) + 1 : 1000,
-        width,
-        height,
-      });
+        width: `${Math.round(intersectionRect.width)}px`,
+        height: `${Math.round(Math.max(bottomMargin, contentHeight))}px`,
+      };
+
+      if (JSON.stringify(style) !== JSON.stringify(get(this.style))) {
+        this.style.set(style);
+      }
     });
   });
 
@@ -104,7 +116,7 @@ class Popup {
     this.open.subscribe((open) => {
       if (open) {
         this.checkPosition();
-      } else {
+      } else if (this.anchorElement.getAttribute('aria-expanded') === 'true') {
         this.anchorElement.focus();
       }
 

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

@@ -6,21 +6,11 @@
  * 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 extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    dragover: DragEvent;
-    drop: DragEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class AppShell {
 }
 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

@@ -43,25 +43,33 @@
     }
   }
 
+  const openDialog = () => {
+    window.clearTimeout(closeDialogTimer);
+    (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
+    showContent = true;
+    dialog.showModal();
+
+    window.requestAnimationFrame(() => {
+      showDialog = true;
+    });
+  };
+
+  const closeDialog = () => {
+    showDialog = false;
+
+    closeDialogTimer = window.setTimeout(() => {
+      showContent = false;
+      dialog?.close();
+      dialog?.remove();
+    }, 500);
+  };
+
   $: {
     if (dialog) {
       if ($open) {
-        window.clearTimeout(closeDialogTimer);
-        (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
-        showContent = true;
-        dialog.showModal();
-
-        window.requestAnimationFrame(() => {
-          showDialog = true;
-        });
+        openDialog();
       } else {
-        showDialog = false;
-
-        closeDialogTimer = window.setTimeout(() => {
-          showContent = false;
-          dialog?.close();
-          dialog?.remove();
-        }, 500);
+        closeDialog();
       }
     }
   }
@@ -77,7 +85,7 @@
   });
 </script>
 
-<dialog class="sui popup" bind:this={dialog} class:open={showDialog}>
+<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 -->

package/package/components/util/popup.svelte.d.ts

@@ -2,39 +2,30 @@
 /** @typedef {typeof __propDef.events}  PopupEvents */
 /** @typedef {typeof __propDef.slots}  PopupSlots */
 /** Generic popup helper. */
-export default class Popup extends SvelteComponentTyped<{
-    dialog?: HTMLElement;
-    anchor?: HTMLElement;
-    position?: any;
-    open?: import("svelte/store").Writable<boolean>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Popup {
     /**accessor*/
-    set anchor(arg: HTMLElement);
-    get anchor(): HTMLElement;
+    set anchor(arg: any);
+    get anchor(): any;
     /**accessor*/
-    set dialog(arg: HTMLElement);
-    get dialog(): HTMLElement;
+    set dialog(arg: any);
+    get dialog(): any;
     /**accessor*/
     set position(arg: any);
     get position(): any;
     /**accessor*/
-    set open(arg: import("svelte/store").Writable<boolean>);
-    get open(): import("svelte/store").Writable<boolean>;
+    set open(arg: any);
+    get open(): any;
 }
 export type PopupProps = typeof __propDef.props;
 export type PopupEvents = typeof __propDef.events;
 export type PopupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         dialog?: (HTMLElement | undefined);
-        anchor?: (HTMLElement | undefined);
         position?: any;
-        open?: import("svelte/store").Writable<boolean>;
+        anchor?: (HTMLElement | undefined);
+        open?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/util/portal.svelte.d.ts

@@ -2,18 +2,11 @@
 /** @typedef {typeof __propDef.events}  PortalEvents */
 /** @typedef {typeof __propDef.slots}  PortalSlots */
 /** @see https://github.com/sveltejs/svelte/issues/3088 */
-export default class Portal extends SvelteComponentTyped<{
-    class?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Portal {
 }
 export type PortalProps = typeof __propDef.props;
 export type PortalEvents = typeof __propDef.events;
 export type PortalSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;

package/package/index.d.ts

@@ -29,6 +29,7 @@ export { default as Row } from "./components/core/row.svelte";
 export { default as SearchBar } from "./components/core/search-bar.svelte";
 export { default as SelectButton } from "./components/core/select-button.svelte";
 export { default as Separator } from "./components/core/separator.svelte";
+export { default as Slider } from "./components/core/slider.svelte";
 export { default as Spacer } from "./components/core/spacer.svelte";
 export { default as Switch } from "./components/core/switch.svelte";
 export { default as TabPanel } from "./components/core/tab-panel.svelte";

package/package/index.js

@@ -54,6 +54,7 @@ export { default as Row } from './components/core/row.svelte';
 export { default as SearchBar } from './components/core/search-bar.svelte';
 export { default as SelectButton } from './components/core/select-button.svelte';
 export { default as Separator } from './components/core/separator.svelte';
+export { default as Slider } from './components/core/slider.svelte';
 export { default as Spacer } from './components/core/spacer.svelte';
 export { default as Switch } from './components/core/switch.svelte';
 export { default as TabPanel } from './components/core/tab-panel.svelte';

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "MIT",
   "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package -o package",
     "build:watch": "svelte-kit sync && svelte-package -o package --watch",
     "preview": "vite preview",
-    "publish": "vite build && npm publish --access public",
+    "prepublishOnly": "vite build",
     "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
     "format": "prettier --plugin-search-dir . --write .",
@@ -24,34 +27,34 @@
     "svelte": "^3.55.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.21.4",
     "@babel/eslint-parser": "^7.21.3",
-    "@playwright/test": "^1.31.2",
+    "@playwright/test": "^1.32.1",
     "@sveltejs/adapter-auto": "2.0.0",
-    "@sveltejs/kit": "1.11.0",
+    "@sveltejs/kit": "1.15.0",
     "@sveltejs/package": "^2.0.2",
-    "cspell": "^6.29.3",
-    "eslint": "^8.36.0",
+    "cspell": "^6.31.1",
+    "eslint": "^8.37.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.7.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-svelte3": "^4.0.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",
     "postcss-html": "^1.5.0",
-    "prettier": "^2.8.4",
-    "prettier-plugin-svelte": "^2.9.0",
-    "sass": "^1.59.3",
-    "stylelint": "^15.2.0",
+    "prettier": "^2.8.7",
+    "prettier-plugin-svelte": "^2.10.0",
+    "sass": "^1.60.0",
+    "stylelint": "^15.4.0",
     "stylelint-config-recommended-scss": "^9.0.1",
-    "stylelint-scss": "^4.5.0",
+    "stylelint-scss": "^4.6.0",
     "svelte-check": "^3.1.4",
     "svelte-i18n": "^3.6.0",
     "svelte-migrate": "^1.1.3",
-    "svelte-preprocess": "^5.0.2",
+    "svelte-preprocess": "^5.0.3",
     "tslib": "^2.5.0",
-    "vite": "^4.2.0",
-    "vitest": "^0.29.3"
+    "vite": "^4.2.1",
+    "vitest": "^0.29.8"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -210,6 +213,11 @@
       "svelte": "./package/components/core/separator.svelte",
       "default": "./package/components/core/separator.svelte"
     },
+    "./components/core/slider.svelte": {
+      "types": "./package/components/core/slider.svelte.d.ts",
+      "svelte": "./package/components/core/slider.svelte",
+      "default": "./package/components/core/slider.svelte"
+    },
     "./components/core/spacer.svelte": {
       "types": "./package/components/core/spacer.svelte.d.ts",
       "svelte": "./package/components/core/spacer.svelte",